:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #080914;
  color: #f4f1ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 0;
  background: radial-gradient(circle at 10% 0, #34205d, transparent 40rem), #080914;
}

.beta-page { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 64px; }
.brand { display: inline-block; margin-bottom: 28px; color: #c8ff37; font-weight: 800; text-decoration: none; }
.brand:hover { text-decoration: underline; }
.brand:focus-visible, .button-link:focus-visible, .legal a:focus-visible { outline: 3px solid #60eee5; outline-offset: 4px; border-radius: 4px; }
.beta-card { padding: clamp(24px, 5vw, 48px); border: 1px solid #4a3a70; border-radius: 24px; background: #121324; box-shadow: 0 28px 80px #0008; }
.eyebrow, .section-kicker, .gift-label { margin: 0 0 10px; color: #60eee5; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0 0 18px; font-size: clamp(32px, 7vw, 52px); line-height: 1.02; }
h2 { margin: 32px 0 10px; font-size: 22px; }
p, li { color: #cbc8d5; line-height: 1.6; }
ul { padding-left: 22px; }
li + li { margin-top: 9px; }
button, .button-link { display: inline-block; width: 100%; margin-top: 16px; padding: 14px 18px; border: 0; border-radius: 12px; background: #c8ff37; color: #10130c; font: 800 16px/1.2 Inter, ui-sans-serif, sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
.status { min-height: 3em; margin: 18px 0 0; color: #60eee5; }
.legal { margin: 20px 0 0; color: #aaa5b9; font-size: 13px; }
.legal a { color: #d9c8ff; }

.guide { padding: clamp(22px, 4.5vw, 46px); }
.guide h1 { font-size: clamp(34px, 6vw, 54px); }
.guide-hero { padding: clamp(6px, 2vw, 16px) clamp(2px, 1vw, 8px) clamp(24px, 4vw, 38px); border-bottom: 1px solid #3f335b; }
.guide-intro { max-width: 66ch; margin: 0; color: #e8e3f3; font-size: clamp(17px, 2.4vw, 20px); }
.guide-section { margin-top: 24px; padding: clamp(22px, 4vw, 34px); border: 1px solid #44365f; border-radius: 20px; background: #18182c; }
.section-heading h2 { margin: 0; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; }
.section-heading > p:last-child { max-width: 68ch; margin: 12px 0 0; }
.section-heading strong { color: #fff; }

.expectation { border-color: #8066ba; background: linear-gradient(145deg, #251d3b, #17172a 70%); box-shadow: inset 4px 0 0 #9c7aef; }
.task-list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.task-list li { position: relative; margin: 0; padding: 14px 16px 14px 46px; border: 1px solid #493b67; border-radius: 14px; background: #10112099; }
.task-list li::before { position: absolute; top: 14px; left: 16px; width: 20px; height: 20px; border-radius: 50%; background: #60eee5; color: #091313; content: "✓"; font-size: 13px; font-weight: 900; line-height: 20px; text-align: center; }
.task-list strong { color: #fff; }

.rewards { border-color: #86a92d; background: radial-gradient(circle at 100% 0, #45611844, transparent 18rem), linear-gradient(145deg, #1c2818, #141827 72%); box-shadow: 0 20px 50px #07100066, inset 4px 0 0 #c8ff37; }
.rewards .section-kicker, .gift-label { color: #c8ff37; }
.benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.benefit-card { display: grid; gap: 6px; padding: 18px; border: 1px solid #597226; border-radius: 14px; background: #111b13cc; }
.benefit-card strong { color: #efffd0; font-size: 18px; }
.benefit-card span { color: #cfd9c7; line-height: 1.5; }
.premium-gift { position: relative; margin-top: 16px; padding: clamp(22px, 4vw, 32px); overflow: hidden; border: 2px solid #c8ff37; border-radius: 18px; background: linear-gradient(135deg, #273c14, #142217); box-shadow: 0 0 32px #8dcc1d22; }
.premium-gift::after { position: absolute; right: -42px; bottom: -58px; width: 170px; height: 170px; border: 24px solid #c8ff3715; border-radius: 50%; content: ""; pointer-events: none; }
.premium-gift h3 { position: relative; z-index: 1; max-width: 680px; margin: 0; color: #c8ff37; font-size: clamp(25px, 4vw, 38px); line-height: 1.08; }
.premium-gift p:last-child { position: relative; z-index: 1; max-width: 68ch; margin: 14px 0 0; color: #e4eedf; }
.reward-terms { margin: 16px 2px 0; color: #b7c3b2; }

.reporting { background: #151827; }
.report-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.report-steps p { margin: 0; padding: 16px; border: 1px solid #3d4968; border-radius: 14px; background: #101420; }
.report-steps strong { display: block; margin-bottom: 4px; color: #60eee5; }
.guide-action { padding-top: 10px; text-align: center; }
.guide-action .legal { max-width: 68ch; margin-right: auto; margin-left: auto; }

@media (max-width: 680px) {
  .benefit-grid, .report-steps { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .beta-page { width: min(100% - 20px, 860px); padding-top: 20px; }
  .beta-card { border-radius: 18px; }
  .guide-section { padding: 20px 18px; border-radius: 16px; }
  .expectation { box-shadow: inset 3px 0 0 #9c7aef; }
  .rewards { box-shadow: inset 3px 0 0 #c8ff37; }
  .task-list li { padding-right: 12px; }
  .premium-gift { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}