:root {
  --ink: #15233a;
  --muted: #63728a;
  --paper: #f6f8fe;
  --line: #dde5f4;
  --blue: #3855d6;
  --blue-dark: #273c9d;
  --purple: #9c27b0;
  --red: #f44336;
  --green: #4caf50;
  --sky: #2196f3;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
main { overflow: hidden; }
.site-nav, .hero, .how-to-play, .promise, footer { max-width: 1120px; margin: 0 auto; }
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 28px; font-weight: 650; }
.site-nav > a:not(.brand) { color: var(--muted); text-decoration: none; }
.site-nav > a:not(.brand):hover, .policy a { color: var(--blue); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: -.03em; }
.brand-bubble { width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 33% 26%, #fff 0 12%, #9fafff 13% 20%, var(--blue) 42% 100%); box-shadow: inset -3px -4px 6px #20338588; }
.hero { min-height: 590px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 24px; padding: 54px 56px 78px; }
.eyebrow { margin: 0 0 15px; color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.055em; line-height: .98; }
h1 { margin-bottom: 25px; font-size: clamp(3.25rem, 6.8vw, 5.8rem); }
h2 { font-size: clamp(2.5rem, 4.4vw, 4.35rem); margin-bottom: 22px; }
.lede, .promise p { max-width: 490px; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.store-button { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 20px; border-radius: 12px; color: #fff; background: var(--blue-dark); font-weight: 750; box-shadow: 0 10px 20px #273c9d2a; }
.play-triangle { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #fff; }
.hero-art { position: relative; width: min(100%, 470px); aspect-ratio: 1; justify-self: end; border-radius: 42% 58% 48% 52% / 48% 44% 56% 52%; background: linear-gradient(145deg, #e4eaff, #d9e2ff); isolation: isolate; }
.hero-art::before { content: ""; position: absolute; inset: 13%; border: 2px dashed #9aacf477; border-radius: inherit; transform: rotate(-17deg); }
.bubble, .mini-bubble { position: absolute; display: block; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff 0 9%, color-mix(in srgb, var(--bubble) 42%, #fff) 11% 27%, var(--bubble) 47% 100%); box-shadow: inset -12px -15px 17px #162b4c33, 0 14px 22px #223c6b2b; }
.bubble { width: 23%; aspect-ratio: 1; }
.bubble--purple { --bubble: var(--purple); top: 13%; left: 33%; }.bubble--red { --bubble: var(--red); top: 35%; left: 13%; }.bubble--green { --bubble: var(--green); bottom: 12%; left: 35%; }.bubble--blue { --bubble: var(--sky); top: 52%; right: 12%; }
.bubble--burst { width: 27%; aspect-ratio: 1; top: 13%; right: 12%; background: #fff9ce; box-shadow: 0 0 0 10px #ffe78288, 0 0 0 24px #ffe78233; animation: pulse 2.8s ease-in-out infinite; }
.bubble--burst i { position: absolute; width: 9%; height: 35%; left: 46%; top: -25%; border-radius: 99px; background: #ffc107; transform-origin: 50% 215%; }.bubble--burst i:nth-child(2) { transform: rotate(60deg); }.bubble--burst i:nth-child(3) { transform: rotate(120deg); }.bubble--burst i:nth-child(4) { transform: rotate(180deg); }.bubble--burst i:nth-child(5) { transform: rotate(240deg); }.bubble--burst i:nth-child(6) { transform: rotate(300deg); }
.spark { position: absolute; width: 10px; aspect-ratio: 1; background: #ffc107; border-radius: 50%; }.spark--one { top: 42%; right: 39%; }.spark--two { top: 28%; right: 5%; width: 15px; }.spark--three { top: 3%; right: 37%; width: 7px; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.how-to-play { padding: 76px 56px 96px; }.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }.steps article { position: relative; min-height: 230px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 15px 35px #21385b0b; }.step-number { display: block; color: #9aa9bf; font-size: .75rem; font-weight: 800; letter-spacing: .1em; }.mini-bubble { --bubble: var(--sky); position: relative; width: 48px; height: 48px; margin: 21px 0; }.mini-bubble--red { --bubble: var(--red); }.mini-bubble--purple { --bubble: var(--purple); }.steps h3 { margin-bottom: 8px; font-size: 1.12rem; }.steps p { color: var(--muted); line-height: 1.55; }
.promise { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; margin-bottom: 96px; padding: 54px 56px; border-radius: 30px; background: var(--blue-dark); color: #fff; }.promise .eyebrow { color: #b9c6ff; }.promise h2 { margin-bottom: 18px; }.promise p:not(.eyebrow) { color: #d4dcff; }.promise-art { position: relative; width: 240px; aspect-ratio: 1; margin: auto; border: 1px solid #b9c6ff50; border-radius: 50%; }.promise-art span { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 31% 22%, #fff 0 8%, #cbd6ff 10% 24%, #7890ef 48% 100%); box-shadow: inset -8px -10px 12px #1a27794a; }.promise-art span:nth-child(1) { top: -26px; left: 91px; }.promise-art span:nth-child(2) { top: 45px; right: -26px; }.promise-art span:nth-child(3) { bottom: -26px; right: 34px; }.promise-art span:nth-child(4) { bottom: 8px; left: -22px; }.promise-art span:nth-child(5) { top: 56px; left: 25px; background: radial-gradient(circle at 31% 22%, #fff 0 8%, #f8c3ff 10% 24%, #c165d1 48% 100%); }
footer { display: flex; justify-content: space-between; padding: 28px; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); } footer a { text-decoration: none; }
.policy-page { min-height: calc(100vh - 77px); }.policy { max-width: 760px; margin: 36px auto 88px; padding: 0 28px; }.policy h1 { font-size: clamp(3rem, 6vw, 4.8rem); }.policy-intro { font-size: 1.25rem; color: var(--muted); margin-bottom: 50px; }.policy h2 { margin: 38px 0 12px; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; }.policy p { line-height: 1.7; color: #40506a; }
@media (max-width: 720px) { .site-nav { padding: 22px 20px; }.hero { grid-template-columns: 1fr; padding: 44px 28px 64px; }.hero-art { width: min(100%, 390px); justify-self: center; }.how-to-play { padding: 58px 28px 72px; }.steps { grid-template-columns: 1fr; margin-top: 32px; }.steps article { min-height: 0; }.promise { grid-template-columns: 1fr; gap: 42px; margin: 0 20px 70px; padding: 46px 28px; }.promise-art { width: 190px; }.policy { margin-top: 22px; }.policy h1 { margin-bottom: 20px; } }