:root {
  --primary: #0b5fe8; --primary-dark: #0a2a6b; --primary-light: #3d86ff;
  --soft: #eaf1ff; --canvas: #f4f7fc; --surface: #fff; --ink: #10182b;
  --ink-soft: #4a5568; --ink-faint: #8993a6; --line: #e3e8f2; --star: #f5a524;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #4c8dff; --primary-dark: #9cc0ff; --primary-light: #6fa1ff;
    --soft: #16233f; --canvas: #0b1220; --surface: #131b2e; --ink: #f3f6fc;
    --ink-soft: #b9c2d6; --ink-faint: #8592ad; --line: #283652;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--canvas); color: var(--ink); min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
}
.hero {
  width: 100%; padding: 28px 16px 90px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #3d86ff, #0b5fe8 55%, #0a2a6b);
}
.hero img { height: 54px; background: #fff; border-radius: 14px; padding: 6px 14px; }
.hero h1 { margin: 22px 0 6px; font-size: clamp(26px, 5vw, 38px); line-height: 1.15; }
.hero p { margin: 0 auto; max-width: 520px; opacity: .92; font-size: 16px; }
.card {
  width: min(560px, calc(100% - 32px)); margin: -56px 16px 24px; padding: 28px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 10px 30px rgba(16, 24, 43, .1); text-align: center;
}
.label { font-size: 13px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.code {
  margin: 10px 0 18px; padding: 16px; border: 2px dashed var(--primary); border-radius: 14px;
  background: var(--soft); font: 800 26px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; color: var(--primary);
}
.btn {
  display: block; width: 100%; padding: 14px 18px; margin-top: 10px; border-radius: 999px; border: 0;
  font: 700 16px inherit; cursor: pointer; text-decoration: none; text-align: center;
}
.btn.primary { color: #fff; background: linear-gradient(135deg, #3d86ff, #0b5fe8); }
.btn.secondary { color: var(--primary); background: var(--surface); border: 1.5px solid var(--primary); }
.btn.disabled { color: var(--ink-faint); background: var(--canvas); border: 1px solid var(--line); cursor: default; }
.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.note { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.perks { list-style: none; padding: 0; margin: 20px 0 0; text-align: left; font-size: 15px; color: var(--ink-soft); }
.perks li { padding: 6px 0 6px 28px; position: relative; }
.perks li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 800; }
footer { margin: auto 0 24px; font-size: 13px; color: var(--ink-faint); text-align: center; padding: 0 16px; }
@media (max-width: 420px) { .stores { grid-template-columns: 1fr; } }