/* ============================================================
   PONNE · landing mockup
   Brand: Signal Orange #FF4F00 (livery stripe, <=5%) · Asphalt
   #0C0F16 (product ground) · Birch Paper #F2F0EA (marketing).
   Type: Archivo (display wdth125/wght850 upper) + JetBrains Mono
   (all numerals). Device: the timing-tick strip. Motion: late-brake.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  src:url(assets/fonts/archivo-var.woff2) format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url(assets/fonts/jetbrains-mono-var.woff2) format('woff2');
  font-weight:100 800; font-display:swap;
}

:root{
  --asphalt:#0C0F16; --asphalt-raised:#161B26; --asphalt-2:#0a0d13;
  --paper:#F2F0EA; --paper-raised:#FAF9F5;
  --ink:#15171C; --text:#F4F7FB;
  --orange:#FF4F00; --orange-press:#D63E00; --ember:#C93B00;
  --steel:#97A2B4; --steel-ink:#5B6472;
  --line-dark:rgba(151,162,180,.18); --line-paper:rgba(21,23,28,.14);
  --brake:cubic-bezier(.16,1,.3,1);
  --sans:'Archivo','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --pad:clamp(20px,5vw,96px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--asphalt); color:var(--text);
  font-family:var(--sans); font-weight:420; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,p{margin:0}

/* ---- shared type ---- */
.display{
  font-family:var(--sans); font-weight:850; font-stretch:125%;
  text-transform:uppercase; letter-spacing:-.015em; line-height:.92;
}
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.sector{color:var(--orange)}

/* ============================================================
   TIMING-TICK STRIP — the signature device
   ============================================================ */
.ticks{
  position:relative; height:30px; width:100%;
  --tickcol:var(--steel); --orangeat:62%;
}
.ticks::before{ /* hairline baseline */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.35;
}
.ticks .minor,.ticks .major{
  position:absolute; left:0; right:0; bottom:0;
  transform-origin:left center; transform:scaleX(var(--draw,1));
  transition:transform 1.1s var(--brake);
}
.ticks .minor{
  height:8px;
  background:repeating-linear-gradient(90deg,
    var(--tickcol) 0 1px, transparent 1px 13px);
  opacity:.5;
}
.ticks .major{
  height:15px;
  background:repeating-linear-gradient(90deg,
    var(--tickcol) 0 1.4px, transparent 1.4px 65px);
  opacity:.8;
}
.ticks .sectortick{
  position:absolute; bottom:0; left:var(--orangeat); width:2px; height:22px;
  background:var(--orange); box-shadow:0 0 10px 1px rgba(255,79,0,.55);
  transform-origin:bottom; animation:tickpulse 3.6s var(--brake) infinite;
}
@keyframes tickpulse{0%,100%{opacity:.55;transform:scaleY(.82)}50%{opacity:1;transform:scaleY(1)}}
.ticks.paper{color:var(--steel-ink)}
[data-reveal] .ticks .minor,[data-reveal] .ticks .major{--draw:0}
[data-reveal].in .ticks .minor,[data-reveal].in .ticks .major{--draw:1}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); gap:24px;
  transition:background .3s var(--brake),backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,13,19,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-dark);
}
.brand{display:flex; align-items:center; gap:12px}
.brand svg{width:82px; height:auto; color:var(--orange)}
.brand .pd{
  font-family:var(--mono); font-size:11px; letter-spacing:.42em; font-weight:600;
  color:var(--text); padding-left:12px; margin-left:2px; border-left:1px solid var(--line-dark);
  text-transform:uppercase;
}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--steel);
  text-transform:uppercase; transition:color .16s var(--brake);
}
.nav-links a:hover{color:var(--text)}
.btn{
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); background:var(--orange);
  padding:11px 18px; border-radius:2px; border:0; cursor:pointer;
  transition:transform .16s var(--brake),background .16s var(--brake),box-shadow .16s var(--brake);
  display:inline-flex; align-items:center; gap:9px;
}
.btn:hover{background:var(--orange-press); transform:translateY(-1px); box-shadow:0 8px 24px -6px rgba(255,79,0,.5)}
.btn:active{transform:scale(.96)}
.btn.dl-nav{padding:9px 16px}
@media(max-width:760px){ .nav-links a:not(.hideable){display:none} .brand .pd{display:none} }

