/* ═══════════════════════════════════════════════════════════
   GoldBet IT — Production CSS
   Mobile-first • No external libs • Vanilla CSS
═══════════════════════════════════════════════════════════ */

/* ── 0. CSS Custom Properties ─────────────────────────── */
:root {
  --bg:           #061f67;
  --bg-deep:      #031851;
  --bg-soft:      #0f2c7d;
  --bg-mid:       #0a2258;
  --white-bg:     #f5f5f5;
  --panel:        #ffffff;
  --yellow:       #ffd200;
  --yellow-deep:  #c59a2c;
  --yellow-hover: #ffe033;
  --blue:         #0e63b7;
  --blue-deep:    #063f8e;
  --blue-btn:     #1565c0;
  --text:         #ffffff;
  --text-dark:    #1c1c1c;
  --text-mid:     #333333;
  --muted:        #d7d7d7;
  --muted-dark:   #666666;
  --line:         rgba(255,255,255,.12);
  --line-dark:    rgba(0,0,0,.1);
  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    22px;
  --shadow-soft:  0 12px 26px rgba(0,0,0,.18);
  --shadow-card:  0 4px 16px rgba(0,0,0,.22);
  --header-h:     82px;
  --bottom-nav-h: 64px;
  --container:    1720px;
  --gutter:       16px;
  --transition:   .22s ease;
}

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

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

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
}

body.body-locked { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul { list-style: none; }
summary { cursor: pointer; }
input, button, select, textarea { font-family: inherit; }

/* ── 2. Skip Link ─────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--yellow);
  color: var(--text-dark);
  padding: 8px 16px;
  font-weight: 700;
  font-size: .85rem;
  z-index: 10000;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* ── 3. Focus Visible ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* ── 4. Container ─────────────────────────────────────── */
.section-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── 5. HEADER ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
}

/* ── 5a. Top legal strip ──────────────────────────────── */
.top-legal-strip {
  background: #e8e8e8;
  color: #444;
  font-size: .72rem;
  height: 28px;
  display: flex;
  align-items: center;
}
.top-legal-strip__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.top-legal-strip__left { font-weight: 600; color: #333; }
.top-legal-strip__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.top-legal-strip__close {
  display: flex;
  align-items: center;
  color: #666;
  padding: 2px;
  border-radius: 3px;
  transition: color var(--transition);
}
.top-legal-strip__close:hover { color: #111; }

.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: .72rem;
}
.legal-badge svg { flex-shrink: 0; }

/* ── 5b. Promo strip ──────────────────────────────────── */
.promo-strip {
  background: var(--yellow);
  color: var(--text-dark);
  min-height: 38px;
  display: flex;
  align-items: center;
}
.promo-strip__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 6px var(--gutter) 6px calc(var(--gutter) + 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.promo-strip__text {
  font-size: .82rem;
  text-align: center;
  line-height: 1.4;
}
.promo-strip__text strong { font-weight: 700; }
.promo-strip__link {
  font-weight: 700;
  text-decoration: underline;
  color: var(--text-dark);
}
.promo-strip__close {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--text-dark);
  padding: 4px;
  border-radius: 3px;
  opacity: .7;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.promo-strip__close:hover { opacity: 1; }
.promo-strip.is-hidden { display: none; }

/* ── 5c. Main brand bar ───────────────────────────────── */
.main-brand-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand-bar__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Burger – mobile only */
.burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  padding: 4px;
  transition: background var(--transition);
}
.burger-btn:hover { background: var(--line); }
.burger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger-btn[aria-expanded="true"] .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger-btn[aria-expanded="true"] .burger-line:nth-child(2) {
  opacity: 0;
}
.burger-btn[aria-expanded="true"] .burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Logo */
.brand-logo { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo img { height: 32px; width: auto; }

/* Desktop nav – hidden on mobile */
.brand-nav { display: none; }
.brand-home { display: none; }

/* Brand actions */
.brand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.brand-utility-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--text);
  transition: background var(--transition);
}
.brand-utility-btn:hover { background: var(--line); }

