/* ═══════════════════════════════════════════════════════════════════
   Casino Gurus · Homepage v2 + Header + Footer  ·  v3.0
   Scoping: homepage → .hpv2-page | header → #main-nav.hpv2-header | footer → footer.hpv2-footer
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties ─────────────────────────────────────────── */
:root {
  /* Gold palette */
  --cg-gold:          #d4af37;
  --cg-gold-light:    #f5e066;
  --cg-gold-dark:     #9a7b1a;
  --cg-gold-shine:    linear-gradient(135deg, #d4af37 0%, #f5e066 40%, #d4af37 70%, #9a7b1a 100%);

  /* Navy-blue dark palette (replaces near-black) */
  --cg-bg:            #0f1923;   /* Base background */
  --cg-bg-alt:        #162030;   /* Alternate section background */
  --cg-bg-card:       #1e2a3a;   /* Card/surface background */
  --cg-bg-glass:      rgba(22, 34, 52, .82);
  --cg-bg-glass-lite: rgba(30, 42, 58, .55);
  --cg-bg-purple:     #1a0e2e;   /* Deep purple accent areas */
  --cg-bg-navy:       #0d1b2a;   /* Footer deep navy */

  /* Legacy aliases kept so old selectors still compile */
  --cg-dark:          #0f1923;
  --cg-dark-card:     #1e2a3a;
  --cg-dark-surface:  #162030;

  /* Accent colours */
  --cg-neon:          #00d4ff;
  --cg-neon-glow:     rgba(0, 212, 255, .15);
  --cg-purple:        #7b2fff;

  /* Text */
  --cg-text:          rgba(255, 255, 255, .90);
  --cg-text-dim:      rgba(170, 200, 230, .72);

  /* Status */
  --cg-green:         #00c851;
  --cg-orange:        #ff8800;
  --cg-red:           #ff3333;

  /* Borders */
  --cg-dark-border:   rgba(212, 175, 55, .18);
  --cg-glass-bg:      rgba(22, 34, 52, .82);
  --cg-glass-border:  rgba(255, 255, 255, .08);

  /* Shadows */
  --cg-shadow-gold:   0 0 40px rgba(212, 175, 55, .22), 0 8px 32px rgba(0, 0, 0, .55);
  --cg-shadow-neon:   0 0 30px rgba(0, 212, 255, .2),  0 8px 32px rgba(0, 0, 0, .45);

  /* Geometry */
  --cg-radius:        12px;
  --cg-radius-lg:     20px;
  --cg-radius-xl:     28px;
  --cg-ease:          cubic-bezier(.4, 0, .2, 1);
  --cg-trans:         .3s cubic-bezier(.4, 0, .2, 1);
  --cg-section-gap:   80px;
}

/* ── 2. Base ──────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* Ensure no white gaps from body default background */
body.hpv2-body {
  background: var(--cg-bg) !important;
  margin: 0;
  padding: 0;
}

.hpv2-page {
  background: var(--cg-bg);
  color: var(--cg-text);
  overflow-x: hidden;
}

.hpv2-page *, .hpv2-page *::before, .hpv2-page *::after { box-sizing: border-box; }
.hpv2-page img { max-width: 100%; display: block; }
.hpv2-page a { color: var(--cg-gold); text-decoration: none; transition: color var(--cg-trans); }
.hpv2-page a:hover { color: var(--cg-gold-light); }

/* ── 3. Shared Utilities ──────────────────────────────────────────── */
.hpv2-section { padding: var(--cg-section-gap) 0; position: relative; }

/* Gold gradient divider line between sections */
.hpv2-section + .hpv2-section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.2) 50%, transparent 100%);
  pointer-events: none;
}

.hpv2-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.hpv2-section-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cg-gold);
  margin-bottom: 14px;
  padding: 5px 16px;
  border: 1px solid rgba(212, 175, 55, .3);
  border-radius: 50px;
  background: rgba(212, 175, 55, .07);
}

.hpv2-section-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--cg-text);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.hpv2-section-subtitle {
  font-size: .95rem;
  color: var(--cg-text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Rating badges */
.hpv2-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
  white-space: nowrap;
}
.hpv2-rating--green  { background: rgba(0,200,81,.13);  color: var(--cg-green);  border: 1px solid rgba(0,200,81,.25); }
.hpv2-rating--orange { background: rgba(255,136,0,.13); color: var(--cg-orange); border: 1px solid rgba(255,136,0,.25); }
.hpv2-rating--red    { background: rgba(255,51,51,.13);  color: var(--cg-red);    border: 1px solid rgba(255,51,51,.25); }

/* ── 4. Buttons ───────────────────────────────────────────────────── */
.hpv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 50px;
  transition: var(--cg-trans);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Gold filled — dark text for contrast, hover inverts */
.hpv2-btn--gold {
  background: var(--cg-gold-shine);
  color: #0f0920 !important;
  border-color: transparent;
  box-shadow: 0 3px 16px rgba(212,175,55,.35);
}
.hpv2-btn--gold:hover {
  background: transparent !important;
  color: var(--cg-gold) !important;
  border-color: var(--cg-gold);
  box-shadow: 0 0 20px rgba(212,175,55,.3);
  transform: translateY(-2px);
}

/* Outline / secondary */
.hpv2-btn--outline {
  background: transparent;
  color: var(--cg-text-dim);
  border-color: rgba(255,255,255,.18);
}
.hpv2-btn--outline:hover {
  color: var(--cg-gold);
  border-color: var(--cg-gold);
  background: rgba(212,175,55,.06);
}

/* Disabled — non-clickable "Closed" state, no hover/press affordance */
.hpv2-btn--disabled {
  background: rgba(255,255,255,.06);
  color: var(--cg-text-dim);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.hpv2-btn--sm  { padding: 8px 16px; font-size: .75rem; }
.hpv2-btn--lg  { padding: 16px 44px; font-size: 1rem; }
.hpv2-btn--full { width: 100%; }

/* ── 5. Header ────────────────────────────────────────────────────── */
#main-nav.hpv2-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, rgba(26,14,46,.88) 0%, rgba(13,27,42,.88) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(212,175,55,.28);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
  padding: 0;
}

#main-nav.hpv2-header.hpv2-header--scrolled {
  background: linear-gradient(135deg, rgba(16,8,30,.97) 0%, rgba(8,18,30,.97) 100%);
  box-shadow: 0 4px 32px rgba(0,0,0,.6), 0 1px 0 rgba(212,175,55,.2);
  border-color: rgba(212,175,55,.35);
}

#main-nav.hpv2-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  max-width: 1280px;
}

/* Logo — 30% larger, gold glow */
#main-nav.hpv2-header .navbar-brand { padding: 0; margin: 0; flex-shrink: 0; }
#main-nav.hpv2-header .navbar-brand img {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(212,175,55,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition: filter .3s;
}
#main-nav.hpv2-header .navbar-brand:hover img {
  filter: drop-shadow(0 0 14px rgba(212,175,55,.6)) drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

/* Nav links */
#main-nav.hpv2-header .navbar-nav { gap: 0; }
#main-nav.hpv2-header .navbar-nav .nav-link,
#main-nav.hpv2-header .navbar-nav > li > a {
  color: rgba(220,235,255,.82) !important;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 8px 15px !important;
  border-radius: 8px;
  transition: color .2s, background .2s;
  position: relative;
}
#main-nav.hpv2-header .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 15px; right: 15px;
  height: 2px;
  background: var(--cg-gold);
  transform: scaleX(0);
  transition: transform .25s var(--cg-ease);
  border-radius: 1px;
}
#main-nav.hpv2-header .navbar-nav .nav-link:hover,
#main-nav.hpv2-header .navbar-nav .active > a,
#main-nav.hpv2-header .navbar-nav .current-menu-item > a,
#main-nav.hpv2-header .navbar-nav .current-menu-ancestor > a {
  color: var(--cg-gold) !important;
  background: rgba(212,175,55,.08);
}
#main-nav.hpv2-header .navbar-nav .nav-link:hover::after,
#main-nav.hpv2-header .navbar-nav .current-menu-item > .nav-link::after { transform: scaleX(1); }

/* Dropdown */
#main-nav.hpv2-header .dropdown-menu {
  background: rgba(16,8,30,.97);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: var(--cg-radius);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  min-width: 200px;
}
#main-nav.hpv2-header .dropdown-item {
  color: rgba(220,235,255,.75);
  font-size: .83rem;
  padding: 8px 16px;
  transition: color .2s, background .2s;
}
#main-nav.hpv2-header .dropdown-item:hover { color: var(--cg-gold); background: rgba(212,175,55,.08); }