/* ============================================================
   HERO
   ============================================================ */
/* v2 hero: a 320vh track pins the hero while scroll drives the boarding camera */
.hero-track{position:relative; height:320vh}
.hero{position:sticky; top:0; height:100svh; min-height:640px; display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0; will-change:transform; transform:translate3d(0,0,0) scale(1.08)}
.hero-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#05070b}
.hero-seq{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .4s var(--brake)}
.hero-media.seq .hero-seq{opacity:1}
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,10,15,.78) 0%, rgba(8,10,15,.20) 34%, rgba(8,10,15,.55) 74%, var(--asphalt) 100%),
    radial-gradient(120% 90% at 12% 88%, rgba(8,10,15,.72), transparent 60%);
}
.hero-inner{position:relative; z-index:3; width:100%; padding:0 var(--pad) clamp(40px,7vh,84px)}
.hero h1{
  font-size:clamp(52px,10.4vw,168px); color:var(--text);
  margin:.24em 0 .30em; max-width:15ch;
}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln>span{display:block; transform:translateY(112%); transition:transform 1s var(--brake)}
.hero.s1 h1 .ln>span{transform:translateY(0)}
.hero.s1 h1 .ln:nth-child(2)>span{transition-delay:.09s}
.hero h1 em{font-style:normal; color:var(--orange); position:relative}
.hero-sub{
  max-width:52ch; color:#cdd4de; font-size:clamp(15px,1.5vw,18.5px);
  opacity:0; transform:translateY(14px); transition:.8s var(--brake);
}
.hero.s2 .hero-sub{opacity:1; transform:none}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(10px); transition:.7s var(--brake) .15s;
}
.hero .eyebrow::before{content:""; width:22px; height:1px; background:var(--orange)}
.loaded .hero .eyebrow{opacity:1; transform:none}
.cta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px;
  opacity:0; transform:translateY(14px); transition:.8s var(--brake) .12s;
}
.hero.s2 .cta{opacity:1; transform:none}
.cta .big{padding:15px 26px; font-size:13px}
.ghost{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); display:inline-flex; align-items:center; gap:9px;
  border-bottom:1px solid var(--line-dark); padding-bottom:3px; transition:.16s var(--brake);
}
.ghost:hover{color:var(--orange); border-color:var(--orange)}
.cta-note{font-family:var(--mono); font-size:11px; color:var(--steel); letter-spacing:.05em; margin-top:14px;
  opacity:0; transition:.6s ease .3s}
.hero.s2 .cta-note{opacity:1}
.hero .ticks{margin-top:clamp(30px,5vh,54px); max-width:640px;
  opacity:0; transition:.9s var(--brake) .8s}
.loaded .hero .ticks{opacity:1}

/* live HUD readout (product's soul) */
.hud{
  position:absolute; right:var(--pad); bottom:clamp(40px,7vh,84px); z-index:3;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  border:1px solid var(--line-dark); background:rgba(10,13,19,.6); backdrop-filter:blur(8px);
  border-radius:3px; padding:12px 14px; min-width:186px;
  opacity:0; transform:translateY(12px); transition:.8s var(--brake) 1s;
}
.loaded .hud{opacity:1; transform:none}
.hud .hrow{display:flex; justify-content:space-between; gap:20px; padding:3px 0}
.hud .hk{color:var(--steel)} .hud .hv{color:var(--text); font-weight:600}
.hud .hv.call{color:var(--orange)}
.hud .hcap{color:var(--steel); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line-dark); padding-bottom:7px; margin-bottom:5px;
  display:flex; justify-content:space-between; align-items:center}
.hud .dot{width:6px; height:6px; border-radius:50%; background:var(--orange); animation:blink 1.8s steps(1) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
@media(max-width:760px){ .hud{display:none} }

.scrollcue{position:absolute; left:50%; bottom:18px; z-index:3; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--steel); text-transform:uppercase;
  opacity:.85; transition:.5s ease; animation:cuebob 2.4s var(--brake) 1.4s infinite}
@keyframes cuebob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}

