:root {
            --bg: #000;
            --text: #f0f2f0;
            --muted: #8f9691;
            --green: #43c72b;

            --floor-anchor-top: 50%;
            --floor-glow-top: 106%;
            --reflection-start: 88.6%;
            --float-duration: 5.4s;
            --glow-duration: 5.8s;

            --floor-glow-spread-cube-low: 0.94;
            --floor-glow-spread-cube-high: 1.10;
            --floor-glow-brightness-cube-low: 1.12;
            --floor-glow-brightness-cube-high: 0.86;

            --cube-size: min(70svh, 88vw);
            --reflection-height: 60%;

            --plane-top: 78%;
            --plane-width: 150vw;
            --plane-height: 46svh;
            --plane-opacity: 0.92;

            --pcb-height: 48svh;
        }

        * { box-sizing: border-box; }
        html { background: var(--bg); }

        body {
            margin: 0;
            min-width: 320px;
            background: var(--bg);
            color: var(--text);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            overflow-x: hidden;
        }

        .hero {
            position: relative;
            min-height: 100svh;
            isolation: isolate;
            overflow: hidden;
            background: #000;
        }

        .identity {
            position: absolute;
            z-index: 20;
            top: clamp(26px, 5vh, 58px);
            left: 50%;
            width: min(92vw, 800px);
            transform: translateX(-50%);
            text-align: center;
            text-transform: uppercase;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95);
        }

        .identity h1 {
            margin: 0;
            font-size: clamp(1.75rem, 3.2vw, 2.8rem);
            font-weight: 650;
            letter-spacing: 0.055em;
        }

        .brand {
            margin: 8px 0 0;
            color: var(--green);
            font-size: clamp(0.92rem, 1.55vw, 1.16rem);
            font-weight: 650;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }

        .role {
            margin: 10px 0 0;
            color: #bec4bf;
            font-size: clamp(0.78rem, 1.25vw, 0.98rem);
            font-weight: 350;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .contact {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px 15px;
            margin-top: 15px;
            color: var(--muted);
            font-size: clamp(0.67rem, 1vw, 0.80rem);
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .contact-button {
            color: #adb4af;
            text-decoration: none;
            transition: color 180ms ease;
        }

        .contact-button:hover { color: var(--green); }

        .contact-item {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .contact-icon {
            color: inherit;
            font-size: 0.95em;
            line-height: 1;
        }

        .contact-wrap {
            position: relative;
        }

        .contact-button {
            padding: 0;
            border: 0;
            background: transparent;
            font: inherit;
            letter-spacing: inherit;
            text-transform: inherit;
            cursor: pointer;
        }

        .contact-menu {
            position: absolute;
            z-index: 60;
            top: calc(100% + 10px);
            left: 50%;
            display: none;
            min-width: 190px;
            padding: 7px;
            transform: translateX(-50%);
            border: 1px solid rgba(143, 150, 145, 0.24);
            border-radius: 10px;
            background: rgba(5, 7, 6, 0.96);
            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.72);
            text-align: left;
        }

        .contact-menu.open {
            display: grid;
            gap: 2px;
        }

        .contact-menu a,
        .contact-menu button {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 12px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #adb4af;
            font: inherit;
            letter-spacing: 0.06em;
            text-align: left;
            text-decoration: none;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
        }

        .contact-menu i {
            width: 18px;
            flex-shrink: 0;
            font-size: 15px;
            text-align: center;
        }

        .contact-menu a:hover,
        .contact-menu button:hover {
            background: rgba(67, 199, 43, 0.09);
            color: var(--text);
        }

        .scene-stage {
            position: absolute;
            z-index: 5;
            inset: 0;
            pointer-events: none;
        }

        .plane-anchor {
            position: absolute;
            z-index: 0;
            left: 50%;
            top: var(--plane-top);
            width: var(--plane-width);
            height: var(--plane-height);
            transform: translate(-50%, -50%);
            opacity: var(--plane-opacity);
            overflow: visible;
			
			perspective: 800px;
        }

        .plane-surface {
            position: absolute;
            inset: 0;
            overflow: hidden;
            
            filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.42));
			
			transform: rotateX(40deg);
			transform-origin: center bottom;
        }

        .plane-fill {
            position: absolute;
            z-index: 0;
            inset: 0;
            background: linear-gradient(to top,
                rgba(16, 19, 18, 0.34) 0%,
                rgba(11, 13, 12, 0.22) 36%,
                rgba(6, 7, 7, 0.06) 72%,
                transparent 100%);
        }

        .plane-pcb-frame {
            position: absolute;
            z-index: 2;
            left: 50%;
            bottom: 0;
            height: var(--pcb-height);
            aspect-ratio: 16 / 9;
            width: auto;
            transform: translateX(-50%);
            overflow: hidden;
            
        }

        .pcb-layer {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .pcb-trace {
            fill: none;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pcb-trace.main {
            stroke: rgb(154, 160, 156);
            stroke-opacity: 0.54;
        }

        .pcb-trace.soft {
            stroke: rgb(132, 137, 134);
            stroke-opacity: 0.40;
        }

        .pcb-pad {
            fill: #000;
            stroke: grey;
            stroke-width: 4;
        }

        .pcb-pulse-glow,
        .pcb-pulse-core {
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: none;
        }

        .pcb-pulse-glow {
            stroke: rgb(74, 255, 82);
            filter: url(#pulseGlow);
        }

        .pcb-pulse-core {
            stroke: rgb(205, 255, 198);
            filter: url(#pulseGlow);
        }

        .plane-side-fade,
        .plane-fade,
        .plane-front-fade {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .plane-side-fade {
            z-index: 5;
            background: linear-gradient(to right,
                #000 0%,
				#000 34%,

				rgba(0, 0, 0, 0.85) 36%,
				rgba(0, 0, 0, 0.60) 39%,
				rgba(0, 0, 0, 0.30) 42%,
				transparent 44%,

				transparent 56%,

				rgba(0, 0, 0, 0.30) 58%,
				rgba(0, 0, 0, 0.60) 61%,
				rgba(0, 0, 0, 0.85) 64%,

				#000 66%,
				#000 100%);
        }

        .plane-fade {
            z-index: 4;
            background: linear-gradient(to top,
                transparent 0%,
                transparent 40%,
                rgba(0, 0, 0, 0.10) 51%,
                rgba(0, 0, 0, 0.42) 62%,
                rgba(0, 0, 0, 0.76) 72%,
                rgba(0, 0, 0, 0.95) 81%,
                #000 88%,
                #000 100%);
        }

        .plane-front-fade {
            z-index: 4;
            background: linear-gradient(to bottom,
                transparent 0%,
                transparent 67%,
                rgba(0, 0, 0, 0.10) 73%,
                rgba(0, 0, 0, 0.38) 80%,
                rgba(0, 0, 0, 0.74) 89%,
                rgba(0, 0, 0, 0.96) 96%,
                #000 100%);
        }

        .plane-horizon-glow {
            position: absolute;
            left: 50%;
            top: 2%;
            width: 26%;
            height: 10%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(ellipse,
                rgba(220, 230, 224, 0.12) 0%,
                rgba(120, 128, 124, 0.06) 36%,
                transparent 76%);
            filter: blur(14px);
            opacity: 0.16;
        }

        .cube-float {
            position: absolute;
            inset: 0;
            animation: floatCube var(--float-duration) cubic-bezier(0.42, 0, 0.58, 1) infinite;
        }

        .cube-anchor,
        .floor-anchor,
        .reflection-anchor {
            position: absolute;
            left: 50%;
            width: var(--cube-size);
            aspect-ratio: 1;
            transform: translate(-50%, -50%);
            overflow: visible;
        }

        .cube-anchor,
        .reflection-anchor { top: 57%; }
        .floor-anchor { top: var(--floor-anchor-top); }

        .cube-anchor { z-index: 5; }
        .floor-anchor { z-index: 3; }
        .reflection-anchor { z-index: 2; }

        .cube-glow,
        .cube-image {
            position: absolute;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .cube-glow {
            z-index: 1;
            inset: -4.3%;
            background-image: url('gloooow.png');
            opacity: 0.62;
            animation: breatheGlow var(--glow-duration) ease-in-out infinite;
        }

        .cube-image {
            z-index: 5;
            inset: 0;
            background-image: url('cube_only.png');
            filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.92));
        }

        .floor-glow-distance {
            position: absolute;
            z-index: 3;
            left: 50%;
            top: var(--floor-glow-top);
            width: 82%;
            height: 13%;
            transform: translate(-50%, -50%) scaleX(var(--floor-glow-spread-cube-low));
            transform-origin: center;
            animation: floorGlowDistance var(--float-duration) cubic-bezier(0.42, 0, 0.58, 1) infinite;
            will-change: transform, filter;
        }

        .floor-glow {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(ellipse,
                rgba(85, 255, 43, 0.34) 0%,
                rgba(60, 220, 37, 0.15) 36%,
                rgba(30, 120, 23, 0.05) 58%,
                transparent 76%);
            filter: blur(16px);
            animation: floorGlowIntensity var(--glow-duration) ease-in-out infinite;
            will-change: opacity;
        }

        .reflection-float {
            position: absolute;
            inset: 0;
            animation: reflectionFloat var(--float-duration) cubic-bezier(0.42, 0, 0.58, 1) infinite;
            will-change: transform;
        }

        .reflection-clip {
            position: absolute;
            z-index: 2;
            left: 0;
            top: var(--reflection-start);
            width: 100%;
            height: var(--reflection-height);
            overflow: hidden;

            -webkit-mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.82) 0%,
                rgba(0, 0, 0, 0.58) 28%,
                rgba(0, 0, 0, 0.25) 62%,
                transparent 100%);
            mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.82) 0%,
                rgba(0, 0, 0, 0.58) 28%,
                rgba(0, 0, 0, 0.25) 62%,
                transparent 100%);
        }

        .reflection {
            position: absolute;
            inset: 0;
            background-image: url('cube_only.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            transform: scaleY(-1);
            opacity: 0.34;
            filter: blur(1.1px) brightness(0.72) saturate(0.92);
        }

        @keyframes floatCube {
            0%, 100% { transform: translateY(9px); }
            50% { transform: translateY(-15px); }
        }

        @keyframes reflectionFloat {
            0%, 100% { transform: translateY(-9px); }
            50% { transform: translateY(15px); }
        }

        @keyframes breatheGlow {
            0%, 100% { opacity: 0.43; transform: scale(0.985); }
            50% { opacity: 0.80; transform: scale(1.015); }
        }

        @keyframes floorGlowIntensity {
            0%, 100% { opacity: 0.43; }
            50% { opacity: 0.80; }
        }

        @keyframes floorGlowDistance {
            0%, 100% {
                transform: translate(-50%, -50%) scaleX(var(--floor-glow-spread-cube-low));
                filter: brightness(var(--floor-glow-brightness-cube-low));
            }
            50% {
                transform: translate(-50%, -50%) scaleX(var(--floor-glow-spread-cube-high));
                filter: brightness(var(--floor-glow-brightness-cube-high));
            }
        }

        .fog-layer {
            position: absolute;
            inset: 0;
            top: 26%;
            overflow: hidden;
            pointer-events: none;
        }

        .fog-back { z-index: 4; }
        .fog-front { z-index: 6; }

        .fog {
            position: absolute;
            left: var(--fog-left, 50%);
            bottom: var(--fog-bottom, -8%);
            width: var(--fog-width, min(86vw, 1040px));
            max-width: none;
            opacity: 0;
            transform: translateX(-50%) scale(1);
            transform-origin: center bottom;
            object-fit: contain;
            filter: blur(var(--fog-blur, 2px));
            mix-blend-mode: screen;
            will-change: transform, opacity;
            animation: fogDrift var(--fog-duration, 40s) ease-in-out infinite;
            animation-delay: var(--fog-delay, 0s);

            -webkit-mask-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.00) 0%,
                rgba(0, 0, 0, 0.50) 8%,
                rgba(0, 0, 0, 0.88) 15%,
                #000 24%,
                #000 78%,
                rgba(0, 0, 0, 0.62) 88%,
                rgba(0, 0, 0, 0.00) 100%
            );
            mask-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.00) 0%,
                rgba(0, 0, 0, 0.50) 8%,
                rgba(0, 0, 0, 0.88) 15%,
                #000 24%,
                #000 78%,
                rgba(0, 0, 0, 0.62) 88%,
                rgba(0, 0, 0, 0.00) 100%
            );
        }

        .fog-back .fog {
            opacity: var(--fog-opacity, 0.22);
        }

        .fog-front .fog {
            opacity: var(--fog-opacity, 0.15);
        }

        .fog-back-1 {
            --fog-left: 47%;
            --fog-bottom: -4%;
            --fog-width: min(90vw, 1160px);
            --fog-opacity: 0.22;
            --fog-duration: 40s;
            --fog-delay: -9s;
            --fog-blur: 2.2px;
        }

        .fog-back-2 {
            --fog-left: 54%;
            --fog-bottom: -9%;
            --fog-width: min(104vw, 1280px);
            --fog-opacity: 0.17;
            --fog-duration: 50s;
            --fog-delay: -22s;
            --fog-blur: 3.0px;
        }

        .fog-back-3 {
            --fog-left: 43%;
            --fog-bottom: -6%;
            --fog-width: min(82vw, 980px);
            --fog-opacity: 0.19;
            --fog-duration: 35s;
            --fog-delay: -3s;
            --fog-blur: 1.8px;
        }

        .fog-back-4 {
            --fog-left: 58%;
            --fog-bottom: -11%;
            --fog-width: min(92vw, 1120px);
            --fog-opacity: 0.14;
            --fog-duration: 44s;
            --fog-delay: -30s;
            --fog-blur: 3.2px;
        }

        .fog-front-1 {
            --fog-left: 48%;
            --fog-bottom: -10%;
            --fog-width: min(82vw, 980px);
            --fog-opacity: 0.14;
            --fog-duration: 30s;
            --fog-delay: -12s;
            --fog-blur: 1.5px;
        }

        .fog-front-2 {
            --fog-left: 55%;
            --fog-bottom: -13%;
            --fog-width: min(94vw, 1140px);
            --fog-opacity: 0.11;
            --fog-duration: 43s;
            --fog-delay: -26s;
            --fog-blur: 2.4px;
        }

        .fog-front-3 {
            --fog-left: 42%;
            --fog-bottom: -8%;
            --fog-width: min(74vw, 880px);
            --fog-opacity: 0.10;
            --fog-duration: 33s;
            --fog-delay: -18s;
            --fog-blur: 1.9px;
        }

        @keyframes fogDrift {
            0% {
                opacity: 0;
                transform: translateX(-56%) translateY(0) scale(0.98);
            }
            16% {
                opacity: var(--fog-opacity, 0.18);
            }
            48% {
                opacity: calc(var(--fog-opacity, 0.18) * 0.96);
                transform: translateX(-51%) translateY(-2%) scale(1.12);
            }
            78% {
                opacity: calc(var(--fog-opacity, 0.18) * 0.50);
            }
            100% {
                opacity: 0;
                transform: translateX(-45%) translateY(-4.5%) scale(1.36);
            }
        }

        .thoughts {
            position: absolute;
            z-index: 16;
            left: 50%;
            bottom: clamp(18px, 3.2vh, 36px);
            width: min(92vw, 900px);
            min-height: 78px;
            transform: translateX(-50%);
            text-align: center;
            pointer-events: none;
            text-shadow: 0 2px 14px #000, 0 0 20px #000;
        }

        .thought-title {
            margin: 0 0 11px;
            color: rgba(225, 229, 226, 0.84);
            font-size: clamp(0.80rem, 1.25vw, 0.98rem);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 1100ms ease, transform 1100ms ease;
        }

        .thought-words {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            min-height: 28px;
            color: rgba(193, 199, 194, 0.68);
            font-size: clamp(0.73rem, 1.16vw, 0.90rem);
            font-weight: 320;
            letter-spacing: 0.055em;
            text-transform: uppercase;
        }

        .thought-word {
            display: inline-flex;
            align-items: center;
            opacity: 0;
            transform: translateY(3px);
            filter: blur(2px);
            transition: opacity 1350ms ease, transform 1350ms ease, filter 1350ms ease;
        }

        .thought-word:not(:last-child)::after {
            content: ".";
            margin: 0 11px;
            color: rgba(176, 183, 177, 0.36);
        }

        .thoughts.show-title .thought-title,
        .thought-word.visible {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        .thoughts.fading .thought-title,
        .thoughts.fading .thought-word {
            opacity: 0;
            transform: translateY(-3px);
            filter: blur(1.5px);
            transition-duration: 1500ms;
        }

        @media (max-width: 700px) {
            :root {
                --cube-size: min(64svh, 94vw);
				--plane-top: 78%;
				--plane-width: 120vw;
				--plane-height: 46svh;
				--pcb-height: 48svh;
            }

            .identity { 
				top: clamp(22px, 3.8vh, 38px); 
				width: 96vw;
			}
            .identity h1 { font-size: clamp(1.8rem, 8.5vw, 2.5rem); }
            .brand {
		        font-size: clamp(0.88rem, 4.4vw, 1.18rem);
		    }
		
		    .role {
		        font-size: clamp(0.76rem, 3.7vw, 1rem);
		    }
		
		    .contact {
		        margin-top: 12px;
		        font-size: clamp(0.68rem, 3.25vw, 0.86rem);
		    }

            .cube-anchor,
            .reflection-anchor { top: 57.5%; }
            .floor-anchor { top: var(--floor-anchor-top); }
            .thoughts { bottom: max(15px, env(safe-area-inset-bottom)); min-height: 94px; }
            .thought-words { line-height: 1.6; }

            .fog-layer { top: 31%; }
            .fog-back-1 {
                --fog-width: 124vw;
                --fog-bottom: -2%;
                --fog-opacity: 0.20;
            }
            .fog-back-2 {
                --fog-width: 142vw;
                --fog-bottom: -7%;
                --fog-opacity: 0.15;
            }
            .fog-back-3 {
                --fog-width: 116vw;
                --fog-bottom: -4%;
                --fog-opacity: 0.17;
            }
            .fog-back-4 {
                --fog-width: 132vw;
                --fog-bottom: -9%;
                --fog-opacity: 0.12;
            }
            .fog-front-1 {
                --fog-width: 108vw;
                --fog-bottom: -9%;
                --fog-opacity: 0.12;
            }
            .fog-front-2 {
                --fog-width: 122vw;
                --fog-bottom: -12%;
                --fog-opacity: 0.10;
            }
            .fog-front-3 {
                --fog-width: 98vw;
                --fog-bottom: -7%;
                --fog-opacity: 0.09;
            }
			
			.plane-side-fade {
				background: linear-gradient(to right,
					#000 0%,
					#000 8%,

					rgba(0, 0, 0, 0.92) 12%,
					rgba(0, 0, 0, 0.72) 16%,
					rgba(0, 0, 0, 0.50) 20%,
					rgba(0, 0, 0, 0.30) 24%,
					rgba(0, 0, 0, 0.14) 27%,
					transparent 30%,

					transparent 70%,

					rgba(0, 0, 0, 0.14) 73%,
					rgba(0, 0, 0, 0.30) 76%,
					rgba(0, 0, 0, 0.50) 80%,
					rgba(0, 0, 0, 0.72) 84%,
					rgba(0, 0, 0, 0.92) 88%,

					#000 92%,
					#000 100%);
			}
        }

        @media (max-height: 700px) and (min-width: 701px) {
            :root {
                --plane-top: 75%;
                --plane-height: 50svh;
                --pcb-height: 50svh;
            }

            .identity { top: 20px; }
            .identity h1 { font-size: 1.75rem; }
            .brand { font-size: 0.86rem; }
            .role { margin-top: 6px; font-size: 0.74rem; }
            .contact { margin-top: 8px; font-size: 0.66rem; }
            .cube-anchor,
            .reflection-anchor { top: 59%; }
            .floor-anchor { top: var(--floor-anchor-top); }
        }

        @media (prefers-reduced-motion: reduce) {
            .cube-float,
            .reflection-float,
            .cube-glow,
            .floor-glow-distance,
            .floor-glow,
            .fog { animation: none !important; }

            .thought-title,
            .thought-word { transition-duration: 120ms; }
        }