/* Fix: Compare Casinos dropdown showing white text on white background —
   the legacy Bootstrap rules in main.css/custom.min.css win in some
   cascade orders, so pin the dark theme here with !important. */
.navbar .dropdown-menu { background: #1a0e2e !important; border: 1px solid rgba(201,142,53,0.3) !important; }
.navbar .dropdown-item { color: #ffffff !important; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: rgba(201,142,53,0.2) !important; color: #C98E35 !important; }
.navbar .dropdown-item.active,
.navbar .dropdown-item.current-menu-item > a {
  background: rgba(201,142,53,0.2) !important;
  color: #C98E35 !important;
}

/* Search */
#main-nav.hpv2-header .search-form input {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--cg-text);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .8rem;
  outline: none;
  transition: border-color .2s;
}
#main-nav.hpv2-header .search-form input:focus { border-color: rgba(212,175,55,.4); }
#main-nav.hpv2-header .search-form input::placeholder { color: var(--cg-text-dim); }

/* Hamburger */
#main-nav.hpv2-header #btnNav,
#main-nav.hpv2-header .btn-nav {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
#main-nav.hpv2-header #btnNav span,
#main-nav.hpv2-header .btn-nav span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cg-gold);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, background .2s;
}
/* Neutralize the legacy Bootstrap-era hamburger pseudo-elements (main.css /
   custom.min.css add 34x6px white bars via span::before/::after, built for
   an older single-span icon markup) — they were never reset for the current
   3-span gold icon and rendered as glitchy overlapping white bars. */
#main-nav.hpv2-header #btnNav span::before,
#main-nav.hpv2-header #btnNav span::after,
#main-nav.hpv2-header .btn-nav span::before,
#main-nav.hpv2-header .btn-nav span::after {
  content: none;
  display: none;
}

/* Open state — morph the 3 bars into an X (li class toggled by scripts.js) */
#main-nav.hpv2-header #btnNav.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#main-nav.hpv2-header #btnNav.active span:nth-child(2) {
  opacity: 0;
}
#main-nav.hpv2-header #btnNav.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile */
#main-nav.hpv2-header #slidenav {
  background: rgba(10,5,22,.98);
  backdrop-filter: blur(20px);
}
#main-nav.hpv2-header #slidenav .navbar-nav .nav-link {
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

@media (min-width: 768px) {
  #main-nav.hpv2-header #slidenav {
    background: transparent;
    backdrop-filter: none;
  }
}

/* Fix: the legacy .sidenav rule (main.css) sets height:100%, but #main-nav
   has backdrop-filter, which makes it the CSS containing block for its
   position:fixed descendants — so #slidenav's height:100% was resolving
   against #main-nav's own ~80px box instead of the viewport, collapsing
   the mobile menu into an ~79px sliver with only one nav item visible at
   a time. vh units aren't affected by the containing-block change, so use
   those instead. Scoped to the same breakpoint the hamburger already uses. */
@media (max-width: 767px) {
  #main-nav.hpv2-header #slidenav {
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* Push body down under fixed header */
.hpv2-page { padding-top: 74px; }
.hpv2-hero { min-height: calc(100vh - 74px); }

/* ── 6. Hero ──────────────────────────────────────────────────────── */
.hpv2-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 55%, rgba(30,6,60,.95) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 20%, rgba(5,20,60,.85) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(20,10,40,.6) 0%, transparent 60%),
    linear-gradient(160deg, #0f0820 0%, #0a1520 50%, #0f0820 100%);
}

/* Background image layer */
.hpv2-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .1; z-index: 0;
}
.hpv2-hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,8,20,.3) 0%, rgba(9,8,20,1) 100%);
}

/* Card suit SVG pattern */
.hpv2-hero__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: .85;
}
.hpv2-hero__pattern svg { width: 100%; height: 100%; }

/* Layered gold glow spots */
.hpv2-hero__glow {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 14% 68%, rgba(212,175,55,.14) 0%, transparent 28%),
    radial-gradient(circle at 86% 28%, rgba(0,100,200,.09) 0%, transparent 32%),
    radial-gradient(circle at 52% 88%, rgba(123,47,255,.07) 0%, transparent 28%),
    radial-gradient(circle at 28% 18%, rgba(212,175,55,.07) 0%, transparent 22%),
    radial-gradient(circle at 75% 75%, rgba(212,175,55,.05) 0%, transparent 20%);
}

/* Shimmer sweep */
.hpv2-hero__shimmer {
  position: absolute;
  top: -60%; left: -70%;
  width: 32%;
  height: 220%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.028) 50%, transparent 100%);
  transform: rotate(-24deg);
  pointer-events: none; z-index: 2;
  animation: hpv2HeroShimmer 11s ease-in-out infinite;
}

/* Particles */
.hpv2-hero__particles {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.hpv2-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cg-gold-light) 0%, var(--cg-gold) 60%);
  box-shadow: 0 0 6px rgba(212,175,55,.6);
  animation: hpv2ParticleFloat var(--dur, 7s) var(--delay, 0s) ease-in-out infinite;
}

/* Poker chip stack (replaces roulette-wheel chip) */
.hpv2-hero__chipstack {
  position: absolute; right: 7%; top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 148px;
  z-index: 1; display: none;
  animation: hpv2StackFloat 9s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(212,175,55,.18));
}
.hpv2-hero__chipstack svg { width: 100%; height: auto; display: block; }

/* Small floating chips */
.hpv2-hero__chip-sm {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #2a2a2a, #111);
  z-index: 2; animation: hpv2ChipSmFloat var(--chip-dur, 8s) ease-in-out infinite;
}
.hpv2-hero__chip-sm--1 {
  width: 54px; height: 54px; left: 3%; top: 55%;
  box-shadow: 0 0 0 5px rgba(212,175,55,.18), 0 0 0 7px rgba(212,175,55,.08), 0 0 14px rgba(212,175,55,.25);
  --chip-dur: 11s;
}
.hpv2-hero__chip-sm--2 {
  width: 40px; height: 40px; right: 14%; bottom: 28%;
  box-shadow: 0 0 0 4px rgba(0,212,255,.18), 0 0 0 6px rgba(0,212,255,.08), 0 0 12px rgba(0,212,255,.22);
  --chip-dur: 8.5s; animation-direction: reverse;
}

/* Gold coins */
.hpv2-hero__coin {
  position: absolute; border-radius: 50%;
  background: conic-gradient(var(--cg-gold-dark) 0deg, var(--cg-gold) 60deg, var(--cg-gold-light) 120deg, var(--cg-gold) 180deg, var(--cg-gold-dark) 240deg, var(--cg-gold) 300deg, var(--cg-gold-dark) 360deg);
  box-shadow: 0 0 20px rgba(212,175,55,.5), inset 0 -4px 10px rgba(0,0,0,.5);
  animation: hpv2CoinFloat var(--coin-dur, 10s) ease-in-out infinite;
  z-index: 2;
}
.hpv2-hero__coin--1 { width: 64px; height: 64px; top: 14%; right: 4%; --coin-dur: 9s; }
.hpv2-hero__coin--2 { width: 44px; height: 44px; top: 68%; left: 5%; --coin-dur: 13s; animation-direction: reverse; }
.hpv2-hero__coin--3 { width: 54px; height: 54px; bottom: 18%; right: 18%; --coin-dur: 11s; }

/* Floating playing cards */
.hpv2-hero__pcard {
  position: absolute;
  width: 54px; height: 76px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(212,175,55,.32);
  border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: Georgia, serif;
  backdrop-filter: blur(8px);
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 12px rgba(212,175,55,.1);
}
.hpv2-hero__pcard--1 {
  top: 16%; left: 6%;
  transform: rotate(-14deg);
  animation: hpv2Card1Float 9s ease-in-out infinite;
}
.hpv2-hero__pcard--2 {
  bottom: 22%; left: 9%;
  transform: rotate(9deg);
  animation: hpv2Card2Float 11s ease-in-out infinite;
}
.hpv2-hero__pcard-val {
  font-size: 1.05rem; font-weight: 900;
  color: rgba(255,255,255,.75); line-height: 1;
}
.hpv2-hero__pcard-suit {
  font-size: 1.35rem; line-height: 1;
  color: var(--cg-gold);
}