/* film grain overlay */
.grain{position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainshift 1.1s steps(3) infinite}
@keyframes grainshift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--asphalt-2); border-block:1px solid var(--line-dark); overflow:hidden; padding:13px 0}
.marquee .track{display:inline-flex; gap:44px; white-space:nowrap; animation:scroll 26s linear infinite; will-change:transform}
.marquee span{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.marquee b{color:var(--orange)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS — paper editorial
   ============================================================ */
.paper{background:var(--paper); color:var(--ink)}
.sec{padding:clamp(72px,11vh,148px) var(--pad)}
.sec-head{max-width:min(66ch,100%)}
.sec-head .eyebrow{color:var(--steel-ink)}
.sec-head h2{font-size:clamp(30px,4.6vw,60px); font-weight:850; font-stretch:118%;
  text-transform:uppercase; letter-spacing:-.014em; line-height:.98; margin:.3em 0 .5em}
.sec-head h2 em{font-style:normal; color:var(--ember)}
.lead{max-width:62ch; color:var(--steel-ink); font-size:clamp(16px,1.6vw,19px)}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(26px); filter:blur(7px);
  transition:opacity .8s var(--brake),transform .8s var(--brake),filter .8s var(--brake)}
[data-reveal].in{opacity:1; transform:none; filter:none}
[data-reveal][data-i]{transition-delay:calc(var(--d,.07s)*var(--i))}

/* proof stats */
.proof{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-paper);
  border-block:1px solid var(--line-paper)}
.proof .stat{background:var(--paper); padding:clamp(28px,4vw,44px) clamp(18px,2.4vw,32px)}
.proof b{font-family:var(--mono); font-weight:700; font-size:clamp(38px,6vw,72px); color:var(--ink);
  display:block; letter-spacing:-.02em; line-height:1}
.proof b i{font-style:normal; font-size:.34em; color:var(--steel-ink); font-weight:600}
.proof .lab{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel-ink); margin-top:12px; display:block}
.proof b .sec{color:var(--ember)}
@media(max-width:720px){ .proof{grid-template-columns:repeat(2,1fr)} }

/* panels grid */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:1px;
  margin-top:clamp(34px,5vw,56px); background:var(--line-paper);
  border:1px solid var(--line-paper)}
.panel{background:var(--paper-raised); padding:22px 22px 26px; position:relative;
  transition:transform .22s var(--brake),background .22s var(--brake); overflow:hidden}
.panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--orange);
  transform:scaleY(0); transform-origin:top; transition:transform .24s var(--brake)}
.panel:hover{background:#fff; transform:translateY(-3px)}
.panel:hover::before{transform:scaleY(1)}
.panel .ix{font-family:var(--mono); font-size:11px; color:var(--steel-ink); letter-spacing:.05em}
.panel h3{font-size:19px; font-weight:750; letter-spacing:-.01em; margin:14px 0 7px}
.panel p{font-size:13.5px; color:var(--steel-ink); line-height:1.5}
.panels-note{margin-top:28px; max-width:70ch; color:var(--steel-ink); font-size:14.5px}
.panels-note b{color:var(--ink)}
.pgrid-hint{margin:26px 0 -8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel-ink)}

/* Button reset for the now-clickable panels + overlay preview thumbnail */
.pgrid .panel{border:0; width:100%; text-align:left; font:inherit; color:inherit; display:block; cursor:pointer}
.pv{display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  aspect-ratio:16/10; border-radius:9px; margin-bottom:16px; padding:14px; background:#080b12;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}
.pv::before{content:""; position:absolute; inset:0; background:url(assets/cockpit.webp) center/cover no-repeat;
  filter:blur(16px) brightness(.42) saturate(1.15); transform:scale(1.28)}
.pv::after{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,79,0,.10), transparent 60%),
             linear-gradient(180deg, rgba(8,11,18,.12), rgba(8,11,18,.5))}
.pv img{position:relative; z-index:1; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); transition:transform .3s var(--brake)}
.panel:hover .pv img{transform:scale(1.03)}

