@font-face { font-family: Anton; src: url(Anton-Regular.ttf) format("truetype"); font-display: swap; }
:root { --bg: #07070F; --bg-top: #1A0B3A; --card: #12122A; --text: #E8E8F4; --muted: #8A8AB0;
        --cyan: #3FF2FF; --magenta: #FF3FD0; --gold: #FFC531; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: linear-gradient(180deg, var(--bg-top), var(--bg) 480px) var(--bg); min-height: 100vh; }
main { max-width: 720px; margin: 0 auto; padding: 48px 16px 64px; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
header img { width: 64px; height: 64px; border-radius: 16px; }
.brand { font-family: Anton, Impact, sans-serif; color: var(--gold); font-size: 40px; letter-spacing: .5px;
         text-decoration: none; line-height: 1; }
.tagline { color: var(--muted); margin: 4px 0 0; }
h1, h2 { font-family: Anton, Impact, sans-serif; font-weight: 400; letter-spacing: .5px; }
h1 { font-size: 36px; margin: 0 0 4px; }
h2 { font-size: 24px; margin: 36px 0 8px; color: var(--cyan); }
a { color: var(--cyan); }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; margin: 8px 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--card); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.card { background: var(--card); border-radius: 16px; padding: 16px 20px; }
.button { display: inline-block; background: var(--magenta); color: #fff; text-decoration: none;
          font-family: Anton, Impact, sans-serif; font-size: 20px; padding: 12px 28px; border-radius: 999px; }
footer { margin-top: 48px; color: var(--muted); font-size: 14px; }
@media (max-width: 480px) { .brand { font-size: 32px; } h1 { font-size: 30px; } th, td { padding: 8px 6px; } }