*,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        /* Custom sleek dark/cyan scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }
        ::-webkit-scrollbar-track {
            background: rgba(8, 8, 8, 0.95)
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(0, 212, 255, 0.25);
            border-radius: 3px;
            transition: background 0.3s
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 212, 255, 0.6)
        }

        /* Custom selection highlight */
        ::selection {
            background: rgba(0, 212, 255, 0.25);
            color: var(--white)
        }
        ::-moz-selection {
            background: rgba(0, 212, 255, 0.25);
            color: var(--white)
        }

        :root {
            --bg: #080808;
            --bg2: #0a0a0a;
            --card: #161616;
            --card-glass: rgba(16, 16, 16, 0.45);
            --card2: #1a1a1a;
            --cyan: #00D4FF;
            --cyan-dim: rgba(0, 212, 255, .30);
            --cyan-glow: rgba(0, 212, 255, .20);
            --white: #fff;
            --muted: rgba(255, 255, 255, 0.45);
            --dim: rgba(255, 255, 255, 0.65);
            --fh: 'Orbitron', sans-serif;
            --fu: 'Exo 2', sans-serif;
            --fb: 'Syne', sans-serif;
            --pad-x: clamp(20px, 5vw, 80px);
            --max-w: 1200px;
            --s-xl: clamp(64px, 9vw, 120px);
            --s-lg: clamp(40px, 6vw, 80px);
            --s-md: clamp(24px, 4vw, 48px);
            --s-sm: clamp(12px, 2vw, 24px);
        }

        html {
            scroll-behavior: smooth;
        }

        /* ══════════════════════════════
           PREMIUM INTERACTIVE STYLES
        ══════════════════════════════ */
        @media (pointer: fine) {
            * {
                cursor: none !important;
            }
        }

        #cursor-dot {
            position: fixed;
            top: 0; left: 0;
            width: 8px; height: 8px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
            border-radius: 50%;
            pointer-events: none;
            z-index: 99999;
            transform: translate(-50%, -50%);
            transition: width 0.2s, height 0.2s;
            mix-blend-mode: screen;
        }

        #cursor-trail {
            position: fixed;
            top: 0; left: 0;
            width: 32px; height: 32px;
            border: 1px solid rgba(0, 212, 255, 0.4);
            border-radius: 50%;
            pointer-events: none;
            z-index: 99998;
            transform: translate(-50%, -50%);
            transition: width 0.2s, height 0.2s, border-color 0.2s;
        }

        /* Magnetic Button Base */
        .magnetic-btn {
            display: inline-block;
            transition: transform 0.1s linear, box-shadow 0.3s;
        }

        /* Glass Card Flashlight Glow */
        .glow-card {
            position: relative;
            overflow: hidden;
            --mouse-x: 50%;
            --mouse-y: 50%;
        }
        
        .glow-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 212, 255, 0.08), transparent 40%);
            z-index: 0;
            pointer-events: none;
            transition: opacity 0.5s;
            opacity: 0;
        }

        .glow-card:hover::before {
            opacity: 1;
        }

        /* Staggered Scroll Reveals */
        .reveal-item {
            opacity: 0;
            transform: translateY(30px) scale(0.98);
            transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }
        
        .reveal-item.visible {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
        }

        body {
            background: var(--bg);
            color: var(--white);
            font-family: var(--fb);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            line-height: 1.6;
        }

        /* ambient background orbs removed for a minimalistic premium look */

        img,
        svg {
            display: block;
            max-width: 100%
        }

        a {
            text-decoration: none;
            color: inherit
        }

        button {
            font-family: inherit
        }

        /* grain */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            opacity: .028;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
        }

        /* scrollbar */
        ::-webkit-scrollbar {
            width: 3px
        }

        ::-webkit-scrollbar-track {
            background: var(--bg)
        }

        ::-webkit-scrollbar-thumb {
            background: var(--cyan);
            border-radius: 2px
        }

        /* progress */
        #progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            width: 0%;
            z-index: 2000;
            background: linear-gradient(90deg, #00D4FF, rgba(0, 212, 255, .4));
            box-shadow: 0 0 8px rgba(0, 212, 255, .6);
            transition: width .1s linear
        }

        /* cursor */
        #cursor,
        #cursor-ring {
            pointer-events: none;
            position: fixed;
            z-index: 9999;
            transform: translate(-50%, -50%)
        }

        #cursor {
            width: 8px;
            height: 8px;
            background: var(--cyan);
            border-radius: 50%;
            transition: width .2s, height .2s, opacity .2s;
            mix-blend-mode: difference
        }

        #cursor-ring {
            z-index: 9998;
            width: 32px;
            height: 32px;
            border: 1px solid var(--cyan-dim);
            border-radius: 50%;
            transition: width .2s, height .2s, opacity .15s;
            opacity: .55
        }

        body:has(a:hover, button:hover, .team-card:hover, .pillar:hover) #cursor {
            width: 16px;
            height: 16px
        }

        body:has(a:hover, button:hover, .team-card:hover, .pillar:hover) #cursor-ring {
            width: 48px;
            height: 48px;
            opacity: .2
        }

        @media(hover:none) {

            #cursor,
            #cursor-ring {
                display: none
            }

            html {
                cursor: auto
            }
        }

        /* ── nav ── */
        nav {
            position: fixed;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            width: min(1600px, calc(100% - 48px));
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 clamp(16px, 3vw, 32px);
            height: clamp(60px, 8vh, 72px);
            border-radius: 40px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(10, 10, 10, 0.45);
            backdrop-filter: blur(24px) saturate(190%);
            -webkit-backdrop-filter: blur(24px) saturate(190%);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.12);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        nav.scrolled {
            top: 10px;
            width: min(1500px, calc(100% - 64px));
            background: rgba(8, 8, 8, 0.65);
            height: clamp(54px, 7vh, 64px);
            border: 1px solid rgba(0, 212, 255, 0.25);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 212, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.08);
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .nav-logo img {
            height: clamp(24px, 3vw, 34px);
            width: auto;
        }

        .nav-logo span {
            font-family: var(--fh);
            font-size: clamp(0.95rem, 1.3vw, 1.3rem);
            letter-spacing: .15em;
            font-weight: 900;
            text-transform: uppercase
        }

        .nav-logo span .logo-pixel {
            color: var(--white)
        }

        .nav-logo span .logo-drive {
            color: #00d4ff
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: clamp(10px, 1.4vw, 24px);
            list-style: none
        }

        .nav-links a {
            font-family: var(--fu);
            font-size: clamp(0.6rem, 0.72vw, 0.76rem);
            letter-spacing: .12em;
            color: var(--muted);
            text-transform: uppercase;
            transition: color .25s;
            position: relative;
            padding-bottom: 3px
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--cyan);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .3s
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--white)
        }

        .nav-links a:hover::after,
        .nav-links a.active::after {
            transform: scaleX(1);
            transform-origin: left
        }

        /* ── Portfolio dropdown ── */
        .nav-dropdown {
            position: relative;
        }

        .nav-dropdown>a {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }

        .nav-dropdown>a .drop-arrow {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(45deg) translateY(-2px);
            transition: transform .25s;
            flex-shrink: 0;
        }

        .nav-dropdown:hover>a .drop-arrow {
            transform: rotate(-135deg) translateY(-2px);
        }

        .dropdown-menu {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(-6px);
            background: rgba(10, 10, 15, .92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 212, 255, .18);
            border-radius: 10px;
            min-width: 210px;
            padding: 8px 0;
            list-style: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .25s, transform .25s, visibility .25s;
            z-index: 2000;
            box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 212, 255, .08);
        }

        /* Invisible bridge to keep hover active */
        .dropdown-menu::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            right: 0;
            height: 20px;
        }

        .nav-dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .dropdown-menu li a {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 20px;
            font-family: var(--fu);
            font-size: clamp(.58rem, .68vw, .72rem);
            letter-spacing: .12em;
            color: var(--muted);
            text-transform: uppercase;
            text-decoration: none;
            transition: color .2s, padding-left .2s;
            white-space: nowrap;
        }

        .dropdown-menu li a::before {
            content: '';
            display: inline-block;
            width: 5px;
            height: 5px;
            background: var(--cyan);
            border-radius: 50%;
            opacity: 0;
            transition: opacity .2s;
            flex-shrink: 0;
        }

        .dropdown-menu li a::after {
            display: none !important;
        }

        .dropdown-menu li a:hover {
            color: var(--white);
            padding-left: 26px;
        }

        .dropdown-menu li a:hover::before {
            opacity: 1;
        }

        .dropdown-menu li+li {
            border-top: 1px solid rgba(255, 255, 255, .05);
        }

        /* Mobile portfolio accordion */
        .mob-port-toggle {
            background: none;
            border: none;
            font-family: var(--fu);
            font-size: clamp(.7rem, 3.5vw, 1rem);
            letter-spacing: .14em;
            color: var(--muted);
            text-transform: uppercase;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0;
        }

        .mob-port-toggle .drop-arrow {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(45deg);
            transition: transform .25s;
        }

        .mob-port-toggle.open .drop-arrow {
            transform: rotate(-135deg);
        }

        .mob-port-links {
            display: none;
            flex-direction: column;
            gap: 14px;
            padding: 14px 0 4px;
            align-items: center;
        }

        .mob-port-links.open {
            display: flex;
        }

        .mob-port-links a {
            font-family: var(--fu);
            font-size: clamp(.62rem, 3vw, .85rem);
            letter-spacing: .12em;
            color: var(--muted);
            text-transform: uppercase;
            text-decoration: none;
            transition: color .25s;
        }

        .mob-port-links a:hover {
            color: var(--cyan);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            -webkit-tap-highlight-color: transparent
        }

        .hamburger span {
            display: block;
            width: 22px;
            height: 1.5px;
            background: var(--white);
            transition: all .3s;
            border-radius: 1px
        }

        .mobile-menu {
            display: none;
            position: fixed;
            inset: 0;
            top: clamp(54px, 7vh, 64px);
            background: rgba(8, 8, 8, .98);
            backdrop-filter: blur(24px);
            z-index: 999;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(28px, 5vh, 44px);
            list-style: none
        }

        .mobile-menu.open {
            display: flex
        }

        .mobile-menu a {
            font-family: var(--fh);
            font-size: clamp(1rem, 4vw, 1.3rem);
            letter-spacing: .2em;
            text-transform: uppercase;
            transition: color .2s
        }

        .mobile-menu a:hover {
            color: var(--cyan)
        }

        @media(max-width: 1050px) {
            .nav-links {
                display: none
            }

            .hamburger {
                display: flex
            }
        }

        @media(min-width: 1051px) and (max-width: 1280px) {
            .nav-links {
                gap: 12px;
            }
            .nav-links a {
                font-size: 0.64rem;
                letter-spacing: 0.1em;
            }
        }

        /* ── animations ── */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(28px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @keyframes scan {
            0% {
                top: -2px;
                opacity: .4
            }

            60% {
                opacity: .7
            }

            100% {
                top: 100%;
                opacity: 0
            }
        }

        @keyframes glitch {

            0%,
            94% {
                transform: none;
                opacity: 1
            }

            95% {
                transform: translateX(3px);
                opacity: .9
            }

            96% {
                transform: translateX(-3px)
            }

            97% {
                transform: translateX(2px)
            }

            100% {
                transform: none;
                opacity: 1
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        @keyframes pulseGlow {
            0%, 100% {
                transform: translate(-50%, -58%) scale(1);
                opacity: 0.8
            }
            50% {
                transform: translate(-50%, -58%) scale(1.15);
                opacity: 1
            }
        }

        @keyframes rotateGlow {
            0% { transform: rotate(0deg) translate(20px, 0); }
            50% { transform: rotate(180deg) translate(-20px, 10px); }
            100% { transform: rotate(360deg) translate(20px, 0); }
        }

        @keyframes track-scan {
            0% {
                transform: translateX(-110%)
            }

            100% {
                transform: translateX(110%)
            }
        }

        @keyframes track-fill {
            0% {
                width: 0;
                opacity: 0
            }

            100% {
                width: 100%;
                opacity: 1
            }
        }

        @keyframes car-move {
            0% {
                left: 0;
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                left: calc(100% - 18px);
                opacity: 0
            }
        }

        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 212, 255, .3)
            }

            70% {
                box-shadow: 0 0 0 10px rgba(0, 212, 255, 0)
            }

            100% {
                box-shadow: 0 0 0 0 rgba(0, 212, 255, 0)
            }
        }

        @keyframes modal-in {
            from {
                opacity: 0;
                transform: translateY(32px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes modal-bg {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @keyframes line-draw {
            from {
                transform: scaleX(0)
            }

            to {
                transform: scaleX(1)
            }
        }

        @keyframes count-up {
            from {
                opacity: 0;
                transform: translateY(12px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes shimmer {
            0% {
                background-position: 200% center
            }

            100% {
                background-position: -200% center
            }
        }

        @keyframes orbit {
            from {
                transform: rotate(0deg) translateX(60px) rotate(0deg)
            }

            to {
                transform: rotate(360deg) translateX(60px) rotate(-360deg)
            }
        }

        /* reveal */
        .rv,
        .rv-l,
        .rv-r {
            opacity: 0;
            transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1)
        }

        .rv {
            transform: translateY(36px)
        }

        .rv-l {
            transform: translateX(-44px)
        }

        .rv-r {
            transform: translateX(44px)
        }

        .rv.on,
        .rv-l.on,
        .rv-r.on {
            opacity: 1;
            transform: none
        }

        .d1 {
            transition-delay: .08s
        }

        .d2 {
            transition-delay: .16s
        }

        .d3 {
            transition-delay: .24s
        }

        .d4 {
            transition-delay: .32s
        }

        .d5 {
            transition-delay: .40s
        }

        .d6 {
            transition-delay: .48s
        }

        /* ── shared ── */
        .container {
            max-width: var(--max-w);
            margin: 0 auto;
            width: 100%
        }

        section {
            padding: var(--s-xl) var(--pad-x)
        }

        .eyebrow {
            font-family: var(--fu);
            font-size: clamp(.56rem, .65vw, .68rem);
            letter-spacing: .35em;
            color: var(--cyan);
            text-transform: uppercase;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .eyebrow::before {
            content: '';
            display: block;
            width: 20px;
            height: 1px;
            background: var(--cyan);
            flex-shrink: 0
        }

        .section-title {
            font-family: var(--fh);
            font-size: clamp(1.7rem, 3.8vw, 3.4rem);
            font-weight: 900;
            line-height: 1.05;
            letter-spacing: -.02em;
            color: var(--white);
            display: inline-block
        }

        .body-text {
            font-size: clamp(.86rem, 1.05vw, 1.02rem);
            line-height: 1.9;
            color: var(--dim)
        }

        .body-text strong {
            color: var(--white)
        }

        .sep {
            width: 32px;
            height: 1px;
            background: var(--cyan-dim);
            margin: var(--s-sm) 0
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fu);
            font-size: clamp(.64rem, .72vw, .75rem);
            letter-spacing: .2em;
            font-weight: 700;
            text-transform: uppercase;
            padding: clamp(13px, 1.5vw, 17px) clamp(22px, 3vw, 40px);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: box-shadow .3s, transform .2s;
            border: none;
            clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
            -webkit-tap-highlight-color: transparent
        }

        .btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, .14);
            transform: translateX(-110%);
            transition: transform .4s
        }

        .btn:hover::before {
            transform: translateX(0)
        }

        .btn:hover {
            transform: translateY(-2px)
        }

        .btn-cyan {
            background: var(--cyan);
            color: #000
        }

        .btn-cyan:hover {
            box-shadow: 0 0 40px rgba(0, 212, 255, .5)
        }

        .btn-ghost {
            background: transparent;
            color: var(--white);
            border: 1px solid var(--cyan-dim)
        }

        .btn-ghost::before {
            background: rgba(0, 212, 255, .08)
        }

        .btn-ghost:hover {
            border-color: var(--cyan);
            box-shadow: 0 0 24px rgba(0, 212, 255, .15)
        }

        @media(max-width:420px) {
            .btn {
                clip-path: none
            }
        }

        /* ── hero ── */
        #hero {
            min-height: 100svh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding-top: clamp(60px, 8vh, 72px)
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(0, 212, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, .04) 1px, transparent 1px);
            background-size: clamp(40px, 5vw, 64px) clamp(40px, 5vw, 64px);
            mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 35%, transparent 100%)
        }

        .hero-glow {
            position: absolute;
            width: min(700px, 90vw);
            height: min(700px, 90vw);
            background: radial-gradient(circle, rgba(0, 212, 255, .07), transparent 65%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -58%);
            pointer-events: none;
            animation: pulseGlow 10s ease-in-out infinite
        }

        .hero-glow::before {
            content: '';
            position: absolute;
            inset: -100px;
            background: radial-gradient(circle, rgba(138, 43, 226, .05), transparent 70%);
            animation: rotateGlow 20s linear infinite;
            pointer-events: none;
            z-index: -1
        }

        .scan-line {
            position: absolute;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--cyan), transparent);
            opacity: .35;
            animation: scan 5s linear infinite;
            pointer-events: none;
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.2)
        }

        .bracket {
            position: absolute;
            opacity: .35;
            width: clamp(32px, 4vw, 52px);
            height: clamp(32px, 4vw, 52px);
            transition: opacity .5s, filter .5s
        }

        #hero:hover .bracket {
            opacity: .85;
            filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6))
        }

        .bracket svg {
            width: 100%;
            height: 100%
        }

        .bracket.tl {
            top: clamp(76px, 11vh, 120px);
            left: clamp(16px, 3vw, 48px)
        }

        .bracket.tr {
            top: clamp(76px, 11vh, 120px);
            right: clamp(16px, 3vw, 48px);
            transform: scaleX(-1)
        }

        .bracket.bl {
            bottom: clamp(32px, 5vh, 64px);
            left: clamp(16px, 3vw, 48px);
            transform: scaleY(-1)
        }

        .bracket.br {
            bottom: clamp(32px, 5vh, 64px);
            right: clamp(16px, 3vw, 48px);
            transform: scale(-1)
        }

        @media(max-width:600px) {
            .bracket {
                display: none
            }
        }

        #hero-particle-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.35;
            pointer-events: none; /* Let clicks pass through if needed */
        }

        .hero-content {
            position: relative;
            z-index: 10;
            text-align: center;
            padding: 0 var(--pad-x);
            max-width: min(1000px, 100%);
            width: 100%
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-family: var(--fu);
            font-size: clamp(.56rem, .7vw, .7rem);
            letter-spacing: .35em;
            color: var(--cyan);
            text-transform: uppercase;
            margin-bottom: clamp(18px, 3vw, 36px);
            opacity: 0;
            animation: fadeUp .8s .15s cubic-bezier(.22, 1, .36, 1) forwards
        }

        .hero-pill::before,
        .hero-pill::after {
            content: '';
            display: block;
            width: clamp(22px, 3vw, 44px);
            height: 1px;
            background: var(--cyan-dim)
        }

        .hero-title {
            font-family: var(--fh);
            font-size: clamp(1.85rem, 5.5vw, 5.2rem);
            font-weight: 900;
            line-height: 1.04;
            letter-spacing: -.015em;
            opacity: 0;
            animation: fadeUp .9s .35s cubic-bezier(.22, 1, .36, 1) forwards
        }

        .hero-title .hl {
            color: var(--cyan);
            position: relative;
            display: inline-block;
            animation: glitch 6s 2s infinite
        }

        .hero-title .hl::after {
            content: attr(data-t);
            position: absolute;
            left: 2px;
            top: 2px;
            color: rgba(0, 212, 255, .18);
            z-index: -1;
            pointer-events: none
        }

        .hero-sub {
            font-family: var(--fu);
            font-size: clamp(.6rem, .8vw, .82rem);
            letter-spacing: .2em;
            color: var(--muted);
            text-transform: uppercase;
            margin-top: clamp(14px, 2.5vw, 28px);
            opacity: 0;
            animation: fadeUp .8s .55s cubic-bezier(.22, 1, .36, 1) forwards
        }

        .hero-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(10px, 2vw, 22px);
            margin-top: clamp(30px, 5vw, 56px);
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeUp .8s .75s cubic-bezier(.22, 1, .36, 1) forwards
        }

        @media(max-width:420px) {
            .hero-btns {
                flex-direction: column;
                align-items: stretch;
                padding: 0 clamp(8px, 5vw, 32px)
            }
        }

        .hero-scroll {
            position: absolute;
            bottom: clamp(16px, 3vh, 32px);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            opacity: 0;
            animation: fadeIn 1s 1.4s forwards
        }

        .hero-scroll span {
            font-family: var(--fu);
            font-size: .55rem;
            letter-spacing: .3em;
            color: var(--muted);
            text-transform: uppercase
        }

        .scroll-line {
            width: 1px;
            height: clamp(28px, 4vh, 44px);
            background: linear-gradient(var(--cyan), transparent);
            animation: float 2.5s ease-in-out infinite
        }





        /* ── about ── */
        #about {
            background: var(--bg)
        }

        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
            gap: clamp(40px, 7vw, 88px);
            align-items: center;
            margin-top: clamp(36px, 6vw, 72px)
        }

        .about-text .body-text {
            margin-top: clamp(14px, 2.5vw, 28px)
        }

        .stat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(10px, 1.5vw, 16px)
        }

        .stat-card {
            background: var(--card-glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--cyan-dim);
            padding: clamp(18px, 3vw, 32px) clamp(14px, 2.5vw, 28px);
            position: relative;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyan), transparent);
            opacity: 0;
            transition: opacity .3s
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 32px var(--cyan-glow)
        }

        .stat-card:hover::before {
            opacity: 1
        }

        .stat-card::after {
            content: '+';
            position: absolute;
            top: 8px;
            left: 10px;
            font-family: var(--fh);
            font-size: 8px;
            font-weight: 300;
            color: rgba(0, 212, 255, 0.20);
            transition: color 0.3s, transform 0.3s
        }

        .stat-card:hover::after {
            color: var(--cyan);
            transform: rotate(90deg)
        }

        .stat-val {
            font-family: var(--fh);
            font-size: clamp(1.4rem, 3vw, 2.2rem);
            font-weight: 900;
            color: var(--cyan);
            letter-spacing: -.02em;
            line-height: 1
        }

        .stat-lbl {
            font-family: var(--fu);
            font-size: clamp(.54rem, .65vw, .66rem);
            letter-spacing: .2em;
            color: var(--muted);
            text-transform: uppercase;
            margin-top: 8px
        }

        /* ── stem ── */
        #stem {
            background: var(--bg2);
            position: relative;
            overflow: hidden
        }

        #stem::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 60%;
            height: 60%;
            min-width: 400px;
            background: radial-gradient(circle, rgba(0, 212, 255, .05), transparent 65%);
            pointer-events: none
        }

        #stem::after {
            content: '';
            position: absolute;
            bottom: -15%;
            right: -10%;
            width: 50%;
            height: 50%;
            min-width: 300px;
            background: radial-gradient(circle, rgba(0, 212, 255, .035), transparent 65%);
            pointer-events: none
        }

        .stem-intro {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
            gap: clamp(40px, 7vw, 88px);
            align-items: center;
            margin-bottom: clamp(56px, 9vw, 108px)
        }

        .stem-intro-text .body-text {
            margin-top: clamp(12px, 2vw, 22px)
        }

        .track-wrap {
            width: 100%;
            max-width: 480px;
            margin: 0 auto
        }

        .track-box {
            width: 100%;
            aspect-ratio: 16/7;
            border: 1px solid var(--cyan-dim);
            background: var(--card);
            position: relative;
            overflow: hidden
        }

        .track-box::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyan), transparent);
            opacity: .7;
            animation: track-scan 3.5s linear infinite
        }

        .track-inner {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px clamp(24px, 5%, 40px)
        }

        .track-lane {
            width: 100%;
            height: 10px;
            background: #1a1a1a;
            border: 1px solid rgba(255, 255, 255, .05);
            border-radius: 2px;
            position: relative
        }

        .track-lane::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyan) 10%, var(--cyan) 90%, transparent);
        }

        .track-box.launch .track-lane::before {
            animation: track-fill 0.952s cubic-bezier(.22, 1, .36, 1) forwards;
        }

        .track-car {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            width: 18px;
            height: 8px;
            background: var(--cyan);
            border-radius: 2px 6px 6px 2px;
            box-shadow: 0 0 14px var(--cyan), 0 0 4px var(--cyan);
        }

        .track-box.launch .track-car {
            animation: car-move 0.952s cubic-bezier(.16, 1, .3, 1) forwards;
        }

        .track-car, .track-lane::before {
            transition: opacity 0.4s ease;
        }

        .track-box.resetting .track-car,
        .track-box.resetting .track-lane::before {
            opacity: 0 !important;
            transition: opacity 0.3s ease;
        }

        .track-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 16px;
        }

        .track-launch-btn {
            background: transparent;
            border: 1px solid var(--cyan-dim);
            color: var(--cyan);
            font-family: var(--fu);
            font-size: 0.95rem;
            letter-spacing: 0.25em;
            padding: 14px 28px;
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.3s;
            clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
        }

        .track-launch-btn:hover {
            background: rgba(0, 212, 255, 0.1);
            border-color: var(--cyan);
            box-shadow: 0 0 12px var(--cyan-glow);
        }

        .track-launch-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .track-timer {
            font-family: var(--fh);
            color: var(--white);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            min-width: 80px;
            text-align: right;
        }

        .track-flag {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px
        }

        .track-flag.s {
            left: -1px
        }

        .track-flag.f {
            right: -1px
        }

        .track-pole {
            width: 2px;
            height: 22px;
            background: rgba(255, 255, 255, .25)
        }

        .track-chk {
            width: 18px;
            height: 12px;
            opacity: .65;
            background: repeating-conic-gradient(#fff 0% 25%, #444 25% 50%) 0/6px 6px
        }

        .track-badge {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--cyan);
            color: #000;
            font-family: var(--fh);
            font-size: clamp(.48rem, .6vw, .62rem);
            font-weight: 700;
            letter-spacing: .14em;
            padding: 4px 14px;
            white-space: nowrap;
            clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%)
        }

        .track-caption {
            text-align: center;
            margin-top: clamp(18px, 3vw, 28px);
            font-family: var(--fu);
            font-size: clamp(.54rem, .63vw, .64rem);
            letter-spacing: .25em;
            color: var(--muted);
            text-transform: uppercase
        }

        .stem-phases {
            margin-bottom: clamp(120px, 15vw, 200px)
        }

        .stem-phases-head {
            text-align: center;
            margin-bottom: clamp(32px, 6vw, 60px)
        }

        .phases {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0;
            position: relative
        }

        .phases::before {
            content: '';
            position: absolute;
            top: 36px;
            left: 9%;
            right: 9%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--cyan-dim) 15%, var(--cyan-dim) 85%, transparent);
            z-index: 0
        }

        .ph {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 1;
            padding: 0 clamp(4px, 1vw, 12px);
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
        }

        .ph.on {
            opacity: 1;
            transform: none
        }

        .ph-dot {
            width: clamp(54px, 6vw, 70px);
            height: clamp(54px, 6vw, 70px);
            border: 1px solid var(--cyan-dim);
            background: var(--card-glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: clamp(12px, 2vw, 20px);
            transition: border-color .3s, box-shadow .3s
        }

        .ph-dot::before {
            content: attr(data-n);
            position: absolute;
            top: -9px;
            right: -9px;
            font-family: var(--fh);
            font-size: .48rem;
            letter-spacing: .1em;
            color: var(--cyan);
            background: var(--bg2);
            padding: 2px 5px;
            border: 1px solid var(--cyan-dim)
        }

        .ph:hover .ph-dot {
            border-color: var(--cyan);
            box-shadow: 0 0 18px var(--cyan-glow)
        }

        .ph-title {
            font-family: var(--fh);
            font-size: clamp(.56rem, .7vw, .68rem);
            font-weight: 700;
            letter-spacing: .08em;
            margin-bottom: 6px
        }

        .ph-desc {
            font-family: var(--fu);
            font-size: clamp(.56rem, .65vw, .65rem);
            line-height: 1.6;
            color: var(--muted)
        }

        @media(max-width:860px) {
            .phases {
                grid-template-columns: repeat(3, 1fr);
                row-gap: clamp(32px, 5vw, 48px)
            }

            .phases::before {
                display: none
            }
        }

        @media(max-width:520px) {
            .phases {
                grid-template-columns: 1fr 1fr;
                row-gap: 36px
            }
        }

        .pillars-head {
            text-align: center;
            margin-bottom: clamp(32px, 6vw, 56px)
        }

        .pillars {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
            gap: clamp(12px, 1.5vw, 16px)
        }

        .pillar {
            background: var(--card);
            border: 1px solid rgba(255, 255, 255, .06);
            padding: clamp(20px, 3vw, 36px) clamp(16px, 2.5vw, 28px);
            position: relative;
            overflow: hidden;
            transition: border-color .3s, transform .35s, box-shadow .3s
        }

        .pillar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 2px;
            background: var(--cyan);
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform .4s cubic-bezier(.22, 1, .36, 1)
        }

        .pillar:hover {
            border-color: var(--cyan-dim);
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, .4)
        }

        .pillar:hover::before {
            transform: scaleY(1)
        }

        .pillar-letter {
            font-family: var(--fh);
            font-size: clamp(1.9rem, 4vw, 2.8rem);
            font-weight: 900;
            color: rgba(0, 212, 255, .1);
            line-height: 1;
            margin-bottom: clamp(10px, 1.5vw, 18px);
            transition: color .3s
        }

        .pillar:hover .pillar-letter {
            color: rgba(0, 212, 255, .22)
        }

        .pillar-title {
            font-family: var(--fh);
            font-size: clamp(.6rem, .72vw, .72rem);
            font-weight: 700;
            letter-spacing: .1em;
            color: var(--cyan);
            margin-bottom: clamp(8px, 1vw, 12px)
        }

        .pillar-text {
            font-size: clamp(.78rem, .9vw, .88rem);
            line-height: 1.8;
            color: #999
        }

        /* ── team ── */
        #team {
            background: var(--bg);
            position: relative;
            overflow: hidden
        }

        #team::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 212, 255, .04), transparent)
        }

        .team-head {
            text-align: center;
            margin-bottom: clamp(36px, 7vw, 72px)
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
            gap: clamp(12px, 2vw, 24px)
        }

        .team-card {
            background: rgba(16, 16, 16, 0.35);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 36px);
            position: relative;
            overflow: hidden;
            transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s
        }

        .team-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 212, 255, .04), transparent 55%);
            opacity: 0;
            transition: opacity .35s;
            pointer-events: none
        }

        .team-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 40px rgba(0, 212, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.15)
        }

        .team-card:hover::after {
            opacity: 1
        }

        .team-card::before {
            content: '+';
            position: absolute;
            top: 10px;
            left: 12px;
            font-family: var(--fh);
            font-size: 10px;
            font-weight: 300;
            color: rgba(0, 212, 255, 0.25);
            transition: color 0.3s, transform 0.3s
        }

        .team-card:hover::before {
            color: var(--cyan);
            transform: rotate(90deg)
        }

        .card-num {
            position: absolute;
            top: clamp(12px, 2vw, 20px);
            right: clamp(14px, 2.5vw, 24px);
            font-family: var(--fh);
            font-size: .58rem;
            letter-spacing: .18em;
            color: rgba(0, 212, 255, .18)
        }

        .card-avatar {
            width: clamp(42px, 5.5vw, 56px);
            height: clamp(42px, 5.5vw, 56px);
            border: 1px solid var(--cyan-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: clamp(14px, 2.5vw, 22px);
            font-family: var(--fh);
            font-size: clamp(.68rem, .9vw, .9rem);
            font-weight: 700;
            color: var(--cyan);
            background: rgba(0, 212, 255, .04);
            transition: background .3s, border-color .3s
        }

        .team-card:hover .card-avatar {
            background: rgba(0, 212, 255, .08);
            border-color: var(--cyan)
        }

        .card-name {
            font-family: var(--fh);
            font-size: clamp(.82rem, 1.2vw, 1.1rem);
            font-weight: 700;
            letter-spacing: .02em
        }

        .card-div {
            width: 28px;
            height: 1px;
            background: var(--cyan-dim);
            margin: clamp(10px, 1.8vw, 18px) 0
        }

        .card-role {
            font-family: var(--fu);
            font-size: clamp(.62rem, .75vw, .74rem);
            color: var(--cyan);
            letter-spacing: .08em;
            line-height: 1.6
        }

        /* ── member modal ── */
        .member-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .72);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 9000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .38s cubic-bezier(.22, 1, .36, 1)
        }

        .member-modal-backdrop.open {
            opacity: 1;
            pointer-events: all
        }

        .member-modal {
            background: rgba(10, 10, 10, .96);
            border: 1px solid rgba(0, 212, 255, .22);
            max-width: 620px;
            width: 100%;
            padding: clamp(28px, 5vw, 52px);
            position: relative;
            transform: translateY(28px) scale(.96);
            transition: transform .44s cubic-bezier(.22, 1, .36, 1), opacity .44s;
            opacity: 0;
            box-shadow: 0 0 80px rgba(0, 212, 255, .12), 0 32px 64px rgba(0, 0, 0, .7);
            overflow: hidden
        }

        .member-modal::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 212, 255, .05) 0%, transparent 55%);
            pointer-events: none
        }

        .modal-scan {
            position: absolute;
            top: -100px;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.05) 80%, rgba(0, 212, 255, 0.25) 100%);
            border-bottom: 1px solid rgba(0, 212, 255, 0.5);
            animation: modalScanAnim 3.5s linear infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes modalScanAnim {
            0% { transform: translateY(-100px); opacity: 0; }
            10% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateY(700px); opacity: 0; }
        }

        .member-modal-backdrop.open .member-modal {
            transform: translateY(0) scale(1);
            opacity: 1
        }

        .modal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 32px;
            height: 32px;
            border: 1px solid rgba(0, 212, 255, .3);
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color .25s, background .25s
        }

        .modal-close:hover {
            border-color: var(--cyan);
            background: rgba(0, 212, 255, .08)
        }

        .modal-close svg {
            stroke: var(--cyan);
            width: 14px;
            height: 14px
        }

        .modal-header {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 20px
        }

        .modal-avatar {
            width: 58px;
            height: 58px;
            border: 1px solid var(--cyan-dim);
            background: rgba(0, 212, 255, .06);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fh);
            font-size: .95rem;
            font-weight: 700;
            color: var(--cyan);
            flex-shrink: 0
        }

        .modal-name {
            font-family: var(--fh);
            font-size: clamp(.95rem, 1.8vw, 1.35rem);
            font-weight: 700;
            letter-spacing: .03em;
            margin-bottom: 5px
        }

        .modal-role {
            font-family: var(--fu);
            font-size: clamp(.6rem, .75vw, .75rem);
            color: var(--cyan);
            letter-spacing: .1em
        }

        .modal-divider {
            width: 100%;
            height: 1px;
            background: rgba(0, 212, 255, .12);
            margin: 20px 0
        }

        .modal-bio {
            font-family: var(--fu);
            font-size: clamp(.68rem, .8vw, .82rem);
            color: rgba(255, 255, 255, .72);
            line-height: 1.85;
            margin-bottom: 24px
        }

        .modal-skills-label {
            font-family: var(--fh);
            font-size: .62rem;
            letter-spacing: .18em;
            color: rgba(0, 212, 255, .55);
            margin-bottom: 12px
        }

        .modal-skills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
        }

        .skill-tag {
            font-family: var(--fu);
            font-size: .62rem;
            letter-spacing: .08em;
            padding: 5px 12px;
            border: 1px solid rgba(0, 212, 255, .25);
            color: rgba(255, 255, 255, .7);
            position: relative;
            overflow: hidden;
            transition: border-color .25s, color .25s
        }

        .skill-tag .skill-cat {
            color: rgba(0, 212, 255, .65);
            font-size: .57rem;
            display: block;
            margin-top: 2px
        }

        .skill-tag:hover {
            border-color: var(--cyan);
            color: #fff
        }

        /* ── champions ── */
        #champions {
            background: var(--bg);
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, .05);
            border-bottom: 1px solid rgba(255, 255, 255, .05);
        }

        #champions::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at 80% 50%, rgba(0, 212, 255, .05), transparent 50%);
        }

        .champions-wrapper {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: clamp(40px, 6vw, 80px);
            align-items: center;
        }

        .champions-content {
            padding: clamp(20px, 3vw, 40px) 0;
        }

        .champions-image {
            position: relative;
            padding: 10px;
            max-width: 50%;
            margin: 0 auto;
            animation: float 6s ease-in-out infinite;
        }

        .champions-image::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 1px solid var(--cyan-dim);
            border-radius: 32px;
            transform: rotate(-2deg);
            z-index: 0;
            transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .4s;
        }

        .champions-image:hover::before {
            transform: rotate(-5deg) scale(1.02);
            border-color: var(--cyan);
        }

        .champions-image img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: auto;
            border-radius: 24px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
            display: block;
            transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
        }

        .champions-image:hover img {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 16px 50px rgba(0, 0, 0, .6), 0 0 24px var(--cyan-glow);
        }

        @media(max-width: 860px) {
            .champions-wrapper {
                grid-template-columns: 1fr;
                gap: clamp(24px, 4vw, 40px);
            }

            .champions-content {
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }

        /* ── sponsor ── */
        #sponsor {
            background: var(--bg2);
            position: relative;
            overflow: hidden;
        }

        .why-head {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: clamp(36px, 7vw, 72px)
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            gap: clamp(24px, 4vw, 40px)
        }

        .why-block {
            background: rgba(16, 16, 16, 0.35);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px);
            position: relative;
            overflow: hidden;
            transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, border-color .4s
        }

        .why-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background: var(--cyan);
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform .4s cubic-bezier(.22, 1, .36, 1)
        }

        .why-block:hover {
            transform: translateY(-8px);
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 10px 40px rgba(0, 212, 255, 0.12)
        }

        .why-block:hover::before {
            transform: scaleY(1)
        }

        .why-block::after {
            content: '+';
            position: absolute;
            top: 10px;
            left: 12px;
            font-family: var(--fh);
            font-size: 10px;
            font-weight: 300;
            color: rgba(0, 212, 255, 0.25);
            transition: color 0.3s, transform 0.3s
        }

        .why-block:hover::after {
            color: var(--cyan);
            transform: rotate(90deg)
        }

        .why-icon {
            width: clamp(40px, 5.5vw, 48px);
            height: clamp(40px, 5.5vw, 48px);
            margin-bottom: clamp(16px, 2vw, 24px);
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 212, 255, .05);
            border: 1px solid rgba(0, 212, 255, .15);
            border-radius: 4px;
            transition: transform .3s, background .3s
        }

        .why-block:hover .why-icon {
            transform: scale(1.05);
            background: rgba(0, 212, 255, .1)
        }

        .why-title {
            font-family: var(--fh);
            font-size: clamp(.8rem, 1vw, .95rem);
            font-weight: 700;
            letter-spacing: .08em;
            color: var(--cyan);
            margin-bottom: clamp(10px, 1.5vw, 14px)
        }

        .why-text {
            font-family: var(--fu);
            font-size: clamp(.8rem, .95vw, .9rem);
            line-height: 1.7;
            color: var(--muted)
        }

        /* ── contact ── */
        #contact {
            background: var(--bg);
            position: relative;
            overflow: hidden
        }

        #contact::before {
            content: '';
            position: absolute;
            bottom: -200px;
            right: -150px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0, 212, 255, .05), transparent 68%);
            pointer-events: none
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            gap: clamp(36px, 7vw, 80px);
            margin-top: clamp(36px, 6vw, 72px);
            align-items: start
        }

        .contact-info .body-text {
            margin-top: clamp(12px, 2vw, 22px)
        }

        .contact-links {
            margin-top: clamp(24px, 4vw, 44px);
            display: flex;
            flex-direction: column;
            gap: clamp(10px, 1.8vw, 18px)
        }

        .contact-link {
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: var(--fu);
            font-size: clamp(.7rem, .82vw, .82rem);
            letter-spacing: .1em;
            color: var(--white);
            transition: color .25s
        }

        .contact-link:hover {
            color: var(--cyan)
        }

        .link-dot {
            width: 6px;
            height: 6px;
            background: var(--cyan);
            border-radius: 50%;
            flex-shrink: 0;
            animation: pulse-ring 2.5s infinite
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px;
            margin-bottom: 13px
        }

        @media(max-width:500px) {
            .form-row {
                grid-template-columns: 1fr
            }
        }

        .form-group {
            margin-bottom: 13px
        }

        .form-group label {
            display: block;
            font-family: var(--fu);
            font-size: clamp(.56rem, .65vw, .65rem);
            letter-spacing: .2em;
            color: var(--muted);
            text-transform: uppercase;
            margin-bottom: 9px
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            background: var(--card);
            border: 1px solid rgba(255, 255, 255, .07);
            color: var(--white);
            font-family: var(--fb);
            font-size: clamp(.82rem, .95vw, .92rem);
            padding: clamp(11px, 1.5vw, 15px) 16px;
            outline: none;
            transition: border-color .25s, box-shadow .25s;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0
        }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: var(--cyan-dim);
            box-shadow: 0 0 0 3px rgba(0, 212, 255, .07)
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
            height: clamp(100px, 14vw, 130px)
        }

        .form-submit {
            width: 100%;
            padding: clamp(13px, 2vw, 17px);
            font-family: var(--fu);
            font-size: clamp(.62rem, .72vw, .72rem);
            letter-spacing: .25em;
            font-weight: 700;
            text-transform: uppercase;
            background: var(--cyan);
            color: #000;
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: box-shadow .3s, transform .2s;
            -webkit-tap-highlight-color: transparent
        }

        .form-submit::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, .14);
            transform: translateX(-110%);
            transition: transform .4s
        }

        .form-submit:hover::before {
            transform: translateX(0)
        }

        .form-submit:hover {
            box-shadow: 0 0 40px rgba(0, 212, 255, .45);
            transform: translateY(-2px)
        }

        /* ── footer ── */
        footer {
            background: var(--bg);
            border-top: 1px solid rgba(0, 212, 255, .1);
            padding: clamp(32px, 6vw, 56px) var(--pad-x);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(12px, 2.5vw, 22px);
            text-align: center
        }

        .foot-logo {
            height: clamp(26px, 4vw, 40px);
            opacity: .65;
        }

        .foot-meta {
            font-family: var(--fu);
            font-size: clamp(.5rem, .6vw, .62rem);
            letter-spacing: .28em;
            color: var(--muted);
            text-transform: uppercase
        }

        .foot-tag {
            font-family: var(--fh);
            font-size: clamp(.64rem, .82vw, .82rem);
            letter-spacing: .1em;
            color: var(--cyan)
        }

        .foot-copy {
            font-family: var(--fu);
            font-size: clamp(.44rem, .54vw, .54rem);
            letter-spacing: .2em;
            color: rgba(136, 136, 136, .45);
            text-transform: uppercase
        }

        /* back to top */
        #back-top {
            position: fixed;
            bottom: clamp(18px, 3vw, 32px);
            right: clamp(18px, 3vw, 32px);
            width: clamp(38px, 5vw, 48px);
            height: clamp(38px, 5vw, 48px);
            border: 1px solid rgba(255, 255, 255, .1);
            background: rgba(8, 8, 8, .85);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 499;
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity .3s, transform .3s, border-color .3s, box-shadow .3s
        }

        #back-top.visible {
            opacity: 1;
            transform: none;
            pointer-events: auto
        }

        #back-top:hover {
            border-color: var(--cyan);
            box-shadow: 0 0 20px var(--cyan-glow)
        }

        #back-top svg {
            width: 15px;
            height: 15px;
            stroke: var(--cyan);
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: square
        }

        /* ── PRELOADER ── */
        #preloader {
            position: fixed;
            inset: 0;
            background: #000000;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }

        .preloader-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preloader-video-wrap {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }

        .preloader-video-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            box-shadow: none;
            pointer-events: none;
            z-index: 3;
        }

        .preloader-video {
            position: absolute;
            top: 50%;
            left: 60%;
            width: 100vh;
            height: 100vw;
            object-fit: contain;
            opacity: 1;
            z-index: 1;
            transform: translate(-50%, -50%) rotate(90deg) scale(1.6);
        }

        .preloader-status {
            position: absolute;
            bottom: 10%;
            z-index: 10;
            width: min(320px, 80vw);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            background: rgba(0, 0, 0, 0.5);
            padding: 16px 24px;
            border-radius: 12px;
            backdrop-filter: blur(12px) saturate(180%);
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 212, 255, 0.05);
        }

        .loader-bar-wrap {
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
        }

        .loader-bar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
            border-radius: 4px;
            box-shadow: 0 0 12px var(--cyan-glow);
            transition: width 0.1s ease-out;
        }

        .loader-text {
            font-family: var(--fu);
            font-size: 0.65rem;
            letter-spacing: 0.25em;
            color: var(--muted);
            text-transform: uppercase;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .loader-text span {
            color: var(--cyan);
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        /* ── WIND TUNNEL HERO ── */
        .wind-tunnel {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 0;
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 100%);
            pointer-events: none;
        }

        .wind-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
            width: 200px;
            left: -200px;
            animation: windBlow linear infinite;
        }

        @keyframes windBlow {
            0% { transform: translateX(0); }
            100% { transform: translateX(150vw); }
        }

        /* ── 3D TILT HELPERS ── */
        .tilt-card {
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
            transform-style: preserve-3d;
            will-change: transform;
        }

        .tilt-card:hover {
            transition: transform 0.1s linear, box-shadow 0.1s linear;
            z-index: 10;
        }

        /* ── CYBER CONTEXT MENU ── */
        .cyber-menu {
            position: fixed;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(12px);
            border: 1px solid var(--cyan-dim);
            width: 220px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transform: scale(0.95);
            transform-origin: top left;
            transition: opacity 0.2s, transform 0.2s;
            box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 10px rgba(0,212,255,0.1);
        }

        .cyber-menu.active {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1);
        }

        .cm-item {
            background: transparent;
            border: none;
            color: var(--dim);
            font-family: var(--fu);
            font-size: 0.75rem;
            text-align: left;
            padding: 10px 14px;
            cursor: pointer;
            text-decoration: none;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }

        .cm-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--cyan);
            transform: scaleY(0);
            transition: transform 0.2s;
        }

        .cm-item:hover {
            color: var(--cyan);
            background: rgba(0, 212, 255, 0.05);
            padding-left: 18px;
        }

        .cm-item:hover::before {
            transform: scaleY(1);
        }

        .cm-divider {
            height: 1px;
            background: var(--cyan-dim);
            margin: 4px 0;
            opacity: 0.3;
        }

        /* ══════════════════════════════
           REFLEXDRIVE SECTION
        ══════════════════════════════ */
        /* ══════════════════════════════
           3D PROTOTYPE SECTION
        ══════════════════════════════ */
        #prototype {
            position: relative;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: var(--pad-x);
            overflow: hidden;
            background: var(--bg2); /* Slight contrast */
        }

        #canvas-container {
            position: relative;
            width: 100%;
            height: 75vh;
            min-height: 500px;
            margin-top: 20px;
            cursor: grab;
        }
        
        @media (pointer: fine) {
            #canvas-container {
                cursor: none !important;
            }
        }

        .prototype-controls {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }

        #labels-container {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 50;
        }

        .hud-label {
            position: absolute;
            top: 0;
            left: 0;
            font-family: var(--fu);
            font-size: 12px;
            letter-spacing: 2px;
            color: var(--cyan);
            background: rgba(0, 212, 255, 0.05);
            border: 1px solid rgba(0, 212, 255, 0.3);
            padding: 4px 8px;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            text-transform: uppercase;
            backdrop-filter: blur(4px);
        }
        
        .hud-label.visible {
            opacity: 1;
        }
        
        .hud-label::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            width: 1px;
            height: 20px;
            background: linear-gradient(to bottom, rgba(0, 212, 255, 0.5), transparent);
        }

        .reflex-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at center, #151515 0%, var(--bg) 100%);
            overflow: hidden;
            padding: 100px 20px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }

        .reflex-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 0;
            pointer-events: none;
        }

        .reflex-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
        }

        .reflex-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .reflex-header .stats-board {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-top: 16px;
            font-family: var(--fh);
            font-size: 16px;
            color: var(--dim);
            letter-spacing: 0.1em;
        }

        .reflex-header .stats-board span {
            color: var(--cyan);
            font-weight: 600;
        }

        .reflex-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .lights-board {
            display: flex;
            gap: 24px;
            background: rgba(28, 28, 30, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 35px 50px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.03);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            margin-bottom: 60px;
            transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .reflex-section:active .lights-board {
            transform: scale(0.98);
        }

        .light {
            width: 75px;
            height: 75px;
            border-radius: 50%;
            background: #111;
            border: 1px solid #3A3A3C;
            transition: all 0.05s ease;
        }

        .light.on {
            background: var(--cyan);
            border-color: var(--cyan);
            box-shadow: 0 0 15px var(--cyan-glow);
        }

        .display-area {
            text-align: center;
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .display-area .message {
            font-size: 14px;
            color: var(--dim);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: 16px;
            font-weight: 500;
            opacity: 0.6;
            transition: opacity 0.3s;
        }

        .display-area .time-display {
            font-size: 90px;
            font-weight: 900;
            color: var(--white);
            letter-spacing: 0.02em;
            line-height: 1;
            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .display-area .time-display.jump-start {
            font-size: 60px;
            color: var(--cyan);
        }

        .display-area .category {
            font-size: 22px;
            font-weight: 700;
            color: var(--cyan);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 20px;
            height: 26px;
        }

        @media (max-width: 600px) {
            .lights-board {
                padding: 25px 30px;
                gap: 12px;
                border-radius: 18px;
            }
            .light {
                width: 50px;
                height: 50px;
            }
            .display-area .time-display {
                font-size: 60px;
                height: 60px;
            }
            .display-area .time-display.jump-start {
                font-size: 40px;
            }
            .reflex-header .brand-name {
                font-size: 24px;
            }
            .display-area .category {
                font-size: 18px;
            }
        }

        /* ══════════════════════════════
           AGILEDRIVE SECTION
        ══════════════════════════════ */
        #innovations {
            background: var(--bg2);
            position: relative;
            overflow: hidden;
            padding: clamp(60px, 10vw, 120px) 0;
            border-bottom: 1px solid rgba(0, 212, 255, 0.05);
        }

        #innovations::before {
            content: '';
            position: absolute;
            top: 20%;
            left: -100px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0, 212, 255, .04), transparent 70%);
            pointer-events: none;
        }

        .agile-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: clamp(40px, 6vw, 100px);
            align-items: center;
        }

        .agile-content .body-text {
            margin-top: clamp(16px, 2.5vw, 28px);
            color: var(--muted);
            line-height: 1.7;
            max-width: 680px;
        }

        .agile-features {
            margin-top: clamp(24px, 4vw, 48px);
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .agile-feature {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .feature-icon {
            font-size: 1.5rem;
            background: rgba(0, 212, 255, 0.1);
            color: var(--cyan);
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(0, 212, 255, 0.2);
            flex-shrink: 0;
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.05);
        }

        .agile-feature h4 {
            font-family: var(--fh);
            font-size: 1rem;
            color: var(--white);
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }

        .agile-feature p {
            font-family: var(--fu);
            font-size: 0.82rem;
            color: var(--muted);
            line-height: 1.5;
        }

        .agile-media {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* ── Premium Smartphone Mockup Bezel ── */
        .phone-mockup {
            position: relative;
            width: min(290px, 100%);
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .phone-screen {
            position: relative;
            width: 100%;
            height: auto;
            border-radius: 20px;
            overflow: hidden;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .phone-notch {
            display: none;
        }

        .reel-video {
            width: 100%;
            height: auto;
            object-fit: contain;
            position: relative;
            z-index: 2;
            display: block;
        }

        .video-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            color: var(--muted);
            z-index: 1;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.05), transparent 70%);
        }

        .placeholder-icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
            opacity: 0.6;
            animation: pulseGlow 4s ease-in-out infinite;
        }

        .video-placeholder span {
            font-family: var(--fh);
            color: var(--white);
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }

        .video-placeholder small {
            font-family: var(--fu);
            font-size: 0.72rem;
            color: var(--muted);
            opacity: 0.8;
            max-width: 150px;
        }

        /* ── Responsive Styling ── */
        @media(max-width: 991px) {
            .agile-grid {
                grid-template-columns: 1fr;
                gap: 50px;
            }
            .agile-content {
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .agile-content .body-text {
                margin-left: auto;
                margin-right: auto;
            }
            .agile-features {
                text-align: left;
                width: 100%;
                max-width: 600px;
            }
            .agile-feature {
                align-items: center;
            }
        }

        /* ── Deep Mobile Optimization ── */
        @media(max-width: 860px) {
            .phases {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .phases::before {
                display: none;
            }
            .ph {
                align-items: flex-start;
                text-align: left;
                padding-left: 20px;
                border-left: 2px solid var(--cyan-dim);
            }
            .ph-dot {
                margin-bottom: 8px;
            }
        }

        @media(max-width: 600px) {
            #canvas-container {
                min-height: 350px;
                height: 50vh;
            }
            #wind-tunnel-video {
                transform: translate(-50%, -50%) rotate(90deg) scale(1.2) !important;
            }
        }

        @media(max-width: 420px) {
            .lights-board {
                gap: 8px;
                padding: 20px 15px;
            }
            .light {
                width: 35px;
                height: 35px;
            }
        }