/* ================================================================
   TOP ONTARIO SPORTSBOOKS — styles.css  (Premium UI v2)
   Mobile-first · Dark navy/green theme · Smooth animations
================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@700;800;900&display=swap');

/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
---------------------------------------------------------------- */
:root {
  /* Brand colours */
  --color-primary:       #0a3523;
  --color-primary-mid:   #145c38;
  --color-primary-light: #1a7a4a;
  --color-accent:        #22c55e;
  --color-accent-hover:  #16a34a;
  --color-accent-glow:   rgba(34,197,94,.35);

  /* Dark surfaces */
  --color-navy:          #060f1e;
  --color-navy-mid:      #0f1f35;
  --color-navy-light:    #1a2f4a;

  /* Light surfaces */
  --color-bg:            #f0f4f8;
  --color-surface:       #ffffff;
  --color-surface-2:     #f8fafc;
  --color-border:        #e2e8f0;
  --color-border-light:  #f1f5f9;

  /* Text */
  --color-text:          #0f172a;
  --color-text-light:    #475569;
  --color-text-muted:    #94a3b8;

  /* Specials */
  --color-gold:          #f59e0b;
  --color-gold-light:    #fde68a;
  --color-star:          #f59e0b;
  --color-silver:        #94a3b8;
  --color-bronze:        #b97a3b;

  /* Gradients */
  --gradient-hero:       linear-gradient(135deg,#060f1e 0%,#0a3523 55%,#0f1a30 100%);
  --gradient-card-top:   linear-gradient(135deg,#0a3523 0%,#145c38 100%);
  --gradient-accent:     linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
  --gradient-gold:       linear-gradient(135deg,#f59e0b 0%,#d97706 100%);

  /* Typography */
  --font-base:    'Inter','Segoe UI',system-ui,sans-serif;
  --font-display: 'Plus Jakarta Sans','Inter',sans-serif;

  /* Spacing */
  --space-xs:  .25rem;
  --space-sm:  .5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Shadows */
  --shadow-sm:        0 1px 3px rgba(0,0,0,.08);
  --shadow-md:        0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:        0 12px 36px rgba(0,0,0,.14);
  --shadow-card:      0 2px 12px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.06);
  --shadow-card-hover:0 16px 48px rgba(0,0,0,.14),0 4px 12px rgba(34,197,94,.12);
  --shadow-glow:      0 0 0 3px var(--color-accent-glow);

  /* Border-radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 50px;

  /* Transitions */
  --transition:       .22s ease;
  --transition-slow:  .4s ease;

  /* Layout */
  --max-width:          1120px;
  --sticky-cta-height:  58px;
}

/* ----------------------------------------------------------------
   2. RESET & BASE
---------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }

body {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  padding-bottom: var(--sticky-cta-height);
  overflow-x: hidden;
}

a { color:var(--color-primary-mid); text-decoration:none; }
a:hover { text-decoration:underline; color:var(--color-accent-hover); }

ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4 { line-height:1.2; font-weight:700; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.hidden { display:none !important; }

.container {
  width:100%; max-width:var(--max-width);
  margin-inline:auto; padding-inline:var(--space-md);
}

/* ----------------------------------------------------------------
   3. SCROLL-REVEAL ANIMATIONS
---------------------------------------------------------------- */
.reveal {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }

/* ----------------------------------------------------------------
   4. COOKIE BANNER
---------------------------------------------------------------- */
.cookie-banner {
  position:fixed; bottom:var(--sticky-cta-height);
  left:0; right:0;
  background:rgba(15,31,53,.97);
  backdrop-filter:blur(16px);
  color:#94a3b8;
  padding:.9rem var(--space-lg);
  display:flex; align-items:center;
  justify-content:space-between; gap:.8rem;
  z-index:9000; font-size:.82rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.07);
}
.cookie-banner p { margin:0; flex:1 1 200px; }
.cookie-banner a { color:var(--color-accent); }
.btn-cookie-accept {
  background:var(--gradient-accent); color:#fff;
  border:none; border-radius:var(--radius-pill);
  padding:.48rem 1.4rem; font-size:.86rem; font-weight:700;
  cursor:pointer; transition:opacity var(--transition),transform var(--transition);
  white-space:nowrap; font-family:var(--font-base);
}
.btn-cookie-accept:hover { opacity:.88; transform:translateY(-1px); }

/* ----------------------------------------------------------------
   5. NAVIGATION BAR
---------------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:1000;
  background:rgba(6,15,30,.96);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 4px 24px rgba(0,0,0,.4);
}
.navbar {
  display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-md);
  max-width:var(--max-width); margin-inline:auto;
  padding:.8rem var(--space-md);
}
.navbar-brand {
  display:flex; align-items:center; gap:.45rem;
  text-decoration:none; color:#fff;
}
.brand-icon { font-size:1.45rem; filter:drop-shadow(0 0 8px #22c55e88); }
.brand-text {
  font-family:var(--font-display); font-size:1.05rem;
  font-weight:900; color:#fff; letter-spacing:-.03em; white-space:nowrap;
}
.brand-text span { color:var(--color-accent); }

/* Hamburger */
.nav-toggle {
  background:transparent; border:none; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; padding:4px;
}
.nav-toggle span {
  display:block; width:24px; height:2px;
  background:#fff; border-radius:2px;
  transition:transform var(--transition),opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-links {
  display:flex; flex-direction:column; gap:0;
  position:fixed; top:54px; right:0;
  width:270px; height:100dvh;
  background:var(--color-navy); padding:var(--space-lg);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:999; overflow-y:auto;
  border-left:1px solid rgba(255,255,255,.07);
}
.nav-links.open { transform:translateX(0); }
.nav-link {
  color:#94a3b8; font-size:.92rem; font-weight:500;
  padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  text-decoration:none; display:block;
  transition:color var(--transition),padding-left var(--transition);
}
.nav-link:hover,.nav-link.active {
  color:var(--color-accent); text-decoration:none; padding-left:.5rem;
}
.nav-age-badge {
  margin-top:var(--space-md);
  background:rgba(239,68,68,.18); border:1px solid rgba(239,68,68,.35);
  color:#fca5a5; font-size:.72rem; font-weight:700;
  padding:.28rem .85rem; border-radius:var(--radius-pill);
  text-align:center; width:fit-content; letter-spacing:.06em;
}
@media(min-width:768px) {
  .nav-toggle { display:none; }
  .nav-links {
    position:static; flex-direction:row; align-items:center;
    gap:var(--space-lg); width:auto; height:auto;
    background:transparent; padding:0; transform:none; border:none;
  }
  .nav-link { padding:0; border:none; font-size:.875rem; }
  .nav-link:hover,.nav-link.active { padding-left:0; }
  .nav-age-badge { margin-top:0; font-size:.7rem; padding:.22rem .7rem; }
}

/* ----------------------------------------------------------------
   6. TICKER / TRUST STRIP
---------------------------------------------------------------- */
.ticker-strip {
  background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-mid) 100%);
  overflow:hidden; padding:.44rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ticker-inner {
  display:flex; gap:0;
  animation:ticker-scroll 30s linear infinite;
  width:max-content;
}
.ticker-item {
  display:inline-flex; align-items:center; gap:.38rem;
  white-space:nowrap; font-size:.77rem; font-weight:600;
  color:#a8d8b8; padding:0 2rem;
}
.ticker-item .tick-icon { font-size:.88rem; }
@keyframes ticker-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.ticker-strip:hover .ticker-inner { animation-play-state:paused; }

/* ----------------------------------------------------------------
   7. HERO SECTION
---------------------------------------------------------------- */
.hero {
  background:var(--gradient-hero);
  color:#fff; padding:4rem 0 3rem;
  text-align:center; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 20% 40%,rgba(34,197,94,.12) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 20%,rgba(21,128,61,.10) 0%,transparent 60%);
}
.hero::after {
  content:''; position:absolute;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.07) 0%,transparent 70%);
  top:-200px; right:-200px; pointer-events:none;
  animation:orb-float 8s ease-in-out infinite alternate;
}
@keyframes orb-float {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(-30px,20px) scale(1.06); }
}
.hero .container { position:relative; z-index:1; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25);
  color:var(--color-accent); font-size:.76rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.32rem .95rem; border-radius:var(--radius-pill);
  margin-bottom:1.1rem;
}