/* Overlay preview lightbox */
.lightbox{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:5vw; background:rgba(6,8,13,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.lightbox.open{display:flex}
.lb-inner{position:relative; max-width:900px; width:100%; text-align:center}
.lb-stage{position:relative; overflow:hidden; border-radius:16px; padding:min(7vw,64px);
  display:flex; align-items:center; justify-content:center; min-height:200px}
.lb-stage::before{content:""; position:absolute; inset:0; background:url(assets/cockpit.webp) center/cover;
  filter:blur(24px) brightness(.4) saturate(1.15); transform:scale(1.3)}
.lb-stage::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,11,18,.22), rgba(8,11,18,.6))}
.lb-stage img{position:relative; z-index:1; max-width:100%; max-height:58vh; width:auto; height:auto;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.6))}
.lb-meta{margin-top:22px; color:#f4f7fb}
.lb-meta h3{font-size:24px; font-weight:800; margin-bottom:8px; letter-spacing:-.01em}
.lb-meta p{font-size:15px; color:#aeb8c8; line-height:1.55; max-width:60ch; margin:0 auto}
.lb-hint{margin-top:14px; font-family:var(--mono); font-size:11px; color:#5f6a7d; letter-spacing:.08em}
.lb-close{position:absolute; top:18px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.1); color:#fff; font-size:26px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .18s}
.lb-close:hover{background:var(--orange)}
@media (max-width:640px){ .lb-stage img{max-height:48vh} }

/* ============================================================
   CINEMATIC INTERSTITIAL
   ============================================================ */
.inter{position:relative; min-height:86vh; display:flex; align-items:center;
  background:var(--asphalt); overflow:hidden; color:var(--text)}
.inter-bg{position:absolute; inset:-8% 0; z-index:0; background:#05070b center/cover no-repeat;
  background-image:url(assets/cockpit.webp); will-change:transform}
.inter-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(8,10,15,.9) 0%,rgba(8,10,15,.5) 46%,rgba(8,10,15,.14) 100%),
             linear-gradient(0deg,var(--asphalt),transparent 24%,transparent 78%,var(--asphalt))}
.inter-inner{position:relative; z-index:3; padding:0 var(--pad); max-width:760px}
.inter blockquote{margin:0; font-weight:850; font-stretch:120%; text-transform:uppercase;
  letter-spacing:-.014em; line-height:.98; font-size:clamp(30px,5.2vw,66px)}
.inter blockquote em{font-style:normal; color:var(--orange)}
.inter .attr{font-family:var(--mono); font-size:12px; color:var(--steel); letter-spacing:.06em;
  margin-top:24px; display:flex; align-items:center; gap:12px}
.inter .attr::before{content:""; width:26px; height:1px; background:var(--orange)}

/* racecraft cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(34px,5vw,54px)}
.card{background:var(--paper-raised); border:1px solid var(--line-paper); border-radius:4px;
  padding:26px 24px 28px; transition:transform .22s var(--brake),box-shadow .22s var(--brake)}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(21,23,28,.4)}
.card .kick{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ember); display:flex; align-items:center; gap:9px}
.card .kick::before{content:""; width:8px; height:8px; background:var(--orange); border-radius:1px}
.card h3{font-size:20px; font-weight:750; margin:16px 0 10px; letter-spacing:-.01em}
.card p{font-size:14px; color:var(--steel-ink); line-height:1.55}
@media(max-width:820px){ .cards{grid-template-columns:1fr} }
.craft-quote{margin-top:34px; font-family:var(--mono); font-size:clamp(13px,1.5vw,15px);
  color:var(--ink); background:var(--paper-raised); border:1px solid var(--line-paper);
  border-left:2px solid var(--orange); border-radius:3px; padding:16px 20px; display:inline-block}
.craft-quote b{color:var(--ember)}

/* garage plates */
.plates{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:clamp(30px,4vw,48px)}
.plate{background:var(--asphalt); border:1px solid var(--line-dark); border-radius:5px;
  padding:clamp(30px,4vw,52px); min-height:210px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .22s var(--brake),border-color .22s var(--brake)}
.plate svg{width:120px; color:var(--orange)}
.plate.next svg{color:var(--steel); opacity:.5}
.plate .pn{font-family:var(--sans); font-weight:850; font-stretch:120%; text-transform:uppercase;
  font-size:clamp(22px,3vw,34px); letter-spacing:-.01em; color:var(--text); margin-top:20px}
.plate .ps{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-top:8px}
.plate.now:hover{transform:translateY(-4px); border-color:rgba(255,79,0,.5)}
.plate.now .ps{color:var(--orange)}
@media(max-width:720px){ .plates{grid-template-columns:1fr} }

/* download CTA band */
.cta-band{position:relative; background:var(--asphalt); color:var(--text); text-align:center;
  padding:clamp(80px,13vh,150px) var(--pad); overflow:hidden}
.cta-band::after{content:""; position:absolute; left:50%; top:0; width:2px; height:52px;
  background:linear-gradient(var(--orange),transparent); transform:translateX(-50%)}
.cta-band h2{font-size:clamp(40px,8vw,108px); font-weight:850; font-stretch:125%; text-transform:uppercase;
  letter-spacing:-.016em; line-height:.92; margin:0 auto .3em; max-width:16ch}
.cta-band h2 em{font-style:normal; color:var(--orange)}
.cta-band .lead{margin:0 auto 34px; color:#cdd4de; text-align:center}
.cta-band .spec{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--steel); margin-top:20px}

/* footer */
.foot{background:var(--asphalt-2); color:var(--steel); padding:44px var(--pad) 40px; border-top:1px solid var(--line-dark)}
.foot .frow{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.foot svg{width:96px; color:var(--text)}
.foot-links{display:flex; gap:24px}
.foot-links a{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; transition:color .16s}
.foot-links a:hover{color:var(--orange)}
.foot .line{font-family:var(--mono); font-size:11px; color:var(--steel-ink); margin-top:28px; letter-spacing:.04em}

/* ============================================================
   SCROLL-PROGRESS TIMING BAR
   ============================================================ */
.progress-retired{position:fixed; top:0; left:0; height:2px; width:0; z-index:70;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,79,0,.55)}

/* ============================================================
   ON-STREAM / OBS SECTION — overlays composited on a broadcast
   ============================================================ */
.stream{position:relative; background:var(--asphalt); color:var(--text);
  padding:clamp(72px,11vh,140px) var(--pad)}
.stream .sec-head .eyebrow{color:var(--steel)}
.stream .sec-head h2{color:var(--text)}
.stream .lead{color:#cdd4de}
.stage-wrap{position:relative; max-width:1240px; margin:clamp(30px,4vw,48px) auto 0;
  border:1px solid var(--line-dark); border-radius:9px; overflow:hidden;
  box-shadow:0 50px 130px -55px rgba(0,0,0,.95)}
.stage{position:relative; aspect-ratio:16/9; background:#05070b center/cover no-repeat;
  background-image:url(assets/broadcast.webp)}
.stage::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 42%, transparent 44%, rgba(6,8,12,.55))}
.srcbar{position:absolute; top:0; left:0; right:0; height:28px; z-index:8;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:linear-gradient(rgba(6,8,12,.72),transparent);
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--steel)}
.srcbar .d{width:8px; height:8px; border-radius:50%; background:var(--steel); opacity:.45}
.srcbar .tag{margin-left:auto; color:var(--steel); letter-spacing:.16em}

