:root{
  --navy:#141b22; --navy-deep:#0a0e13; --blue:#2f7fe2; --orange:#fd7a2a;
  --fg-2:#30354a; --fg-3:#7b7f88; --border:#ccd2d8;
  --bg:#ffffff; --grad-dark:linear-gradient(160deg,#0a0e13 0%,#101b28 55%,#12263c 100%);
  --h:"Montserrat",sans-serif; --b:"Lato",sans-serif; --m:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.4,0,0.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);font-family:var(--b);color:var(--fg-2);overflow-x:hidden}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
#scroller{height:940vh;position:relative}
#stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;perspective:1200px;perspective-origin:50% 45%}
#bgDark{position:absolute;inset:0;background:var(--grad-dark);opacity:0;pointer-events:none}
#stars{position:absolute;inset:0;opacity:0;pointer-events:none}
#stars span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
/* --- logo assembly --- */
#markWrap{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(64vw,52vh);aspect-ratio:699/677;transform-style:preserve-3d}
#markWrap img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.layer{opacity:0;will-change:transform,opacity}
#rocketGroup{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform,opacity,filter}
#rocketGroup img{position:absolute;inset:0;width:100%;height:100%}
.trail{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.trail img{position:absolute;inset:0;width:100%;height:100%}
#exhaust{position:absolute;left:18%;bottom:2%;width:46%;height:46%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(253,158,74,0.95) 0%,rgba(253,122,42,0.55) 35%,rgba(253,122,42,0) 72%);
  filter:blur(6px);opacity:0;transform:translate(-30%,30%) scale(0.4);pointer-events:none}
#wordmark{position:absolute;left:50%;top:calc(44% + min(30vw,25vh));transform:translate(-50%,0);
  font-family:var(--h);font-weight:800;color:var(--navy);font-size:clamp(30px,5.4vw,58px);letter-spacing:-0.01em;
  opacity:0;white-space:nowrap;will-change:opacity,transform}
