:root{
    --void:#0a0b0d;
    --void-2:#111318;
    --void-3:#16181f;
    --paper:#f4f5f7;
    --steel:#7a8699;
    --steel-dim:#4c5566;
    --blue:#4c8dff;
    --blue-dim:#2f5cb0;
    --violet:#8b6cff;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.14);
    --glass:rgba(255,255,255,.04);
    --radius:2px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--paper);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--blue);color:#fff;}
  .h1,.h2,.h3,.display{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.02;
  }
  .mono{font-family:'JetBrains Mono',monospace;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--blue);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:18px;height:1px;
    background:var(--blue);
    display:inline-block;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  section{position:relative;}
  .wrap{
    max-width:1320px;
    margin:0 auto;
    padding:0 48px;
  }
  @media(max-width:800px){.wrap{padding:0 24px;}}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-delay-1{transition-delay:.08s;}
  .reveal-delay-2{transition-delay:.16s;}
  .reveal-delay-3{transition-delay:.24s;}

  /* ---------- nav ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:26px 48px;
    mix-blend-mode:normal;
    transition:background .4s ease, border-color .4s ease, padding .4s ease;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(10,11,13,.82);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:16px 48px;
  }
  @media(max-width:800px){.nav{padding:20px 24px;} .nav.scrolled{padding:14px 24px;}}
  .brand{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:18px;
    letter-spacing:.02em;
    display:flex;
    align-items:center;
    gap:9px;
  }
  .brand span{color:var(--blue);}
  .brand-mark{height:22px;width:auto;display:block;}
  .nav-links{display:flex;gap:36px;font-size:13px;color:var(--steel);}
  .nav-links a:hover{color:var(--paper);}
  @media(max-width:900px){.nav-links{display:none;}}
  .btn{
    font-family:'Space Grotesk',sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:.03em;
    padding:12px 24px;
    border-radius:var(--radius);
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    border:1px solid transparent;
    position:relative;
    overflow:hidden;
  }
  .btn-primary{background:var(--paper);color:var(--void);}
  .btn-primary:hover{background:var(--blue);color:#fff;}
  .btn-ghost{border:1px solid var(--line-strong);color:var(--paper);background:transparent;}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);}

  /* ---------- hero ---------- */
  .hero{
    height:100vh;
    width:100%;
    position:relative;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .hero-media{
    position:absolute;inset:0;
    z-index:0;
  }
  .hero-media video{
    width:100%;height:100%;object-fit:cover;
    filter:brightness(.62) contrast(1.08) saturate(1.05);
  }
  .hero-media .fallback-bg{
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse 60% 50% at 70% 20%, rgba(76,141,255,.14), transparent 60%),
      radial-gradient(ellipse 50% 60% at 20% 80%, rgba(139,108,255,.10), transparent 60%),
      linear-gradient(180deg,#0d0f13 0%,#0a0b0d 60%,#08090a 100%);
  }
  .hero-media .grain{
    position:absolute;inset:0;
    opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
  }
  .hero-media .vignette{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 90% 80% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
  }
  .hero-media .bottom-fade{
    position:absolute;left:0;right:0;bottom:0;height:55%;
    background:linear-gradient(180deg, transparent 0%, rgba(10,11,13,.5) 55%, var(--void) 100%);
  }
  .hero-content{
    position:relative;z-index:2;
    width:100%;
    padding:0 48px 110px;
    max-width:760px;
  }
  @media(max-width:800px){.hero-content{padding:0 24px 90px;}}
  .hero-content .eyebrow{margin-bottom:20px;opacity:0;animation:fadeUp 1s .3s cubic-bezier(.16,1,.3,1) forwards;}
  .hero-headline{
    font-size:clamp(44px,7.2vw,92px);
    text-transform:uppercase;
    margin-bottom:22px;
    opacity:0;
    animation:fadeUp 1.1s .45s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-sub{
    font-size:18px;
    color:var(--steel);
    max-width:460px;
    margin-bottom:36px;
    font-weight:400;
    opacity:0;
    animation:fadeUp 1.1s .6s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-ctas{
    display:flex;gap:14px;
    opacity:0;
    animation:fadeUp 1.1s .75s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
  .scroll-indicator{
    position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
    z-index:2;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    letter-spacing:.24em;
    color:var(--steel);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    opacity:0;
    animation:fadeUp 1s 1.1s ease forwards;
  }
  .scroll-indicator .bar{
    width:1px;height:28px;
    background:linear-gradient(180deg,var(--blue),transparent);
    animation:scrollPulse 1.8s ease-in-out infinite;
  }
  @keyframes scrollPulse{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

  /* ---------- reveal section ---------- */
  .reveal-section{
    padding:180px 0 120px;
    background:var(--void);
  }
  .section-head{
    text-align:center;
    max-width:640px;
    margin:0 auto 90px;
  }
  .section-head .eyebrow{justify-content:center;margin-bottom:18px;}
  .section-head .eyebrow::before{display:none;}
  .section-head .h2{font-size:clamp(30px,4.4vw,50px);text-transform:uppercase;margin-bottom:18px;}
  .section-head p{color:var(--steel);font-size:16px;line-height:1.6;}

  /* ---------- controller stage ---------- */
  .stage{
    display:grid;
    grid-template-columns:1fr minmax(380px,460px) 1fr;
    align-items:center;
    gap:40px;
    margin-top:20px;
  }
  @media(max-width:1100px){.stage{grid-template-columns:1fr;text-align:center;}}
  .stage.stage-2col{grid-template-columns:minmax(380px,520px) 1fr;max-width:980px;margin:20px auto 0;}
  @media(max-width:1100px){.stage.stage-2col{grid-template-columns:1fr;}}
  .feat-list-inline{
    flex-direction:row !important;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 22px !important;
    margin-top:24px;
  }
  .feat-list-inline li::before{content:none;}
  .feat-list-inline li{
    padding:7px 14px;
    border:1px solid var(--line-strong);
    border-radius:20px;
    color:var(--steel);
  }
  .side-panel{max-width:320px;}
  .side-panel.right{justify-self:end;text-align:right;}
  @media(max-width:1100px){.side-panel{max-width:480px;margin:0 auto;text-align:center !important;justify-self:center !important;}}
  .side-panel .eyebrow{margin-bottom:14px;}
  .side-panel.right .eyebrow{justify-content:flex-end;}
  .side-panel.right .eyebrow::before{order:2;}
  @media(max-width:1100px){.side-panel .eyebrow{justify-content:center;} .side-panel.right .eyebrow::before{order:0;}}
  .side-panel h3{font-size:26px;text-transform:uppercase;margin-bottom:14px;}
  .side-panel p{color:var(--steel);font-size:14.5px;line-height:1.7;margin-bottom:20px;}
  .feat-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
  .side-panel.right .feat-list{align-items:flex-end;}
  @media(max-width:1100px){.side-panel.right .feat-list{align-items:center;}}
  .feat-list li{
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    color:var(--paper);
    display:flex;align-items:center;gap:10px;
    letter-spacing:.02em;
  }
  .side-panel.right .feat-list li{flex-direction:row-reverse;}
  .feat-list li::before{content:'';width:5px;height:5px;background:var(--blue);flex-shrink:0;}

  /* ---------- virtual controller ---------- */
  .controller-wrap{
    position:relative;
    aspect-ratio:3/2;
    max-width:560px;
    margin:0 auto;
  }
  .gamepad-shell{
    position:absolute;inset:0;
    border:1px solid var(--line);
    background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    border-radius:46px 46px 90px 90px;
  }
  .gamepad-shell::before{
    content:'';
    position:absolute;inset:0;
    border-radius:46px 46px 90px 90px;
    background:radial-gradient(circle at 50% 40%, rgba(76,141,255,.09), transparent 65%);
  }
  .grip{
    position:absolute;
    bottom:-8%;
    width:26%;height:38%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.02), transparent 70%);
    border:1px solid var(--line);
    z-index:-1;
  }
  .grip-left{left:2%;border-radius:0 0 0 60px;transform:rotate(-6deg);}
  .grip-right{right:2%;border-radius:0 0 60px 0;transform:rotate(6deg);}

  .telemetry{
    position:absolute;top:20px;left:26px;right:26px;
    display:flex;justify-content:space-between;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:var(--steel);
    letter-spacing:.05em;
    z-index:5;
  }
  .telemetry .val{color:var(--blue);}

  .shoulder{
    position:absolute;top:-20px;
    width:19%;height:22px;
    border:1px solid var(--line-strong);
    background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
    font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--steel);
    display:flex;align-items:center;justify-content:center;
    z-index:4;
  }
  .shoulder.lb{left:8%;border-radius:14px 14px 0 0;}
  .shoulder.rb{right:8%;border-radius:14px 14px 0 0;}
  .trigger{
    position:absolute;top:-40px;
    width:15%;height:16px;
    border:1px solid var(--line);
    background:var(--void-3);
    border-radius:10px 10px 0 0;
    font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.08em;color:var(--steel-dim);
    display:flex;align-items:center;justify-content:center;
    opacity:.8;
    z-index:4;
  }
  .trigger.lt{left:9.5%;}
  .trigger.rt{right:9.5%;}

  .center-buttons{
    position:absolute;top:16%;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;gap:18px;
    z-index:5;
  }
  .center-btn{
    width:26px;height:26px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:var(--void-3);
    color:var(--steel);
    font-size:11px;
    display:flex;align-items:center;justify-content:center;
  }
  .center-btn.home{
    width:32px;height:32px;
    background:radial-gradient(circle at 35% 30%, rgba(76,141,255,.5), rgba(76,141,255,.08));
    border-color:rgba(76,141,255,.4);
  }

  .dpad{
    position:absolute;left:19%;top:73%;
    width:88px;height:88px;
    transform:translate(-50%,-50%);
  }
  .dpad-arm{position:absolute;background:linear-gradient(160deg, #2a2e37, #1a1d23);border:1px solid var(--line-strong);}
  .dpad-up,.dpad-down{left:50%;width:28px;height:36px;margin-left:-14px;}
  .dpad-up{top:0;border-radius:6px 6px 0 0;}
  .dpad-down{bottom:0;border-radius:0 0 6px 6px;}
  .dpad-left,.dpad-right{top:50%;width:36px;height:28px;margin-top:-14px;}
  .dpad-left{left:0;border-radius:6px 0 0 6px;}
  .dpad-right{right:0;border-radius:0 6px 6px 0;}

  .face-buttons{
    position:absolute;right:15%;top:29%;
    width:92px;height:92px;
    transform:translate(50%,-50%);
  }
  .face-btn{
    position:absolute;
    width:30px;height:30px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
    border:1px solid rgba(255,255,255,.15);
    color:rgba(10,11,13,.75);
  }
  .fb-y{top:0;left:50%;margin-left:-15px;background:#e0c15c;}
  .fb-x{left:0;top:50%;margin-top:-15px;background:#4c8dff;color:#fff;}
  .fb-b{right:0;top:50%;margin-top:-15px;background:#e05c5c;color:#fff;}
  .fb-a{bottom:0;left:50%;margin-left:-15px;background:#5ee6a8;}

  .stick{
    position:absolute;
    width:150px;height:150px;
  }
  .stick.left-stick{left:19%;top:29%;transform:translate(-50%,-50%);}
  .stick-zone{left:auto;right:17%;top:73%;transform:translate(50%,-50%);position:absolute;width:150px;height:150px;}

  .stick-track{
    position:absolute;inset:0;
    border:1px solid var(--line-strong);
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.03), transparent 70%);
  }
  .stick-track::after{
    content:'';
    position:absolute;inset:34%;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:50%;
  }
  .stick-trail-svg{position:absolute;inset:0;overflow:visible;pointer-events:none;}
  .stick-knob,.stick-knob-static{
    position:absolute;
    width:46px;height:46px;
    left:50%;top:50%;
    margin-left:-23px;margin-top:-23px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #eef2f8, #b9c2ce 55%, #7c8898 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 10px 22px rgba(76,141,255,.25), inset 0 -5px 8px rgba(0,0,0,.25);
    will-change:transform;
  }
  .stick-knob::after,.stick-knob-static::after{
    content:'';
    position:absolute;inset:7px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.15);
  }
  .stick-glow{
    position:absolute;
    width:46px;height:46px;
    left:50%;top:50%;
    margin-left:-23px;margin-top:-23px;
    border-radius:50%;
    background:var(--blue);
    filter:blur(18px);
    opacity:.35;
    will-change:transform;
  }
  .coords-readout{
    position:absolute;bottom:16px;left:0;right:0;
    display:flex;justify-content:center;gap:26px;
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    z-index:5;
  }
  .coords-readout div{color:var(--steel);}
  .coords-readout span{color:var(--paper);font-weight:500;}
  .touch-hint{
    position:absolute;bottom:44px;left:0;right:0;text-align:center;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--steel-dim);
    display:none;
    z-index:5;
  }
  @media(max-width:1100px){.touch-hint{display:block;}}
  @media(max-width:560px){
    .stick.left-stick{display:none;}
    .face-buttons{right:10%;}
  }

  /* ---------- input viz ---------- */
  .flow-section{padding:140px 0;background:var(--void-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .flow-row{
    display:flex;align-items:center;justify-content:center;
    gap:0;
    margin:70px 0 60px;
    flex-wrap:wrap;
  }
  .flow-node{
    padding:22px 30px;
    border:1px solid var(--line-strong);
    background:var(--glass);
    text-align:center;
    min-width:170px;
  }
  .flow-node .label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--steel);margin-bottom:6px;}
  .flow-node .name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;}
  .flow-line{
    width:90px;height:1px;
    background:linear-gradient(90deg, var(--line-strong), var(--blue), var(--line-strong));
    position:relative;
    overflow:visible;
  }
  @media(max-width:800px){.flow-line{width:1px;height:40px;}}
  .flow-line .pulse{
    position:absolute;top:-2px;left:0;
    width:5px;height:5px;border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 8px 2px rgba(76,141,255,.7);
    animation:flowPulse 2.2s linear infinite;
  }
  @keyframes flowPulse{0%{left:0%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:100%;opacity:0;}}
  .telemetry-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    max-width:760px;
    margin:0 auto;
  }
  @media(max-width:700px){.telemetry-grid{grid-template-columns:repeat(2,1fr);}}
  .telemetry-cell{background:var(--void-2);padding:22px;text-align:center;}
  .telemetry-cell .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--steel);margin-bottom:8px;}
  .telemetry-cell .v{font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--blue);}

  /* ---------- games gallery ---------- */
  .games-section{padding:160px 0 140px;}
  .games-scroll{
    display:flex;gap:16px;
    overflow-x:auto;
    padding:10px 48px 20px;
    margin:0 -48px;
    cursor:grab;
  }
  .games-scroll:active{cursor:grabbing;}
  @media(max-width:800px){.games-scroll{padding:10px 24px 20px;margin:0 -24px;}}
  .games-scroll::-webkit-scrollbar{height:4px;}
  .games-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);}
  .games-track{display:flex;gap:16px;flex-shrink:0;}
  .game-card{
    flex:0 0 300px;
    height:380px;
    position:relative;
    border:1px solid var(--line);
    overflow:hidden;
    background:linear-gradient(160deg, var(--void-3), var(--void-2));
  }
  .game-card .plate-img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s cubic-bezier(.16,1,.3,1);
  }
  .game-card:hover .plate-img{transform:scale(1.08);}
  .game-card .plate-overlay{
    position:absolute;inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 30% 20%, rgba(76,141,255,.14), transparent 55%),
      radial-gradient(circle at 80% 90%, rgba(139,108,255,.10), transparent 55%),
      linear-gradient(180deg, rgba(10,11,13,.05) 0%, rgba(10,11,13,.35) 55%, rgba(10,11,13,.88) 100%);
  }
  .game-card .label{
    position:absolute;left:22px;bottom:22px;
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;font-weight:600;text-transform:uppercase;
  }
  .game-card .tag{
    position:absolute;left:22px;top:22px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--steel);
  }
  .disclaimer{
    max-width:700px;margin:50px auto 0;
    text-align:center;
    font-size:12.5px;color:var(--steel-dim);
    line-height:1.6;
    padding:0 24px;
  }

  /* ---------- accessibility ---------- */
  .access-section{
    padding:150px 0;
    background:var(--void-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .access-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:70px;}
  @media(max-width:800px){.access-cards{grid-template-columns:1fr;}}
  .access-card{background:var(--void-2);padding:46px 36px;position:relative;overflow:hidden;}
  .access-card .idx{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--blue);letter-spacing:.16em;margin-bottom:26px;}
  .access-card h3{font-size:22px;text-transform:uppercase;margin-bottom:14px;}
  .access-card p{color:var(--steel);font-size:14px;line-height:1.7;margin-bottom:30px;}
  .demo-bar{height:3px;background:rgba(255,255,255,.06);position:relative;overflow:hidden;border-radius:2px;}
  .demo-bar span{position:absolute;left:0;top:0;bottom:0;background:var(--blue);width:0%;transition:width 1.4s cubic-bezier(.16,1,.3,1);}
  .access-card.in .demo-bar span{width:var(--w);}

  /* ---------- software interface ---------- */
  .app-section{padding:160px 0;}
  .app-mock{
    max-width:1080px;margin:70px auto 0;
    border:1px solid var(--line-strong);
    background:var(--void-3);
    display:grid;
    grid-template-columns:220px 1fr;
    min-height:520px;
    box-shadow:0 40px 100px -40px rgba(0,0,0,.7);
  }
  @media(max-width:800px){.app-mock{grid-template-columns:1fr;}}
  .app-sidebar{
    border-right:1px solid var(--line);
    padding:26px 0;
  }
  @media(max-width:800px){.app-sidebar{display:none;}}
  .app-sidebar .app-logo{padding:0 24px 24px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;border-bottom:1px solid var(--line);margin-bottom:14px;}
  .app-sidebar .app-logo span{color:var(--blue);}
  .app-nav-item{
    padding:12px 24px;
    font-size:13px;color:var(--steel);
    border-left:2px solid transparent;
    cursor:default;
  }
  .app-nav-item.active{color:var(--paper);border-left-color:var(--blue);background:rgba(76,141,255,.06);}
  .app-main{padding:36px 40px;}
  .app-main-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;flex-wrap:wrap;gap:16px;}
  .app-main-head h4{font-size:22px;text-transform:uppercase;font-family:'Space Grotesk',sans-serif;}
  .status-pill{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
    color:#5ee6a8;border:1px solid rgba(94,230,168,.35);background:rgba(94,230,168,.08);
    padding:6px 14px;border-radius:20px;display:flex;align-items:center;gap:8px;
  }
  .status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:#5ee6a8;box-shadow:0 0 8px #5ee6a8;}
  .app-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:30px;}
  @media(max-width:600px){.app-grid{grid-template-columns:1fr;}}
  .app-stat{background:var(--void-2);padding:18px 20px;}
  .app-stat .k{font-size:11px;color:var(--steel);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;margin-bottom:6px;}
  .app-stat .v{font-size:17px;font-family:'JetBrains Mono',monospace;color:var(--paper);}
  .mini-controller{
    width:120px;height:120px;
    border:1px solid var(--line-strong);
    border-radius:50%;
    position:relative;
    margin-top:10px;
  }
  .mini-knob{
    position:absolute;width:26px;height:26px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#eef2f8,#7c8898);
    left:50%;top:50%;margin-left:-13px;margin-top:-13px;
  }

  /* ---------- features grid ---------- */
  .features-section{padding:160px 0;background:var(--void-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:70px;}
  @media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.feature-grid{grid-template-columns:1fr;}}
  .feature-cell{background:var(--void-2);padding:38px 32px;transition:background .3s ease;}
  .feature-cell:hover{background:var(--void-3);}
  .feature-cell .mark{width:26px;height:1px;background:var(--blue);margin-bottom:22px;}
  .feature-cell h3{font-size:16px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px;}
  .feature-cell p{font-size:13.5px;color:var(--steel);line-height:1.65;}

  /* ---------- how it works ---------- */
  .steps-section{padding:170px 0;}
  .steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:80px;}
  @media(max-width:800px){.steps-row{grid-template-columns:1fr;gap:56px;}}
  .step-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--blue);letter-spacing:.2em;margin-bottom:24px;}
  .step-item h3{font-size:24px;text-transform:uppercase;margin-bottom:12px;}
  .step-item p{color:var(--steel);font-size:14.5px;line-height:1.7;}
  .step-rule{height:1px;background:var(--line);margin-top:26px;position:relative;}
  .step-rule span{position:absolute;left:0;top:0;height:1px;background:var(--blue);width:0;transition:width 1.2s cubic-bezier(.16,1,.3,1) .3s;}
  .step-item.in .step-rule span{width:100%;}

  /* ---------- pricing ---------- */
  .pricing-section{padding:170px 0;background:var(--void-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .pricing-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px;}
  @media(max-width:900px){.pricing-row{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}}
  .price-card{
    border:1px solid var(--line-strong);
    padding:40px 34px;
    display:flex;flex-direction:column;
    background:var(--void-2);
  }
  .price-card.featured{border-color:var(--blue);position:relative;background:linear-gradient(180deg, rgba(76,141,255,.05), transparent 40%);}
  .price-card.featured::before{
    content:'RECOMMENDED';
    position:absolute;top:-1px;right:-1px;
    font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;
    background:var(--blue);color:#fff;padding:6px 12px;
  }
  .price-tier{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--steel);margin-bottom:22px;}
  .price-card p.desc{color:var(--steel);font-size:14px;line-height:1.6;margin-bottom:30px;min-height:44px;}
  .price-amount{font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:600;margin-bottom:30px;}
  .price-amount span{font-size:14px;color:var(--steel);font-weight:400;}
  .price-card .btn{width:100%;justify-content:center;margin-top:auto;}

  .pricing-row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:70px;max-width:760px;margin-left:auto;margin-right:auto;}
  @media(max-width:700px){.pricing-row-2{grid-template-columns:1fr;}}
  .price-card-v2{
    border:1px solid var(--line-strong);
    padding:44px 38px;
    display:flex;flex-direction:column;
    background:var(--void-2);
    position:relative;
  }
  .price-card-v2.featured{border-color:var(--blue);background:linear-gradient(180deg, rgba(76,141,255,.06), transparent 45%);}
  .price-card-v2.featured::before{
    content:'RECOMMENDED';
    position:absolute;top:-1px;right:-1px;
    font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;
    background:var(--blue);color:#fff;padding:6px 12px;
  }
  .price-card-v2 .price-tier{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--steel);margin-bottom:16px;}
  .price-card-v2 p.desc{color:var(--steel);font-size:14px;line-height:1.6;margin-bottom:28px;min-height:44px;}
  .billing-toggle{
    display:flex;
    border:1px solid var(--line-strong);
    margin-bottom:30px;
  }
  .toggle-btn{
    flex:1;
    background:transparent;
    border:none;
    color:var(--steel);
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.08em;
    padding:11px 6px;
    cursor:pointer;
    border-right:1px solid var(--line-strong);
    transition:background .2s ease, color .2s ease;
  }
  .toggle-btn:last-child{border-right:none;}
  .toggle-btn.active{background:var(--blue);color:#fff;}
  .price-amount-v2{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    margin-bottom:30px;
    display:flex;
    align-items:baseline;
    gap:2px;
  }
  .price-amount-v2 .curr{font-size:24px;color:var(--steel);}
  .price-amount-v2 .amt{font-size:44px;transition:opacity .15s ease;}
  .price-amount-v2 .suffix{font-size:14px;color:var(--steel);margin-left:4px;}
  .price-card-v2 .btn{width:100%;justify-content:center;margin-top:auto;}

  /* ---------- final cta ---------- */
  .final-cta{
    padding:220px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
    background:var(--void);
  }
  .final-cta::before{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(ellipse 60% 50% at 50% 40%, rgba(76,141,255,.10), transparent 65%);
    animation:ctaGlow 8s ease-in-out infinite;
  }
  @keyframes ctaGlow{0%,100%{opacity:.6;}50%{opacity:1;}}
  .final-cta h2{font-size:clamp(38px,6vw,70px);text-transform:uppercase;margin-bottom:20px;position:relative;}
  .final-cta p{color:var(--steel);font-size:17px;max-width:480px;margin:0 auto 44px;position:relative;}
  .final-cta .btn{position:relative;padding:16px 38px;font-size:14px;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:60px 0 36px;}
  .footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px;margin-bottom:50px;}
  .footer-links{display:flex;gap:40px;flex-wrap:wrap;}
  .footer-col{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--steel);}
  .footer-col a:hover{color:var(--paper);}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    padding-top:26px;border-top:1px solid var(--line);
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--steel-dim);
  }

  /* magnetic btn helper */
  .btn{transition:transform .25s cubic-bezier(.16,1,.3,1), background .2s, color .2s, border-color .2s;}

  /* ---------- auto-renew toggle row ---------- */
  .auto-renew-row{
    display:flex;align-items:center;gap:10px;
    font-size:12.5px;color:var(--steel);
    margin-bottom:20px;
    cursor:pointer;
    user-select:none;
  }
  .auto-renew-row input{accent-color:var(--blue);width:15px;height:15px;cursor:pointer;}
  .auto-renew-hint{color:var(--steel-dim);font-size:11px;}

  /* ---------- auth modal ---------- */
  .auth-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(6,7,9,.72);
    backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
  }
  .auth-overlay[hidden]{display:none;}
  .auth-modal{
    position:relative;
    width:100%;max-width:380px;
    background:var(--void-2);
    border:1px solid var(--line-strong);
    padding:40px 34px 34px;
  }
  .auth-close{
    position:absolute;top:14px;right:14px;
    width:28px;height:28px;border-radius:50%;
    border:1px solid var(--line-strong);background:transparent;
    color:var(--steel);font-size:16px;line-height:1;cursor:pointer;
  }
  .auth-close:hover{color:var(--paper);border-color:var(--blue);}
  .auth-modal h3{
    font-family:'Space Grotesk',sans-serif;font-size:24px;text-transform:uppercase;
    margin:10px 0 22px;
  }
  .auth-label{
    display:block;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
    color:var(--steel);margin-bottom:16px;
  }
  .auth-label[hidden]{display:none;}
  .auth-label input{
    display:block;width:100%;margin-top:8px;
    background:var(--void-3);border:1px solid var(--line-strong);
    color:var(--paper);font-family:'Inter',sans-serif;font-size:14px;
    padding:11px 12px;border-radius:2px;
  }
  .auth-label input:focus{outline:none;border-color:var(--blue);}
  .auth-error{
    font-size:12.5px;color:#e05c5c;
    background:rgba(224,92,92,.08);border:1px solid rgba(224,92,92,.3);
    padding:10px 12px;margin-bottom:16px;border-radius:2px;
  }
  .auth-error[hidden]{display:none;}
  .auth-success{
    font-size:12.5px;color:#5ee6a8;
    background:rgba(94,230,168,.08);border:1px solid rgba(94,230,168,.35);
    padding:10px 12px;margin-bottom:16px;border-radius:2px;
  }
  .auth-success[hidden]{display:none;}
  .auth-forgot{
    margin-top:14px;text-align:center;
  }
  .auth-forgot button{
    background:none;border:none;color:var(--steel);cursor:pointer;
    font-size:12px;text-decoration:underline;
  }
  .auth-forgot button:hover{color:var(--paper);}
  .auth-forgot[hidden]{display:none;}
  .auth-toggle[hidden]{display:none;}

  /* ---------- toast notifications ---------- */
  .toast{
    position:fixed;top:24px;left:50%;
    transform:translate(-50%,-20px);
    z-index:300;
    font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.02em;
    padding:14px 22px;border-radius:2px;
    background:var(--void-2);
    border:1px solid rgba(94,230,168,.4);
    color:#5ee6a8;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    max-width:min(90vw,420px);
    text-align:center;
  }
  .toast.error{border-color:rgba(224,92,92,.4);color:#e05c5c;}
  .toast.show{opacity:1;transform:translate(-50%,0);}
  .auth-toggle{
    margin-top:20px;text-align:center;font-size:13px;color:var(--steel);
  }
  .auth-toggle button{
    background:none;border:none;color:var(--blue);cursor:pointer;
    font-size:13px;text-decoration:underline;margin-left:4px;
  }

  /* ---------- legal pages (privacy / terms) ---------- */
  .legal{max-width:760px;margin:0 auto;padding:140px 24px 120px;}
  .legal .back-link{
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;
    color:var(--blue);text-transform:uppercase;
  }
  .legal .back-link:hover{text-decoration:underline;}
  .legal h1{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:36px;
    letter-spacing:-0.02em;margin:24px 0 8px;
  }
  .legal .updated{color:var(--steel);font-size:13px;margin-bottom:48px;}
  .legal h2{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;
    margin:40px 0 14px;
  }
  .legal p{color:var(--steel);font-size:15px;line-height:1.75;margin-bottom:14px;}
  .legal ul{color:var(--steel);font-size:15px;line-height:1.75;margin:0 0 14px 22px;}
  .legal li{margin-bottom:6px;}
  .legal a{color:var(--blue);}
  .legal a:hover{text-decoration:underline;}
  .legal strong{color:var(--paper);}