/* real-capture browser sources over a live feed */
.stage-feed{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .6s var(--brake)}
.stage.feed-on .stage-feed{opacity:1}
.src-item{position:absolute; z-index:7; opacity:0; transform:scale(.92); will-change:transform}
.src-item img{display:block; width:100%; height:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.src-item::after{content:""; position:absolute; inset:-7px; pointer-events:none;
  border:1.5px dashed rgba(255,79,0,.95); border-radius:3px;
  background:
   linear-gradient(var(--orange),var(--orange)) top left/8px 8px no-repeat,
   linear-gradient(var(--orange),var(--orange)) top right/8px 8px no-repeat,
   linear-gradient(var(--orange),var(--orange)) bottom left/8px 8px no-repeat,
   linear-gradient(var(--orange),var(--orange)) bottom right/8px 8px no-repeat;
  opacity:0; transition:opacity .25s ease}
.src-item.in{opacity:1; transform:scale(1); transition:opacity .45s var(--brake), transform .45s var(--brake)}
.src-item.sel::after{opacity:1}
.si-rel{top:10%; left:2.5%; width:clamp(170px,19vw,240px)}
.si-dlt{top:10%; left:40%; width:clamp(140px,15vw,200px); transition:translate .9s var(--brake)}
.si-dlt.moved{translate:clamp(120px,16vw,230px) 6%}
.si-inp{bottom:9%; left:2.5%; width:clamp(160px,17vw,220px)}
.si-fuel{bottom:9%; right:2.5%; width:clamp(300px,42vw,540px)}
.streamcap{max-width:64ch; margin:26px auto 0; text-align:center; color:var(--steel);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em}
.streamcap b{color:var(--text)}
@media(max-width:680px){
  .si-inp,.si-dlt{display:none}
  .stage{aspect-ratio:3/4}
  .srcbar{font-size:8.5px; letter-spacing:.06em}
  .srcbar span:first-of-type + span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
  .srcbar .tag{display:none}
  .si-rel{top:44px; left:4%; width:min(52vw,210px)}
  .si-fuel{bottom:5%; left:4%; right:4%; width:auto}
}

/* ============================================================
   SPEC SHEET
   ============================================================ */
.spec{max-width:900px; margin:clamp(30px,4vw,48px) 0 0; display:flex; flex-direction:column;
  border-top:1px solid var(--line-paper)}
.srow{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:18px 4px;
  border-bottom:1px solid var(--line-paper); align-items:baseline}
.srow dt{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ember)}
.srow dd{margin:0; font-size:15.5px; color:var(--ink)}
@media(max-width:640px){ .srow{grid-template-columns:1fr; gap:5px} }

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important; transform:none!important; filter:none!important}
  .hero h1 .ln>span,.hero-sub,.hero .eyebrow,.cta,.cta-note,.hud,.scrollcue,.hero .ticks{opacity:1!important; transform:none!important}
  .hero-media{transform:none!important}
  .grain{display:none}
  .ticks .minor,.ticks .major{--draw:1!important; transform:scaleX(1)!important}
}