.brand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), transform .12s;
}
.brand-btn:active { transform: scale(.97); }
.brand-btn--login {
  background: transparent;
  border: 1.5px solid var(--text);
  color: var(--text);
}
.brand-btn--login:hover { background: var(--line); }
.brand-btn--register {
  background: var(--yellow);
  color: var(--text-dark);
  border: 1.5px solid var(--yellow);
}
.brand-btn--register:hover { background: var(--yellow-hover); }

/* Mobile secondary subnav */
.mobile-subnav-row {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile-subnav-row::-webkit-scrollbar { display: none; }
.mobile-subnav-scroll {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  padding: 0 var(--gutter);
  height: 42px;
}
.mobile-subnav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.mobile-subnav-link:hover,
.mobile-subnav-link.is-active {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* ── 6. Desktop Header Overrides ──────────────────────── */
@media (min-width: 1024px) {
  :root { --gutter: 24px; }

  .burger-btn { display: none; }
  .mobile-subnav-row { display: none; }
  .brand-utility-btn { display: flex; }

  .brand-bar__inner { height: var(--header-h); gap: 0; }

  .brand-home {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px 0 20px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: background var(--transition);
  }
  .brand-home:hover { background: var(--line); }

  .brand-nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    margin: 0 8px;
  }
  .brand-nav__link {
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: 0 11px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color var(--transition), border-color var(--transition);
  }
  .brand-nav__link:hover {
    color: var(--yellow);
    border-bottom-color: var(--yellow);
  }
  .brand-nav__link.is-active {
    color: var(--yellow);
    border-bottom-color: var(--yellow);
  }

  .brand-actions { gap: 10px; }
  .brand-btn { height: 40px; padding: 0 20px; font-size: .8rem; }
}

@media (min-width: 1280px) {
  .brand-nav__link { padding: 0 13px; font-size: .8rem; }
}

/* ── 7. MAIN – general spacing ────────────────────────── */
.site-main { background: var(--bg-deep); }

/* Section titles */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.section-title--dark { color: var(--text-dark); }
.section-show-all {
  font-size: .82rem;
  color: var(--yellow);
  font-weight: 600;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.section-show-all:hover { opacity: .8; }

/* ── 8. Promo top section ─────────────────────────────── */
.promo-top-section {
  background: var(--bg-mid);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.promo-top-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px var(--gutter);
  min-height: 44px;
  text-align: center;
}
.promo-top-text {
  font-size: .83rem;
  color: var(--text);
  line-height: 1.4;
}
.promo-top-text strong { color: var(--yellow); }
.promo-top-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--yellow);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.promo-top-link:hover { opacity: .85; }
.promo-top-wheel { flex-shrink: 0; opacity: .9; }

/* placeholder brand-nav-section */
.brand-nav-section { display: none; }

/* ── 9. Subnav tabs ───────────────────────────────────── */
.subnav-section {
  background: var(--bg-mid);
  border-bottom: 1px solid var(--line);
}
.subnav-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-container::-webkit-scrollbar { display: none; }
.subnav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.subnav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  border-radius: 20px;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.subnav-tab:hover { color: var(--text); background: var(--line); }
.subnav-tab.is-active {
  background: rgba(255,255,255,.15);
  color: var(--text);
}
.subnav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e74c3c;
  display: inline-block;
}
.subnav-right { flex-shrink: 0; }
.subnav-search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255,255,255,.75);
  transition: background var(--transition), color var(--transition);
}
.subnav-search-trigger:hover { background: var(--line); color: var(--text); }

