/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/landing-v2.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --pink:#FF5E9F;
  --yellow:#FFD23F;
  --mint:#4ECDC4;
  --purple:#7B61FF;
  --coral:#FF8C61;
  --dark:#1A1A2E;
  --cream:#FFF8F0;
  --muted:#6B6B85;
  --bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html, body {
  font-family:'Nunito', sans-serif;
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
  line-height: 1.5;
}

.landing { position: relative; min-height: 100vh; }

/* ============ BG ============ */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: bbFloat 20s ease-in-out infinite; }
.bb1 { width: 520px; height: 520px; background: #FFCCE0; top: -160px; left: -160px; }
.bb2 { width: 440px; height: 440px; background: #C9F1EE; top: 20%; right: -180px; animation-delay: -5s; }
.bb3 { width: 380px; height: 380px; background: #E4DCFF; top: 60%; left: -120px; animation-delay: -10s; }
.bb4 { width: 460px; height: 460px; background: #FFE4D1; bottom: -100px; right: 10%; animation-delay: -15s; }
.bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(26,26,46,0.06) 1px, transparent 1px);
  background-size: 32px 32px; opacity: 0.3;
}
@keyframes bbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(60px,-40px) scale(1.1); }
  66% { transform: translate(-40px,30px) scale(0.92); }
}

/* ============ DECOR ============ */
.decor { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.dec { position: absolute; font-size: 28px; opacity: 0.5; animation: decFloat 15s linear infinite; }
.d1 { top: 12%; left: 5%; }
.d2 { top: 30%; right: 6%; animation-delay: -2s; }
.d3 { top: 55%; left: 8%; animation-delay: -4s; }
.d4 { top: 75%; right: 10%; animation-delay: -6s; }
.d5 { top: 20%; left: 40%; animation-delay: -8s; font-size: 22px; }
.d6 { bottom: 15%; left: 20%; animation-delay: -10s; }
.d7 { top: 65%; right: 25%; animation-delay: -12s; }
.d8 { top: 5%; right: 35%; animation-delay: -14s; font-size: 22px; }
@keyframes decFloat {
  0%,100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(20px,-30px) rotate(20deg); }
  50% { transform: translate(-15px,-40px) rotate(-15deg); }
  75% { transform: translate(10px,-20px) rotate(10deg); }
}

/* ============ BLOB ============ */
.blob { position: relative; display: inline-block; flex-shrink: 0; animation: blobJelly 2.4s var(--bouncy) infinite; transform-origin: center bottom; }
@keyframes blobJelly {
  0%,100% { transform: translateY(0) scaleY(1) scaleX(1); }
  45% { transform: translateY(-6px) scaleY(1.04) scaleX(0.97); }
  70% { transform: translateY(0) scaleY(0.95) scaleX(1.05); }
}
.acc-crown { position: absolute; top: -18%; left: 50%; transform: translateX(-50%) rotate(-6deg); font-size: 22%; animation: crownBob 2s ease-in-out infinite; }
.acc-crown { font-size: 28px; }
.blob[style*="width: 220px"] .acc-crown { font-size: 56px; top: -20%; }
.blob[style*="width: 60px"] .acc-crown, .blob[style*="width: 54px"] .acc-crown { font-size: 18px; }
@keyframes crownBob { 0%,100% { transform: translateX(-50%) rotate(-6deg); } 50% { transform: translateX(-50%) rotate(6deg) translateY(-3px); } }
.acc-hp, .acc-star { position: absolute; top: -8%; right: -6%; font-size: 22px; animation: accSpin 3s linear infinite; }
@keyframes accSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============ NAV (floating pill island) ============ */
.land-nav {
  position: sticky; top: 14px; z-index: 50;
  padding: 0 16px;
  transition: top 0.3s;
}
.land-nav.scrolled { top: 10px; }
.land-nav-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 22px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(26, 26, 46, 0.06);
  border-radius: 999px;
  box-shadow:
    0 14px 38px rgba(255, 94, 159, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.land-nav.scrolled .land-nav-inner {
  box-shadow:
    0 18px 46px rgba(255, 94, 159, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* confetti sparkle accents on nav corners */
.land-nav-inner::before,
.land-nav-inner::after {
  position: absolute; pointer-events: none;
  font-size: 14px; line-height: 1;
  animation: navSparkle 2.8s ease-in-out infinite;
}
.land-nav-inner::before {
  content: '✦';
  color: var(--yellow);
  top: -8px; left: 30px;
  animation-delay: 0s;
}
.land-nav-inner::after {
  content: '✧';
  color: var(--pink);
  bottom: -6px; right: 140px;
  font-size: 12px;
  animation-delay: 1.4s;
}
@keyframes navSparkle {
  0%, 100% { transform: rotate(0) scale(1); opacity: 0.55; }
  50% { transform: rotate(180deg) scale(1.35); opacity: 1; }
}

.land-logo { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 32px; display: inline-flex; line-height: 1; gap: 1px; }
.land-logo.small { font-size: 28px; }
.land-logo span { display: inline-block; animation: letterBounce 2s var(--bouncy) infinite; }
@keyframes letterBounce { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-4deg); } }

/* inset pill group — creates a clear "tab bar" feel */
.land-nav-links {
  display: flex; gap: 2px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(255, 248, 240, 0.9), rgba(255, 237, 245, 0.7));
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(26, 26, 46, 0.05);
}
.land-nav-links a {
  padding: 9px 16px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14.5px;
  color: rgba(26, 26, 46, 0.72); cursor: pointer;
  transition: all 0.22s var(--bouncy);
  display: inline-flex; align-items: center; gap: 7px;
  position: relative;
  text-decoration: none;
}
.land-nav-links .nl-emoji {
  display: inline-block; font-size: 15px; line-height: 1;
  transition: transform 0.3s var(--bouncy);
  filter: grayscale(0.2);
}
.land-nav-links a:hover {
  background: white;
  color: var(--pink);
  box-shadow: 0 4px 14px rgba(255, 94, 159, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.land-nav-links a:hover .nl-emoji {
  transform: rotate(-14deg) scale(1.25);
  filter: grayscale(0);
}
.land-nav-links a.active {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF4F9 100%);
  color: var(--pink);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 94, 159, 0.35),
    0 4px 12px rgba(255, 94, 159, 0.18);
  font-weight: 700;
}
.land-nav-links a.active .nl-emoji {
  filter: grayscale(0);
  animation: navEmojiWiggle 2.2s ease-in-out infinite;
}
@keyframes navEmojiWiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(-14deg) scale(1.2); }
}

