:root { color-scheme: dark; --bg:#0B0B14; --surface:#14141F; --border:#2A2A3A; --text:#F5F4FA; --muted:#9A98AC; --primary:#8B3FFF; --lilac:#C9A6FF; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.6; }
a { color: var(--lilac); }
:focus-visible { outline:2px solid var(--lilac); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--primary); color:#fff; padding:8px 14px; border-radius:8px; z-index:10; }
.skip:focus { left:8px; }
.wrap { max-width:960px; margin:0 auto; padding:0 20px; }
header { padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.5px; }
.brand img { width:36px; height:36px; border-radius:9px; }
nav { display:flex; gap:20px; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; font-size:14px; padding:6px 0; }
nav a:hover { color:var(--text); }
.hero { text-align:center; padding:48px 0 40px; }
.hero .logo { width:96px; height:96px; border-radius:24px; margin-bottom:20px; box-shadow:0 8px 40px rgba(139,63,255,.35); }
h1 { font-size:clamp(32px,6vw,52px); line-height:1.1; margin:0 0 16px; }
.sub { color:var(--muted); font-size:18px; max-width:560px; margin:0 auto 28px; }
.cta { display:inline-block; background:var(--primary); color:#fff; text-decoration:none; font-weight:700; padding:14px 28px; border-radius:999px; margin:6px; }
.cta:hover { filter:brightness(1.1); }
.cta.alt { background:transparent; border:1px solid var(--border); color:var(--text); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding:24px 0; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; }
.card h3 { margin:0 0 6px; font-size:17px; } .card p { margin:0; color:var(--muted); font-size:14px; }
h2 { font-size:26px; text-align:center; margin:48px 0 8px; }
.steps { counter-reset:s; display:grid; gap:12px; padding:0; list-style:none; max-width:640px; margin:16px auto; }
.steps li { counter-increment:s; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px 14px 56px; position:relative; }
.steps li::before { content:counter(s); position:absolute; left:16px; top:12px; width:28px; height:28px; border-radius:50%; background:var(--primary); text-align:center; line-height:28px; font-weight:700; font-size:14px; }
.sponsor { text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:32px 20px; margin:48px 0; }
.doc { max-width:720px; margin:0 auto; padding:24px 0 48px; }
.doc h1 { font-size:32px; } .doc h2 { text-align:left; font-size:19px; color:var(--lilac); margin:32px 0 6px; }
.doc p, .doc li { color:#D8D6E4; }
.doc dl { display:grid; grid-template-columns:max-content 1fr; gap:10px 20px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px; }
.doc dt { color:var(--muted); } .doc dd { margin:0; }
footer { border-top:1px solid var(--border); margin-top:40px; padding:28px 0 48px; color:var(--muted); font-size:13px; text-align:center; }
footer .links { display:flex; gap:8px 20px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
footer a { color:var(--muted); }
footer a:hover { color:var(--text); }
footer .company { color:var(--text); font-weight:600; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

.form { display:grid; gap:16px; margin:24px 0 8px; }
.field label { display:block; font-size:14px; color:var(--muted); margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:12px; padding:12px 14px; font:inherit; }
.field textarea { resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--primary); border-color:var(--primary); }
.hint { text-align:right; font-size:12px; color:var(--muted); margin-top:4px; }
.hp { position:absolute; left:-9999px; height:0; overflow:hidden; }
.status { min-height:1.4em; margin:0; font-size:14px; }
.status.ok { color:#2ECC71; } .status.err { color:#FF6B6B; }
.form .cta { justify-self:start; border:none; cursor:pointer; font:inherit; font-weight:700; margin:0; }
.form .cta:disabled { opacity:.6; cursor:default; }