#wordmark .r{color:var(--navy)}
/* --- phase copy --- */
.copyline{position:absolute;left:50%;bottom:12vh;transform:translate(-50%,14px);width:min(88vw,640px);text-align:center;opacity:0;will-change:opacity,transform;pointer-events:none}
.copyline .k{font-family:var(--m);font-size:12px;letter-spacing:0.22em;color:var(--fg-3);display:block;margin-bottom:10px}
.copyline .t{font-family:var(--h);font-weight:600;font-size:clamp(20px,3vw,30px);color:var(--navy);letter-spacing:0.01em}
/* --- intro --- */
#intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;will-change:opacity,transform;pointer-events:none}
#intro .stamp{font-family:var(--m);font-size:13px;letter-spacing:0.3em;color:var(--fg-3)}
#intro h1{font-family:var(--h);font-weight:600;font-size:clamp(26px,4.4vw,46px);color:var(--navy);margin:0;letter-spacing:0.02em}
#intro .sub{font-size:17px;color:var(--fg-3);max-width:420px;line-height:1.6}
#cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--fg-3);font-family:var(--m);font-size:11px;letter-spacing:0.24em}
#cue svg{animation:cueBob 2.2s var(--ease) infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
/* --- finale --- */
#finale{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;will-change:opacity,transform}
#finale .inner{width:min(92vw,720px);text-align:center;transform:translateY(26px);will-change:transform}
#finale .eyebrow{font-family:var(--h);font-weight:600;font-size:12px;letter-spacing:0.26em;color:#8b98a6;text-transform:uppercase;margin-bottom:22px}
#finale .eyebrow .num{color:var(--orange)}
#finale h2{font-family:var(--h);font-weight:700;color:#fff;font-size:clamp(28px,4.6vw,52px);line-height:1.14;margin:0 0 18px;letter-spacing:-0.01em;text-wrap:pretty}
#finale h2 .log{white-space:nowrap}
#finale h2 .l{color:var(--blue)}#finale h2 .o{color:var(--orange)}#finale h2 .g{color:var(--blue)}
#finale .sub{color:rgba(255,255,255,0.62);font-size:17px;line-height:1.65;max-width:520px;margin:0 auto 40px}
#notifyForm{display:flex;gap:10px;justify-content:center;max-width:460px;margin:0 auto}
#notifyForm input{flex:1;min-width:0;font-family:var(--b);font-size:15px;padding:14px 16px;border-radius:4px;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.06);color:#fff;transition:border-color 180ms var(--ease)}
#notifyForm input::placeholder{color:rgba(255,255,255,0.4)}
#notifyForm input:focus{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
#notifyForm button{font-family:var(--h);font-weight:600;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;padding:14px 26px;border-radius:4px;border:1px solid var(--orange);background:var(--orange);color:#0a0e13;cursor:pointer;transition:background 180ms var(--ease),transform 120ms var(--ease);white-space:nowrap}
#notifyForm button:hover{background:#ff8f47}
#notifyForm button:active{transform:translateY(1px)}
#formMsg{margin-top:16px;font-size:14px;min-height:20px;color:rgba(255,255,255,0.55)}
#formMsg.ok{color:#7fd4a8}
#formMsg.err{color:#f2a0a0}
#backTop{display:inline-block;margin-top:26px;font-family:var(--m);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.35);transition:color 180ms var(--ease)}
#backTop:hover{color:rgba(255,255,255,0.65);text-decoration:none}
#finale .foot{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--m);font-size:11px;letter-spacing:0.2em;color:rgba(255,255,255,0.35);white-space:nowrap}
@media (max-width:560px){
  #notifyForm{flex-direction:column}
  #markWrap{width:min(78vw,50vh)}
}
/* --- preloader: progress line crosses, then the dark screen unfolds --- */
html.preloading,html.preloading body{overflow:hidden}
#preloader{position:fixed;inset:0;z-index:60}
/* halves overlap 1px at the seam — fractional viewport heights otherwise leak a white hairline */
.pre-half{position:absolute;left:0;width:100%;height:calc(50% + 1px);background:var(--grad-dark);background-size:100% 200%;overflow:hidden;will-change:transform;transition:transform 440ms cubic-bezier(0.95,0.05,0.795,0.035)}
.pre-top{top:0;background-position:0 0}
.pre-bottom{bottom:0;background-position:0 100%}
#preloader.open .pre-top{transform:translateY(-100%)}
#preloader.open .pre-bottom{transform:translateY(100%)}
.pre-brand{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;transition:opacity 400ms var(--ease),transform 320ms cubic-bezier(0.95,0.05,0.795,0.035);white-space:nowrap}
.pre-eyebrow{font-family:var(--m);font-size:12px;letter-spacing:0.3em;color:#8b98a6}
.pre-word{font-family:var(--h);font-weight:800;font-size:clamp(28px,4.6vw,44px);color:#fff;letter-spacing:-0.01em}
#preLine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:2px;width:0;background:var(--orange);box-shadow:0 0 14px rgba(253,122,42,0.55);opacity:1;transition:opacity 120ms linear}
/* --- prefers-reduced-motion: assembled logo + finale, no scroll choreography --- */
body.static #scroller{height:auto}
body.static #stage{position:static;height:auto;overflow:visible;perspective:none}
body.static #bgDark,body.static #stars,body.static #cue,body.static .copyline,
body.static .trail,body.static #exhaust{display:none}
body.static #intro{position:static;padding:16vh 24px 0;pointer-events:auto}
body.static #markWrap{position:static;transform:none;margin:7vh auto}
body.static .layer{opacity:1}
body.static #wordmark{position:static;transform:none;opacity:1;text-align:center;margin:0 auto 12vh}
body.static #finale{position:static;opacity:1;pointer-events:auto;background:var(--grad-dark);min-height:100vh;flex-direction:column;padding:12vh 0 0}
body.static #finale .inner{transform:none}
body.static #finale .foot{position:static;transform:none;margin:60px auto 26px}
