:root {
  --primary: #5B5FF5;
  --primary-dark: #4C4FE8;
  --violet: #8B5CF6;
  --blue: #3B82F6;
  --bg: #F8F9FC;
  --fg: #161827;
  --muted: #62677A;
  --card: #FFFFFF;
  --border: #E2E5EE;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}
header, footer, main { max-width: 880px; margin: 0 auto; padding: 24px 20px; }
header { display:flex; justify-content:space-between; align-items:center; gap: 16px; }
nav a { margin-left: 16px; color: var(--primary); text-decoration:none; font-weight:600; }
.logo { display:flex; align-items:center; text-decoration:none; }
.logo picture { display:flex; }
.logo img { height: 52px; width: auto; }
.eyebrow {
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  font-size:12px;
  background: linear-gradient(135deg, #3B82F6, #5B5FF5, #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 { font-size: clamp(32px, 6vw, 56px); line-height:1.1; margin: 8px 0 16px; color: var(--fg); }
h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.lead { font-size: 20px; max-width: 40rem; color: var(--muted); }
.store { text-align: center; margin: 28px 0; }
.store a { display: inline-block; }
.store img { height: 64px; width: auto; }
.points { padding-left: 18px; }
article { max-width: 720px; }
article a { color: var(--primary); }
footer { opacity:.6; font-size:14px; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1020;
    --fg: #F7F8FC;
    --muted: #A9AEC1;
    --card: #15182A;
    --border: #30354B;
    --primary: #7377FF;
  }
}