/* ============================================================
   BETSATLAS.COM — Stylesheet v3
   Inspired by: OneCasino dark aesthetic · Orange accent
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Dark backgrounds */
  --bg-base:       #181a1d;   /* page background */
  --bg-surface:    #1e2228;   /* card surface */
  --bg-elevated:   #252a32;   /* elevated card / dropdown */
  --bg-hover:      #2a3040;   /* hover state */
  --bg-input:      #13161a;   /* navbar / input bg */

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-light:  rgba(255,255,255,0.05);
  --border-mid:    rgba(255,255,255,0.12);

  /* Text */
  --text:          #ffffff;
  --text-2:        #c8d0dc;
  --text-muted:    #8b96a8;
  --text-light:    #5a6578;
  --white:         #ffffff;
  --black:         #0a0c0e;

  /* Brand — Orange */
  --orange:        #ff6b18;
  --orange-dark:   #e55a0e;
  --orange-glow:   rgba(255,107,24,0.20);
  --orange-light:  rgba(255,107,24,0.10);

  /* Semantic */
  --green:         #22c55e;
  --green-light:   rgba(34,197,94,0.10);
  --green-border:  rgba(34,197,94,0.25);
  --red:           #ef4444;
  --red-light:     rgba(239,68,68,0.10);
  --gold:          #f59e0b;
  --blue:          #3b82f6;
  --blue-light:    rgba(59,130,246,0.10);
  --blue-mid:      rgba(59,130,246,0.25);

  /* Shadows (for dark bg) */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
  --glow-orange: 0 0 20px rgba(255,107,24,0.3);

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* Layout */
  --max-w: 1160px;
  --gap:   0.18s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--white); text-decoration: none; }
img { max-width: 100%; display: block; }

/* --- Typography --- */
h1, h2, h3, h4, h5 {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--white);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p  { color: var(--text-muted); line-height: 1.75; }

/* --- Layout Helpers --- */
.container   { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section     { padding: 52px 0; }
.section-sm  { padding: 32px 0; }
.section-xs  { padding: 18px 0; }

/* ============================================================
   NAVBAR — dark, sticky, OneCasino-style
   ============================================================ */
.navbar {
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(12px);
}
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}

/* Logo */
.navbar__logo {
  font-size: 1.25rem; font-weight: 900;
  color: var(--white); display: flex; align-items: center; gap: 8px;
  letter-spacing: -.04em;
  text-decoration: none !important;
}
.navbar__logo img { height: 32px; width: auto; }
.navbar__logo .logo-text { display: flex; align-items: baseline; gap: 0; }
.navbar__logo .logo-casino   { color: var(--white); }
.navbar__logo .logo-compass  { color: var(--orange); }
.navbar__logo:hover { text-decoration: none; }

/* Nav links */
.navbar__nav { display: flex; align-items: center; gap: 2px; list-style: none; }
.navbar__nav a {
  padding: 7px 13px; border-radius: var(--r-sm);
  font-weight: 500; font-size: 0.87rem; color: var(--text-muted);
  transition: all var(--gap);
}
.navbar__nav > li > a:hover,
.navbar__nav > li > a.active {
  background: var(--bg-hover); color: var(--white);
  text-decoration: none;
}
.navbar__nav > li > a.active { color: var(--orange); }

.navbar__right { display: flex; align-items: center; gap: 10px; }

/* Language dropdown */
.lang-dropdown { position: relative; }
.lang-dropdown__trigger {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  transition: all var(--gap);
  white-space: nowrap;
}
.lang-dropdown__trigger:hover { background: var(--bg-hover); color: var(--white); border-color: rgba(255,255,255,0.2); }
.lang-dropdown__trigger svg { width: 10px; height: 10px; transition: transform 0.2s; flex-shrink: 0; }
.lang-dropdown.open .lang-dropdown__trigger { border-color: var(--orange); color: var(--white); }
.lang-dropdown.open .lang-dropdown__trigger svg { transform: rotate(180deg); }
.lang-dropdown__menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #1a1f28;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  list-style: none; margin: 0; padding: 4px;
  min-width: 130px;
  z-index: 999;
}
.lang-dropdown.open .lang-dropdown__menu { display: block; }
.lang-dropdown__item {
  display: block; width: 100%;
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 7px 12px;
  border-radius: 5px;
  text-align: left;
  transition: all 0.15s;
}
.lang-dropdown__item:hover { background: var(--bg-hover); color: var(--white); }
.lang-dropdown__item.active { color: var(--orange); }

/* Hamburger */
.navbar__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.navbar__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-muted); border-radius: 2px; margin: 4px 0;
  transition: background var(--gap);
}
.navbar__hamburger:hover span { background: var(--white); }

/* ============================================================
   DROPDOWN NAVIGATION
   ============================================================ */
.navbar__nav .has-dropdown { position: relative; }

/* Bridge: covers the gap between trigger and panel so the cursor
   never leaves a hoverable area. Wider + z-indexed reliably.       */
.navbar__nav .has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px; right: -16px;
  height: 14px;   /* > 10px visual gap */
  display: none;
  z-index: 301;   /* above the dropdown (300) so it intercepts hover */
}
.navbar__nav .has-dropdown:hover::after { display: block; }

.navbar__nav .dropdown {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--bg-elevated);
  min-width: 210px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-mid);
  padding: 6px 0;
  z-index: 300;
  animation: fadeDropdown .12s ease;
}
/* Dropdown's own upward extension — second line of defence against the gap */
.navbar__nav .dropdown::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
@keyframes fadeDropdown {
  /* opacity-only: no translateY so the panel never starts above the bridge */
  from { opacity: 0; }
  to   { opacity: 1; }
}
.navbar__nav .has-dropdown:hover .dropdown,
.navbar__nav .has-dropdown.open    .dropdown { display: block; }