/* ── 10. Filter row ───────────────────────────────────── */
.filter-row-section {
  background: var(--bg-deep);
  padding: 10px 0;
}
.filter-row-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.filter-row__label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}
.filter-row__count {
  background: var(--yellow);
  color: var(--text-dark);
  font-size: .72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  line-height: 1.4;
}
.filter-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: rgba(255,255,255,.75);
  border: 1.5px solid var(--line);
  transition: background var(--transition);
}
.filter-row__icon:hover { background: var(--line); }
.search-box {
  position: relative;
  display: none;
}
.search-box__input {
  height: 36px;
  padding: 0 36px 0 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  font-size: .83rem;
  width: 220px;
  transition: border-color var(--transition);
  outline: none;
}
.search-box__input::placeholder { color: rgba(255,255,255,.45); }
.search-box__input:focus { border-color: var(--yellow); }
.search-box__icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.5);
  pointer-events: none;
}

@media (min-width: 768px) {
  .search-box { display: block; }
  .filter-row__icon { display: none; }
}

/* ── 11. Hero Banner ──────────────────────────────────── */
.hero-banner-section {
  background: var(--bg-deep);
  padding: 12px 0 16px;
}
.hero-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
/*
  Hero slider — grid-stacking approach.
  All slides share 1 grid cell; height follows the active image naturally.
  No fixed aspect-ratio → image shows at 100% width, height: auto → never cropped.
*/
.hero-slider {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deep);
  width: 100%;
  position: relative; /* anchor for prev/next arrows */
}
.hero-slide {
  /* stack all slides in the same cell */
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
  min-height: 0;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide__link {
  display: block;
  width: 100%;
}
.hero-slide__image {
  width: 100%;
  height: auto;       /* natural ratio — never cropped, never distorted */
  display: block;
  border-radius: 0;
}

/* Slider controls — overlay on top of grid stack */
.hero-prev, .hero-next {
  /* sit in the same grid cell as the slides, aligned via flex on .hero-container */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), opacity var(--transition);
  opacity: .7;
}
.hero-prev:hover, .hero-next:hover { background: rgba(0,0,0,.7); opacity: 1; }
.hero-prev { left: 12px; }
.hero-next { right: 12px; }

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.hero-dot.is-active {
  background: var(--yellow);
  transform: scale(1.25);
}
.hero-dot:hover { background: rgba(255,255,255,.6); }

/* hero border-radius at wider viewports — no aspect-ratio override needed */
@media (min-width: 600px) {
  .hero-slider { border-radius: var(--radius); }
}
@media (min-width: 768px) {
  .hero-slider { border-radius: var(--radius-lg); }
}
@media (min-width: 1200px) {
  .hero-prev, .hero-next { width: 44px; height: 44px; }
}

/* ── 12. Section spacing wrapper ──────────────────────── */
.bonus-welcome-section,
.interest-section,
.live-section,
.games-grid-section,
.bonus-cards-section,
.info-content-section,
.faq-section {
  padding: 20px 0;
}