.hero-title {
  font-family:var(--font-display);
  font-size:clamp(1.9rem,5.5vw,3.2rem);
  font-weight:900; letter-spacing:-.04em;
  margin-bottom:.8rem; line-height:1.1;
  background:linear-gradient(135deg,#ffffff 30%,#a8d8b8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-subtitle {
  font-size:clamp(.94rem,2.4vw,1.15rem); color:#7ea898;
  max-width:560px; margin-inline:auto; margin-bottom:1.8rem; line-height:1.7;
}

/* Trust badges */
.trust-badges {
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:.55rem; margin-bottom:1.5rem;
}
.trust-badge {
  display:inline-flex; align-items:center; gap:.32rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  color:#d1f7e4; font-size:.78rem; font-weight:600;
  padding:.4rem .95rem; border-radius:var(--radius-pill);
  backdrop-filter:blur(6px);
  transition:background var(--transition),border-color var(--transition);
}
.trust-badge:hover { background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.32); }
.trust-badge--age {
  background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.32); color:#fca5a5;
}
.badge-icon { font-size:.95rem; }

/* Hero stats */
.hero-stats {
  display:flex; justify-content:center; gap:2.2rem;
  flex-wrap:wrap; padding:1.1rem 1.4rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg); max-width:500px;
  margin:0 auto 1.4rem;
}
.hero-stat { text-align:center; }
.hero-stat-num {
  font-family:var(--font-display); font-size:1.55rem;
  font-weight:900; color:var(--color-accent); line-height:1;
}
.hero-stat-label {
  font-size:.7rem; color:#7ea898;
  text-transform:uppercase; letter-spacing:.07em; margin-top:.18rem;
}
.hero-updated { font-size:.76rem; color:#4d7a62; margin-bottom:.4rem; }
.hero-disclosure { font-size:.74rem; color:#4d7a62; }
.disclosure-link { color:var(--color-accent); font-weight:600; text-decoration:underline; }
.disclosure-link:hover { color:#fff; }

/* ----------------------------------------------------------------
   8. HOW IT WORKS STRIP
---------------------------------------------------------------- */
.how-it-works {
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  padding:1.8rem 0;
}
.hiw-grid {
  display:grid; grid-template-columns:1fr; gap:1.1rem; text-align:center;
}
@media(min-width:600px) { .hiw-grid { grid-template-columns:repeat(3,1fr); } }
.hiw-item {
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
}
.hiw-icon {
  width:50px; height:50px;
  background:linear-gradient(135deg,rgba(34,197,94,.14) 0%,rgba(21,94,58,.14) 100%);
  border:2px solid rgba(34,197,94,.24); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:.25rem;
}
.hiw-title { font-size:.93rem; font-weight:700; color:var(--color-navy); }
.hiw-desc  { font-size:.79rem; color:var(--color-text-light); line-height:1.5; max-width:175px; }

/* ----------------------------------------------------------------
   9. FILTER & SEARCH
---------------------------------------------------------------- */
.filter-section {
  background:var(--color-surface); border-bottom:1px solid var(--color-border);
  padding:var(--space-md) 0; position:sticky; top:54px; z-index:900;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.filter-row { display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center; }
.filter-buttons { display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; }
.filter-btn {
  background:var(--color-bg); border:1.5px solid var(--color-border);
  color:var(--color-text-light); font-size:.77rem; font-weight:600;
  padding:.38rem .88rem; border-radius:var(--radius-pill);
  cursor:pointer; transition:all var(--transition);
  white-space:nowrap; font-family:var(--font-base); letter-spacing:.02em;
}
.filter-btn:hover {
  background:rgba(34,197,94,.08); border-color:var(--color-accent);
  color:var(--color-primary);
}
.filter-btn.active {
  background:var(--color-primary); border-color:var(--color-primary);
  color:#fff; box-shadow:0 2px 8px rgba(10,53,35,.3);
}
.search-wrap { flex:0 1 230px; position:relative; }
.search-wrap::before {
  content:'🔍'; position:absolute; left:.82rem; top:50%;
  transform:translateY(-50%); font-size:.82rem; pointer-events:none; z-index:1;
}
.search-input {
  width:100%; padding:.48rem .88rem .48rem 2.25rem;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-pill); font-size:.875rem;
  outline:none; transition:border-color var(--transition),box-shadow var(--transition);
  background:var(--color-bg); font-family:var(--font-base);
}
.search-input:focus {
  border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(34,197,94,.18);
}
.results-count { font-size:.77rem; color:var(--color-text-muted); margin-top:.45rem; }

/* ----------------------------------------------------------------
   10. RANKINGS SECTION
---------------------------------------------------------------- */
.rankings-section { padding:var(--space-xl) 0 var(--space-2xl); }
.rankings-list { display:flex; flex-direction:column; gap:.95rem; }

/* ── SPORTSBOOK CARD ─────────────────────────────────────────── */
.sb-card {
  background:var(--color-surface); border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  overflow:hidden; position:relative;
  transition:box-shadow var(--transition-slow),transform var(--transition-slow),border-color var(--transition);
}
.sb-card:hover {
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-3px); border-color:rgba(34,197,94,.28);
}

/* Top accent stripe by rank */
.sb-card[data-rank="1"] { border-top:3px solid var(--color-gold); }
.sb-card[data-rank="2"] { border-top:3px solid #94a3b8; }
.sb-card[data-rank="3"] { border-top:3px solid var(--color-bronze); }
.sb-card[data-rank="4"],.sb-card[data-rank="5"] { border-top:3px solid var(--color-accent); }

/* #1 card gold ambient glow */
.sb-card[data-rank="1"] {
  box-shadow:var(--shadow-card),0 0 0 1px rgba(245,158,11,.14),0 4px 24px rgba(245,158,11,.07);
}
.sb-card[data-rank="1"]:hover {
  box-shadow:0 20px 60px rgba(0,0,0,.15),0 0 0 2px rgba(245,158,11,.28),0 6px 24px rgba(34,197,94,.1);
}

/* BEST PICK ribbon */
.sb-ribbon {
  position:absolute; top:16px; right:-28px;
  background:var(--gradient-gold); color:#fff;
  font-size:.62rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; padding:.3rem 2.8rem;
  transform:rotate(35deg); box-shadow:0 2px 8px rgba(0,0,0,.2);
  z-index:10; pointer-events:none;
}

/* Card layout */
.sb-card-inner { display:grid; grid-template-columns:58px 1fr; }

/* Rank column — glassmorphism */
.sb-rank-col {
  background:var(--gradient-card-top);
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:1.35rem .2rem;
  min-width:58px; position:relative; overflow:hidden;
}
.sb-rank-col::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 50%);
  pointer-events:none;
}
.sb-card[data-rank="1"] .sb-rank-col { background:linear-gradient(135deg,#92400e,#d97706); }
.sb-card[data-rank="2"] .sb-rank-col { background:linear-gradient(135deg,#374151,#6b7280); }
.sb-card[data-rank="3"] .sb-rank-col { background:linear-gradient(135deg,#7c3b00,#b97a3b); }

.sb-rank-number {
  font-family:var(--font-display); font-size:1.5rem; font-weight:900;
  color:#fff; line-height:1; text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.sb-rank-label {
  font-size:.54rem; color:rgba(255,255,255,.52);
  text-transform:uppercase; letter-spacing:.08em; margin-top:3px;
}

/* Card body */
.sb-card-body { padding:1rem 1rem 0; }
.sb-header {
  display:flex; align-items:flex-start;
  gap:.8rem; margin-bottom:.8rem; flex-wrap:wrap;
}

/* Logo */
.sb-logo {
  width:70px; height:43px; background:var(--color-bg);
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:.5rem; color:var(--color-text-muted);
  text-align:center; flex-shrink:0; overflow:hidden;
}
.sb-logo img { width:100%; height:100%; object-fit:contain; }

/* Name + badge */
.sb-name-wrap { flex:1 1 0; }
.sb-badge {
  display:inline-flex; align-items:center; gap:.22rem;
  background:var(--gradient-accent); color:#fff;
  font-size:.65rem; font-weight:900; padding:.16rem .62rem;
  border-radius:var(--radius-pill); text-transform:uppercase;
  letter-spacing:.07em; margin-bottom:4px;
  box-shadow:0 2px 8px rgba(34,197,94,.3);
}
.sb-card[data-rank="1"] .sb-badge {
  background:var(--gradient-gold); box-shadow:0 2px 8px rgba(245,158,11,.32);
}
.sb-name {
  font-family:var(--font-display); font-size:1.18rem;
  font-weight:900; color:var(--color-navy); margin:0; letter-spacing:-.02em;
}

/* Score */
.sb-rating-block { text-align:right; flex-shrink:0; }
.sb-score {
  font-family:var(--font-display); font-size:1.75rem; font-weight:900;
  color:var(--color-primary); line-height:1; letter-spacing:-.04em;
}
.sb-score-max { font-size:.68rem; color:var(--color-text-muted); font-weight:400; }
.sb-stars { color:var(--color-star); font-size:.8rem; letter-spacing:-1px; margin-top:3px; }

/* Animated rating bar */
.sb-rating-bar-wrap { margin-bottom:.72rem; display:flex; align-items:center; gap:.58rem; }
.sb-rating-bar-track {
  flex:1; height:6px; background:var(--color-border);
  border-radius:99px; overflow:hidden;
}
.sb-rating-bar-fill {
  height:100%; border-radius:99px; background:var(--gradient-accent);
  width:0%;   /* JS animates this to actual % */
  transition:width 1.3s cubic-bezier(.4,0,.2,1);
}
.sb-card[data-rank="1"] .sb-rating-bar-fill { background:var(--gradient-gold); }
.sb-rating-bar-pct {
  font-size:.7rem; font-weight:700; color:var(--color-text-light);
  width:2.8rem; text-align:right; white-space:nowrap;
}

/* Highlight / italic quote */
.sb-highlight {
  font-size:.88rem; color:var(--color-text-light); font-style:italic;
  margin-bottom:.72rem; border-left:3px solid var(--color-accent);
  padding-left:.65rem; line-height:1.55;
}

/* Bullet list */
.sb-bullets { display:flex; flex-wrap:wrap; gap:.28rem .88rem; margin-bottom:.82rem; }
.sb-bullets li {
  font-size:.83rem; color:var(--color-text);
  display:flex; align-items:center; gap:.32rem;
}
.sb-bullets li::before {
  content:'✔'; color:var(--color-accent); font-size:.7rem; flex-shrink:0; font-weight:700;
}

/* Bonus tag */
.sb-bonus {
  display:inline-flex; align-items:center; gap:.32rem;
  background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
  border:1.5px solid #a7f3d0; border-radius:var(--radius-md);
  padding:.36rem .82rem; font-size:.81rem;
  color:var(--color-primary-mid); font-weight:700; margin-bottom:.88rem;
}

/* CTA row */
.sb-cta-row { display:flex; align-items:center; gap:.58rem; flex-wrap:wrap; padding-bottom:.82rem; }

/* Shine CTA button */
.btn-visit {
  display:inline-flex; align-items:center; gap:.28rem;
  background:var(--gradient-accent); color:#fff;
  font-size:.88rem; font-weight:700; padding:.65rem 1.45rem;
  border-radius:var(--radius-pill); border:none; cursor:pointer;
  text-decoration:none;
  transition:transform var(--transition),box-shadow var(--transition),opacity var(--transition);
  white-space:nowrap; position:relative; overflow:hidden;
  font-family:var(--font-base);
  box-shadow:0 4px 16px rgba(34,197,94,.35); letter-spacing:.01em;
}
/* Shine sweep */
.btn-visit::before {
  content:''; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transition:left .55s ease;
}
.btn-visit:hover::before { left:160%; }
.btn-visit:hover {
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(34,197,94,.45);
  opacity:.95; text-decoration:none; color:#fff;
}
.btn-visit::after { content:' →'; font-weight:700; }
/* Gold variant for #1 */
.sb-card[data-rank="1"] .btn-visit {
  background:var(--gradient-gold); box-shadow:0 4px 16px rgba(245,158,11,.38);
}
.sb-card[data-rank="1"] .btn-visit:hover { box-shadow:0 8px 24px rgba(245,158,11,.5); }

.btn-review {
  display:inline-flex; align-items:center;
  font-size:.82rem; font-weight:600; color:var(--color-primary-mid);
  text-decoration:none; border:1.5px solid var(--color-border);
  background:transparent; cursor:pointer; padding:.6rem 1.05rem;
  border-radius:var(--radius-pill); transition:all var(--transition);
  font-family:var(--font-base);
}
.btn-review:hover {
  border-color:var(--color-accent); color:var(--color-primary);
  background:rgba(34,197,94,.06); text-decoration:none;
}

.sb-disclaimer { font-size:.66rem; color:var(--color-text-muted); margin-top:.28rem; padding-bottom:.28rem; }

.sb-affiliate-note {
  font-size:.65rem; color:var(--color-text-muted);
  padding:.42rem var(--space-md); border-top:1px solid var(--color-border-light);
  background:var(--color-surface-2); display:flex; align-items:center; gap:.28rem;
}
.sb-affiliate-note a { color:var(--color-text-muted); text-decoration:underline; }
.sb-affiliate-note a:hover { color:var(--color-primary-mid); }

/* ----------------------------------------------------------------
   11. NO RESULTS
---------------------------------------------------------------- */
.no-results { text-align:center; padding:var(--space-2xl) var(--space-md); color:var(--color-text-light); }
.link-btn {
  background:none; border:none; color:var(--color-primary-mid);
  font-size:inherit; text-decoration:underline; cursor:pointer;
  font-family:var(--font-base);
}

/* ----------------------------------------------------------------
   12. COMPLIANCE STRIP
---------------------------------------------------------------- */
.compliance-strip {
  background:linear-gradient(135deg,var(--color-navy) 0%,var(--color-navy-mid) 100%);
  color:#64748b; padding:var(--space-2xl) 0;
  position:relative; overflow:hidden;
}
.compliance-strip::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(34,197,94,.05) 0%,transparent 70%);
}
.compliance-grid {
  display:grid; grid-template-columns:1fr;
  gap:var(--space-lg); position:relative;
}
@media(min-width:600px) { .compliance-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:900px) { .compliance-grid { grid-template-columns:repeat(4,1fr); } }
.compliance-item {
  padding:1.15rem; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-md);
  transition:background var(--transition);
}
.compliance-item:hover { background:rgba(255,255,255,.05); }
.compliance-item h3 { font-size:.93rem; font-weight:700; color:#e2e8f0; margin-bottom:.38rem; }
.compliance-item p  { font-size:.82rem; line-height:1.6; }
.compliance-item a  { color:var(--color-accent); font-weight:500; }
.compliance-item a:hover { text-decoration:underline; }

/* ----------------------------------------------------------------
   13. FOOTER
---------------------------------------------------------------- */
.site-footer {
  background:var(--color-navy); color:#475569;
  padding:var(--space-2xl) 0 var(--space-xl);
  font-size:.875rem; border-top:1px solid rgba(255,255,255,.05);
}
.footer-grid {
  display:grid; grid-template-columns:1fr;
  gap:var(--space-xl); margin-bottom:var(--space-xl);
}
@media(min-width:640px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:900px) { .footer-grid { grid-template-columns:1.5fr 1fr 1fr; } }
.footer-logo { font-family:var(--font-display); font-size:1.05rem; font-weight:900; color:#f1f5f9; margin-bottom:.46rem; letter-spacing:-.02em; }
.footer-tagline { font-size:.79rem; color:#475569; }
.footer-nav h4,.footer-rg h4 {
  color:#94a3b8; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:.65rem; font-weight:700;
}
.footer-nav ul li,.footer-rg ul li { margin-bottom:.38rem; }
.footer-nav a,.footer-rg a { color:#475569; font-size:.83rem; transition:color var(--transition); }
.footer-nav a:hover,.footer-rg a:hover { color:var(--color-accent); text-decoration:none; }
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.06); margin-bottom:var(--space-lg); }
.footer-legal { font-size:.75rem; line-height:1.75; color:#334155; }
.footer-legal p { margin-bottom:.48rem; }
.footer-legal a { color:#475569; text-decoration:underline; }
.footer-legal a:hover { color:var(--color-accent); }
.footer-copyright { margin-top:var(--space-md); color:#2d3f52; font-size:.72rem; }

/* ----------------------------------------------------------------
   14. STICKY MOBILE CTA
---------------------------------------------------------------- */
.sticky-mobile-cta {
  position:fixed; bottom:0; left:0; right:0; z-index:8999;
  background:var(--color-navy-mid); padding:.58rem var(--space-md);
  text-align:center; box-shadow:0 -6px 24px rgba(0,0,0,.35);
  border-top:1px solid rgba(255,255,255,.06);
}
.btn-sticky {
  display:block; background:var(--gradient-accent);
  color:#fff; font-size:.93rem; font-weight:700;
  padding:.66rem 1.4rem; border-radius:var(--radius-pill);
  text-decoration:none;
  transition:opacity var(--transition),transform var(--transition);
  box-shadow:0 4px 16px rgba(34,197,94,.3);
  font-family:var(--font-base); letter-spacing:.01em;
}
.btn-sticky:hover { opacity:.9; transform:translateY(-1px); text-decoration:none; color:#fff; }
@media(min-width:900px) {
  .sticky-mobile-cta { display:none; }
  body { padding-bottom:0; }
  .cookie-banner { bottom:0; }
}

/* ----------------------------------------------------------------
   15. INNER PAGES — HERO
---------------------------------------------------------------- */
.page-hero {
  background:var(--gradient-hero); color:#fff;
  padding:var(--space-2xl) 0 var(--space-xl);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 20% 50%,rgba(34,197,94,.08) 0%,transparent 60%);
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 {
  font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900; margin-bottom:.46rem; letter-spacing:-.03em;
}
.page-hero p { color:#7ea898; font-size:1rem; }

/* ----------------------------------------------------------------
   16. INNER PAGE CONTENT
---------------------------------------------------------------- */
.page-content { padding:var(--space-2xl) 0; }
.page-content h2 {
  font-family:var(--font-display); font-size:1.38rem; color:var(--color-navy);
  margin:var(--space-xl) 0 var(--space-sm);
  border-bottom:2px solid var(--color-accent); padding-bottom:.28rem;
}
.page-content h3 { font-size:1.04rem; color:var(--color-primary); margin:var(--space-lg) 0 var(--space-xs); }
.page-content p,.page-content li { margin-bottom:.48rem; font-size:.93rem; line-height:1.75; }
.page-content ul,.page-content ol { padding-left:var(--space-lg); margin-bottom:var(--space-md); }
.page-content ul li { list-style:disc; }
.page-content ol li { list-style:decimal; }
.page-content a { color:var(--color-primary-mid); text-decoration:underline; }
.page-content a:hover { color:var(--color-primary); }
.page-alert {
  background:#ecfdf5; border:1px solid #a7f3d0;
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius-md); padding:var(--space-md) var(--space-lg);
  margin-bottom:var(--space-lg); font-size:.92rem;
}
.page-alert.warning { background:#fff7ed; border-color:#fed7aa; border-left-color:#f59e0b; }
.page-alert.danger  { background:#fef2f2; border-color:#fecaca; border-left-color:#ef4444; }

/* ----------------------------------------------------------------
   17. REVIEW PAGE
---------------------------------------------------------------- */
.review-header { display:flex; align-items:flex-start; gap:var(--space-lg); flex-wrap:wrap; margin-bottom:var(--space-xl); }
.review-logo-box {
  width:90px; height:60px; border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); background:var(--color-bg);
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; color:var(--color-text-muted); flex-shrink:0;
}
.review-title-wrap { flex:1; }
.review-title-wrap h1 { font-family:var(--font-display); font-size:1.9rem; letter-spacing:-.03em; margin-bottom:2px; }
.review-meta { font-size:.83rem; color:var(--color-text-light); }
.review-score-box {
  background:var(--gradient-card-top); color:#fff;
  border-radius:var(--radius-md); padding:var(--space-md) var(--space-lg);
  text-align:center; flex-shrink:0; box-shadow:0 4px 20px rgba(10,53,35,.28);
}
.review-score-number { font-family:var(--font-display); font-size:2.55rem; font-weight:900; line-height:1; }
.review-score-label { font-size:.7rem; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.1em; }
.pros-cons-grid { display:grid; grid-template-columns:1fr; gap:var(--space-md); margin-bottom:var(--space-xl); }
@media(min-width:600px) { .pros-cons-grid { grid-template-columns:1fr 1fr; } }
.pros-box,.cons-box { border-radius:var(--radius-md); padding:var(--space-md) var(--space-lg); }
.pros-box { background:#ecfdf5; border:1.5px solid #a7f3d0; }
.cons-box { background:#fef2f2; border:1.5px solid #fecaca; }
.pros-box h3 { color:#15803d; }
.cons-box h3 { color:#b91c1c; }
.pros-box ul li,.cons-box ul li {
  list-style:none; font-size:.9rem; margin-bottom:.38rem;
  padding-left:var(--space-md); position:relative;
}
.pros-box ul li::before { content:'✔ '; color:#15803d; position:absolute; left:0; }
.cons-box ul li::before { content:'✖ '; color:#b91c1c; position:absolute; left:0; }
.review-section {
  border:1.5px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-lg); margin-bottom:var(--space-lg);
  background:var(--color-surface); transition:box-shadow var(--transition);
}
.review-section:hover { box-shadow:var(--shadow-md); }
.review-section h2 { font-size:1.14rem; border-bottom:2px solid var(--color-accent); padding-bottom:.28rem; margin-bottom:var(--space-md); margin-top:0; }
.review-cta-band {
  background:var(--gradient-card-top); color:#fff;
  border-radius:var(--radius-lg); padding:var(--space-xl) var(--space-lg);
  text-align:center; margin:var(--space-xl) 0; box-shadow:var(--shadow-lg);
}
.review-cta-band h2 { color:#fff; border:none; margin-bottom:.46rem; font-family:var(--font-display); }
.review-cta-band p { color:#7ea898; margin-bottom:var(--space-lg); }

/* ----------------------------------------------------------------
   18. UTILITIES
---------------------------------------------------------------- */
.text-center { text-align:center; }
.mt-sm { margin-top:var(--space-sm); }
.mt-md { margin-top:var(--space-md); }
.mt-lg { margin-top:var(--space-lg); }
.mb-sm { margin-bottom:var(--space-sm); }
.mb-md { margin-bottom:var(--space-md); }
.divider { border:none; border-top:1px solid var(--color-border); margin:var(--space-xl) 0; }

/* ----------------------------------------------------------------
   19. RESPONSIVE TWEAKS
---------------------------------------------------------------- */
@media(min-width:640px) {
  .sb-card-inner { grid-template-columns:68px 1fr; }
  .sb-rank-number { font-size:1.65rem; }
  .sb-card-body { padding:1.15rem 1.3rem 0; }
  .sb-logo { width:80px; height:48px; }
  .sb-name { font-size:1.25rem; }
}
@media(min-width:900px) {
  .sb-header { flex-wrap:nowrap; }
  .sb-cta-row { flex-wrap:nowrap; }
}

/* ================================================================
   END OF STYLES
================================================================ */