.navbar__nav .dropdown li { list-style: none; }
.navbar__nav .dropdown a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  font-size: 0.86rem; font-weight: 500;
  color: var(--text-2);
  white-space: nowrap; transition: all var(--gap);
}
.navbar__nav .dropdown a:hover {
  background: var(--bg-hover); color: var(--orange);
  text-decoration: none;
}
.navbar__nav .dropdown hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.nav-arrow { font-size: 0.62rem; color: var(--text-light); transition: transform var(--gap); }
.has-dropdown:hover .nav-arrow { transform: rotate(180deg); }
.dropdown-toggle { display: flex !important; align-items: center; gap: 5px; }
/* Sub-toggle only visible inside open hamburger (mobile CSS adds display rules) */
.sub-toggle { display: none; }
.sub-dropdown { display: none; }

/* Desktop: US States fly-out when hovering USA inside Americas dropdown */
.navbar__nav .dropdown li.has-sub { position: relative; }
.navbar__nav .dropdown li.has-sub .sub-parent {
  display: flex; align-items: center; justify-content: space-between;
}
.navbar__nav .dropdown li.has-sub .sub-parent a { flex: 1; }
/* Show a small › indicator on desktop to hint at sub-menu */
.navbar__nav .dropdown li.has-sub .sub-parent::after {
  content: '›'; color: var(--text-light); font-size: 0.8rem;
  padding-right: 10px; pointer-events: none;
}
.navbar__nav .dropdown li.has-sub:hover .sub-dropdown {
  display: block;
  position: absolute;
  left: 100%; top: -6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 170px;
  padding: 6px 0;
  z-index: 300;
  list-style: none;
  animation: fadeDropdown .12s ease;
}
.navbar__nav .dropdown li.has-sub:hover .sub-dropdown li a {
  display: block; padding: 9px 16px;
  color: var(--text-muted); font-size: 0.85rem;
  text-decoration: none; white-space: nowrap;
  border-radius: 0;
}
.navbar__nav .dropdown li.has-sub:hover .sub-dropdown li a:hover {
  color: var(--white); background: var(--bg-hover);
}

/* ============================================================
   CRUKS / RESPONSIBLE GAMBLING NOTICE
   ============================================================ */
.cruks-bar {
  background: #0d0f11;
  border-bottom: 1px solid var(--border);
  padding: 9px 0;
}
.cruks-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.cruks-bar__left {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.77rem; color: var(--text-light);
}
.cruks-bar__left strong { color: var(--text-muted); font-weight: 600; }
.cruks-bar__icon { font-size: 1rem; flex-shrink: 0; }
.cruks-bar__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cruks-bar__link {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 12px;
  font-size: 0.74rem; font-weight: 600; color: var(--text-muted);
  transition: all var(--gap);
}
.cruks-bar__link:hover {
  background: var(--orange-light); border-color: var(--orange);
  color: var(--orange); text-decoration: none;
}
.cruks-bar__helpline { font-size: 0.74rem; color: var(--text-light); }
.cruks-bar__helpline strong { color: var(--text-muted); }

/* Inline responsible gaming block */
.resp-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex; align-items: flex-start; gap: 12px;
  margin: 24px 0;
}
.resp-block__icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.resp-block__text { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; }
.resp-block__text strong { color: var(--text-2); }
.resp-block__text a { color: var(--orange); font-weight: 600; }

/* ============================================================
   HERO — Dark, cinematic, OneCasino-style
   ============================================================ */
.hero {
  background: linear-gradient(160deg, #1a1e25 0%, #131720 50%, #0e1115 100%);
  border-bottom: 1px solid var(--border);
  padding: 48px 0 40px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(255,107,24,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 12px;
}
.hero__eyebrow::before {
  content: '';
  display: inline-block; width: 22px; height: 2px;
  background: var(--orange); border-radius: 2px;
}
.hero h1 { color: var(--white); max-width: 700px; margin-bottom: 12px; }
.hero__sub { font-size: 1rem; color: var(--text-muted); max-width: 560px; margin-bottom: 24px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.hero__stats {
  display: flex; gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 22px; flex-wrap: wrap;
}
.hero__stat {
  padding-right: 40px; margin-right: 40px;
  border-right: 1px solid var(--border);
}
.hero__stat:last-child { border-right: none; }
.hero__stat strong {
  display: block; font-size: 1.6rem; font-weight: 900;
  color: var(--white); letter-spacing: -.03em;
}
.hero__stat span { font-size: 0.78rem; color: var(--text-muted); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-label {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 10px;
}
.section-header { margin-bottom: 22px; }
.section-header h2 { margin-bottom: 6px; }
.section-header p { font-size: 0.92rem; max-width: 520px; }
.section-header--center { text-align: center; }
.section-header--center p { margin: 0 auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: 0.88rem;
  border-radius: var(--r-sm);
  padding: 10px 20px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--gap);
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: .01em;
}
.btn-primary {
  background: var(--orange); color: var(--white);
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-dark); border-color: var(--orange-dark);
  color: var(--white); box-shadow: var(--glow-orange);
}

.btn-dark {
  background: var(--bg-elevated); color: var(--white);
  border-color: var(--border-mid);
}
.btn-dark:hover {
  background: var(--bg-hover); border-color: rgba(255,255,255,0.2);
  color: var(--white);
}

.btn-outline {
  background: transparent; color: var(--text-2);
  border-color: var(--border-mid);
}
.btn-outline:hover {
  border-color: var(--orange); color: var(--orange);
  background: var(--orange-light);
}

.btn-ghost {
  background: transparent; color: var(--text-muted);
  border-color: transparent; padding: 10px 16px;
}
.btn-ghost:hover { color: var(--white); background: var(--bg-hover); }

.btn-sm  { padding: 7px 14px; font-size: 0.8rem; }
.btn-lg  { padding: 13px 28px; font-size: 0.95rem; }
.btn-block { width: 100%; }

/* Primary CTA (affiliate button) */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  padding: 11px 22px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--gap), transform 0.12s, box-shadow var(--gap);
  text-decoration: none !important;
  white-space: nowrap;
}
.btn-cta:hover {
  background: var(--orange-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--glow-orange);
  text-decoration: none;
}
.btn-cta.btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.btn-cta.btn-lg { padding: 14px 28px; font-size: 0.95rem; }