/* ── 13. Bonus Welcome Section ────────────────────────── */
.bonus-welcome-header,
.interest-header,
.games-grid-header,
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bonus-welcome-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.bonus-welcome-row::-webkit-scrollbar { display: none; }
.welcome-card {
  flex: 0 0 240px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.welcome-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.welcome-card__link { display: block; color: var(--text-dark); }
.welcome-card__image-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.welcome-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .3s ease;
}
.welcome-card:hover .welcome-card__image { transform: scale(1.04); }
.welcome-card__badge-top {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: .63rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}
.welcome-card__overlay-cta {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  color: var(--text-dark);
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition);
}
.welcome-card:hover .welcome-card__overlay-cta { opacity: 1; }
.welcome-card__footer {
  background: var(--yellow);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
.welcome-card__amount {
  font-size: .78rem;
  color: var(--text-dark);
  font-weight: 500;
}
.welcome-card__amount strong { font-size: 1rem; font-weight: 800; }
.welcome-card__btn {
  display: block;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px;
  border-radius: 6px;
  text-align: center;
  transition: background var(--transition);
}
.welcome-card__link:hover .welcome-card__btn { background: var(--bg-soft); }

@media (min-width: 768px) {
  .welcome-card { flex: 0 0 260px; }
}
@media (min-width: 1024px) {
  .bonus-welcome-row { overflow-x: visible; flex-wrap: nowrap; justify-content: flex-start; }
  .welcome-card { flex: 1 1 0; min-width: 0; }
}

/* ── 14. Interest / Game row ──────────────────────────── */
.interest-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.interest-row::-webkit-scrollbar { display: none; }
.interest-card {
  flex: 0 0 160px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform .22s ease;
}
.interest-card:hover { transform: translateY(-2px); }
.interest-card__link { display: block; }
.interest-card__image {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

@media (min-width: 768px) {
  .interest-card { flex: 0 0 180px; }
}
@media (min-width: 1024px) {
  .interest-row { overflow-x: visible; flex-wrap: nowrap; }
  .interest-card { flex: 0 0 190px; }
}

/* ── 15. Games Grid ───────────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.game-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  transition: transform .22s ease;
}
.game-card:hover { transform: scale(1.03); }
.game-card__link { display: block; }
.game-card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
.game-card__badge {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .07em;
  white-space: nowrap;
  pointer-events: none;
}
.game-card__badge--exclusive {
  background: #8b0000;
}

@media (min-width: 480px) {
  .games-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (min-width: 768px) {
  .games-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
  .games-grid { grid-template-columns: repeat(7, 1fr); gap: 10px; }
}
@media (min-width: 1440px) {
  .games-grid { gap: 12px; }
}

/* ── 16. Bonus Cards Section ──────────────────────────── */
.bonus-cards-section {
  background: var(--white-bg);
  color: var(--text-dark);
  padding: 30px 0 40px;
}
.bonus-cards-section .section-title { color: var(--text-dark); margin-bottom: 24px; }

.bonus-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.bonus-sidebar {
  display: none;
}
.bonus-sidebar__list { display: flex; flex-direction: column; gap: 2px; }
.bonus-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-dark);
  border-radius: 6px;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.bonus-sidebar__item:hover { background: rgba(6,31,103,.08); color: var(--bg); }
.bonus-sidebar__item.is-active {
  background: var(--bg);
  color: var(--text);
}
.bonus-sidebar__item.is-active svg { color: var(--yellow); }

@media (min-width: 1024px) {
  .bonus-sidebar {
    display: block;
    flex: 0 0 220px;
    background: var(--panel);
    border-radius: var(--radius);
    padding: 12px 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    position: sticky;
    top: calc(var(--header-h) + 12px);
  }
}

.bonus-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .bonus-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .bonus-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1400px) {
  .bonus-grid { grid-template-columns: repeat(4, 1fr); }
}

.bonus-card {
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: transform .22s ease, box-shadow .22s ease;
  border: 1px solid var(--line-dark);
}
.bonus-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.13); }
.bonus-card__link { display: flex; flex-direction: column; height: 100%; color: var(--text-dark); }
.bonus-card__image-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-soft);
}
.bonus-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .3s ease;
}
.bonus-card:hover .bonus-card__image { transform: scale(1.04); }
.bonus-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.bonus-card__title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-dark);
  line-height: 1.3;
}
.bonus-card__text {
  font-size: .78rem;
  color: var(--muted-dark);
  line-height: 1.5;
  flex: 1;
}
.bonus-card__validity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.validity-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: .04em;
}
.bonus-card__timer {
  display: flex;
  gap: 4px;
}
.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 7px;
  min-width: 36px;
  text-align: center;
}
.timer-unit strong { font-size: .85rem; font-weight: 800; line-height: 1.2; }
.timer-unit small { font-size: .54rem; letter-spacing: .04em; opacity: .75; }
.bonus-card__cta {
  display: block;
  width: 100%;
  background: var(--blue-btn);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 9px;
  border-radius: 6px;
  text-align: center;
  margin-top: 4px;
  transition: background var(--transition);
  cursor: pointer;
}
.bonus-card__cta:hover { background: var(--blue-deep); }

