:root {
  color-scheme: dark;
  --bg: #070912;
  --panel: #111528;
  --text: #f7f7fb;
  --muted: #b4b8c9;
  --gold: #ffd531;
  --purple: #714dff;
  --line: #2a3050;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: radial-gradient(circle at top, #17123a 0, var(--bg) 42%);
  color: var(--text);
  line-height: 1.75;
}
header, main, footer { width: min(920px, calc(100% - 32px)); margin: auto; }
header { padding: 54px 0 30px; }
.brand { color: var(--gold); font-weight: 800; letter-spacing: .08em; }
h1 { font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.15; margin: 10px 0; }
h2 { margin-top: 0; font-size: 1.35rem; }
h3 { margin-bottom: 4px; }
p, li { color: var(--muted); }
a { color: #c6b8ff; }
.nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.nav a { text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; }
.nav a.primary { background: var(--gold); color: #151000; border-color: var(--gold); font-weight: 700; }
.card { background: rgba(17,21,40,.92); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 5vw, 34px); margin: 18px 0; }
.note { border-left: 4px solid var(--purple); padding-left: 16px; }
.button { display: inline-block; text-decoration: none; background: var(--gold); color: #151000; font-weight: 800; padding: 12px 20px; border-radius: 12px; }
footer { color: #858aa0; padding: 32px 0 48px; font-size: .9rem; }
ul { padding-left: 1.3em; }
@media (max-width: 520px) { header { padding-top: 36px; } .card { border-radius: 14px; } }