:root{--bg:#04141c;--ink:#e8f3f2;--mute:rgba(232,243,242,.62);--warm:#ffbf8f;--teal:#7fe3e6}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,48px);pointer-events:none}
.mark{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.02em;font-weight:500;pointer-events:auto}
.mark em{font-style:normal;color:var(--mute);font-weight:400}
.hint{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.hero{position:relative;height:100vh;height:100svh;overflow:hidden}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,20,28,.55) 0%,rgba(4,20,28,0) 22%,rgba(4,20,28,0) 62%,rgba(4,20,28,.7) 100%)}
.phase{text-shadow:0 2px 24px rgba(2,12,18,.55);position:absolute;left:clamp(20px,6vw,96px);bottom:clamp(88px,14vh,160px);max-width:min(560px,86vw);opacity:0;will-change:opacity,transform}
.phase[data-phase="0"]{opacity:1}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--warm);margin-bottom:14px;font-weight:500}
.phase h1,.phase h2{font-weight:300;font-size:clamp(34px,5.2vw,68px);line-height:1.02;letter-spacing:-.025em}
.sub{margin-top:16px;font-size:clamp(15px,1.3vw,18px);color:var(--mute);font-weight:300;line-height:1.5}
.rail{position:absolute;right:clamp(20px,4vw,48px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;align-items:flex-end;font-size:11px;letter-spacing:.14em;color:rgba(232,243,242,.35)}
.tick{transition:color .4s}.tick.on{color:var(--ink)}
.bar{width:1px;height:90px;background:rgba(232,243,242,.15);position:relative;margin-top:6px}
.bar i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--teal);transform-origin:top;transform:scaleY(0)}
.loader{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(127,227,230,.08)}
.loader i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--warm));transition:width .2s,opacity .6s}
.loader.done{opacity:0;transition:opacity .8s .4s}
.next{min-height:100vh;display:grid;place-items:center;padding:120px clamp(20px,6vw,96px);background:radial-gradient(120% 80% at 50% 0%,#082430 0%,var(--bg) 60%)}
.next-inner{max-width:760px;width:100%}
.next h2{font-weight:300;font-size:clamp(32px,4.4vw,56px);letter-spacing:-.02em;line-height:1.05}
.lead{margin-top:20px;font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--mute);font-weight:300}
.spec{margin-top:44px;border-top:1px solid rgba(232,243,242,.1)}
.spec div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid rgba(232,243,242,.1);font-size:14px}
.spec dt{color:var(--mute)}.spec dd{text-align:right}
.fine{margin-top:28px;font-size:12px;color:rgba(232,243,242,.4)}
@media (max-width:700px){
  .phase{left:22px;right:22px;bottom:96px}
  .rail{top:auto;bottom:28px;right:22px;transform:none;flex-direction:row;gap:12px;align-items:center}
  .bar{display:none}
  .hint{display:none}
}