/* SkyD waitlist — palette and fonts from the main site (abyss, sapphire, gold foil, ivory; Bodoni Moda + Jost) */
:root{
  --abyss:#050c22; --sapphire:#0b1a40; --royal:#1f4fd6;
  --gold:#e3b04b; --gold-hi:#fff1c1; --gold-lo:#9a6a1c;
  --ivory:#f4ecda; --mist:#b9c0d6; --nb1:#3fd2ff; --np:#ff5fd2; --danger:#ff7a8a; --ok:#6fe0b0;
  --foil:linear-gradient(115deg,#9a6a1c 0%,#e3b04b 22%,#fff1c1 38%,#e3b04b 55%,#9a6a1c 78%,#e3b04b 100%);
  --line:rgba(185,192,214,.18);
  --serif:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:var(--abyss);color:var(--ivory);font:300 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold)}
img{max-width:100%;height:auto}

.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 12%,#fff6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 34%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 86% 46%,#fff5 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 62%,#fff5 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 78%,#fff6 50%,transparent 51%),
    radial-gradient(1px 1px at 92% 84%,#fff4 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 90%,#fff4 50%,transparent 51%),
    radial-gradient(60% 45% at 50% 0%,rgba(31,79,214,.35),transparent 70%),
    radial-gradient(50% 40% at 85% 100%,rgba(255,95,210,.10),transparent 70%),
    linear-gradient(180deg,var(--abyss) 0%,var(--sapphire) 55%,var(--abyss) 100%);}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));max-width:1080px;margin:0 auto}
