:root{
--void:        #120C1E;
--void-deep:   #0A0714;
--void-high:   #1E1638;
--signal:      #35F2B4;   /* raw data / jade  */
--ember:       #FF8F5E;   /* secured / amber  */
--mist:        #F1EEFA;   /* primary text     */
--muted:       #9086AC;   /* secondary text   */
--hairline:    rgba(241,238,250,0.12);
--panel:       rgba(241,238,250,0.045);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
margin:0;
min-height:100vh;
background:
    radial-gradient(ellipse 90% 60% at 50% -10%, var(--void-high) 0%, var(--void) 48%, var(--void-deep) 100%);
color:var(--mist);
font-family:'Inter', sans-serif;
overflow-x:hidden;
position:relative;
}

/* ---------- film grain ---------- */
.grain{
position:fixed; inset:0;
pointer-events:none;
opacity:0.05;
mix-blend-mode:overlay;
z-index:5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- drifting motes ---------- */
.motes{ position:fixed; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
.mote{
position:absolute;
border-radius:50%;
filter:blur(1px);
opacity:0;
animation:mote-life linear infinite;
}
@keyframes mote-life{
0%   { opacity:0; transform:translate(0,0) scale(.8); }
10%  { opacity:.5; }
50%  { transform:translate(var(--dx), var(--dy)) scale(1); }
90%  { opacity:.4; }
100% { opacity:0; transform:translate(calc(var(--dx) * 2), calc(var(--dy) * 2)) scale(.8); }
}

/* ---------- layout shell ---------- */
header{
position:fixed; top:0; left:0; right:0;
display:flex; align-items:center; gap:10px;
padding:28px clamp(20px,5vw,48px);
z-index:10;
opacity:0;
animation:fade-up .7s ease forwards;
animation-delay:.05s;
}
.wordmark{
font-family:'Space Grotesk', sans-serif;
font-weight:600;
font-size:1.2rem;
letter-spacing:-0.02em;
color:var(--mist);
}

main{
position:relative; z-index:2;
min-height:100vh;
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center;
padding:120px 24px 60px;
}

/* ---------- hero visual ---------- */
.hero-visual{
width:min(100%, 760px);
aspect-ratio:900/440;
margin-bottom:clamp(8px, 3vw, 20px);
opacity:0;
transform:scale(.96);
animation:hero-in 1s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay:.15s;
position:relative;
}
.hero-visual::before{
content:'';
position:absolute; inset:8% 30%;
background:radial-gradient(circle, rgba(53,242,180,.16), rgba(255,143,94,.10) 55%, transparent 72%);
filter:blur(30px);
z-index:-1;
}
.hero-visual svg{ width:100%; height:100%; display:block; overflow:visible; }

.ring{ transform-origin:450px 220px; }
.ring--outer{ animation:spin-cw 70s linear infinite; }
.ring--mid{   animation:spin-ccw 52s linear infinite; }
.ring--inner{ animation:spin-cw 36s linear infinite; }
.core{ animation:pulse 3s ease-in-out infinite; transform-origin:450px 220px; }

@keyframes hero-in{ to{ opacity:1; transform:scale(1); } }
@keyframes spin-cw{ to{ transform:rotate(360deg);} }
@keyframes spin-ccw{ to{ transform:rotate(-360deg);} }
@keyframes pulse{
0%,100%{ transform:scale(1); opacity:.85; }
50%    { transform:scale(1.3); opacity:1; }
}

/* ---------- copy ---------- */
.headline{
font-family:'Space Grotesk', sans-serif;
font-weight:700;
font-size:clamp(2.6rem, 6.4vw, 5rem);
line-height:1.02;
letter-spacing:-0.02em;
margin:0 0 20px;
clip-path:inset(0 100% 0 0);
animation:reveal 1.1s cubic-bezier(.65,0,.35,1) forwards;
animation-delay:1.05s;
}
@keyframes reveal{ to{ clip-path:inset(0 0 0 0); } }

.subhead{
max-width:34rem;
font-size:1.06rem;
line-height:1.6;
color:var(--muted);
margin:0 0 36px;
opacity:0;
animation:fade-up .7s ease forwards;
animation-delay:1.7s;
}

@keyframes fade-up{
from{ opacity:0; transform:translateY(14px); }
to  { opacity:1; transform:translateY(0); }
}

/* ---------- form ---------- */
form{
display:flex;
gap:10px;
width:100%;
max-width:26rem;
opacity:0;
animation:fade-up .7s ease forwards;
animation-delay:2.05s;
}
input[type="email"]{
flex:1;
min-width:0;
background:var(--panel);
border:1px solid var(--hairline);
border-radius:999px;
padding:15px 20px;
color:var(--mist);
font-family:'Inter', sans-serif;
font-size:0.95rem;
outline:none;
transition:border-color .2s ease, box-shadow .2s ease;
}
input[type="email"]::placeholder{ color:var(--muted); }
input[type="email"]:focus{
border-color:var(--signal);
box-shadow:0 0 0 4px rgba(53,242,180,0.14);
}
button{
flex-shrink:0;
border:none;
border-radius:999px;
padding:15px 26px;
font-family:'Inter', sans-serif;
font-weight:600;
font-size:0.95rem;
color:var(--void-deep);
background:linear-gradient(120deg, var(--signal), var(--ember));
cursor:pointer;
transition:transform .15s ease, filter .15s ease;
}
button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
button:active{ transform:translateY(0) scale(.98); }
button:focus-visible, input:focus-visible{ outline:2px solid var(--mist); outline-offset:2px; }

.confirm{
display:flex; align-items:center; gap:10px;
font-size:0.95rem; color:var(--mist);
opacity:0; animation:fade-up .5s ease forwards;
}
.confirm svg{ flex-shrink:0; }

form.done > *{ display:none; }
form.done .confirm{ display:flex; }

/* ---------- footer ---------- */
footer{
margin-top:56px;
opacity:0;
animation:fade-up .7s ease forwards;
animation-delay:2.4s;
}
footer p{
margin:0 0 6px;
font-size:0.85rem;
color:var(--muted);
}
footer .copyright{
font-size:0.78rem;
color:rgba(144,134,172,0.6);
}

@media (max-width:520px){
form{ flex-direction:column; }
button{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
*{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
}
.headline{ clip-path:inset(0 0 0 0); }
.shard{ opacity:0 !important; }
header, .hero-visual, .subhead, form, footer{ opacity:1; transform:none; }
}