/* Floating dice */
.hpv2-hero__dice {
  position: absolute;
  top: 24%; right: 5%;
  width: 50px; height: 50px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 8px; gap: 5px;
  z-index: 2;
  animation: hpv2DiceFloat 7.5s ease-in-out infinite;
  transform: rotate(18deg);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.hpv2-dice__dot {
  width: 9px; height: 9px;
  background: var(--cg-gold);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(212,175,55,.5);
  align-self: center; justify-self: center;
}

/* ── Slot machine ─────────────────────────────────────────────────── */
.hpv2-hero__slot {
  position: absolute;
  top: 6%; right: 2.5%;
  width: 84px;
  z-index: 2;
  animation: hpv2SlotFloat 10s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.28)) drop-shadow(0 4px 16px rgba(0,0,0,.5));
}
.hpv2-hero__slot svg { width: 100%; height: auto; display: block; }

/* ── Diamond gem ──────────────────────────────────────────────────── */
.hpv2-hero__diamond {
  position: absolute;
  bottom: 10%; left: 2%;
  width: 54px;
  z-index: 2;
  animation: hpv2DiamondPulse 7s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(0,212,255,.42));
}
.hpv2-hero__diamond svg { width: 100%; height: auto; display: block; }

/* Hero content */
.hpv2-hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 22px 24px 68px;
}

.hpv2-hero__eyebrow {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cg-gold);
  margin-bottom: 22px;
  padding: 7px 20px;
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 50px;
  background: rgba(212,175,55,.07);
  animation: hpv2FadeUp .8s ease both;
}

.hpv2-hero__title {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 26px;
  letter-spacing: -.025em;
  color: #fff;
  animation: hpv2FadeUp .9s .12s ease both;
}
.hpv2-hero__title span {
  background: linear-gradient(135deg, var(--cg-gold) 0%, var(--cg-gold-light) 50%, var(--cg-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hpv2-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(200,220,240,.78);
  max-width: 540px;
  margin: 0 auto 44px;
  line-height: 1.78;
  animation: hpv2FadeUp 1s .22s ease both;
}

.hpv2-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 44px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f0920 !important;
  background: var(--cg-gold-shine);
  border: 2px solid transparent;
  border-radius: 50px;
  box-shadow: 0 4px 28px rgba(212,175,55,.45);
  animation: hpv2FadeUp 1s .32s ease both;
  transition: var(--cg-trans);
}
.hpv2-hero__cta:hover {
  background: transparent !important;
  color: var(--cg-gold) !important;
  border-color: var(--cg-gold);
  box-shadow: 0 0 30px rgba(212,175,55,.4);
  transform: translateY(-4px);
}

.hpv2-hero__scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(170,200,230,.5); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  animation: hpv2FadeUp 1s .6s ease both;
}
.hpv2-hero__scroll-line {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--cg-gold), transparent);
  animation: hpv2ScrollBounce 2s ease-in-out infinite;
}

/* ── 7. Trust Bar ─────────────────────────────────────────────────── */
.hpv2-trust {
  background: linear-gradient(90deg, rgba(212,175,55,.06) 0%, rgba(0,212,255,.03) 100%), var(--cg-bg-alt);
  border-top: 1px solid var(--cg-dark-border);
  border-bottom: 1px solid var(--cg-dark-border);
  padding: 52px 0;
}
.hpv2-trust__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.hpv2-trust__item {
  text-align: center; padding: 24px 16px; position: relative;
}
.hpv2-trust__item + .hpv2-trust__item::before {
  content: '';
  position: absolute; left: 0; top: 25%; height: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--cg-dark-border), transparent);
}
.hpv2-trust__number {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900; line-height: 1; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--cg-gold) 0%, var(--cg-gold-light) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  transition: transform .3s;
}
.hpv2-trust__item:hover .hpv2-trust__number { transform: scale(1.06); }
.hpv2-trust__label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cg-text-dim);
}

/* ── 8. Why Choose ────────────────────────────────────────────────── */
.hpv2-why { background: var(--cg-bg); position: relative; overflow: hidden; }
.hpv2-why::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(123,47,255,.04) 0%, transparent 65%);
  pointer-events: none;
}
.hpv2-why__header { text-align: center; margin-bottom: 52px; }
.hpv2-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.hpv2-why-card {
  background: linear-gradient(135deg, var(--cg-bg-card) 0%, rgba(30,42,58,.7) 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--cg-radius-lg);
  padding: 28px 24px;
  display: flex; align-items: flex-start; gap: 20px;
  transition: border-color var(--cg-trans), box-shadow var(--cg-trans), transform var(--cg-trans);
  position: relative; overflow: hidden;
}
.hpv2-why-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--cg-gold-shine);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--cg-ease);
}
.hpv2-why-card:hover { border-color: rgba(0,212,255,.2); box-shadow: var(--cg-shadow-neon); transform: translateY(-4px); }
.hpv2-why-card:hover::before { transform: scaleX(1); }

.hpv2-why-card__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--cg-neon); flex-shrink: 0;
  transition: background var(--cg-trans), box-shadow var(--cg-trans);
}
.hpv2-why-card:hover .hpv2-why-card__icon { background: rgba(0,212,255,.15); box-shadow: 0 0 20px rgba(0,212,255,.25); }
.hpv2-why-card__icon svg { width: 26px; height: 26px; }
.hpv2-why-card__title { font-size: .95rem; font-weight: 700; color: var(--cg-text); margin: 0 0 6px; }
.hpv2-why-card__text  { font-size: .83rem; color: var(--cg-text-dim); line-height: 1.65; margin: 0; }

/* ── Where Are You Playing From ── */
.hpv2-region-header   { text-align: center; margin-bottom: 32px; }
.hpv2-region-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--cg-gold);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.hpv2-region-subtitle {
  font-size: .95rem;
  color: var(--cg-text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

.hpv2-region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.hpv2-region-card {
  position: relative;
  display: block;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(212,175,55,.15);
  transition: transform var(--cg-trans), border-color var(--cg-trans);
}
.hpv2-region-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,25,35,.88) 0%, rgba(15,25,35,.55) 100%);
}
.hpv2-region-card:hover { transform: translateY(-3px); border-color: rgba(212,175,55,.5); }

.hpv2-region-card--full { grid-column: 1 / -1; height: 120px; }

.hpv2-region-card__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 20px;
}
.hpv2-region-card__flag { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.hpv2-region-card__name { font-size: 17px; font-weight: 700; color: #fff; }
.hpv2-region-card__cta  { font-size: 12px; color: var(--cg-gold); margin-top: 4px; }

/* ── Top Casinos Table ── */
.hpv2-toplist-header   { text-align: center; margin-bottom: 32px; }
.hpv2-toplist-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--cg-gold);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.hpv2-toplist-subtitle {
  font-size: .95rem;
  color: var(--cg-text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

.hpv2-toplist-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--cg-radius-lg);
  overflow: hidden;
}

.hpv2-toplist-row {
  display: grid;
  grid-template-columns: 2fr .8fr 1.1fr 1.1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--cg-bg-card);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--cg-trans);
}
.hpv2-toplist-row:last-child { border-bottom: none; }
.hpv2-toplist-row:hover { background: rgba(255,255,255,.03); }