.land-nav-right { display: flex; gap: 10px; align-items: center; }
.nav-login {
  background: transparent; border: 1.5px solid rgba(26, 26, 46, 0.1);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 14.5px; color: var(--dark); cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  transition: all 0.22s var(--bouncy);
}
.nav-login:hover {
  border-color: rgba(255, 94, 159, 0.45);
  color: var(--pink);
  background: rgba(255, 94, 159, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 94, 159, 0.15);
}
.nav-signup {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white; border: none;
  padding: 10px 22px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14.5px;
  cursor: pointer; transition: all 0.25s var(--bouncy);
  box-shadow:
    0 10px 24px rgba(255, 94, 159, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; gap: 7px;
  position: relative;
  letter-spacing: 0.1px;
}
.nav-signup::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 50%);
  pointer-events: none;
}
.nav-signup:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 32px rgba(255,94,159,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
.ns-sparkle { animation: sparkleSpin 3s linear infinite; display: inline-block; position: relative; z-index: 1; }
@keyframes sparkleSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============ HERO ============ */
.hero {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 40px 32px 60px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px;
  align-items: center;
}
.hero-left { display: flex; flex-direction: column; gap: 22px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; padding: 8px 16px; border-radius: 100px;
  border: 2px solid rgba(255,210,63,0.3);
  font-size: 13px; font-weight: 700; color: var(--dark);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  width: fit-content;
  animation: chipFloat 3s ease-in-out infinite;
}
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.hc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 4px rgba(78,205,196,0.25);
  animation: hcPulse 2s infinite;
}
@keyframes hcPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(78,205,196,0.25); }
  50% { box-shadow: 0 0 0 10px rgba(78,205,196,0); }
}

.big-logo {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(80px, 11vw, 140px);
  line-height: 0.95; letter-spacing: -2px;
  display: inline-flex; gap: 2px;
}
.big-letter {
  display: inline-block;
  animation: bigLetter 2.4s var(--bouncy) infinite backwards;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.1));
}
@keyframes bigLetter {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-12px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-6px) rotate(3deg); }
}

.tagline-wrap { margin-top: 4px; }
.tagline {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1;
  color: var(--dark);
}
.tl-line { display: block; }
.tl-hl {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative;
}
.tl-hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 10px; border-radius: 100px;
  background: rgba(255,210,63,0.5);
  z-index: -1;
  animation: hlSlide 2s ease-out forwards;
}
@keyframes hlSlide {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}
.tagline-sub {
  margin-top: 14px;
  font-size: 16px; color: var(--muted); font-weight: 500;
  line-height: 1.6;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cta-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 30px; border-radius: 100px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--pink), var(--coral) 60%, var(--yellow) 130%);
  color: white; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 17px;
  box-shadow: 0 14px 40px rgba(255,94,159,0.45);
  transition: all 0.3s var(--bouncy);
  position: relative; overflow: hidden;
}
.cta-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%);
  animation: shinePass 3s infinite;
}
@keyframes shinePass {
  0% { transform: translateX(-100%); }
  40%, 100% { transform: translateX(200%); }
}
.cta-primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 50px rgba(255,94,159,0.55); }
.cta-rocket { animation: rocketShake 1.8s ease-in-out infinite; display: inline-block; }
@keyframes rocketShake { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-15deg) translateY(-3px); } }
.cta-arrow { animation: arrowSlide 1.5s ease-in-out infinite; display: inline-block; }
@keyframes arrowSlide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 18px 28px; border-radius: 100px;
  background: white; border: 2px solid rgba(0,0,0,0.08);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16px;
  cursor: pointer; transition: all 0.25s var(--bouncy);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.cta-secondary:hover { transform: translateY(-3px); border-color: var(--pink); color: var(--pink); }