/* project name: one font everywhere (owner 15.11) */
.nm{font-family:"Michroma",var(--sans);font-style:normal;font-weight:400;letter-spacing:.05em}
/* owner 15.11 10:52 via the name panel: Michroma 400, .05em, 52/30 px, gold gradient A2 at 120deg, A2 three-layer shadow #0c0c0d 80%, 3/4 px, blur 10 px */
.brand{font-size:52px;line-height:1.12;text-decoration:none;background:linear-gradient(120deg,#fff4d6,#e8c27a 55%,#b9873a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.02em .12em .2em 0;
  filter:drop-shadow(3px 4px 0 rgba(12,12,13,.8)) drop-shadow(6px 8px 10px rgba(12,12,13,.632)) drop-shadow(10px 12px 30px rgba(12,12,13,.424))}
/* language globe, as on the main site (owner, 30.10). Owner 15.11 10:54: globe a little lower and further left;
   the languages open in a ring around the globe and make one full turn while opening */
@property --rot{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --rr{syntax:"<length>";inherits:true;initial-value:0px}
.top{padding-right:84px;padding-top:54px} /* owner 15.11 11:04: the name sits at the level of the language globe */
.lsw{position:fixed;top:62px;right:62px;z-index:60;--R:68px;--rot:-360deg;--rr:0px;transition:--rot .9s cubic-bezier(.25,.8,.3,1),--rr .5s cubic-bezier(.2,.8,.25,1.1)}
.lsw.on{--rot:0deg;--rr:var(--R)}
.lsw-b{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;position:relative;z-index:2;
  background:radial-gradient(circle at 32% 26%,#2c4a92 0%,#0f2259 45%,#050d2c 100%);border:1px solid rgba(110,215,255,.92);
  box-shadow:inset 0 2px 3px rgba(255,241,193,.35),inset 0 -4px 8px rgba(0,0,0,.55);transition:transform .2s ease-out}
.lsw-b svg{width:44px;height:44px}
.lsw-b:hover{transform:translateY(-3px)} .lsw-b:active{transform:translateY(2px)}
.lsw-b:focus-visible{outline:2px solid rgba(110,215,255,.92);outline-offset:4px}
/* ring: every button sits at its own angle --a; the whole ring turns by --rot, the labels stay upright */
.lsw-m{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;visibility:hidden;pointer-events:none;transition:visibility 0s linear .9s;direction:ltr}
.lsw.on .lsw-m{visibility:visible;pointer-events:auto;transition:none}
.lsw-m::before{content:"";position:absolute;left:calc(-1 * var(--rr));top:calc(-1 * var(--rr));width:calc(2 * var(--rr));height:calc(2 * var(--rr));border-radius:50%;
  border:1px solid rgba(110,215,255,.35);box-shadow:0 0 24px rgba(63,210,255,.18),inset 0 0 24px rgba(63,210,255,.12);background:radial-gradient(circle,rgba(5,12,34,.0) 55%,rgba(5,12,34,.75) 56%,rgba(5,12,34,.75) 100%);pointer-events:none}
.lsw-m button{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:-16px;top:-16px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  font:500 11px/1 "Jost",system-ui,sans-serif;letter-spacing:.02em;color:rgba(244,236,218,.88);
  background:radial-gradient(circle at 32% 26%,#2c4a92 0%,#0f2259 50%,#050d2c 100%);border:1px solid rgba(110,215,255,.92);
  box-shadow:inset 0 1px 2px rgba(255,241,193,.3),inset 0 -2px 4px rgba(0,0,0,.55);
  transform:rotate(calc(var(--a) + var(--rot))) translate(var(--rr)) rotate(calc(-1 * (var(--a) + var(--rot))));
  opacity:0;transition:opacity .3s ease}
.lsw.on .lsw-m button{opacity:1}
.lsw-m button:hover,.lsw-m button:focus-visible{color:var(--gold-hi);box-shadow:inset 0 1px 2px rgba(255,241,193,.3),inset 0 -2px 4px rgba(0,0,0,.55),0 0 12px rgba(110,215,255,.7)}
.lsw-m button:focus-visible{outline:1px solid rgba(110,215,255,.92);outline-offset:2px}
.lsw-m button[aria-current="true"]{color:var(--gold-hi);font-weight:600;box-shadow:inset 0 1px 2px rgba(255,241,193,.3),inset 0 -2px 4px rgba(0,0,0,.55),0 0 10px rgba(227,176,75,.75)}
@media (max-width:620px){
  .top{padding-right:64px;padding-top:57px}
  .lsw{top:54px;right:54px;--R:56px} .lsw-b{width:46px;height:46px} .lsw-b svg{width:38px;height:38px}
  .lsw-m button{width:28px;height:28px;left:-14px;top:-14px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){.lsw{transition:none}.lsw-b{transition:none}.lsw-b:hover{transform:none}}

/* altitude scale on the left, as in the ascent block of the main site: gold foil track, ticks every 10 m, gold bead with a neon glow, violet glow (owner 11.11) */
/* owner 15.11 11:04: the scale stands on the page from the launch date down to the footer and scrolls with it; only the bead moves (top/height set in app.js) */
.alti{position:absolute;left:max(34px,env(safe-area-inset-left));top:360px;height:1600px;width:70px;z-index:5;pointer-events:none}
.alti-track{position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--foil);background-size:2px 300px;box-shadow:0 0 8px rgba(178,107,255,.55),0 0 22px rgba(106,77,255,.3)}
.alti-tick{position:absolute;left:0;width:9px;height:1px;background:var(--gold);transform:translateY(-50%)}
.alti-tick.major{width:16px}
.alti-tick span{position:absolute;left:22px;top:-8px;font:italic 400 14px/1 "Bodoni Moda",serif;color:var(--mist);white-space:nowrap}
.alti-bead{position:absolute;left:-6px;top:0;width:14px;height:14px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 35%,var(--gold-hi),var(--gold) 45%,var(--gold-lo));box-shadow:0 0 16px rgba(63,210,255,.9);transition:top .2s ease-out;z-index:3}
.alti-bead b{position:absolute;left:20px;top:50%;transform:translateY(-50%);padding:3px 9px;border-radius:999px;background:#050c22;z-index:3;box-shadow:0 0 0 1px rgba(200,160,255,.6),0 0 12px rgba(178,107,255,.45);font:italic 400 20px/1 "Bodoni Moda",serif;color:var(--gold-hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.alti-bead small{font-size:.6em;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.alti-bead{transition:none}}
/* narrow screens: the scale stays, thinner, without labels, so it does not cover the text */
@media (max-width:1100px){.alti{width:16px;left:8px}.alti-track{left:6px}.alti-tick span,.alti-bead b{display:none}.alti-tick{width:5px}.alti-tick.major{width:9px}.alti-bead{left:-5px;width:12px;height:12px}}
/* fonts for scripts that Jost and Bodoni Moda do not cover */
html[lang="zh-Hans"] body{font-family:var(--sans),"Noto Sans SC",sans-serif}
html[lang="th"] body{font-family:var(--sans),"Noto Sans Thai",sans-serif}
html[lang="hi"] body{font-family:var(--sans),"Noto Sans Devanagari",sans-serif}
html[lang="he"] body{font-family:var(--sans),"Noto Sans Hebrew",sans-serif}
html[lang="ar"] body{font-family:var(--sans),"Noto Sans Arabic",sans-serif}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3{font-family:var(--serif),"Noto Sans SC",sans-serif}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{font-family:var(--serif),"Noto Sans Thai",sans-serif}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{font-family:var(--serif),"Noto Sans Devanagari",sans-serif}
html[lang="he"] h1,html[lang="he"] h2,html[lang="he"] h3{font-family:var(--serif),"Noto Sans Hebrew",sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:var(--serif),"Noto Sans Arabic",sans-serif}
[dir="rtl"] .eyebrow{letter-spacing:0}
[dir="rtl"] .wallet{direction:rtl}

main{max-width:880px;margin:0 auto;padding:0 16px}
.hero{text-align:center;padding:48px 0 56px}
.seal{width:160px;height:160px;border-radius:50%;box-shadow:0 0 0 1px rgba(227,176,75,.35),0 0 60px rgba(227,176,75,.22),0 0 90px rgba(63,210,255,.18)}
.eyebrow{margin:24px 0 4px;color:var(--mist);font:400 14px var(--sans);letter-spacing:.32em;text-transform:uppercase}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0}
.foil{font-size:clamp(34px,7.4vw,64px);background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
.lead{max-width:560px;margin:16px auto 0;font-size:19px;color:var(--ivory);text-wrap:pretty}

.countdown{display:flex;justify-content:center;gap:clamp(8px,3vw,20px);margin:32px 0}
.countdown div{min-width:72px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:rgba(11,26,64,.55)}
.countdown b{display:block;font:600 clamp(26px,6vw,38px)/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--gold-hi)}
.countdown span{display:block;margin-top:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}

.btn{display:inline-block;font:500 16px var(--sans);letter-spacing:.06em;text-decoration:none;border:0;border-radius:999px;padding:14px 30px;cursor:pointer;min-height:48px}
.btn-gold{background:var(--foil);color:var(--abyss);box-shadow:0 6px 24px rgba(227,176,75,.25)}
.btn-gold:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55;cursor:progress}
.btn.wide{width:100%}
:focus-visible{outline:2px solid var(--nb1);outline-offset:3px}

.block{border-top:1px solid var(--line);padding:48px 0}
.block h2{font-size:clamp(26px,4.6vw,36px);color:var(--gold-hi);margin-bottom:20px}
.block p{margin:0 0 12px;text-wrap:pretty}
.muted{color:var(--mist)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.steps li{border:1px solid var(--line);border-radius:16px;padding:18px;background:rgba(11,26,64,.45)}
.when{display:block;font-size:13px;letter-spacing:.06em;color:var(--gold);margin-bottom:6px}
.steps h3{font-size:22px;margin-bottom:6px}
.steps p{font-size:15px;color:var(--mist);margin:0}

.wallet{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:20px;padding:16px 18px;border:1px dashed rgba(227,176,75,.5);border-radius:14px}
.wallet-label{color:var(--mist);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.wallet-value{font:600 18px var(--serif);color:var(--gold-hi)}

.form-block{max-width:560px;margin:0 auto}
form{display:grid;gap:18px;margin-top:8px}
.field{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field>span,.field legend{font-size:15px;color:var(--ivory);padding:0}
.field em{font-style:normal;color:var(--mist)}
input[type=email],input[type=text],input[type=tel]{width:100%;font:400 17px var(--sans);color:var(--ivory);background:rgba(5,12,34,.7);border:1px solid var(--line);border-radius:12px;padding:13px 14px;min-height:48px}
input::placeholder{color:#7f88a6}
input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(227,176,75,.2)}
input[aria-invalid="true"]{border-color:var(--danger)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;color:var(--mist);min-height:40px}
.chips input:checked+span{border-color:var(--gold);color:var(--gold-hi);background:rgba(227,176,75,.12)}
.chips input:focus-visible+span{outline:2px solid var(--nb1);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--mist)}
.consent input{width:20px;height:20px;margin-top:3px;accent-color:var(--gold);flex:none}
.err{color:var(--danger);font-size:14px}
.status{min-height:1.4em;margin:0;font-size:15px;text-align:center}
.status.err{color:var(--danger)}
.hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.done{text-align:center;border:1px solid rgba(111,224,176,.4);border-radius:16px;padding:28px 20px;background:rgba(111,224,176,.06)}
.done h3{font-size:28px;color:var(--ok);margin-bottom:8px}

.foot{border-top:1px solid var(--line);margin-top:24px;padding:32px 16px calc(32px + env(safe-area-inset-bottom));text-align:center;color:var(--mist);font-size:15px}
.foot p{margin:6px auto;max-width:640px}
/* social buttons as in the main site footer */
.social{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:8px 0 20px}
.soc{box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#2c4a92 0%,#0f2259 45%,#050d2c 100%);
  border:1px solid rgba(110,215,255,.92);
  box-shadow:inset 0 2px 3px rgba(255,241,193,.35),inset 0 -4px 8px rgba(0,0,0,.55),0 4px 0 #6b4a0e,0 8px 16px rgba(1,8,30,.9);
  transition:transform .18s,box-shadow .18s}
.soc svg{width:24px;height:24px;fill:#f7c948;filter:drop-shadow(0 1px 0 #3b2606) drop-shadow(0 0 6px rgba(255,214,120,.35))}
.soc:hover{transform:translateY(-3px);box-shadow:inset 0 2px 3px rgba(255,241,193,.45),inset 0 -4px 8px rgba(0,0,0,.5),0 7px 0 #6b4a0e,0 14px 24px rgba(1,8,30,.9),0 0 22px rgba(63,210,255,.35)}
.soc:active{transform:translateY(2px)}
.soc:focus-visible{outline:2px solid rgba(110,215,255,.92);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.soc{transition:none}}
.follow{text-align:center}
.follow p{max-width:600px;margin-left:auto;margin-right:auto}
.follow .social{margin-top:24px}
.small{font-size:13px;color:#8a92ad}

@media (max-width:1000px){.brand{font-size:30px}}
@media (max-width:420px){
  .countdown div{min-width:0;flex:1}
  .hero{padding-top:32px}
}