.hpv2-toplist-col--casino { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hpv2-toplist-logo {
  width: 44px; height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
  padding: 4px;
  flex-shrink: 0;
}
.hpv2-toplist-name {
  font-size: .95rem; font-weight: 700; color: var(--cg-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hpv2-toplist-col--rating, .hpv2-toplist-col--bonus, .hpv2-toplist-col--payout {
  font-size: .85rem; color: var(--cg-text-dim);
}
.hpv2-toplist-col--bonus, .hpv2-toplist-col--payout { color: var(--cg-text); font-weight: 600; }

.hpv2-toplist-col--cta { justify-self: end; }

.hpv2-toplist-viewall { text-align: center; margin-top: 28px; }
.hpv2-toplist-viewall-link { color: var(--cg-gold); font-weight: 700; font-size: .9rem; text-decoration: none; }
.hpv2-toplist-viewall-link:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .hpv2-toplist-row { grid-template-columns: 1fr; row-gap: 10px; }
  .hpv2-toplist-col--rating,
  .hpv2-toplist-col--bonus,
  .hpv2-toplist-col--payout {
    display: flex; justify-content: space-between;
  }
  .hpv2-toplist-col--rating::before  { content: 'Rating';        color: var(--cg-text-dim); font-weight: 600; }
  .hpv2-toplist-col--bonus::before   { content: 'Welcome Bonus'; color: var(--cg-text-dim); font-weight: 600; }
  .hpv2-toplist-col--payout::before  { content: 'Payout Speed';  color: var(--cg-text-dim); font-weight: 600; }
  .hpv2-toplist-col--cta { justify-self: stretch; }
  .hpv2-toplist-col--cta .hpv2-btn { display: block; text-align: center; }
}

/* ── How We Review ── */
.hpv2-review-method-header   { text-align: center; margin-bottom: 32px; }
.hpv2-review-method-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--cg-gold);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.hpv2-review-method-subtitle {
  font-size: .95rem;
  color: var(--cg-text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

.hpv2-review-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hpv2-review-method-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 28px 24px;
}
.hpv2-review-method-card__number {
  font-size: 2rem;
  font-weight: 900;
  color: var(--cg-gold);
  line-height: 1;
  margin-bottom: 14px;
}
.hpv2-review-method-card__title { font-size: .95rem; font-weight: 700; color: var(--cg-text); margin: 0 0 8px; }
.hpv2-review-method-card__text  { font-size: .83rem; color: var(--cg-text-dim); line-height: 1.65; margin: 0; }

.hpv2-review-method-cta { text-align: center; margin-top: 36px; }

@media (max-width: 900px) {
  .hpv2-review-method-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hpv2-review-method-grid { grid-template-columns: 1fr; }
}

/* ── 9. Top Casinos ───────────────────────────────────────────────── */
.hpv2-casinos { background: var(--cg-bg-alt); }
.hpv2-casinos__header { text-align: center; margin-bottom: 48px; }

.hpv2-casinos__track-wrap { position: relative; }
.hpv2-casinos__track-wrap::before,
.hpv2-casinos__track-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 32px;
  width: 72px; z-index: 2; pointer-events: none;
}
.hpv2-casinos__track-wrap::before { left: 0; background: linear-gradient(90deg, var(--cg-bg-alt), transparent); }
.hpv2-casinos__track-wrap::after  { right: 0; background: linear-gradient(270deg, var(--cg-bg-alt), transparent); }

.hpv2-casinos__track {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px 2px 28px;
  -ms-overflow-style: none; scrollbar-width: none;
  cursor: grab;
}
.hpv2-casinos__track:active { cursor: grabbing; }
.hpv2-casinos__track::-webkit-scrollbar { display: none; }

/* Carousel controls */
.hpv2-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.hpv2-carousel-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.32); background: rgba(212,175,55,.07);
  color: var(--cg-gold); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--cg-trans); flex-shrink: 0;
}
.hpv2-carousel-btn:hover { background: var(--cg-gold-shine); color: #0f0920; border-color: transparent; box-shadow: 0 0 16px rgba(212,175,55,.35); }
.hpv2-carousel-btn svg { width: 18px; height: 18px; }

.hpv2-casinos__dots { display: flex; gap: 8px; align-items: center; }
.hpv2-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: none; cursor: pointer;
  transition: var(--cg-trans); padding: 0;
}
.hpv2-carousel-dot.active { background: var(--cg-gold); width: 24px; border-radius: 4px; }
.hpv2-carousel-dot:hover { background: rgba(212,175,55,.5); }

/* Casino cards */
.hpv2-casino-card {
  flex: 0 0 288px; scroll-snap-align: start;
  background: linear-gradient(145deg, var(--cg-bg-card) 0%, rgba(22,32,48,.9) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--cg-radius-lg);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--cg-trans), box-shadow var(--cg-trans), transform var(--cg-trans);
  position: relative; overflow: hidden;
}
.hpv2-casino-card::after {
  content: '';
  position: absolute; inset: -1px; border-radius: var(--cg-radius-lg);
  border: 2px solid var(--cg-neon);
  opacity: 0; transition: opacity var(--cg-trans); pointer-events: none;
}
.hpv2-casino-card:hover { border-color: transparent; box-shadow: var(--cg-shadow-neon); transform: translateY(-5px); }
.hpv2-casino-card:hover::after { opacity: 1; }

/* Logo with white background for visibility */
.hpv2-casino-card__logo {
  width: 100%; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-radius: var(--cg-radius);
  padding: 10px 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hpv2-casino-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.hpv2-casino-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hpv2-casino-card__name { font-size: .95rem; font-weight: 700; color: var(--cg-text); margin: 0; line-height: 1.3; }

.hpv2-casino-card__meta { display: flex; flex-direction: column; flex: 1; }
.hpv2-casino-card__meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.hpv2-casino-card__meta-row:last-child { border-bottom: none; }
.hpv2-casino-card__meta-label { color: var(--cg-text-dim); text-transform: uppercase; font-size: .66rem; letter-spacing: .1em; flex-shrink: 0; }
.hpv2-casino-card__meta-value { color: var(--cg-text); font-size: .82rem; font-weight: 600; text-align: right; max-width: 58%; }

.hpv2-casino-card__actions { display: flex; gap: 8px; margin-top: auto; }

.hpv2-casinos__more { text-align: center; margin-top: 40px; }

/* ── 10. How We Help ──────────────────────────────────────────────── */
.hpv2-help {
  background: var(--cg-bg); position: relative;
}
.hpv2-help::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.04) 0%, transparent 55%);
  pointer-events: none;
}
.hpv2-help__header { text-align: center; margin-bottom: 56px; position: relative; }
.hpv2-help__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }

.hpv2-help-card {
  background: linear-gradient(145deg, var(--cg-bg-card) 0%, rgba(26,36,52,.75) 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--cg-radius-lg);
  padding: 40px 28px 36px;
  text-align: center; position: relative; overflow: hidden;
  transition: transform var(--cg-trans), box-shadow var(--cg-trans), border-color var(--cg-trans);
}
.hpv2-help-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--cg-gold-shine);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--cg-ease);
}
.hpv2-help-card:hover { transform: translateY(-10px); border-color: rgba(212,175,55,.28); box-shadow: 0 28px 60px rgba(0,0,0,.5); }
.hpv2-help-card:hover::after { transform: scaleX(1); }

.hpv2-help-card__icon {
  width: 84px; height: 84px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(212,175,55,.18), rgba(212,175,55,.05));
  border: 1px solid rgba(212,175,55,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--cg-gold);
  animation: hpv2IconFloat 4s ease-in-out infinite;
  transition: box-shadow var(--cg-trans);
}
.hpv2-help-card:nth-child(2) .hpv2-help-card__icon { animation-delay: -1.3s; }
.hpv2-help-card:nth-child(3) .hpv2-help-card__icon { animation-delay: -2.6s; }
.hpv2-help-card:hover .hpv2-help-card__icon { box-shadow: 0 0 32px rgba(212,175,55,.4); }
.hpv2-help-card__icon svg { width: 36px; height: 36px; }
.hpv2-help-card__title { font-size: 1.1rem; font-weight: 700; color: var(--cg-text); margin: 0 0 12px; }
.hpv2-help-card__text  { font-size: .88rem; color: var(--cg-text-dim); line-height: 1.78; margin: 0; }

/* ── 11. Games ────────────────────────────────────────────────────── */
.hpv2-games {
  background: linear-gradient(180deg, var(--cg-bg-alt) 0%, rgba(15,30,50,.98) 100%);
  position: relative;
}
.hpv2-games__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .045; mix-blend-mode: luminosity;
}
.hpv2-games__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--cg-bg-alt) 0%, transparent 30%), linear-gradient(180deg, var(--cg-bg-alt) 0%, transparent 30%);
}
.hpv2-games__header { text-align: center; margin-bottom: 48px; position: relative; z-index: 1; }
.hpv2-games__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; position: relative; z-index: 1; }

.hpv2-game-card {
  background: linear-gradient(145deg, var(--cg-bg-card) 0%, rgba(18,28,44,.9) 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--cg-radius-lg); overflow: hidden;
  transition: transform var(--cg-trans), box-shadow var(--cg-trans);
  position: relative;
}
.hpv2-game-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(0,212,255,.25), var(--cg-shadow-neon); }
.hpv2-game-card__img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cg-bg-card); position: relative; }
.hpv2-game-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--cg-ease); }
.hpv2-game-card:hover .hpv2-game-card__img img { transform: scale(1.08); }
.hpv2-game-card__img::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, transparent, rgba(18,28,44,.85));
  pointer-events: none;
}
.hpv2-game-card__body { padding: 18px 18px 20px; }
.hpv2-game-card__name { font-size: .95rem; font-weight: 700; color: var(--cg-text); margin: 0 0 8px; }
.hpv2-game-card__meta { font-size: .78rem; color: var(--cg-text-dim); line-height: 1.6; margin-bottom: 14px; }
.hpv2-game-card__neon {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cg-neon) 50%, transparent 100%);
  opacity: 0; transition: opacity .4s;
}
.hpv2-game-card:hover .hpv2-game-card__neon { opacity: 1; }

