:root{
  --night:#120d29; --night-2:#1c1540; --card:#241c47;
  --pink:#ff45a4; --cyan:#33e8ed; --sunset:#ff8c42; --violet:#9966ff; --gold:#ffd24d;
  --ink:#ffffff; --ink-soft:rgba(255,255,255,.74); --muted:rgba(255,255,255,.5);
  --stroke:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 520px at 50% -8%, rgba(255,140,66,.28), transparent 60%),
    radial-gradient(800px 500px at 85% 8%, rgba(255,69,164,.22), transparent 60%),
    linear-gradient(180deg,var(--night),var(--night-2));
  background-attachment:fixed; min-height:100vh;
}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

header{border-bottom:1px solid var(--stroke);backdrop-filter:blur(8px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.wordmark{font-weight:800;font-size:20px;letter-spacing:.3px;color:var(--ink);
  background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
nav a{color:var(--ink-soft);margin-left:18px;font-weight:600;font-size:14px}

.hero{text-align:center;padding:70px 0 30px}
.sun{width:104px;height:104px;border-radius:26px;margin:0 auto 20px;display:block;
  box-shadow:0 12px 40px rgba(255,140,66,.35)}
.hero h1{font-size:40px;line-height:1.1;margin:.2em 0;font-weight:800;letter-spacing:-.5px}
.hero h1 .grad{background:linear-gradient(90deg,var(--cyan),var(--pink),var(--sunset));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{font-size:18px;color:var(--ink-soft);max-width:540px;margin:14px auto 0}
.badge{display:inline-block;margin-top:20px;padding:8px 16px;border:1px solid var(--stroke);border-radius:999px;
  font-size:13px;color:var(--gold);font-weight:600;background:rgba(255,210,77,.06)}

.features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0}
.feature{border:1px solid var(--stroke);border-radius:18px;padding:18px;background:rgba(36,28,71,.55)}
.feature h3{margin:.1em 0 .3em;font-size:16px}
.feature p{margin:0;color:var(--ink-soft);font-size:14px}
@media(max-width:560px){.features{grid-template-columns:1fr}.hero h1{font-size:32px}}

.disclaimer{border:1px solid var(--stroke);border-left:3px solid var(--pink);border-radius:14px;
  padding:14px 16px;margin:28px 0;color:var(--ink-soft);font-size:14px;background:rgba(255,69,164,.05)}

.page{padding:34px 0 60px}
.page h1{font-size:30px;margin:.2em 0 .1em}
.page h2{font-size:20px;margin:1.4em 0 .4em;color:var(--ink)}
.page p,.page li{color:var(--ink-soft)}
.page ul{padding-left:1.2em}
.page li{margin:.3em 0}
.page .meta{color:var(--muted);font-size:14px;margin-bottom:1.4em}
strong{color:var(--ink)}

footer{border-top:1px solid var(--stroke);margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:22px;color:var(--muted);font-size:13px}
footer nav a{margin-left:0;margin-right:18px}