:root{
  --ink:#171a20;
  --mute:#5c5e62;
  --line:#e2e3e3;
  --paper:#ffffff;
  --soft:#f4f4f4;
  --red:#a3121a;
  --glow:#f6c453;
  --f:"Barlow",system-ui,sans-serif;
  --fc:"Barlow Semi Condensed","Barlow",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* unveil intro */
#unveil{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .7s ease,visibility .7s}
#unveil.gone{opacity:0;visibility:hidden}
.uv-live{font:600 12px/1 var(--fc);letter-spacing:.3em;display:flex;align-items:center;gap:8px;color:#ff3b3b}
.uv-live .dot{width:8px;height:8px;border-radius:50%;background:#ff3b3b;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.uv-title{font:500 clamp(28px,6vw,56px)/1 var(--f);letter-spacing:.02em}
.uv-sub{font-size:14px;color:#9a9a9a}
.uv-bar{width:min(260px,60vw);height:2px;background:#222;margin-top:10px;overflow:hidden}
.uv-bar i{display:block;height:100%;width:0;background:#fff;animation:load 1.6s ease forwards}
@keyframes load{to{width:100%}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;color:#fff;transition:background .3s,color .3s}
.nav.light{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--ink)}
.logo{font:600 18px/1 var(--fc);letter-spacing:.42em}
.links{display:flex;gap:6px}
.links a,.nav-x{font-size:14px;font-weight:500;padding:8px 14px;border-radius:4px;transition:background .2s}
.links a:hover,.nav-x:hover{background:rgba(127,127,127,.18)}
.nav-r{display:flex;gap:6px;align-items:center}
.nav-buy{font-size:14px;font-weight:600;padding:8px 16px;border-radius:4px;background:var(--red);color:#fff}

/* full-bleed panels */
.panel{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center}
.panel .bg,.panel picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.panel picture img{width:100%;height:100%;object-fit:cover}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 32%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5));z-index:1;pointer-events:none}
.panel-top,.panel-bot{position:relative;z-index:2;padding:0 20px}
.panel-top{padding-top:16vh}
.panel-bot{padding-bottom:9vh;display:flex;flex-direction:column;align-items:center;gap:18px}
h1,h2{font-weight:500;letter-spacing:-.005em}
.panel h1{font-size:clamp(34px,5.4vw,56px);line-height:1.05}
.panel h2{font-size:clamp(30px,4.6vw,48px);line-height:1.08}
.sub{margin-top:10px;font-size:clamp(15px,1.5vw,18px);opacity:.92}
.sub u{text-underline-offset:4px;text-decoration-thickness:1px}
.btns{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:240px;height:44px;padding:0 24px;border-radius:4px;font-size:14px;font-weight:600;transition:filter .2s,background .2s}
.btn.solid{background:var(--red);color:#fff}
.btn.solid:hover{filter:brightness(1.12)}
.btn.ghost{background:rgba(244,244,244,.82);color:var(--ink)}
.btn.ghost:hover{background:#fff}
.btn.ghost-d{background:var(--soft);color:var(--ink)}
.btn.wide{width:100%;min-width:0}
.ticker-chip{font:600 12px/1 var(--fc);letter-spacing:.24em;text-transform:uppercase;opacity:.8}

.stat-row{display:flex;gap:56px}
.stat-row div{display:flex;flex-direction:column;gap:4px}
.stat-row b{font-size:clamp(26px,3vw,36px);font-weight:500}
.stat-row small{font-size:.5em;margin-left:2px}
.stat-row span{font-size:13px;opacity:.85}

/* specs */
.specs{display:grid;grid-template-columns:1.25fr 1fr;min-height:100vh;align-items:center;background:var(--paper)}
.specs-img{height:100%;min-height:420px;background:#f2f2f2;display:flex;align-items:center}
.specs-img img{width:100%;height:100%;object-fit:cover}
.specs-body{padding:72px clamp(24px,5vw,80px)}
.eyebrow{font:600 12px/1 var(--fc);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.specs-body h2{font-size:clamp(30px,3.6vw,42px);margin:10px 0 36px}
.specs-body dl{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.specs-body dt{font-size:13px;color:var(--mute);margin-bottom:4px}
.specs-body dd{font-size:16px;font-weight:500}

/* studio / order */
.studio{display:grid;grid-template-columns:1fr 400px;min-height:100vh;background:var(--paper);padding-top:64px}
.studio-view{position:relative;display:flex;align-items:center;justify-content:center;background:#fafafa;overflow:hidden}
.studio-view{background:#f3f3f1}
.studio-view img{width:100%;height:100%;object-fit:contain}
.studio-cap{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:15px;font-weight:500;color:var(--ink)}
.order{padding:40px 36px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.order h2{font-size:34px;text-align:center}
.eta{text-align:center;font-size:14px;color:var(--mute);margin-bottom:12px}
.opt-label{font-size:13px;font-weight:600;margin-top:12px}
.swatches{display:flex;gap:12px}
.sw{width:40px;height:40px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px #c9c9c9;transition:box-shadow .2s}
.sw.on{box-shadow:0 0 0 2px #3e6ae1}
.opt{display:flex;justify-content:space-between;padding:14px 16px;border-radius:4px;box-shadow:0 0 0 1px #c9c9c9;font-size:14px}
.opt.on{box-shadow:0 0 0 2px #3e6ae1}
.opt span:last-child{color:var(--mute)}
.ca{display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:4px;padding:6px 6px 6px 14px}
.ca code{flex:1;font:500 13px/1.3 ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}
.ca button{border:0;background:#fff;border-radius:4px;padding:8px 14px;font-size:13px;font-weight:600}
.order .btn{margin-top:8px}
.fine{font-size:12px;color:var(--mute);text-align:center;margin-top:6px}

/* delivery */
.delivery{padding:110px clamp(20px,6vw,96px);background:var(--soft)}
.delivery h2{font-size:clamp(28px,3.6vw,42px);margin:10px 0 48px;max-width:16ch}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{background:#fff;border-radius:6px;padding:28px 24px}
.steps b{font:600 13px/1 var(--fc);letter-spacing:.2em;color:var(--red)}
.steps h3{font-size:19px;font-weight:600;margin:18px 0 8px}
.steps p{font-size:14px;line-height:1.55;color:var(--mute)}

/* teaser */
.teaser{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:clamp(24px,5vw,80px);align-items:center;background:#000;color:#fff;padding:90px clamp(20px,6vw,96px)}
.teaser img{width:100%;border-radius:4px}
.teaser .eyebrow{color:var(--glow)}
.teaser h2{font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin:14px 0 30px}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;padding:28px 20px 36px;font-size:12px;color:var(--mute);background:#fff}
.foot a:hover{color:var(--ink)}
.foot .disc{flex-basis:100%;text-align:center;color:#8e8e8e}

/* reveal on scroll */
.panel-top,.panel-bot,.specs-body,.order,.steps li,.teaser>div{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.in .panel-top,.in .panel-bot,.in.specs-body,.in .specs-body,.in .order,.in .steps li,.in .teaser>div,.teaser.in>div{opacity:1;transform:none}
.steps li:nth-child(2){transition-delay:.08s}.steps li:nth-child(3){transition-delay:.16s}.steps li:nth-child(4){transition-delay:.24s}

@media (max-width:1000px){
  .links{display:none}
  .specs,.studio{grid-template-columns:1fr}
  .specs-img{min-height:56vw}
  .studio-view{min-height:62vw}
  .order{border-left:0;border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr 1fr}
  .teaser{grid-template-columns:1fr}
}
@media (max-width:600px){
  .nav{padding:12px 16px}
  .logo{font-size:15px;letter-spacing:.3em}
  .nav-x{display:none}
  .btn{min-width:0;width:100%}
  .btns{width:100%;max-width:360px;flex-direction:column;gap:12px}
  .panel-top{padding-top:13vh}
  #orbit .bg{object-position:30% 50%}
  #highway .bg{object-position:38% 50%}
  #liftoff .bg{object-position:74% 50%}
  .stat-row{gap:24px}
  .specs-body dl{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .order{padding:32px 16px}
  .delivery,.teaser{padding:72px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .panel-top,.panel-bot,.specs-body,.order,.steps li,.teaser>div{opacity:1;transform:none}
}