/* ── 12. Bonuses ──────────────────────────────────────────────────── */
.hpv2-bonuses {
  background: var(--cg-bg); position: relative; overflow: hidden;
}
.hpv2-bonuses::before {
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.06) 0%, transparent 65%);
  pointer-events: none;
}
.hpv2-bonuses__header { text-align: center; margin-bottom: 48px; position: relative; }
.hpv2-bonuses__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.hpv2-bonus-card {
  background: linear-gradient(145deg, var(--cg-bg-card) 0%, rgba(22,32,48,.8) 100%);
  border: 1px solid var(--cg-dark-border);
  border-radius: var(--cg-radius-lg); overflow: hidden; position: relative;
  transition: transform var(--cg-trans), box-shadow var(--cg-trans), border-color var(--cg-trans);
}
.hpv2-bonus-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(108deg, transparent 35%, rgba(212,175,55,.06) 45%, rgba(255,255,255,.08) 50%, rgba(212,175,55,.06) 55%, transparent 65%);
  transform: translateX(-100%); transition: transform .65s ease; pointer-events: none; z-index: 1;
}
.hpv2-bonus-card:hover { transform: translateY(-5px); box-shadow: var(--cg-shadow-gold); border-color: rgba(212,175,55,.38); }
.hpv2-bonus-card:hover::after { transform: translateX(100%); }
.hpv2-bonus-card__accent { height: 3px; background: var(--cg-gold-shine); }
.hpv2-bonus-card__header { padding: 18px 20px 10px; display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }

.hpv2-bonus-card__logo {
  width: 64px; height: 46px;
  border-radius: var(--cg-radius); overflow: hidden;
  background: #ffffff;
  flex-shrink: 0; border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hpv2-bonus-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.hpv2-bonus-card__casino-name { font-size: .9rem; font-weight: 700; color: var(--cg-text); margin: 0 0 4px; line-height: 1.2; }
.hpv2-bonus-card__body { padding: 12px 20px 20px; position: relative; z-index: 2; }
.hpv2-bonus-card__value {
  font-size: 1.5rem; font-weight: 900;
  background: var(--cg-gold-shine);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 6px; line-height: 1.2;
}
.hpv2-bonus-card__desc { font-size: .8rem; color: var(--cg-text-dim); margin-bottom: 16px; line-height: 1.58; }
.hpv2-bonuses__more { text-align: center; margin-top: 40px; }

/* ── 13. News Section ─────────────────────────────────────────────── */
.hpv2-news { background: var(--cg-bg-alt); position: relative; }
.hpv2-news::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(0,212,255,.03) 0%, transparent 60%);
  pointer-events: none;
}
.hpv2-news__header { text-align: center; margin-bottom: 48px; }
.hpv2-news__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.hpv2-news-card {
  background: linear-gradient(145deg, var(--cg-bg-card) 0%, rgba(22,32,48,.9) 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--cg-radius-lg); overflow: hidden;
  transition: transform var(--cg-trans), box-shadow var(--cg-trans);
  display: flex; flex-direction: column;
}
.hpv2-news-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(212,175,55,.2), var(--cg-shadow-gold); }

.hpv2-news-card__img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cg-bg-card); position: relative; }
.hpv2-news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--cg-ease); }
.hpv2-news-card:hover .hpv2-news-card__img img { transform: scale(1.05); }
.hpv2-news-card__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cg-text-dim); font-size: .75rem;
  background: linear-gradient(135deg, var(--cg-bg-card), rgba(212,175,55,.04));
  aspect-ratio: 16/9;
}

.hpv2-news-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.hpv2-news-card__date { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cg-gold); margin-bottom: 8px; }
.hpv2-news-card__title { font-size: .95rem; font-weight: 700; color: var(--cg-text); margin: 0 0 10px; line-height: 1.4; }
.hpv2-news-card__title a { color: var(--cg-text); }
.hpv2-news-card__title a:hover { color: var(--cg-gold); }
.hpv2-news-card__excerpt { font-size: .83rem; color: var(--cg-text-dim); line-height: 1.65; flex: 1; margin-bottom: 16px; }
.hpv2-news__more { text-align: center; margin-top: 40px; }

/* ── 14. Editor Content ───────────────────────────────────────────── */
.hpv2-content { background: var(--cg-bg); padding: var(--cg-section-gap) 0; }

/* Section heading */
.hpv2-content__header { text-align: center; margin-bottom: 48px; }
.hpv2-content__title-line {
  width: 64px; height: 3px; margin: 14px auto 0;
  background: var(--cg-gold-shine); border-radius: 2px;
}

.hpv2-content__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  color: rgba(255,255,255,.9); font-size: .93rem; line-height: 1.82;
}

/* Base typography */
.hpv2-content__inner h1, .hpv2-content__inner h2,
.hpv2-content__inner h3, .hpv2-content__inner h4 {
  color: var(--cg-text); margin-top: 1.6em; margin-bottom: .55em; font-weight: 700;
}
.hpv2-content__inner h2 { font-size: 1.45rem; }
.hpv2-content__inner h3 { font-size: 1.18rem; }
/* h4 had no explicit size here, so it silently depended on main.css's
   legacy h4{font-size:1.125rem} fallback — happens to already render
   fine (18px bold gold vs 14.88px regular white body text, verified on
   real content), but leaves this shared scale incomplete and fragile to
   an unrelated file. Codifying the same 1.125rem value here: zero visual
   change, just makes it self-contained like h2/h3 above. */
.hpv2-content__inner h4 { font-size: 1.125rem; }
.hpv2-content__inner > p { color: rgba(255,255,255,.9); margin-bottom: 1em; }
.hpv2-content__inner a { color: var(--cg-gold); text-decoration: underline; text-decoration-color: rgba(212,175,55,.3); text-underline-offset: 3px; }
.hpv2-content__inner a:hover { color: var(--cg-gold-light); text-decoration-color: var(--cg-gold); }
.hpv2-content__inner ul, .hpv2-content__inner ol { padding-left: 1.5em; }
.hpv2-content__inner li { margin-bottom: .4em; color: rgba(255,255,255,.9); }

/* Embedded images — many older posts hardcode a fixed pixel width/height
   attribute (e.g. width="525"), which would overflow a narrow viewport
   without this. figcaption covers the "Image Credit: ..." captions used
   throughout the blog/gamesguide long-form content. */
.hpv2-content__inner img { max-width: 100%; height: auto; border-radius: var(--cg-radius); }
.hpv2-content__inner .wp-block-image,
.hpv2-content__inner figure { margin: 24px auto; text-align: center; }
.hpv2-content__inner figcaption {
  font-size: .8rem;
  font-style: italic;
  color: var(--cg-text-dim);
  margin-top: 8px;
}

/* ── Gutenberg column cards (glassmorphism) ─── */
.hpv2-content__inner .wp-block-columns {
  gap: 28px !important;
  margin-bottom: 0 !important;
  align-items: stretch;
}

.hpv2-content__inner .wp-block-column {
  background: rgba(30, 42, 58, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid rgba(201,142,53,.5);
  border-radius: var(--cg-radius-lg);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  transition: transform var(--cg-trans), box-shadow var(--cg-trans), border-color var(--cg-trans);
  margin: 0 !important;
}

.hpv2-content__inner .wp-block-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.28);
  border-left-color: var(--cg-gold);
}