/* ============================ DOWNLOAD PAGE ============================ */
.dl-hero{
  max-width:1120px;margin:0 auto;padding:clamp(90px,14vh,150px) var(--pad) 40px;
  display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;
}
.dl-lead .display{font-size:clamp(52px,10vw,120px);line-height:.9}
.dl-lead .lead{margin-top:22px;max-width:34ch}
.dl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:34px}
.dl-cta .ghost{white-space:nowrap}
.spec,.dl-fallback{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--steel-ink)}
.spec{margin-top:22px}
.dl-fallback{margin-top:14px;color:var(--steel);max-width:40ch;line-height:1.7}
.dl-fallback a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(255,79,0,.35)}

.dl-card{
  background:var(--asphalt-raised);border:1px solid var(--line-dark);border-radius:16px;
  padding:clamp(22px,3vw,32px);
}
.dl-card-h{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel-ink);margin:0 0 18px;
}
.dl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.dl-list li{
  position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--steel);
}
.dl-list li b{color:var(--text);font-weight:650}
.dl-list li::before{
  content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;border-radius:2px;
  background:var(--orange);transform:skewX(-12deg);
}
.dl-card-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark);
  font-size:12.5px;line-height:1.6;color:var(--steel-ink)}

.dl-steps{max-width:900px;margin:0 auto;padding:clamp(40px,8vh,90px) var(--pad) clamp(70px,10vh,120px)}
.dl-steps-h{font-family:var(--sans);font-weight:850;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(26px,4.5vw,44px);margin:0 0 34px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.steps li{display:flex;gap:18px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--steel)}
.steps li b{color:var(--text);font-weight:650}
.steps .dim{color:var(--steel-ink)}
.steps .sn{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:14px;color:var(--orange);
  background:rgba(255,79,0,.09);border:1px solid rgba(255,79,0,.28);
}
.dl-req{margin-top:34px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--steel-ink)}
.dl-req b{color:var(--steel)}

@media (max-width:760px){
  .dl-hero{grid-template-columns:1fr;padding-top:clamp(84px,12vh,110px)}
  .dl-lead .lead,.dl-fallback{max-width:none}
  .dl-cta .btn.big{width:100%;text-align:center}
}

