:root {
  --bg:#0b0d16; --panel:rgba(30,33,48,.72); --panel2:#232636; --line:rgba(255,255,255,.09);
  --text:#eef0f8; --muted:#a7abbd; --blue:#4c8dff; --violet:#a06bff; --green:#3fbf74;
  --glow:0 0 40px rgba(90,120,255,.25);
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--text); font:15.5px/1.6 Inter, system-ui, sans-serif; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden }
h1,h2,h3,.brand { font-family:Sora, Inter, sans-serif }

/* --- sky: aurora blobs + twinkling stars (pure CSS) --- */
.sky { position:fixed; inset:0; z-index:-1; background:radial-gradient(120% 90% at 50% 0%, #141a33 0%, #0b0d16 55%) }
.aurora { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:drift 24s ease-in-out infinite alternate }
.a1 { width:52vw; height:38vh; left:-8vw; top:-12vh; background:#2a3f8f }
.a2 { width:44vw; height:34vh; right:-10vw; top:-6vh; background:#5a2a8f; animation-delay:-8s }
.a3 { width:40vw; height:30vh; left:28vw; top:38vh; background:#173b63; opacity:.35; animation-delay:-16s }
@keyframes drift { to { transform:translate3d(6vw, 5vh, 0) scale(1.15) } }
.stars, .stars::after { position:absolute; inset:0; content:"";
  background-image:radial-gradient(1.4px 1.4px at 12% 22%, #fff 60%, transparent), radial-gradient(1px 1px at 32% 68%, #cfe0ff 60%, transparent),
    radial-gradient(1.6px 1.6px at 54% 14%, #fff 60%, transparent), radial-gradient(1px 1px at 71% 47%, #ffe9c9 60%, transparent),
    radial-gradient(1.2px 1.2px at 86% 24%, #fff 60%, transparent), radial-gradient(1px 1px at 44% 84%, #cfe0ff 60%, transparent),
    radial-gradient(1.4px 1.4px at 92% 76%, #fff 60%, transparent), radial-gradient(1px 1px at 8% 82%, #ffe9c9 60%, transparent);
  animation:twinkle 5s ease-in-out infinite alternate }
.stars.s2, .stars.s2::after { transform:scale(1.6) rotate(38deg); opacity:.6; animation-duration:7s; animation-delay:-2.5s }
@keyframes twinkle { from { opacity:.35 } to { opacity:.95 } }

/* --- header --- */
header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px, 4vw, 40px); background:rgba(11,13,22,.65); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800; color:var(--text); text-decoration:none; letter-spacing:.2px }
.brand b { font-weight:800 }
.brand span { background:linear-gradient(90deg, #8ab8ff, #c98bff); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600 }
.wand { filter:drop-shadow(0 0 6px rgba(150,140,255,.8)) }
.who { display:flex; gap:12px; align-items:center; font-size:13.5px; color:var(--muted) }
a.ghost { color:var(--text); text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:8px 16px; font-weight:600 }
a.ghost:hover { border-color:var(--blue) }
button.linky { background:none; border:0; color:#9fc5ff; cursor:pointer; font-size:13px }

/* --- layout --- */
main { flex:1; width:min(1020px, 100%); margin:0 auto; padding:0 clamp(16px, 4vw, 40px) 40px }
.hero { text-align:center; padding:clamp(48px, 10vh, 110px) 0 30px }
.eyebrow { display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#9fc5ff;
  border:1px solid var(--line); border-radius:999px; padding:7px 16px; background:rgba(76,141,255,.08) }
.hero h1 { font-size:clamp(34px, 6.5vw, 62px); line-height:1.08; margin:22px 0 14px; font-weight:800 }
.hero h1 em { font-style:normal; background:linear-gradient(90deg, #8ab8ff 10%, #c98bff 55%, #ffb86b 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.lead { max-width:640px; margin:0 auto; color:var(--muted); font-size:clamp(15px, 2vw, 17.5px) }
.cta { margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:12px }
.hint { font-size:13px; color:var(--muted) }
.primary { display:inline-block; background:linear-gradient(90deg, var(--blue), var(--violet)); color:#fff; border:0; border-radius:12px;
  padding:13px 26px; font-weight:700; font-size:15.5px; cursor:pointer; text-decoration:none; box-shadow:var(--glow); transition:transform .15s, filter .15s }
.primary:hover { transform:translateY(-1px); filter:brightness(1.12) }
.primary.big { padding:16px 34px; font-size:17px }

/* --- how it works --- */
.how { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:44px 0 10px }
.step { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; backdrop-filter:blur(8px) }
.step .n { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800;
  background:linear-gradient(135deg, var(--blue), var(--violet)); box-shadow:var(--glow); margin-bottom:12px }
.step h3 { margin:0 0 6px; font-size:17px } .step p { margin:0; color:var(--muted); font-size:14px }

/* --- auth card --- */
.card.auth { position:relative; max-width:440px; margin:40px auto; background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:26px; backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(0,0,0,.45) }
.card.auth::before { content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; z-index:-1;
  background:linear-gradient(120deg, rgba(76,141,255,.6), rgba(160,107,255,.25), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude }
#enter { position:absolute; top:-90px }
.tabs { display:flex; gap:8px; margin-bottom:16px }
.tab { flex:1; background:var(--panel2); border:0; border-radius:10px; padding:10px; color:var(--muted); font-weight:600; cursor:pointer }
.tab.active { background:linear-gradient(90deg, var(--blue), var(--violet)); color:#fff }
form { display:flex; flex-direction:column; gap:11px }
input { background:rgba(16,18,28,.8); color:var(--text); border:1px solid #33374a; border-radius:10px; padding:13px 14px; font-size:15px }
input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(76,141,255,.18) }

/* --- wizard cards --- */
.wizards { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px; margin-top:34px }
.wiz { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:10px;
  backdrop-filter:blur(8px); transition:transform .15s, border-color .15s }
.wiz:hover { transform:translateY(-3px); border-color:rgba(76,141,255,.5) }
.wiz .ico { font-size:30px; line-height:1 }
.wiz h3 { margin:0; font-size:20px } .wiz p { margin:0; color:var(--muted); font-size:14px; flex:1 }
.wiz a { align-self:flex-start; background:linear-gradient(90deg, var(--green), #2f9f7f); color:#fff; text-decoration:none; border-radius:10px;
  padding:10px 18px; font-weight:700; margin-top:10px }
.wiz a:hover { filter:brightness(1.12) }
.wiz.soon { opacity:.65 } .wiz.soon .badge { align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#ffd9a0; border:1px solid rgba(255,184,107,.4); border-radius:999px; padding:4px 10px }

footer { text-align:center; padding:22px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); background:rgba(11,13,22,.5) }
.small { font-size:12.5px } .muted { color:var(--muted) } .err { color:#ff9a9a } .ok { color:#7fd49a }

@media (max-width:820px) { .how { grid-template-columns:1fr } .hero { padding-top:40px } }
@media (prefers-reduced-motion:reduce) { .aurora, .stars, .stars::after { animation:none } }