.cta-sub {
  font-size: 13px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
}
.cs-check {
  background: var(--mint); color: white;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.cs-sparkle {
  display: inline-block;
  font-size: 14px;
  animation: csSparkle 1.8s ease-in-out infinite;
}
@keyframes csSparkle {
  0%,100% { transform: rotate(-10deg) scale(1); opacity: 0.9; }
  50% { transform: rotate(12deg) scale(1.2); opacity: 1; }
}
.cta-gift {
  display: inline-block;
  animation: ctaGiftWiggle 2s ease-in-out infinite;
}
@keyframes ctaGiftWiggle {
  0%,100% { transform: rotate(-6deg); }
  50% { transform: rotate(8deg) scale(1.1); }
}

.trust-row {
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px;
  padding: 14px 18px;
  background: white; border-radius: 100px;
  border: 2px solid rgba(0,0,0,0.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  width: fit-content;
}
.avatar-stack { display: flex; align-items: center; }
.avatar-stack > * { margin-left: -8px; filter: drop-shadow(0 0 2px white) drop-shadow(0 0 2px white); }
.avatar-stack > *:first-child { margin-left: 0; }
.stack-plus {
  margin-left: -6px;
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white;
  height: 32px; min-width: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px;
  position: relative; z-index: 5;
  box-shadow: 0 0 0 3px white, 0 4px 10px rgba(255,94,159,0.3);
  line-height: 1;
}
.trust-text { font-size: 13px; color: var(--muted); }
.trust-text strong { color: var(--dark); }

/* ============ HERO RIGHT ============ */
.hero-right { position: relative; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.hero-mascot { position: relative; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; }
.mascot-glow {
  position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,94,159,0.25), transparent 60%);
  animation: mascotGlow 3s ease-in-out infinite;
}
@keyframes mascotGlow {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}
.speech {
  position: absolute; top: 10px; right: -20px;
  background: white; padding: 12px 18px; border-radius: 20px;
  border: 3px solid var(--dark);
  font-family: 'Fredoka', sans-serif; font-size: 15px; font-weight: 600;
  box-shadow: 5px 5px 0 var(--dark);
  animation: speechBob 3s ease-in-out infinite;
  z-index: 5;
}
@keyframes speechBob {
  0%,100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}
.speech-tail {
  position: absolute; bottom: -10px; left: 24px;
  width: 16px; height: 16px; background: white;
  border-right: 3px solid var(--dark); border-bottom: 3px solid var(--dark);
  transform: rotate(45deg);
}
.orbit-wrap { position: absolute; inset: 0; animation: orbitSpin 15s linear infinite; }
@keyframes orbitSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.orbit-item { position: absolute; font-size: 30px; animation: orbitCounter 15s linear infinite; }
@keyframes orbitCounter { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
.oi1 { top: 0; left: 50%; transform: translateX(-50%); }
.oi2 { top: 50%; right: 0; transform: translateY(-50%); }
.oi3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.oi4 { top: 50%; left: 0; transform: translateY(-50%); }

.mini-friend { position: absolute; }
.mf1 { top: 20px; left: -30px; animation: mfFloat 4s ease-in-out infinite; }
.mf2 { bottom: 30px; right: -20px; animation: mfFloat 4s ease-in-out infinite -1.5s; }
.mf3 { bottom: -20px; left: 30px; animation: mfFloat 4s ease-in-out infinite -3s; }
@keyframes mfFloat {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(10px,-15px); }
}

/* ============ DEMO CARD ============ */
.demo-card {
  position: relative;
  width: 320px; background: white;
  border-radius: 24px; padding: 20px;
  border: 2px solid rgba(0,0,0,0.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  transform: rotate(-2deg);
  animation: demoTilt 6s ease-in-out infinite;
}
@keyframes demoTilt {
  0%,100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.demo-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,94,159,0.12); color: var(--pink);
  padding: 4px 10px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1px;
  flex-shrink: 0;
}
.demo-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
  animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.4); }
}
.demo-game-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px;
  background: white;
  border: 1.5px solid;
  flex: 1;
  justify-content: center;
  max-width: 150px;
  animation: dgpEnter 0.5s var(--bouncy);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