/* Card headings — gold, larger */
.hpv2-content__inner .wp-block-column h2,
.hpv2-content__inner .wp-block-column h3,
.hpv2-content__inner .wp-block-column h4 {
  color: #C98E35 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Card paragraph text — clearly readable, max-height clamp */
.hpv2-content__inner .wp-block-column > p,
.hpv2-content__inner .wp-block-column .wp-block-paragraph {
  color: rgba(255,255,255,.95) !important;
  font-size: .88rem !important;
  line-height: 1.75 !important;
  max-height: 120px;
  overflow: hidden;
  margin-bottom: 20px !important;
  flex: 1;
}

/* Know More / button links inside columns — gold pill style */
.hpv2-content__inner .wp-block-column .wp-block-button { margin-top: auto; }

.hpv2-content__inner .wp-block-column .wp-block-button__link,
.hpv2-content__inner .wp-block-column .wp-element-button,
.hpv2-content__inner .wp-block-column a.wp-block-button__link {
  background: var(--cg-gold-shine) !important;
  color: #000000 !important;
  border: 2px solid transparent !important;
  border-radius: 50px !important;
  padding: 10px 24px !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 3px 16px rgba(212,175,55,.35) !important;
  transition: background var(--cg-trans), color var(--cg-trans), border-color var(--cg-trans), box-shadow var(--cg-trans), transform var(--cg-trans) !important;
  display: inline-block;
}

.hpv2-content__inner .wp-block-column .wp-block-button__link:hover,
.hpv2-content__inner .wp-block-column .wp-element-button:hover {
  background: transparent !important;
  color: var(--cg-gold) !important;
  border-color: var(--cg-gold) !important;
  box-shadow: 0 0 20px rgba(212,175,55,.3) !important;
  transform: translateY(-2px) !important;
}

/* Nuclear override — force all text visible regardless of block markup.
   Older/legacy post content (e.g. affiliate-network embed widgets) often
   carries its own inline light background-color alongside inline text
   colors — forcing text to white without also darkening those inline
   backgrounds would swap a dark-on-dark problem for an equally broken
   white-on-white one, so any element with an inline background style is
   forced to the same dark card token used elsewhere in this component. */
.hpv2-content__inner * {
  color: #ffffff !important;
}
.hpv2-content__inner [style*="background-color"],
.hpv2-content__inner [style*="background:"] {
  background-color: rgba(30,42,58,.85) !important;
  background: rgba(30,42,58,.85) !important;
}
.hpv2-content__inner h2,
.hpv2-content__inner h3,
.hpv2-content__inner h4,
.hpv2-content__inner strong {
  color: #C98E35 !important;
}
.hpv2-content__inner a.wp-block-button__link,
.hpv2-content__inner .wp-element-button,
.hpv2-content__inner .hpv2-btn--gold {
  color: #000000 !important;
}
.hpv2-content__inner .hpv2-btn--gold:hover {
  color: var(--cg-gold) !important;
}
.hpv2-content__inner .hpv2-btn--outline {
  color: var(--cg-text-dim) !important;
}
.hpv2-content__inner .hpv2-btn--outline:hover {
  color: var(--cg-gold) !important;
}

/* Classic editor fallback — any two-column table or nested divs */
.hpv2-content__inner table { width: 100%; border-collapse: collapse; }
.hpv2-content__inner td {
  background: rgba(30,42,58,.82);
  border-left: 3px solid rgba(201,142,53,.5);
  border-radius: var(--cg-radius);
  padding: 28px 24px;
  vertical-align: top;
  color: rgba(255,255,255,.9);
  transition: transform var(--cg-trans);
}
.hpv2-content__inner td:hover { border-left-color: var(--cg-gold); }
.hpv2-content__inner td h2, .hpv2-content__inner td h3 { color: #C98E35 !important; margin-top: 0 !important; }

/* ── 15. Responsible Gambling ─────────────────────────────────────── */
.hpv2-rg {
  background: linear-gradient(135deg, var(--cg-bg-purple) 0%, #120820 100%);
  border-top: 1px solid rgba(212,175,55,.1);
  border-bottom: 1px solid rgba(212,175,55,.1);
  padding: 56px 0;
}
.hpv2-rg__inner { max-width: 900px; margin: 0 auto; padding: 0 24px; text-align: center; }
.hpv2-rg__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.25);
  border-radius: 50px; padding: 8px 20px; margin-bottom: 20px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cg-gold);
}
.hpv2-rg__title { font-size: 1.3rem; font-weight: 700; color: var(--cg-text); margin-bottom: 12px; }
.hpv2-rg__text { font-size: .88rem; color: var(--cg-text-dim); line-height: 1.78; margin-bottom: 24px; max-width: 680px; margin-left: auto; margin-right: auto; }
.hpv2-rg__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 24px; }
.hpv2-rg__link {
  padding: 8px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 50px;
  color: var(--cg-text-dim); font-size: .78rem; font-weight: 600; transition: var(--cg-trans);
}
.hpv2-rg__link:hover { color: var(--cg-gold); border-color: var(--cg-gold); }
.hpv2-rg__logos { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; opacity: .8; }
.hpv2-rg__logos img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: .65; transition: opacity .2s; }
.hpv2-rg__logos img:hover { opacity: 1; }

/* ── 16. FAQ Accordion ────────────────────────────────────────────── */
.hpv2-faq { background: var(--cg-bg-alt); }
.hpv2-faq__header { text-align: center; margin-bottom: 48px; }
.hpv2-faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.hpv2-faq-item {
  background: linear-gradient(145deg, var(--cg-bg-card) 0%, rgba(22,32,48,.9) 100%);
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--cg-radius); overflow: hidden;
  transition: border-color var(--cg-trans), box-shadow var(--cg-trans);
}
.hpv2-faq-item.open { border-color: rgba(212,175,55,.25); box-shadow: 0 4px 24px rgba(0,0,0,.3); }
.hpv2-faq-question {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; user-select: none;
  background: none; border: none; width: 100%; text-align: left;
  color: var(--cg-text); font-size: .95rem; font-weight: 600; transition: color var(--cg-trans);
}
.hpv2-faq-question:hover { color: var(--cg-gold); }
.hpv2-faq-item.open .hpv2-faq-question { color: var(--cg-gold); }
.hpv2-faq-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.25);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--cg-gold); transition: transform .3s, background .3s;
  font-size: 1rem; line-height: 1;
}
.hpv2-faq-item.open .hpv2-faq-icon { transform: rotate(45deg); background: rgba(212,175,55,.2); }
.hpv2-faq-answer {
  max-height: 0; overflow: hidden;
  /* padding intentionally isn't transitioned: it jumps to its open-state
     value the instant the "open" class is added, so JS reading
     scrollHeight right after that class toggle already sees the real,
     final padding — not a mid-transition value that's short by however
     much padding is still animating in, which was cropping the answer
     by exactly that amount. Only max-height needs to visibly animate. */
  transition: max-height .4s ease;
  padding: 0 24px;
}
.hpv2-faq-answer p { font-size: .88rem; color: var(--cg-text-dim); line-height: 1.78; }
/* max-height is generous rather than removed outright so the open state
   can still transition smoothly; 500px was cropping longer answers
   (e.g. multi-paragraph Terms & Conditions content) — this value is
   comfortably above any realistic FAQ/Terms answer's rendered height. */
.hpv2-faq-item.open .hpv2-faq-answer { max-height: 6000px; padding: 16px 24px 20px; }

/* ── FAQ Section ── */
.hpv2-paa-header   { text-align: center; margin-bottom: 32px; }
.hpv2-paa-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--cg-gold);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
}
.hpv2-paa-subtitle {
  font-size: .95rem;
  color: var(--cg-text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
  text-align: center;
}

.hpv2-paa-list { display: flex; flex-direction: column; gap: 12px; }

.hpv2-paa-item {
  background: var(--cg-bg-card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--cg-radius);
  overflow: hidden;
}

.hpv2-paa-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}

.hpv2-paa-icon {
  color: var(--cg-gold);
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform var(--cg-trans);
}
.hpv2-paa-item.open .hpv2-paa-icon { transform: rotate(45deg); }

.hpv2-paa-answer { max-height: 0; overflow: hidden; transition: max-height .35s var(--cg-ease); }
.hpv2-paa-item.open .hpv2-paa-answer { max-height: 400px; }
.hpv2-paa-answer__inner { padding: 0 22px 20px; }
.hpv2-paa-answer__inner p { margin: 0; font-size: .88rem; color: #8899aa; line-height: 1.7; }

/* ── 17. Footer CTA ───────────────────────────────────────────────── */
.hpv2-footer-cta {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212,175,55,.07) 0%, transparent 65%),
    linear-gradient(180deg, #0f1923 0%, #1a0e2e 100%);
  padding: 88px 24px;
  text-align: center; position: relative; overflow: hidden;
}
.hpv2-footer-cta::before, .hpv2-footer-cta::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.hpv2-footer-cta::before { width: 300px; height: 300px; top: -80px; left: -80px; background: radial-gradient(circle, rgba(212,175,55,.06) 0%, transparent 70%); }
.hpv2-footer-cta::after  { width: 300px; height: 300px; bottom: -80px; right: -80px; background: radial-gradient(circle, rgba(0,212,255,.05) 0%, transparent 70%); }
.hpv2-footer-cta__title { font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 900; color: var(--cg-text); margin: 0 0 18px; letter-spacing: -.02em; position: relative; z-index: 1; }
.hpv2-footer-cta__text { font-size: 1rem; color: var(--cg-text-dim); max-width: 540px; margin: 0 auto 38px; line-height: 1.78; position: relative; z-index: 1; }

