:root {
  --pink: #ff4f9a;
  --deep: #3b0a4a;
  --night: #1a0824;
  --cream: #fff6fb;
  --cta: #e11d74;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  font: 16px/1.5 "Trebuchet MS", "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #5b1a6e, var(--night) 42%);
  color: var(--cream);
}
a { color: #ffd0ea; }
.skip { position: absolute; left: -999px; }
.top { background: rgba(0,0,0,.35); border-bottom: 2px solid var(--pink); }
.top-bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  padding: .7rem 1rem; max-width: 72rem; margin: 0 auto;
}
.brand img { height: 40px; width: auto; }
.cta {
  display: inline-block; background: var(--cta); color: #fff; font-weight: 700;
  text-decoration: none; padding: .45rem .9rem; border-radius: 999px;
}
.top-bar > .cta { margin-left: auto; flex-shrink: 0; }
.nav {
  display: flex; flex: 1; flex-wrap: wrap; gap: .35rem 0.85rem;
  padding: 0; margin: 0;
}
.nav a { color: #fff; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.offer {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  justify-content: space-between; max-width: 72rem; margin: 0 auto;
  padding: .5rem 1rem .9rem;
}
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
.hero { text-align: center; padding: 1rem 0 2rem; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: #fff; }
.logo-game { width: 120px; height: auto; }
.lead { max-width: 40rem; margin: 0 auto 1rem; }
section { margin: 2rem 0; background: rgba(255,255,255,.04); padding: 1.1rem; border-radius: 16px; }
h2 { color: #ffb3d9; margin-top: 0; }
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #5a2a6a; }
.steps { list-style: none; padding: 0; }
.steps li { display: grid; grid-template-columns: 88px 1fr; gap: .8rem; margin: 1rem 0; align-items: start; }
.steps img { width: 88px; height: auto; border-radius: 10px; }
.wide { width: 100%; height: auto; border-radius: 12px; }
.syms { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; }
.syms img { width: 72px; height: auto; }
.pp { height: 48px; width: auto; vertical-align: middle; }
.faq details { margin: .4rem 0; background: rgba(0,0,0,.2); padding: .5rem .7rem; border-radius: 8px; }
footer { text-align: center; padding: 1.5rem 1rem 2.5rem; color: #e9c4dc; font-size: .9rem; }
.cta-row { margin: 1rem 0; }