@keyframes dgpEnter {
  0% { opacity: 0; transform: translateY(-6px) scale(0.85); }
  60% { transform: translateY(1px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.dgp-emoji { font-size: 13px; line-height: 1; animation: dgpEmojiSpin 2s ease-in-out infinite; }
@keyframes dgpEmojiSpin {
  0%,100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(-15deg) scale(1.15); }
}
.demo-round {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 11px; color: var(--muted);
  flex-shrink: 0;
  animation: dgpEnter 0.5s var(--bouncy);
}

/* ============ GAME SHOWCASE (cycling preview) ============ */
.demo-preview {
  position: relative;
  border-radius: 16px;
  padding: 14px 14px 14px;
  margin-bottom: 10px;
  min-height: 136px;
  overflow: hidden;
  animation: gsPreviewEnter 0.55s var(--bouncy);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.7), 0 2px 8px rgba(0,0,0,0.04);
}
.demo-preview::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.45), transparent 55%);
  pointer-events: none;
}
@keyframes gsPreviewEnter {
  0% { opacity: 0; transform: translateY(12px) scale(0.94); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.gs-th-label {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-align: center; margin-bottom: 6px;
  animation: gsEnterTop 0.5s var(--bouncy) 0.05s backwards;
  position: relative; z-index: 1;
}
.gs { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; }
@keyframes gsEnterTop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Universal answer chip --- */
.gs-answer {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  padding: 6px 14px; border-radius: 100px;
  background: white;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border: 1.5px solid transparent;
  animation: gsAnswerPop 0.5s var(--bouncy) 0.4s backwards, gsAnswerGlow 1.8s ease-in-out 0.9s infinite;
}
.gs-answer.pink { color: var(--pink); border-color: rgba(255,94,159,0.3); }
.gs-answer.mint { color: #2EAEA5; border-color: rgba(78,205,196,0.35); }
.gs-answer.yellow { color: #C98C00; border-color: rgba(255,210,63,0.45); }
.gs-answer.purple { color: var(--purple); border-color: rgba(123,97,255,0.3); }
.gs-answer.coral { color: var(--coral); border-color: rgba(255,140,97,0.3); }
@keyframes gsAnswerPop {
  0% { opacity: 0; transform: scale(0.65); }
  60% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes gsAnswerGlow {
  0%,100% { box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
  50% { box-shadow: 0 4px 14px rgba(0,0,0,0.06), 0 0 0 4px color-mix(in srgb, var(--gs-color) 20%, transparent); }
}

/* --- Emoji Decode --- */
.gs-emoji { gap: 10px; }
.gs-e-row { display: flex; gap: 8px; }
.gs-e-tile {
  width: 42px; height: 42px; border-radius: 13px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 -2px 0 rgba(0,0,0,0.04);
  animation: gsTileDrop 0.5s var(--bouncy) backwards;
}
.gs-e-tile:nth-child(1) { animation-delay: 0.1s; }
.gs-e-tile:nth-child(2) { animation-delay: 0.2s; }
.gs-e-tile:nth-child(3) { animation-delay: 0.3s; }
@keyframes gsTileDrop {
  0% { opacity: 0; transform: translateY(-14px) scale(0.65) rotate(-8deg); }
  60% { transform: translateY(3px) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* --- Wordle --- */
.gs-wordle { gap: 4px; }
.gs-wd-row { display: flex; gap: 4px; }
.gs-wd-tile {
  width: 28px; height: 28px; border-radius: 7px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px;
  color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  animation: gsTileFlip 0.5s var(--bouncy) backwards;
}
.gs-wd-tile.hit { background: var(--mint); }
.gs-wd-tile.near { background: var(--yellow); color: var(--dark); }
.gs-wd-tile.miss { background: #C0C0CE; }
.gs-wd-row:nth-child(1) .gs-wd-tile:nth-child(1) { animation-delay: 0.05s; }
.gs-wd-row:nth-child(1) .gs-wd-tile:nth-child(2) { animation-delay: 0.12s; }
.gs-wd-row:nth-child(1) .gs-wd-tile:nth-child(3) { animation-delay: 0.19s; }
.gs-wd-row:nth-child(1) .gs-wd-tile:nth-child(4) { animation-delay: 0.26s; }
.gs-wd-row:nth-child(1) .gs-wd-tile:nth-child(5) { animation-delay: 0.33s; }
.gs-wd-row.second .gs-wd-tile:nth-child(1) { animation-delay: 0.42s; }
.gs-wd-row.second .gs-wd-tile:nth-child(2) { animation-delay: 0.49s; }
.gs-wd-row.second .gs-wd-tile:nth-child(3) { animation-delay: 0.56s; }
.gs-wd-row.second .gs-wd-tile:nth-child(4) { animation-delay: 0.63s; }
.gs-wd-row.second .gs-wd-tile:nth-child(5) { animation-delay: 0.70s; }
@keyframes gsTileFlip {
  0% { opacity: 0; transform: rotateX(90deg) scale(0.8); }
  60% { transform: rotateX(-10deg) scale(1.08); }
  100% { opacity: 1; transform: rotateX(0) scale(1); }
}
.gs-wordle .gs-answer { animation-delay: 0.85s, 1.3s; }

/* --- Math Rush --- */
.gs-math { gap: 12px; }
.gs-math-eq {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  animation: gsEnterTop 0.5s var(--bouncy) 0.1s backwards;
}
.gs-m-n {
  font-size: 24px; color: var(--dark);
  background: white; padding: 2px 12px; border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  line-height: 1.1;
}
.gs-m-op { font-size: 20px; color: var(--purple); font-weight: 700; }
.gs-m-q {
  font-size: 24px; color: var(--pink);
  background: white; padding: 2px 12px; border-radius: 10px;
  box-shadow: 0 3px 8px rgba(255,94,159,0.2);
  animation: gsQPulse 1s ease-in-out infinite;
  line-height: 1.1;
}
@keyframes gsQPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.gs-math-opts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gs-opt {
  padding: 5px 13px; border-radius: 100px;
  background: white; color: var(--dark);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  border: 1.5px solid transparent;
  animation: gsOptEnter 0.4s var(--bouncy) backwards;
}
.gs-math-opts .gs-opt:nth-child(1) { animation-delay: 0.25s; }
.gs-math-opts .gs-opt:nth-child(2) { animation-delay: 0.35s; }
.gs-math-opts .gs-opt:nth-child(3) { animation-delay: 0.45s; }
.gs-math-opts .gs-opt:nth-child(4) { animation-delay: 0.55s; }
.gs-opt.hit {
  background: var(--mint); color: white;
  border-color: var(--mint);
  animation: gsOptEnter 0.4s var(--bouncy) 0.35s backwards, gsHitPulse 1.6s ease-in-out 0.8s infinite;
}
.gs-opt.coral.hit {
  background: var(--coral); border-color: var(--coral);
}
@keyframes gsOptEnter {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gsHitPulse {
  0%,100% { box-shadow: 0 4px 12px rgba(78,205,196,0.35); transform: scale(1); }
  50% { box-shadow: 0 6px 18px rgba(78,205,196,0.6); transform: scale(1.04); }
}

/* --- Memory Match --- */
.gs-memory { gap: 8px; }
.gs-mm-grid { display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; }
.gs-mc {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #FFD23F, #FF8C61);
  color: white; font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  animation: gsTileDrop 0.45s var(--bouncy) backwards;
  position: relative;
}
.gs-mc.flipped {
  background: white;
  font-size: 19px;
  color: var(--dark);
}
.gs-mc.matched {
  animation: gsTileDrop 0.45s var(--bouncy) backwards, gsMatchedGlow 1.4s ease-in-out 0.6s infinite;
  box-shadow: 0 3px 10px rgba(78,205,196,0.4);
  border: 1.5px solid var(--mint);
}
.gs-mm-grid .gs-mc:nth-child(1) { animation-delay: 0.05s; }
.gs-mm-grid .gs-mc:nth-child(2) { animation-delay: 0.12s; }
.gs-mm-grid .gs-mc:nth-child(3) { animation-delay: 0.19s; }
.gs-mm-grid .gs-mc:nth-child(4) { animation-delay: 0.26s; }
.gs-mm-grid .gs-mc:nth-child(5) { animation-delay: 0.33s; }
.gs-mm-grid .gs-mc:nth-child(6) { animation-delay: 0.40s; }
@keyframes gsMatchedGlow {
  0%,100% { box-shadow: 0 3px 10px rgba(78,205,196,0.4); transform: scale(1); }
  50% { box-shadow: 0 3px 16px rgba(78,205,196,0.75); transform: scale(1.06); }
}

/* --- Trivia --- */
.gs-trivia { gap: 10px; width: 100%; }
.gs-tv-q {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px;
  text-align: center; color: var(--dark);
  background: white; padding: 6px 14px; border-radius: 100px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
  animation: gsEnterTop 0.5s var(--bouncy) 0.1s backwards;
}
.gs-tv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; padding: 0 6px; }
.gs-tv-opts .gs-opt {
  padding: 5px 8px; font-size: 11.5px; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.gs-tv-opts .gs-opt:nth-child(1) { animation-delay: 0.25s; }
.gs-tv-opts .gs-opt:nth-child(2) { animation-delay: 0.35s; }
.gs-tv-opts .gs-opt:nth-child(3) { animation-delay: 0.45s; }
.gs-tv-opts .gs-opt:nth-child(4) { animation-delay: 0.55s; }

/* --- Cycle dots (showing current preview in carousel) --- */
.demo-cycle-dots {
  display: flex; justify-content: center; gap: 5px;
  margin-bottom: 10px;
}
.dcd {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(26,26,46,0.15);
  transition: all 0.4s var(--bouncy);
}
.dcd.on {
  width: 18px; border-radius: 100px;
  background: var(--pink);
  box-shadow: 0 0 8px currentColor;
}
.demo-scores { display: flex; flex-direction: column; gap: 8px; }
.demo-scores-live { overflow: visible; }
.demo-row {
  display: grid; grid-template-columns: 24px 40px 1fr 40px;
  gap: 8px; align-items: center;
  padding: 4px 8px; border-radius: 10px;
}
.demo-scores-live .demo-row {
  border: 1px solid transparent;
  background: transparent;
}
.demo-row.me {
  background: rgba(255,94,159,0.08);
  border: 1px solid rgba(255,94,159,0.2);
}
.demo-row.leader {
  background: linear-gradient(90deg, rgba(255,210,63,0.12), rgba(255,94,159,0.08));
  border: 1px solid rgba(255,210,63,0.35);
  box-shadow: 0 2px 10px rgba(255,210,63,0.15);
}
.demo-row.me.leader {
  background: linear-gradient(90deg, rgba(255,210,63,0.15), rgba(255,94,159,0.14));
  border-color: rgba(255,94,159,0.35);
}
.demo-row .blob { animation: none; }
.blob-sm { animation: none; }
.demo-name { font-size: 12px; font-weight: 600; }
.demo-bar { height: 6px; background: rgba(0,0,0,0.06); border-radius: 100px; overflow: hidden; }
.demo-bar-fill {
  height: 100%; border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.08), 0 0 6px rgba(255,255,255,0.4);
}
.demo-score {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; text-align: right;
  display: inline-block; transform-origin: right center;
  animation: scorePop 0.6s var(--bouncy);
}
@keyframes scorePop {
  0% { transform: scale(1.4) translateY(-2px); color: var(--pink); }
  35% { transform: scale(1.15) translateY(-1px); }
  100% { transform: scale(1) translateY(0); color: var(--dark); }
}
.demo-bump {
  position: absolute;
  right: 8px; top: -4px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  pointer-events: none;
  animation: demoBumpRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  text-shadow: 0 2px 8px rgba(255,255,255,0.7);
  z-index: 3;
}
@keyframes demoBumpRise {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  20% { transform: translateY(-6px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-24px) scale(0.9); opacity: 0; }
}
.demo-floating { position: absolute; font-size: 28px; animation: demoFloat 3s ease-out infinite; }
.demo-floating.one { top: -10px; right: 30px; color: var(--coral); }
.demo-floating.two {
  top: 40%; left: -20px;
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  color: var(--mint); font-size: 22px;
  animation-delay: 1s;
}
.demo-floating.three { bottom: -10px; right: -10px; animation-delay: 2s; }
@keyframes demoFloat {
  0% { transform: translateY(10px) scale(0.7); opacity: 0; }
  20% { transform: translateY(0) scale(1.2); opacity: 1; }
  60% { transform: translateY(-30px) scale(1); opacity: 1; }
  100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

/* ============ TICKER ============ */
.ticker-section {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 18px 24px;
  display: flex; align-items: center; gap: 20px;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(255,210,63,0.18), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255,94,159,0.14), transparent 60%),
    radial-gradient(ellipse at 85% 50%, rgba(78,205,196,0.18), transparent 55%),
    linear-gradient(90deg, rgba(255,244,208,0.6), rgba(255,221,233,0.5), rgba(223,246,244,0.6));
  border-radius: 100px;
  border: 1.5px solid rgba(0,0,0,0.04);
  box-shadow: 0 6px 20px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  margin-top: 20px; margin-bottom: 20px;
  max-width: calc(1200px - 64px);
  margin-left: auto; margin-right: auto;
}
.ticker-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--dark);
  white-space: nowrap;
}
.tl-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,94,159,0.25);
  animation: hcPulse 2s infinite;
}
.ticker {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.ticker-track {
  display: flex; gap: 14px;
  animation: tickerMove 30s linear infinite;
  width: max-content;
}
@keyframes tickerMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; padding: 10px 18px;
  border-radius: 100px;
  border: 2px solid var(--c);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.ticker-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
  animation: livePulse 1.5s infinite;
}
.ticker-game { font-family: 'Fredoka', sans-serif; font-weight: 700; }
.ticker-code {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 100px;
  font-size: 11px;
}
.ticker-count {
  color: var(--c); font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 12px;
}

/* ============ STATS ============ */
.stats-section {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 30px 32px 60px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.stat-counter {
  background: white; border-radius: 24px;
  padding: 24px 20px; text-align: center;
  border: 2px solid rgba(0,0,0,0.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  transition: all 0.3s var(--bouncy);
  position: relative; overflow: hidden;
}
.stat-counter::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--c); opacity: 0.15;
}
.stat-counter:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,0.08); }
.sc-emoji { font-size: 32px; margin-bottom: 6px; display: inline-block; animation: scEmoji 3s ease-in-out infinite; }
@keyframes scEmoji { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-5deg); } }
.sc-num {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 36px; color: var(--c);
  line-height: 1;
}
.sc-plus { font-size: 24px; opacity: 0.8; }
.sc-label { margin-top: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ============ SECTIONS ============ */
.section-head { text-align: center; margin-bottom: 40px; position: relative; }
.section-chip {
  display: inline-block;
  background: white; padding: 8px 18px; border-radius: 100px;
  border: 2px solid rgba(0,0,0,0.06);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.section-title {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1;
  color: var(--dark);
  max-width: 700px; margin: 0 auto;
}
.hl-pink, .hl-mint, .hl-purple, .hl-coral {
  background-clip: text; -webkit-background-clip: text; color: transparent;
  position: relative; display: inline-block;
}
.hl-pink { background-image: linear-gradient(135deg, var(--pink), var(--coral)); }
.hl-mint { background-image: linear-gradient(135deg, var(--mint), var(--purple)); }
.hl-purple { background-image: linear-gradient(135deg, var(--purple), var(--pink)); }
.hl-coral { background-image: linear-gradient(135deg, var(--coral), var(--yellow)); }
.section-sub { margin-top: 14px; font-size: 17px; color: var(--muted); max-width: 560px; margin-left: auto; margin-right: auto; }

/* ============ FEATURES ============ */
.features-section {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 60px 32px;
}
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card {
  position: relative;
  background: var(--bg);
  border-radius: 28px; padding: 28px 24px 26px;
  border: 2px solid rgba(0,0,0,0.04);
  transition: all 0.4s var(--bouncy);
  overflow: hidden;
  animation: featureEnter 0.6s var(--bouncy) backwards;
}
@keyframes featureEnter {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.fc-illust {
  position: absolute; top: 14px; right: 14px;
  width: 60px; height: 60px;
}
.ill-target { position: relative; width: 100%; height: 100%; }
.tgt-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--pink); }
.tgt-ring.r1 { opacity: 0.3; animation: tgtRing 2s ease-out infinite; }
.tgt-ring.r2 { inset: 10px; opacity: 0.5; animation: tgtRing 2s ease-out infinite 0.5s; }
.tgt-ring.r3 { inset: 22px; background: var(--pink); border: none; animation: tgtRing 2s ease-out infinite 1s; }
@keyframes tgtRing { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.ill-games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.ill-games span {
  font-size: 22px; background: white; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  animation: illGame 2s ease-in-out infinite backwards;
  animation-delay: calc(var(--i) * 0.15s);
}
@keyframes illGame { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ill-friends { display: flex; gap: 2px; align-items: flex-end; }
.ill-friends > * { margin-left: -14px; border: 3px solid white; border-radius: 50%; animation: none; }
.ill-friends > *:first-child { margin-left: 0; }
.ill-trophy { position: relative; font-size: 36px; }
.il-star { position: absolute; font-size: 14px; animation: ilStar 2s ease-in-out infinite; }
.il-star.s1 { top: -6px; left: -4px; }
.il-star.s2 { bottom: -4px; right: -4px; animation-delay: 1s; }
@keyframes ilStar {
  0%,100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.fc-emoji {
  font-size: 36px; margin-bottom: 16px;
  background: white; width: 60px; height: 60px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.3s var(--bouncy);
}
.feature-card:hover .fc-emoji { transform: rotate(-10deg) scale(1.1); }
.fc-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 22px; color: var(--dark); margin-bottom: 8px; }
.fc-desc { font-size: 14px; color: var(--muted); font-weight: 500; line-height: 1.5; }
.fc-sparkle { position: absolute; color: var(--c); font-size: 14px; animation: fcSparkle 2s ease-in-out infinite; }
.s1 { top: 50%; left: 20px; }
.s2 { bottom: 20px; right: 28px; animation-delay: 1s; }
@keyframes fcSparkle {
  0%,100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ============ GAMES LAND ============ */
.games-land-section {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 60px 32px;
}
.games-land-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gl-card {
  position: relative; padding: 24px 22px 22px;
  border-radius: 24px; border: 2px solid rgba(0,0,0,0.05);
  transition: all 0.35s var(--bouncy);
  animation: glEnter 0.6s var(--bouncy) backwards;
  animation-delay: calc(var(--i) * 0.08s);
  cursor: pointer;
  overflow: hidden; isolation: isolate;
}
@keyframes glEnter {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.gl-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.5), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
/* Lift all card content above the ::before radial gradient */
.gl-card > * { position: relative; z-index: 1; }
.gl-card:hover {
  transform: translateY(-10px) rotate(var(--rot)) scale(1.04);
  box-shadow: 0 22px 44px rgba(0,0,0,0.12);
  border-color: var(--c);
}
.gl-icon-wrap { margin-bottom: 16px; }
.gl-icon {
  width: 60px; height: 60px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  transition: transform 0.3s var(--bouncy);
}
.gl-card:hover .gl-icon { transform: rotate(-12deg) scale(1.15); }
.gl-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 18px; }
.gl-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; font-weight: 600; }
.gl-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.gl-meta-pill {
  background: rgba(255,255,255,0.7);
  padding: 3px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 700; color: var(--dark);
}
.gl-play {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 100px;
  color: white; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: all 0.25s var(--bouncy);
}
.gl-card:hover .gl-play { padding: 8px 18px; }
.gl-play span { transition: transform 0.25s; display: inline-block; }
.gl-card:hover .gl-play span { transform: translateX(3px); }

/* ============ GAMES GRID — badges & live plays ============ */
.gl-card.featured {
  border-color: var(--yellow);
  box-shadow:
    0 14px 32px rgba(255,210,63,0.25),
    0 0 0 3px rgba(255,210,63,0.2),
    inset 0 0 40px rgba(255,210,63,0.08);
  animation: glEnter 0.6s var(--bouncy) backwards, glFeaturedGlow 3s ease-in-out infinite;
}
@keyframes glFeaturedGlow {
  0%,100% { box-shadow: 0 14px 32px rgba(255,210,63,0.25), 0 0 0 3px rgba(255,210,63,0.2), inset 0 0 40px rgba(255,210,63,0.08); }
  50% { box-shadow: 0 18px 44px rgba(255,210,63,0.4), 0 0 0 3px rgba(255,210,63,0.35), inset 0 0 50px rgba(255,210,63,0.15); }
}
.gl-card.featured::after {
  content: '✦';
  position: absolute; top: 14px; right: 14px;
  font-size: 16px; color: var(--yellow);
  animation: featSpark 2.2s ease-in-out infinite;
  z-index: 2;
}
@keyframes featSpark {
  0%,100% { transform: rotate(0) scale(1); opacity: 0.7; }
  50% { transform: rotate(180deg) scale(1.35); opacity: 1; }
}

.gl-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 4px 10px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 10px; letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  z-index: 2;
  animation: glBadgePop 0.5s var(--bouncy) 0.3s backwards;
}
@keyframes glBadgePop {
  0% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60% { transform: scale(1.1) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.gl-badge-hot {
  background: linear-gradient(135deg, #FF5E9F, #FF8C61);
  color: white;
  box-shadow: 0 6px 16px rgba(255,94,159,0.45);
}
.glb-flame {
  display: inline-block;
  animation: glFlame 0.6s ease-in-out infinite alternate;
  font-size: 12px;
}
@keyframes glFlame {
  from { transform: scale(1) rotate(-4deg); }
  to { transform: scale(1.18) rotate(4deg); }
}
.gl-badge-pop {
  background: white;
  color: var(--coral);
  border: 1.5px solid rgba(255,140,97,0.35);
}
.gl-badge-new {
  background: linear-gradient(135deg, #4ECDC4, #7B61FF);
  color: white;
}
.glb-sparkle {
  display: inline-block;
  animation: glSpark 1.6s ease-in-out infinite;
}
@keyframes glSpark {
  0%,100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.25); }
}

/* Live plays counter row */
.gl-plays-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Fredoka', sans-serif;
  margin-bottom: 12px; margin-top: -4px;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(255,255,255,0.65);
  font-size: 11px; font-weight: 600;
  width: fit-content;
  transition: background 0.3s;
}
.gl-card.ticking .gl-plays-row { background: rgba(255,255,255,0.95); }
.gl-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(26,26,46,0.25);
  transition: background 0.3s;
}
.gl-live-dot.on {
  background: #2EC76B;
  box-shadow: 0 0 0 4px rgba(46,199,107,0.2);
  animation: glLivePulse 0.7s ease-out;
}
@keyframes glLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(46,199,107,0.7); transform: scale(0.8); }
  50% { box-shadow: 0 0 0 8px rgba(46,199,107,0); transform: scale(1.3); }
  100% { box-shadow: 0 0 0 4px rgba(46,199,107,0.2); transform: scale(1); }
}
.gl-plays-n {
  font-weight: 800; color: var(--dark);
  font-size: 12px;
  animation: glPlaysNum 0.4s var(--bouncy);
  display: inline-block;
}
@keyframes glPlaysNum {
  0% { transform: translateY(-3px) scale(1.2); color: var(--pink); }
  100% { transform: translateY(0) scale(1); color: var(--dark); }
}
.gl-plays-label { color: var(--muted); font-size: 10px; font-weight: 600; }