/* ============================================================
   TOP 10 COMPARISON LIST — Dark version
   ============================================================ */
.rank-list { display: flex; flex-direction: column; gap: 10px; }

.rank-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 44px 72px 1fr 160px 152px;
  align-items: center;
  gap: 20px;
  transition: border-color var(--gap), box-shadow var(--gap), transform var(--gap);
}
.rank-item:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.rank-item--top { border-left: 3px solid var(--orange); }
.rank-item--top:hover { border-color: var(--orange); box-shadow: var(--glow-orange); }

/* Rank badge */
.rank-item__num {
  font-size: 1.5rem; font-weight: 900;
  color: var(--bg-hover); text-align: center;
  letter-spacing: -.04em;
}
.rank-item__num.n1 { color: #f59e0b; }
.rank-item__num.n2 { color: #8b96a8; }
.rank-item__num.n3 { color: #a0704a; }

/* Logo box */
.rank-item__logo {
  width: 64px; height: 64px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; flex-shrink: 0;
}

/* Details */
.rank-item__info { min-width: 0; }
.rank-item__name {
  font-size: 1rem; font-weight: 800;
  color: var(--white); margin-bottom: 4px;
  letter-spacing: -.01em;
}
.rank-item__meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.rank-item__stars { color: var(--gold); font-size: 0.82rem; letter-spacing: 1px; }
.rank-item__score {
  font-size: 0.8rem; font-weight: 700;
  color: var(--text-2); background: var(--bg-elevated);
  padding: 1px 7px; border-radius: 20px;
  border: 1px solid var(--border);
}
.rank-item__desc {
  font-size: 0.82rem; color: var(--text-muted);
  line-height: 1.5; margin-bottom: 8px;
}
.rank-item__tags { display: flex; gap: 5px; flex-wrap: wrap; }

/* Tags */
.tag {
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-muted); background: var(--bg-elevated);
  white-space: nowrap;
}
.tag-green  { border-color: var(--green-border); color: var(--green);  background: var(--green-light); }
.tag-blue   { border-color: var(--blue-mid);    color: var(--blue);   background: var(--blue-light); }
.tag-orange { border-color: rgba(255,107,24,.3); color: var(--orange); background: var(--orange-light); }

/* Bonus cell */
.rank-item__bonus { text-align: left; }
.rank-item__bonus-amount {
  font-size: 0.95rem; font-weight: 800;
  color: var(--white); line-height: 1.3;
  margin-bottom: 3px;
}
.rank-item__bonus-label {
  font-size: 0.72rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}

/* CTA cell */
.rank-item__cta { text-align: right; }
.rank-item__disclaimer {
  font-size: 0.67rem; color: var(--text-light);
  text-align: center; margin-top: 5px;
}

/* Expandable pros/cons */
.rank-item__proscons {
  display: none;
  grid-column: 3 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.rank-item__proscons.open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rank-item__toggle {
  font-size: 0.75rem; font-weight: 600;
  color: var(--orange); cursor: pointer;
  background: none; border: none; padding: 0;
  margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;
}
.pros-list, .cons-list { list-style: none; }
.pros-list li, .cons-list li {
  font-size: 0.8rem; color: var(--text-muted);
  padding-left: 16px; position: relative; margin-bottom: 4px;
}
.pros-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.cons-list li::before { content: '✗'; position: absolute; left: 0; color: var(--red);   font-weight: 700; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 24px;
}
.filter-bar__label {
  font-size: 0.8rem; font-weight: 700;
  color: var(--text-2); margin-right: 4px;
}
.filter-pill {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 14px;
  font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all var(--gap);
  font-family: inherit;
}
.filter-pill:hover { border-color: var(--orange); color: var(--orange); }
.filter-pill.active { background: var(--orange); color: var(--white); border-color: var(--orange); }

/* ============================================================
   BONUS TABLE
   ============================================================ */
.bonus-table-wrap {
  overflow-x: auto; border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.bonus-table { width: 100%; border-collapse: collapse; background: var(--bg-surface); }
.bonus-table thead { background: var(--bg-input); }
.bonus-table th {
  padding: 12px 16px; text-align: left;
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.bonus-table td {
  padding: 15px 16px; font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text-2);
}
.bonus-table tbody tr:last-child td { border-bottom: none; }
.bonus-table tbody tr:hover { background: var(--bg-hover); }
.bonus-table .hl { font-weight: 700; color: var(--white); }
.badge {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 2px 7px; border-radius: 4px; border: 1px solid;
}
.badge-green  { background: var(--green-light); color: var(--green);  border-color: var(--green-border); }
.badge-orange { background: var(--orange-light); color: var(--orange); border-color: rgba(255,107,24,.3); }
.badge-blue   { background: var(--blue-light);   color: var(--blue);  border-color: var(--blue-mid); }

/* ============================================================
   CASINO CARDS / CATEGORY CARDS
   ============================================================ */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.category-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--gap);
  text-decoration: none !important;
}
.category-card:hover {
  border-color: var(--orange);
  box-shadow: var(--glow-orange);
  background: var(--bg-elevated);
  transform: translateY(-2px);
}
.category-card__icon  { font-size: 2rem; margin-bottom: 10px; }
.category-card__title { font-weight: 800; font-size: 0.95rem; color: var(--white); margin-bottom: 4px; }
.category-card__desc  { font-size: 0.8rem; color: var(--text-muted); }
.category-card__count {
  display: inline-block; margin-top: 10px;
  font-size: 0.75rem; font-weight: 700; color: var(--orange);
}

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.blog-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--gap);
}
.blog-card:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-card__img {
  height: 148px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  background: var(--bg-elevated);
}
.blog-card__body { padding: 18px; }
.blog-card__cat {
  font-size: 0.7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 7px;
}
.blog-card__title {
  font-size: 0.95rem; font-weight: 700; color: var(--white);
  margin-bottom: 7px; line-height: 1.35;
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--orange); text-decoration: none; }
.blog-card__excerpt { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.55; }
.blog-card__meta { display: flex; justify-content: space-between; }
.blog-card__date { font-size: 0.75rem; color: var(--text-light); }
.blog-card__read { font-size: 0.75rem; font-weight: 600; color: var(--orange); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 24px 0 20px;
}
.page-header h1 { margin-bottom: 8px; }
.page-header p  { font-size: 0.95rem; max-width: 600px; }

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px;
}
.breadcrumb a { color: var(--orange); font-weight: 500; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: var(--text-light); }

