:root{--sc-canvas:#0a0c10;--sc-surface:#121722;--sc-ink:#eef1f6;--sc-ink-soft:#a3adbd;--sc-accent:#7cc4ff;--sc-accent-ink:#07101a}
a{color:var(--sc-accent)}
.skip{position:absolute;left:-999px;z-index:50}.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px}
:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px}

.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:var(--sc-3);padding:var(--sc-3) var(--sc-gutter);background:color-mix(in oklab,var(--sc-canvas) 72%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--sc-hairline)}
.brand{color:var(--sc-ink);text-decoration:none;font-weight:600;display:flex;align-items:center;gap:10px}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--sc-accent);color:var(--sc-accent-ink);font-weight:700}
.nav ul{list-style:none;display:flex;gap:var(--sc-5);margin:0;padding:0;align-items:center}
.nav a:not(.brand){color:var(--sc-ink-soft);text-decoration:none;font-size:var(--sc-t-sm)}
.nav a:not(.brand):hover{color:var(--sc-ink)}
.nav .nav-cta{color:var(--sc-accent)!important}
@media (max-width:640px){.nav li:not(:last-child){display:none}}

.btn{display:inline-block;background:var(--sc-accent);color:var(--sc-accent-ink);padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:600;border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--sc-ink);border:1px solid var(--sc-hairline-strong)}
.btn:hover{filter:brightness(1.08)}
.accent{color:var(--sc-accent)}

/* hero: four independent planes behind the type */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:6rem;padding-bottom:var(--sc-8)}
.hero-planes{position:absolute;inset:0;pointer-events:none}
.plane{position:absolute;inset:-10% 0}
.plane-grid{background-image:linear-gradient(var(--sc-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--sc-hairline) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%)}
.plane-glow{background:radial-gradient(40% 50% at 75% 40%,color-mix(in oklab,var(--sc-accent) 28%,transparent),transparent 70%)}
.plane-gate{inset:auto 6% 18% auto;width:min(34vw,420px);height:min(30vw,360px);display:flex;align-items:flex-end;justify-content:space-between;opacity:.8}
.gate-post{width:14px;height:100%;border-radius:7px;background:linear-gradient(var(--sc-accent),transparent)}
.gate-bar{position:absolute;left:0;right:0;top:30%;height:10px;border-radius:5px;background:var(--sc-accent);transform-origin:left;transform:rotate(calc(-28deg + var(--sc-p,0) * 28deg));box-shadow:0 0 40px var(--sc-accent)}
.hero-copy{position:relative}
.hero h1{max-width:15ch;margin:var(--sc-4) 0 var(--sc-5);text-wrap:balance}
.hero .sc-lede{max-width:56ch}
.actions{display:flex;gap:var(--sc-3);flex-wrap:wrap;margin-top:var(--sc-6)}
.hero-lead{margin-top:var(--sc-7);max-width:640px}
@media (max-width:700px){.hero h1{font-size:var(--sc-t-2xl)}.plane-gate{opacity:.35;width:60vw;height:50vw}}

/* offers: horizontal rail */
.offers-stage{display:flex;align-items:center;min-height:100svh;overflow:hidden}
.rail{gap:var(--sc-5);padding:6rem var(--sc-gutter) var(--sc-6);align-items:stretch}
.rail-intro,.rail-outro{flex:0 0 min(80vw,26rem);display:flex;flex-direction:column;justify-content:center;gap:var(--sc-4)}
.rail-intro h2{margin:0;text-wrap:balance}
.rail-outro{flex-basis:min(70vw,18rem);align-items:flex-start}
.offer{flex:0 0 min(84vw,24rem);background:var(--sc-surface);border:1px solid var(--sc-hairline);border-radius:20px;padding:var(--sc-6);display:flex;flex-direction:column}
.offer h3{font-family:var(--sc-font-display);font-size:var(--sc-t-lg);line-height:1.2;margin:var(--sc-2) 0 var(--sc-4);text-wrap:balance}
.offer-n{color:var(--sc-accent)}
.offer dl{margin:0 0 var(--sc-6);flex:1}
.offer dt{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--sc-accent);margin-top:var(--sc-4)}
.offer dd{margin:var(--sc-1) 0 0;color:var(--sc-ink-soft)}
.offer .btn{align-self:flex-start}
.hero-lead .offer{border-color:var(--sc-accent)}

/* gate: pinned argument */
.gate-stage{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;gap:var(--sc-8);align-items:center}
.gate-head h2{margin-top:var(--sc-4);text-wrap:balance}
.gate-steps{list-style:none;margin:0;padding:0;display:grid}
.gate-steps li{grid-area:1/1;font-size:var(--sc-t-lg);color:var(--sc-ink-soft);border-left:2px solid var(--sc-accent);padding-left:var(--sc-5)}
.gate-steps strong{display:block;color:var(--sc-ink);font-family:var(--sc-font-display);font-size:var(--sc-t-xl);margin:var(--sc-2) 0}
@media (max-width:800px){.gate-stage{grid-template-columns:1fr;align-content:center;gap:var(--sc-6)}}

/* updates + contact */
.updates-grid,.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--sc-8);align-items:start}
@media (max-width:800px){.updates-grid,.contact-grid{grid-template-columns:1fr;gap:var(--sc-6)}}
.updates{list-style:none;margin:0;padding:0}
.updates li{padding:var(--sc-4) 0;border-bottom:1px solid var(--sc-hairline);color:var(--sc-ink-soft)}
.updates time{display:block;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);color:var(--sc-accent)}
.contact{border-top:1px solid var(--sc-hairline)}
.signup{display:grid;gap:var(--sc-2)}
.signup label{font-size:var(--sc-t-sm);color:var(--sc-ink-soft);margin-top:var(--sc-2)}
input,select,textarea{background:var(--sc-surface);border:1px solid var(--sc-hairline-strong);border-radius:12px;padding:12px}
.signup .btn{justify-self:start;margin-top:var(--sc-4)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sc-3);color:var(--sc-ink-soft);font-size:var(--sc-t-sm);padding-block:var(--sc-7);border-top:1px solid var(--sc-hairline)}

/* reduced motion: no lateral travel, rail becomes a grid, gate steps stack */
@media (prefers-reduced-motion:reduce){
  .offers-act{height:auto!important}
  .offers-stage{position:static!important;min-height:0;overflow:visible}
  .rail{flex-wrap:wrap;transform:none!important}
  .offer{flex:1 1 20rem}
  .gate-act{height:auto!important}.gate-stage{position:static!important}
  .gate-steps{gap:var(--sc-6)}.gate-steps li{grid-area:auto;opacity:1!important;transform:none!important}
}
.hero-new{margin-top:var(--sc-5);font-size:var(--sc-t-sm)}