:root{
  --bg:#fdfbf3;
  --fg:#1a1230;
  --card:#ffffff;
  --border:#1a1230;
  --pink:#ff3da6;
  --yellow:#ffe24d;
  --cyan:#5fd1e6;
  --lime:#aef36a;
  --purple:#3a1f7a;
  --orange:#ff8c42;
  --shadow:8px 8px 0 #1a1230;
  --shadow-sm:4px 4px 0 #1a1230;
  --grad-hero:linear-gradient(135deg,#ff3da6 0%,#ff8c42 50%,#ffe24d 100%);
  --grad-cyan:linear-gradient(135deg,#5fd1e6,#aef36a);
  --grad-purple:linear-gradient(135deg,#3a1f7a,#ff3da6);
  --radius:1.25rem;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html,body{overflow-x:hidden}
body{font-family:"DM Sans",system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.05}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:2px solid var(--border);background:rgba(253,251,243,.92);backdrop-filter:blur(8px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.brand.light{color:var(--bg)}
.bang{color:var(--pink)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(255,61,166,.6);animation:pulse 2s ease-in-out infinite}
.dot-lime{background:var(--lime);animation:none;width:8px;height:8px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,61,166,.6)}50%{box-shadow:0 0 0 16px rgba(255,61,166,0)}}
.nav-links{display:none;gap:32px;font-weight:500;font-size:14px}
.nav-links a:hover{color:var(--pink)}
@media(min-width:768px){.nav-links{display:flex}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--border);border-radius:999px;padding:16px 28px;font-weight:700;font-size:16px;box-shadow:var(--shadow);transition:transform .15s ease;cursor:pointer}
.btn:hover{transform:translateY(-3px)}
.btn-sm{padding:8px 20px;font-size:14px;box-shadow:var(--shadow-sm)}
.btn-dark{background:var(--fg);color:var(--bg)}
.btn-light{background:var(--bg);box-shadow:var(--shadow-sm)}
.btn-yellow{background:var(--yellow);color:var(--fg)}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--grad-hero);opacity:.95}
.hero-dots{position:absolute;inset:0;z-index:-1;opacity:.3;background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,.4) 1px,transparent 0);background-size:22px 22px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding:80px 24px}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;padding:112px 24px}}
.kicker{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--border);background:var(--bg);padding:6px 16px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.kicker-yellow{background:var(--yellow)}
.kicker-white{background:var(--bg)}
.h1{font-size:clamp(48px,8vw,84px);font-weight:700;margin-top:24px}
.badge-the{display:inline-block;transform:rotate(-2deg);background:var(--yellow);border:2px solid var(--border);border-radius:18px;padding:0 14px;box-shadow:var(--shadow);margin-left:10px}
.purple{color:var(--purple)}
.lead{margin-top:24px;font-size:18px;max-width:560px;color:rgba(26,18,48,.82)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.stats{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px;font-weight:500;font-size:14px}
.stat{display:flex;align-items:center;gap:12px}
.stat-pill{display:inline-block;border:2px solid var(--border);border-radius:14px;padding:6px 14px;font-weight:700;font-size:18px;box-shadow:var(--shadow-sm)}

.hero-art-wrap{position:relative}
.hero-art{overflow:hidden;border:2px solid var(--border);border-radius:28px;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(2deg)}}
.float-tag{position:absolute;display:none;border:2px solid var(--border);border-radius:18px;padding:8px 16px;font-weight:700;font-size:14px;box-shadow:var(--shadow-sm)}
.float-tag.tl{top:-22px;left:-22px;background:var(--lime);transform:rotate(-8deg)}
.float-tag.br{bottom:-18px;right:-12px;background:var(--cyan);color:var(--fg);transform:rotate(6deg)}
@media(min-width:768px){.float-tag{display:block}}

/* Sections */
.section{border-top:2px solid var(--border);border-bottom:2px solid var(--border);background:var(--bg);padding:96px 0}
.section-cyan{background:var(--grad-cyan);border-color:var(--border)}
.section-purple{background:var(--grad-purple);color:#fff;border-color:var(--border)}
.h2{font-size:clamp(36px,5vw,56px);font-weight:700;margin-top:20px;max-width:780px}
.h2.white{color:#fff}
.center{text-align:center}
.center .kicker,.center .h2{margin-left:auto;margin-right:auto}
.center .h2{max-width:780px}

/* Grids */
.grid-4,.grid-3,.grid-2,.grid-sources{display:grid;gap:24px;margin-top:48px}
.grid-4{grid-template-columns:repeat(1,1fr)}
.grid-3{grid-template-columns:repeat(1,1fr)}
.grid-2{grid-template-columns:repeat(1,1fr)}
.grid-sources{grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:640px){.grid-sources{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}.grid-sources{grid-template-columns:repeat(4,1fr)}}

.card{border:2px solid var(--border);background:var(--card);border-radius:24px;padding:24px;box-shadow:var(--shadow);transition:transform .2s ease}
.card:hover{transform:translateY(-4px)}
.num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--border);border-radius:16px;font-weight:700;font-size:18px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.card h3{font-size:20px;font-weight:700}
.card p{margin-top:8px;font-size:14px;color:rgba(26,18,48,.7)}

.src{border:2px solid var(--border);background:var(--card);border-radius:18px;padding:24px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s ease}
.src:hover{transform:translateY(-4px) rotate(-2deg)}
.src-ic{width:56px;height:56px;border:2px solid var(--border);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px}
.src p{font-weight:700}

.rules-card{border:2px solid var(--border);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.rules-card h3{font-size:24px;font-weight:700}
.rules-card ul{margin-top:16px;display:flex;flex-direction:column;gap:12px;font-weight:500}
.rules-card li::before{content:"• ";margin-right:6px}

.reward{border:2px solid var(--border);border-radius:24px;padding:32px;color:var(--fg);box-shadow:var(--shadow);text-align:left}
.reward .big{font-size:36px;font-weight:700}
.reward p{margin-top:12px;font-size:14px;font-weight:500}

.fineprint{margin:40px auto 0;max-width:560px;font-size:13px;opacity:.8}
.fineprint.dark{color:rgba(26,18,48,.7);opacity:1;margin-top:12px;text-align:left}

/* CTA box */
.cta-box{position:relative;overflow:hidden;border:2px solid var(--border);border-radius:40px;padding:40px;box-shadow:var(--shadow);background:var(--grad-hero)}
@media(min-width:768px){.cta-box{padding:64px}}
.cta-dots{position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,.5) 1px,transparent 0);background-size:18px 18px}
.cta-inner{position:relative;max-width:640px}
.cta-inner .h2{margin-top:0}
.cta-form{display:flex;flex-direction:column;gap:12px;margin-top:32px}
@media(min-width:640px){.cta-form{flex-direction:row}}
.cta-form input{flex:1;border:2px solid var(--border);background:var(--bg);border-radius:999px;padding:16px 24px;font-size:16px;font-family:inherit;box-shadow:var(--shadow-sm);outline:none;color:var(--fg)}
.cta-form input:focus{box-shadow:var(--shadow-sm),0 0 0 4px var(--pink)}
.cta-form button{font-family:inherit}

/* Footer */
.footer{background:var(--fg);color:var(--bg);padding:40px 0;border-top:2px solid var(--border)}
.footer-inner{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer p{font-size:14px;opacity:.7}
@media(min-width:768px){.footer-inner{flex-direction:row;align-items:center;justify-content:space-between}}