/* ============================================================
   ARTICLE LAYOUT
   ============================================================ */
.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.article-body {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px;
  min-width: 0;
}
.article-body h2 { margin: 32px 0 12px; font-size: 1.3rem; color: var(--white); }
.article-body h3 { margin: 24px 0 10px; font-size: 1.05rem; color: var(--white); }
.article-body p  { margin-bottom: 16px; line-height: 1.75; font-size: 0.95rem; color: var(--text-2); }
.article-body ul, .article-body ol { padding-left: 20px; margin-bottom: 16px; }
.article-body li { margin-bottom: 7px; font-size: 0.92rem; color: var(--text-muted); }
.article-body a { color: var(--orange); }
.article-body a:hover { color: var(--white); }

.tip-box {
  background: var(--blue-light); border: 1px solid var(--blue-mid);
  border-radius: var(--r-md); padding: 16px 18px; margin: 20px 0;
}
.tip-box strong { color: var(--blue); }
.warn-box {
  background: var(--orange-light); border: 1px solid rgba(255,107,24,.3);
  border-radius: var(--r-md); padding: 16px 18px; margin: 20px 0;
}
.warn-box strong { color: var(--orange); }

.article-sidebar { position: sticky; top: 72px; }
.sidebar-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px;
}
.sidebar-card h4 { margin-bottom: 12px; font-size: 0.9rem; color: var(--white); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.trust-strip__inner {
  display: flex; align-items: center;
  justify-content: center; gap: 40px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
}
.trust-item__icon { font-size: 1.1rem; }

/* ============================================================
   DIVIDER, UTILS
   ============================================================ */
.divider { border: none; border-top: 1px solid var(--border); margin: 22px 0; }
.text-center { text-align: center; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 36px; }
.page-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-surface);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--gap);
}
.page-btn:hover, .page-btn.active {
  background: var(--orange); color: var(--white); border-color: var(--orange);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #0d0f11;
  color: var(--text-light);
  padding: 36px 0 20px;
  border-top: 1px solid var(--border);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 32px; margin-bottom: 28px;
}
.footer__brand-logo {
  font-size: 1.15rem; font-weight: 900; letter-spacing: -.03em;
  color: var(--white); display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.footer__brand-logo .logo-casino  { color: var(--white); }
.footer__brand-logo .logo-compass { color: var(--orange); }
.footer__brand p { font-size: 0.83rem; line-height: 1.65; max-width: 280px; color: var(--text-light); }
.footer__col h5 {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 9px; }
.footer__col a {
  font-size: 0.85rem; color: var(--text-light);
  transition: color var(--gap);
}
.footer__col a:hover { color: var(--orange); text-decoration: none; }

.footer__cruks {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex; align-items: flex-start; gap: 12px;
}
.footer__cruks-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.footer__cruks-text { font-size: 0.78rem; line-height: 1.65; color: var(--text-light); }
.footer__cruks-text strong { color: var(--text-muted); }
.footer__cruks-text a { color: var(--orange); font-weight: 600; }
.footer__cruks-text a:hover { color: var(--white); }

.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer__bottom p { font-size: 0.78rem; color: var(--text-light); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { font-size: 0.78rem; color: var(--text-light); }
.footer__legal a:hover { color: var(--orange); text-decoration: none; }

/* ============================================================
   COUNTRY / STATE CARDS
   ============================================================ */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.country-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  transition: all var(--gap);
  display: flex; flex-direction: column; gap: 9px;
  text-decoration: none !important;
}
.country-card:hover {
  border-color: var(--orange);
  box-shadow: var(--glow-orange);
  background: var(--bg-elevated);
  transform: translateY(-2px);
  text-decoration: none;
}
.country-card__flag  { font-size: 2.4rem; line-height: 1; }
.country-card__name  { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.country-card__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.status-legal   { background: var(--green-light);  color: var(--green); }
.status-partial { background: rgba(245,158,11,.12); color: #f59e0b; }
.status-varies  { background: var(--orange-light);  color: var(--orange); }
.country-card__desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; }
.country-card__cta {
  margin-top: auto; font-size: 0.82rem; font-weight: 700;
  color: var(--orange); display: flex; align-items: center; gap: 4px;
}

/* ============================================================
   TOPIC CARDS
   ============================================================ */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.topic-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 18px;
  text-align: center;
  transition: all var(--gap);
  text-decoration: none !important;
}
.topic-card:hover {
  background: var(--bg-elevated);
  border-color: var(--orange);
  box-shadow: var(--glow-orange);
  transform: translateY(-2px);
  text-decoration: none;
}
.topic-card__icon  { font-size: 1.8rem; margin-bottom: 10px; }
.topic-card__title { font-size: 0.9rem; font-weight: 700; color: var(--white); }
.topic-card__sub   { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   INFO TABLE
   ============================================================ */
.info-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
  font-size: 0.88rem;
  margin-top: 24px;
}
.info-table th {
  background: var(--bg-input); color: var(--text-muted);
  padding: 12px 16px; text-align: left;
  font-weight: 700; font-size: 0.78rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.info-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.info-table tr:last-child td { border-bottom: none; }
.info-table tr:hover td { background: var(--bg-hover); }
.badge-yes  { color: var(--green); font-weight: 700; }
.badge-no   { color: var(--red);   font-weight: 700; }
.badge-part { color: var(--gold);  font-weight: 700; }

/* ============================================================
   OPERATOR CARDS (op-card)
   ============================================================ */
.op-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.op-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 20px;
  transition: all var(--gap);
}
.op-card:hover { border-color: var(--orange); box-shadow: var(--glow-orange); background: var(--bg-elevated); }
.op-card__rank { font-size: 0.75rem; font-weight: 900; color: var(--text-light); width: 24px; text-align: center; flex-shrink: 0; }
.op-card__logo { font-size: 1.6rem; flex-shrink: 0; }
.op-card__info { flex: 1; }
.op-card__name { font-weight: 800; font-size: 0.95rem; color: var(--white); }
.op-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.op-card__bonus { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.op-card__cta {
  background: var(--orange); color: var(--white);
  padding: 9px 18px; border-radius: var(--r-md);
  font-size: 0.83rem; font-weight: 800;
  white-space: nowrap; text-decoration: none !important;
  transition: background var(--gap), box-shadow var(--gap);
}
.op-card__cta:hover {
  background: var(--orange-dark); text-decoration: none;
  box-shadow: var(--glow-orange);
}

/* ============================================================
   TWO-COLUMN CONTENT LAYOUT
   ============================================================ */
.content-cols {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.content-sidebar {
  position: sticky; top: 76px;
  display: flex; flex-direction: column; gap: 18px;
}
.sidebar-box {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
}
.sidebar-box h4 { margin-bottom: 12px; font-size: 0.9rem; color: var(--white); }
.sidebar-box ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sidebar-box ul li a { font-size: 0.84rem; color: var(--text-2); font-weight: 500; }
.sidebar-box ul li a:hover { color: var(--orange); }

/* ============================================================
   PAGE HERO (dark page header)
   ============================================================ */
.page-hero {
  background: linear-gradient(160deg, #1a1e25 0%, #0e1115 100%);
  border-bottom: 1px solid var(--border);
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 100% at 85% 50%, var(--orange-glow) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .breadcrumb a { color: var(--orange); }
.page-hero .breadcrumb span { color: var(--text-light); }
.page-hero h1 { color: var(--white); margin: 12px 0 16px; }
.page-hero p  { color: var(--text-muted); max-width: 640px; }
.page-hero__meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; flex-wrap: wrap;
}
.page-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.07); border: 1px solid var(--border-mid);
  border-radius: 999px; padding: 4px 14px;
  font-size: 0.78rem; font-weight: 700; color: var(--text-2);
}

/* ============================================================
   GAME-STYLE FEATURE CARDS (OneCasino-inspired operator tiles)
   ============================================================ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.game-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--gap);
  text-decoration: none !important;
  display: flex; flex-direction: column;
}
.game-card:hover {
  border-color: var(--orange);
  box-shadow: var(--glow-orange);
  transform: translateY(-3px);
}
.game-card__thumb {
  height: 110px;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}
.game-card__thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5) 100%);
}
.game-card__rank-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--orange); color: var(--white);
  font-size: 0.65rem; font-weight: 900;
  padding: 2px 7px; border-radius: 20px;
  z-index: 1; letter-spacing: .04em;
}
.game-card__body { padding: 14px 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.game-card__name { font-size: 0.88rem; font-weight: 800; color: var(--white); line-height: 1.3; }
.game-card__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.game-card__bonus {
  font-size: 0.8rem; font-weight: 800; color: var(--orange);
  margin-top: auto; padding-top: 4px;
}
.game-card__cta {
  display: block; width: 100%;
  background: var(--orange); color: var(--white);
  border: none; border-radius: var(--r-sm);
  padding: 9px; font-size: 0.82rem; font-weight: 800;
  text-align: center; cursor: pointer;
  transition: background var(--gap), box-shadow var(--gap);
  text-decoration: none !important;
}
.game-card__cta:hover { background: var(--orange-dark); box-shadow: var(--glow-orange); }

/* ============================================================
   SECTION DIVIDERS / CATEGORY TABS (OneCasino-style)
   ============================================================ */
.cat-tabs {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex-shrink: 0; padding: 7px 16px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  transition: all var(--gap); white-space: nowrap; font-family: inherit;
}
.cat-tab:hover { border-color: var(--orange); color: var(--orange); }
.cat-tab.active { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* Section with dark alternating BG */
.section--dark   { background: var(--bg-base); }
.section--surface{ background: var(--bg-surface); }
.section--deep   { background: #0e1115; }

/* ============================================================
   RESPONSIVE — Tablet, Mobile, Small Phone
   ============================================================ */

/* Scrollable table wrapper utility */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.info-table, .bonus-table { min-width: 480px; }

/* --- Tablet: up to 960px --- */
@media (max-width: 960px) {
  .container { padding: 0 20px; }

  /* Rank list: hide bonus column, show CTA full-width */
  .rank-item {
    grid-template-columns: 36px 56px 1fr;
    gap: 14px;
  }
  .rank-item__bonus { display: none; }
  .rank-item__cta { grid-column: 1 / -1; text-align: center; margin-top: 4px; }
  .rank-item .btn-cta { width: 100%; }

  /* Content layout: collapse sidebar */
  .content-cols { grid-template-columns: 1fr; }
  .content-sidebar { position: static; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }

  /* Footer: 2 columns */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Country grid: 2 columns */
  .country-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobile: up to 720px --- */
@media (max-width: 720px) {
  .container { padding: 0 16px; }
  body { font-size: 14px; }

  /* Sections */
  .section    { padding: 40px 0; }
  .section-sm { padding: 28px 0; }
  .section-xs { padding: 18px 0; }

  /* Navbar: hamburger */
  .navbar__inner { height: 58px; }
  .navbar__nav { display: none; }
  .navbar__hamburger { display: block; }
  .navbar__nav.open {
    display: flex; flex-direction: column;
    position: absolute; top: 58px; left: 0; right: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 12px; gap: 2px;
    box-shadow: var(--shadow-lg); z-index: 200;
  }
  .navbar__nav.open > li > a { padding: 11px 14px; font-size: 0.9rem; }
  /* Mobile dropdowns: open inline below parent */
  .navbar__nav.open .has-dropdown.open .dropdown {
    display: block;
    position: static;
    box-shadow: none; border: none;
    background: var(--bg-input);
    border-radius: var(--r-md);
    margin: 4px 0 4px 12px;
    animation: none;
    padding: 4px 0;
  }
  .navbar__nav.open .has-dropdown.open .dropdown a { padding: 9px 16px; font-size: 0.85rem; }
  /* Hide standalone US States item in hamburger — states live under Americas → USA */
  .navbar__nav.open .nav-us-states { display: none; }

  /* Mobile: US States sub-dropdown under USA */
  .sub-toggle {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 0.65rem; padding: 4px 6px;
    transition: transform 0.2s; line-height: 1; vertical-align: middle;
  }
  .has-sub.open .sub-toggle { transform: rotate(180deg); color: var(--orange); }
  .sub-parent { display: flex; align-items: center; }
  .sub-parent a { flex: 1; }
  .sub-dropdown {
    display: none; list-style: none;
    margin: 2px 0 4px 28px; padding: 0;
    border-left: 2px solid var(--border-mid);
  }
  .has-sub.open .sub-dropdown { display: block; }
  .sub-dropdown li a {
    display: block; padding: 7px 14px;
    font-size: 0.82rem; color: var(--text-muted);
    text-decoration: none; border-radius: var(--r-sm);
    transition: color var(--gap), background var(--gap);
  }
  .sub-dropdown li a:hover { color: var(--white); background: var(--bg-hover); }

  /* Hero */
  .hero { padding: 28px 0 22px; }
  .hero h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn,
  .hero__actions .btn-cta { width: 100%; justify-content: center; }
  .hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-top: 20px;
  }
  .hero__stat {
    padding: 12px 16px 12px 0;
    margin: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .hero__stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--border); }
  .hero__stat:nth-last-child(-n+2) { border-bottom: none; }

  /* Page hero */
  .page-hero { padding: 32px 0 24px; }
  .page-hero__meta { gap: 8px; }
  .page-hero__badge { font-size: 0.72rem; padding: 3px 10px; }

  /* Rank list */
  .rank-item {
    grid-template-columns: 28px 44px 1fr;
    padding: 12px;
    gap: 10px;
  }
  .rank-item__logo { width: 44px; height: 44px; font-size: 1.3rem; }
  .rank-item__bonus { display: none; }
  .rank-item__cta { grid-column: 1 / -1; text-align: center; margin-top: 6px; }
  .rank-item .btn-cta { width: 100%; }
  .rank-item__num { font-size: 1.2rem; }

  /* Op cards: stack CTA */
  .op-card { flex-wrap: wrap; gap: 12px; }
  .op-card__cta { width: 100%; text-align: center; }

  /* Grids */
  .game-grid    { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .country-grid { grid-template-columns: 1fr; }
  .topic-grid   { grid-template-columns: repeat(2, 1fr); }
  .blog-grid    { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tables: horizontal scroll */
  .info-table-wrap,
  .bonus-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .info-table  { min-width: 480px; }
  .bonus-table { min-width: 560px; }

  /* Article */
  .article-body { padding: 22px 16px; }
  .article-body h2 { font-size: 1.2rem; }
  .article-body h3 { font-size: 1rem; }

  /* Footer */
  .footer { padding: 40px 0 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__legal { flex-wrap: wrap; gap: 12px; }
  .footer__cruks { flex-direction: column; gap: 8px; }

  /* Trust & CRUKS */
  .trust-strip__inner { gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
  .cruks-bar__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cruks-bar__right { flex-wrap: wrap; gap: 8px; }

  /* Filter bar */
  .filter-bar { gap: 6px; }
  .filter-pill { padding: 5px 12px; font-size: 0.78rem; }

  /* Sidebar: static */
  .content-sidebar, .article-sidebar { position: static; }

  /* Section headers */
  .section-header { margin-bottom: 22px; }
}

/* --- Small phones: up to 480px --- */
@media (max-width: 480px) {
  .container { padding: 0 12px; }

  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.2rem; }

  .navbar__logo img { height: 26px; }

  /* Hero stats: single column */
  .hero__stats { grid-template-columns: 1fr; }
  .hero__stat { border-left: none !important; border-bottom: 1px solid var(--border); padding-left: 0 !important; }
  .hero__stat:last-child { border-bottom: none; }

  /* Rank items: tighter */
  .rank-item { grid-template-columns: 24px 40px 1fr; padding: 10px; gap: 8px; }
  .rank-item__logo { width: 40px; height: 40px; font-size: 1.1rem; }
  .rank-item__name { font-size: 0.85rem; }
  .rank-item__desc { display: none; }

  /* Game grid: 2 cols, smaller cards */
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .game-card__thumb { height: 80px; font-size: 2.2rem; }

  /* Country/topic */
  .country-card { padding: 18px 16px; }
  .country-card__name { font-size: 1rem; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Buttons */
  .btn-lg { padding: 11px 18px; font-size: 0.88rem; }
  .btn-cta.btn-lg { padding: 12px 20px; }

  /* Cat tabs: larger touch targets */
  .cat-tab { padding: 9px 16px; font-size: 0.82rem; }

  /* Page hero */
  .page-hero { padding: 24px 0 20px; }

  /* Footer legal links: stacked */
  .footer__legal { gap: 10px; }
}

/* ============================================================
   CASINO COMPARISON CARDS — FairPlay-inspired redesign
   Big logos · Big names · Orange CTA panel
   ============================================================ */
.compare-list { display: flex; flex-direction: column; gap: 16px; }

.ci {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 60px 130px 1fr 230px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  position: relative;
}
.ci:hover {
  border-color: rgba(255,107,24,.45);
  box-shadow: 0 8px 36px rgba(0,0,0,.35), 0 0 0 1px rgba(255,107,24,.12);
  transform: translateY(-2px);
}
.ci--top { border-left: 4px solid var(--orange); }

/* ---- Rank column ---- */
.ci__rank {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 900; letter-spacing: -.04em;
  color: var(--text-light);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 0 4px;
}
.ci__rank--1 { color: #f59e0b; font-size: 1.3rem; }
.ci__rank--2 { color: #94a3b8; }
.ci__rank--3 { color: #c87941; }

/* ---- Logo column ---- */
.ci__logo {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  font-size: 3.6rem;
  min-height: 110px;
  flex-shrink: 0;
  padding: 12px;
  position: relative;
}
.ci__logo img {
  width: 100%; height: 100%;
  max-width: 150px; min-height: 90px; max-height: 110px;
  object-fit: cover; object-position: center top;
  display: block; border-radius: 8px;
}
/* Operator screenshot thumbnail in "for women" top-5 cards */
.wi__shot {
  width: 84px; height: 56px; flex-shrink: 0;
  object-fit: cover; object-position: center top;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elevated);
}
@media (max-width: 480px) {
  .wi__shot { width: 64px; height: 44px; }
}

/* ---- Body column ---- */
.ci__body {
  padding: 20px 26px;
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
}
.ci__header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ci__name {
  font-size: 1.55rem; font-weight: 900;
  color: var(--white); letter-spacing: -.035em;
  line-height: 1.1;
}
.ci__name-link {
  color: inherit; text-decoration: none;
  transition: color .15s;
}
.ci__name-link:hover { color: #ff6b18; text-decoration: underline; text-underline-offset: 3px; }
.wi__name-link {
  color: inherit; text-decoration: none;
  transition: color .15s;
}
.wi__name-link:hover { color: #ff6b18; text-decoration: underline; text-underline-offset: 3px; }
.ci__rating { display: flex; align-items: center; gap: 8px; }
.ci__stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; line-height: 1; }
.ci__score {
  background: var(--bg-input); border: 1px solid var(--border-mid);
  color: var(--white); font-size: 0.82rem; font-weight: 800;
  padding: 3px 11px; border-radius: 999px;
}
.ci__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ci__desc {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.65;
  margin: 0;
}
.ci__pros {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 2px;
}
.ci__pros span {
  font-size: 0.8rem; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.ci__pros span::before {
  content: '✓';
  color: var(--green); font-weight: 900; font-size: 0.72rem;
  width: 14px; height: 14px;
  background: var(--green-light); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---- Offer panel ---- */
.ci__offer {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  padding: 20px 24px;
  background: linear-gradient(160deg, var(--bg-elevated) 0%, rgba(255,107,24,.06) 100%);
  border-left: 1px solid var(--border);
  text-align: center;
}
.ci__bonus-box {
  background: rgba(255,107,24,.1);
  border: 1px solid rgba(255,107,24,.25);
  border-radius: var(--r-md);
  padding: 10px 16px;
  width: 100%;
}
.ci__bonus {
  font-size: 1.15rem; font-weight: 900;
  color: var(--orange); letter-spacing: -.02em;
  line-height: 1.2;
}
.ci__bonus-label {
  font-size: 0.7rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 3px;
}
.ci__cta {
  display: block; width: 100%;
  background: var(--orange);
  color: #fff !important;
  border-radius: var(--r-md);
  padding: 13px 20px;
  font-size: 0.92rem; font-weight: 900;
  text-align: center;
  text-decoration: none !important;
  letter-spacing: .01em;
  transition: background .15s, box-shadow .15s, transform .12s;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255,107,24,.3);
}
.ci__cta:hover {
  background: var(--orange-dark);
  box-shadow: 0 6px 20px rgba(255,107,24,.45);
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none !important;
}
.ci__disclaimer {
  font-size: 0.67rem; color: var(--text-light); line-height: 1.4;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .ci { grid-template-columns: 50px 110px 1fr; }
  .ci__offer {
    grid-column: 1 / -1;
    flex-direction: row; justify-content: space-between; align-items: center;
    border-left: none; border-top: 1px solid var(--border);
    padding: 14px 20px; gap: 16px;
  }
  .ci__bonus-box { flex: 1; }
  .ci__cta { width: auto; padding: 12px 28px; }
}
@media (max-width: 720px) {
  .ci { grid-template-columns: 40px 90px 1fr; }
  .ci__name { font-size: 1.25rem; }
  .ci__logo { font-size: 2.8rem; min-height: 90px; }
  .ci__body { padding: 14px 16px; }
  .ci__pros { gap: 10px; }
  .ci__offer { flex-direction: column; align-items: stretch; }
  .ci__cta { width: 100%; }
}
@media (max-width: 480px) {
  .ci { grid-template-columns: 36px 80px 1fr; }
  .ci__name { font-size: 1.1rem; }
  .ci__logo { font-size: 2.4rem; min-height: 80px; }
  .ci__body { padding: 12px 12px; gap: 6px; }
  .ci__desc { display: none; }
  .ci__rating { flex-wrap: wrap; }
}


/* ── Hero split-layout with SVG illustration ─────────────────────────────── */
.article-hero__inner,.page-header__inner,.page-hero__inner{
  display:grid;grid-template-columns:1fr 280px;gap:36px;align-items:center}
.article-hero__svg,.page-header__svg,.page-hero__svg{
  display:flex;justify-content:center;align-items:center;
  opacity:.95}
@media(max-width:820px){
  .article-hero__inner,.page-header__inner,.page-hero__inner{
    grid-template-columns:1fr}
  .article-hero__svg,.page-header__svg,.page-hero__svg{display:none}}
/* ── In-article visual card (photo replacement) ──────────────────────────── */
.visual-card{
  border-radius:16px;overflow:hidden;margin:32px 0;
  background:linear-gradient(135deg,#1a1f28 0%,#12151a 100%);
  border:1px solid rgba(255,107,24,0.2);
  display:flex;align-items:center;gap:0;min-height:200px}
.visual-card__img{
  width:280px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:linear-gradient(135deg,#12151a,#1a1f28)}
.visual-card__body{padding:24px 28px;flex:1}
.visual-card__title{font-size:1.1rem;font-weight:800;color:#fff;margin:0 0 8px;letter-spacing:-.02em}
.visual-card__text{font-size:.87rem;color:#8b96a8;line-height:1.7;margin:0}
.visual-card__stat{font-size:2rem;font-weight:900;color:#ff6b18;letter-spacing:-.04em;margin:12px 0 4px}
.visual-card__stat-label{font-size:.78rem;color:#5a6578;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:640px){
  .visual-card{flex-direction:column}
  .visual-card__img{width:100%;min-height:160px}}

/* ── Screenshot frame ─────────────────────────────────── */
.screenshot-frame{margin:28px 0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#131619;position:relative;}
.screenshot-frame__img{display:block;width:100%;height:auto;max-height:380px;object-fit:cover;object-position:top;}
.screenshot-frame__img[src=""]{display:none;}
.screenshot-frame__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:12px;min-height:200px;}
.screenshot-frame__img:not([src=""])+.screenshot-frame__placeholder{display:none;}
.screenshot-frame__icon{font-size:2.4rem;opacity:.5;}
.screenshot-frame__label{font-size:.95rem;font-weight:700;color:#f1f5f9;opacity:.7;}
.screenshot-frame__hint{font-size:.78rem;color:#5a6578;line-height:1.6;max-width:400px;}
.screenshot-frame__hint code{background:rgba(255,107,24,.12);color:#ff6b18;padding:1px 6px;border-radius:4px;font-size:.75rem;}
.screenshot-frame__bar{background:#1e2228;border-top:1px solid rgba(255,255,255,.06);padding:8px 16px;display:flex;align-items:center;gap:8px;}
.screenshot-frame__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12);}
.screenshot-frame__url{font-size:.72rem;color:#5a6578;font-family:monospace;}
@media(max-width:640px){.screenshot-frame__placeholder{padding:32px 16px;min-height:140px;}.screenshot-frame__icon{font-size:1.8rem;}}

/* ── Operator warning banners ───────────────────────────── */
.op-warning{border-radius:12px;padding:18px 22px;margin:0 0 24px;display:flex;gap:14px;align-items:flex-start;font-size:.88rem;line-height:1.65;}
.op-warning--danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);border-left:4px solid #ef4444;}
.op-warning--warning{background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.35);border-left:4px solid #eab308;}
.op-warning__icon{font-size:1.4rem;flex-shrink:0;margin-top:1px;}
.op-warning__body{}
.op-warning__title{font-weight:800;font-size:.9rem;margin-bottom:5px;}
.op-warning--danger .op-warning__title{color:#f87171;}
.op-warning--warning .op-warning__title{color:#fbbf24;}
.op-warning__text{color:#8b96a8;margin-bottom:6px;}
.op-warning__verdict{color:#c9d1dc;font-weight:600;}
.op-warning__licence{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;margin-bottom:8px;}
.op-warning--danger .op-warning__licence{background:rgba(239,68,68,.2);color:#f87171;}
.op-warning--warning .op-warning__licence{background:rgba(234,179,8,.2);color:#fbbf24;}