/* ── 17. Help Strip ───────────────────────────────────── */
.help-strip-section {
  background: var(--bg);
  padding: 0;
}
.help-strip {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--bg-soft) 100%);
  padding: 36px var(--gutter);
}
.help-strip__content {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.help-strip__title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.help-strip__subtitle {
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  max-width: 500px;
}
.help-strip__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--text-dark);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 12px 36px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.help-strip__cta:hover { background: var(--yellow-hover); }

@media (min-width: 768px) {
  .help-strip__content {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
  }
  .help-strip__text { flex: 1; }
}

/* ── 18. Info Content ─────────────────────────────────── */
.info-content-section {
  background: var(--white-bg);
  color: var(--text-dark);
  padding: 40px 0;
}
.info-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .info-columns { grid-template-columns: 1fr 1fr; gap: 36px; }
}
.info-block { }
.info-block__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.info-block__text {
  font-size: .85rem;
  color: var(--muted-dark);
  line-height: 1.7;
  margin-bottom: 10px;
}
.info-link {
  color: var(--blue-btn);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.info-link:hover { color: var(--blue-deep); }

/* ── 19. FAQ ──────────────────────────────────────────── */
.faq-section {
  background: var(--white-bg);
  color: var(--text-dark);
  padding: 0 0 50px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.faq-item {
  background: var(--panel);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-dark);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.faq-item__question {
  padding: 14px 16px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted-dark);
  border-bottom: 2px solid var(--muted-dark);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] .faq-item__question::after { transform: rotate(-135deg); }
.faq-item__answer {
  padding: 0 16px 14px;
  font-size: .83rem;
  color: var(--muted-dark);
  line-height: 1.65;
}

/* ── 20. Mobile Bottom Nav ────────────────────────────── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: var(--bg);
  border-top: 1px solid var(--line);
  height: var(--bottom-nav-h);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255,255,255,.65);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 2px;
  transition: color var(--transition), background var(--transition);
  border-radius: 0;
}
.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item.is-active {
  color: var(--yellow);
}
.mobile-bottom-nav__item svg { flex-shrink: 0; }

/* Add bottom padding to main for bottom nav */
@media (max-width: 1023px) {
  .site-main { padding-bottom: var(--bottom-nav-h); }
  .site-footer { padding-bottom: var(--bottom-nav-h); }
}
@media (min-width: 1024px) {
  .mobile-bottom-nav { display: none; }
}

/* ── 21. Mobile Drawer ────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  pointer-events: none;
}
.mobile-drawer:not([hidden]) { pointer-events: auto; }
.mobile-drawer[hidden] { display: none; }

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s;
}
.mobile-drawer:not([hidden]) .mobile-drawer__backdrop { opacity: 1; }

.mobile-drawer__panel {
  position: relative;
  z-index: 1;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--bg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 32px rgba(0,0,0,.4);
}
.mobile-drawer:not([hidden]) .mobile-drawer__panel { transform: translateX(0); }

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mobile-drawer__close {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.7);
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition);
}
.mobile-drawer__close:hover { color: var(--text); }

.mobile-drawer__nav {
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}
.mobile-drawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
  transition: background var(--transition), color var(--transition);
}
.mobile-drawer__link:hover { background: var(--line); color: var(--yellow); }

.mobile-drawer__footer-links {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.mobile-drawer__footer-link {
  display: block;
  padding: 10px 20px;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  transition: color var(--transition);
}
.mobile-drawer__footer-link:hover { color: var(--text); }

.mobile-drawer__ctas {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .07em;
  transition: background var(--transition);
}
.drawer-btn--login {
  background: transparent;
  border: 1.5px solid var(--text);
  color: var(--text);
}
.drawer-btn--login:hover { background: var(--line); }
.drawer-btn--register {
  background: var(--yellow);
  color: var(--text-dark);
}
.drawer-btn--register:hover { background: var(--yellow-hover); }

/* ── 22. Login Overlay ────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
@media (min-width: 600px) {
  .login-overlay { align-items: center; justify-content: center; }
}

.login-overlay:not([hidden]) { pointer-events: auto; }
.login-overlay[hidden] { display: none; }

.login-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s;
}
.login-overlay:not([hidden]) .login-overlay__backdrop { opacity: 1; }

.login-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow-y: auto;
  max-height: 92vh;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
@media (min-width: 600px) {
  .login-panel {
    border-radius: var(--radius-lg);
    transform: translateY(20px);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
  }
  .login-overlay:not([hidden]) .login-panel {
    transform: translateY(0);
    opacity: 1;
  }
}
.login-overlay:not([hidden]) .login-panel { transform: translateY(0); }

.login-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
}
.login-panel__close {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.7);
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition);
}
.login-panel__close:hover { color: var(--text); }

.login-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-form__field {
  position: relative;
}
.login-form__input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: #eaeaea;
  color: var(--text-dark);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition);
}
.login-form__input:focus { border-color: var(--blue); }
.login-form__input::placeholder { color: #888; }
.login-form__field--pw .login-form__input { padding-right: 48px; }
.login-form__pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition);
}
.login-form__pw-toggle:hover { color: var(--text-dark); }
.login-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--blue-btn);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  cursor: pointer;
}
.login-form__submit:hover { background: var(--blue-deep); }
.login-form__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--yellow);
  color: var(--text-dark);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.login-form__secondary:hover { background: var(--yellow-hover); }
.login-form__forgot {
  text-align: left;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.login-form__forgot:hover { color: var(--text); }

.login-links {
  border-top: 1px solid var(--line);
  padding: 0 0 4px;
}
.login-links__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: background var(--transition);
}
.login-links__item::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255,255,255,.5);
  border-bottom: 2px solid rgba(255,255,255,.5);
  transform: rotate(-45deg);
}
.login-links__item:hover { background: var(--line); }

.login-panel__legal {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.login-panel__legal-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.legal-badge--lg { transform: scale(1); }
.login-panel__legal-text {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  margin-top: 6px;
}

/* ── 23. Footer ───────────────────────────────────────── */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}
.footer-main { padding: 40px 0 20px; }
.footer-columns {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 600px) {
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .footer-columns { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .footer-columns { grid-template-columns: repeat(4, 1fr) 200px; }
}

.footer-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.footer-gioca-legale {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--yellow);
  opacity: .8;
}
.footer-title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text);
  margin-bottom: 12px;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links__item {
  font-size: .8rem;
  color: rgba(255,255,255,.65);
  transition: color var(--transition);
  line-height: 1.3;
}
.footer-links__item:hover { color: var(--text); }