/* ── 18. Footer ───────────────────────────────────────────────────── */
footer.hpv2-footer {
  position: relative;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(123,47,255,.08) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 90%, rgba(0,212,255,.05) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(212,175,55,.03) 0%, transparent 60%),
    linear-gradient(180deg, #1a0e2e 0%, #0d1b2a 45%, #090e16 100%);
  border-top: 1px solid rgba(212,175,55,.22);
  color: var(--cg-text-dim);
  font-size: .88rem;
  margin-top: 0;
}

/* Subtle card suit pattern overlay on footer */
footer.hpv2-footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, rgba(212,175,55,.015) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(212,175,55,.015) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(212,175,55,.015) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(212,175,55,.015) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  pointer-events: none; z-index: 0;
}

footer.hpv2-footer > * { position: relative; z-index: 1; }

/* Featured Casinos bar */
.hpv2-footer__casinos { padding: 44px 0; border-bottom: 1px solid rgba(212,175,55,.12); text-align: center; }
.hpv2-footer__casinos-title { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cg-gold); margin-bottom: 22px; }
.hpv2-footer__casino-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.hpv2-footer__casino-logos a {
  display: block; padding: 10px 14px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(212,175,55,.25); border-radius: var(--cg-radius);
  transition: border-color var(--cg-trans), transform var(--cg-trans), box-shadow var(--cg-trans);
}
.hpv2-footer__casino-logos a:hover { border-color: var(--cg-gold); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 12px rgba(212,175,55,.2); }
.hpv2-footer__casino-logos img { height: 38px; width: auto; max-width: 120px; object-fit: contain; display: block; }

/* Newsletter glassmorphism card */
.hpv2-footer__middle { padding: 52px 0; border-bottom: 1px solid rgba(212,175,55,.1); }
.hpv2-footer__newsletter-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(212,175,55,.18);
  border-radius: var(--cg-radius-lg);
  padding: 36px 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hpv2-footer__newsletter h3 { font-size: 1.05rem; font-weight: 700; color: var(--cg-text); margin-bottom: 8px; }
.hpv2-footer__newsletter p  { font-size: .83rem; color: var(--cg-text-dim); margin-bottom: 18px; line-height: 1.65; }
.hpv2-footer__newsletter .af-textWrap { display: flex; }
.hpv2-footer__newsletter input[type="email"] {
  flex: 1;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-right: none !important;
  color: var(--cg-text) !important;
  padding: 11px 16px !important;
  border-radius: var(--cg-radius) 0 0 var(--cg-radius) !important;
  font-size: .85rem !important;
  outline: none !important;
  transition: border-color .2s !important;
}
.hpv2-footer__newsletter input[type="email"]:focus { border-color: rgba(212,175,55,.4) !important; }
.hpv2-footer__newsletter input[type="email"]::placeholder { color: var(--cg-text-dim) !important; }
.hpv2-footer__newsletter .input-group-append { display: flex; }
.hpv2-footer__newsletter input[type="submit"] {
  background: var(--cg-gold-shine) !important;
  color: #0f0920 !important; border: none !important;
  padding: 11px 22px !important; font-weight: 700 !important;
  font-size: .82rem !important;
  border-radius: 0 var(--cg-radius) var(--cg-radius) 0 !important;
  cursor: pointer !important; letter-spacing: .04em !important;
  text-transform: uppercase !important; transition: opacity .2s !important;
}
.hpv2-footer__newsletter input[type="submit"]:hover { opacity: .88 !important; }
.hpv2-footer__newsletter .privacy-note { font-size: .72rem; color: var(--cg-text-dim); margin-top: 10px; opacity: .65; }

.hpv2-footer__community { text-align: center; }
.hpv2-footer__community h4 { font-size: .88rem; font-weight: 700; color: var(--cg-text); margin-bottom: 14px; }
.hpv2-footer__community #FacebookGroup { filter: saturate(0) brightness(.7); transition: filter .3s; }
.hpv2-footer__community #FacebookGroup:hover { filter: none; }

/* Links columns */
.hpv2-footer__links { padding: 52px 0; border-bottom: 1px solid rgba(212,175,55,.1); }
.hpv2-footer__links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.hpv2-footer__col-title { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cg-gold); margin-bottom: 18px; }
footer.hpv2-footer .nav.flex-column .nav-link,
footer.hpv2-footer .nav.flex-column a {
  color: var(--cg-text-dim) !important; font-size: .83rem; padding: 4px 0 !important;
  transition: color .2s, padding-left .2s; display: block;
}
footer.hpv2-footer .nav.flex-column .nav-link:hover,
footer.hpv2-footer .nav.flex-column a:hover { color: var(--cg-gold) !important; padding-left: 6px !important; }

/* Social icons neon hover */
.hpv2-footer__social-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.hpv2-footer__social-icons a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--cg-text-dim); font-size: 1rem;
  transition: var(--cg-trans); background: rgba(255,255,255,.04);
}
.hpv2-footer__social-icons a:hover { color: var(--cg-neon); border-color: var(--cg-neon); background: rgba(0,212,255,.08); box-shadow: 0 0 16px rgba(0,212,255,.2); }

/* Trust badges */
.hpv2-footer__badges { padding: 32px 0; border-bottom: 1px solid rgba(212,175,55,.08); text-align: center; }
.hpv2-footer__badges-title { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-text-dim); margin-bottom: 16px; }
.hpv2-footer__badges-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.hpv2-footer__badges-row img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: .55; transition: opacity .2s; }
.hpv2-footer__badges-row img:hover { opacity: .9; }

/* Affiliate disclosure */
.hpv2-footer__disclosure { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.03); text-align: center; }
.hpv2-footer__disclosure p { font-size: .72rem; color: var(--cg-text-dim); opacity: .55; line-height: 1.65; max-width: 800px; margin: 0 auto; }

/* Copyright */
.hpv2-footer__bottom { padding: 22px 0; text-align: center; }
.hpv2-footer__copyright { font-size: .78rem; color: var(--cg-text-dim); opacity: .5; }
.hpv2-footer__copyright span { color: var(--cg-gold); opacity: 1; }

/* ── 19. Entrance Animations ──────────────────────────────────────── */
[data-animate] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s var(--cg-ease), transform .7s var(--cg-ease);
}
[data-animate].hpv2-visible { opacity: 1; transform: translateY(0); }
[data-animate][data-delay="1"] { transition-delay: .1s; }
[data-animate][data-delay="2"] { transition-delay: .2s; }
[data-animate][data-delay="3"] { transition-delay: .3s; }
[data-animate][data-delay="4"] { transition-delay: .4s; }

/* ── 20. Keyframes ────────────────────────────────────────────────── */
@keyframes hpv2ParticleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  15%  { opacity: .75; }
  75%  { opacity: .3; }
  100% { opacity: 0; transform: translateY(-120vh) scale(1.3); }
}
@keyframes hpv2StackFloat {
  0%, 100% { transform: translateY(-50%) rotate(-8deg); filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(212,175,55,.18)); }
  50%       { transform: translateY(calc(-50% - 20px)) rotate(-3deg); filter: drop-shadow(0 12px 28px rgba(0,0,0,.5)) drop-shadow(0 0 28px rgba(212,175,55,.35)); }
}
@keyframes hpv2ChipSmFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-16px) rotate(12deg); }
}
@keyframes hpv2CoinFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}
@keyframes hpv2Card1Float {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50%       { transform: rotate(-10deg) translateY(-14px); }
}
@keyframes hpv2Card2Float {
  0%, 100% { transform: rotate(9deg) translateY(0); }
  50%       { transform: rotate(6deg) translateY(-10px); }
}
@keyframes hpv2DiceFloat {
  0%, 100% { transform: rotate(18deg) translateY(0); }
  50%       { transform: rotate(24deg) translateY(-12px); }
}
@keyframes hpv2HeroShimmer {
  0%   { left: -80%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
@keyframes hpv2FadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hpv2SlotFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); filter: drop-shadow(0 0 10px rgba(212,175,55,.28)) drop-shadow(0 4px 16px rgba(0,0,0,.5)); }
  50%       { transform: translateY(-16px) rotate(1.5deg); filter: drop-shadow(0 0 22px rgba(212,175,55,.55)) drop-shadow(0 4px 16px rgba(0,0,0,.5)); }
}
@keyframes hpv2DiamondPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 10px rgba(0,212,255,.42)); }
  50%       { transform: translateY(-11px) scale(1.06); filter: drop-shadow(0 0 22px rgba(0,212,255,.72)); }
}
@keyframes hpv2ScrollBounce {
  0%, 100% { transform: scaleY(.6); opacity: .3; }
  50%       { transform: scaleY(1); opacity: 1; }
}
@keyframes hpv2IconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── 21. Responsive ───────────────────────────────────────────────── */
@media (max-width: 479px) {
  :root { --cg-section-gap: 56px; }
  .hpv2-hero__coin,
  .hpv2-hero__pcard,
  .hpv2-hero__chip-sm,
  .hpv2-hero__slot,
  .hpv2-hero__diamond { display: none; }
  .hpv2-trust__number { font-size: 1.9rem; }
  .hpv2-trust__label  { font-size: .62rem; }
  .hpv2-trust__item   { padding: 14px 6px; }
  .hpv2-games__grid, .hpv2-bonuses__grid, .hpv2-why__grid { grid-template-columns: 1fr; }
  .hpv2-btn--gold, .hpv2-btn--outline { width: 100%; justify-content: center; }
  .hpv2-footer__links-grid { grid-template-columns: 1fr 1fr; }
  .hpv2-footer__newsletter-card { padding: 24px 18px; }
}