/* ============ HOW ============ */
.how-section {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 60px 32px;
}
.how-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px;
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
.how-card {
  position: relative;
  background: white; border-radius: 20px;
  padding: 24px 20px;
  border: 2px solid rgba(0,0,0,0.06);
  text-align: center;
  transition: all 0.3s var(--bouncy);
  box-shadow: 0 7px 20px rgba(0,0,0,0.04);
}
.how-card:hover { transform: translateY(-5px); box-shadow: 0 12px 27px rgba(0,0,0,0.08); }
.how-num {
  width: 38px; height: 38px; border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 19px;
  box-shadow: 0 5px 15px rgba(255,94,159,0.35);
}
.how-emoji { font-size: 40px; margin-bottom: 6px; display: inline-block; animation: howBob 3s ease-in-out infinite; }
@keyframes howBob {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(8deg); }
}
.how-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 5px; }
.how-desc { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.5; }
.how-arrow {
  position: absolute; top: 50%; right: -22px; transform: translateY(-50%);
  font-size: 24px; color: var(--pink); font-weight: 700;
  animation: howArrow 1.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes howArrow {
  0%,100% { transform: translate(0, -50%); }
  50% { transform: translate(5px, -50%); }
}

/* ============ REVIEWS ============ */
.reviews-section {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 60px 32px;
}
.reviews-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.review-card {
  background: white; border-radius: 22px;
  padding: 20px;
  border: 2px solid rgba(0,0,0,0.06);
  transform: rotate(var(--rot));
  transition: all 0.3s var(--bouncy);
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
}
.review-card:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,0.1); }
.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rv-head .blob { animation: none; }
.rv-name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; }
.rv-tag { font-size: 12px; color: var(--muted); }
.rv-emoji { margin-left: auto; font-size: 24px; }
.rv-text { font-size: 14px; color: var(--dark); line-height: 1.5; margin-bottom: 10px; }
.rv-stars { font-size: 14px; letter-spacing: 1px; }

