/* ── HERO ─────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse 100% 80% at 50% -10%, rgba(30,74,45,.55) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 80%, rgba(192,57,43,.15) 0%, transparent 60%),
              var(--bg-dark);
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden;
}
.hero-leaf {
  position: absolute; font-size: 4rem;
  opacity: .07;
  animation: drift 12s ease-in-out infinite;
}
.hero-leaf-1 { top: 15%; left: 8%;  animation-duration: 14s; animation-delay: 0s; }
.hero-leaf-2 { top: 65%; left: 4%;  animation-duration: 10s; animation-delay: 2s;  font-size: 2.5rem; }
.hero-leaf-3 { top: 20%; right: 6%; animation-duration: 16s; animation-delay: 1s; }
.hero-leaf-4 { top: 75%; right: 8%; animation-duration: 11s; animation-delay: 3s;  font-size: 3rem; }
.hero-leaf-5 { top: 45%; left: 50%; animation-duration: 18s; animation-delay: .5s; font-size: 6rem; }
@keyframes drift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-20px) rotate(8deg); }
  66%      { transform: translateY(10px) rotate(-5deg); }
}

.hero-content {
  position: relative; z-index: 2;
  padding-top: 120px; padding-bottom: var(--sp-10);
}
.hero-badge { margin-bottom: var(--sp-3); }
.hero-title {
  margin-bottom: var(--sp-3);
  max-width: 780px;
}
.hero-sub {
  max-width: 580px; margin-bottom: var(--sp-5);
  color: var(--text-secondary);
}
.hero-cta-group {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.hero-stats {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
}
.hero-stats .stat-chip { min-width: 120px; }

.hero-scroll-hint {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hero-scroll-hint span {
  display: block; width: 2px; height: 8px;
  background: var(--text-muted); border-radius: 1px;
  animation: scrollPulse 1.4s ease-in-out infinite;
}
.hero-scroll-hint span:nth-child(2) { animation-delay: .2s; }
.hero-scroll-hint span:nth-child(3) { animation-delay: .4s; }
@keyframes scrollPulse {
  0%,100% { opacity: .2; }
  50%      { opacity: .7; }
}

/* ── GAMES GRID ───────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.game-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
.game-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(192,57,43,.3);
}
.game-card-inner { display: flex; flex-direction: column; height: 100%; }

/* Game Visuals */
.game-visual {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.game-visual--poker {
  background: linear-gradient(135deg, #0D2B1A 0%, #1B4D2F 100%);
}
.game-visual--slots {
  background: linear-gradient(135deg, #2B1A0D 0%, #4D2B1B 100%);
}
.game-visual--roulette {
  background: linear-gradient(135deg, #0D1A2B 0%, #1B2F4D 100%);
}

/* Poker card fan */
.card-fan {
  position: relative; width: 160px; height: 130px;
}
.play-card {
  position: absolute;
  width: 60px; height: 84px;
  background: #fff; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: transform var(--tr-slow);
}
.pc-1 { left: 0;  top: 20px; transform: rotate(-18deg); color: #1A1A18; }
.pc-2 { left: 30px; top: 10px; transform: rotate(-6deg);  color: #C0392B; }
.pc-3 { left: 60px; top: 6px;  transform: rotate(6deg);   color: #C0392B; }
.pc-4 { left: 90px; top: 16px; transform: rotate(18deg);  color: #1A1A18; }
.game-card:hover .pc-1 { transform: rotate(-24deg) translateY(-8px); }
.game-card:hover .pc-2 { transform: rotate(-8deg) translateY(-12px); }
.game-card:hover .pc-3 { transform: rotate(8deg) translateY(-12px); }
.game-card:hover .pc-4 { transform: rotate(24deg) translateY(-8px); }

.game-chips { position: absolute; bottom: 16px; right: 20px; display: flex; gap: -4px; }
.chip { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); }
.chip-red   { background: #C0392B; margin-right: -8px; }
.chip-green { background: #27643C; margin-right: -8px; }
.chip-amber { background: #D4891A; }

/* Slots visual */
.slot-display {
  display: flex; gap: 4px;
  background: rgba(0,0,0,.4); border-radius: var(--r-sm);
  padding: 8px 12px;
  border: 2px solid rgba(212,137,26,.3);
}
.slot-reel {
  width: 54px; height: 70px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  transition: transform .2s ease;
}
.game-card:hover .slot-reel { animation: slotSpin .4s ease; }
@keyframes slotSpin {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.slot-lights {
  position: absolute; top: 12px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.slot-lights span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--clr-amber-light);
  animation: blink 1.2s ease-in-out infinite;
}
.slot-lights span:nth-child(2) { animation-delay: .2s; }
.slot-lights span:nth-child(3) { animation-delay: .4s; background: var(--clr-maple-light); }
.slot-lights span:nth-child(4) { animation-delay: .6s; }
.slot-lights span:nth-child(5) { animation-delay: .8s; background: var(--clr-maple-light); }
@keyframes blink {
  0%,100% { opacity: .2; }
  50%      { opacity: 1; }
}

/* Roulette visual */
.roulette-preview { position: relative; }
.wheel-ring {
  width: 130px; height: 130px; border-radius: 50%;
  background: conic-gradient(
    #C0392B 0deg 20deg, #111 20deg 40deg,
    #C0392B 40deg 60deg, #111 60deg 80deg,
    #C0392B 80deg 100deg, #111 100deg 120deg,
    #C0392B 120deg 140deg, #111 140deg 160deg,
    #C0392B 160deg 180deg, #111 180deg 200deg,
    #C0392B 200deg 220deg, #111 220deg 240deg,
    #C0392B 240deg 260deg, #111 260deg 280deg,
    #C0392B 280deg 300deg, #111 300deg 320deg,
    #C0392B 320deg 340deg, #111 340deg 360deg
  );
  border: 4px solid rgba(212,137,26,.5);
  display: flex; align-items: center; justify-content: center;
  animation: wheelSpin 8s linear infinite;
  box-shadow: 0 0 32px rgba(192,57,43,.3);
}
@keyframes wheelSpin { to { transform: rotate(360deg); } }
.game-card:hover .wheel-ring { animation-duration: 1.5s; }
.wheel-inner {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-dark);
  border: 3px solid rgba(212,137,26,.4);
  display: flex; align-items: center; justify-content: center;
  animation: wheelSpin 8s linear infinite reverse;
}
.game-card:hover .wheel-inner { animation-duration: 1.5s; }
.wheel-num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--clr-amber-light); }
.roulette-ball {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6);
}

/* Game info */
.game-info { padding: var(--sp-3) var(--sp-3) var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.game-info h3 { font-size: 1.4rem; margin-bottom: var(--sp-1); }
.game-info p { font-size: .9rem; color: var(--text-secondary); line-height: 1.65; flex: 1; }
.game-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-2); }
.meta-tag {
  padding: 4px 10px; border-radius: 100px;
  font-size: .72rem; font-weight: 500;
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,.08);
}

/* ── FEATURES ─────────────────────────────── */
.features-section {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30,74,45,.12) 0%, transparent 70%);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.feature-card {
  padding: var(--sp-4);
}
.feature-icon { font-size: 2rem; margin-bottom: var(--sp-2); }
.feature-card h4 { font-size: 1rem; margin-bottom: var(--sp-1); color: var(--text-primary); }
.feature-card p { font-size: .875rem; color: var(--text-secondary); line-height: 1.65; }

/* ── HOW IT WORKS PREVIEW ─────────────────── */
.hiw-preview {
  background: var(--bg-surface);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hiw-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-8); align-items: center;
}
.hiw-steps { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.hiw-step { display: flex; align-items: flex-start; gap: var(--sp-2); }
.step-num {
  font-family: var(--font-accent); font-size: 1.8rem; font-weight: 600;
  color: var(--clr-maple-light); opacity: .6;
  min-width: 48px; line-height: 1;
}
.hiw-step h4 { font-size: .95rem; margin-bottom: 4px; color: var(--text-primary); }
.hiw-step p  { font-size: .875rem; color: var(--text-secondary); }

/* Card stack visual */
.hiw-card-stack { position: relative; height: 260px; }
.hiw-card {
  position: absolute;
  width: 220px; padding: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: transform var(--tr-slow);
}
.hc-1 { top: 0; left: 0; transform: rotate(-6deg); z-index: 1; }
.hc-2 { top: 30px; left: 50px; z-index: 2; }
.hc-3 { top: 60px; left: 100px; transform: rotate(5deg); z-index: 3; border-color: rgba(192,57,43,.3); }
.hiw-preview:hover .hc-1 { transform: rotate(-8deg) translateY(-8px); }
.hiw-preview:hover .hc-3 { transform: rotate(8deg) translateY(-8px); }
.hc-top { font-family: var(--font-accent); font-size: .8rem; color: var(--text-muted); letter-spacing: .06em; margin-bottom: 8px; }
.hc-mid { font-size: 2.5rem; margin-bottom: 8px; }
.hc-bot { font-size: .82rem; color: var(--clr-amber-light); font-weight: 500; }

/* ── COMMUNITY CALLOUT ────────────────────── */
.community-callout {
  background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(192,57,43,.1) 0%, transparent 70%);
}

/* ── RG STRIP ─────────────────────────────── */
.rg-strip {
  background: var(--clr-forest);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: var(--sp-2) 0;
}
.rg-strip-inner {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
}
.rg-strip-icon { font-size: 1.3rem; flex-shrink: 0; }
.rg-strip p { font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.8); flex: 1; }
.rg-strip a { color: var(--clr-amber-pale); text-decoration: underline; text-underline-offset: 2px; }
.rg-link {
  font-size: .8rem; font-weight: 600;
  color: var(--clr-amber-pale);
  border: 1px solid rgba(255,255,255,.25);
  padding: 6px 14px; border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--tr-fast);
}
.rg-link:hover { background: rgba(255,255,255,.1); }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width: 1024px) {
  .games-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-inner { grid-template-columns: 1fr; }
  .hiw-visual { display: none; }
}
@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: var(--sp-2); }
}