@media (max-width: 767px) {
  #main-nav.hpv2-header #btnNav,
  #main-nav.hpv2-header .btn-nav { display: flex; }
  #main-nav.hpv2-header .navbar-collapse.collapse:not(.show) { display: none; }
  .hpv2-footer__links-grid { grid-template-columns: 1fr 1fr; }
  .hpv2-why__grid { grid-template-columns: 1fr; }
  .hpv2-footer__middle .row { flex-direction: column; gap: 32px; }
  .hpv2-hero__dice,
  .hpv2-hero__diamond { display: none; }
  .hpv2-hero__slot { width: 66px; right: 1%; }

  /* Footer nav links: 4px vertical padding computed to a ~28px tap
     target (measured), under the ~44px minimum recommended for touch.
     Desktop uses mouse clicks, not taps, so left as-is there. */
  footer.hpv2-footer .nav.flex-column .nav-link,
  footer.hpv2-footer .nav.flex-column a { padding: 12px 0 !important; }

  /* .hpv2-content__inner sets an explicit font-size for h2/h3 but not
     h1, so any raw <h1> inside body content (e.g. some reviews'
     wpcf-reviews-shorttext meta field embeds its own h1) falls through
     to main.css's legacy default (up to 3.375rem) — a second,
     oversized heading eating most of a mobile screen. Desktop already
     renders a differently-sized (also legacy) fallback and is
     untouched here. */
  .hpv2-content__inner h1 { font-size: 1.6rem; }

  /* Hero forced min-height: calc(100vh - 74px) at every breakpoint, so on
     a short phone viewport with little content it left ~131px of empty
     space above AND below the title/CTA. Let the section size to its
     content instead, with just enough bottom padding reserved for the
     absolutely-positioned .hpv2-hero__scroll indicator. */
  .hpv2-hero { min-height: auto; padding: 44px 0 116px; }

  /* .hpv2-hero__scroll also carries `animation: hpv2FadeUp ... both`, and
     hpv2FadeUp's end state sets `transform: translateY(0)` — CSS
     animations replace the whole `transform` property, so the static
     `transform: translateX(-50%)` centering got silently overwritten
     once the animation finished, shifting the text right by half its
     own width. `translate` is an independent CSS property from
     `transform` and composes with it instead of being overwritten. */
  .hpv2-hero__scroll { translate: -50% 0; }

  /* "Explore Top Casinos" + icon didn't fit the button's available inner
     width at the base .06em letter-spacing, wrapping to 2 lines. Tighten
     tracking and trim horizontal padding (font-size untouched) to fit
     one line at essentially the same overall button width. */
  .hpv2-hero__cta {
    letter-spacing: .01em;
    padding: 17px 36px;
    white-space: nowrap;
    gap: 8px;
  }
}

@media (min-width: 480px) { .hpv2-casino-card { flex: 0 0 300px; } }
@media (min-width: 640px) {
  .hpv2-why__grid { grid-template-columns: repeat(2, 1fr); }
  .hpv2-games__grid, .hpv2-bonuses__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) { .hpv2-casino-card { flex: 0 0 310px; } }

/* ── Best Online Casinos — mobile fixes (<768px) ─────────────────── */
@media (max-width: 767px) {
  /* Kill the edge fade overlays — they read as ugly shadows on a single-card view */
  .hpv2-casinos__track-wrap::before,
  .hpv2-casinos__track-wrap::after {
    display: none;
  }

  /* One full-width card per view, no partial peek on the sides */
  .hpv2-casinos__track {
    gap: 16px;
    padding: 8px 0 24px;
  }
  .hpv2-casino-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 22px 18px;
  }

  /* Flat, bottom-only shadow instead of the all-around neon glow (looks bad
     bleeding onto neighbouring cards, and mobile browsers can stick :hover
     after a tap). No hover lift/tilt on touch either. */
  .hpv2-casino-card,
  .hpv2-casino-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    border-color: rgba(255, 255, 255, .08);
    transform: none;
  }
  .hpv2-casino-card:hover::after {
    opacity: 0;
  }

  /* Full-white, high-contrast text on every field */
  .hpv2-casino-card__name,
  .hpv2-casino-card__meta-label,
  .hpv2-casino-card__meta-value {
    color: #ffffff;
  }
  .hpv2-casino-card__meta-label { opacity: .85; }

  /* Keep both CTAs on one row and fully visible. The <480px rule that forces
     .hpv2-btn--gold/.hpv2-btn--outline to width:100% (for stacked hero CTAs)
     otherwise leaks in here, giving Review's auto flex-basis ~100% of the row
     and squeezing Play Now down to a sliver — override it back to auto. */
  .hpv2-casino-card__actions {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .hpv2-casino-card__actions .hpv2-btn {
    width: auto;
    padding: 11px 14px;
    white-space: nowrap;
  }
}
@media (min-width: 1024px) {
  .hpv2-hero__chipstack { display: block; }
  .hpv2-casino-card { flex: 0 0 320px; }
  .hpv2-games__grid   { grid-template-columns: repeat(4, 1fr); }
  .hpv2-bonuses__grid { grid-template-columns: repeat(4, 1fr); }
  .hpv2-footer__links-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) { .hpv2-casino-card { flex: 0 0 340px; } }

/* ── Bootstrap .card cards inside About Us / editor content ──────── */
/* These are classic Bootstrap 4 cards, NOT Gutenberg blocks */

.hpv2-content__inner .row { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; }
.hpv2-content__inner .col-md-6 { flex: 1 1 300px; padding: 0; max-width: 100%; }

.hpv2-content__inner .card {
  background: rgba(30,42,58,.85) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 3px solid rgba(201,142,53,.55) !important;
  border-radius: 14px !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  height: 100%;
}
.hpv2-content__inner .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.3) !important;
  border-left-color: #d4af37 !important;
}

.hpv2-content__inner .card-body { padding: 28px 24px !important; display: flex; flex-direction: column; }

body .hpv2-content__inner .card h3,
body .hpv2-content__inner .card h2,
body .hpv2-content__inner .card h4 {
  color: #C98E35 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  opacity: 1 !important;
}

body .hpv2-content__inner .card p,
body .hpv2-content__inner .card .card-body p,
body .hpv2-content__inner .card p.mb-2 {
  color: #ffffff !important;
  opacity: 1 !important;
  font-size: .88rem !important;
  line-height: 1.75 !important;
  flex: 1;
  margin-bottom: 20px !important;
}

body .hpv2-content__inner .card .btn,
body .hpv2-content__inner .card .btn-outline-secondary,
body .hpv2-content__inner .card a.btn {
  background: linear-gradient(135deg, #d4af37 0%, #f5e066 40%, #d4af37 70%, #9a7b1a 100%) !important;
  color: #000000 !important;
  border: 2px solid transparent !important;
  border-radius: 50px !important;
  padding: 9px 22px !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 3px 16px rgba(212,175,55,.35) !important;
  transition: all .3s ease !important;
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
}
body .hpv2-content__inner .card .btn:hover,
body .hpv2-content__inner .card .btn-outline-secondary:hover {
  background: transparent !important;
  color: #d4af37 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 20px rgba(212,175,55,.3) !important;
  transform: translateY(-2px) !important;
}