.footer-location { }
.footer-location__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.footer-location__label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text);
  line-height: 1.4;
}
.footer-location__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition);
}
.footer-location__icon:hover { opacity: .8; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 20px 0 24px;
}
.footer-bottom__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-bottom__legal-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-legal-text {
  font-size: .73rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  max-width: 820px;
}
.footer-legal-link {
  color: rgba(255,255,255,.7);
  text-decoration: underline;
}
.footer-legal-link:hover { color: var(--text); }
.footer-payments {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.payment-method {
  display: flex;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  opacity: .8;
  transition: opacity var(--transition);
}
.payment-method:hover { opacity: 1; }

/* ── 24. Floating Badge ───────────────────────────────── */
.floating-badge {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 14px);
  right: 14px;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  transition: transform .2s ease, opacity .2s;
}
.floating-badge:hover { transform: scale(1.1); }
.floating-badge__ring { display: flex; }

@media (min-width: 1024px) {
  .floating-badge {
    bottom: 24px;
    right: 24px;
    width: 70px;
    height: 70px;
  }
}

/* ── 25. Back to Top ──────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 14px);
  left: 14px;
  z-index: 700;
  width: 42px;
  height: 42px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background var(--transition);
}
.back-to-top:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover { background: var(--bg); }

@media (min-width: 1024px) {
  .back-to-top { bottom: 24px; left: 24px; }
}

/* ── 26. Reveal animations ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 27. Sticky header shadow ─────────────────────────── */
.site-header.is-scrolled .main-brand-bar {
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

/* ── 28. prefers-reduced-motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-slide { transition: none; }
}

/* ── 29. Utility ──────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── 30. Section padding overrides ───────────────────────*/
@media (min-width: 768px) {
  .bonus-welcome-section,
  .interest-section,
  .live-section,
  .games-grid-section { padding: 24px 0; }
  .bonus-cards-section { padding: 36px 0 48px; }
  .info-content-section { padding: 48px 0; }
  .faq-section { padding: 0 0 60px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .bonus-welcome-section,
  .interest-section,
  .live-section,
  .games-grid-section { padding: 28px 0; }
  .section-title { font-size: 1.25rem; }
}

/* ── 31. SEO Text Section ─────────────────────────────── */
#seo-text {
  background: var(--white-bg);
  color: var(--text-dark);
}

.seo-text-section {
  padding: 48px 0 64px;
}

.seo-container {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.seo-h1 {
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--bg);
  line-height: 1.25;
  margin-bottom: 22px;
  letter-spacing: -.01em;
}

.seo-h2 {
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  font-weight: 800;
  color: var(--bg);
  line-height: 1.3;
  margin: 40px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--yellow);
  letter-spacing: -.01em;
}

