/* ============================================================
   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
   ============================================================ */
.hero{position:relative; min-height:100svh; 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-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#05070b}
.hero-gl{position:absolute; inset:0; width:100%; height:100%; display:none}
.hero-media.gl .hero-bg{opacity:0}
.hero-media.gl .hero-gl{display:block}
.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)}
.loaded .hero h1 .ln>span{transform:translateY(0)}
.loaded .hero 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) .5s;
}
.loaded .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) .64s;
}
.loaded .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 .9s}
.loaded .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:0; transition:.6s ease 1.2s; animation:cuebob 2.4s var(--brake) 1.4s infinite}
.loaded .scrollcue{opacity:.8}
@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)}

/* ============================================================
   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{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}

/* overlay panels */
.ov{position:absolute; z-index:7; font-family:var(--mono);
  background:rgba(11,14,21,.80); backdrop-filter:blur(9px) saturate(1.1);
  border:1px solid var(--line-dark); border-radius:5px;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.85); overflow:hidden}
.ov .ovh{font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
  padding:7px 11px 6px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line-dark)}
.ov .live{color:var(--orange); display:flex; align-items:center; gap:5px}
.ov .live .d{width:5px; height:5px; border-radius:50%; background:var(--orange);
  animation:blink 1.8s steps(1) infinite}
.ov .ovb{padding:9px 11px}
.ov.rel{top:8.5%; left:2.4%; width:clamp(180px,20vw,244px)}
.rrow{display:grid; grid-template-columns:30px 1fr auto; gap:8px; align-items:center;
  font-size:12px; padding:3.5px 0; color:#c8d0dc}
.rrow .p{color:var(--steel); font-size:11px}
.rrow .g{font-variant-numeric:tabular-nums; font-weight:600}
.rrow .g.up{color:var(--good)} .rrow .g.dn{color:var(--bad)}
.rrow.self{color:var(--text); font-weight:600}
.rrow.self .p{color:var(--orange)}
.rrow.self::before{content:""; position:absolute; left:0; width:2px; height:18px; background:var(--orange); margin-left:-11px}
.ov.rel .ovb{position:relative}
.ov.delta{top:8.5%; left:50%; transform:translateX(-50%); width:clamp(120px,14vw,168px); text-align:center}
.ov.delta .big{font-size:clamp(26px,3.4vw,40px); font-weight:700; letter-spacing:-.02em;
  color:var(--good); line-height:1; padding:4px 0 2px}
.ov.delta .cap{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.ov.fuel{bottom:7%; right:2.4%; width:clamp(150px,17vw,206px)}
.frow{display:flex; justify-content:space-between; font-size:12px; padding:4px 0; color:#c8d0dc}
.frow .k{color:var(--steel)} .frow .v{font-weight:600; color:var(--text); font-variant-numeric:tabular-nums}
.frow.call{margin-top:6px; padding-top:9px; border-top:1px solid var(--line-dark)}
.frow.call .v{color:var(--orange)}
.ov.inp{bottom:7%; left:2.4%; width:clamp(150px,16vw,196px)}
.inl{display:flex; justify-content:space-between; font-size:10px; color:var(--steel);
  letter-spacing:.05em; margin-bottom:3px}
.bar{height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; margin:0 0 9px}
.bar>i{display:block; height:100%; border-radius:4px; width:20%}
.bar.thr>i{background:var(--good); animation:thr 2.8s var(--brake) infinite}
.bar.brk>i{background:var(--bad);  animation:brk 2.8s var(--brake) infinite}
.gearrow{display:flex; justify-content:space-between; align-items:center; margin-top:2px}
.gearrow .gear{font-size:22px; font-weight:700; color:var(--text); line-height:1}
.gearrow .spd{font-size:12px; color:var(--steel)} .gearrow .spd b{color:var(--text); font-weight:600}
@keyframes thr{0%{width:88%}18%{width:10%}44%{width:100%}68%{width:76%}100%{width:88%}}
@keyframes brk{0%{width:4%}16%{width:82%}38%{width:3%}100%{width:4%}}
.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){ .ov.inp,.ov.delta{display:none} .ov.rel{width:150px} .ov.fuel{width:150px} }

/* ============================================================
   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; }