/* launch waitlist (download page) */
.waitlist { margin-top: 26px; max-width: 460px; }
.waitlist label { display: block; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .06em; color: #97a2b4; margin-bottom: 10px; }
.waitlist-row { display: flex; gap: 10px; }
.waitlist-row input { flex: 1; background: #0e1420; border: 1px solid rgba(151,162,180,.28); border-radius: 9px; color: #f4f7fb; padding: 12px 14px; font-size: 14px; }
.waitlist-row input:focus { outline: none; border-color: #ff4f00; }
.waitlist-row .btn { white-space: nowrap; }
.waitlist-note { margin-top: 8px; font-size: 11.5px; color: #5b6472; font-family: var(--mono, monospace); letter-spacing: .04em; }


/* ================= v2 — boarding hero chips, fuel showcase, lap rail ================= */
.live-d{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--orange);
  margin-right:2px; vertical-align:1px; animation:blink 1.8s steps(1) infinite}

.chipstage{position:absolute; z-index:3; right:2vw; top:0; bottom:0; width:34vw; min-width:400px;
  perspective:1300px; pointer-events:none}
.chip{position:absolute; background:rgba(16,20,29,.78); border:1px solid var(--line-dark); border-radius:10px;
  backdrop-filter:blur(10px); box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform-style:preserve-3d; will-change:transform;
  font-family:var(--mono); letter-spacing:.02em;
  opacity:0; transition:opacity 1s var(--brake)}
.hero.s2 .chip{opacity:1}
.chip .ch{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:8px 12px; border-bottom:1px solid var(--line-dark);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel)}
.chip .ch .live i{display:inline-block; width:5px; height:5px; border-radius:50%;
  background:#34D399; margin-right:5px; vertical-align:1px; animation:blink 1.6s steps(1) infinite}
.chip .cb{padding:10px 12px}
.chip-rel{width:290px; left:0; top:47%}
.chip-rel .crow{display:grid; grid-template-columns:30px 1fr 52px; gap:8px; padding:4px 2px; font-size:12px; color:var(--steel)}
.chip-rel .crow b{color:var(--text); font-weight:600}
.chip-rel .crow.you{background:rgba(255,79,0,.10); border-radius:4px; color:var(--text)}
.chip-rel .cg{text-align:right}
.chip-rel .up{color:#34D399}.chip-rel .dn{color:#FB7185}
.chip-dlt{width:230px; right:3%; top:27%}
.chip-dlt .cbig{font-size:44px; line-height:1; font-weight:700; letter-spacing:-.02em; color:#34D399; text-align:center; padding:6px 0 2px}
.chip-dlt .ccap{text-align:center; font-size:9.5px; letter-spacing:.14em; color:var(--steel); padding-bottom:6px}
.chip-hud{width:280px; right:6%; bottom:11%}
.chip-hud .crow2{display:flex; justify-content:space-between; padding:5px 2px; font-size:12px; color:var(--steel)}
.chip-hud .crow2 b{color:var(--text); font-weight:600}
.chip-hud .ccall{margin-top:8px; background:var(--orange); color:var(--ink); border-radius:5px;
  display:flex; justify-content:space-between; align-items:center; padding:9px 12px;
  font-size:14px; font-weight:800; letter-spacing:.06em;
  opacity:0; transform:scale(.92); transition:all .5s var(--brake)}
.chip-hud .ccall.in{opacity:1; transform:scale(1); animation:stampcall .8s var(--brake)}
@keyframes stampcall{0%{box-shadow:0 0 0 0 rgba(255,79,0,.55)}100%{box-shadow:0 0 0 22px rgba(255,79,0,0)}}

/* fuel showcase — pinned expanding real capture */
.expand{position:relative; height:300vh; background:var(--asphalt, #0C0F16)}
.xpin{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center}
.xgrid{width:100%; max-width:1180px; margin:0 auto; padding:0 var(--pad); display:grid;
  grid-template-columns:minmax(300px,420px) 1fr; gap:48px; align-items:center}
.display-sm{font-weight:850; font-stretch:125%; text-transform:uppercase; letter-spacing:-.015em;
  line-height:.95; font-size:clamp(34px,4.4vw,58px); color:var(--text); margin-top:18px}
.display-sm .ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.display-sm .ln>span{display:inline-block; transform:translateY(110%); transition:transform .9s var(--brake)}
.xcopy.on .display-sm .ln>span{transform:translateY(0)}
.xcopy .eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--steel)}
.xcopy .eyebrow::before{content:""; width:22px; height:1px; background:var(--orange)}
.xfeat{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.xfeat li{display:flex; gap:12px; align-items:baseline; color:#aeb6c2; font-size:14px; line-height:1.55;
  opacity:0; transform:translateY(12px); transition:all .7s var(--brake)}
.xfeat li i{flex:0 0 8px; width:8px; height:8px; background:var(--steel); transform:skewX(-12deg) translateY(1px)}
.xfeat li b{color:var(--text)}
.xcopy.on .xfeat li{opacity:1; transform:none}
.xcopy.on .xfeat li:nth-child(1){transition-delay:.22s}
.xcopy.on .xfeat li:nth-child(2){transition-delay:.32s}
.xcopy.on .xfeat li:nth-child(3){transition-delay:.42s}
.xcopy.on .xfeat li:nth-child(4){transition-delay:.52s}
.xshotwrap{perspective:1400px; display:flex; justify-content:center}
.xshot{width:100%; border-radius:12px; border:1px solid var(--line-dark);
  box-shadow:0 40px 120px rgba(0,0,0,.6); overflow:hidden; background:#10141d;
  transform-origin:60% 50%; will-change:transform}
.xshot img{display:block; width:100%; height:auto}
.xshot .xcap{display:flex; justify-content:space-between; padding:9px 14px; border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel)}
.xshot .xcap b{color:#aeb6c2}
.xnote{position:absolute; left:0; right:0; bottom:44px; margin:0; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
  transition:opacity .5s ease}

/* lap-progress rail (replaces the old top progress bar) */
.laprail{position:fixed; left:0; right:0; bottom:0; height:26px; z-index:60; pointer-events:none;
  background:linear-gradient(0deg, rgba(12,15,22,.9), transparent)}
.laprail .lr-ticks{position:absolute; inset:auto 24px 8px; height:12px; opacity:.55;
  background:
   repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 8px) bottom/100% 5px no-repeat,
   repeating-linear-gradient(90deg, #aeb6c2 0 2px, transparent 2px 40px) bottom/100% 10px no-repeat}
.laprail .lr-you{position:absolute; bottom:8px; left:24px; width:3px; height:14px; background:var(--orange);
  box-shadow:0 0 8px rgba(255,79,0,.6)}
.laprail .lr-lab{position:absolute; right:24px; bottom:22px; font-family:var(--mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--steel)}

@media(max-width:900px){
  /* chips: no stage scaling (it drifts positioned children) — size them directly */
  .chipstage{right:0; width:100vw; min-width:0; top:auto; bottom:0;
    height:clamp(190px,32vh,300px); transform:none; perspective:none}
  .chip{border-radius:8px}
  .chip .ch{font-size:8.5px; padding:6px 10px; letter-spacing:.12em}
  .chip-rel{width:210px; left:3%; top:0}
  .chip-rel .crow{font-size:10.5px; grid-template-columns:24px 1fr 44px; gap:6px; padding:3px 2px}
  .chip-dlt{width:160px; right:3%; top:0}
  .chip-dlt .cbig{font-size:28px; padding:4px 0 2px}
  .chip-dlt .ccap{font-size:8.5px}
  .chip-hud{width:220px; right:3%; bottom:2%; left:auto}
  .chip-hud .crow2{font-size:10.5px; padding:4px 2px}
  .chip-hud .ccall{font-size:11.5px; padding:7px 10px; margin-top:6px}
  .hero-inner{padding-bottom:clamp(200px,34vh,310px)}
  .xgrid{grid-template-columns:1fr; gap:26px}
  .display-sm{font-size:clamp(30px,8vw,44px)}
}
@media(max-width:560px){
  .chip-rel{display:none}
  .chip-dlt{top:0; right:3%}
  .chip-hud{bottom:2%; left:3%; right:auto}
  .hero h1{font-size:clamp(40px,12vw,54px)}
  .hero-sub{font-size:14.5px; margin-top:14px}
  .cta{margin-top:20px}
}
@media (prefers-reduced-motion: reduce){
  .hero-track{height:auto}
  .hero{position:relative}
  .expand{height:auto}
  .xpin{position:relative; height:auto; padding:80px 0}
  .xnote{display:none}
  .hero h1 .ln>span, .hero-sub, .cta, .cta-note, .chip, .scrollcue,
  .display-sm .ln>span, .xfeat li{opacity:1!important; transform:none!important}
}