.seo-p {
  font-size: .9rem;
  color: #333;
  line-height: 1.8;
  margin-bottom: 16px;
}
.seo-p strong { color: var(--bg); font-weight: 700; }

/* ── Tables ───────────────────────────────────────────── */
.seo-table-wrap {
  margin: 28px 0;
}
.seo-table-caption {
  font-size: .78rem;
  color: #666;
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.5;
}
.seo-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.seo-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: .82rem;
  background: var(--panel);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.seo-table thead {
  background: var(--bg);
  color: var(--text);
}
.seo-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.seo-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background .15s;
}
.seo-table tbody tr:last-child { border-bottom: none; }
.seo-table tbody tr:nth-child(even) { background: #f9f9f9; }
.seo-table tbody tr:hover { background: #f0f4ff; }
.seo-table tbody td {
  padding: 10px 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.seo-table tbody td:first-child { font-weight: 600; color: var(--bg); }

/* SEO tables — mobile: fit viewport width, no horizontal scroll */
@media (max-width: 639px) {
  .seo-table-scroll {
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
    /* Scale typography from viewport so wide tables stay on-screen */
    font-size: clamp(8px, 2.65vw, 11px);
  }
  .seo-table {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    font-size: 1em;
  }
  .seo-table thead th {
    white-space: normal;
    vertical-align: bottom;
    padding: 7px 4px;
    font-size: 0.92em;
    line-height: 1.2;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  .seo-table tbody td {
    padding: 6px 4px;
    font-size: 1em;
    line-height: 1.28;
    vertical-align: top;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  .seo-table-caption {
    font-size: clamp(0.68rem, 3.2vw, 0.78rem);
    line-height: 1.45;
    padding: 0 2px;
  }
}

@media (max-width: 380px) {
  .seo-table-scroll {
    font-size: clamp(7px, 2.5vw, 10px);
  }
  .seo-table thead th {
    padding: 6px 3px;
  }
  .seo-table tbody td {
    padding: 5px 3px;
  }
}

/* ── FAQ ──────────────────────────────────────────────── */
.seo-faq {
  margin-top: 40px;
}
.seo-faq-item {
  border-bottom: 1px solid #e2e2e2;
}
.seo-faq-item:first-of-type { border-top: 1px solid #e2e2e2; }
.seo-faq-details {}
.seo-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--bg);
  list-style: none;
  cursor: pointer;
  transition: color .15s;
}
.seo-faq-question::-webkit-details-marker { display: none; }
.seo-faq-question::after {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -3px;
}
.seo-faq-details[open] .seo-faq-question::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.seo-faq-details[open] .seo-faq-question { color: var(--blue-btn); }
.seo-faq-answer {
  padding: 0 4px 16px;
}
.seo-faq-answer p {
  font-size: .86rem;
  color: #555;
  line-height: 1.75;
}