/* ============ BIG CTA ============ */
.big-cta-section {
  position: relative; z-index: 5;
  max-width: 1200px; margin: 0 auto;
  padding: 40px 32px 80px;
}
.big-cta {
  position: relative;
  background: linear-gradient(135deg, #FF5E9F 0%, #FF8C61 50%, #FFD23F 120%);
  border-radius: 36px; padding: 60px 40px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(255,94,159,0.3);
}
.big-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.2), transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(123,97,255,0.15), transparent 50%);
  pointer-events: none;
}
.bc-blobs { position: absolute; inset: 0; pointer-events: none; }
.bc-char {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  animation-fill-mode: both;
  transition: transform 0.3s var(--bouncy);
}
.bc-char:hover { transform: scale(1.12) translateY(-4px) !important; z-index: 5; }
.bc1 { top: 20px; left: 40px; animation: bcFloat 5s ease-in-out infinite; }
.bc2 { top: 60px; right: 80px; animation: bcFloat 5s ease-in-out infinite -1.2s; }
.bc3 { bottom: 30px; left: 80px; animation: bcFloat 5s ease-in-out infinite -2.5s; }
.bc4 { bottom: 50px; right: 50px; animation: bcFloat 5s ease-in-out infinite -3.5s; }
@keyframes bcFloat {
  0%,100% { transform: translate(0,0) rotate(0); }
  50% { transform: translate(10px,-14px) rotate(-6deg); }
}
/* Speech-bubble tooltip on hover — shows each blob's personality */
.bc-char::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.7);
  background: white; color: var(--dark);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px;
  padding: 5px 12px; border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--bouncy), transform 0.3s var(--bouncy);
  z-index: 10;
}
.bc-char::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  border: 5px solid transparent;
  border-top-color: white;
  opacity: 0;
  transition: opacity 0.25s var(--bouncy), transform 0.3s var(--bouncy);
  pointer-events: none;
  z-index: 10;
}
.bc-char:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.bc-char:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bc-content { position: relative; z-index: 2; color: white; }
.bc-emoji {
  font-size: 72px; display: inline-block;
  animation: bcEmojiShake 2s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.2));
}
@keyframes bcEmojiShake {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.05); }
  75% { transform: rotate(12deg) scale(1.05); }
}
.bc-title {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  margin-top: 10px; line-height: 1.1;
  text-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.bc-sub { font-size: 18px; margin-top: 12px; opacity: 0.95; font-weight: 500; }
.bc-actions { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.bc-primary {
  background: white; color: var(--pink);
  border: none; padding: 18px 36px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 18px;
  cursor: pointer; transition: all 0.3s var(--bouncy);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  display: inline-flex; align-items: center; gap: 10px;
}
.bc-primary:hover { transform: translateY(-4px) scale(1.04); }
.bc-secondary {
  background: rgba(255,255,255,0.2); color: white;
  border: 2px solid rgba(255,255,255,0.5);
  padding: 18px 30px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 16px;
  cursor: pointer; transition: all 0.25s var(--bouncy);
  backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; gap: 8px;
}
.bc-secondary:hover { background: rgba(255,255,255,0.3); transform: translateY(-3px); }
.bc-tiny { margin-top: 18px; font-size: 12px; opacity: 0.8; }
.bc-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bc-conf {
  position: absolute; top: -10px;
  width: 8px; height: 12px; border-radius: 2px;
  animation: bcConf linear infinite;
}
@keyframes bcConf {
  from { transform: translateY(-10px) rotate(0); }
  to { transform: translateY(520px) rotate(720deg); }
}

/* ============ FOOTER ============ */
.land-footer {
  position: relative; z-index: 5;
  background: var(--dark); color: white;
  padding: 50px 32px 30px;
  margin-top: 40px;
}
.lf-top {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
}
.lf-tag { margin-top: 8px; font-size: 14px; opacity: 0.6; }
.lf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lf-col { display: flex; flex-direction: column; gap: 8px; }
.lf-head { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.lf-col a { color: rgba(255,255,255,0.7); font-size: 13px; cursor: pointer; transition: color 0.2s; }
.lf-col a:hover { color: white; }
.lf-bot {
  max-width: 1200px; margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px dashed rgba(255,255,255,0.15);
  text-align: center; font-size: 12px; opacity: 0.6;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .features-grid, .games-land-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-section { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-left { align-items: center; }
  .trust-row, .hero-chip { margin-left: auto; margin-right: auto; }
  .how-grid { grid-template-columns: 1fr; }
  .how-arrow { display: none; }
  .lf-top { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .features-grid, .games-land-grid, .reviews-grid, .stats-section { grid-template-columns: 1fr; }
  .land-nav-links { display: none; }
  .land-nav-inner { padding: 14px 20px; }
  .hero { padding: 24px 20px 40px; }
  .demo-card { width: 280px; }
  .big-cta { padding: 40px 24px; }
  .bc-blobs { display: none; }
  .lf-cols { grid-template-columns: 1fr 1fr; }
}