/* ===== assets/css/themes.css ===== */
:root {
  /* Base palette */
  --color-bg: #0b1020;
  --color-bg-soft: #0f1730;
  --color-bg-deep: #050712;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-text: rgba(245, 247, 255, 0.95);
  --color-text-muted: rgba(163, 172, 196, 0.92);

  /* Brand */
  --color-primary: #ff6b35;
  --color-primary-dark: #e25522;
  --color-secondary: #6ee7ff;

  /* Semantics */
  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-danger: #ef4444;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC",
    "Microsoft YaHei", sans-serif;

  /* Radius / shadow */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 16px 56px rgba(0, 0, 0, 0.32);

  /* Card system tokens (used across modules.css) */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius-sm: var(--radius-sm);
  --card-radius-md: var(--radius-md);
  --card-radius-lg: var(--radius-lg);
  --card-radius-xl: calc(var(--radius-lg) + 6px);
  --card-shadow-sm: var(--shadow-sm);
  --card-shadow-md: var(--shadow-md);

  /* Spacing tokens (used by layout_density + modules.css) */
  --gap-sm: 10px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 18px;
  --card-pad-sm: 14px;
  --card-pad: 16px;
  --card-pad-lg: 18px;

  /* Typography / component sizing tokens (used by layout_density) */
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --lh-base: 1.6;

  --btn-gap: 10px;
  --btn-pad-y: 10px;
  --btn-pad-x: 14px;
  --btn-radius: 14px;
  --btn-lg-pad-y: 12px;
  --btn-lg-pad-x: 18px;
  --btn-lg-radius: 16px;
  --btn-sm-pad-y: 8px;
  --btn-sm-pad-x: 12px;
  --btn-sm-radius: 12px;
  --btn-sm-text: var(--text-sm);

  --chip-gap: 10px;
  --chip-pad-y: 10px;
  --chip-pad-x: 12px;
  --chip-radius: 999px;
  --chip-text: var(--text-sm);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.10);

  /* Component-style DNA tokens (drive via html[data-*]) */
  --btn-primary-bg: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  --btn-primary-hover-bg: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  --btn-primary-border: rgba(255, 255, 255, 0.12);
  --btn-primary-text: rgba(255, 255, 255, 0.95);
  --btn-primary-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
  --btn-primary-shadow-hover: 0 18px 52px rgba(0, 0, 0, 0.42);

  --title-transform: none;
  --title-letter-spacing: -0.2px;
  --section-title-size: clamp(22px, 2.2vw, 28px);
  --page-title-size: clamp(24px, 2.8vw, 34px);
  --hero-title-size: clamp(30px, 3.9vw, 46px);

  /* Font pairing (title + body) */
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --body-weight: 450;
  --title-weight: 900;

  /* Icon / illustration container tokens */
  --iconbox-bg: rgba(255, 255, 255, 0.06);
  --iconbox-border: rgba(255, 255, 255, 0.10);
  --iconbox-color: rgba(245, 247, 255, 0.92);
  --iconbox-radius: 14px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 20px;
  --header-h: 76px;
  /* Tighten vertical rhythm */
  --section-pad-y: 48px;
  --section-pad-y-sm: 36px;

  /* Hero vertical spacing */
  --hero-pad-top: calc(var(--section-pad-y) + 8px);
  --hero-pad-bottom: var(--section-pad-y-sm);
}

/* Module surface contract
   -----------------------
   A module declares the surface it owns. Components consume these semantic
   foreground, border and elevation tokens without inferring contrast from the
   page-wide theme. */
[data-surface-tone="dark"] {
  --surface-bg: #070a14;
  --surface-bg-glass: rgba(7, 10, 20, 0.82);
  --surface-elevated: rgba(17, 24, 39, 0.92);
  --surface-text: rgba(248, 250, 252, 0.97);
  --surface-text-muted: rgba(226, 232, 240, 0.78);
  --surface-border: rgba(255, 255, 255, 0.16);
  --surface-control-bg: rgba(255, 255, 255, 0.08);
  --surface-control-border: rgba(255, 255, 255, 0.2);
  --surface-action-bg: #f8fafc;
  --surface-action-text: #0f172a;
  --surface-action-border: rgba(255, 255, 255, 0.3);
  --surface-interactive-hover: rgba(255, 255, 255, 0.08);
  --surface-interactive-active: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

[data-surface-tone="light"] {
  --surface-bg: #f8fafc;
  --surface-bg-glass: rgba(248, 250, 252, 0.9);
  --surface-elevated: rgba(255, 255, 255, 0.96);
  --surface-text: #0f172a;
  --surface-text-muted: #334155;
  --surface-border: rgba(15, 23, 42, 0.16);
  --surface-control-bg: rgba(15, 23, 42, 0.06);
  --surface-control-border: rgba(15, 23, 42, 0.2);
  --surface-action-bg: #0f172a;
  --surface-action-text: #f8fafc;
  --surface-action-border: rgba(15, 23, 42, 0.32);
  --surface-interactive-hover: rgba(15, 23, 42, 0.06);
  --surface-interactive-active: rgba(15, 23, 42, 0.1);
  color-scheme: light;
}

/* Mobile container padding */
@media (max-width: 767px) {
  :root {
    --container-pad: 15px;
    /* Default (density=normal) */
    --section-pad-y: 28px;
    --section-pad-y-sm: 20px;
    --header-h: 68px;

    /* Hero on small screens should be tighter */
    --hero-pad-top: calc(var(--section-pad-y) + 4px);
    --hero-pad-bottom: 16px;
  }

  /* Clamp layout_density on small screens to avoid huge whitespace */
  html[data-density="spacious"] {
    --section-pad-y: 36px;
    --section-pad-y-sm: 26px;
    --gap-lg: 14px;
    --gap-xl: 16px;
    --card-pad-lg: 18px;

    /* Keep hero spacing reasonable even in spacious mode */
    --hero-pad-bottom: 18px;
  }
}

/* Theme examples (at least 5) */
html[data-theme="sports"] {
  --color-primary: #38bdf8;
  --color-primary-dark: #0891b2;
  --color-secondary: #a7f3d0;
}
html[data-theme="sports"] body {
  /* Softer, less "banded" top-to-bottom transition for reuse across sites */
  background: radial-gradient(1100px 620px at 18% -10%, rgba(56, 189, 248, 0.09), transparent 62%),
    radial-gradient(900px 520px at 86% 12%, rgba(167, 243, 208, 0.07), transparent 60%),
    linear-gradient(180deg, #071526 0%, #060b18 52%, #050712 100%);
  background-attachment: fixed;
}
html[data-theme="sports"] .btn--secondary {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.22);
}
html[data-theme="sports"] .btn--ghost:hover {
  background: rgba(56, 189, 248, 0.10);
}
html[data-theme="sports"] .feature-card,
html[data-theme="sports"] .testimonial-card,
html[data-theme="sports"] .hot-game-card,
html[data-theme="sports"] .promo-card,
html[data-theme="sports"] .quote-card,
html[data-theme="sports"] .feature-row,
html[data-theme="sports"] .event-row {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.18);
}
html[data-theme="casino"] {
  --color-primary: #f59e0b;
  --color-primary-dark: #d97706;
  --color-secondary: #fb7185;
}
html[data-theme="casino"] body {
  background: radial-gradient(900px 520px at 20% 0%, rgba(245, 158, 11, 0.12), transparent 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(251, 113, 133, 0.10), transparent 60%),
    linear-gradient(180deg, #160b06 0%, #070711 70%, #050712 100%);
}
html[data-theme="casino"] .btn--secondary {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.22);
}
html[data-theme="casino"] .btn--ghost:hover {
  background: rgba(245, 158, 11, 0.10);
}
html[data-theme="casino"] .feature-card,
html[data-theme="casino"] .testimonial-card,
html[data-theme="casino"] .hot-game-card,
html[data-theme="casino"] .promo-card,
html[data-theme="casino"] .quote-card,
html[data-theme="casino"] .feature-row,
html[data-theme="casino"] .event-row {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.18);
}
html[data-theme="casino_neon"] {
  /* High-contrast neon casino */
  --color-bg: #070914;
  --color-bg-soft: #0b1024;
  --color-surface: rgba(255, 255, 255, 0.07);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(172, 182, 210, 0.92);

  --color-primary: #22c55e; /* neon green */
  --color-primary-dark: #16a34a;
  --color-secondary: #f97316; /* neon orange */

  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 22px 74px rgba(0, 0, 0, 0.40);
}
html[data-theme="casino_neon"] body {
  background: radial-gradient(900px 520px at 20% 0%, rgba(34, 197, 94, 0.14), transparent 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(249, 115, 22, 0.14), transparent 60%),
    linear-gradient(180deg, #060713 0%, #050712 70%, #050712 100%);
}
html[data-theme="casino_neon"] .btn--secondary {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.22);
}
html[data-theme="casino_neon"] .btn--ghost:hover {
  background: rgba(34, 197, 94, 0.10);
}
html[data-theme="casino_neon"] .feature-card,
html[data-theme="casino_neon"] .testimonial-card,
html[data-theme="casino_neon"] .hot-game-card,
html[data-theme="casino_neon"] .promo-card,
html[data-theme="casino_neon"] .quote-card,
html[data-theme="casino_neon"] .feature-row,
html[data-theme="casino_neon"] .event-row {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.18);
}
html[data-theme="slots_arcade"] {
  /* Ultra vivid arcade slots */
  --color-bg: #07051a;
  --color-bg-soft: #0d0a2a;
  --color-surface: rgba(255, 255, 255, 0.07);
  --color-surface-2: rgba(255, 255, 255, 0.11);
  --color-border: rgba(255, 255, 255, 0.16);
  --color-text: rgba(245, 247, 255, 0.97);
  --color-text-muted: rgba(190, 198, 226, 0.92);

  --color-primary: #ff3df5; /* neon magenta */
  --color-primary-dark: #c000b8;
  --color-secondary: #22c55e; /* neon green */

  --shadow-sm: 0 10px 34px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 26px 86px rgba(0, 0, 0, 0.48);
}
html[data-theme="slots_arcade"] body {
  background: radial-gradient(900px 520px at 20% 0%, rgba(255, 61, 245, 0.14), transparent 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(34, 197, 94, 0.12), transparent 60%),
    linear-gradient(180deg, #07051a 0%, #050712 70%, #050712 100%);
}
html[data-theme="slots_arcade"] .btn--secondary {
  background: rgba(255, 61, 245, 0.10);
  border-color: rgba(255, 61, 245, 0.22);
}
html[data-theme="slots_arcade"] .btn--ghost:hover {
  background: rgba(255, 61, 245, 0.10);
}
html[data-theme="slots_arcade"] .feature-card,
html[data-theme="slots_arcade"] .testimonial-card,
html[data-theme="slots_arcade"] .hot-game-card,
html[data-theme="slots_arcade"] .promo-card,
html[data-theme="slots_arcade"] .quote-card,
html[data-theme="slots_arcade"] .feature-row,
html[data-theme="slots_arcade"] .event-row {
  background: rgba(255, 61, 245, 0.06);
  border-color: rgba(255, 61, 245, 0.18);
}
html[data-theme="vip"] {
  --color-primary: #c084fc;
  --color-primary-dark: #7c3aed;
  --color-secondary: #fcd34d;
  --color-surface: rgba(255, 255, 255, 0.08);
}
html[data-theme="vip"] body {
  background: radial-gradient(900px 520px at 20% 0%, rgba(192, 132, 252, 0.14), transparent 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(252, 211, 77, 0.12), transparent 60%),
    linear-gradient(180deg, #0b0620 0%, #050712 70%, #050712 100%);
}
html[data-theme="vip"] .btn--secondary {
  background: rgba(192, 132, 252, 0.10);
  border-color: rgba(192, 132, 252, 0.22);
}
html[data-theme="vip"] .btn--ghost:hover {
  background: rgba(192, 132, 252, 0.10);
}
html[data-theme="vip"] .feature-card,
html[data-theme="vip"] .testimonial-card,
html[data-theme="vip"] .hot-game-card,
html[data-theme="vip"] .promo-card,
html[data-theme="vip"] .quote-card,
html[data-theme="vip"] .feature-row,
html[data-theme="vip"] .event-row {
  background: rgba(192, 132, 252, 0.06);
  border-color: rgba(192, 132, 252, 0.18);
}
html[data-theme="minimal"] {
  /* Light theme (big visual difference) */
  --color-bg: #f8fafc;
  --color-bg-soft: #eef2ff;
  --color-surface: rgba(15, 23, 42, 0.04);
  --color-surface-2: rgba(15, 23, 42, 0.06);
  --color-border: rgba(15, 23, 42, 0.12);
  --color-text: rgba(15, 23, 42, 0.96);
  --color-text-muted: rgba(15, 23, 42, 0.74);

  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-secondary: #10b981;

  --shadow-sm: 0 10px 26px rgba(15, 23, 42, 0.10);
  --shadow-md: 0 18px 64px rgba(15, 23, 42, 0.14);

  /* Component tokens used by theme overrides in modules.css */
  --card-bg: rgba(255, 255, 255, 0.86);
  --card-border: rgba(15, 23, 42, 0.12);
  --chip-bg: rgba(15, 23, 42, 0.04);
  --chip-border: rgba(15, 23, 42, 0.12);
}

html[data-theme="minimal"] body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 55%, #e2e8f0 100%);
  background-attachment: fixed;
}
html[data-theme="minimal"] .skip-link {
  background: rgba(15, 23, 42, 0.92);
}
html[data-theme="minimal"] .btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
}
html[data-theme="minimal"] .btn--secondary {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="minimal"] .btn--secondary:hover {
  background: rgba(15, 23, 42, 0.06);
}
html[data-theme="minimal"] .btn--ghost:hover {
  background: rgba(15, 23, 42, 0.05);
}
html[data-theme="neon"] {
  --color-primary: #22c55e;
  --color-primary-dark: #16a34a;
  --color-secondary: #f97316;
}
html[data-theme="neon"] body {
  background: radial-gradient(900px 520px at 20% 0%, rgba(34, 197, 94, 0.14), transparent 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(249, 115, 22, 0.12), transparent 60%),
    linear-gradient(180deg, #070914 0%, #050712 70%, #050712 100%);
}
html[data-theme="neon"] .btn--secondary {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.22);
}
html[data-theme="neon"] .btn--ghost:hover {
  background: rgba(34, 197, 94, 0.10);
}
html[data-theme="neon"] .feature-card,
html[data-theme="neon"] .testimonial-card,
html[data-theme="neon"] .hot-game-card,
html[data-theme="neon"] .promo-card,
html[data-theme="neon"] .quote-card,
html[data-theme="neon"] .feature-row,
html[data-theme="neon"] .event-row {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.18);
}

/* Extra theme variants (more visible differences for random builds) */
html[data-theme="midnight"] {
  --color-bg: #050814;
  --color-bg-soft: #0b1230;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(186, 198, 226, 0.92);
  --color-primary: #60a5fa;
  --color-primary-dark: #2563eb;
  --color-secondary: #a78bfa;
}
html[data-theme="midnight"] body {
  background: radial-gradient(1000px 560px at 20% 0%, rgba(96, 165, 250, 0.12), transparent 60%),
    radial-gradient(1000px 560px at 80% 10%, rgba(167, 139, 250, 0.10), transparent 60%),
    linear-gradient(180deg, #050814 0%, #050712 72%, #050712 100%);
}
html[data-theme="midnight"] .btn--secondary {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.22);
}
html[data-theme="midnight"] .btn--ghost:hover {
  background: rgba(96, 165, 250, 0.10);
}
html[data-theme="midnight"] .feature-card,
html[data-theme="midnight"] .testimonial-card,
html[data-theme="midnight"] .hot-game-card,
html[data-theme="midnight"] .promo-card,
html[data-theme="midnight"] .quote-card,
html[data-theme="midnight"] .feature-row,
html[data-theme="midnight"] .event-row {
  background: rgba(96, 165, 250, 0.06);
  border-color: rgba(96, 165, 250, 0.18);
}

/* Site DNA: mode / density / card style */
html[data-mode="light"] {
  --color-bg: #f8fafc;
  --color-bg-soft: #eef2ff;
  --color-bg-deep: #e2e8f0;
  --color-surface: rgba(15, 23, 42, 0.04);
  --color-surface-2: rgba(15, 23, 42, 0.06);
  --color-border: rgba(15, 23, 42, 0.12);
  --color-text: #0f172a;
  --color-text-muted: #334155;
  --color-action-text: color-mix(in oklab, var(--color-primary) 52%, var(--color-text));
  --color-on-dark: rgba(248, 250, 252, 0.97);
  --shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 18px 64px rgba(15, 23, 42, 0.12);
}
html[data-mode="light"] body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 55%, #e2e8f0 100%);
  background-attachment: fixed;
}
html[data-mode="light"] .skip-link {
  background: rgba(15, 23, 42, 0.92);
}
html[data-mode="light"] .btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
}

/* Keep light theme variants visually distinct (mode block would otherwise flatten them) */
html[data-mode="light"][data-theme="minimal_blue"] {
  --color-bg: #f8fafc;
  --color-bg-soft: #eff6ff;
  --color-bg-deep: #dbeafe;
  --color-surface: rgba(30, 64, 175, 0.05);
  --color-surface-2: rgba(30, 64, 175, 0.08);
  --color-border: rgba(30, 64, 175, 0.18);
  --color-text: #172554;
  --color-text-muted: #334155;
}
html[data-mode="light"][data-theme="minimal_blue"] body {
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 55%, #dbeafe 100%);
  background-attachment: fixed;
}

html[data-mode="light"][data-theme="minimal_amber"] {
  --color-bg: #fffbeb;
  --color-bg-soft: #fef3c7;
  --color-bg-deep: #fde68a;
  --color-surface: rgba(120, 53, 15, 0.05);
  --color-surface-2: rgba(120, 53, 15, 0.08);
  --color-border: rgba(120, 53, 15, 0.18);
  --color-text: #431407;
  --color-text-muted: #78350f;
}
html[data-mode="light"][data-theme="minimal_amber"] body {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
  background-attachment: fixed;
}

html[data-mode="light"][data-theme="minimal_violet"] {
  --color-bg: #faf5ff;
  --color-bg-soft: #f3e8ff;
  --color-bg-deep: #e9d5ff;
  --color-surface: rgba(88, 28, 135, 0.06);
  --color-surface-2: rgba(88, 28, 135, 0.10);
  --color-border: rgba(88, 28, 135, 0.20);
  --color-text: #3b0764;
  --color-text-muted: #4c1d95;
}
html[data-mode="light"][data-theme="minimal_violet"] body {
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 55%, #e9d5ff 100%);
  background-attachment: fixed;
}

/* Filled actions on light pages keep the brand hue but pull both gradient
   stops toward ink. This gives white labels a stable AA surface for every
   palette instead of relying on the raw primary color being dark enough. */
html[data-mode="light"][data-btn-style="filled"] {
  --btn-primary-bg: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-primary) 52%, #0f172a),
    color-mix(in oklab, var(--color-primary-dark) 52%, #0f172a)
  );
  --btn-primary-hover-bg: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-primary) 58%, #0f172a),
    color-mix(in oklab, var(--color-primary-dark) 58%, #0f172a)
  );
  --btn-primary-text: #f8fafc;
  --btn-primary-border: rgba(15, 23, 42, 0.22);
}

/* Font pairs: 2~3 combos per site (screenshot requirement) */
html[data-font-pair="A"] {
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --body-weight: 450;
  --title-weight: 900;
}
html[data-font-pair="B"] {
  --font-body: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, "Noto Sans",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, "Noto Sans",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --body-weight: 430;
  --title-weight: 850;
}
html[data-font-pair="C"] {
  --font-body: var(--font-sans);
  --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Noto Serif", Georgia, "Times New Roman", serif;
  --body-weight: 450;
  --title-weight: 800;
}

/* Locale typography contract. It intentionally follows the decorative font
   pair axis: script coverage and diacritic integrity outrank random pairing. */
html[lang^="zh"] {
  --font-body: "PingFang SC", "PingFang TC", "Microsoft YaHei", "Microsoft JhengHei", "Noto Sans CJK SC", "Noto Sans CJK TC", Arial, sans-serif;
  --font-display: var(--font-body);
  --title-letter-spacing: 0em;
  --hero-title-letter-spacing: 0em;
}

html[lang^="vi"] {
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Noto Sans", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Noto Sans", Arial, sans-serif;
  --title-letter-spacing: -0.01em;
  --hero-title-letter-spacing: -0.015em;
}

html[lang^="ms"] {
  --font-body: "Segoe UI Variable Text", "Segoe UI", Inter, "Noto Sans", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, "Noto Sans", Arial, sans-serif;
  --title-letter-spacing: -0.012em;
  --hero-title-letter-spacing: -0.02em;
}

html[lang^="en"] {
  --font-body: "Segoe UI Variable Text", "Segoe UI", Inter, "Noto Sans", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, "Noto Sans", Arial, sans-serif;
  --title-letter-spacing: -0.02em;
  --hero-title-letter-spacing: -0.035em;
}

/* Icon style: line vs solid */
html[data-icon-style="line"] {
  --iconbox-bg: transparent;
  --iconbox-border: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
  --iconbox-color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
html[data-icon-style="solid"] {
  --iconbox-bg: color-mix(in oklab, var(--color-primary) 14%, rgba(255, 255, 255, 0.06));
  --iconbox-border: color-mix(in oklab, var(--color-primary) 26%, var(--color-border));
  --iconbox-color: rgba(245, 247, 255, 0.95);
}

html[data-density="compact"] {
  --section-pad-y: 36px;
  --section-pad-y-sm: 28px;
  --gap-sm: 8px;
  --gap-md: 10px;
  --gap-lg: 12px;
  --gap-xl: 14px;
  --card-pad-sm: 12px;
  --card-pad: 14px;
  --card-pad-lg: 16px;

  --text-base: 15px;
  --text-lg: 17px;
  --btn-pad-y: 9px;
  --btn-pad-x: 12px;
  --btn-radius: 12px;
  --btn-lg-pad-y: 11px;
  --btn-lg-pad-x: 16px;
  --btn-lg-radius: 14px;
  --btn-sm-pad-y: 7px;
  --btn-sm-pad-x: 10px;
  --btn-sm-radius: 10px;
  --chip-pad-y: 8px;
  --chip-pad-x: 10px;
}
html[data-density="spacious"] {
  --section-pad-y: 62px;
  --section-pad-y-sm: 46px;
  --gap-sm: 12px;
  --gap-md: 14px;
  --gap-lg: 18px;
  --gap-xl: 20px;
  --card-pad-sm: 16px;
  --card-pad: 18px;
  --card-pad-lg: 22px;

  --text-base: 17px;
  --text-lg: 20px;
  --btn-pad-y: 11px;
  --btn-pad-x: 16px;
  --btn-radius: 16px;
  --btn-lg-pad-y: 14px;
  --btn-lg-pad-x: 20px;
  --btn-lg-radius: 18px;
  --btn-sm-pad-y: 9px;
  --btn-sm-pad-x: 14px;
  --btn-sm-radius: 14px;
  --chip-pad-y: 11px;
  --chip-pad-x: 14px;
}

html[data-card-style="sharp"] {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 14px 46px rgba(0, 0, 0, 0.26);
  --card-radius-sm: var(--radius-sm);
  --card-radius-md: var(--radius-md);
  --card-radius-lg: var(--radius-lg);
  --card-radius-xl: calc(var(--radius-lg) + 6px);
  --card-shadow-sm: var(--shadow-sm);
  --card-shadow-md: var(--shadow-md);
}
html[data-card-style="glass"] {
  --color-surface: rgba(255, 255, 255, 0.10);
  --color-surface-2: rgba(255, 255, 255, 0.14);
  --color-border: rgba(255, 255, 255, 0.18);
  --shadow-sm: 0 12px 34px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 22px 78px rgba(0, 0, 0, 0.36);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius-sm: var(--radius-sm);
  --card-radius-md: var(--radius-md);
  --card-radius-lg: var(--radius-lg);
  --card-radius-xl: calc(var(--radius-lg) + 6px);
  --card-shadow-sm: var(--shadow-sm);
  --card-shadow-md: var(--shadow-md);

  --chip-bg: color-mix(in oklab, var(--color-surface) 80%, transparent 20%);
  --chip-border: color-mix(in oklab, var(--color-border) 85%, transparent 15%);
}

/* ===== Component-style DNA (screenshot requirement) ===== */

/* Button: filled vs outline */
html[data-btn-style="outline"] {
  --btn-primary-bg: transparent;
  --btn-primary-hover-bg: color-mix(in oklab, var(--color-primary) 12%, transparent 88%);
  --btn-primary-border: color-mix(in oklab, var(--color-primary) 55%, var(--color-border));
  --btn-primary-text: color-mix(in oklab, var(--color-primary) 92%, var(--color-text));
  --btn-primary-shadow: none;
  --btn-primary-shadow-hover: none;
}

/* Outline actions sit directly on pale surfaces in light mode. Use the
   semantic action color instead of the raw brand hue so small labels keep
   WCAG AA contrast without losing their theme tint. */
html[data-mode="light"][data-btn-style="outline"] {
  --btn-primary-text: var(--color-action-text);
  --btn-primary-border: color-mix(in oklab, var(--color-action-text) 68%, var(--color-border));
}

/* Card: radius tiers (also influences button radius for consistent feel) */
html[data-card-radius="sm"] {
  --card-radius-sm: 10px;
  --card-radius-md: 14px;
  --card-radius-lg: 18px;
  --card-radius-xl: 22px;
  --btn-radius: 12px;
  --btn-lg-radius: 14px;
  --btn-sm-radius: 10px;
}
html[data-card-radius="md"] {
  --card-radius-sm: 12px;
  --card-radius-md: 18px;
  --card-radius-lg: 24px;
  --card-radius-xl: 28px;
}
html[data-card-radius="lg"] {
  --card-radius-sm: 14px;
  --card-radius-md: 22px;
  --card-radius-lg: 28px;
  --card-radius-xl: 34px;
  --btn-radius: 16px;
  --btn-lg-radius: 18px;
  --btn-sm-radius: 14px;
}

/* Card: shadow tiers */
html[data-card-shadow="soft"] {
  --card-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.16);
  --card-shadow-md: 0 14px 44px rgba(0, 0, 0, 0.22);
}
html[data-card-shadow="strong"] {
  --card-shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.26);
  --card-shadow-md: 0 24px 84px rgba(0, 0, 0, 0.40);
}

/* Title: size tiers + uppercase */
html[data-title-case="upper"] {
  --title-transform: uppercase;
  --title-letter-spacing: 0.08em;
}
html[data-title-size="sm"] {
  --section-title-size: clamp(20px, 2.0vw, 26px);
  --page-title-size: clamp(22px, 2.4vw, 30px);
  --hero-title-size: clamp(28px, 3.4vw, 42px);
}
html[data-title-size="lg"] {
  --section-title-size: clamp(24px, 2.5vw, 32px);
  --page-title-size: clamp(28px, 3.2vw, 40px);
  --hero-title-size: clamp(34px, 4.4vw, 54px);
}

/* Extra theme variants for build rotation */
html[data-theme="violet"] {
  --color-bg: #070816;
  --color-bg-soft: #0c1030;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(192, 198, 226, 0.92);
  --color-primary: #a78bfa;
  --color-primary-dark: #8b5cf6;
  --color-secondary: #60a5fa;
}
html[data-theme="violet"] body {
  background: radial-gradient(1000px 560px at 18% 0%, rgba(167, 139, 250, 0.14), transparent 62%),
    radial-gradient(1000px 560px at 85% 10%, rgba(96, 165, 250, 0.10), transparent 60%),
    linear-gradient(180deg, #070816 0%, #050712 72%, #050712 100%);
  background-attachment: fixed;
}

html[data-theme="zinc"] {
  --color-bg: #080b12;
  --color-bg-soft: #0c111b;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(176, 184, 206, 0.92);
  --color-primary: #e5e7eb;
  --color-primary-dark: #9ca3af;
  --color-secondary: #22c55e;
}
html[data-theme="zinc"] body {
  background: radial-gradient(1000px 560px at 20% 0%, rgba(229, 231, 235, 0.10), transparent 62%),
    radial-gradient(1000px 560px at 80% 12%, rgba(34, 197, 94, 0.08), transparent 60%),
    linear-gradient(180deg, #080b12 0%, #050712 70%, #050712 100%);
  background-attachment: fixed;
}

html[data-theme="neutral"] {
  --color-bg: #071018;
  --color-bg-soft: #0a1722;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(178, 202, 212, 0.92);
  --color-primary: #67e8f9;
  --color-primary-dark: #22d3ee;
  --color-secondary: #34d399;
}
html[data-theme="neutral"] body {
  background: radial-gradient(1000px 560px at 20% 0%, rgba(103, 232, 249, 0.10), transparent 62%),
    radial-gradient(1000px 560px at 82% 10%, rgba(52, 211, 153, 0.08), transparent 60%),
    linear-gradient(180deg, #071018 0%, #050712 72%, #050712 100%);
  background-attachment: fixed;
}

html[data-theme="blue"] {
  --color-bg: #06102a;
  --color-bg-soft: #0a1838;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(186, 196, 222, 0.92);
  --color-primary: #60a5fa;
  --color-primary-dark: #3b82f6;
  --color-secondary: #a7f3d0;
}
html[data-theme="blue"] body {
  background: radial-gradient(1000px 560px at 18% 0%, rgba(96, 165, 250, 0.14), transparent 62%),
    radial-gradient(1000px 560px at 85% 10%, rgba(167, 243, 208, 0.09), transparent 60%),
    linear-gradient(180deg, #06102a 0%, #050712 74%, #050712 100%);
  background-attachment: fixed;
}

html[data-theme="amber"] {
  --color-bg: #140b06;
  --color-bg-soft: #1a1008;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(214, 200, 182, 0.92);
  --color-primary: #fbbf24;
  --color-primary-dark: #f59e0b;
  --color-secondary: #fb7185;
}
html[data-theme="amber"] body {
  background: radial-gradient(1000px 560px at 20% 0%, rgba(251, 191, 36, 0.14), transparent 60%),
    radial-gradient(1000px 560px at 80% 12%, rgba(251, 113, 133, 0.09), transparent 60%),
    linear-gradient(180deg, #140b06 0%, #050712 76%, #050712 100%);
  background-attachment: fixed;
}

html[data-theme="slate"] {
  --color-bg: #070a12;
  --color-bg-soft: #0b1020;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(180, 188, 212, 0.92);
  --color-primary: #94a3b8;
  --color-primary-dark: #64748b;
  --color-secondary: #60a5fa;
}
html[data-theme="slate"] body {
  background: radial-gradient(1000px 560px at 20% 0%, rgba(148, 163, 184, 0.12), transparent 62%),
    radial-gradient(1000px 560px at 80% 12%, rgba(96, 165, 250, 0.09), transparent 60%),
    linear-gradient(180deg, #070a12 0%, #050712 72%, #050712 100%);
  background-attachment: fixed;
}
html[data-theme="emerald"] {
  --color-bg: #061312;
  --color-bg-soft: #0a1e1c;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(184, 206, 198, 0.92);
  --color-primary: #34d399;
  --color-primary-dark: #10b981;
  --color-secondary: #fde68a;
}
html[data-theme="emerald"] body {
  background: radial-gradient(1000px 560px at 20% 0%, rgba(52, 211, 153, 0.12), transparent 60%),
    radial-gradient(1000px 560px at 80% 10%, rgba(253, 230, 138, 0.10), transparent 60%),
    radial-gradient(1200px 720px at 50% 70%, rgba(52, 211, 153, 0.08), transparent 62%),
    linear-gradient(180deg, #061312 0%, #060b12 45%, #050712 100%);
  background-attachment: fixed;
}
html[data-theme="emerald"] .btn--secondary {
  background: rgba(52, 211, 153, 0.10);
  border-color: rgba(52, 211, 153, 0.22);
}
html[data-theme="emerald"] .btn--ghost:hover {
  background: rgba(52, 211, 153, 0.10);
}
html[data-theme="emerald"] .feature-card,
html[data-theme="emerald"] .testimonial-card,
html[data-theme="emerald"] .hot-game-card,
html[data-theme="emerald"] .promo-card,
html[data-theme="emerald"] .quote-card,
html[data-theme="emerald"] .feature-row,
html[data-theme="emerald"] .event-row {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.18);
}
html[data-theme="sunset"] {
  --color-bg: #12070b;
  --color-bg-soft: #1b0b12;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(212, 190, 198, 0.92);
  --color-primary: #fb7185;
  --color-primary-dark: #e11d48;
  --color-secondary: #fbbf24;
}
html[data-theme="sunset"] body {
  background: #050712;
  background-attachment: fixed;
}
html[data-theme="sunset"] .btn--secondary {
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.22);
}
html[data-theme="sunset"] .btn--ghost:hover {
  background: rgba(251, 113, 133, 0.10);
}
html[data-theme="sunset"] .feature-card,
html[data-theme="sunset"] .testimonial-card,
html[data-theme="sunset"] .hot-game-card,
html[data-theme="sunset"] .promo-card,
html[data-theme="sunset"] .quote-card,
html[data-theme="sunset"] .feature-row,
html[data-theme="sunset"] .event-row {
  background: rgba(251, 113, 133, 0.06);
  border-color: rgba(251, 113, 133, 0.18);
}
html[data-theme="carbon"] {
  --color-bg: #0a0a0d;
  --color-bg-soft: #11111a;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: rgba(245, 247, 255, 0.96);
  --color-text-muted: rgba(190, 195, 210, 0.92);
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-secondary: #22c55e;
}
html[data-theme="carbon"] body {
  background: radial-gradient(1000px 560px at 20% 0%, rgba(249, 115, 22, 0.09), transparent 62%),
    radial-gradient(1000px 560px at 80% 10%, rgba(34, 197, 94, 0.09), transparent 62%),
    radial-gradient(1200px 720px at 50% 70%, rgba(249, 115, 22, 0.06), transparent 64%),
    linear-gradient(180deg, #0a0a0d 0%, #070912 45%, #050712 100%);
  background-attachment: fixed;
}
html[data-theme="carbon"] .btn--secondary {
  background: rgba(249, 115, 22, 0.10);
  border-color: rgba(249, 115, 22, 0.22);
}
html[data-theme="carbon"] .btn--ghost:hover {
  background: rgba(249, 115, 22, 0.10);
}
html[data-theme="carbon"] .feature-card,
html[data-theme="carbon"] .testimonial-card,
html[data-theme="carbon"] .hot-game-card,
html[data-theme="carbon"] .promo-card,
html[data-theme="carbon"] .quote-card,
html[data-theme="carbon"] .feature-row,
html[data-theme="carbon"] .event-row {
  background: rgba(249, 115, 22, 0.06);
  border-color: rgba(249, 115, 22, 0.18);
}



/* ===== assets/css/base.css ===== */
/* Base / reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Prevent long words/strings from overflowing layout boxes */
:where(p, li, a, button, input, textarea, h1, h2, h3, h4, h5, h6, .btn, .chip) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Flex/grid children should be allowed to shrink to avoid overflow */
:where(.container, .site-header__inner, .nav-menu, .hero-v4, .cta-banner, .story-grid, .about-split) > * {
  min-width: 0;
}

html {
  /* keep anchors visible under fixed header */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-body, var(--font-sans));
  font-weight: var(--body-weight, 450);
  color: var(--color-text);
  font-size: var(--text-base, 16px);
  line-height: var(--lh-base, 1.6);
  /* Reserve space for fixed header */
  padding-top: var(--header-h);
  /* Keep background calm & consistent across scroll */
  background: linear-gradient(180deg, var(--color-bg) 0%, #070a14 55%, #050712 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--color-border);
  transform: translateY(-160%);
  transition: transform 160ms ease;
  z-index: 1000;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

/* Common utilities */
.sr-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 10px);
  padding: var(--btn-pad-y, 10px) var(--btn-pad-x, 14px);
  border-radius: var(--btn-radius, 14px);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 650;
  letter-spacing: 0.2px;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
  user-select: none;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn--lg {
  padding: var(--btn-lg-pad-y, 12px) var(--btn-lg-pad-x, 18px);
  border-radius: var(--btn-lg-radius, 16px);
}
.btn--sm {
  padding: var(--btn-sm-pad-y, 8px) var(--btn-sm-pad-x, 12px);
  border-radius: var(--btn-sm-radius, 12px);
  font-size: var(--btn-sm-text, 13px);
}
.btn--block {
  width: 100%;
}
.btn--primary {
  background: var(--btn-primary-bg, linear-gradient(180deg, var(--color-primary), var(--color-primary-dark)));
  box-shadow: var(--btn-primary-shadow, 0 14px 42px rgba(0, 0, 0, 0.35));
  border-color: var(--btn-primary-border, rgba(255, 255, 255, 0.12));
  color: var(--btn-primary-text, rgba(255, 255, 255, 0.95));
}
.btn--primary:hover {
  background: var(--btn-primary-hover-bg, var(--btn-primary-bg, linear-gradient(180deg, var(--color-primary), var(--color-primary-dark))));
  box-shadow: var(--btn-primary-shadow-hover, 0 18px 52px rgba(0, 0, 0, 0.42));
}
.btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}
.btn--ghost {
  background: transparent;
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
}
.btn--link {
  background: transparent;
  border: 0;
  padding: 10px 0;
  border-radius: 0;
  color: var(--color-text);
  font-weight: 600;
}
.btn--link:hover {
  color: var(--color-secondary);
  transform: none;
}



/* ===== assets/css/layout.css ===== */
/* Layout primitives */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

main {
  display: block;
}

/* Section spacing helper (modules can use) */
.section {
  padding: var(--section-pad-y) 0;
}
.section--compact {
  padding: var(--section-pad-y-sm) 0;
}

/* Responsive helpers */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}



/* ===== assets/css/modules.css ===== */
/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(7, 10, 20, 0.62);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(245, 247, 255, 0.95);
}
.site-header .container {
  /* Wide desktop nav needs enough room for brand, links and both CTAs. */
  max-width: 1760px;
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 850; /* under header (900), under menu */
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
}
.brand__logo {
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  width: 48px;
  height: 48px;
}
.brand__mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--color-primary, #2f80ed),
    var(--color-accent, var(--color-primary, #2f80ed))
  );
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary, #2f80ed) 28%, transparent);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  max-width: 260px;
}
.brand__name {
  font-weight: 750;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__short {
  display: none;
  font-weight: 750;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__code {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Desktop header fit: avoid nav truncation when items increase */
@media (max-width: 1200px) {
  .brand {
    min-width: 140px;
  }
  .nav-menu {
    gap: 12px;
  }
  .nav-list {
    gap: 6px;
  }
  .nav-link {
    padding: 9px 10px;
    font-size: 13px;
  }
}

@media (max-width: 1440px) {
  .site-header__inner {
    gap: 12px;
  }
  .nav-menu {
    gap: 12px;
  }
  .nav-link {
    padding: 9px 10px;
  }
  /* vi-VN: slightly tighter nav so items don't get clipped */
  html[lang="vi-VN"] .nav-list {
    gap: 8px;
  }
  html[lang="vi-VN"] .nav-link {
    padding: 8px 9px;
  }
}

@media (max-width: 980px) {
  .brand__code {
    display: none;
  }
  /* Mobile header: make room for register + menu button */
  .brand__text {
    max-width: 150px;
  }
  .site-header__inner {
    gap: 10px;
    padding: 12px 0;
  }
  .brand {
    gap: 10px;
  }
}

@media (max-width: 520px) {
  /* Very small screens: keep only "3xplanet" text */
  .brand__name {
    display: none;
  }
  .brand__short {
    display: block;
  }
  .brand__text {
    max-width: 110px;
  }
  .nav-toggle__text {
    display: none;
  }
  .nav-toggle {
    gap: 0;
  }
}

@media (max-width: 1280px) {
  .brand__text {
    max-width: 220px;
  }
  .nav-menu {
    gap: 12px;
  }
  .nav-list {
    gap: 6px;
  }
  .nav-link {
    padding: 8px 10px;
    font-size: 13px;
  }
}

.nav-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0; /* allow children overflow scrolling on desktop */
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.06);
}
.nav-toggle__icon {
  width: 18px;
  height: 12px;
  display: inline-block;
  position: relative;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after,
.nav-toggle__icon {
  background: transparent;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}
.nav-toggle__icon::before {
  top: 0;
}
.nav-toggle__icon::after {
  bottom: 0;
}
.nav-toggle__text {
  font-weight: 650;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0; /* allow nav list to shrink + scroll */
}
.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap !important;
  overflow-x: auto; /* keep one-line desktop nav */
  overflow-y: hidden;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.nav-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(245, 247, 255, 0.9);
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  flex: 0 0 auto;
}
.nav-item {
  flex: 0 0 auto;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
.nav-link--active {
  background: color-mix(in oklab, var(--color-primary) 18%, rgba(255, 255, 255, 0.06));
  border-color: color-mix(in oklab, var(--color-primary) 55%, rgba(255, 255, 255, 0.12));
  border-width: 2px;
  /* keep visual size stable after thicker border */
  padding: 9px 11px;
  color: rgba(255, 255, 255, 0.96);
}
.nav-link--active:hover {
  background: color-mix(in oklab, var(--color-primary) 22%, rgba(255, 255, 255, 0.08));
  border-color: color-mix(in oklab, var(--color-primary) 65%, rgba(255, 255, 255, 0.14));
  border-width: 2px;
}

.nav-register {
  display: none;
  margin-right: 10px;
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* PC nav dropdown (二级菜单) - use overflow visible so dropdown isn't clipped */
@media (min-width: 1601px) {
  .site-nav,
  .nav-menu,
  .nav-list {
    overflow: visible;
  }
}
.nav-item--dropdown {
  position: relative;
}
.nav-link--dropdown {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  gap: 6px;
}
.nav-link--dropdown .nav-dropdown__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.8;
  transition: transform 180ms ease;
}
.nav-item--dropdown[data-open] .nav-link--dropdown .nav-dropdown__chevron {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 180px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: rgba(11, 16, 32, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 100;
}
html[data-mode="light"] .nav-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown[data-open] .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}
.nav-dropdown__link {
  display: block;
  padding: 10px 16px;
  color: rgba(245, 247, 255, 0.9);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
html[data-mode="light"] .nav-dropdown__link {
  color: var(--color-text);
}
.nav-dropdown__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.98);
}
html[data-mode="light"] .nav-dropdown__link:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}
.nav-dropdown__link--active {
  background: color-mix(in oklab, var(--color-primary) 15%, rgba(255, 255, 255, 0.06));
  color: rgba(255, 255, 255, 0.98);
}
html[data-mode="light"] .nav-dropdown__link--active {
  color: var(--color-text);
}

/* Header variant: centered nav (header_brand_center_v1) */
.site-header[data-module="header_brand_center_v1"] .site-nav {
  flex: 1 1 auto;
}
.site-header[data-module="header_brand_center_v1"] .nav-menu {
  width: 100%;
}
.site-header[data-module="header_brand_center_v1"] .nav-list {
  justify-content: center;
}

@media (max-width: 1600px) {
  html.nav-scroll-locked {
    overflow: hidden;
  }

  .nav-toggle {
    display: inline-flex;
  }
  .nav-register {
    display: inline-flex;
  }
  .nav-menu {
    position: fixed;
    z-index: 920;
    left: 0;
    right: 0;
    top: var(--header-h);
    margin: 0 var(--container-pad);
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: rgba(11, 16, 32, 0.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-md);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    max-height: calc(100vh - var(--header-h) - 20px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .nav-link {
    justify-content: space-between;
  }
  /* Mobile nav dropdown (二级菜单) */
  .nav-item--dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-dropdown {
    position: static;
    transform: none;
    min-width: auto;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 200ms ease, margin 160ms ease;
    isolation: isolate;
    background: transparent;
    border: 0;
    list-style: none;
  }
  .nav-dropdown > li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-item--dropdown[data-open] .nav-dropdown {
    max-height: 520px;
    margin-top: 6px;
    padding: 4px 0 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 2px solid rgba(16, 185, 129, 0.45);
    background: rgba(7, 10, 20, 0.58);
    border-radius: 12px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-item--dropdown:hover .nav-dropdown,
  .nav-item--dropdown[data-open] .nav-dropdown {
    transform: none;
  }
  .nav-dropdown__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    color: #f5f7ff;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 1px 0;
    text-shadow: none;
  }
  .nav-dropdown__link:hover {
    background: rgba(16, 185, 129, 0.12);
    color: #ffffff;
  }
  .nav-dropdown__link--active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    font-weight: 800;
  }
  html[data-mode="light"] .nav-dropdown__link {
    color: rgba(245, 247, 255, 0.92);
    background: transparent;
  }
  html[data-mode="light"] .nav-dropdown {
    background: rgba(7, 10, 20, 0.58);
    border-color: rgba(255, 255, 255, 0.14);
  }
  html[data-mode="light"] .nav-dropdown__link:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
  }
  html[data-mode="light"] .nav-dropdown__link--active {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
  .nav-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  html[data-mode="light"] .nav-cta .btn--ghost {
    color: rgba(245, 247, 255, 0.96);
    background: rgba(7, 10, 20, 0.52);
    border-color: rgba(255, 255, 255, 0.22);
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
  html[data-mode="light"] .nav-cta .btn--ghost:hover {
    background: rgba(7, 10, 20, 0.64);
    border-color: rgba(255, 255, 255, 0.3);
  }
  .nav-cta > .btn {
    min-width: 0;
  }

  /* Mobile: keep same behavior as default header (overlay menu) */
  .site-header[data-module="header_brand_center_v1"] .nav-list {
    justify-content: initial;
  }
}
@media (max-width: 420px) {
  .nav-cta {
    grid-template-columns: 1fr;
  }
}

/* Hero */
.hero {
  position: relative;
  padding: var(--hero-pad-top, calc(var(--section-pad-y) + 8px)) 0 var(--hero-pad-bottom, var(--section-pad-y-sm));
  overflow: clip;
}
/* Reduce "empty feeling" for arcade hero on desktop */
.hero[data-module="hero_slots_arcade_v2"] {
  padding: 36px 0 42px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.68)),
    radial-gradient(900px 600px at 20% 10%, rgba(255, 107, 53, 0.22), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(110, 231, 255, 0.18), transparent 60%);
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.03);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 40% 30%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(11, 16, 32, 0.4), rgba(11, 16, 32, 0.9));
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 26px;
  align-items: start;
}
.hero__title {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.08;
  margin: 0 0 14px;
  letter-spacing: -0.4px;
}
.hero__subtitle {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.6vw, 18px);
  color: rgba(245, 247, 255, 0.92);
  font-weight: 650;
}
.hero__desc {
  margin: 0 0 22px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.hero--light-text {
  --hero-light-text: rgba(245, 247, 255, 0.96);
  --hero-light-muted: rgba(245, 247, 255, 0.92);
  --hero-light-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.hero--light-text .hero__title,
.hero--light-text .hero__subtitle,
.hero--light-text .hero__desc,
.hero--light-text .hero-v3__title,
.hero--light-text .hero-v3__sub,
.hero--light-text .hero-v3__desc,
.hero--light-text .hero-v4__title,
.hero--light-text .hero-v4__subtitle,
.hero--light-text .hero-v4__desc,
.hero--light-text .hero-casino__title,
.hero--light-text .hero-casino__subtitle,
.hero--light-text .hero-casino__desc,
.hero--light-text .hero-sports__title,
.hero--light-text .hero-sports__subtitle,
.hero--light-text .hero-sports__desc,
.hero--light-text .arcade-hero__title,
.hero--light-text .arcade-hero__subtitle,
.hero--light-text .arcade-hero__desc,
.hero--light-text .hero-minimal__title,
.hero--light-text .hero-minimal__subtitle,
.hero--light-text .hero-minimal__desc {
  color: var(--hero-light-text);
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .panel__badge,
.hero--light-text .panel__title,
.hero--light-text .panel__metricLabel,
.hero--light-text .panel__item,
.hero--light-text .hero-card__h,
.hero--light-text .hero-card__p,
.hero--light-text .badge-card__pill,
.hero--light-text .badge-card__k,
.hero--light-text .v4-pill,
.hero--light-text .v4-kpi__k,
.hero--light-text .v4-row,
.hero--light-text .rail-pill,
.hero--light-text .rail-kpi__k,
.hero--light-text .rail-item {
  color: var(--hero-light-muted);
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .panel__badge,
.hero--light-text .badge-card__pill,
.hero--light-text .v4-pill,
.hero--light-text .rail-pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}
/* v3 right bonus card: force dark surface so light text stays readable */
.hero--light-text .badge-card {
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.84), rgba(7, 10, 20, 0.68));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}
.hero--light-text .badge-card__pill,
.hero--light-text .badge-card__k,
.hero--light-text .badge-card__actions .btn--link {
  color: rgba(245, 247, 255, 0.95);
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .hero-card {
  background: rgba(7, 10, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}
.hero--light-text .mini-chip,
.hero--light-text .hero-v3__quick .mini-chip {
  background: rgba(7, 10, 20, 0.44);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(245, 247, 255, 0.95);
  text-shadow: var(--hero-light-shadow);
}
.hero--slots-arcade.hero--light-text .arcade-hero__badge,
.hero--slots-arcade.hero--light-text .arcade-hero__chips .chip {
  color: rgba(245, 247, 255, 0.96);
  background: rgba(7, 10, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.24);
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .v4-panel,
.hero--light-text .v4-strip {
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.86), rgba(7, 10, 20, 0.7));
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}
/* The v4 main glass must follow the light-text contrast contract too.
   Light themes can otherwise expose an opaque white --card-bg here. */
.hero--light-text .hero-v4__glass {
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.84), rgba(7, 10, 20, 0.68));
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}
.hero--light-text .hero-v2__rail .rail-card {
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.86), rgba(7, 10, 20, 0.7));
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}
.hero--light-text .v4-panel .v4-kpi__v,
.hero--light-text .v4-panel .v4-kpi__k,
.hero--light-text .v4-panel .v4-row,
.hero--light-text .v4-panel .v4-pill,
.hero--light-text .v4-strip .v4-metric__k,
.hero--light-text .v4-strip .v4-metric__v {
  color: var(--hero-light-text);
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .hero-v4__actions .btn--secondary,
.hero--light-text .v4-panel__actions .btn--ghost {
  color: rgba(245, 247, 255, 0.96);
  background: rgba(7, 10, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.24);
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .rail-card__actions .btn--ghost {
  color: rgba(245, 247, 255, 0.96);
  background: rgba(7, 10, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.24);
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .btn--secondary {
  color: rgba(245, 247, 255, 0.96);
  background: rgba(7, 10, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.24);
  text-shadow: var(--hero-light-shadow);
}
.hero--brand .hero__actions .btn--secondary,
.hero--brand .hero__actions .btn--secondary:visited {
  color: rgba(245, 247, 255, 0.96);
  background: rgba(7, 10, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.24);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.hero--brand .hero__actions .btn--ghost,
.hero--brand .hero__actions .btn--ghost:visited {
  color: rgba(245, 247, 255, 0.96);
  background: rgba(7, 10, 20, 0.52);
  border-color: rgba(255, 255, 255, 0.24);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.hero--light-text .hero-v4__actions .btn--secondary:hover,
.hero--light-text .v4-panel__actions .btn--ghost:hover,
.hero--light-text .rail-card__actions .btn--ghost:hover,
.hero--light-text .btn--secondary:hover {
  background: rgba(7, 10, 20, 0.64);
  border-color: rgba(255, 255, 255, 0.3);
}
.hero--brand .hero__actions .btn--secondary:hover,
.hero--brand .hero__actions .btn--secondary:visited:hover {
  background: rgba(7, 10, 20, 0.64);
  border-color: rgba(255, 255, 255, 0.3);
}
.hero--brand .hero__actions .btn--ghost:hover,
.hero--brand .hero__actions .btn--ghost:visited:hover {
  background: rgba(7, 10, 20, 0.64);
  border-color: rgba(255, 255, 255, 0.3);
}
/* v3 secondary CTA ("Learn More"): force high contrast on dark hero */
.hero .hero-v3__actions .btn--ghost,
.hero .hero-v3__actions .btn--ghost:visited {
  color: rgba(245, 247, 255, 0.98) !important;
  background: rgba(7, 10, 20, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.58);
}
.hero .hero-v3__actions a.btn.btn--ghost.btn--lg,
.hero .hero-v3__actions span.btn.btn--ghost.btn--lg {
  color: #f5f7ff !important;
  background: rgba(7, 10, 20, 0.66) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.hero .hero-v3__actions .btn--ghost:hover,
.hero .hero-v3__actions .btn--ghost:visited:hover {
  background: rgba(7, 10, 20, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}
.hero--light-text .panel__metricValue,
.hero--light-text .badge-card__v,
.hero--light-text .v4-kpi__v,
.hero--light-text .rail-kpi__v {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--hero-light-text);
  filter: none;
  text-shadow: var(--hero-light-shadow);
}
.hero--light-text .hero__panel .btn--link,
.hero--light-text .badge-card__actions .btn--link {
  color: var(--hero-light-text);
  text-shadow: var(--hero-light-shadow);
}
/* Light-mode readability guardrail for non-hero cards/modules */
html[data-mode="light"] .testimonial-card__content,
html[data-mode="light"] .testimonial-featured__quote,
html[data-mode="light"] .testimonial-featured__summary,
html[data-mode="light"] .promo-card__desc,
html[data-mode="light"] .promo-slide__desc,
html[data-mode="light"] .article-card__excerpt,
html[data-mode="light"] .article-row__excerpt {
  color: var(--color-text-muted);
}
html[data-mode="light"] .promo-card__highlight,
html[data-mode="light"] .promo-card__title,
html[data-mode="light"] .promo-slide__title,
html[data-mode="light"] .testimonial-card__name,
html[data-mode="light"] .testimonial-featured__name {
  color: var(--color-text);
}
html[data-mode="light"] .promo-card__tag,
html[data-mode="light"] .promo-slide__tag,
html[data-mode="light"] .testimonial-card__tag,
html[data-mode="light"] .testimonial-featured__tag {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.14);
  color: rgba(15, 23, 42, 0.86);
  text-shadow: none;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.hero__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.tag {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.panel {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.hero__panel .panel {
  position: relative;
  /* Ensure readable text on any hero background image */
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.82), rgba(7, 10, 20, 0.62));
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
}
.hero__panel .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 320px at 20% 20%, rgba(255, 255, 255, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.32));
}
.hero__panel .panel > * {
  position: relative;
}
.hero__panel .panel__title,
.hero__panel .panel__badge,
.hero__panel .panel__item,
.hero__panel .panel__metricLabel {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.48);
}
.hero__panel .panel__metricValue {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
.hero__panel .btn--link {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.hero__panel .btn--link:hover {
  color: rgba(255, 255, 255, 0.98);
}
.panel__top {
  padding: 18px 18px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.panel__badge {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.2px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.panel__title {
  font-weight: 800;
  opacity: 0.95;
}
.panel__body {
  padding: 0 18px 18px;
}
.panel__metric {
  display: grid;
  gap: 4px;
  margin: 2px 0 14px;
}
.panel__metricValue {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.panel__metricLabel {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 650;
}
.panel__list {
  display: grid;
  gap: 10px;
}
.panel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 247, 255, 0.9);
  font-size: 14px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}
.dot--success {
  background: var(--color-success);
}
.panel__actions {
  padding: 0 18px 18px;
  display: grid;
  gap: 10px;
}

/* Hero slots right panel: loosen spacing (user feedback) */
.hero[data-module="hero_slots_v1"] .panel__top {
  padding: 20px 20px 12px;
}
.hero[data-module="hero_slots_v1"] .panel__list {
  padding: 2px 20px 14px;
  gap: 12px;
}
.hero[data-module="hero_slots_v1"] .panel__item {
  line-height: 1.55;
}
.hero[data-module="hero_slots_v1"] .dot {
  flex: 0 0 auto;
}
.hero[data-module="hero_slots_v1"] .panel__actions {
  padding: 0 20px 20px;
}

/* Hero promo banner: make right panel feel aligned and compact */
.hero[data-module="hero_promo_banner_v1"] .hero__inner {
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
}
.hero[data-module="hero_promo_banner_v1"] .hero__panel {
  display: flex;
  justify-content: flex-end;
}
.hero[data-module="hero_promo_banner_v1"] .panel {
  width: 100%;
  max-width: 520px;
}
.hero[data-module="hero_promo_banner_v1"] .panel__top {
  align-items: center;
  padding: 16px 16px 10px;
}
.hero[data-module="hero_promo_banner_v1"] .panel__list {
  padding: 0 16px 14px;
}
.hero[data-module="hero_promo_banner_v1"] .panel__actions {
  padding: 0 16px 16px;
}

@media (max-width: 1200px) {
  .hero[data-module="hero_promo_banner_v1"] .hero__inner {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
  .hero[data-module="hero_promo_banner_v1"] .panel {
    max-width: 480px;
  }
}

@media (max-width: 980px) {
  .hero {
    padding-top: calc(var(--section-pad-y) + 6px);
  }
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .panel {
    max-width: 520px;
  }

  /* Ensure promo banner hero collapses to single column on mobile
     (module selector is more specific than .hero__inner) */
  .hero[data-module="hero_promo_banner_v1"] .hero__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  .hero[data-module="hero_promo_banner_v1"] .hero__panel {
    justify-content: flex-start;
    margin-top: 10px;
  }
  .hero[data-module="hero_promo_banner_v1"] .panel {
    max-width: 520px;
  }
}

/* Hero (minimal variant) */
.hero--minimal .hero__bg {
  filter: saturate(0.9) contrast(1.02);
}
.hero--brand-v2 .hero__bg,
.hero--brand-v3 .hero__bg {
  filter: saturate(1.08) contrast(1.05);
}
.hero--brand-v4 .hero__bg {
  filter: saturate(1.12) contrast(1.06);
}

/* Hero brand v2 (content + rail + quick chips) */
.hero-v2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 26px;
  align-items: start;
}
.hero-v2.hero-v2--solo {
  grid-template-columns: minmax(0, 820px) !important;
}
html[data-hero-style="split"] .hero-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
html[data-hero-style="split"] .hero-v2__rail {
  justify-items: stretch;
}
html[data-hero-style="split"] .hero-v2__rail .rail-card,
html[data-hero-style="split"] .rail-mini {
  max-width: none;
}

html[data-hero-style="rail"] .hero-v2 {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
}
html[data-hero-style="rail"] .hero-v2__content {
  order: 2;
}
html[data-hero-style="rail"] .hero-v2__rail {
  order: 1;
  justify-items: stretch;
}
html[data-hero-style="rail"] .hero-v2__rail .rail-card,
html[data-hero-style="rail"] .rail-mini {
  max-width: none;
}

html[data-hero-style="bento"] .hero-v2 {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 28px;
}
.hero-v2__rail {
  display: grid;
  gap: 12px;
  justify-items: end;
}
.hero-v2__rail .rail-card {
  width: 100%;
  max-width: 520px;
  border-radius: var(--card-radius-lg, 22px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-bg) 88%, transparent),
    color-mix(in oklab, var(--color-bg) 68%, transparent)
  );
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.14));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.hero-v2__rail .rail-card--placeholder {
  min-height: clamp(220px, 30vw, 320px);
}
.rail-card__top {
  padding: 18px 18px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.rail-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 247, 255, 0.92);
}
.rail-kpi {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.rail-kpi__v {
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rail-kpi__k {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 650;
}
.rail-card__list {
  padding: 0 18px 14px;
  display: grid;
  gap: 10px;
}
.rail-item {
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(245, 247, 255, 0.9);
  font-size: 14px;
}
.rail-card__actions {
  padding: 0 18px 18px;
  display: grid;
  gap: 10px;
}
.rail-mini {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.mini-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 247, 255, 0.92);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.mini-chip:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Hero brand v3 (headline + badge card + 3 cards) */
.hero-v3 {
  position: relative;
  display: grid;
  gap: 16px;
}
html[data-hero-style="split"] .hero-v3__top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
html[data-hero-style="split"] .hero-v3__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-hero-style="rail"] .hero-v3__top {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}
html[data-hero-style="rail"] .hero-v3__badgeCard {
  order: 1;
}
html[data-hero-style="rail"] .hero-v3__headline {
  order: 2;
}
html[data-hero-style="rail"] .hero-v3__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-hero-style="bento"] .hero-v3__top {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
html[data-hero-style="bento"] .hero-v3__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero-v3__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: 18px;
  align-items: start;
}
.hero-v3__top.hero-v3__top--solo {
  grid-template-columns: minmax(0, 820px) !important;
}
.hero-v3__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 14px;
  width: fit-content;
}
.hero-v3__title {
  margin: 0 0 10px;
  font-family: var(--font-display, var(--font-sans));
  font-weight: var(--title-weight, 900);
  font-size: var(--hero-title-size, clamp(30px, 3.9vw, 46px));
  line-height: 1.06;
  letter-spacing: -0.5px;
}
.hero-v3__sub {
  margin: 0;
  color: rgba(245, 247, 255, 0.92);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
}
.badge-card {
  border-radius: var(--card-radius-lg, 22px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-bg) 88%, transparent),
    color-mix(in oklab, var(--color-bg) 68%, transparent)
  );
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.14));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  backdrop-filter: blur(16px);
  padding: 16px;
}
.badge-card--placeholder {
  min-height: clamp(220px, 30vw, 320px);
}
.badge-card__row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.badge-card__pill {
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 247, 255, 0.92);
}
.badge-card__pill--muted {
  opacity: 0.8;
}
.badge-card__kpi {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.badge-card__v {
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.badge-card__k {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 650;
}
.badge-card__actions {
  display: grid;
  gap: 10px;
}
.hero-v3__desc {
  margin: 0 0 10px;
  max-width: 72ch;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.hero-v3__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 12px;
}
.hero-card {
  border-radius: var(--card-radius-md, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20);
  padding: 14px 14px 12px;
}
.hero-card__h {
  font-weight: 900;
  margin-bottom: 6px;
}
.hero-card__p {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.hero-v3__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hero-v3__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

@media (max-width: 980px) {
  .hero-v2 {
    grid-template-columns: 1fr;
  }
  .hero-v2__rail {
    justify-items: start;
  }
  .rail-mini {
    justify-content: flex-start;
  }
  .hero-v3__top {
    grid-template-columns: 1fr;
  }
  .hero-v3__cards {
    grid-template-columns: 1fr;
  }
  .hero-v3__quick {
    width: 100%;
    margin-left: 0;
  }
}

/* Hero brand v4 (full-width split, no empty sides) */
.hero-v4 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 18px;
  align-items: start;
}
.hero-v4.hero-v4--solo {
  grid-template-columns: minmax(0, 900px) !important;
}
html[data-hero-style="split"] .hero-v4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
html[data-hero-style="rail"] .hero-v4 {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
}
html[data-hero-style="rail"] .hero-v4__left {
  order: 2;
}
html[data-hero-style="rail"] .hero-v4__right {
  order: 1;
}
html[data-hero-style="bento"] .hero-v4 {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 20px;
}
.hero-v4__glass {
  height: auto;
  border-radius: var(--card-radius-xl, 28px);
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  padding: 26px 26px 22px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  align-self: start;
}
.hero-v4__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.hero-v4__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  width: fit-content;
}
.hero-v4__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.hero-v4__title {
  margin: 0 0 10px;
  font-family: var(--font-display, var(--font-sans));
  font-weight: var(--title-weight, 900);
  font-size: var(--hero-title-size, clamp(30px, 3.9vw, 46px));
  line-height: 1.06;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hero-v4__subtitle {
  margin: 0 0 14px;
  color: rgba(245, 247, 255, 0.92);
  font-weight: 750;
  font-size: clamp(16px, 1.6vw, 18px);
}
.hero-v4__desc {
  margin: 0 0 18px;
  max-width: 70ch;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.hero-v4__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-v4__right {
  display: grid;
  gap: 12px;
  align-content: start;
}
.v4-panel {
  border-radius: var(--card-radius-lg, 22px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-bg) 88%, transparent),
    color-mix(in oklab, var(--color-bg) 68%, transparent)
  );
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.14));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  backdrop-filter: blur(16px);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.v4-panel--placeholder {
  min-height: clamp(220px, 30vw, 320px);
}
.v4-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.v4-pill {
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 247, 255, 0.92);
}
.v4-kpi {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.v4-kpi__v {
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v4-kpi__k {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 650;
}
.v4-panel__rows {
  display: grid;
  gap: 10px;
}
.v4-row {
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(245, 247, 255, 0.9);
  font-size: 14px;
}
.v4-panel__actions {
  display: grid;
  gap: 10px;
}
.v4-strip {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: 14px;
  display: grid;
  gap: 10px;
}
.v4-metric {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.v4-metric__k {
  font-weight: 900;
  opacity: 0.95;
}
.v4-metric__v {
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 980px) {
  .hero-v4 {
    grid-template-columns: 1fr;
  }
  /* Override site_dna hero_style selectors on mobile (specificity) */
  html[data-hero-style="split"] .hero-v4,
  html[data-hero-style="rail"] .hero-v4,
  html[data-hero-style="bento"] .hero-v4 {
    grid-template-columns: 1fr;
    gap: var(--gap-lg, 16px);
  }
  html[data-hero-style="rail"] .hero-v4__left {
    order: 1;
  }
  html[data-hero-style="rail"] .hero-v4__right {
    order: 2;
  }
  .hero-v4__glass {
    padding: 22px 18px 18px;
    border-radius: 24px;
  }
  .hero-v4__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-v4__chips {
    justify-content: flex-start;
  }
}
.hero-minimal {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 42px 32px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
}
.hero-minimal__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}
.hero-minimal__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.5px;
}
.hero-minimal__subtitle {
  margin: 0 0 14px;
  color: rgba(245, 247, 255, 0.92);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 18px);
}
.hero-minimal__desc {
  margin: 0 0 22px;
  max-width: 68ch;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.hero-minimal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.hero-minimal__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}
@media (max-width: 980px) {
  .hero-minimal {
    padding: 28px 18px;
  }
}

/* Hero (sports variant) */
.hero--sports .hero__bg {
  background-blend-mode: screen, normal, normal;
  filter: saturate(1.15) contrast(1.06);
}
.hero-sports {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 26px;
  align-items: start;
}
.hero-sports__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 16px;
}
.hero-sports__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.5px;
}
.hero-sports__subtitle {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.6vw, 18px);
  color: rgba(245, 247, 255, 0.92);
  font-weight: 750;
}
.hero-sports__desc {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.hero-sports__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.hero-sports__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.sports-card {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.sports-card__top {
  padding: 18px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sports-card__badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.sports-card__title {
  font-weight: 850;
  opacity: 0.95;
}
.sports-card__grid {
  padding: 0 18px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sports-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.sports-tile:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.sports-tile__label {
  font-weight: 750;
  color: rgba(245, 247, 255, 0.92);
}
.sports-tile__arrow {
  color: rgba(245, 247, 255, 0.78);
}
.sports-card__foot {
  padding: 0 18px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sports-pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.90);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .hero-sports {
    grid-template-columns: 1fr;
  }
  .sports-card__grid {
    grid-template-columns: 1fr;
  }
}

/* Hero (casino variant) */
.hero--casino .hero__bg {
  filter: saturate(1.08) contrast(1.06);
}
.hero--casino .hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(3, 10, 28, 0.78) 8%, rgba(3, 10, 28, 0.50) 48%, rgba(3, 10, 28, 0.36) 100%),
    radial-gradient(900px 360px at 78% 28%, rgba(14, 116, 144, 0.20), transparent 60%);
  pointer-events: none;
}
.hero-casino {
  position: relative;
  border-radius: 28px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
}
.hero--skin-bare .hero-casino {
  /* brand4: remove the outer glass card */
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.hero--skin-bare .hero-casino__top {
  margin-bottom: 14px;
}
.hero--skin-bare .hero-casino__content {
  /* keep readability without the outer card */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero--skin-bare .hero-casino__desc {
  color: rgba(245, 247, 255, 0.86);
}
.hero-casino__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.hero-casino__badge {
  font-size: 12px;
  font-weight: 850;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(248, 250, 255, 0.96);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero-casino__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.hero-casino__chips .chip {
  color: rgba(248, 250, 255, 0.94);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}
.chip {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.9);
  font-size: 12px;
  font-weight: 750;
}
.hero-casino__main {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr;
  gap: 18px;
  align-items: start;
}
.hero-casino__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.5px;
}
.hero-casino__subtitle {
  margin: 0 0 14px;
  color: rgba(245, 247, 255, 0.92);
  font-weight: 750;
  font-size: clamp(16px, 1.6vw, 18px);
}
.hero-casino__desc {
  margin: 0 0 22px;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.hero-casino__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.casino-panel {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  gap: 12px;
}
.casino-panel__title {
  font-weight: 900;
  letter-spacing: -0.2px;
}
.casino-panel__rows {
  display: grid;
  gap: 10px;
}
.casino-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 247, 255, 0.9);
  font-size: 14px;
}
@media (max-width: 980px) {
  .hero-casino__main {
    grid-template-columns: 1fr;
  }
}

/* Mobile safety: casino hero should never feel cramped/overflow */
@media (max-width: 767px) {
  .hero-casino {
    padding: 16px;
    border-radius: 24px;
  }
  .hero-casino__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero-casino__chips {
    justify-content: flex-start;
    width: 100%;
  }
  .chip {
    padding: 7px 10px;
  }
  .hero-casino__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-casino__actions .btn {
    width: 100%;
  }
  .casino-panel {
    padding: 14px;
    border-radius: 20px;
  }
  .hero--skin-neon_split .hero-casino__content::after {
    display: none;
  }
}

/* Shared section headings */
.section-head {
  margin-bottom: 12px;
}
.section-title {
  margin: 0 0 8px;
  font-family: var(--font-display, var(--font-sans));
  font-weight: var(--title-weight, 900);
  font-size: var(--section-title-size, clamp(22px, 2.2vw, 28px));
  letter-spacing: var(--title-letter-spacing, -0.2px);
  text-transform: var(--title-transform, none);
}
.section-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 72ch;
}

@media (max-width: 767px) {
  .section-head {
    margin-bottom: 10px;
  }
  .section-title {
    margin-bottom: 6px;
  }
}

/* Page header (v1) */
.page-header__inner {
  border-radius: var(--card-radius-lg, 22px);
  padding: var(--card-pad, 16px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
}
.page-header__kicker {
  font-size: 12px;
  font-weight: 850;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.page-header__title {
  margin: 0 0 8px;
  font-family: var(--font-display, var(--font-sans));
  font-weight: var(--title-weight, 900);
  font-size: var(--page-title-size, clamp(24px, 2.8vw, 34px));
  letter-spacing: var(--title-letter-spacing, -0.2px);
  text-transform: var(--title-transform, none);
}
.page-header__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 80ch;
}

/* Page header variants */
.page-header__inner--center {
  padding: 18px 18px 16px;
  background:
    radial-gradient(900px 280px at 15% 0%, rgba(110, 231, 255, 0.12), transparent 60%),
    radial-gradient(900px 280px at 85% 0%, rgba(255, 107, 53, 0.10), transparent 60%),
    var(--card-bg, rgba(255, 255, 255, 0.03));
  border-color: color-mix(in oklab, var(--card-border, rgba(255, 255, 255, 0.08)) 80%, rgba(255, 255, 255, 0.14));
}
.page-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: 16px;
  align-items: start;
}
.page-header__main {
  min-width: 0;
}
.page-header__content {
  min-width: 0;
}
.page-header__aside {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 10px;
}
html[data-mode="light"] .page-header__aside {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.10);
}
.page-header__asideTitle {
  font-weight: 900;
  letter-spacing: -0.2px;
}
.page-header__asideActions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-header__asideLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-header__asideLink {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
}
html[data-mode="light"] .page-header__asideLink {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--color-text);
}
.page-header__crumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--color-text-muted);
  max-width: 100%;
  overflow: hidden;
}
.page-header__toprow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.page-header__toprow .page-header__kicker {
  margin-bottom: 0;
  white-space: nowrap;
}
.page-header__crumb,
.page-header__crumbCurrent {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-header__crumb {
  color: rgba(245, 247, 255, 0.92);
}
.page-header__crumbSep {
  opacity: 0.55;
}
html[data-mode="light"] .page-header__crumbs {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
html[data-mode="light"] .page-header__crumb {
  color: var(--color-text);
}
.page-header__inner--actions {
  display: grid;
  grid-template-columns: 1fr minmax(0, 280px);
  gap: 14px;
  align-items: center;
}
.page-header__actions {
  display: grid;
  gap: 10px;
}
.page-header__inner--banner {
  position: relative;
  overflow: hidden;
}
.page-header__inner--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(900px 320px at 85% 0%, rgba(255, 107, 53, 0.16), transparent 60%);
  pointer-events: none;
}
html[data-mode="light"] .page-header__inner--banner::before {
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(2, 132, 199, 0.10), transparent 60%),
    radial-gradient(900px 320px at 85% 0%, rgba(245, 158, 11, 0.10), transparent 60%);
}
.page-header__inner--banner > * {
  position: relative;
}
.page-header__links {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-header__link {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
}
html[data-mode="light"] .page-header__link {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--color-text);
}

@media (max-width: 980px) {
  .page-header__inner--actions {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .page-header__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .page-header__asideActions {
    grid-template-columns: 1fr;
  }
}

/* Articles list */
.articles-grid,
.articles-rows,
.articles-mag,
.articles-timeline,
.articles-bento {
  /* Module-scoped tokens (dark theme defaults) */
  --articles-bento-overlay-from: rgba(0, 0, 0, 0.05);
  --articles-bento-overlay-to: rgba(0, 0, 0, 0.78);
  --articles-bento-overlay-hover-from: rgba(0, 0, 0, 0.08);
  --articles-bento-overlay-hover-to: rgba(0, 0, 0, 0.86);
  --articles-bento-text: rgba(245, 247, 255, 0.96);
  --articles-bento-muted: rgba(245, 247, 255, 0.84);
}
html[data-theme="minimal"] .articles-grid,
html[data-theme="minimal"] .articles-rows,
html[data-theme="minimal"] .articles-mag,
html[data-theme="minimal"] .articles-timeline,
html[data-theme="minimal"] .articles-bento {
  /* Light theme tokens */
  --articles-bento-overlay-from: rgba(255, 255, 255, 0.10);
  --articles-bento-overlay-to: rgba(255, 255, 255, 0.90);
  --articles-bento-overlay-hover-from: rgba(255, 255, 255, 0.14);
  --articles-bento-overlay-hover-to: rgba(255, 255, 255, 0.94);
  --articles-bento-text: rgba(15, 23, 42, 0.96);
  --articles-bento-muted: rgba(15, 23, 42, 0.74);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.article-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.article-card__media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.article-card__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-card__ph {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
}
.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 12px;
}
.article-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
  font-weight: 800;
}
.article-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}
.article-card__title a:hover {
  color: var(--color-text);
}

/* Keep CTA button aligned at bottom within grid rows */
.article-card > .btn {
  margin-top: auto;
}
.article-card__summary {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* Articles list (rows variant) */
.articles-rows {
  display: grid;
  gap: 12px;
}
.article-row {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.article-row__media {
  display: block;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  align-self: start;
}
.article-row__img {
  width: 100%;
  height: auto;
  min-height: 140px;
  aspect-ratio: 11 / 8;
  object-fit: cover;
  display: block;
}
.article-row__ph {
  width: 100%;
  height: auto;
  min-height: 140px;
  aspect-ratio: 11 / 8;
  background:
    radial-gradient(420px 260px at 20% 20%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(420px 260px at 80% 30%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.article-row__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 12px;
}
.article-row__title {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
}
.article-row__title a:hover {
  color: var(--color-text);
}
.article-row__summary {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-row__actions {
  margin-top: auto;
}

@media (max-width: 980px) {
  .article-row {
    grid-template-columns: 1fr;
  }
  .article-row__media {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .article-row__img,
  .article-row__ph {
    min-height: 150px;
    aspect-ratio: 16 / 9;
  }
}

/* Article detail */
.article-detail {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.article-detail__title {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.3px;
}
.article-detail__meta {
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 12px;
}
.article-detail__content {
  color: rgba(245, 247, 255, 0.92);
  line-height: 1.85;
}
.article-detail__content h2 {
  margin: 18px 0 10px;
  font-size: 18px;
}
.article-detail__content p {
  margin: 10px 0;
  color: var(--color-text-muted);
}

@media (max-width: 980px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

/* Articles list (magazine variant) */
.articles-mag {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 16px;
  align-items: start;
}
.article-mag__featured {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  height: auto;
  align-self: start;
}
.article-mag__media {
  display: block;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.article-mag__img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}
.article-mag__ph {
  width: 100%;
  height: 100%;
  min-height: 280px;
  background:
    radial-gradient(700px 380px at 20% 20%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(700px 380px at 80% 30%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.article-mag__body {
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-mag__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.article-mag__badge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.22);
  font-weight: 900;
}
.article-mag__title {
  margin: 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.article-mag__summary {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.article-mag__actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.article-mag__side {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: auto;
  align-self: start;
}
.article-mag__sideHead {
  display: grid;
  gap: 4px;
}
.article-mag__sideTitle {
  font-weight: 950;
  letter-spacing: -0.2px;
}
.article-mag__sideHint {
  color: var(--color-text-muted);
  font-size: 13px;
}
.article-mag__sideList {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.article-mini {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.article-mini__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.article-mini__title {
  font-weight: 900;
  line-height: 1.35;
}
.article-mini__arrow {
  position: absolute;
  right: 12px;
  top: 12px;
  opacity: 0.75;
}
.article-mag__more {
  margin-top: 14px;
}
.article-mag__moreHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.article-mag__moreTitle {
  font-weight: 950;
}
.article-mag__moreHint {
  color: var(--color-text-muted);
  font-size: 13px;
}
.article-linkGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.article-link__title {
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-link__meta {
  color: var(--color-text-muted);
  font-size: 12px;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .articles-mag {
    grid-template-columns: 1fr;
  }
  .article-mag__featured {
    grid-template-columns: 1fr;
  }
  .article-mag__media {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .article-mag__img,
  .article-mag__ph {
    min-height: 220px;
  }
  .article-linkGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .article-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .article-link__title {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Articles list (timeline variant) */
.articles-timeline {
  display: grid;
  gap: 12px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.timeline-item__left {
  position: relative;
  display: grid;
  justify-items: center;
}
.timeline-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.18);
  border: 2px solid rgba(110, 231, 255, 0.38);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.35);
  margin-top: 16px;
}
.timeline-item__line {
  width: 2px;
  height: calc(100% - 18px);
  background: rgba(255, 255, 255, 0.10);
  margin-top: 6px;
}
.timeline-item__body {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}
.timeline-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.timeline-item__date {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 750;
}
.timeline-item__title {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
}
.timeline-item__summary {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.timeline-item__actions {
  margin-top: 4px;
}

/* Articles list (bento variant) */
.articles-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.bento-article {
  position: relative;
  grid-column: span 4;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  min-height: clamp(220px, 24vw, 280px);
}
.bento-article:nth-child(1) {
  grid-column: span 7;
  min-height: clamp(260px, 30vw, 320px);
}
.bento-article:nth-child(2) {
  grid-column: span 5;
  min-height: clamp(260px, 30vw, 320px);
}
.bento-article:nth-child(6n + 3) {
  grid-column: span 6;
}
.bento-article__img,
.bento-article__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bento-article__ph {
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.bento-article__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--articles-bento-overlay-from), var(--articles-bento-overlay-to));
}
.bento-article__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 16px;
  display: grid;
  gap: 10px;
  color: var(--articles-bento-text);
}
.bento-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--articles-bento-muted);
}
.bento-article__title {
  font-weight: 950;
  line-height: 1.2;
  font-size: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bento-article__summary {
  color: var(--articles-bento-muted);
  line-height: 1.7;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bento-article__cta {
  font-weight: 850;
  opacity: 0.92;
  color: var(--articles-bento-text);
}
.bento-article:hover .bento-article__overlay {
  background: linear-gradient(180deg, var(--articles-bento-overlay-hover-from), var(--articles-bento-overlay-hover-to));
}

@media (max-width: 980px) {
  .articles-bento {
    grid-template-columns: 1fr;
  }
  .bento-article,
  .bento-article:nth-child(1),
  .bento-article:nth-child(2),
  .bento-article:nth-child(6n + 3) {
    grid-column: auto;
    min-height: 220px;
  }
}

/* Features (v1) */
.section-features--v1 {
  padding-top: var(--section-pad-y-sm);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.feature-card {
  border-radius: var(--card-radius, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  padding: 18px;
  box-shadow: var(--card-shadow, var(--shadow-sm));
}
.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--iconbox-radius, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: var(--iconbox-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--iconbox-border, rgba(255, 255, 255, 0.10));
  color: var(--iconbox-color, rgba(245, 247, 255, 0.92));
  font-size: 20px;
}
.feature-card__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.feature-card__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 850;
}
.feature-card__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* Game categories (v1) */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.category-card {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  padding: 16px;
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  display: grid;
  gap: 12px;
  align-content: start;
}
.category-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.category-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--iconbox-radius, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--iconbox-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--iconbox-border, rgba(255, 255, 255, 0.10));
  color: var(--iconbox-color, rgba(245, 247, 255, 0.92));
  font-size: 18px;
}
.category-card__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.category-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 850;
}
.category-card__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
  min-height: 0;
}

/* CTA (v1) */
.section-cta--v1 {
  padding-bottom: var(--section-pad-y-sm);
}
.cta-card {
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(110, 231, 255, 0.18), transparent 60%),
    radial-gradient(900px 320px at 85% 0%, rgba(255, 107, 53, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cta-card__title {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.2px;
}
.cta-card__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta-card {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-card__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 520px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA variants */
.section-cta--pills,
.section-cta--stack,
.section-cta--panel {
  padding-bottom: var(--section-pad-y-sm);
}
.cta-pills,
.cta-stack,
.cta-panel {
  border-radius: 26px;
  padding: 18px;
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(110, 231, 255, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
}
html[data-mode="light"] .cta-pills,
html[data-mode="light"] .cta-stack,
html[data-mode="light"] .cta-panel {
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(2, 132, 199, 0.10), transparent 60%),
    rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.12);
}
.cta-pills {
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
}
.cta-pills__content {
  width: min(820px, 100%);
}
.cta-pills__main {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: 14px;
  align-items: center;
  text-align: left;
}
.cta-pills__kicker,
.cta-stack__kicker,
.cta-panel__kicker {
  color: var(--color-text-muted);
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 850;
}
.cta-pills__title,
.cta-stack__title,
.cta-panel__title {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.2px;
}
.cta-pills__subtitle,
.cta-stack__subtitle,
.cta-panel__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.cta-pills__actions {
  display: grid;
  gap: 10px;
  width: min(720px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cta-pills__links {
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  justify-content: center;
}
.cta-pills__link {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  white-space: nowrap;
}
html[data-mode="light"] .cta-pills__link {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
.cta-stack {
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
}
.cta-stack__actions {
  width: min(520px, 100%);
  display: grid;
  gap: 10px;
}
.cta-panel {
  display: grid;
  grid-template-columns: 1fr minmax(0, 360px);
  gap: 16px;
  align-items: center;
}
.cta-panel__right {
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
html[data-mode="light"] .cta-panel__right {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.10);
}
.cta-panel__actions {
  display: grid;
  gap: 10px;
}
@media (max-width: 980px) {
  .cta-pills {
    text-align: left;
    justify-items: stretch;
  }
  .cta-pills__main {
    grid-template-columns: 1fr;
  }
  .cta-pills__actions {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .cta-stack {
    text-align: left;
    justify-items: stretch;
  }
  .cta-stack__actions {
    width: 100%;
  }
}

/* Game categories (v2) */
.categories-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--chip-pad-y, 10px) var(--chip-pad-x, 12px);
  border-radius: var(--chip-radius, 999px);
  background: var(--chip-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--chip-border, rgba(255, 255, 255, 0.10));
  color: rgba(245, 247, 255, 0.92);
  font-weight: 750;
  font-size: var(--chip-text, 13px);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.pill:hover {
  background: color-mix(in oklab, var(--chip-bg, rgba(255, 255, 255, 0.06)) 70%, rgba(255, 255, 255, 0.10));
  border-color: color-mix(in oklab, var(--chip-border, rgba(255, 255, 255, 0.10)) 70%, rgba(255, 255, 255, 0.18));
  transform: translateY(-1px);
}
.categories-compact {
  display: grid;
  gap: 10px;
}
.category-compact {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
}
.category-compact__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--iconbox-radius, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--iconbox-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--iconbox-border, rgba(255, 255, 255, 0.10));
  color: var(--iconbox-color, rgba(245, 247, 255, 0.92));
  font-size: 18px;
}
.category-compact__icon--empty {
  visibility: hidden;
}
.category-compact__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 900;
}
.category-compact__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}
@media (max-width: 720px) {
  .category-compact {
    grid-template-columns: 44px 1fr;
  }
  .category-compact .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Features (v2) */
.features-list {
  display: grid;
  gap: 10px;
}
.feature-row {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}
.feature-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 20px;
}
.feature-row__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.feature-row__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.feature-row__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Features (v4) checks */
.features-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 6px;
}
.check-item {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}
.check-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  color: rgba(245, 247, 255, 0.95);
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.24);
}
.check-item__title {
  font-weight: 900;
}
.check-item__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
@media (max-width: 980px) {
  .features-checks {
    grid-template-columns: 1fr;
  }
}

/* Features (v3) timeline */
.features-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.timeline-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}
.timeline-step__num {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.timeline-step__card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.timeline-step__icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 18px;
  margin-bottom: 8px;
}
.timeline-step__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.timeline-step__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Features (v5) numbers over hero bg */
.section-features--numbers {
  position: relative;
  overflow: hidden;
}
.features-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
}
.features-hero-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}
.features-hero-bg__color {
  width: 100%;
  height: 100%;
}
.features-hero-bg__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(255, 107, 53, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.section-features--numbers .container {
  position: relative;
  z-index: 1;
}
.features-hero {
  border-radius: 26px;
  padding: 18px;
  background: rgba(7, 10, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}
.section-features--numbers .features-hero .section-title {
  color: rgba(248, 251, 255, 0.98);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}
.section-features--numbers .features-hero .section-subtitle {
  color: rgba(235, 242, 255, 0.90);
}
.section-features--numbers .features-hero__badge .badge__label {
  color: rgba(248, 251, 255, 0.96);
}
.features-hero__head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.features-hero__badge {
  justify-self: start;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}
.features-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.num-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px;
}
.num-card__num {
  font-weight: 950;
  color: rgba(255, 255, 255, 0.80);
  font-size: 18px;
}
.num-card__title {
  margin-top: 8px;
  font-weight: 950;
  color: rgba(248, 251, 255, 0.96);
}
.num-card__desc {
  margin-top: 6px;
  color: rgba(245, 247, 255, 0.82);
  line-height: 1.6;
  font-size: 13px;
}
@media (max-width: 980px) {
  .features-number-grid {
    grid-template-columns: 1fr;
  }
}

/* Promotions (v1) */
.section-promos .section-subtitle {
  /* promotions sections often stack; allow subtitle to align with content width */
  max-width: none;
}
.promos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.promo-card {
  border-radius: var(--card-radius, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  padding: 18px;
  box-shadow: var(--card-shadow, var(--shadow-sm));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promo-card__media {
  border-radius: var(--card-radius-lg, 16px);
  overflow: hidden;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  aspect-ratio: 16 / 9;
}
.promo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Promotions bento (v4) */
.promos-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.promo-bento {
  position: relative;
  grid-column: span 4;
  border-radius: var(--card-radius-xl, 26px);
  overflow: hidden;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  min-height: clamp(220px, 25vw, 280px);
}
.promo-bento:nth-child(1) {
  grid-column: span 7;
  min-height: clamp(260px, 30vw, 320px);
}
.promo-bento:nth-child(2) {
  grid-column: span 5;
  min-height: clamp(260px, 30vw, 320px);
}
.promo-bento:nth-child(6n + 3) {
  grid-column: span 6;
}
.promo-bento__img,
.promo-bento__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-bento__ph {
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(249, 115, 22, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.promo-bento__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.82));
}
.promo-bento__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--card-pad, 16px);
  display: grid;
  gap: var(--gap-sm, 10px);
}
.promo-bento__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.promo-bento__title {
  font-weight: 950;
  line-height: 1.2;
  font-size: 18px;
  color: rgba(248, 250, 252, 0.98);
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.62);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-bento__desc {
  color: rgba(248, 250, 252, 0.94);
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  line-height: 1.7;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-bento__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.promo-bento__hi {
  font-weight: 1000;
  opacity: 0.96;
  color: rgba(248, 250, 252, 0.98);
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.62);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  max-width: min(72%, 320px);
}
.promo-bento__cta {
  font-weight: 850;
  opacity: 0.98;
  color: rgba(248, 250, 252, 0.98);
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.62);
  white-space: nowrap;
}

/* Promotions compare (v5) */
.promo-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.compare-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.compare-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.compare-card__title {
  font-weight: 950;
  letter-spacing: -0.2px;
  min-width: 0;
  flex: 1 1 220px;
  overflow-wrap: anywhere;
}
.compare-card__desc {
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 13px;
}
.compare-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.metric {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  display: grid;
  gap: 6px;
}
.metric__label {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
}
.metric__value {
  font-weight: 1000;
}
.compare-card__actions {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

@media (max-width: 980px) {
  .promos-bento {
    grid-template-columns: 1fr;
  }
  .promo-bento,
  .promo-bento:nth-child(1),
  .promo-bento:nth-child(2),
  .promo-bento:nth-child(6n + 3) {
    grid-column: auto;
    min-height: 220px;
  }
  .promo-bento__content {
    gap: 8px;
  }
  .promo-bento__title {
    font-size: 17px;
    -webkit-line-clamp: 2;
  }
  .promo-bento__desc {
    font-size: 12px;
    line-height: 1.6;
    -webkit-line-clamp: 2;
  }
  .promo-bento__hi {
    font-size: 12px;
    -webkit-line-clamp: 2;
    max-width: 68%;
  }
  .promo-bento__cta {
    font-size: 13px;
  }
  .promo-compare {
    grid-template-columns: 1fr;
  }
  .compare-card__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .compare-card__metrics {
    grid-template-columns: 1fr;
  }
}
.promo-card__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(400px 220px at 20% 20%, rgba(110, 231, 255, 0.18), transparent 60%),
    radial-gradient(400px 220px at 80% 30%, rgba(255, 107, 53, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.promo-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.promo-card__title {
  font-weight: 900;
  letter-spacing: -0.2px;
}
.promo-card__tag {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
}
.promo-card__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.promo-card__highlight {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: rgba(245, 247, 255, 0.96);
}

/* Pin CTA button to bottom for consistent alignment */
.promo-card .btn {
  margin-top: auto;
}

/* Testimonials (v1) */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.testimonial-card {
  border-radius: var(--card-radius, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  padding: 18px;
  box-shadow: var(--card-shadow, var(--shadow-sm));
}
.testimonial-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.testimonial-card__who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.testimonial-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.testimonial-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial-avatar__ph {
  font-size: 16px;
  opacity: 0.9;
}
.testimonial-card__name {
  font-weight: 900;
}
.testimonial-card__tag {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
}
.testimonial-card__content {
  margin: 0;
  line-height: 1.75;
  color: rgba(245, 247, 255, 0.92);
}

/* Testimonials (v2) featured */
.testimonials-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px;
  align-items: start;
}
.testimonial-featured {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.testimonial-featured__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.testimonial-featured__who {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.testimonial-featured__titleline {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.testimonial-featured__titleline .name {
  font-weight: 950;
}
.stars {
  color: rgba(245, 247, 255, 0.75);
  font-size: 12px;
  letter-spacing: 2px;
  margin-top: 6px;
}
.quote-mark {
  font-size: 56px;
  line-height: 1;
  opacity: 0.18;
}
.testimonial-featured__content {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(245, 247, 255, 0.90);
}
.testimonial-featured__meta {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.testimonials-mini {
  display: grid;
  gap: 10px;
}
.testimonial-mini {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
}
.testimonial-mini__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.testimonial-mini__name {
  font-weight: 900;
}
.testimonial-mini__tag {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.92);
}
.testimonial-mini__content {
  color: var(--color-text-muted);
  line-height: 1.7;
}
@media (max-width: 980px) {
  .testimonials-featured {
    grid-template-columns: 1fr;
  }
}

/* Security (v1) */
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.security-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.security-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--iconbox-radius, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: var(--iconbox-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--iconbox-border, rgba(255, 255, 255, 0.10));
  color: var(--iconbox-color, rgba(245, 247, 255, 0.92));
  font-size: 20px;
}
.security-card__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.security-badge__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.security-card__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
}
.security-card__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.security-badges {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.security-badge__label {
  font-size: 12px;
  font-weight: 750;
  color: rgba(245, 247, 255, 0.9);
}

/* Security privacy v2 (rail steps) */
.security-rail {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.security-rail__body {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}
.security-rail__body--solo {
  grid-template-columns: minmax(0, 1fr);
}
.security-steps {
  display: grid;
  gap: 10px;
}
.security-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
}
.security-step__num {
  width: 44px;
  height: 44px;
  border-radius: var(--iconbox-radius, 14px);
  display: grid;
  place-items: center;
  background: var(--iconbox-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--iconbox-border, rgba(255, 255, 255, 0.10));
  color: var(--iconbox-color, rgba(245, 247, 255, 0.92));
  font-weight: 950;
}
.security-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.security-step__title {
  font-weight: 900;
}
.security-step__desc {
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 13px;
}
.security-step__icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.security-step__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.security-rail__badges .security-badges {
  margin-top: 0;
  display: grid;
  gap: 10px;
}
.security-rail__badges .security-badge {
  justify-content: flex-start;
}

/* Security privacy v3 (split + checklist) */
.security-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}
.security-prose {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 8px 0 12px;
}
.security-checks {
  display: grid;
  gap: 10px;
}
.security-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
}
.security-check__h {
  font-weight: 900;
  margin-bottom: 6px;
}
.security-check__p {
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 13px;
}
.security-sideCard {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.security-sideCard__title {
  font-weight: 950;
}
.security-sideCard__desc {
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 13px;
}
.security-sideCard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 980px) {
  .security-rail__body {
    grid-template-columns: 1fr;
  }
  .security-split {
    grid-template-columns: 1fr;
  }
}

/* FAQ (v1) */
.faq-list {
  display: grid;
  gap: 10px;
}
.faq-item {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.faq-q__text {
  font-weight: 850;
  color: var(--color-text);
}
.faq-q__icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  flex: 0 0 auto;
}
.faq-q__icon::before,
.faq-q__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--color-text);
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.faq-q__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-q[aria-expanded="true"] .faq-q__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-a {
  padding: 0 14px 14px;
}
.faq-a__inner {
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ===== SEO text + internal links (v1/v2/v3) ===== */
.page-body-prose {
  width: min(100%, 920px);
  margin-inline: auto;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.85;
}
.page-body-prose > :first-child {
  margin-top: 0;
}
.page-body-prose > :last-child {
  margin-bottom: 0;
}
.page-body-prose h2,
.page-body-prose h3 {
  color: var(--color-text);
  line-height: 1.35;
}
.page-body-prose h2 {
  margin: 28px 0 12px;
  font-size: clamp(20px, 2vw, 28px);
}
.page-body-prose h3 {
  margin: 22px 0 10px;
  font-size: clamp(17px, 1.5vw, 21px);
}
.page-body-prose p,
.page-body-prose ul,
.page-body-prose ol {
  margin: 0 0 14px;
}
.page-body-prose li + li {
  margin-top: 6px;
}

.seo-text {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
}
.seo-text--plain {
  /* Keep only the outer card; inner content is plain text */
}
.seo-plain__h2 {
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: clamp(20px, 2.0vw, 28px);
}
.seo-plain__h2--outside {
  margin-bottom: 10px;
  padding-left: 2px;
}
.seo-plain__body {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.seo-plain__block {
  display: grid;
  gap: 8px;
}
.seo-plain__h3 {
  margin: 0;
  font-weight: 950;
  font-size: 16px;
}
.seo-plain__p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.85;
  font-size: 13px;
}
.seo-plain__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.seo-plain__details {
  padding-top: 4px;
}
.seo-plain__summary {
  width: fit-content;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 850;
}
.seo-plain__expanded {
  margin-top: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: 13px;
}
.seo-plain__expanded > :first-child {
  margin-top: 0;
}
.seo-plain__expanded > :last-child {
  margin-bottom: 0;
}
.seo-text__head {
  display: grid;
  gap: 10px;
}
.seo-text__badge {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 850;
}
.seo-text__title {
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: clamp(20px, 2.0vw, 28px);
}
.seo-text__intro {
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* v1: doc style */
.seo-text--doc .seo-text__links {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.seo-link {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px 12px;
  display: grid;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.seo-link:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.seo-link__label {
  font-weight: 950;
}
.seo-link__desc {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.seo-link__arrow {
  margin-top: 2px;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
  font-weight: 900;
}
.seo-text--doc .seo-text__body {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.seo-block {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
}
.seo-block__h {
  font-weight: 950;
  font-size: 16px;
}
.seo-block__p {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: 13px;
}
.seo-callout {
  margin-top: 14px;
  border-radius: 22px;
  background: radial-gradient(520px 220px at 15% 10%, rgba(255, 214, 110, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  padding: 14px;
}
.seo-callout__title {
  font-weight: 950;
}
.seo-callout__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 13px;
}

/* v2: split rail */
.seo-text--split {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.seo-rail {
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--header-h, 64px) + 14px);
}
.seo-rail__title {
  font-weight: 950;
}
.seo-rail__toc {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.seo-toc {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 10px 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 850;
  font-size: 13px;
}
.seo-toc:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.seo-rail__links {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.seo-main__head {
  padding: 4px 2px;
}
.seo-main__sections {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.seo-block--anchor {
  scroll-margin-top: calc(var(--header-h, 64px) + 16px);
}
.seo-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* v3: stack QA + cards */
.seo-text--stack .seo-text__head--stack {
  gap: 8px;
}
.seo-qa {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.seo-qa__item {
  background: rgba(255, 255, 255, 0.03);
}
.seo-cards {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.seo-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 8px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.seo-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.seo-card__title {
  font-weight: 950;
}
.seo-card__desc {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.seo-card__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

/* Light background readability */
html[data-theme="minimal"] .section-seo-text .seo-text,
html[data-theme="minimal"] .section-seo-text .seo-link,
html[data-theme="minimal"] .section-seo-text .seo-block,
html[data-theme="minimal"] .section-seo-text .seo-card,
html[data-theme="minimal"] .section-seo-text .seo-toc,
html[data-theme="minimal"] .section-seo-text .seo-rail,
html[data-theme="minimal"] .section-seo-text .seo-callout,
html[data-theme="minimal"] .section-seo-text .seo-qa__item {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .section-seo-text .seo-rail {
  background: rgba(2, 6, 23, 0.03);
}
html[data-theme="minimal"] .section-seo-text .seo-text__badge {
  background: rgba(2, 6, 23, 0.04);
  border-color: rgba(2, 6, 23, 0.10);
}

@media (max-width: 980px) {
  .seo-text--doc .seo-text__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .seo-text--split {
    grid-template-columns: 1fr;
  }
  .seo-rail {
    position: relative;
    top: auto;
  }
  .seo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .promos-grid,
  .testimonials-grid,
  .security-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer */
.site-footer {
  --footer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-text: rgba(245, 247, 255, 0.95);
  --footer-surface-bg: rgba(255, 255, 255, 0.03);
  --footer-surface-border: rgba(255, 255, 255, 0.08);
  --footer-surface-bg-strong: rgba(255, 255, 255, 0.06);
  --footer-surface-border-strong: rgba(255, 255, 255, 0.10);
  --footer-bottom-border: rgba(255, 255, 255, 0.08);
  --footer-badge-bg: rgba(255, 255, 255, 0.06);
  --footer-badge-border: rgba(255, 255, 255, 0.10);
  --footer-pill-bg: rgba(255, 255, 255, 0.04);
  --footer-pill-border: rgba(255, 255, 255, 0.10);
  --footer-pill-text: rgba(245, 247, 255, 0.88);
  --footer-pill-bg-hover: rgba(255, 255, 255, 0.07);
  --footer-pill-border-hover: rgba(255, 255, 255, 0.12);
  --footer-pill-text-hover: rgba(245, 247, 255, 0.94);

  padding: var(--section-pad-y) 0 28px;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
}
html[data-mode="light"] .site-footer {
  --footer-bg: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-bg) 96%, rgba(15, 23, 42, 0.02)),
    color-mix(in oklab, var(--color-bg) 90%, rgba(15, 23, 42, 0.01))
  );
  --footer-border: rgba(15, 23, 42, 0.10);
  --footer-text: var(--color-text);
  --footer-surface-bg: rgba(15, 23, 42, 0.03);
  --footer-surface-border: rgba(15, 23, 42, 0.10);
  --footer-surface-bg-strong: rgba(15, 23, 42, 0.04);
  --footer-surface-border-strong: rgba(15, 23, 42, 0.12);
  --footer-bottom-border: rgba(15, 23, 42, 0.10);
  --footer-badge-bg: rgba(15, 23, 42, 0.03);
  --footer-badge-border: rgba(15, 23, 42, 0.10);
  --footer-pill-bg: rgba(15, 23, 42, 0.03);
  --footer-pill-border: rgba(15, 23, 42, 0.10);
  --footer-pill-text: var(--color-text);
  --footer-pill-bg-hover: rgba(15, 23, 42, 0.05);
  --footer-pill-border-hover: rgba(15, 23, 42, 0.14);
  --footer-pill-text-hover: var(--color-text);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  grid-template-areas:
    "brand cta"
    "links links";
  gap: 20px;
  align-items: start;
}
.footer-brand {
  grid-area: brand;
}
.footer-cta {
  grid-area: cta;
}
.footer-links {
  grid-area: links;
}
.footer-brand__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-brand__name {
  font-weight: 850;
  letter-spacing: 0.2px;
}
.footer-brand__desc {
  margin: 12px 0 16px;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 62ch;
}
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--footer-badge-bg);
  border: 1px solid var(--footer-badge-border);
}
.badge__label {
  font-size: 12px;
  font-weight: 650;
  color: color-mix(in oklab, var(--footer-text) 90%, var(--color-text-muted));
}
.footer-links {
  border-radius: 22px;
  background: var(--footer-surface-bg);
  border: 1px solid var(--footer-surface-border);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.footer-links__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 850;
  margin: 0;
}
.footer-links__title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(110, 231, 255, 0.12);
}
.footer-links__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.footer-links__list a,
.footer-links__list span[aria-disabled="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--footer-pill-bg);
  border: 1px solid var(--footer-pill-border);
  color: var(--footer-pill-text);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.footer-links__list a:hover {
  background: var(--footer-pill-bg-hover);
  border-color: var(--footer-pill-border-hover);
  color: var(--footer-pill-text-hover);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-links__list {
    justify-content: flex-start;
  }
}
.footer-cta__card {
  border-radius: 22px;
  background: var(--footer-surface-bg-strong);
  border: 1px solid var(--footer-surface-border-strong);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.footer-cta__title {
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: 18px;
  margin-bottom: 6px;
}
.footer-cta__subtitle {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.footer-cta__actions {
  display: grid;
  gap: 10px;
}
.site-footer__bottom {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--footer-bottom-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.footer-meta a:hover {
  color: color-mix(in oklab, var(--footer-text) 92%, var(--color-primary));
}
.sep {
  opacity: 0.4;
}

@media (max-width: 980px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "cta"
      "links";
  }
}

/* Footer variant: row layout (footer_brand_row_v2) */
.site-footer[data-module="footer_brand_row_v2"] {
  padding: var(--section-pad-y-sm) 0 22px;
}
.footer-row {
  display: grid;
  grid-template-columns: 1.25fr 1.2fr 0.75fr;
  gap: 18px;
  align-items: start;
}
.footer-row__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 850;
}
.footer-row__logo img {
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.footer-row__name {
  letter-spacing: 0.2px;
}
.footer-row__desc {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 56ch;
}
.footer-row__title {
  font-weight: 850;
  margin-bottom: 10px;
}
.footer-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-row__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--footer-pill-bg);
  border: 1px solid var(--footer-pill-border);
  color: var(--footer-pill-text);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.footer-row__list a:hover {
  background: var(--footer-pill-bg-hover);
  border-color: var(--footer-pill-border-hover);
  color: var(--footer-pill-text-hover);
  transform: translateY(-1px);
}
.footer-row__actions {
  display: grid;
  gap: 10px;
}

@media (max-width: 980px) {
  .footer-row {
    grid-template-columns: 1fr;
  }
  .footer-row__actions .btn {
    width: 100%;
  }
}

/* Footer variant: centered stack (footer_brand_center_v3) */
.site-footer[data-module="footer_brand_center_v3"] {
  padding: var(--section-pad-y-sm) 0 22px;
}
.footer-center {
  display: grid;
  gap: 16px;
}
.footer-center__top {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items: start;
}
.footer-center__badges {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-center__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
}
.footer-center__logo img {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.footer-center__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 68ch;
}
.footer-center__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-linkPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--footer-pill-bg);
  border: 1px solid var(--footer-pill-border);
  color: var(--footer-pill-text);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.footer-linkPill:hover {
  background: var(--footer-pill-bg-hover);
  border-color: var(--footer-pill-border-hover);
  color: var(--footer-pill-text-hover);
  transform: translateY(-1px);
}
.footer-center__actions {
  display: grid;
  gap: 10px;
}
.footer-center__actions .btn {
  width: 100%;
}
@media (max-width: 980px) {
  .footer-center__top {
    grid-template-columns: 1fr;
  }
}

/* Footer variant: columns (footer_brand_columns_v4) */
.site-footer[data-module="footer_brand_columns_v4"] {
  padding: var(--section-pad-y) 0 28px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.85fr;
  gap: 18px;
  align-items: start;
}
.footer-cols__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
}
.footer-cols__logo img {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.footer-cols__desc {
  margin: 10px 0 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
}
.footer-cols__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-cols__title,
.footer-cols__ctaTitle {
  font-weight: 900;
  margin-bottom: 10px;
}
.footer-cols__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.footer-cols__list a,
.footer-cols__list span[aria-disabled="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--footer-pill-bg);
  border: 1px solid var(--footer-pill-border);
  color: var(--footer-pill-text);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.footer-cols__list a:hover {
  background: var(--footer-pill-bg-hover);
  border-color: var(--footer-pill-border-hover);
  transform: translateY(-1px);
}
.footer-cols__ctaSubtitle {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}
.footer-cols__actions {
  display: grid;
  gap: 10px;
}
@media (max-width: 980px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
}
/* Keep compact footer links in two columns on standard mobile widths. */
@media (max-width: 319px) {
  .footer-cols__list {
    grid-template-columns: 1fr;
  }
}

/* Footer variant: split (footer_brand_split_v5) */
.site-footer[data-module="footer_brand_split_v5"] {
  padding: var(--section-pad-y-sm) 0 22px;
}
.footer-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.footer-split__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
}
.footer-split__logo img {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.footer-split__desc {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
}
.footer-split__right {
  display: grid;
  gap: 12px;
  justify-items: end;
}
.footer-split__actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-split__miniLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.footer-split__miniLink {
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--footer-pill-bg);
  border: 1px solid var(--footer-pill-border);
  color: var(--footer-pill-text);
}
.footer-split__miniLink:hover {
  background: var(--footer-pill-bg-hover);
  border-color: var(--footer-pill-border-hover);
  color: var(--footer-pill-text-hover);
}
@media (max-width: 980px) {
  .footer-split {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-split__right {
    justify-items: stretch;
  }
  .footer-split__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .footer-split__actions .btn {
    width: 100%;
  }
  .footer-split__miniLinks {
    justify-content: flex-start;
  }
}

/* ===== Theme overrides: minimal (light) ===== */
/* Hero text color is now controlled by .hero--light-text to avoid
   over-bright text on light backgrounds. */

/* Minimal + arcade hero: keep original card style, improve text readability */
html[data-theme="minimal"] .hero--slots-arcade .arcade-hero__title,
html[data-theme="minimal"] .hero--slots-arcade .arcade-hero__subtitle,
html[data-theme="minimal"] .hero--slots-arcade .arcade-hero__desc,
html[data-theme="minimal"] .hero--slots-arcade .arcade-hero__badge,
html[data-theme="minimal"] .hero--slots-arcade .chip,
html[data-theme="minimal"] .hero--slots-arcade .arcade-panel,
html[data-theme="minimal"] .hero--slots-arcade .arcade-panel__hint,
html[data-theme="minimal"] .hero--slots-arcade .arcade-tile__label,
html[data-theme="minimal"] .hero--slots-arcade .arcade-tile__arrow {
  color: rgba(245, 247, 255, 0.95);
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
html[data-theme="minimal"] .hero--slots-arcade .arcade-hero__desc,
html[data-theme="minimal"] .hero--slots-arcade .arcade-panel__hint {
  color: rgba(245, 247, 255, 0.82);
}

/* Card surfaces: increase separation on light background */
html[data-theme="minimal"] .feature-card,
html[data-theme="minimal"] .feature-row,
html[data-theme="minimal"] .category-card,
html[data-theme="minimal"] .promo-card,
html[data-theme="minimal"] .promo-slide,
html[data-theme="minimal"] .testimonial-card,
html[data-theme="minimal"] .security-card,
html[data-theme="minimal"] .about-card,
html[data-theme="minimal"] .about-meta,
html[data-theme="minimal"] .story-grid__placeholder,
html[data-theme="minimal"] .hot-game-card,
html[data-theme="minimal"] .vip-card,
html[data-theme="minimal"] .responsible-card,
html[data-theme="minimal"] .step-card,
html[data-theme="minimal"] .persona-card,
html[data-theme="minimal"] .contact-card,
html[data-theme="minimal"] .contact-hub,
html[data-theme="minimal"] .support-card,
html[data-theme="minimal"] .support-side__block,
html[data-theme="minimal"] .support-widget,
html[data-theme="minimal"] .support-info,
html[data-theme="minimal"] .support-entry,
html[data-theme="minimal"] .support-safe,
html[data-theme="minimal"] .support-stat,
html[data-theme="minimal"] .chat-preview,
html[data-theme="minimal"] .app-card,
html[data-theme="minimal"] .app-banner,
html[data-theme="minimal"] .app-showcase,
html[data-theme="minimal"] .app-steps,
html[data-theme="minimal"] .app-compare,
html[data-theme="minimal"] .compare-col,
html[data-theme="minimal"] .device-card,
html[data-theme="minimal"] .app-note,
html[data-theme="minimal"] .app-support,
html[data-theme="minimal"] .app-qrbox,
html[data-theme="minimal"] .article-card,
html[data-theme="minimal"] .article-row,
html[data-theme="minimal"] .timeline-item__body,
html[data-theme="minimal"] .article-mag__featured,
html[data-theme="minimal"] .article-mag__side,
html[data-theme="minimal"] .article-mini,
html[data-theme="minimal"] .article-link,
html[data-theme="minimal"] .article-detail,
html[data-theme="minimal"] .footer-links,
html[data-theme="minimal"] .footer-cta__card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--shadow-sm);
}

/* Contact hub (v3): avoid "one huge white card" in minimal theme */
html[data-theme="minimal"] .contact-hub {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Media frames */
html[data-theme="minimal"] .promo-card__media,
html[data-theme="minimal"] .promo-slide__media,
html[data-theme="minimal"] .article-card__media,
html[data-theme="minimal"] .article-row__media,
html[data-theme="minimal"] .article-mag__media {
  border-color: var(--card-border);
  background: rgba(15, 23, 42, 0.03);
}

/* Text that was hard-coded for dark theme */
html[data-theme="minimal"] .testimonial-card__content,
html[data-theme="minimal"] .article-detail__content {
  color: var(--color-text);
}
html[data-theme="minimal"] .article-card__title a:hover,
html[data-theme="minimal"] .article-row__title a:hover,
html[data-theme="minimal"] .footer-meta a:hover {
  color: rgba(15, 23, 42, 0.96);
}

/* Timeline readability on light background */
html[data-theme="minimal"] .timeline-item__line {
  background: rgba(15, 23, 42, 0.12);
}
html[data-theme="minimal"] .timeline-item__dot {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.14);
}

/* Chips / tags / pills / badges */
html[data-theme="minimal"] .tag,
html[data-theme="minimal"] .pill,
html[data-theme="minimal"] .article-pill,
html[data-theme="minimal"] .promo-card__tag,
html[data-theme="minimal"] .promo-slide__tag,
html[data-theme="minimal"] .testimonial-card__tag,
html[data-theme="minimal"] .badge,
html[data-theme="minimal"] .security-badge {
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: rgba(15, 23, 42, 0.88);
  box-shadow: none;
}
/* Exception: hero sits on dark image backgrounds even in minimal theme */
html[data-theme="minimal"] .hero__tags .tag {
  background: rgba(15, 23, 42, 0.38);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
html[data-theme="minimal"] .badge__label,
html[data-theme="minimal"] .security-badge__label {
  color: rgba(15, 23, 42, 0.88);
}

/* FAQ readability on light background */
html[data-theme="minimal"] .faq-item {
  background: var(--card-bg);
  border-color: var(--card-border);
}
html[data-theme="minimal"] .faq-q__text {
  color: var(--color-text);
}
html[data-theme="minimal"] .faq-q__icon {
  border-color: var(--chip-border);
  background: var(--chip-bg);
}
html[data-theme="minimal"] .faq-q__icon::before,
html[data-theme="minimal"] .faq-q__icon::after {
  background: rgba(15, 23, 42, 0.72);
}

/* About meta items were hard-coded for dark theme */
html[data-theme="minimal"] .about-meta__item {
  color: rgba(15, 23, 42, 0.88);
}

/* Footer becomes light to avoid "muddy" bottom separation */
html[data-theme="minimal"] .site-footer {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.04));
  border-top-color: var(--card-border);
  color: var(--color-text);
}
html[data-theme="minimal"] .site-footer__bottom {
  border-top-color: var(--card-border);
  color: var(--color-text-muted);
}
html[data-theme="minimal"] .footer-links__list a {
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: rgba(15, 23, 42, 0.88);
}
html[data-theme="minimal"] .footer-links__list a:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

/* Section banding to enhance depth across the whole page */
html[data-theme="minimal"] main > .section {
  position: relative;
}
html[data-theme="minimal"] main > .section:nth-of-type(even) {
  background: rgba(15, 23, 42, 0.02);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04), inset 0 -1px 0 rgba(15, 23, 42, 0.04);
}

/* Promotions highlight text was tuned for dark theme */
html[data-theme="minimal"] .promo-card__highlight {
  color: rgba(15, 23, 42, 0.96);
}

/* Header width + small text readability (brand1 long name) */
html[data-theme="minimal"] .site-header .container {
  max-width: 1360px;
}

/* Compact header variant: save width for navigation */
[data-module="header_brand_compact_v1"] .brand__code {
  display: none;
}
[data-module="header_brand_compact_v1"] .brand__text {
  max-width: 150px;
}

/* ===== Theme overrides: casino_neon (brand2) ===== */
html[data-theme="casino_neon"][data-mode="dark"] body {
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(34, 197, 94, 0.18), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(249, 115, 22, 0.16), transparent 58%),
    radial-gradient(700px 420px at 55% 30%, rgba(56, 189, 248, 0.10), transparent 62%),
    linear-gradient(180deg, var(--color-bg) 0%, #070a18 55%, #060717 100%);
  background-attachment: fixed;
}
html[data-theme="casino_neon"][data-mode="dark"] .btn--primary {
  box-shadow: 0 14px 40px rgba(34, 197, 94, 0.22);
}
html[data-theme="casino_neon"][data-mode="dark"] .hero__bg {
  background:
    radial-gradient(900px 600px at 18% 18%, rgba(34, 197, 94, 0.22), transparent 60%),
    radial-gradient(900px 600px at 86% 24%, rgba(249, 115, 22, 0.18), transparent 60%),
    radial-gradient(700px 520px at 55% 22%, rgba(56, 189, 248, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.78));
  background-size: cover;
  background-position: center;
  filter: saturate(1.25) contrast(1.08);
}
html[data-theme="casino_neon"][data-mode="dark"] .panel,
html[data-theme="casino_neon"][data-mode="dark"] .casino-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.44);
}
html[data-theme="casino_neon"][data-mode="dark"] .tag,
html[data-theme="casino_neon"][data-mode="dark"] .chip,
html[data-theme="casino_neon"][data-mode="dark"] .pill {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="casino_neon"][data-mode="dark"] .section-title {
  letter-spacing: -0.2px;
}
html[data-theme="casino_neon"][data-mode="dark"] .feature-card,
html[data-theme="casino_neon"][data-mode="dark"] .category-card,
html[data-theme="casino_neon"][data-mode="dark"] .promo-card,
html[data-theme="casino_neon"][data-mode="dark"] .testimonial-card,
html[data-theme="casino_neon"][data-mode="dark"] .security-card,
html[data-theme="casino_neon"][data-mode="dark"] .about-card,
html[data-theme="casino_neon"][data-mode="dark"] .vip-card,
html[data-theme="casino_neon"][data-mode="dark"] .article-card,
html[data-theme="casino_neon"][data-mode="dark"] .footer-links,
html[data-theme="casino_neon"][data-mode="dark"] .footer-cta__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="casino_neon"][data-mode="dark"] .site-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-top-color: rgba(255, 255, 255, 0.10);
}

/* ===== Theme overrides: slots_arcade (brand3) ===== */
html[data-theme="slots_arcade"][data-mode="dark"] body {
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(255, 61, 245, 0.18), transparent 56%),
    radial-gradient(900px 520px at 90% 12%, rgba(139, 92, 246, 0.16), transparent 58%),
    radial-gradient(700px 460px at 55% 28%, rgba(34, 197, 94, 0.12), transparent 62%),
    linear-gradient(180deg, var(--color-bg) 0%, #07051a 55%, #06041a 100%);
  background-attachment: fixed;
}
html[data-theme="slots_arcade"][data-mode="dark"] .btn--primary {
  box-shadow: 0 16px 56px rgba(255, 61, 245, 0.22);
}
html[data-theme="slots_arcade"][data-mode="dark"] .hero__bg {
  background:
    radial-gradient(900px 600px at 18% 18%, rgba(255, 61, 245, 0.22), transparent 60%),
    radial-gradient(900px 600px at 86% 24%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(700px 520px at 55% 22%, rgba(34, 197, 94, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.82));
  background-size: cover;
  background-position: center;
  filter: saturate(1.35) contrast(1.12);
}
html[data-theme="slots_arcade"][data-mode="dark"] .panel,
html[data-theme="slots_arcade"][data-mode="dark"] .promo-card,
html[data-theme="slots_arcade"][data-mode="dark"] .promo-slide,
html[data-theme="slots_arcade"][data-mode="dark"] .feature-card,
html[data-theme="slots_arcade"][data-mode="dark"] .testimonial-card,
html[data-theme="slots_arcade"][data-mode="dark"] .security-card,
html[data-theme="slots_arcade"][data-mode="dark"] .article-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 74px rgba(0, 0, 0, 0.46);
}
html[data-theme="slots_arcade"][data-mode="dark"] .tag,
html[data-theme="slots_arcade"][data-mode="dark"] .chip,
html[data-theme="slots_arcade"][data-mode="dark"] .pill {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="slots_arcade"][data-mode="dark"] .site-footer {
  background: linear-gradient(180deg, rgba(255, 61, 245, 0.03), rgba(139, 92, 246, 0.02));
  border-top-color: rgba(255, 61, 245, 0.12);
}

/* ===== Module skins (config-driven) =====
  - hero.skin
  - promos.skin
  - features.skin
  - testimonials.skin
  - footer.skin
  These are optional; when omitted, rendering stays the same.
*/

/* Hero skins */
.hero--skin-neon_split .hero-casino__main {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
}
.hero--skin-neon_split .hero-casino__content {
  padding: 32px 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 22px 90px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}
.hero--skin-neon_split .hero-casino__content::after {
  content: "";
  position: absolute;
  inset: -40px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.22), transparent 60%);
  filter: blur(2px);
}
.hero--skin-neon_split .casino-panel {
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(34, 197, 94, 0.18);
  box-shadow: 0 22px 86px rgba(0, 0, 0, 0.52);
}
.hero--skin-neon_split .casino-panel__title {
  font-weight: 900;
  letter-spacing: 0.2px;
}
.hero--skin-neon_split .hero-casino__badge {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
}

@media (max-width: 980px) {
  .hero--skin-neon_split .hero-casino__main {
    grid-template-columns: 1fr;
  }
  .hero--skin-neon_split .hero-casino__content {
    padding: 22px 18px;
  }
}

/* Hero slots skin: arcade card layout (uses generic hero__* structure) */
.hero--skin-arcade_card .hero__inner {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
.hero--skin-arcade_card .hero__content {
  padding: 28px 26px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 61, 245, 0.18);
  box-shadow: 0 26px 96px rgba(0, 0, 0, 0.52);
  position: relative;
  overflow: hidden;
}
.hero--skin-arcade_card .hero__content::before {
  content: "";
  position: absolute;
  inset: -60px auto auto -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 61, 245, 0.22), transparent 62%);
}
.hero--skin-arcade_card .hero__panel .panel {
  border-radius: 28px;
  border-color: rgba(34, 197, 94, 0.16);
}
.hero--skin-arcade_card .panel__badge {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
}
@media (max-width: 980px) {
  .hero--skin-arcade_card .hero__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  .hero--skin-arcade_card .hero__content {
    padding: 20px 16px;
  }
  .hero--skin-arcade_card .hero__content::before {
    display: none;
  }
}

/* Promotions skins */
.section-promos--skin-poster .promos-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.section-promos--skin-poster .promo-card {
  position: relative;
  overflow: hidden;
}
.section-promos--skin-poster .promo-card__media {
  height: 160px;
  border-radius: 18px;
  margin-bottom: 12px;
  border-color: rgba(255, 255, 255, 0.14);
}
.section-promos--skin-poster .promo-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.16);
}
.section-promos--skin-poster .promo-card__highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.20);
  color: rgba(245, 247, 255, 0.95);
  margin-bottom: 12px;
}
.section-promos--skin-poster .promo-card__highlight::before {
  content: "⚡";
  opacity: 0.95;
}

.section-promos--skin-marquee .promo-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.section-promos--skin-marquee .promo-slide {
  min-width: 340px;
  scroll-snap-align: start;
}
.section-promos--skin-marquee .promo-slide__media {
  border-radius: 20px;
}

@media (max-width: 980px) {
  .section-promos--skin-poster .promos-grid {
    grid-template-columns: 1fr;
  }
  .section-promos--skin-marquee .promo-slide {
    min-width: 86%;
  }
}

/* Features skins */
.section-features--skin-timeline .features-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.section-features--skin-timeline .feature-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.section-features--skin-timeline .feature-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.section-features--skin-timeline .feature-card__icon img {
  width: 24px;
  height: 24px;
}

/* Features extra skins */
.section-features--skin-outline .feature-card {
  background: transparent;
  border-color: rgba(110, 231, 255, 0.18);
}
.section-features--skin-outline .feature-card__icon {
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
}
.section-features--skin-glow .feature-card {
  background:
    radial-gradient(520px 220px at 20% 20%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.section-features--skin-glow .feature-card__title {
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}

.section-features--skin-steps .features-timeline {
  gap: 14px;
}
.section-features--skin-steps .timeline-step__num {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.24);
  color: rgba(245, 247, 255, 0.95);
}
.section-features--skin-steps .timeline-step__card {
  border-color: rgba(34, 197, 94, 0.16);
}

/* Testimonials skins */
.section-testimonials--skin-marquee .testimonials-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.section-testimonials--skin-marquee .testimonial-card {
  min-width: 360px;
  scroll-snap-align: start;
}
.section-testimonials--skin-marquee .testimonial-card__content {
  font-size: 15px;
  line-height: 1.7;
}
.section-testimonials--skin-marquee .testimonial-card {
  position: relative;
}
.section-testimonials--skin-marquee .testimonial-card::before {
  content: "“";
  position: absolute;
  right: 18px;
  top: 10px;
  font-size: 48px;
  opacity: 0.18;
}
@media (max-width: 980px) {
  .section-testimonials--skin-marquee .testimonial-card {
    min-width: 86%;
  }
}

.section-testimonials--skin-stacked .testimonials-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.section-testimonials--skin-stacked .testimonial-card {
  position: relative;
  padding-top: 18px;
}
.section-testimonials--skin-stacked .testimonial-card::before {
  content: "“";
  position: absolute;
  left: 16px;
  top: 8px;
  font-size: 46px;
  opacity: 0.18;
}
.section-testimonials--skin-stacked .testimonial-card__content {
  font-size: 15px;
  line-height: 1.75;
}

.section-testimonials--skin-soft .testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.section-testimonials--skin-soft .testimonial-card__tag {
  background: rgba(110, 231, 255, 0.08);
  border-color: rgba(110, 231, 255, 0.18);
}
.section-testimonials--skin-outline .testimonial-card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Arcade hero (brand3 template v2) */
.hero--slots-arcade .arcade-hero {
  border-radius: 28px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}
.hero--slots-arcade .hero__bg {
  z-index: 0;
}
.arcade-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.arcade-hero__badge {
  font-size: 12px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.arcade-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.arcade-hero__main {
  display: grid;
  /* Prevent right panel from collapsing after layout reflow */
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
}
.arcade-hero__content,
.arcade-hero__aside {
  min-width: 0;
}
.arcade-hero__aside {
  position: relative;
  z-index: 2;
}
.arcade-hero__content {
  padding: 26px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 61, 245, 0.18);
  box-shadow: 0 26px 96px rgba(0, 0, 0, 0.52);
  position: relative;
  overflow: hidden;
}
.arcade-hero__content::before {
  content: "";
  position: absolute;
  inset: -70px auto auto -70px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 61, 245, 0.22), transparent 62%);
}
.arcade-hero__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.6px;
  color: rgba(245, 247, 255, 0.97);
}
.arcade-hero__subtitle {
  margin: 0 0 14px;
  color: rgba(245, 247, 255, 0.92);
  font-weight: 800;
}
.arcade-hero__desc {
  margin: 0 0 22px;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.arcade-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.arcade-panel {
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 86px rgba(0, 0, 0, 0.52);
  padding: 18px;
  display: grid;
  gap: 12px;
  color: rgba(245, 247, 255, 0.95);
  width: 100%;
  max-width: 520px;
  backdrop-filter: blur(12px);
}
.arcade-panel__title {
  font-weight: 950;
  letter-spacing: -0.2px;
  opacity: 0.95;
}
.arcade-panel__hint {
  color: rgba(190, 198, 226, 0.92);
  font-size: 13px;
  line-height: 1.5;
}
.arcade-panel__grid {
  display: grid;
  gap: 10px;
}
.arcade-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(245, 247, 255, 0.95);
}
.arcade-tile:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 61, 245, 0.18);
}
.arcade-tile__label {
  font-weight: 850;
  color: rgba(245, 247, 255, 0.95);
  display: block;
  font-size: 14px;
  line-height: 1.25;
  min-width: 10ch; /* avoid collapsing to only arrows */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.arcade-tile__arrow {
  opacity: 0.85;
  color: rgba(245, 247, 255, 0.92);
}
@media (max-width: 980px) {
  .arcade-hero__main {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .hero--slots-arcade .arcade-hero {
    padding: 16px;
    border-radius: 24px;
  }
  .arcade-hero__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .arcade-hero__chips {
    justify-content: flex-start;
    width: 100%;
  }
  .arcade-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .arcade-hero__actions .btn {
    width: 100%;
  }
  .arcade-hero__content {
    padding: 20px 16px;
  }
  .arcade-hero__content::before {
    display: none;
  }
}

/* Promotions masonry (new layout) */
.promo-masonry {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 16px;
  align-items: start;
}
.promo-masonry__featured,
.promo-masonry__card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
}
.promo-masonry__featured {
  align-self: start;
}
.promo-masonry__side {
  display: grid;
  gap: 14px;
  align-content: start;
  align-self: start;
}
.promo-masonry__side .promo-masonry__card {
  padding: 16px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.promo-masonry__side .promo-masonry__top {
  margin-bottom: 4px;
}
.promo-masonry__side .btn {
  margin-top: auto;
}

/* Pin CTA button for slider cards as well */
.promo-slide .btn {
  margin-top: auto;
}
.promo-masonry__media {
  height: 160px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.promo-masonry__media--featured {
  height: 240px;
}
.promo-masonry__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-masonry__ph {
  width: 100%;
  height: 100%;
}
.promo-masonry__body {
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.promo-masonry__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.promo-masonry__title {
  font-weight: 900;
  letter-spacing: -0.2px;
}
.promo-masonry__tag {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 800;
}
.promo-masonry__desc {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}
.promo-masonry__highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 61, 245, 0.12);
  border: 1px solid rgba(255, 61, 245, 0.22);
  font-weight: 850;
}
@media (max-width: 980px) {
  .promo-masonry {
    grid-template-columns: 1fr;
  }
  .promo-masonry__media--featured {
    height: 200px;
  }
}

/* Features bento (new layout) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.bento-card {
  grid-column: span 4;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.bento-card:nth-child(1) {
  grid-column: span 6;
}
.bento-card:nth-child(2) {
  grid-column: span 6;
}
.bento-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 61, 245, 0.10);
  border: 1px solid rgba(255, 61, 245, 0.18);
  display: grid;
  place-items: center;
}
.bento-card__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.bento-card__title {
  margin: 0;
  font-weight: 950;
}
.bento-card__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.75;
}
@media (max-width: 980px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-card,
  .bento-card:nth-child(1),
  .bento-card:nth-child(2) {
    grid-column: auto;
  }
}

/* Testimonials quotes (new layout) */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.quote-card {
  border-radius: var(--card-radius, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow, var(--shadow-sm));
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.quote-card::before {
  content: "“";
  position: absolute;
  right: 16px;
  top: 8px;
  font-size: 56px;
  opacity: 0.18;
}
.quote-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.quote-card__who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.quote-card__name {
  font-weight: 900;
}
.quote-card__tag {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 800;
}
.quote-card__content {
  margin: 0;
  line-height: 1.75;
  color: rgba(245, 247, 255, 0.92);
}
@media (max-width: 980px) {
  .quotes-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer arcade (new layout) */
.footer-arcade {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  padding: 10px 0 18px;
}
.footer-arcade__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-arcade__name {
  font-weight: 950;
}
.footer-arcade__desc {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 12px 0 0;
}
.footer-arcade__title {
  font-weight: 900;
  margin-bottom: 10px;
}
.footer-arcade__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-arcade__list a {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-arcade__list a:hover {
  border-color: rgba(255, 61, 245, 0.20);
  background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 980px) {
  .footer-arcade {
    grid-template-columns: 1fr;
  }
}
/* Footer skins */
.site-footer--skin-slim .site-footer__top {
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas: "brand links";
  gap: 18px;
}
.site-footer--skin-slim .footer-cta {
  display: none;
}
.site-footer--skin-slim .footer-badges {
  display: none;
}
.site-footer--skin-slim .footer-links__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer--skin-glow {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.03), rgba(249, 115, 22, 0.02));
  border-top-color: rgba(34, 197, 94, 0.14);
}
.site-footer--skin-glow .footer-links__list a:hover {
  border-color: rgba(34, 197, 94, 0.22);
}


/* ===== List/Detail layout (slots docs) ===== */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}
.detail-layout--no-side {
  grid-template-columns: 1fr;
}
.detail-layout__main {
  min-width: 0;
}
.detail-layout__side {
  display: grid;
  gap: 16px;
}
@media (max-width: 980px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== About / Story ===== */
.about-card {
  border-radius: 24px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}
.about-card__text {
  color: var(--color-text-muted);
  line-height: 1.75;
}
.about-meta {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
}
.about-meta__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-weight: 650;
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 22px;
  align-items: center;
}
.story-grid__text {
  color: var(--color-text-muted);
  line-height: 1.8;
}
.story-grid__img,
.story-grid__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}

/* About split (v2) */
.about-split {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.about-split__media {
  position: relative;
}
.about-split__img,
.about-split__ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
  display: block;
}
.about-split__ph {
  background:
    radial-gradient(420px 260px at 20% 20%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(420px 260px at 80% 30%, rgba(255, 107, 53, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.about-split__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}
.about-split__text {
  color: var(--color-text-muted);
  line-height: 1.8;
}
.about-split__highlights {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.about-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-weight: 650;
}
.about-split__actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Story stats (v2) */
.story-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.story-stat {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
}
.story-stat__num {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.2px;
}
.story-stat__label {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 980px) {
  .about-card,
  .about-split,
  .story-grid {
    grid-template-columns: 1fr;
  }
  .story-stats {
    grid-template-columns: 1fr;
  }
}

/* Brand story v3 (values + side kpis) */
.story-v3__kicker {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.story-v3__grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
  gap: 14px;
  align-items: start;
}
.story-v3__text {
  color: var(--color-text-muted);
  line-height: 1.8;
}
.story-values {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.value-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
}
.value-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--iconbox-radius, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--iconbox-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--iconbox-border, rgba(255, 255, 255, 0.10));
  color: var(--iconbox-color, rgba(245, 247, 255, 0.92));
}
.value-card__title {
  font-weight: 950;
}
.value-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.story-media {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
}
.story-media__img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.story-media__ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(520px 320px at 20% 20%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(520px 320px at 80% 30%, rgba(255, 107, 53, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.story-kpis {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kpi {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.kpi__num {
  font-weight: 950;
}
.kpi__label {
  color: var(--color-text-muted);
  font-size: 12px;
}
.story-side-actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

/* Brand story v4 (timeline + bottom CTA) */
.story-v4__bottom {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 14px;
  align-items: start;
}
.story-bullets {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.story-ctaCard {
  border-radius: 22px;
  background: rgba(110, 231, 255, 0.06);
  border: 1px solid rgba(110, 231, 255, 0.14);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.story-ctaCard__title {
  font-weight: 950;
}
.story-ctaCard__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.story-ctaCard__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Brand story v5 (copy + quote + checks) */
.story-v5__hero {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
  gap: 14px;
  align-items: start;
}
.story-v5__text {
  color: var(--color-text-muted);
  line-height: 1.8;
}
.story-v5__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.quote-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  gap: 10px;
}
.quote-card__mark {
  font-size: 56px;
  line-height: 1;
  opacity: 0.18;
}
.story-v5 .quote-card::before {
  content: none;
}
.story-v5 .quote-card__mark {
  display: none;
}

/* Light minimal readability pack (brand2 screenshots 1-6) */
html[data-mode="light"][data-theme^="minimal"] .section-security .security-card__desc,
html[data-mode="light"][data-theme^="minimal"] .section-security .security-badge__label,
html[data-mode="light"][data-theme^="minimal"] .section-sports-basics .basics-hero__desc,
html[data-mode="light"][data-theme^="minimal"] .section-sports-basics .basic-mini__desc,
html[data-mode="light"][data-theme^="minimal"] .section-sports-basics .basic-mini__ex,
html[data-mode="light"][data-theme^="minimal"] .section-slots-hero .slots-kpi__k,
html[data-mode="light"][data-theme^="minimal"] .section-slots-hero .slots-hero__mini,
html[data-mode="light"][data-theme^="minimal"] .section-slots-hero .chip-link__desc,
html[data-mode="light"][data-theme^="minimal"] .section-slots-categories .slots-catCard__desc,
html[data-mode="light"][data-theme^="minimal"] .section-slots-categories .slots-catCard__hint,
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-metricCard__k,
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-metricCard__desc,
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-matchCard__desc,
html[data-mode="light"][data-theme^="minimal"] .section-app-download .security-card__desc,
html[data-mode="light"][data-theme^="minimal"] .section-app-download .security-badge__label {
  color: rgba(51, 65, 85, 0.96) !important;
}
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-metricCard__v,
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-metricCard__k,
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-matchCard__tag {
  text-shadow: none;
}
html[data-mode="light"][data-theme^="minimal"] .section-slots-hero .slots-search__input {
  background: rgba(255, 246, 220, 0.82) !important;
  border-color: rgba(180, 120, 40, 0.24) !important;
  color: rgba(92, 45, 20, 0.94) !important;
}
html[data-mode="light"][data-theme^="minimal"] .section-slots-hero .slots-search__input::placeholder {
  color: rgba(146, 64, 14, 0.58) !important;
}
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-metricCard__v,
html[data-mode="light"][data-theme^="minimal"] .section-slots-volatility .slots-matchCard__tag {
  color: rgba(30, 41, 59, 0.94) !important;
}
.quote-card__text {
  font-size: 18px;
  line-height: 1.85;
  font-weight: 850;
}
.quote-card__from {
  color: var(--color-text-muted);
  font-size: 13px;
}
.story-v5__stats {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.stat-tile {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
}
.stat-tile__num {
  font-weight: 950;
}
.stat-tile__label {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.story-v5__checks {
  margin-top: 12px;
}
.checks-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.checks-card__title {
  font-weight: 950;
}
.checks-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.check-row__icon {
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.24);
  font-weight: 950;
}
.check-row__text {
  color: var(--color-text);
  font-weight: 650;
}
.checks-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .story-v3__grid,
  .story-v4__bottom,
  .story-v5__hero {
    grid-template-columns: 1fr;
  }
  .story-values,
  .checks-card__grid {
    grid-template-columns: 1fr;
  }
  .story-kpis {
    grid-template-columns: 1fr;
  }
  .story-v5__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Hot games / Events ===== */
.hot-games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hot-game-card {
  border-radius: var(--card-radius, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hot-game-card__media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  aspect-ratio: 16 / 9;
}
.hot-game-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hot-game-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hot-game-card__title {
  font-weight: 850;
}
.hot-game-card__tag {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.25);
}
.hot-game-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}
.events-list {
  display: grid;
  gap: 10px;
}
.event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--card-radius, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
}
.event-row__title {
  font-weight: 800;
}
.event-row__meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.event-row__time {
  opacity: 0.9;
}

/* Sports events featured (v3) */
.events-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 16px;
  align-items: start;
}
.event-featured {
  border-radius: var(--card-radius-xl, 26px);
  overflow: hidden;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  height: auto;
  align-self: start;
}
.event-featured__media {
  position: relative;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border-right: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
}
.event-featured__img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
.event-featured__ph {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background:
    radial-gradient(700px 380px at 20% 20%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(700px 380px at 80% 30%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.event-featured__body {
  padding: var(--card-pad-lg, 18px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md, 12px);
}
.event-featured__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.event-featured__title {
  font-weight: 950;
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.event-featured__time {
  color: var(--color-text-muted);
  font-size: 13px;
  flex: 0 0 auto;
}
.event-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.event-featured__desc {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.event-featured__actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.event-featured__side {
  border-radius: var(--card-radius-xl, 26px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.event-side__head {
  display: grid;
  gap: 4px;
}
.event-side__title {
  font-weight: 950;
}
.event-side__hint {
  color: var(--color-text-muted);
  font-size: 13px;
}
.event-side__list {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.event-mini {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--card-radius-md, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
}
.event-mini__title {
  font-weight: 900;
  line-height: 1.3;
}
.event-mini__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 12px;
}
.event-mini__time {
  color: var(--color-text-muted);
  font-weight: 750;
}
.event-mini__arrow {
  position: absolute;
  right: 12px;
  top: 12px;
  opacity: 0.75;
}

/* Sports odds table (v4) */
.odds-wrap {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 14px;
  display: grid;
  gap: 12px;
}
.odds-table {
  display: grid;
  gap: 8px;
}
.odds-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 100px 100px 100px 86px;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.odds-row--head {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}
.odds-cell {
  min-width: 0;
}
.odds-event__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.odds-event__title {
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odds-event__time {
  color: var(--color-text-muted);
  font-size: 12px;
  flex: 0 0 auto;
}
.odds-event__meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.odds-btn {
  width: 100%;
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(110, 231, 255, 0.18);
  border: 1px solid rgba(37, 99, 235, 0.26);
  color: rgba(15, 23, 42, 0.92);
  font-weight: 900;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.odds-btn:hover {
  background: rgba(110, 231, 255, 0.26);
  border-color: rgba(37, 99, 235, 0.34);
  transform: translateY(-1px);
}

/* Minimal theme: odds buttons need higher contrast on light background */
html[data-theme="minimal"] .odds-btn {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.28);
  color: rgba(15, 23, 42, 0.96);
}
html[data-theme="minimal"] .odds-btn:hover {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.34);
}
.odds-note {
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}
.odds-note__title {
  font-weight: 900;
}
.odds-note__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 13px;
}

/* ===== Sports dedicated modules (doc-12) ===== */
.sports-hero {
  border-radius: 26px;
  background: radial-gradient(900px 380px at 10% 0%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(900px 380px at 90% 10%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.sports-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 0;
  align-items: start;
}
.sports-hero__content {
  padding: 20px;
}
.sports-hero__badge {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 800;
}
.sports-hero__title {
  margin-top: 12px;
  font-weight: 950;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.3px;
}
.sports-hero__subtitle {
  margin-top: 10px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.sports-hero__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sports-hero__tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sports-hero__panel {
  min-width: 0;
  padding: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}
.sports-hero-panel__title {
  font-weight: 950;
}
.sports-hero-panel__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.sports-stat {
  min-width: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
  overflow-wrap: anywhere;
}
.sports-stat__label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.sports-stat__value {
  margin-top: 6px;
  font-weight: 950;
}
.sports-stat__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.sports-hero--banner {
  padding: 18px;
}

/* Sports hero extra variants */
.sports-hero--center {
  border-radius: 26px;
  background: radial-gradient(900px 420px at 50% 0%, rgba(110, 231, 255, 0.16), transparent 62%),
    radial-gradient(900px 420px at 50% 90%, rgba(255, 110, 199, 0.10), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  text-align: center;
}
.sports-hero__centerInner {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.sports-hero--center .sports-hero__actions {
  justify-content: center;
}
.hero-stats {
  margin-top: 6px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.hero-stat {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 10px;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 64px;
}
.hero-stat__v {
  font-weight: 950;
  font-size: 16px;
}
.hero-stat__k {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
}

/* Sports hero v3: make bottom area clearer */
.sports-hero--center .sports-hero__centerBottom {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 6px;
}
.sports-hero--center .sports-hero__kpis {
  min-width: 0;
}
.sports-hero--center .sports-hero__quick {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 12px 12px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.sports-hero--center .sports-hero__quickTitle {
  font-weight: 950;
  font-size: 13px;
  color: rgba(245, 247, 255, 0.92);
  letter-spacing: 0.2px;
}
.sports-hero--center .sports-hero__quickChips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sports-hero--center .sports-hero__quickChips .chip-link {
  justify-content: center;
}

.sports-hero--ticker {
  border-radius: 26px;
  background: radial-gradient(900px 380px at 10% 0%, rgba(110, 231, 255, 0.14), transparent 62%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.sports-hero__right {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.ticker {
  overflow: hidden;
}
.ticker__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ticker__row::-webkit-scrollbar {
  display: none;
}
.ticker-chip {
  scroll-snap-align: start;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.ticker-chip__league {
  font-size: 12px;
  font-weight: 900;
  color: var(--color-text-muted);
}
.ticker-chip__match {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-chip__odd {
  font-weight: 950;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
}
.ticker-chip__arrow {
  color: var(--color-text-muted);
  font-weight: 950;
}
.sports-hero__rightFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sports-hero__bannerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sports-hero__mini {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
}
.sports-hero__bannerMain {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px;
  align-items: start;
}
.chip-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 800;
}
.chip-link__icon {
  width: auto;
  min-width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.chip-link__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.chip-link__label {
  font-weight: 950;
  line-height: 1.1;
}
.chip-link__desc {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sports-hero__bannerChips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sports-hero--stack {
  border-radius: 26px;
  background: radial-gradient(900px 420px at 20% 0%, rgba(255, 196, 110, 0.14), transparent 62%),
    radial-gradient(900px 420px at 80% 90%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 12px;
  align-items: start;
}

/* Sports hero v6: side rail + main content */
.sports-hero--rail {
  border-radius: 26px;
  background: radial-gradient(900px 420px at 0% 0%, rgba(110, 231, 255, 0.14), transparent 62%),
    radial-gradient(900px 420px at 100% 100%, rgba(255, 110, 199, 0.10), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 0;
}
/* 无侧栏时主内容占满宽，避免空白 */
.sports-hero--rail:not(:has(.sports-rail__side)) {
  grid-template-columns: 1fr;
}
.sports-hero--rail:not(:has(.sports-rail__side)) .sports-rail__main {
  padding: 20px 22px;
}
.sports-rail__side {
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
  display: grid;
  gap: 12px;
  align-content: start;
}
.sports-rail__kicker {
  font-size: 12px;
  font-weight: 900;
  color: rgba(245, 247, 255, 0.92);
}
.sports-rail__title {
  font-weight: 950;
  font-size: 18px;
}
.sports-rail__list {
  display: grid;
  gap: 10px;
}
.rail-item {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.rail-item__text {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-item__arrow {
  color: var(--color-text-muted);
  font-weight: 950;
}
.sports-rail__foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sports-rail__main {
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.sports-rail__kpis {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.rail-kpi {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 12px 10px;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 64px;
}
.rail-kpi__v {
  font-weight: 950;
  font-size: 16px;
}
.rail-kpi__k {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
}
.sports-hero__stackTop {
  text-align: left;
}
.sports-hero__stackCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.stack-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.stack-card__title {
  font-weight: 950;
  font-size: 16px;
}
.stack-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.stack-card__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sports-entries {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Sports quick entries variants */
.sports-entries-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.sports-entries-strip--equal {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.entry-hero {
  border-radius: 26px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(110, 231, 255, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
}
.entry-hero__icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 20px;
}
.entry-hero__title {
  font-weight: 950;
  font-size: 18px;
}
.entry-hero__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
.entry-hero__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.entry-minis {
  display: grid;
  gap: 10px;
}
.entry-mini {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
}
.entry-mini__text {
  min-width: 0;
}
.entry-mini__icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.entry-mini__title {
  font-weight: 950;
}
.entry-mini__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.entry-mini__cta {
  font-weight: 950;
  color: var(--color-text-muted);
}

.entries-list {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.entries-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.entries-list__row:first-child {
  border-top: 0;
}
.entries-list__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.entries-list__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
}
.entries-list__title {
  font-weight: 950;
}
.entries-list__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.entry-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.entry-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.entry-card__title {
  font-weight: 950;
}
.entry-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
.entry-card__cta {
  font-weight: 800;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.basics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.basic-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.basic-card__title {
  font-weight: 950;
}
.basic-card__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.basic-card__example {
  margin-top: 10px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(245, 247, 255, 0.92);
  opacity: 0.9;
}

/* Sports basics variants */
.sports-basics-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.basics-hero {
  border-radius: 26px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.basics-hero__kicker {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 850;
}
.basics-hero__title {
  font-weight: 950;
  font-size: 18px;
}
.basics-hero__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.basics-hero__tips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.basics-miniGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.basic-mini {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.basic-mini__title {
  font-weight: 950;
}
.basic-mini__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.basic-mini__ex {
  margin-top: 10px;
  font-weight: 850;
  font-size: 12px;
  color: rgba(245, 247, 255, 0.92);
  opacity: 0.9;
}

.basics-table {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.basics-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.basics-row:first-child {
  border-top: 0;
}
.basics-row__title {
  font-weight: 950;
}
.basics-row__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.basics-row__label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 850;
}
.basics-row__example {
  margin-top: 6px;
  font-weight: 900;
  color: rgba(245, 247, 255, 0.92);
}

.glossary {
  display: grid;
  gap: 10px;
}
.glossary-item {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.glossary-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.glossary-item__term {
  font-weight: 950;
}
.glossary-item__icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.30);
  position: relative;
  flex: 0 0 auto;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.glossary-item__icon::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(37, 99, 235, 0.90);
  border-bottom: 2px solid rgba(37, 99, 235, 0.90);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.glossary-item[open] {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
}
.glossary-item[open] .glossary-item__icon {
  background: rgba(59, 130, 246, 0.20);
  border-color: rgba(59, 130, 246, 0.44);
}
.glossary-item[open] .glossary-item__icon::before {
  transform: rotate(225deg);
  top: 7px;
}
.glossary-item__a {
  margin-top: 10px;
  color: var(--color-text-muted);
  line-height: 1.65;
  padding-top: 8px;
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
}

/* Sports glossary variants */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.glossary-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.glossary-card__term {
  font-weight: 950;
}
.glossary-card__def {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.glossary-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  align-items: stretch;
}
.section-sports-glossary--v3 .glossary-split {
  margin-top: 12px;
}
.glossary-split__left {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
  min-height: 360px;
}
.glossary-pill {
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 950;
}
.glossary-split__right {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 16px;
  min-height: 360px;
}
.glossary-panel__title {
  font-weight: 950;
  font-size: 16px;
}
.glossary-panel__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.glossary-panel__cards {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.section-sports-glossary--v3 .glossary-panel__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section-sports-glossary--v3 .glossary-split__right {
  display: flex;
  flex-direction: column;
}
.section-sports-glossary--v3 .glossary-panel__cards {
  flex: 1 1 auto;
  align-content: stretch; /* 避免右侧底部空一大块 */
  grid-auto-rows: 1fr; /* 行高拉伸，整体更平衡 */
}
.section-sports-glossary--v3 .glossary-panelCard {
  height: 100%;
  display: grid;
  align-content: start;
}
.glossary-panelCard {
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.glossary-panelCard__term {
  font-weight: 950;
}
.glossary-panelCard__def {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

/* Sports (minimal theme) readability + layering */
html[data-theme="minimal"] .section-sports-basics .basic-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .section-sports-basics .basic-card__desc {
  color: color-mix(in oklab, var(--color-text) 78%, #000);
}
html[data-theme="minimal"] .section-sports-basics .basic-card__example {
  color: color-mix(in oklab, var(--color-primary) 55%, var(--color-text));
  opacity: 1;
}

html[data-theme="minimal"] .basics-hero,
html[data-theme="minimal"] .basic-mini,
html[data-theme="minimal"] .basics-table,
html[data-theme="minimal"] .glossary-card,
html[data-theme="minimal"] .glossary-split__left,
html[data-theme="minimal"] .glossary-split__right,
html[data-theme="minimal"] .glossary-panelCard {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .basic-mini__desc,
html[data-theme="minimal"] .basics-row__desc,
html[data-theme="minimal"] .glossary-card__def,
html[data-theme="minimal"] .glossary-panel__desc,
html[data-theme="minimal"] .glossary-panelCard__def {
  color: color-mix(in oklab, var(--color-text) 72%, #000);
}
html[data-theme="minimal"] .basic-mini__ex,
html[data-theme="minimal"] .basics-row__example {
  color: color-mix(in oklab, var(--color-primary) 55%, var(--color-text));
  opacity: 1;
}

html[data-theme="minimal"] .section-sports-glossary .glossary {
  border-radius: 24px;
  /* softer surface: keep layering but avoid a huge "white card" */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, #ffffff 86%, var(--color-primary) 14%),
    color-mix(in oklab, #ffffff 80%, var(--color-primary) 20%)
  );
  border: 1px solid rgba(2, 6, 23, 0.06);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
  backdrop-filter: blur(8px);
  padding: 12px;
}
html[data-theme="minimal"] .section-sports-glossary .glossary-item {
  background: rgba(2, 6, 23, 0.02);
  border-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .section-sports-glossary .glossary-item[open] {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.30);
}
html[data-theme="minimal"] .section-sports-glossary .glossary-item__a {
  color: color-mix(in oklab, var(--color-text) 78%, #000);
  border-top-color: rgba(2, 6, 23, 0.12);
}
html[data-theme="minimal"] .section-sports-glossary .glossary-item__icon {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.30);
}
html[data-theme="minimal"] .section-sports-glossary .glossary-item__icon::before {
  border-right-color: rgba(30, 64, 175, 0.95);
  border-bottom-color: rgba(30, 64, 175, 0.95);
}

html[data-theme="minimal"] .entry-hero,
html[data-theme="minimal"] .entry-mini,
html[data-theme="minimal"] .entries-list {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .entry-hero__desc,
html[data-theme="minimal"] .entry-mini__desc,
html[data-theme="minimal"] .entries-list__desc {
  color: color-mix(in oklab, var(--color-text) 72%, #000);
}

/* Minimal theme fixes for new sports variants */
html[data-theme="minimal"] .timeline-item__card,
html[data-theme="minimal"] .gs-checklist,
html[data-theme="minimal"] .gs-tips,
html[data-theme="minimal"] .league-pillCard,
html[data-theme="minimal"] .league-featured__main,
html[data-theme="minimal"] .league-featured__list,
html[data-theme="minimal"] .events-table,
html[data-theme="minimal"] .event-list,
html[data-theme="minimal"] .sports-promoB,
html[data-theme="minimal"] .sports-promoRow,
html[data-theme="minimal"] .vip-rail__left,
html[data-theme="minimal"] .vip-rail__right,
html[data-theme="minimal"] .vip-wide,
html[data-theme="minimal"] .support-panel,
html[data-theme="minimal"] .support-bar,
html[data-theme="minimal"] .sports-hero--center,
html[data-theme="minimal"] .sports-hero--stack,
html[data-theme="minimal"] .sports-hero--ticker,
html[data-theme="minimal"] .article-feature,
html[data-theme="minimal"] .article-mini,
html[data-theme="minimal"] .article-timeline,
html[data-theme="minimal"] .sports-teaser {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .timeline-dot,
html[data-theme="minimal"] .gs-check,
html[data-theme="minimal"] .risk-bar__icon,
html[data-theme="minimal"] .vip-wide__icon {
  background: rgba(2, 6, 23, 0.04);
  border-color: rgba(2, 6, 23, 0.10);
  color: color-mix(in oklab, var(--color-text) 84%, #000);
}
html[data-theme="minimal"] .ticker-chip,
html[data-theme="minimal"] .hero-stat,
html[data-theme="minimal"] .vip-tier {
  background: rgba(2, 6, 23, 0.03);
  border-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .timeline-line {
  background: rgba(2, 6, 23, 0.10);
}
html[data-theme="minimal"] .sports-promoRow__tag,
html[data-theme="minimal"] .ticker-chip__league,
html[data-theme="minimal"] .hero-stat__k {
  color: color-mix(in oklab, var(--color-text) 70%, #000);
}

/* Casino (minimal theme) readability */
html[data-theme="minimal"] .section-casino-hero .casino-hero {
  background: radial-gradient(900px 380px at 10% 0%, rgba(255, 196, 110, 0.22), transparent 62%),
    radial-gradient(900px 380px at 90% 10%, rgba(255, 107, 53, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .section-casino-hero .casino-hero__panel {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), rgba(2, 6, 23, 0.02));
  border-left-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .section-casino-hero .casino-stat {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(148, 163, 184, 0.34);
}
html[data-theme="minimal"] .section-casino-hero .casino-stat__label {
  color: rgba(51, 65, 85, 0.86);
}
html[data-theme="minimal"] .section-casino-hero .casino-stat__value {
  color: rgba(15, 23, 42, 0.98);
}
html[data-theme="minimal"] .section-casino-hero .casino-stat__hint {
  color: rgba(71, 85, 105, 0.90);
}
html[data-theme="minimal"] .section-casino-basics .casino-step,
html[data-theme="minimal"] .section-casino-limits .limit-card,
html[data-theme="minimal"] .section-casino-highlights .highlight-card,
html[data-theme="minimal"] .section-casino-providers .provider-card,
html[data-theme="minimal"] .section-casino-tips .tips-col,
html[data-theme="minimal"] .section-casino-articles .casino-article,
html[data-theme="minimal"] .section-casino-promos .casino-promo,
html[data-theme="minimal"] .section-casino-vip .casino-vip,
html[data-theme="minimal"] .section-casino-support .support-box {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .section-casino-tips .tip-card {
  background: rgba(2, 6, 23, 0.02);
  border-color: rgba(2, 6, 23, 0.08);
}

.sports-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.sports-step {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.sports-step__num {
  font-weight: 950;
  font-size: 12px;
  color: var(--color-text-muted);
}
.sports-step__title {
  font-weight: 950;
}
.sports-step__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

/* Sports getting started variants */
.sports-timeline {
  display: grid;
  gap: 12px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}
.timeline-dot {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 950;
}
.timeline-line {
  width: 2px;
  height: 100%;
  margin: 8px auto 0;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 2px;
}
.timeline-item__card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.timeline-item__title {
  font-weight: 950;
}
.timeline-item__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.timeline-item__actions {
  display: flex;
  justify-content: flex-start;
}

.gs-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  align-items: start;
}
.gs-checklist {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.gs-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gs-item:first-child {
  border-top: 0;
}
.gs-check {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
  color: rgba(245, 247, 255, 0.95);
  font-weight: 950;
}
.gs-item__title {
  font-weight: 950;
}
.gs-item__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.gs-tips {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.gs-tips__title {
  font-weight: 950;
  font-size: 16px;
}
.gs-tips__list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.gs-tip {
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.gs-tip__t {
  font-weight: 950;
}
.gs-tip__d {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.risk-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.risk-card__title {
  font-weight: 950;
}
.risk-card__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.risk-bars {
  display: grid;
  gap: 10px;
}
.risk-bar {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.risk-bar__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
}
.risk-bar__title {
  font-weight: 950;
}
.risk-bar__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-size: 12px;
}
.risk-bar__body {
  min-width: 0;
  flex: 1 1 auto;
}

.leagues-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.league-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 280px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.league-strip::-webkit-scrollbar {
  display: none;
}
.league-pillCard {
  scroll-snap-align: start;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.league-pillCard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.league-pillCard__idx {
  color: var(--color-text-muted);
  font-weight: 900;
}
.league-pillCard__name {
  font-weight: 950;
}
.league-pillCard__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
.league-pillCard__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.league-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.league-featured__main {
  border-radius: 26px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(110, 231, 255, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  align-self: start;
}
.league-featured__badge {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 900;
  width: fit-content;
}
.league-featured__name {
  font-weight: 950;
  font-size: 18px;
}
.league-featured__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.league-featured__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.league-featured__list {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  align-self: start;
}
.league-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}
.league-row:first-child {
  border-top: 0;
}
.league-row__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.league-row__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.18);
  border: 1px solid rgba(110, 231, 255, 0.26);
}
.league-row__name {
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-row__desc {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-row__arrow {
  color: var(--color-text-muted);
  font-weight: 950;
}

/* Sports events sample variants */
.events-table {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.events-table__head,
.events-table__row {
  display: grid;
  grid-template-columns: 120px 120px 1fr 86px 86px 86px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
}
.events-table__head {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.events-table__row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.events-table__row:first-of-type {
  border-top: 0;
}
.events-table__match {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.events-table__team {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.events-table__vs {
  color: var(--color-text-muted);
  font-weight: 950;
}

.event-featured__time {
  color: var(--color-text-muted);
  font-size: 12px;
}
.event-list {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
}
.event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}
.event-row:first-child {
  border-top: 0;
}
.event-row__match {
  font-weight: 900;
}
.event-row__right {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  align-items: center;
}
.event-row__odd {
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
  font-weight: 900;
  text-align: center;
  min-width: 54px;
}
.event-row__arrow {
  color: var(--color-text-muted);
  font-weight: 950;
}
.league-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
}
.league-card__logo {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 950;
}
.league-card__name {
  font-weight: 950;
}
.league-card__desc {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.league-card__cta {
  font-weight: 800;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sample-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.sample-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sample-card__time {
  color: var(--color-text-muted);
  font-size: 12px;
}
.sample-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.team__logo {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
}
.team__name {
  font-weight: 900;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team__vs {
  font-weight: 950;
  color: var(--color-text-muted);
  text-align: center;
}

/* Sports events sample v1: align away team to the right */
.section-sports-sample .sample-card__teams .team {
  width: 100%;
}
.section-sports-sample .team--home {
  justify-content: flex-start;
}
.section-sports-sample .team--away {
  justify-content: flex-end;
}
.section-sports-sample .team--away .team__logo {
  order: 2;
}
.section-sports-sample .team--away .team__name {
  order: 1;
}
.section-sports-sample .team--away .team__name {
  text-align: right;
}
.sample-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.sample-card__actions {
  display: flex;
  justify-content: flex-end;
}

.events-strip {
  /* Deprecated wrapper: keep for backward compatibility (no outer card). */
}
.events-strip__head {
  /* Deprecated: header now uses .section-head. */
}
.events-strip__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 280px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.events-strip__list::-webkit-scrollbar {
  display: none;
}
.event-mini {
  scroll-snap-align: start;
  position: relative;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.event-mini__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.event-mini__time {
  font-size: 12px;
  color: var(--color-text-muted);
}
.event-mini__title {
  font-weight: 950;
}
.event-mini__odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.event-mini__odd {
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
  font-weight: 900;
  text-align: center;
}
/* Sports events sample v2: tuned by light variants + dark mode */
html[data-mode="light"][data-theme^="minimal"] .section-sports-sample {
  --sports-sample-card-bg: rgba(250, 252, 255, 0.92);
  --sports-sample-card-border: rgba(37, 99, 235, 0.14);
  --sports-sample-pill-bg: rgba(255, 255, 255, 0.95);
  --sports-sample-pill-border: rgba(37, 99, 235, 0.16);
  --sports-sample-pill-text: rgba(30, 64, 175, 0.90);
  --sports-sample-time-text: rgba(71, 85, 105, 0.82);
  --sports-sample-odd-bg: rgba(239, 246, 255, 0.88);
  --sports-sample-odd-border: rgba(37, 99, 235, 0.18);
  --sports-sample-odd-text: rgba(30, 41, 59, 0.94);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-sports-sample {
  --sports-sample-card-bg: rgba(255, 249, 234, 0.90);
  --sports-sample-card-border: rgba(217, 119, 6, 0.14);
  --sports-sample-pill-bg: rgba(255, 250, 238, 0.95);
  --sports-sample-pill-border: rgba(217, 119, 6, 0.18);
  --sports-sample-pill-text: rgba(120, 53, 15, 0.92);
  --sports-sample-time-text: rgba(146, 64, 14, 0.74);
  --sports-sample-odd-bg: rgba(255, 244, 214, 0.76);
  --sports-sample-odd-border: rgba(217, 119, 6, 0.20);
  --sports-sample-odd-text: rgba(67, 20, 7, 0.92);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-sports-sample {
  --sports-sample-card-bg: rgba(247, 243, 255, 0.92);
  --sports-sample-card-border: rgba(124, 58, 237, 0.14);
  --sports-sample-pill-bg: rgba(250, 245, 255, 0.94);
  --sports-sample-pill-border: rgba(124, 58, 237, 0.18);
  --sports-sample-pill-text: rgba(91, 33, 182, 0.92);
  --sports-sample-time-text: rgba(107, 33, 168, 0.72);
  --sports-sample-odd-bg: rgba(237, 233, 254, 0.82);
  --sports-sample-odd-border: rgba(124, 58, 237, 0.20);
  --sports-sample-odd-text: rgba(49, 46, 129, 0.94);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-sample .event-mini {
  box-shadow: none;
  background: var(--sports-sample-card-bg);
  border-color: var(--sports-sample-card-border);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-sample .event-mini .pill {
  background: var(--sports-sample-pill-bg);
  border: 1px solid var(--sports-sample-pill-border);
  color: var(--sports-sample-pill-text);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-sample .event-mini__time {
  color: var(--sports-sample-time-text);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-sample .event-mini__odd {
  background: var(--sports-sample-odd-bg);
  border-color: var(--sports-sample-odd-border);
  color: var(--sports-sample-odd-text);
}
html[data-mode="dark"] .section-sports-sample .event-mini {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(148, 163, 184, 0.22);
}
html[data-mode="dark"] .section-sports-sample .event-mini .pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.94);
}
html[data-mode="dark"] .section-sports-sample .event-mini__time {
  color: rgba(203, 213, 225, 0.78);
}
html[data-mode="dark"] .section-sports-sample .event-mini__odd {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(96, 165, 250, 0.28);
  color: rgba(239, 246, 255, 0.95);
}

.sports-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Sports articles teaser variants */
.sports-articles-mag {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 12px;
  align-items: stretch;
}
.article-feature {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.article-feature__title {
  font-weight: 950;
  font-size: 18px;
}
.article-feature__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.article-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.article-side {
  display: grid;
  gap: 12px;
  align-content: start;
}
.article-mini {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.article-mini__title {
  font-weight: 950;
}
.article-mini__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.article-timeline {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
}
.article-timeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}
.article-timeRow:first-child {
  border-top: 0;
}
.article-timeRow__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.article-timeRow__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.18);
  border: 1px solid rgba(110, 231, 255, 0.26);
}
.article-timeRow__title {
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-timeRow__summary {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-timeRow__arrow {
  color: var(--color-text-muted);
  font-weight: 950;
}
.article-timeline__foot {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}
.sports-article {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.sports-article__title {
  font-weight: 950;
}
.sports-article__title a:hover {
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.sports-article__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.sports-articles-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sports-articles-strip::-webkit-scrollbar {
  display: none;
}
.sports-teaser {
  scroll-snap-align: start;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.sports-teaser__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
}
.sports-teaser__title {
  font-weight: 950;
  font-size: 16px;
  line-height: 1.35;
}
.sports-teaser__summary {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sports-teaser__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.sports-promos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sports-promo {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.sports-promo__tag {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-muted);
}
.sports-promo__title {
  font-weight: 950;
}
.sports-promo__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.sports-promo__hl {
  font-weight: 950;
}
.sports-promo__cta {
  font-weight: 850;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

/* Sports promos variants */
.sports-promos-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 12px;
  align-items: stretch;
}
.sports-promos-bento__side {
  display: grid;
  gap: 12px;
  align-content: start;
}
.sports-promoB {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.sports-promoB--featured {
  background: radial-gradient(900px 380px at 10% 0%, rgba(110, 231, 255, 0.14), transparent 62%),
    rgba(255, 255, 255, 0.03);
}
.sports-promoB__tag {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 900;
}
.sports-promoB__title {
  font-weight: 950;
  font-size: 18px;
}
.sports-promoB__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.sports-promoB__hl {
  font-weight: 950;
  color: color-mix(in oklab, var(--color-primary) 74%, var(--color-text));
}
.sports-promoB__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.sports-promos-list {
  display: grid;
  gap: 10px;
}
.sports-promoRow {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.sports-promoRow__left {
  min-width: 0;
}
.sports-promoRow__tag {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 900;
}
.sports-promoRow__title {
  margin-top: 4px;
  font-weight: 950;
  font-size: 16px;
}
.sports-promoRow__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.sports-promoRow__right {
  display: grid;
  gap: 8px;
  justify-items: end;
}
.sports-promoRow__hl {
  font-weight: 950;
  color: color-mix(in oklab, var(--color-primary) 74%, var(--color-text));
}

.sports-vip {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.sports-vip__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vip-mini {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.vip-mini__title {
  font-weight: 950;
}
.vip-mini__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.vip-mini__pill {
  margin-top: 10px;
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 900;
  font-size: 12px;
}

/* Sports VIP variants */
.sports-vip-rail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: stretch;
}
.vip-rail__left {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.vip-rail__title {
  font-weight: 950;
  font-size: 16px;
}
.vip-rail__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.vip-meter__bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.vip-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(110, 231, 255, 0.85), rgba(255, 110, 199, 0.65));
}
.vip-meter__meta {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
}
.vip-rail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vip-rail__right {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.vip-tier {
  border-radius: 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
}
.vip-tier__lv {
  font-weight: 950;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  width: fit-content;
}
.vip-tier__perk {
  color: var(--color-text-muted);
  font-weight: 900;
  font-size: 12px;
}

.vip-cardsWide {
  display: grid;
  gap: var(--gap-lg, 16px);
}
.vip-wide {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.vip-wide__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.vip-wide__icon--empty {
  visibility: hidden;
}
.vip-wide__title {
  font-weight: 950;
}
.vip-wide__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.vip-wide__pill {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
  font-weight: 900;
  white-space: nowrap;
}
.vip-foot {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sports-vip__ctaTitle {
  font-weight: 950;
  font-size: 18px;
}
.sports-vip__ctaDesc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.sports-vip__cta {
  border-radius: 22px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.sports-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 18px;
  align-items: start;
}
.support-box {
  border-radius: 22px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.support-box__title {
  font-weight: 950;
  font-size: 18px;
}
.support-box__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.support-box__actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

/* Sports support variants */
.support-panel {
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
}
.support-bar {
  margin-top: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
}
.section-sports-support .section-head {
  margin-bottom: 22px; /* 外边距：模块标题与面板之间留白 */
}

@media (max-width: 767px) {
  .section-sports-support .section-head {
    margin-bottom: 16px;
  }
}

/* Sports support FAQ list spacing (do not change inner paddings) */
.section-sports-support .sports-faq {
  display: grid;
  gap: 10px; /* 让每个 FAQ item 上下有间隔（和你 F12 加外边距的效果一致） */
}

/* Sports support (v2/v4): add outer spacing between entry cards and FAQ */
.section-sports-support .support-grid {
  margin-bottom: 16px;
}
.section-sports-support--v4 .support-cards {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.section-sports-support--v4 .support-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.section-sports-support--v4 .support-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.section-sports-support--v4 .support-card__title {
  font-weight: 950;
}
.section-sports-support--v4 .support-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.section-sports-support--v4 .support-card__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.section-sports-support .support-faq {
  display: grid;
  gap: 10px;
}
.support-bar__title {
  font-weight: 950;
}
.support-bar__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.support-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 980px) {
  .sports-hero--split,
  .sports-hero__bannerMain,
  .contact-hub,
  .sports-vip,
  .sports-support {
    grid-template-columns: 1fr;
  }
  .sports-hero__panel {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sports-entries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sports-entries-strip {
    grid-template-columns: 1fr;
  }
  .sports-hero--ticker {
    grid-template-columns: 1fr;
  }
  .sports-hero--rail {
    grid-template-columns: 1fr;
  }
  .sports-rail__side {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sports-rail__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sports-hero__stackCards {
    grid-template-columns: 1fr;
  }
  .stack-card__chips {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sports-hero--center .sports-hero__centerBottom {
    grid-template-columns: 1fr;
  }
  .sports-hero--center .sports-hero__quickChips {
    grid-template-columns: 1fr;
  }
  .section-sports-support--v4 .support-cards {
    grid-template-columns: 1fr;
  }
  .basics-grid,
  .risk-grid,
  .sports-steps,
  .sports-promos,
  .sports-articles {
    grid-template-columns: 1fr;
  }
  .sports-articles-mag {
    grid-template-columns: 1fr;
  }
  .article-timeRow {
    grid-template-columns: 1fr;
  }
  .sports-promos-bento {
    grid-template-columns: 1fr;
  }
  .sports-promoRow {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .sports-promoRow__right {
    justify-items: start;
  }
  .sports-vip-rail {
    grid-template-columns: 1fr;
  }
  .vip-wide {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .vip-wide__pill {
    grid-column: 1 / -1;
    width: fit-content;
  }
  .sports-basics-deck {
    grid-template-columns: 1fr;
  }
  .basics-miniGrid {
    grid-template-columns: 1fr;
  }
  .basics-row {
    grid-template-columns: 1fr;
  }
  .glossary-grid {
    grid-template-columns: 1fr;
  }
  .glossary-split {
    grid-template-columns: 1fr;
  }
  .section-sports-glossary--v3 .glossary-panel__cards {
    grid-template-columns: 1fr;
  }
  .leagues-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gs-split {
    grid-template-columns: 1fr;
  }
  .league-featured {
    grid-template-columns: 1fr;
  }
  .events-table__head {
    display: none;
  }
  .events-table__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .event-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sample-grid {
    grid-template-columns: 1fr;
  }
  .sports-vip__cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Casino dedicated modules (doc-14) ===== */
.casino-hero {
  border-radius: 26px;
  background: radial-gradient(900px 380px at 10% 0%, rgba(255, 196, 110, 0.16), transparent 62%),
    radial-gradient(900px 380px at 90% 10%, rgba(255, 107, 53, 0.10), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.casino-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
}
.casino-hero__content {
  padding: 20px;
}
.casino-hero__badge {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 850;
}
.casino-hero__title {
  margin-top: 12px;
  font-weight: 950;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.3px;
}
.casino-hero__subtitle {
  margin-top: 10px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.casino-hero__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.casino-hero__tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.casino-hero__panel {
  padding: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}
.casino-hero-panel__title {
  font-weight: 950;
}
.casino-hero-panel__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.casino-stat {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.30);
  padding: 12px;
}
.casino-stat__label {
  font-size: 12px;
  color: rgba(30, 41, 59, 0.82);
}
.casino-stat__value {
  margin-top: 6px;
  font-weight: 950;
  color: rgba(15, 23, 42, 0.96);
}
.casino-stat__hint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(51, 65, 85, 0.86);
}
.casino-hero--banner {
  padding: 18px;
}
.casino-hero__bannerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.casino-hero__mini {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
}
.casino-hero__bannerMain {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px;
  align-items: start;
}
.casino-hero__bannerChips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Casino hero v3: center + chips + KPIs */
.casino-hero--center {
  border-radius: 26px;
  background: radial-gradient(900px 420px at 50% 0%, rgba(255, 196, 110, 0.16), transparent 62%),
    radial-gradient(900px 420px at 50% 90%, rgba(110, 231, 255, 0.10), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  text-align: center;
}
.casino-hero__centerInner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.casino-hero--center .casino-hero__actions {
  justify-content: center;
}
.casino-hero__centerChips {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.casino-hero__kpis {
  margin-top: 6px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.casino-kpi {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 12px 10px;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 64px;
}
.casino-kpi__v {
  font-weight: 950;
  font-size: 16px;
}
.casino-kpi__k {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
}

/* Casino hero v4: side rail + main */
.casino-hero--rail {
  border-radius: 26px;
  background: radial-gradient(900px 420px at 0% 0%, rgba(255, 196, 110, 0.16), transparent 62%),
    radial-gradient(900px 420px at 100% 100%, rgba(110, 231, 255, 0.10), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 0;
}
/* 无侧栏时主内容占满宽，避免空白 */
.casino-hero--rail:not(:has(.casino-rail__side)) {
  grid-template-columns: 1fr;
}
.casino-hero--rail:not(:has(.casino-rail__side)) .casino-rail__main {
  padding: 20px 22px;
}
.casino-rail__side {
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
  display: grid;
  gap: 12px;
  align-content: start;
}
.casino-rail__kicker {
  font-size: 12px;
  font-weight: 900;
  color: rgba(245, 247, 255, 0.92);
}
.casino-rail__title {
  font-weight: 950;
  font-size: 18px;
}
.casino-rail__list {
  display: grid;
  gap: 10px;
}
.casino-rail__foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.casino-rail__main {
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.casino-rail__kpis {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Casino entries variants (v2/v3) */
.casino-entries-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.entry-hero--casino {
  border-radius: 26px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(255, 196, 110, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.casino-entries-list {
  display: grid;
  gap: 10px;
}
.entry-row {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}
.entry-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.entry-row__main {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.entry-row__title {
  font-weight: 950;
}
.entry-row__desc {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-row__tag {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 850;
  color: rgba(245, 247, 255, 0.92);
}
.entry-row__arrow {
  color: var(--color-text-muted);
  font-weight: 950;
}

/* Casino basics v2 split */
.casino-basics-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  align-items: start;
}
.casino-basics-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.casino-basics-card__title {
  font-weight: 950;
  font-size: 16px;
}
.casino-basics-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.bets-list {
  display: grid;
  gap: 10px;
}
.bet-row {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.bet-row__name {
  font-weight: 950;
}
.bet-row__tip {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.casino-basics-card__actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== Slots dedicated modules (doc-15) ===== */
.slots-hero {
  border-radius: 26px;
  background: radial-gradient(900px 380px at 10% 0%, rgba(255, 214, 110, 0.18), transparent 62%),
    radial-gradient(900px 380px at 90% 10%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ===== SEO text / rich content module (v1/v2/v3) ===== */
.seo-text {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
}
.seo-text__head {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.seo-text__head--stack {
  border-bottom: 0;
  padding-bottom: 0;
}
.seo-text__badge {
  display: inline-flex;
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 850;
}
.seo-text__title {
  font-weight: 950;
  font-size: 20px;
  letter-spacing: -0.2px;
}
.seo-text__intro {
  color: var(--color-text-muted);
  line-height: 1.7;
}
.seo-text__links {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.seo-link {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px 12px;
  display: grid;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.seo-link__label {
  font-weight: 950;
}
.seo-link__desc {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.seo-link__arrow {
  position: absolute;
  right: 12px;
  top: 12px;
  color: color-mix(in oklab, var(--color-primary) 65%, var(--color-text));
  font-weight: 950;
}
.seo-text__body {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.seo-block {
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
}
.seo-block--anchor {
  scroll-margin-top: calc(var(--header-h, 64px) + 12px);
}
.seo-block__h {
  font-weight: 950;
  font-size: 16px;
}
.seo-block__p {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 13px;
}
.seo-callout {
  margin-top: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px;
}
.seo-callout__title {
  font-weight: 950;
}
.seo-callout__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 13px;
}

/* v2 split */
.seo-text--split {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.seo-rail {
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  gap: 12px;
  position: sticky;
  top: calc(var(--header-h, 64px) + 14px);
}
.seo-rail__title {
  font-weight: 950;
}
.seo-rail__toc {
  display: grid;
  gap: 10px;
}
.seo-toc {
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  color: inherit;
  font-weight: 800;
}
.seo-rail__links {
  display: grid;
  gap: 8px;
}
.seo-main__head {
  display: grid;
  gap: 10px;
  padding: 6px 6px 0;
}
.seo-main__sections {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.seo-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* v3 stack */
.seo-text--stack {
  display: grid;
  gap: 12px;
}
.seo-qa {
  display: grid;
  gap: 10px;
}
.seo-qa__item {
  background: rgba(0, 0, 0, 0.14);
  border-color: rgba(255, 255, 255, 0.10);
}
.seo-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.seo-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.seo-card__title {
  font-weight: 950;
}
.seo-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.seo-card__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

@media (max-width: 980px) {
  .seo-text__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .seo-text--split {
    grid-template-columns: 1fr;
  }
  .seo-rail {
    position: relative;
    top: auto;
  }
  .seo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Minimal theme readability */
html[data-theme="minimal"] .section-seo-text .seo-text,
html[data-theme="minimal"] .section-seo-text .seo-block,
html[data-theme="minimal"] .section-seo-text .seo-rail,
html[data-theme="minimal"] .section-seo-text .seo-link,
html[data-theme="minimal"] .section-seo-text .seo-card,
html[data-theme="minimal"] .section-seo-text .seo-callout {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .section-seo-text .seo-text__head {
  border-bottom-color: rgba(2, 6, 23, 0.08);
}
.slots-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
}
.slots-hero__content {
  padding: 20px;
}
.slots-hero__badge {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 850;
}
.slots-hero__title {
  margin-top: 12px;
  font-weight: 950;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.3px;
}
.slots-hero__subtitle {
  margin-top: 10px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.slots-hero__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slots-hero__tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slots-hero__panel {
  padding: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}
.slots-hero-panel__title {
  font-weight: 950;
}
.slots-hero-panel__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.slots-stat {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.30);
  padding: 12px;
}
.slots-stat__label {
  font-size: 12px;
  color: rgba(30, 41, 59, 0.82);
}
.slots-stat__value {
  margin-top: 6px;
  font-weight: 950;
  color: rgba(15, 23, 42, 0.96);
}
.slots-stat__hint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(51, 65, 85, 0.86);
}
.slots-hero--banner {
  padding: 18px;
}
.slots-hero__bannerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.slots-hero__mini {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
}
.slots-hero__bannerMain {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px;
  align-items: start;
}
.slots-hero__bannerChips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Slots hero variants (v3/v5) */
.slots-hero--center {
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.slots-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.slots-kpi {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
  display: grid;
  gap: 4px;
}
.slots-kpi__v {
  font-weight: 950;
  letter-spacing: -0.2px;
}
.slots-kpi__k {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.slots-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.slots-search__input {
  width: 100%;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.96);
  padding: 12px 12px;
  outline: none;
}
.slots-search__input::placeholder {
  color: rgba(245, 247, 255, 0.55);
}
.slots-hero__centerChips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.slots-hero--bento {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 12px;
  padding: 18px;
  align-items: start;
}
.slots-bento__main {
  min-width: 0;
}
.slots-bento__side {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.slots-bentoCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
}
.slots-bentoCard--big {
  background: radial-gradient(520px 220px at 15% 10%, rgba(255, 214, 110, 0.20), transparent 60%),
    rgba(255, 255, 255, 0.04);
}
.slots-bentoCard__k {
  color: var(--color-text-muted);
  font-weight: 850;
  font-size: 12px;
}
.slots-bentoCard__v {
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.slots-bentoCard__d {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.slots-bentoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.slots-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Slots categories extra variants (v4/v5) */
.slots-categories--rail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  align-items: start;
}
/* 仅单侧内容时占满宽，避免空白 */
.slots-categories--rail > *:only-child {
  grid-column: 1 / -1;
}
.slots-catRail {
  display: grid;
  gap: 10px;
}
.slots-catChip {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 12px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.slots-catChip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}
.slots-catChip__icon {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.slots-catChip__title {
  font-weight: 950;
}
.slots-catChip__desc {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.slots-catChip__arrow {
  font-weight: 950;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.slots-catBento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.slots-catTile {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 8px;
  align-content: start;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.slots-catTile--big {
  grid-column: span 2;
  background: radial-gradient(520px 220px at 15% 10%, rgba(110, 231, 255, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.slots-catTile:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}
.slots-catTile__icon {
  width: 44px;
  height: 44px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.slots-catTile__title {
  font-weight: 950;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.slots-catTile__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.slots-catTile__cta {
  margin-top: 2px;
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

/* Slots categories: mobile card layout (one row, two columns feel) */
@media (max-width: 980px) {
  .slots-catTile {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title cta"
      "icon desc cta";
    gap: 6px 12px;
    align-items: center;
  }
  .slots-catTile__icon {
    grid-area: icon;
  }
  .slots-catTile__title {
    grid-area: title;
    margin: 0;
  }
  .slots-catTile__desc {
    grid-area: desc;
    margin: 0;
  }
  .slots-catTile__cta {
    grid-area: cta;
    margin: 0;
    justify-self: end;
    white-space: nowrap;
  }
}

.slots-games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.slot-game {
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 180px;
  height: 100%;
}
.slot-game__media {
  position: relative;
}
.slot-game__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot-game__ph {
  width: 100%;
  height: 100%;
  background: radial-gradient(420px 180px at 25% 10%, rgba(255, 214, 110, 0.35), transparent 60%),
    radial-gradient(420px 180px at 80% 80%, rgba(110, 231, 255, 0.28), transparent 60%),
    rgba(0, 0, 0, 0.18);
}
.slot-game__body {
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
}
.slot-game__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.slot-game__name {
  font-weight: 950;
  font-size: 16px;
}
.slot-game__provider {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
}
.slot-game__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slot-game__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

/* Slots hot games extra variants (v4/v5) */
.slots-hotStrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 320px;
  gap: 12px;
  overflow: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.slot-card--strip {
  scroll-snap-align: start;
  border-radius: var(--card-radius-xl, 26px);
  overflow: hidden;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  display: grid;
  grid-template-rows: 120px auto;
}
.slot-card__ph {
  width: 100%;
  height: 100%;
  background: radial-gradient(520px 200px at 20% 20%, rgba(255, 214, 110, 0.28), transparent 60%),
    radial-gradient(520px 200px at 80% 80%, rgba(110, 231, 255, 0.22), transparent 60%),
    rgba(0, 0, 0, 0.18);
}
.slot-card__body {
  padding: var(--card-pad-sm, 14px);
  display: grid;
  gap: var(--gap-sm, 10px);
}
.slot-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.slot-card__name {
  font-weight: 950;
}
.slot-card__provider {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 800;
}
.slot-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slot-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.slots-hotRank {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 12px;
  align-items: start;
}
.slot-feature {
  border-radius: var(--card-radius-xl, 26px);
  overflow: hidden;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 220px;
}
.slot-feature__ph {
  width: 100%;
  height: 100%;
  background: radial-gradient(520px 220px at 20% 20%, rgba(110, 231, 255, 0.28), transparent 60%),
    radial-gradient(520px 220px at 80% 80%, rgba(255, 214, 110, 0.22), transparent 60%),
    rgba(0, 0, 0, 0.18);
}
.slot-feature__body {
  padding: var(--card-pad, 16px);
  display: grid;
  gap: var(--gap-sm, 10px);
  align-content: start;
}
.slot-feature__badge {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 900;
  font-size: 12px;
}
.slot-feature__name {
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.slot-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slot-feature__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.slot-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slot-rankList {
  display: grid;
  gap: 10px;
}
.slot-rankRow {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: 12px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.slot-rankRow:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.slot-rankRow__idx {
  font-weight: 950;
  color: var(--color-text-muted);
}
.slot-rankRow__main {
  min-width: 0;
}
.slot-rankRow__name {
  font-weight: 950;
}
.slot-rankRow__desc {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-rankRow__arrow {
  font-weight: 950;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

/* Light theme readability for new slots variants */
html[data-theme="minimal"] .section-slots-hero .slots-kpi,
html[data-theme="minimal"] .section-slots-hero .slots-bentoCard,
html[data-theme="minimal"] .section-slots-categories .slots-catChip,
html[data-theme="minimal"] .section-slots-categories .slots-catTile,
html[data-theme="minimal"] .section-slots-hot .slot-card--strip,
html[data-theme="minimal"] .section-slots-hot .slot-feature,
html[data-theme="minimal"] .section-slots-hot .slot-rankRow {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .section-slots-hero .slots-search__input {
  background: rgba(2, 6, 23, 0.03);
  border-color: rgba(2, 6, 23, 0.10);
  color: rgba(2, 6, 23, 0.92);
}
html[data-theme="minimal"] .section-slots-hero .slots-search__input::placeholder {
  color: rgba(2, 6, 23, 0.45);
}

.slots-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.slots-section {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.slots-section__title {
  font-weight: 950;
}
.slots-section__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.jackpot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.jackpot-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.jackpot-card__title {
  font-weight: 950;
}
.jackpot-card__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.volatility-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.compare-card {
  min-width: 0;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.volatility-compare .compare-card > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.compare-card--vol {
  background: radial-gradient(900px 320px at 0% 0%, rgba(255, 214, 110, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.compare-card--rtp {
  background: radial-gradient(900px 320px at 0% 0%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.compare-card__title {
  font-weight: 950;
  font-size: 18px;
}
.compare-card__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.compare-card__pill {
  display: inline-flex;
  max-width: 100%;
  white-space: normal;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 850;
  font-size: 12px;
}

.slots-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.slots-article {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.slots-article__title {
  font-weight: 950;
}
.slots-article__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.slots-providers-themes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.theme-card {
  min-width: 0;
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: 16px;
}
.theme-card__name {
  font-weight: 950;
  overflow-wrap: anywhere;
}
.theme-card__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.slots-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 18px;
  align-items: start;
}

/* Slots variants (v2/v3+) */
.slots-hero--center {
  padding: 20px;
  display: grid;
  gap: 14px;
}
.slots-kpis {
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.slots-kpi {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
}
.slots-kpi__v {
  font-weight: 950;
}
.slots-kpi__k {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.slots-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.slots-search__input {
  flex: 1 1 260px;
  min-width: 200px;
  height: 42px;
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(245, 247, 255, 0.96);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  outline: none;
}
.slots-search__input::placeholder {
  color: rgba(245, 247, 255, 0.55);
}
.slots-hero__centerChips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.slots-hero--rail {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}
/* 无侧栏时主内容占满宽，避免空白 */
.slots-hero--rail:not(:has(.slots-rail__side)) {
  grid-template-columns: 1fr;
}
.slots-hero--rail:not(:has(.slots-rail__side)) .slots-rail__main {
  padding: 20px 22px;
}
.slots-rail__side {
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}
.slots-rail__main {
  padding: 18px;
  display: grid;
  gap: 14px;
}
.slots-rail__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.slots-rail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.slots-rail__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.slots-railCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.slots-railCard__badge {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 850;
}
.slots-railCard__title {
  font-weight: 950;
  font-size: 16px;
}
.slots-railCard__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-railCard__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.slots-miniStat {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 10px 12px;
}
.slots-miniStat__k {
  font-size: 12px;
  color: var(--color-text-muted);
}
.slots-miniStat__v {
  margin-top: 6px;
  font-weight: 950;
}

.slots-catFilters {
  margin-top: 6px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slots-catCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.slots-catCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.slots-catCard__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.slots-catCard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slots-catCard__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.slots-catCard__title {
  margin-top: 2px;
  font-weight: 950;
}
.slots-catCard__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.slots-catCard__hint {
  font-size: 12px;
  color: rgba(245, 247, 255, 0.78);
}
.slots-catCard__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.slots-catShowcase {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
}
.slots-catFeature {
  border-radius: 26px;
  background: radial-gradient(520px 240px at 20% 0%, rgba(255, 214, 110, 0.20), transparent 60%),
    radial-gradient(520px 240px at 80% 80%, rgba(110, 231, 255, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.slots-catFeature__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.slots-catFeature__icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.slots-catFeature__title {
  font-weight: 950;
  font-size: 18px;
}
.slots-catFeature__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-catFeature__cta {
  font-weight: 900;
}
.slots-catList {
  display: grid;
  gap: 10px;
}
.slots-catRow {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 20px;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.slots-catRow__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.slots-catRow__title {
  font-weight: 950;
}
.slots-catRow__desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.55;
  display: block;
}
.slots-catRow__tag {
  font-size: 12px;
  color: rgba(245, 247, 255, 0.78);
  font-weight: 850;
}
.slots-catRow__arrow {
  color: rgba(245, 247, 255, 0.8);
  font-weight: 900;
}

.slots-tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.slots-tiles.is-dragging {
  cursor: grabbing;
}
@media (min-width: 981px) {
  .slots-tiles {
    cursor: grab;
    user-select: none;
  }
}
.slots-tiles::-webkit-scrollbar {
  height: 6px;
}
.slots-tiles::-webkit-scrollbar-track {
  background: transparent;
}
.slots-tiles::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.slots-tiles:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
.slot-tile {
  scroll-snap-align: start;
  flex: 0 0 260px;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  display: grid;
}
.slot-tile__media {
  height: 140px;
  position: relative;
}
.slot-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot-tile__ph {
  width: 100%;
  height: 100%;
  background: radial-gradient(420px 180px at 25% 10%, rgba(255, 214, 110, 0.35), transparent 60%),
    radial-gradient(420px 180px at 80% 80%, rgba(110, 231, 255, 0.28), transparent 60%),
    rgba(0, 0, 0, 0.18);
}
.slot-tile__body {
  padding: 14px;
  display: grid;
  gap: 8px;
}
.slot-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.slot-tile__name {
  font-weight: 950;
}
.slot-tile__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 12px;
}
.slot-tile__provider {
  font-weight: 850;
}

.slots-rankList {
  display: grid;
  gap: 10px;
}
.slots-rankRow {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
}
.slots-rankRow__left {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.slots-rankRow__rank {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 950;
}
.slots-rankRow__name {
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slots-rankRow__sub {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 12px;
}
.slots-rankRow__right {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
}
.slots-metric {
  display: grid;
  gap: 4px;
  min-width: 70px;
  text-align: right;
}
.slots-metric__k {
  font-size: 11px;
  color: var(--color-text-muted);
}
.slots-metric__v {
  font-weight: 950;
}
.slots-rankRow__arrow {
  font-weight: 950;
  color: rgba(245, 247, 255, 0.75);
}

.slots-basicsFlow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.slots-flowStep {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.slots-flowStep__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.slots-flowStep__title {
  font-weight: 950;
}
.slots-flowStep__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-terms {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.slots-term {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 6px;
}
.slots-term__k {
  font-weight: 950;
}
.slots-term__v {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.jackpot-hero {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.jackpot-hero__label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 850;
}
.jackpot-hero__value {
  margin-top: 8px;
  font-weight: 1000;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.3px;
}
.jackpot-hero__hint {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.jackpot-hero__side {
  display: grid;
  gap: 10px;
}
.jackpot-mini {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
}
.jackpot-mini__k {
  font-size: 12px;
  color: var(--color-text-muted);
}
.jackpot-mini__v {
  margin-top: 6px;
  font-weight: 950;
}

.jackpot-myths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.jackpot-myths__col {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.jackpot-myths__title {
  font-weight: 950;
  font-size: 16px;
}
.jackpot-myths__list {
  display: grid;
  gap: 10px;
}
.jackpot-note {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.jackpot-note--bad {
  border-color: rgba(255, 107, 53, 0.25);
  background: rgba(255, 107, 53, 0.06);
}
.jackpot-note--good {
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.06);
}
.jackpot-note__title {
  font-weight: 950;
}
.jackpot-note__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}

.slots-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.slots-metricCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.slots-metricCard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.slots-metricCard__k {
  font-weight: 950;
}
.slots-metricCard__v {
  color: rgba(245, 247, 255, 0.85);
  font-weight: 900;
  font-size: 12px;
}
.slots-metricCard__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.slots-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--color-primary) 70%, #ffffff), rgba(110, 231, 255, 0.6));
}
.slots-match {
  margin-top: 12px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.slots-match__title {
  font-weight: 950;
  font-size: 16px;
}
.slots-match__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.slots-matchCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  gap: 8px;
}
.slots-matchCard__tag {
  font-size: 12px;
  font-weight: 900;
  color: rgba(245, 247, 255, 0.85);
}
.slots-matchCard__title {
  font-weight: 950;
}
.slots-matchCard__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}

.slots-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.slots-tier {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.slots-tier__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.slots-tier__title {
  font-weight: 950;
  font-size: 16px;
}
.slots-tier__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-tier__tips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slots-tipsSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: start;
}
.slots-tipsBlock {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.slots-tipsBlock__title {
  font-weight: 950;
  font-size: 16px;
}
.slots-checkList {
  display: grid;
  gap: 10px;
}
.slots-checkRow {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.slots-checkRow__icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.25);
  font-weight: 950;
  flex: 0 0 auto;
}
.slots-checkRow__title {
  font-weight: 950;
}
.slots-checkRow__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.slots-warnCard {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.slots-warnCard__title {
  font-weight: 950;
  font-size: 16px;
}
.slots-warnCard__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-warnList {
  display: grid;
  gap: 10px;
}
.slots-warnRow {
  border-radius: 20px;
  background: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.22);
  padding: 14px;
  display: grid;
  gap: 6px;
}
.slots-warnRow__title {
  font-weight: 950;
}
.slots-warnRow__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.slots-playbook {
  display: grid;
  gap: 12px;
}
.slots-play {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.slots-play__phase {
  font-weight: 950;
  font-size: 16px;
}
.slots-play__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.slots-play__col {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.slots-play__col--do {
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.06);
}
.slots-play__col--dont {
  border-color: rgba(255, 107, 53, 0.25);
  background: rgba(255, 107, 53, 0.06);
}
.slots-play__label {
  font-size: 12px;
  font-weight: 900;
  color: rgba(245, 247, 255, 0.85);
}
.slots-play__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(245, 247, 255, 0.92);
}

.slots-articlesMag {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  align-items: start;
}
.slots-articleFeature {
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 220px;
}
.slots-articleFeature__media {
  position: relative;
}
.slots-articleFeature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slots-articleFeature__ph {
  width: 100%;
  height: 100%;
  background: radial-gradient(420px 180px at 25% 10%, rgba(255, 214, 110, 0.35), transparent 60%),
    radial-gradient(420px 180px at 80% 80%, rgba(110, 231, 255, 0.28), transparent 60%),
    rgba(0, 0, 0, 0.18);
}
.slots-articleFeature__body {
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.slots-articleFeature__title {
  font-weight: 950;
  font-size: 18px;
  line-height: 1.25;
}
.slots-articleFeature__summary {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-articleFeature__actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slots-articlesList {
  display: grid;
  gap: 10px;
}
.slots-articleMini {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.slots-articleMini__title {
  font-weight: 950;
}
.slots-articleMini__summary {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.slots-articleMini__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.slots-articlesStrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 12px;
  overflow: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.slots-articlesStrip::-webkit-scrollbar {
  height: 6px;
}
.slots-articlesStrip::-webkit-scrollbar-track {
  background: transparent;
}
.slots-articlesStrip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.slots-articlesStrip:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
.slots-articleCard {
  scroll-snap-align: start;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.slots-articleCard__title {
  font-weight: 950;
}
.slots-articleCard__summary {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.slots-articleCard__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.slots-articleCard__top {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.slots-providersStrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 12px;
  overflow: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.slots-providersStrip::-webkit-scrollbar {
  height: 6px;
}
.slots-providersStrip::-webkit-scrollbar-track {
  background: transparent;
}
.slots-providersStrip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.slots-providersStrip:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
.slots-themeCloud {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slots-providersBento {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
}
.slots-themeFeature {
  border-radius: 26px;
  background: radial-gradient(520px 240px at 20% 0%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(520px 240px at 80% 80%, rgba(255, 214, 110, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
}
.slots-themeFeature__badge {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 850;
}
.slots-themeFeature__title {
  font-weight: 950;
  font-size: 18px;
}
.slots-themeFeature__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.slots-themeFeature__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slots-themeFeature__actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slots-providerGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.provider-card--compact .provider-card__desc {
  font-size: 12px;
}
.theme-card--mini {
  padding: 14px;
}
.slots-themeMini {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.slots-supportPanel {
  border-radius: var(--card-radius-xl, 26px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  padding: var(--card-pad-lg, 18px);
}
.slots-supportPanel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--gap-lg, 14px);
  align-items: start;
}
.slots-supportPanel__title {
  font-weight: 950;
  font-size: 16px;
}
.slots-supportLinks {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.slots-supportPanel__hint {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.slots-supportBar {
  margin-top: 14px;
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md, 12px);
  align-items: center;
  justify-content: space-between;
  padding: var(--card-pad-sm, 14px);
}
.slots-supportBar__title {
  font-weight: 950;
}
.slots-supportBar__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.slots-supportBar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm, 10px);
}
.slots-supportCards {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md, 12px);
}
.slots-faq--grid {
  display: grid;
  gap: 10px;
}
.section-slots-support .slots-faq {
  margin: 10px 0;
  display: grid;
  gap: 12px;
}
.section-slots-support .slots-faq .faq-item {
  margin: 0;
}

@media (max-width: 980px) {
  .slots-hero--split,
  .slots-hero__bannerMain,
  .slots-hero--rail,
  .slots-rail__top,
  .slots-support,
  .slot-game,
  .slots-providers-themes,
  .slots-catShowcase,
  .slots-articlesMag,
  .slots-play__cols,
  .slots-tipsSplit,
  .jackpot-hero,
  .jackpot-myths,
  .slots-match__grid,
  .slots-providersBento,
  .slots-supportPanel__grid {
    grid-template-columns: 1fr;
  }
  .slots-hero__panel {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .slots-rail__side {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .slots-rail__actions {
    justify-content: flex-start;
  }
  .slots-categories,
  .slots-catBento,
  .slots-catCards,
  .slots-sections,
  .jackpot-grid,
  .volatility-compare,
  .slots-articles,
  .themes-grid,
  .slots-kpis,
  .slots-hero__centerChips,
  .slots-basicsFlow,
  .slots-terms,
  .slots-metrics,
  .slots-tiers,
  .slots-providerGrid,
  .slots-themeMini,
  .slots-supportCards {
    grid-template-columns: 1fr;
  }

  /* Slots categories bento: big tile should not span 2 columns on mobile */
  .slots-catTile--big {
    grid-column: auto;
  }
}

/* Slots (minimal theme) readability */
html[data-theme="minimal"] .section-slots-hero .slots-hero {
  background: radial-gradient(900px 380px at 10% 0%, rgba(255, 214, 110, 0.22), transparent 62%),
    radial-gradient(900px 380px at 90% 10%, rgba(110, 231, 255, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .section-slots-hero .slots-hero__panel {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.06), rgba(2, 6, 23, 0.02));
  border-left-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .section-slots-hero .slots-stat {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(148, 163, 184, 0.34);
}
html[data-theme="minimal"] .section-slots-hero .slots-stat__label {
  color: rgba(51, 65, 85, 0.86);
}
html[data-theme="minimal"] .section-slots-hero .slots-stat__value {
  color: rgba(15, 23, 42, 0.98);
}
html[data-theme="minimal"] .section-slots-hero .slots-stat__hint {
  color: rgba(71, 85, 105, 0.90);
}

/* Dark mode contrast guardrails for cards/buttons adjusted for light themes */
html[data-mode="dark"] .odds-btn {
  background: rgba(110, 231, 255, 0.10);
  border-color: rgba(110, 231, 255, 0.28);
  color: rgba(245, 247, 255, 0.95);
}
html[data-mode="dark"] .odds-btn:hover {
  background: rgba(110, 231, 255, 0.16);
  border-color: rgba(110, 231, 255, 0.36);
}
html[data-mode="dark"] .section-casino-hero .casino-stat,
html[data-mode="dark"] .section-slots-hero .slots-stat {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
html[data-mode="dark"] .section-casino-hero .casino-stat__label,
html[data-mode="dark"] .section-casino-hero .casino-stat__hint,
html[data-mode="dark"] .section-slots-hero .slots-stat__label,
html[data-mode="dark"] .section-slots-hero .slots-stat__hint {
  color: var(--color-text-muted);
}
html[data-mode="dark"] .section-casino-hero .casino-stat__value,
html[data-mode="dark"] .section-slots-hero .slots-stat__value {
  color: rgba(245, 247, 255, 0.96);
}
html[data-theme="minimal"] .section-slots-hot .slot-game,
html[data-theme="minimal"] .section-slots-basics .slots-section,
html[data-theme="minimal"] .section-slots-jackpot .jackpot-card,
html[data-theme="minimal"] .section-slots-volatility .compare-card,
html[data-theme="minimal"] .section-slots-tips .tips-col,
html[data-theme="minimal"] .section-slots-articles .slots-article,
html[data-theme="minimal"] .section-slots-providers .provider-card,
html[data-theme="minimal"] .section-slots-providers .theme-card,
html[data-theme="minimal"] .section-slots-support .support-box {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
.casino-entries {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.casino-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.casino-step {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.casino-step__num {
  font-weight: 950;
  font-size: 12px;
  color: var(--color-text-muted);
}
.casino-step__title {
  font-weight: 950;
}
.casino-step__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

.limits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.limit-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.limit-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.limit-card__name {
  font-weight: 950;
}
.limit-card__range {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.limit-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
.limit-card__cta {
  font-weight: 850;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.highlight-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.highlight-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.highlight-card__title {
  font-weight: 950;
}
.highlight-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

.providers-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.section-slots-providers .providers-wall--slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
}
.provider-card {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: 14px;
  display: grid;
  gap: 8px;
}
.section-slots-providers .provider-card {
  min-height: 120px;
}
.provider-card__logo {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 950;
  font-size: 12px;
  color: color-mix(in oklab, var(--color-primary) 62%, var(--color-text));
}
.provider-card__logo img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}
.provider-card__name {
  font-weight: 950;
}
.provider-card__desc {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .section-slots-providers .providers-wall--slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md, 12px);
}
.tips-col {
  border-radius: var(--card-radius-xl, 26px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad, 16px);
}
.tips-col__title {
  font-weight: 950;
  font-size: 16px;
  padding: 2px 2px 12px;
}
.tips-list {
  margin-top: 0;
  display: grid;
  gap: var(--gap-sm, 10px);
}

html[data-theme="minimal"] .chip-link {
  background: rgba(2, 6, 23, 0.02);
  border-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .chip-link__icon {
  background: rgba(2, 6, 23, 0.03);
  border-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .chip-link__desc {
  color: color-mix(in oklab, var(--color-text) 70%, #000);
}
.tip-card {
  border-radius: var(--card-radius-md, 18px);
  padding: var(--card-pad-sm, 14px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
}
.tip-card--bad {
  background: rgba(255, 107, 53, 0.08);
  border-color: rgba(255, 107, 53, 0.18);
}
.tip-card--good {
  background: rgba(110, 231, 255, 0.08);
  border-color: rgba(110, 231, 255, 0.18);
}
.tip-card__title {
  font-weight: 950;
}
.tip-card__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

.casino-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.casino-article {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.casino-article__title {
  font-weight: 950;
}
.casino-article__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.casino-promos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.casino-promos.casino-promos--n1 {
  grid-template-columns: minmax(0, 1fr);
}
.casino-promos.casino-promos--n2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.casino-promo {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.casino-promo__tag {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-muted);
}
.casino-promo__title {
  font-weight: 950;
}
.casino-promo__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.casino-promo__hl {
  font-weight: 950;
}
.casino-promo__cta {
  font-weight: 850;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.casino-vip {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.casino-vip.casino-vip--withCta {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.casino-vip__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.casino-vip__ctaTitle {
  font-weight: 950;
  font-size: 18px;
}
.casino-vip__ctaDesc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.casino-vip__cta {
  border-radius: 22px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(255, 196, 110, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.casino-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 18px;
  align-items: start;
}

/* Casino: shared actions row (used by new variants) */
.section-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Casino hero variants (v3/v4) */
.casino-hero--center {
  padding: 18px;
}
.casino-hero--center .casino-hero__centerInner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}
.casino-hero--center .casino-hero__kpis {
  margin-top: 4px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.casino-kpi {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
  display: grid;
  gap: 6px;
  place-items: center;
}
.casino-kpi__v {
  font-weight: 950;
}
.casino-kpi__k {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 850;
}
.casino-hero--center .casino-hero__centerChips {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.casino-hero--stack {
  padding: 18px;
  display: grid;
  gap: 14px;
}
.casino-hero__stackTop {
  display: grid;
  gap: 10px;
}
.casino-hero__stackCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Casino quick entries variants (v2/v3) */
.casino-entries-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: start;
}
.entry-hero {
  border-radius: 26px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(255, 196, 110, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.entry-hero__icon {
  width: 54px;
  height: 54px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 22px;
}
.entry-hero__title {
  font-weight: 950;
  font-size: 18px;
}
.entry-hero__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.entry-hero__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.entry-minis {
  display: grid;
  gap: 10px;
}
.entry-mini {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.entry-mini__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 18px;
}
.entry-mini__title {
  font-weight: 950;
}
.entry-mini__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.entry-mini__cta {
  font-weight: 950;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.casino-entryList {
  display: grid;
  gap: 10px;
}
.casino-entryRow {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.casino-entryRow__left {
  min-width: 0;
}
.casino-entryRow__title {
  font-weight: 950;
}
.casino-entryRow__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.casino-entryRow__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.casino-entryRow__arrow {
  font-weight: 950;
}

/* Casino basics variants (v2/v3) */
.casino-basics-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: start;
}
.casino-basics-split__left {
  display: grid;
  gap: 12px;
}
.casino-basics-split__right {
  display: grid;
  gap: 12px;
  align-content: start;
}
.casino-bets {
  display: grid;
  gap: 10px;
}
.casino-betCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.casino-betCard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.casino-betCard__name {
  font-weight: 950;
}
.casino-betCard__hint {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.casino-basics-note {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.casino-basics-note__title {
  font-weight: 950;
}
.casino-basics-note__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.casino-basics-accordion,
.casino-tips-accordion {
  display: grid;
  gap: 10px;
}

/* Casino limits variants (v2/v3) */
.limits-table {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
}
.limits-table__head {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 900;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.16);
}
.limits-table__row {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  align-items: center;
}
.limits-table__name {
  font-weight: 950;
}
.limits-table__cell {
  color: var(--color-text-muted);
  font-size: 13px;
}
.limits-table__foot {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.limits-table__note {
  color: var(--color-text-muted);
  font-size: 12px;
}

.limits-split {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.limits-split--no-side {
  grid-template-columns: minmax(0, 1fr);
}
.limits-split__side {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.limits-side__title {
  font-weight: 950;
  font-size: 16px;
}
.limits-side__tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.limits-side__note {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.limits-split__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.limits-split__main .limit-card__range {
  font-weight: 950;
}

/* Casino highlights variant (v2) */
.highlights-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.highlight-featured {
  border-radius: 26px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.highlight-featured__icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 22px;
}
.highlight-featured__title {
  font-weight: 950;
  font-size: 18px;
}
.highlight-featured__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.highlight-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.highlights-list {
  display: grid;
  gap: 10px;
}
.highlight-row {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.highlight-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.highlight-row__title {
  font-weight: 950;
}
.highlight-row__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}

/* Casino providers variants (v2/v3) */
.providers-groups {
  display: grid;
  gap: 12px;
}
.providers-group {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.providers-group__title {
  font-weight: 950;
  font-size: 16px;
}
.providers-group__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.providers-wall--group {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.providers-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 12px;
  overflow: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent; /* thumb, track */
}
.providers-strip::-webkit-scrollbar {
  height: 6px;
}
.providers-strip::-webkit-scrollbar-track {
  background: transparent;
}
.providers-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.providers-strip:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
.providers-strip::-webkit-scrollbar-corner {
  background: transparent;
}
.provider-card--strip {
  scroll-snap-align: start;
}

/* Casino tips variants (v2) */
.casino-tips-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}
.casino-checks {
  display: grid;
  gap: 10px;
}
.casino-check {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.casino-check__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
}
.casino-check__title {
  font-weight: 950;
}
.casino-check__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.casino-mistakes {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.casino-mistakes__title {
  font-weight: 950;
  font-size: 16px;
}
.casino-mistakes__list {
  display: grid;
  gap: 10px;
}

/* Casino articles variants (v2/v3) */
.casino-articles-mag {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  align-items: start;
}
.casino-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.casino-article-feature {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.casino-article-feature__title {
  font-weight: 950;
  font-size: 18px;
}
.casino-article-feature__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.casino-article-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.casino-article-side {
  display: grid;
  gap: 12px;
}
.casino-article-mini {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.casino-article-mini__title {
  font-weight: 950;
}
.casino-article-mini__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.casino-articles-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.casino-teaser {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
  scroll-snap-align: start;
  align-content: start;
}
.casino-teaser__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.casino-teaser__title {
  font-weight: 950;
}
.casino-teaser__summary {
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.casino-teaser__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

/* Casino promos variants (v2/v3) */
.casino-promos-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  align-items: start;
}
.casino-promos-bento__side {
  display: grid;
  gap: 12px;
}
.casino-promo--featured {
  background: radial-gradient(900px 320px at 0% 0%, rgba(255, 196, 110, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
}
.casino-promos-list {
  display: grid;
  gap: 10px;
}
.casino-promoRow {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.casino-promoRow__tag {
  font-size: 12px;
  font-weight: 850;
  color: var(--color-text-muted);
}
.casino-promoRow__title {
  margin-top: 6px;
  font-weight: 950;
}
.casino-promoRow__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.casino-promoRow__right {
  display: grid;
  gap: 10px;
  justify-items: end;
}
.casino-promoRow__hl {
  font-weight: 950;
}

/* Casino VIP variants (v2/v3) */
.casino-vip-compare {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
}
.casino-vip-compare__head {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 900;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.16);
}
.casino-vip-compare__row {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  align-items: center;
}
.casino-vip-compare__k {
  font-weight: 950;
}
.casino-vip-compare__v {
  color: var(--color-text-muted);
  font-size: 13px;
}
.casino-vip-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.casino-vip-steps {
  display: grid;
  gap: 10px;
}
.casino-vip-step {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.casino-vip-step__num {
  font-size: 12px;
  font-weight: 950;
  color: var(--color-text-muted);
}
.casino-vip-step__t {
  font-weight: 950;
}
.casino-vip-step__d {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.casino-vip-benefits {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Casino support variants (v2/v3) */
.support-card {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad, 16px);
  display: grid;
  gap: var(--gap-sm, 10px);
  align-content: start;
}
.support-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.support-card__title {
  font-weight: 950;
}
.support-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.support-card__cta {
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}
.casino-supportCards {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md, 12px);
}
.casino-faq--grid {
  display: grid;
  gap: 10px;
}
.section-casino-support .casino-faq {
  /* Add vertical outer spacing between FAQ items (avoid relying on details margins) */
  margin: 10px 0;
  display: grid;
  gap: var(--gap-md, 12px);
}
.section-casino-support .casino-faq .faq-item {
  margin: 0;
}
.casino-supportPanel {
  border-radius: var(--card-radius-xl, 26px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  padding: var(--card-pad-lg, 18px);
}
.casino-supportPanel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--gap-lg, 14px);
  align-items: start;
}
.casino-supportPanel__title {
  font-weight: 950;
  font-size: 16px;
}
.casino-supportLinks {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.casino-supportPanel__hint {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.casino-supportBar {
  margin-top: 14px;
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md, 12px);
  align-items: center;
  justify-content: space-between;
  padding: var(--card-pad-sm, 14px);
}
.casino-supportBar__title {
  font-weight: 950;
}
.casino-supportBar__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.casino-supportBar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm, 10px);
}

/* Casino (minimal theme) readability */
html[data-theme="minimal"] .section-casino-hero .casino-hero {
  background: radial-gradient(900px 380px at 10% 0%, rgba(255, 196, 110, 0.18), transparent 62%),
    radial-gradient(900px 380px at 90% 10%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.06);
}
html[data-theme="minimal"] .section-casino-hero .casino-hero__panel {
  background: rgba(2, 6, 23, 0.02);
  border-left-color: rgba(2, 6, 23, 0.08);
}
html[data-theme="minimal"] .section-casino-entries .entry-card,
html[data-theme="minimal"] .section-casino-entries .entry-hero,
html[data-theme="minimal"] .section-casino-entries .entry-mini,
html[data-theme="minimal"] .section-casino-basics .casino-step,
html[data-theme="minimal"] .section-casino-basics .casino-betCard,
html[data-theme="minimal"] .section-casino-basics .casino-basics-note,
html[data-theme="minimal"] .section-casino-limits .limit-card,
html[data-theme="minimal"] .section-casino-limits .limits-table,
html[data-theme="minimal"] .section-casino-highlights .highlight-card,
html[data-theme="minimal"] .section-casino-highlights .highlight-featured,
html[data-theme="minimal"] .section-casino-highlights .highlight-row,
html[data-theme="minimal"] .section-casino-providers .provider-card,
html[data-theme="minimal"] .section-casino-tips .tips-col,
html[data-theme="minimal"] .section-casino-tips .casino-check,
html[data-theme="minimal"] .section-casino-tips .casino-mistakes,
html[data-theme="minimal"] .section-casino-articles .casino-article,
html[data-theme="minimal"] .section-casino-articles .casino-article-feature,
html[data-theme="minimal"] .section-casino-articles .casino-article-mini,
html[data-theme="minimal"] .section-casino-articles .casino-teaser,
html[data-theme="minimal"] .section-casino-promos .casino-promo,
html[data-theme="minimal"] .section-casino-promos .casino-promoRow,
html[data-theme="minimal"] .section-casino-vip .casino-vip,
html[data-theme="minimal"] .section-casino-vip .casino-vip-compare,
html[data-theme="minimal"] .section-casino-vip .casino-vip-step,
html[data-theme="minimal"] .section-casino-support .support-box,
html[data-theme="minimal"] .section-casino-support .support-card,
html[data-theme="minimal"] .section-casino-support .casino-supportPanel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 6, 23, 0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-providers .provider-card {
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border-color: var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-providers .provider-card__logo {
  background: rgba(248, 250, 255, 0.96);
  border-color: rgba(30, 58, 138, 0.22);
  color: rgba(30, 58, 138, 0.92);
}
html[data-mode="dark"] .section-casino-providers .provider-card__logo {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(248, 250, 252, 0.96);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-casino-providers .provider-card__logo {
  background: rgba(255, 247, 228, 0.94);
  border-color: rgba(180, 120, 40, 0.26);
  color: rgba(146, 64, 14, 0.92);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-casino-providers .provider-card__logo {
  background: rgba(245, 243, 255, 0.94);
  border-color: rgba(124, 58, 237, 0.24);
  color: rgba(91, 33, 182, 0.92);
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-articles .article-pill {
  color: rgba(30, 58, 138, 0.92);
  background: rgba(239, 246, 255, 0.92);
  border-color: rgba(37, 99, 235, 0.22);
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-articles .article-date {
  color: rgba(71, 85, 105, 0.95);
}
html[data-mode="dark"] .section-casino-articles .article-pill {
  color: rgba(241, 245, 249, 0.95);
  background: rgba(51, 65, 85, 0.60);
  border-color: rgba(148, 163, 184, 0.35);
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-entries .entry-card__icon {
  background: rgba(239, 246, 255, 0.90);
  border-color: rgba(37, 99, 235, 0.22);
  color: rgba(30, 58, 138, 0.92);
}
html[data-mode="dark"] .section-casino-entries .entry-card__icon {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(248, 250, 252, 0.96);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-casino-entries .entry-card__icon,
html[data-mode="light"][data-theme="minimal_amber"] .section-casino-articles .article-pill {
  background: rgba(255, 247, 228, 0.90);
  border-color: rgba(217, 119, 6, 0.24);
  color: rgba(146, 64, 14, 0.92);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-casino-entries .entry-card__icon,
html[data-mode="light"][data-theme="minimal_violet"] .section-casino-articles .article-pill {
  background: rgba(245, 243, 255, 0.90);
  border-color: rgba(124, 58, 237, 0.24);
  color: rgba(91, 33, 182, 0.92);
}
html[data-mode="light"][data-theme^="minimal"] .section-slots-categories .entry-card__icon {
  background: rgba(239, 246, 255, 0.90);
  border-color: rgba(37, 99, 235, 0.22);
  color: rgba(30, 58, 138, 0.92);
}
html[data-mode="dark"] .section-slots-categories .entry-card__icon {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(248, 250, 252, 0.96);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-slots-categories .entry-card__icon {
  background: rgba(255, 247, 228, 0.90);
  border-color: rgba(217, 119, 6, 0.24);
  color: rgba(146, 64, 14, 0.92);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-slots-categories .entry-card__icon {
  background: rgba(245, 243, 255, 0.90);
  border-color: rgba(124, 58, 237, 0.24);
  color: rgba(91, 33, 182, 0.92);
}
html[data-mode="light"][data-theme^="minimal"] .section-slots-providers .provider-card__logo {
  background: rgba(239, 246, 255, 0.92);
  border-color: rgba(37, 99, 235, 0.22);
  color: rgba(30, 58, 138, 0.92);
}
html[data-mode="dark"] .section-slots-providers .provider-card__logo {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(248, 250, 252, 0.96);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-slots-providers .provider-card__logo {
  background: rgba(255, 247, 228, 0.92);
  border-color: rgba(217, 119, 6, 0.24);
  color: rgba(146, 64, 14, 0.92);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-slots-providers .provider-card__logo {
  background: rgba(245, 243, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.24);
  color: rgba(91, 33, 182, 0.92);
}
html[data-theme="minimal"] .section-casino-limits .limits-table__head,
html[data-theme="minimal"] .section-casino-vip .casino-vip-compare__head {
  background: rgba(2, 6, 23, 0.03);
  color: color-mix(in oklab, var(--color-text) 70%, #000);
}

@media (max-width: 767px) {
  .section-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .section-actions .btn {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .casino-hero--split,
  .casino-hero__bannerMain,
  .casino-vip,
  .casino-support {
    grid-template-columns: 1fr;
  }
  .casino-hero__panel {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .casino-hero--rail {
    grid-template-columns: 1fr;
  }
  .casino-rail__side {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .casino-entries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .casino-entries-rail {
    grid-template-columns: 1fr;
  }
  .entry-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
  }
  .entry-row__arrow {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -6px;
  }
  .casino-steps,
  .limits-grid,
  .highlights-grid,
  .casino-promos,
  .casino-articles {
    grid-template-columns: 1fr;
  }
  .providers-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tips-grid {
    grid-template-columns: 1fr;
  }
  .casino-vip__cards {
    grid-template-columns: 1fr;
  }
  .casino-hero--center .casino-hero__kpis,
  .casino-hero--center .casino-hero__centerChips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .casino-rail__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .casino-hero__stackCards {
    grid-template-columns: 1fr;
  }
  .casino-entries-feature,
  .casino-basics-split,
  .limits-split,
  .highlights-split,
  .casino-articles-mag,
  .casino-promos-bento,
  .casino-tips-split,
  .casino-supportPanel__grid,
  .casino-vip-guide {
    grid-template-columns: 1fr;
  }
  .providers-wall--group {
    grid-template-columns: 1fr;
  }
  .limits-split__main {
    grid-template-columns: 1fr;
  }
  .casino-supportCards {
    grid-template-columns: 1fr;
  }
  .casino-promoRow {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .casino-promoRow__right {
    justify-items: start;
  }
  .limits-table__head,
  .casino-vip-compare__head {
    display: none;
  }
  .limits-table__row,
  .casino-vip-compare__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 980px) {
  .events-featured {
    grid-template-columns: 1fr;
  }
  .event-featured {
    grid-template-columns: 1fr;
  }
  .event-featured__media {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .event-featured__img,
  .event-featured__ph {
    min-height: 220px;
  }
  .odds-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .odds-cell--act .btn {
    width: 100%;
  }
}

@media (max-width: 980px) {
  /* Mobile-only redesign for limits table; desktop keeps original table layout */
  .section-casino-limits .limits-table {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    display: grid;
    gap: 10px;
  }
  .section-casino-limits .limits-table__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 12px;
    border: 1px solid rgba(180, 120, 40, 0.16);
    border-radius: 16px;
    background: rgba(255, 250, 236, 0.9);
    box-shadow: 0 8px 18px rgba(120, 53, 15, 0.06);
  }
  .section-casino-limits .limits-table__row + .limits-table__row {
    border-top: 1px solid rgba(180, 120, 40, 0.16);
  }
  .section-casino-limits .limits-table__name {
    grid-column: 1 / -1;
    font-size: 19px;
    line-height: 1.3;
    color: rgba(67, 20, 7, 0.96);
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(180, 120, 40, 0.2);
  }
  .section-casino-limits .limits-table__cell {
    min-height: 56px;
    border-radius: 12px;
    padding: 8px 10px;
    background: rgba(255, 244, 214, 0.78);
    border: 1px solid rgba(217, 119, 6, 0.18);
    color: rgba(67, 20, 7, 0.92);
    font-size: 15px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }
  .section-casino-limits .limits-table__cell::before {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    color: rgba(146, 64, 14, 0.74);
    letter-spacing: 0.02em;
  }
  .section-casino-limits .limits-table__cell:nth-child(2)::before {
    content: "MIN";
  }
  .section-casino-limits .limits-table__cell:nth-child(3)::before {
    content: "MAX";
  }
  .section-casino-limits .limits-table__cell:nth-child(4)::before {
    content: "SPEED";
  }
  .section-casino-limits .limits-table__cell:nth-child(5)::before {
    content: "TYPE";
  }
  .section-casino-limits .limits-table__cell .pill {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(217, 119, 6, 0.24);
    color: rgba(120, 53, 15, 0.92);
  }
}
@media (max-width: 980px) {
  /* Theme-aware palette for mobile limits cards */
  html[data-mode="light"][data-theme="minimal_blue"] .section-casino-limits .limits-table__row {
    background: rgba(239, 246, 255, 0.9);
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
  }
  html[data-mode="light"][data-theme="minimal_blue"] .section-casino-limits .limits-table__name {
    color: rgba(30, 58, 138, 0.96);
    border-bottom-color: rgba(37, 99, 235, 0.18);
  }
  html[data-mode="light"][data-theme="minimal_blue"] .section-casino-limits .limits-table__cell {
    background: rgba(219, 234, 254, 0.82);
    border-color: rgba(37, 99, 235, 0.18);
    color: rgba(30, 58, 138, 0.92);
  }
  html[data-mode="light"][data-theme="minimal_blue"] .section-casino-limits .limits-table__cell::before {
    color: rgba(37, 99, 235, 0.72);
  }
  html[data-mode="light"][data-theme="minimal_blue"] .section-casino-limits .limits-table__cell .pill {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(37, 99, 235, 0.24);
    color: rgba(30, 58, 138, 0.92);
  }

  html[data-mode="light"][data-theme="minimal_violet"] .section-casino-limits .limits-table__row {
    background: rgba(245, 243, 255, 0.9);
    border-color: rgba(124, 58, 237, 0.16);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.08);
  }
  html[data-mode="light"][data-theme="minimal_violet"] .section-casino-limits .limits-table__name {
    color: rgba(91, 33, 182, 0.96);
    border-bottom-color: rgba(124, 58, 237, 0.18);
  }
  html[data-mode="light"][data-theme="minimal_violet"] .section-casino-limits .limits-table__cell {
    background: rgba(237, 233, 254, 0.82);
    border-color: rgba(124, 58, 237, 0.18);
    color: rgba(91, 33, 182, 0.92);
  }
  html[data-mode="light"][data-theme="minimal_violet"] .section-casino-limits .limits-table__cell::before {
    color: rgba(124, 58, 237, 0.72);
  }
  html[data-mode="light"][data-theme="minimal_violet"] .section-casino-limits .limits-table__cell .pill {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(124, 58, 237, 0.24);
    color: rgba(91, 33, 182, 0.92);
  }

  html[data-mode="dark"] .section-casino-limits .limits-table__row {
    background: rgba(15, 23, 42, 0.68);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: none;
  }
  html[data-mode="dark"] .section-casino-limits .limits-table__name {
    color: rgba(248, 250, 252, 0.96);
    border-bottom-color: rgba(148, 163, 184, 0.24);
  }
  html[data-mode="dark"] .section-casino-limits .limits-table__cell {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.28);
    color: rgba(241, 245, 249, 0.94);
  }
  html[data-mode="dark"] .section-casino-limits .limits-table__cell::before {
    color: rgba(203, 213, 225, 0.82);
  }
  html[data-mode="dark"] .section-casino-limits .limits-table__cell .pill {
    background: rgba(51, 65, 85, 0.76);
    border-color: rgba(148, 163, 184, 0.34);
    color: rgba(241, 245, 249, 0.94);
  }
}
@media (max-width: 980px) {
  .hot-games-grid {
    grid-template-columns: 1fr;
  }
  .event-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.events-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.event-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.event-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.event-card__title {
  font-weight: 850;
}
.event-card__time {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 980px) {
  .events-cards {
    grid-template-columns: 1fr;
  }
  .event-card__top {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Hot games: cards (v2) */
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.section-head__left {
  min-width: 0;
}
.hot-games-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hot-game-media {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.hot-game-media__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.03);
}
.hot-game-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hot-game-media__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(360px 220px at 20% 20%, rgba(110, 231, 255, 0.18), transparent 60%),
    radial-gradient(360px 220px at 80% 30%, rgba(255, 107, 53, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.hot-game-media__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}
.hot-game-media__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hot-game-media__title {
  font-weight: 850;
  letter-spacing: 0.2px;
}
.hot-game-media__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Hot games: featured (v3) */
.hot-games-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 14px;
  align-items: start;
}
.hot-game-featured {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
}
.hot-game-featured__media {
  position: relative;
  aspect-ratio: 16 / 9;
}
.hot-game-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hot-game-featured__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(420px 240px at 20% 20%, rgba(34, 197, 94, 0.16), transparent 60%),
    radial-gradient(420px 240px at 80% 30%, rgba(255, 61, 245, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.hot-game-featured__content {
  padding: 16px;
  display: grid;
  gap: 10px;
}
.hot-game-featured__tag {
  justify-self: start;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.25);
}
.hot-game-featured__title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}
.hot-game-featured__desc {
  color: var(--color-text-muted);
  line-height: 1.7;
}
.hot-game-featured__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hot-games-side {
  display: grid;
  gap: 10px;
}
.hot-game-mini {
  display: block;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.hot-game-mini:hover {
  transform: translateY(-1px);
  border-color: rgba(110, 231, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}
.hot-game-mini__title {
  font-weight: 850;
}
.hot-game-mini__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.hot-game-mini__desc {
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 980px) {
  .section-head--split {
    align-items: flex-start;
    flex-direction: column;
  }
  .hot-games-cards {
    grid-template-columns: 1fr;
  }
  .hot-games-featured {
    grid-template-columns: 1fr;
  }
}

/* ===== Promotions slider ===== */
.promo-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 360px);
  gap: 14px;
  overflow-x: auto;
  /* keep space for card shadows (overflow-x may clip y) */
  padding: 2px 2px 14px;
  scroll-snap-type: x mandatory;
}
.promo-slider--static {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
  padding: 0;
}
.promo-slide {
  scroll-snap-align: start;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promo-slide__media {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 16 / 9;
}
.promo-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-slide__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(360px 200px at 20% 20%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(360px 200px at 80% 30%, rgba(255, 107, 53, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.promo-slide__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.promo-slide__title {
  font-weight: 850;
  min-width: 0;
  flex: 1 1 180px;
  overflow-wrap: anywhere;
}
.promo-slide__tag {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}
.promo-slide__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (max-width: 980px) {
  .promo-slider--static {
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 360px);
    grid-template-columns: none;
    overflow-x: auto;
    padding: 2px 2px 14px;
  }
}

/* ===== Content teasers (blog_teasers v2) ===== */
.teasers-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 420px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.teasers-slider::-webkit-scrollbar {
  display: none;
}
.teaser-card {
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 0;
}
.teaser-card__media {
  background: rgba(255, 255, 255, 0.04);
}
.teaser-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.teaser-card__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(360px 220px at 20% 20%, rgba(110, 231, 255, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.teaser-card__body {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.teaser-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.teaser-card__title {
  font-weight: 850;
  line-height: 1.35;
}
.teaser-card__date {
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.teaser-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .teaser-card {
    grid-template-columns: 1fr;
  }
  .teaser-card__media {
    aspect-ratio: 16 / 9;
  }
}

/* ===== VIP / Payments ===== */
.vip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.vip-card {
  min-width: 0;
  border-radius: var(--card-radius-md, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  padding: var(--card-pad, 16px);
}
.vip-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm, 10px);
  margin-bottom: 10px;
}
.vip-card__title {
  min-width: 0;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.vip-card__tag {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.25);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.vip-card__note {
  margin: 0 0 10px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.vip-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.payments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm, 10px);
}
.payment-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap, 10px);
  padding: var(--chip-pad-y, 10px) var(--chip-pad-x, 12px);
  border-radius: var(--chip-radius, 999px);
  background: var(--chip-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--chip-border, rgba(255, 255, 255, 0.10));
}
.payment-pill__logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.payment-pill__name {
  font-weight: 650;
}

/* Payments slider (v2) */
.payments-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 240px);
  gap: var(--gap-md, 12px);
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.payments-slider::-webkit-scrollbar {
  display: none;
}
.payment-card {
  scroll-snap-align: start;
  border-radius: var(--card-radius-md, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  padding: var(--card-pad-sm, 14px);
  display: grid;
  gap: var(--gap-sm, 10px);
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
}
.payment-card__media {
  height: 42px;
  display: flex;
  align-items: center;
}
.payment-card__logo {
  max-width: 120px;
  max-height: 26px;
  object-fit: contain;
  opacity: 0.92;
}
.payment-card__ph {
  width: 70%;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--chip-bg, rgba(255, 255, 255, 0.06)) 70%, transparent 30%);
}
.payment-card__name {
  font-weight: 850;
}
.payment-card__hint {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 980px) {
  .vip-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== VIP new variants (v3/v4/v5) ===== */
.vip-levels {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 14px;
  align-items: start;
}
.vip-levels__side,
.vip-levels__main {
  min-width: 0;
  border-radius: var(--card-radius-xl, 26px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: 16px;
}
.vip-levels__main {
  background: color-mix(in oklab, var(--card-bg, rgba(255, 255, 255, 0.03)) 80%, transparent 20%);
}
.vip-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.vip-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.vip-step__badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.vip-step__content {
  min-width: 0;
  border-radius: var(--card-radius-md, 18px);
  background: color-mix(in oklab, var(--card-bg, rgba(255, 255, 255, 0.03)) 75%, transparent 25%);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  padding: 12px 14px;
  box-shadow: var(--card-shadow-md, 0 10px 22px rgba(0, 0, 0, 0.10));
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.vip-step:hover .vip-step__content {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(110, 231, 255, 0.22);
}
.vip-step__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.vip-step__name {
  font-weight: 950;
}
.vip-step__req {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.vip-side-card {
  margin-top: 12px;
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad, 16px);
  display: grid;
  gap: var(--gap-sm, 10px);
}
.vip-side-card__title {
  font-weight: 950;
}
.vip-side-card__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.vip-side-card__actions {
  display: grid;
  gap: var(--gap-sm, 10px);
}
.vip-perk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md, 12px);
}
.vip-perk {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad-sm, 14px);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--gap-md, 12px);
  align-items: start;
}
.vip-perk__body {
  min-width: 0;
}
.vip-perk__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 18px;
}
.vip-perk__title {
  font-weight: 950;
}
.vip-perk__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.vip-perk__tag {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
  font-size: 12px;
  font-weight: 850;
  width: fit-content;
}

.vip-compare {
  display: grid;
  gap: 12px;
}
.vip-table-wrap {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  overflow: auto;
}
.vip-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.vip-table__th {
  text-align: left;
  padding: 12px 14px;
  font-weight: 950;
  border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  background: color-mix(in oklab, var(--card-bg, rgba(255, 255, 255, 0.03)) 70%, transparent 30%);
}
.vip-table thead .vip-table__th:not(.vip-table__th--perk) {
  text-align: center;
}
.vip-table__th--perk {
  width: 40%;
}
.vip-table__perk {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vip-table__perkTitle {
  font-weight: 900;
}
.vip-table__perkDesc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.vip-table__cell {
  text-align: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  font-weight: 950;
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
}
.vip-mark--yes {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.26);
}
.vip-mark--no {
  opacity: 0.7;
}
.vip-note {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad, 16px);
  display: grid;
  gap: var(--gap-sm, 10px);
}
.vip-note__title {
  font-weight: 950;
}
.vip-note__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.vip-note__actions {
  display: flex;
  gap: var(--gap-sm, 10px);
  flex-wrap: wrap;
}

.vip-perks {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
  gap: 14px;
  align-items: start;
}
.vip-perks__main {
  display: grid;
  gap: var(--gap-lg, 16px);
}
.vip-perkRow {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
}
.vip-perkRow__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 18px;
}
.vip-perkRow__title {
  font-weight: 950;
}
.vip-perkRow__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.vip-sticky {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 86px;
}
.vip-sticky__card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.vip-sticky__card--soft {
  background: rgba(110, 231, 255, 0.06);
  border-color: rgba(110, 231, 255, 0.14);
}
.vip-sticky__title {
  font-weight: 950;
}
.vip-sticky__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.vip-miniSteps {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 13px;
}
.vip-sticky__actions {
  display: grid;
  gap: 10px;
}
.vip-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vip-kpi {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  display: grid;
  gap: 6px;
}
.vip-kpi__label {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
}
.vip-kpi__value {
  font-weight: 950;
}

@media (max-width: 980px) {
  .vip-levels {
    grid-template-columns: minmax(0, 1fr);
  }
  .vip-perk-grid {
    grid-template-columns: 1fr;
  }
  .vip-perks {
    grid-template-columns: 1fr;
  }
  .vip-sticky {
    position: static;
  }
  .vip-perkRow {
    grid-template-columns: 44px 1fr;
    align-items: start;
  }
  .vip-perkRow__cta {
    grid-column: 1 / -1;
  }
}

/* Light theme readability for VIP levels */
html[data-theme="minimal"] .vip-levels__side,
html[data-theme="minimal"] .vip-levels__main {
  background: var(--card-bg, rgba(255, 255, 255, 0.86));
  border-color: var(--card-border, rgba(15, 23, 42, 0.12));
}
html[data-theme="minimal"] .vip-step__content {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: var(--shadow-sm);
}
html[data-theme="minimal"] .vip-step:hover .vip-step__content {
  border-color: rgba(37, 99, 235, 0.22);
}
html[data-mode="light"] .section-vip--levels .vip-step__top .badge {
  color: var(--color-text);
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.14);
  text-shadow: none;
}
/* VIP level tags ("Starter/Advanced/..."): readable on light themes */
html[data-mode="light"] .section-vip--levels .vip-step__top .pill,
html[data-mode="light"] .section-vip--levels .vip-step__top .pill--soft {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  text-shadow: none;
}

/* ===== Responsible gaming ===== */
.responsible-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.responsible-card__text {
  color: var(--color-text-muted);
  line-height: 1.75;
}
.responsible-card__tips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.responsible-card__tips li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.responsible-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsible split (v2) */
.responsible-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.responsible-split__text {
  color: var(--color-text-muted);
  line-height: 1.75;
}
.tips-card {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad, 16px);
}
.tips-card__title {
  font-weight: 900;
  margin-bottom: 10px;
}
.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-sm, 10px);
}
.tips-list li {
  display: flex;
  gap: var(--gap-sm, 10px);
  align-items: flex-start;
}
.responsible-split__actions {
  margin-top: 12px;
  display: flex;
  gap: var(--gap-sm, 10px);
  flex-wrap: wrap;
}
@media (max-width: 980px) {
  .responsible-split {
    grid-template-columns: 1fr;
  }
}

/* Responsible bento (v3) */
.responsible-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--gap-lg, 16px);
  align-items: start;
}
.responsible-pane {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad-lg, 18px);
  display: grid;
  gap: var(--gap-md, 12px);
}
.responsible-pane__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.22);
}
.responsible-pane__text {
  color: var(--color-text-muted);
  line-height: 1.75;
}
.responsible-pane__actions {
  display: flex;
  gap: var(--gap-sm, 10px);
  flex-wrap: wrap;
}
.responsible-tiles {
  display: grid;
  gap: var(--gap-md, 12px);
}
.responsible-tile {
  border-radius: 18px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  padding: var(--card-pad-sm, 14px);
  display: flex;
  gap: var(--gap-sm, 10px);
  align-items: flex-start;
}
.responsible-tile__icon {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.9);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.10);
  flex: 0 0 auto;
}
.responsible-tile__text {
  color: var(--color-text-muted);
  line-height: 1.6;
}
@media (max-width: 980px) {
  .responsible-bento {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .responsible-bento > *,
  .responsible-pane,
  .responsible-pane__actions {
    min-width: 0;
  }

  .responsible-pane__actions > .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* Compact bordered UI text contract. Tags/chips/badges/pills are semantic UI
   labels in every language: the whole capsule may wrap to a new flex row, but
   its text must stay complete on one line. Only explicitly marked descriptions
   use the unframed supporting-text treatment. */
:is([data-ui-token="compact"], [data-ui-control="nowrap"]) {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

[data-ui-token="compact"] {
  box-sizing: border-box !important;
  width: max-content;
  max-width: 100% !important;
  flex: 0 0 auto;
  align-self: flex-start;
}

[data-ui-token="description"] {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  opacity: 0.78;
  text-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

:is(
  .hero__tags,
  .hero-system__tags,
  .hero-casino__chips,
  .slots-themeFeature__chips
) > :not([data-ui-token="description"]) {
  order: 1;
}

:is(
  .hero__tags,
  .hero-system__tags,
  .hero-casino__chips,
  .slots-themeFeature__chips
) > [data-ui-token="description"] {
  flex: 1 0 100%;
  order: 2;
  align-self: flex-start;
  margin-top: 2px;
}

.vip-card__top:has(> [data-ui-token="description"]) {
  flex-wrap: wrap;
}

.vip-card__top > [data-ui-token="description"] {
  flex: 1 0 100%;
}

.provider-card__logo[data-ui-token="compact"] {
  width: max-content;
  min-width: 40px;
  max-width: 100%;
  padding-inline: 10px;
}

/* Responsible timeline (v4) */
.responsible-timeline {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.rail-card {
  border-radius: var(--card-radius-lg, 22px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  padding: var(--card-pad, 16px);
}
.rail-card__title {
  font-weight: 900;
  margin-bottom: 10px;
}
.rail-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.rail-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.rail-step__num {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.rail-step__text {
  color: var(--color-text-muted);
  line-height: 1.6;
}
.rail-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.responsible-prose {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.responsible-callouts {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.callout-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 14px;
}
.callout-card__h {
  font-weight: 900;
  margin-bottom: 8px;
}
.callout-card__p {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
@media (max-width: 980px) {
  .responsible-timeline {
    grid-template-columns: 1fr;
  }
  .responsible-callouts {
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ compact ===== */
.faq-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.faq-compact__item {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 16px;
}
.faq-compact__q {
  font-weight: 850;
  margin-bottom: 8px;
}
.faq-compact__a {
  color: var(--color-text-muted);
  line-height: 1.6;
}
@media (max-width: 980px) {
  .faq-compact {
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ grid expand (v2) ===== */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.faq-card {
  border-radius: var(--card-radius-md, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--card-shadow-sm, var(--shadow-sm));
  overflow: hidden;
}
.faq-card__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.faq-card__q::-webkit-details-marker {
  display: none;
}
.faq-card__qtext {
  font-weight: 850;
}
.faq-card__icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  flex: 0 0 auto;
}
.faq-card__icon::before,
.faq-card__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: rgba(245, 247, 255, 0.9);
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.faq-card__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-card[open] .faq-card__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-card__a {
  padding: 0 16px 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ===== FAQ two-column (v3) ===== */
.faq-twoCol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.faq-twoCol__item {
  border-radius: var(--card-radius-md, 18px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  padding: 14px 16px;
}
.faq-twoCol__q {
  font-weight: 850;
  margin-bottom: 8px;
}
.faq-twoCol__a {
  color: var(--color-text-muted);
  line-height: 1.65;
}
@media (max-width: 980px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .faq-twoCol {
    grid-template-columns: 1fr;
  }
}

/* ===== Getting started / Personas ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.step-card {
  min-width: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 16px;
}
.step-card__num {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(110, 231, 255, 0.12);
  border: 1px solid rgba(110, 231, 255, 0.22);
  margin-bottom: 10px;
}
.step-card__title {
  font-weight: 850;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.step-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.personas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.persona-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.persona-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.persona-card__title {
  font-weight: 850;
}
.persona-card__tag {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.persona-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Personas rows (v2) */
.personas-rows {
  display: grid;
  gap: 12px;
}
.persona-row {
  border-radius: 18px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  padding: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.persona-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--chip-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--chip-border, rgba(255, 255, 255, 0.12));
}

/* Features (v5) on light themes: no bg image + dark text */
html[data-theme^="minimal"] .features-hero-bg--off {
  display: none;
}
html[data-theme^="minimal"] .section-features--numbers .features-hero {
  background: var(--card-bg, rgba(255, 255, 255, 0.86));
  border-color: var(--card-border, rgba(15, 23, 42, 0.12));
  backdrop-filter: none;
}
html[data-theme^="minimal"] .section-features--numbers .num-card {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
html[data-theme^="minimal"] .section-features--numbers .num-card__num {
  color: var(--color-text);
}
html[data-theme^="minimal"] .section-features--numbers .num-card__desc {
  color: var(--color-text-muted);
}
html[data-theme^="minimal"] .section-features--numbers .features-hero .section-title,
html[data-theme^="minimal"] .section-features--numbers .features-hero .section-subtitle,
html[data-theme^="minimal"] .section-features--numbers .features-hero__badge .badge__label,
html[data-theme^="minimal"] .section-features--numbers .num-card__title {
  color: var(--color-text);
  text-shadow: none;
}
.persona-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.persona-row__title {
  font-weight: 850;
}
.persona-row__desc {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .persona-row {
    grid-template-columns: 44px 1fr;
  }
  .persona-row__cta {
    grid-column: 1 / -1;
  }
  .persona-row__cta .btn {
    width: 100%;
  }
}
@media (max-width: 980px) {
  .steps-grid,
  .personas-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Contact / App / Partners ===== */
.contact-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
}
.contact-list {
  display: grid;
  gap: 10px;
}
.contact-item__label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.contact-item__value {
  font-weight: 750;
  margin-top: 4px;
}
.contact-card__actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* Contact split (v2) */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.contact-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.contact-panel {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
}
.contact-panel__label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.contact-panel__value {
  font-weight: 900;
  margin-top: 6px;
}
.contact-panel__hint {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.contact-cta {
  border-radius: 22px;
  background: radial-gradient(900px 320px at 0% 0%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.contact-cta__title {
  font-weight: 950;
  font-size: 18px;
}
.contact-cta__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.contact-cta__actions {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

/* Contact hub (v3) */
.contact-hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.support-card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.support-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.support-card__badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 750;
  color: var(--color-text);
}
.support-card__label {
  font-weight: 950;
  letter-spacing: 0.2px;
  min-width: 0;
  flex: 1 1 180px;
  overflow-wrap: anywhere;
}
.support-card__value {
  font-weight: 850;
  font-size: 18px;
}
.support-card__hint {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.support-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}
.support-side {
  display: grid;
  gap: 12px;
}
.support-side__block {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.support-side__block--cta {
  background: radial-gradient(900px 320px at 0% 0%, rgba(110, 231, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.10);
}
.support-side__title {
  font-weight: 950;
}
.support-side__value {
  margin-top: 8px;
  font-weight: 950;
  font-size: 18px;
}
.support-side__hint {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

/* Contact widget (v4) */
.support-widget {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}
.support-widget__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.support-widget__kicker {
  font-size: 12px;
  color: var(--color-text-muted);
}
.support-widget__title {
  margin-top: 8px;
  font-weight: 950;
  font-size: 24px;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}
.support-widget__subtitle {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.chat-preview {
  margin-top: 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.chat-bubble {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  line-height: 1.55;
  font-size: 13px;
  max-width: 92%;
}
.chat-bubble--user {
  margin-left: auto;
  background: color-mix(in oklab, var(--color-primary) 16%, rgba(255, 255, 255, 0.04));
  border-color: color-mix(in oklab, var(--color-primary) 22%, rgba(255, 255, 255, 0.10));
}
.quick-topics {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.topic-pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.topic-pill:hover {
  background: rgba(255, 255, 255, 0.08);
}
.support-widget__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.support-widget__side {
  display: grid;
  gap: 12px;
}
.support-info,
.support-entry,
.support-safe {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.support-info__title,
.support-entry__title,
.support-safe__title {
  font-weight: 950;
}
.support-info__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.support-stat {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
}
.support-stat__label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.support-stat__value {
  margin-top: 6px;
  font-weight: 900;
}
.support-entry__actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.support-safe__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.support-safe__chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app-card {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: center;
}

/* App banner (v2) */
.app-banner {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 220px;
  gap: 0;
  align-items: stretch;
}
.app-banner__media {
  position: relative;
}
.app-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app-banner__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(420px 260px at 20% 20%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(420px 260px at 80% 30%, rgba(255, 107, 53, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.app-banner__content {
  padding: 16px 18px;
}
.app-banner__kicker {
  font-size: 12px;
  color: var(--color-text-muted);
}
.app-banner__title {
  margin-top: 8px;
  font-weight: 950;
  font-size: 22px;
}
.app-banner__subtitle,
.app-banner__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.app-banner__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app-banner__qr {
  padding: 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.app-card__title {
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 8px;
}
.app-card__subtitle,
.app-card__desc {
  color: var(--color-text-muted);
  line-height: 1.65;
}
.app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.app-qr {
  width: 180px;
  height: 180px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  object-fit: cover;
}
.app-qr--fallback {
  display: block;
}
.app-qr__hint {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

/* App showcase (v3) */
.app-showcase {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: start;
}
.app-showcase__kicker {
  font-size: 12px;
  color: var(--color-text-muted);
}
.app-showcase__title {
  margin-top: 8px;
  font-weight: 950;
  font-size: 24px;
  letter-spacing: -0.2px;
}
.app-showcase__subtitle,
.app-showcase__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.app-showcase__highlights {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.app-hl {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}
.app-hl__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
  flex: 0 0 auto;
}
.app-showcase__meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app-showcase__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app-showcase__stores {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.store-badge {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
}
.app-showcase__side {
  display: grid;
  gap: 12px;
}
.device-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-md);
  min-height: 220px;
}
.device-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.device-card__ph {
  width: 100%;
  height: 100%;
  min-height: 220px;
  background:
    radial-gradient(520px 320px at 20% 20%, rgba(110, 231, 255, 0.16), transparent 60%),
    radial-gradient(520px 320px at 80% 30%, rgba(255, 107, 53, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.device-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.58));
}
.device-card__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 750;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.app-qrbox {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  justify-items: center;
}

/* App steps (v4) */
.app-steps {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.step-card__num {
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--color-text-muted);
}
.step-card__title {
  margin-top: 8px;
  font-weight: 950;
}
.step-card__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
.app-steps__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app-steps__side {
  display: grid;
  gap: 12px;
}
.app-note,
.app-support {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.app-note__title,
.app-support__title {
  font-weight: 950;
}
.app-note__desc,
.app-support__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.app-note__chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
html[data-mode="light"] .section-app--showcase .app-showcase__meta .pill,
html[data-mode="light"] .section-app--showcase .store-badge,
html[data-mode="light"] .section-app--steps .app-note__chips .badge:not([data-ui-token="description"]) {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  text-shadow: none;
}

/* App compare (v5) */
.app-compare {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.app-compare__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.app-compare__kicker {
  font-size: 12px;
  color: var(--color-text-muted);
}
.app-compare__title {
  margin-top: 8px;
  font-weight: 950;
  font-size: 24px;
  letter-spacing: -0.2px;
}
.app-compare__subtitle {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.app-compare__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app-compare__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.compare-col {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.compare-col__title {
  font-weight: 950;
  font-size: 16px;
}
.compare-col__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 13px;
}
.compare-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.compare-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}
.compare-list--muted li {
  color: color-mix(in oklab, var(--color-text) 86%, transparent);
}
.check {
  width: 18px;
  height: 18px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.30);
  position: relative;
  flex: 0 0 auto;
}
.check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(34, 197, 94, 0.96);
  font-weight: 900;
  font-size: 12px;
}
.compare-col__meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.compare-col--qr .app-qrbox {
  margin-top: 12px;
}

/* App steps (v4): reduce right column height to avoid big empty area */
.app-steps .app-qrbox {
  padding: 12px;
}
.app-steps .app-qr {
  width: 150px;
  height: 150px;
}
.app-steps .app-qr__hint {
  margin-top: 8px;
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

/* Partners slider (v2) */
.partners-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 220px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.partners-slider::-webkit-scrollbar {
  display: none;
}
.partner-logo--slide {
  scroll-snap-align: start;
}
.partner-logo {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-logo img {
  max-width: 100%;
  max-height: 34px;
  object-fit: contain;
  opacity: 0.92;
}
.partner-logo__placeholder {
  width: 70%;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 980px) {
  .contact-card,
  .app-card {
    grid-template-columns: 1fr;
  }
  .contact-split {
    grid-template-columns: 1fr;
  }
  .contact-panels {
    grid-template-columns: 1fr;
  }
  .contact-hub {
    grid-template-columns: 1fr;
  }
  .support-grid {
    grid-template-columns: 1fr;
  }
  .support-widget {
    grid-template-columns: 1fr;
  }
  .support-info__grid {
    grid-template-columns: 1fr;
  }
  .app-banner {
    grid-template-columns: 1fr;
  }
  .app-banner__qr {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .app-showcase {
    grid-template-columns: 1fr;
  }
  .app-steps {
    grid-template-columns: 1fr;
  }
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .app-compare__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .app-compare__grid {
    grid-template-columns: 1fr;
  }
  .partners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== CTA banner ===== */
.cta-banner {
  border-radius: 26px;
  background: radial-gradient(1200px 400px at 20% 0%, rgba(110, 231, 255, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cta-banner__kicker {
  color: var(--color-text-muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.cta-banner__title {
  font-weight: 950;
  font-size: 22px;
  margin-bottom: 6px;
}
.cta-banner__subtitle {
  color: var(--color-text-muted);
  line-height: 1.6;
}
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 980px) {
  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Pagination ===== */
.pagination {
  margin-top: 14px;
  margin-bottom: 28px;
  text-align: center;
}
.pagination__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}
.pagination__btn {
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.pagination__btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.pagination__meta {
  color: var(--color-text-muted);
}

.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 0;
}
.pagination__page {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 750;
}
.pagination__page.is-active {
  border-width: 2px;
  border-color: rgba(110, 231, 255, 0.28);
  background: rgba(110, 231, 255, 0.10);
}
.pagination__dots {
  color: var(--color-text-muted);
  padding: 0 4px;
}

@media (max-width: 520px) {
  .pagination__inner {
    gap: 8px;
    padding: 10px 10px;
  }
  .pagination__btn {
    padding: 8px 10px;
    min-width: 62px;
    text-align: center;
  }
}

/* ===== Article header / meta / related ===== */
.article-header__inner {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
}
.article-header__kicker {
  color: var(--color-text-muted);
  font-size: 12px;
}
.article-header__title {
  margin-top: 8px;
  font-size: 28px;
  letter-spacing: -0.4px;
}
.article-header__meta {
  margin-top: 10px;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Article header cover (v2) */
.article-header--cover {
  position: relative;
}
.article-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 26px 26px;
  z-index: 0;
}
.article-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
.article-cover__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(900px 420px at 80% 30%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.article-header__inner--cover {
  position: relative;
  z-index: 1;
  background: rgba(7, 10, 20, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

/* Article cover header on light theme: avoid "dark bar" look */
html[data-theme="minimal"] .article-header__inner--cover {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
}
html[data-theme="minimal"] .article-header--cover .article-header__kicker,
html[data-theme="minimal"] .article-header--cover .article-header__meta {
  color: rgba(15, 23, 42, 0.74);
}
html[data-theme="minimal"] .article-header--cover .article-header__title {
  color: rgba(15, 23, 42, 0.96);
}

/* ===== Article detail variants (v2/v3) ===== */
.reader-article {
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
}
.reader-hero {
  position: relative;
  min-height: 260px;
}
.reader-hero__bg {
  position: absolute;
  inset: 0;
}
.reader-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
.reader-hero__ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(110, 231, 255, 0.14), transparent 60%),
    radial-gradient(900px 420px at 80% 30%, rgba(255, 107, 53, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.reader-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.78));
}
.reader-hero__content {
  position: relative;
  z-index: 1;
  padding: 22px 22px;
  max-width: 78ch;
}
.reader-hero__kicker {
  color: rgba(245, 247, 255, 0.82);
  font-size: 12px;
  font-weight: 850;
}
.reader-hero__title {
  margin: 10px 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.5px;
}
.reader-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(245, 247, 255, 0.78);
}
.reader-body {
  padding: 16px 18px 18px;
}
.reader-tools {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.reader-tags {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.reader-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reader-content {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
}
.reader-content {
  color: rgba(245, 247, 255, 0.92);
  line-height: 1.85;
}
.reader-content h2 {
  margin: 18px 0 10px;
  font-size: 18px;
}
.reader-content p {
  margin: 10px 0;
  color: var(--color-text-muted);
}
.reader-related {
  margin-top: 16px;
}
.reader-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.reader-related__card {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.reader-related__title {
  font-weight: 950;
  line-height: 1.3;
}
.reader-related__meta {
  color: var(--color-text-muted);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.split-article {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
  padding: 18px;
}
.split-article__head {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.split-article__kicker {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 850;
}
.split-article__title {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.split-article__meta {
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.split-article__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.split-article__main {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
}
.split-article__content {
  color: rgba(245, 247, 255, 0.92);
  line-height: 1.85;
}
.split-article__content h2 {
  margin: 18px 0 10px;
  font-size: 18px;
}
.split-article__content p {
  margin: 10px 0;
  color: var(--color-text-muted);
}
.split-article__bar {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.split-article__tags {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.split-article__actions {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.split-article__side {
  display: grid;
  gap: 12px;
}
.split-sideCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
}
.split-sideCard__title {
  font-weight: 950;
}
.split-sideCard__hint {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.split-sideCta {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.split-sideCta__title {
  font-weight: 950;
  letter-spacing: -0.2px;
}
.split-sideCta__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .reader-related__grid {
    grid-template-columns: 1fr;
  }
  .split-article__grid {
    grid-template-columns: 1fr;
  }
}

/* Article-detail light-theme contract. All minimal_* variants render on pale
   surfaces, so they need the same ink/card treatment as the base minimal
   theme rather than inheriting the dark article defaults above. */
html[data-mode="light"][data-theme^="minimal"] .reader-article,
html[data-mode="light"][data-theme^="minimal"] .reader-content,
html[data-mode="light"][data-theme^="minimal"] .reader-related__card,
html[data-mode="light"][data-theme^="minimal"] .split-article,
html[data-mode="light"][data-theme^="minimal"] .split-article__main,
html[data-mode="light"][data-theme^="minimal"] .split-sideCard,
html[data-mode="light"][data-theme^="minimal"] .split-sideCta {
  background: var(--card-bg);
  border-color: var(--card-border);
}
html[data-mode="light"][data-theme^="minimal"] .reader-content,
html[data-mode="light"][data-theme^="minimal"] .split-article__content {
  color: var(--color-text);
}
html[data-mode="light"][data-theme^="minimal"] .reader-content p,
html[data-mode="light"][data-theme^="minimal"] .split-article__content p {
  color: var(--color-text-muted);
}
html[data-mode="light"][data-theme^="minimal"]
  :is(.reader-article, .split-article) .article-pill {
  color: var(--color-text);
  background: var(--chip-bg);
  border-color: var(--chip-border);
}

.article-meta-bar__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.article-meta-bar__right {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.article-meta-bar {
  margin-top: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
}
.article-meta-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.related-list {
  display: grid;
  gap: 10px;
}
.related-item {
  display: block;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.related-item__title {
  font-weight: 850;
  line-height: 1.35;
}
.related-item__meta {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.related-empty {
  color: var(--color-text-muted);
  padding: 10px 0;
}

/* Related cards (v2) */
.related-cards {
  display: grid;
  gap: 10px;
}
.related-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.related-card__media {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 1 / 1;
}
.related-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.related-card__ph {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
}
.related-card__title {
  font-weight: 850;
  line-height: 1.35;
}
.related-card__meta {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}
@media (max-width: 980px) {
  .related-card {
    grid-template-columns: 1fr;
  }
  .related-card__media {
    aspect-ratio: 16 / 9;
  }
}

/* Light minimal variants: strengthen text/icon readability on pale cards */
html[data-mode="light"][data-theme^="minimal"] .pill,
html[data-mode="light"][data-theme^="minimal"] .chip,
html[data-mode="light"][data-theme^="minimal"] .tag {
  color: rgba(30, 41, 59, 0.92);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(30, 41, 59, 0.18);
}
html[data-mode="light"][data-theme^="minimal"] .faq-item {
  background: rgba(255, 255, 255, 0.64);
  border-color: rgba(30, 41, 59, 0.14);
}
html[data-mode="light"][data-theme^="minimal"] .faq-q__icon {
  border-color: rgba(30, 41, 59, 0.18);
  background: rgba(30, 41, 59, 0.08);
}
html[data-mode="light"][data-theme^="minimal"] .faq-q__icon::before,
html[data-mode="light"][data-theme^="minimal"] .faq-q__icon::after {
  background: rgba(30, 41, 59, 0.88);
}

/* ===== Media presence contract =====
 * A missing asset must switch the component to a content layout. It must not
 * preserve an image aspect ratio, a fixed media column, or a decorative slab.
 */
[data-media-state="absent"] {
  min-block-size: 0;
}
[data-media-state="absent"] > :is(
  [class$="__media"],
  [class$="__visual"],
  [class$="__preview"]
) {
  display: none !important;
}
[data-media-state="absent"] :is(
  [class$="__ph"],
  [class*="__placeholder"],
  [class*="--placeholder"]
) {
  display: none !important;
}

.promo-bento--no-media,
.bento-article--no-media {
  min-height: 0 !important;
  padding: 0;
}
.promo-bento--no-media .promo-bento__content,
.bento-article--no-media .bento-article__content {
  position: static;
  inset: auto;
  min-height: 100%;
  padding: var(--card-pad, 18px);
  align-content: start;
  color: var(--color-text);
}
.promo-bento--no-media :is(
  .promo-bento__title,
  .promo-bento__desc,
  .promo-bento__hi,
  .promo-bento__cta
),
.bento-article--no-media :is(
  .bento-article__title,
  .bento-article__summary,
  .bento-article__cta
) {
  color: var(--color-text);
  text-shadow: none;
}
.promo-bento--no-media .promo-bento__desc,
.bento-article--no-media :is(.bento-article__meta, .bento-article__summary) {
  color: var(--color-text-muted);
}
.promo-bento--no-media .promo-bento__bottom,
.bento-article--no-media .bento-article__cta {
  margin-top: auto;
}

.article-row--no-media,
.article-mag__featured--no-media,
.teaser-card--no-media,
.related-card--no-media,
.event-featured--no-media,
.slots-articleFeature--no-media,
.slot-game--no-media,
.slot-feature--no-media {
  grid-template-columns: minmax(0, 1fr);
}
.article-mag__featured--no-media,
.event-featured--no-media,
.slots-articleFeature--no-media,
.slot-game--no-media,
.slot-feature--no-media {
  min-height: 0;
}
.promo-masonry__featured--no-media .promo-masonry__body,
.article-mag__featured--no-media .article-mag__body,
.event-featured--no-media .event-featured__body,
.slots-articleFeature--no-media .slots-articleFeature__body,
.slot-game--no-media .slot-game__body,
.slot-feature--no-media .slot-feature__body,
.hot-game-featured--no-media .hot-game-featured__content,
.hot-game-media--no-media .hot-game-media__body {
  padding: clamp(16px, 2vw, 24px);
}
.teaser-card--no-media .teaser-card__body,
.related-card--no-media .related-card__body,
.slot-tile--no-media .slot-tile__body,
.slot-card--no-media .slot-card__body {
  min-height: 0;
}
.slot-card--no-media {
  grid-template-rows: auto;
}
.story-grid--no-media,
.about-split--no-media {
  grid-template-columns: minmax(0, 1fr);
}
.story-grid--no-media .story-grid__content,
.about-split--no-media .about-split__content {
  max-width: 78ch;
}
.story-v3__side--no-media {
  align-content: start;
}
.story-v3__side--no-media .story-kpis {
  margin-top: 0;
}

.app-banner--no-media {
  grid-template-columns: minmax(0, 1fr) 220px;
}
.app-banner--no-media.app-banner--no-qr {
  grid-template-columns: minmax(0, 1fr);
}
.app-banner--no-qr:not(.app-banner--no-media) {
  grid-template-columns: 320px minmax(0, 1fr);
}
.app-showcase--no-side {
  grid-template-columns: minmax(0, 1fr);
}
.app-showcase--no-side .app-showcase__content {
  max-width: 78ch;
}
.article-header--no-media .article-header__inner--cover {
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border-color: var(--card-border, rgba(255, 255, 255, 0.10));
  backdrop-filter: none;
}
.reader-hero--no-media {
  min-height: 0;
}
.reader-hero--no-media .reader-hero__kicker {
  color: var(--color-text-muted);
}
.reader-hero--no-media .reader-hero__title,
.reader-hero--no-media .reader-hero__meta {
  color: var(--color-text);
}

@media (max-width: 980px) {
  .promo-bento--no-media,
  .promo-bento--no-media:nth-child(1),
  .promo-bento--no-media:nth-child(2),
  .promo-bento--no-media:nth-child(6n + 3),
  .bento-article--no-media,
  .bento-article--no-media:nth-child(1),
  .bento-article--no-media:nth-child(2),
  .bento-article--no-media:nth-child(6n + 3) {
    min-height: 0 !important;
  }
  .app-banner--no-media,
  .app-banner--no-qr:not(.app-banner--no-media) {
    grid-template-columns: minmax(0, 1fr);
  }
}
html[data-mode="light"][data-theme^="minimal"] .faq-card__icon {
  border-color: rgba(30, 41, 59, 0.22);
  background: rgba(30, 41, 59, 0.10);
}
html[data-mode="light"][data-theme^="minimal"] .faq-card__icon::before,
html[data-mode="light"][data-theme^="minimal"] .faq-card__icon::after {
  background: rgba(30, 41, 59, 0.96);
}

/* Unify section-head right pill/button style (casino/slots/brand) */
html[data-mode="light"][data-theme^="minimal"] .section-head__right .pill,
html[data-mode="light"][data-theme^="minimal"] .section-head__right .pill--soft,
html[data-mode="light"][data-theme^="minimal"] .section-head__right .btn.btn--ghost.btn--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
  color: color-mix(in oklab, var(--color-primary) 70%, #7a3418);
  background: color-mix(in oklab, #ffffff 90%, var(--color-primary) 10%);
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, rgba(15, 23, 42, 0.16));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  text-shadow: none;
}
html[data-mode="light"][data-theme^="minimal"] .section-head__right .btn.btn--ghost.btn--sm:hover {
  color: color-mix(in oklab, var(--color-primary) 78%, #7a3418);
  background: color-mix(in oklab, #ffffff 84%, var(--color-primary) 16%);
  border-color: color-mix(in oklab, var(--color-primary) 46%, rgba(15, 23, 42, 0.2));
  transform: translateY(-1px);
}
html[data-mode="light"][data-theme="minimal_blue"] .section-head__right .pill,
html[data-mode="light"][data-theme="minimal_blue"] .section-head__right .pill--soft,
html[data-mode="light"][data-theme="minimal_blue"] .section-head__right .btn.btn--ghost.btn--sm {
  color: rgba(30, 58, 138, 0.94);
  background: rgba(239, 246, 255, 0.94);
  border-color: rgba(37, 99, 235, 0.30);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-head__right .pill,
html[data-mode="light"][data-theme="minimal_amber"] .section-head__right .pill--soft,
html[data-mode="light"][data-theme="minimal_amber"] .section-head__right .btn.btn--ghost.btn--sm {
  color: rgba(146, 64, 14, 0.94);
  background: rgba(255, 247, 228, 0.94);
  border-color: rgba(217, 119, 6, 0.30);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-head__right .pill,
html[data-mode="light"][data-theme="minimal_violet"] .section-head__right .pill--soft,
html[data-mode="light"][data-theme="minimal_violet"] .section-head__right .btn.btn--ghost.btn--sm {
  color: rgba(91, 33, 182, 0.94);
  background: rgba(245, 243, 255, 0.94);
  border-color: rgba(124, 58, 237, 0.30);
}
html[data-mode="dark"] .section-head__right .pill,
html[data-mode="dark"] .section-head__right .pill--soft,
html[data-mode="dark"] .section-head__right .btn.btn--ghost.btn--sm {
  color: rgba(241, 245, 249, 0.95);
  background: rgba(30, 41, 59, 0.60);
  border-color: rgba(148, 163, 184, 0.36);
  box-shadow: none;
}
html[data-mode="dark"] .section-head__right .btn.btn--ghost.btn--sm:hover {
  background: rgba(51, 65, 85, 0.72);
  border-color: rgba(148, 163, 184, 0.48);
}

/* Light minimal: improve readability in article cards meta/tags */
html[data-mode="light"][data-theme^="minimal"] .section-articles .article-card__meta,
html[data-mode="light"][data-theme^="minimal"] .section-articles .article-row__meta,
html[data-mode="light"][data-theme^="minimal"] .section-articles .article-mini__meta,
html[data-mode="light"][data-theme^="minimal"] .section-articles .article-timeline__meta {
  color: rgba(71, 85, 105, 0.96);
}
html[data-mode="light"][data-theme^="minimal"] .section-articles .article-pill {
  color: rgba(30, 41, 59, 0.94);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(30, 41, 59, 0.20);
}

/* Articles sidebar mini cards: avoid clipped shadow, use theme-specific backgrounds */
html[data-mode="dark"] .section-articles .article-mini {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-mode="light"] .section-articles .article-mini {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-articles .article-mini {
  background: rgba(255, 248, 232, 0.88);
  border-color: rgba(180, 120, 40, 0.16);
}
html[data-mode="light"][data-theme="minimal_blue"] .section-articles .article-mini {
  background: rgba(239, 246, 255, 0.90);
  border-color: rgba(37, 99, 235, 0.18);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-articles .article-mini {
  background: rgba(245, 243, 255, 0.90);
  border-color: rgba(124, 58, 237, 0.18);
}

/* Sports hero rail (v6): improve text contrast by mode/theme */
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .sports-rail__side {
  background: rgba(248, 250, 255, 0.82);
  border-right-color: rgba(30, 58, 138, 0.12);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .sports-rail__kicker,
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .sports-rail__title,
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .rail-item__text {
  color: rgba(30, 41, 59, 0.96);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .rail-item {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(30, 58, 138, 0.16);
  box-shadow: none;
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .rail-item .pill {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(30, 58, 138, 0.20);
  color: rgba(30, 58, 138, 0.92);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .rail-item__arrow {
  color: rgba(30, 58, 138, 0.66);
}

html[data-mode="dark"] .section-sports-hero .sports-rail__kicker,
html[data-mode="dark"] .section-sports-hero .sports-rail__title,
html[data-mode="dark"] .section-sports-hero .rail-item__text {
  color: rgba(245, 247, 255, 0.96);
}
html[data-mode="dark"] .section-sports-hero .rail-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-mode="dark"] .section-sports-hero .rail-item .pill {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(245, 247, 255, 0.94);
}
html[data-mode="dark"] .section-sports-hero .rail-item__arrow {
  color: rgba(245, 247, 255, 0.72);
}

/* Casino hero rail (v4): improve side-rail text contrast by mode/theme */
html[data-mode="light"][data-theme^="minimal"] .section-casino-hero .casino-rail__side {
  background: rgba(248, 250, 255, 0.82);
  border-right-color: rgba(30, 58, 138, 0.12);
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-hero .casino-rail__kicker,
html[data-mode="light"][data-theme^="minimal"] .section-casino-hero .casino-rail__title,
html[data-mode="light"][data-theme^="minimal"] .section-casino-hero .rail-item__text {
  color: rgba(30, 41, 59, 0.96);
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-hero .rail-item {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(30, 58, 138, 0.16);
  box-shadow: none;
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-hero .rail-item .pill {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(30, 58, 138, 0.20);
  color: rgba(30, 58, 138, 0.92);
}
html[data-mode="light"][data-theme^="minimal"] .section-casino-hero .rail-item__arrow {
  color: rgba(30, 58, 138, 0.66);
}

html[data-mode="dark"] .section-casino-hero .casino-rail__kicker,
html[data-mode="dark"] .section-casino-hero .casino-rail__title,
html[data-mode="dark"] .section-casino-hero .rail-item__text {
  color: rgba(245, 247, 255, 0.96);
}
html[data-mode="dark"] .section-casino-hero .rail-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-mode="dark"] .section-casino-hero .rail-item .pill {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(245, 247, 255, 0.94);
}
html[data-mode="dark"] .section-casino-hero .rail-item__arrow {
  color: rgba(245, 247, 255, 0.72);
}

/* Sports hero panel stats: coordinated palettes by light variants and dark mode */
html[data-mode="light"][data-theme="minimal_blue"] .section-sports-hero .sports-stat {
  background: rgba(239, 246, 255, 0.82);
  border-color: rgba(37, 99, 235, 0.20);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-sports-hero .sports-stat {
  background: rgba(255, 247, 228, 0.84);
  border-color: rgba(217, 119, 6, 0.20);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-sports-hero .sports-stat {
  background: rgba(245, 243, 255, 0.84);
  border-color: rgba(124, 58, 237, 0.20);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .sports-stat__label,
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .sports-stat__hint {
  color: var(--color-text-muted);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .sports-stat__value {
  color: rgba(30, 41, 59, 0.96);
}

html[data-mode="dark"] .section-sports-hero .sports-stat {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
html[data-mode="dark"] .section-sports-hero .sports-stat__label,
html[data-mode="dark"] .section-sports-hero .sports-stat__hint {
  color: rgba(203, 213, 225, 0.92);
}
html[data-mode="dark"] .section-sports-hero .sports-stat__value {
  color: rgba(248, 250, 252, 0.96);
}

/* Sports leagues v2 strip cards: remove clipped shadow, harmonize theme colors */
html[data-mode="dark"] .section-sports-leagues--v2 .league-pillCard {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-mode="light"][data-theme="minimal_blue"] .section-sports-leagues--v2 .league-pillCard {
  box-shadow: none;
  background: rgba(239, 246, 255, 0.90);
  border-color: rgba(37, 99, 235, 0.18);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-sports-leagues--v2 .league-pillCard {
  box-shadow: none;
  background: rgba(255, 247, 228, 0.90);
  border-color: rgba(217, 119, 6, 0.18);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-sports-leagues--v2 .league-pillCard {
  box-shadow: none;
  background: rgba(245, 243, 255, 0.90);
  border-color: rgba(124, 58, 237, 0.18);
}

/* FAQ plus icon hard fallback for light themes: ensure visible + */
html[data-mode="light"] .faq-q__icon {
  width: 24px;
  height: 24px;
  border-color: rgba(15, 23, 42, 0.24) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) inset;
}
html[data-mode="light"] .faq-q__icon::before,
html[data-mode="light"] .faq-q__icon::after {
  width: 12px;
  height: 2.4px;
  background: rgba(15, 23, 42, 0.9) !important;
}

/* FAQ compact v1: keep card colors readable but subtle */
html[data-mode="light"][data-theme^="minimal"] .section-faq--compact .faq-compact__item {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(2, 6, 23, 0.10);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.05);
}
html[data-mode="light"][data-theme^="minimal"] .section-faq--compact .faq-compact__q {
  color: rgba(15, 23, 42, 0.96);
}
html[data-mode="light"][data-theme^="minimal"] .section-faq--compact .faq-compact__a {
  color: rgba(71, 85, 105, 0.96);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-faq--compact .faq-compact__item {
  background: rgba(255, 247, 228, 0.86);
  border-color: rgba(217, 119, 6, 0.20);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-faq--compact .faq-compact__item {
  background: rgba(245, 243, 255, 0.86);
  border-color: rgba(124, 58, 237, 0.20);
}
html[data-mode="dark"] .section-faq--compact .faq-compact__item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
html[data-mode="dark"] .section-faq--compact .faq-compact__q {
  color: rgba(248, 250, 252, 0.96);
}
html[data-mode="dark"] .section-faq--compact .faq-compact__a {
  color: rgba(203, 213, 225, 0.94);
}

/* Sports hero badge: avoid invisible border on light cards */
html[data-mode="light"][data-theme^="minimal"] .section-sports-hero .sports-hero__badge {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(15, 23, 42, 0.18);
  color: rgba(30, 41, 59, 0.94);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-sports-hero .sports-hero__badge {
  background: rgba(255, 247, 228, 0.88);
  border-color: rgba(217, 119, 6, 0.24);
  color: rgba(146, 64, 14, 0.94);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-sports-hero .sports-hero__badge {
  background: rgba(245, 243, 255, 0.88);
  border-color: rgba(124, 58, 237, 0.24);
  color: rgba(91, 33, 182, 0.94);
}
html[data-mode="dark"] .section-sports-hero .sports-hero__badge {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(248, 250, 252, 0.95);
}

/* Sports glossary collapsed rows: add gentle themed color cues */
html[data-mode="light"][data-theme^="minimal"] .section-sports-glossary .glossary-item:not([open]) {
  background: rgba(248, 250, 252, 0.88);
  border-color: rgba(148, 163, 184, 0.30);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-glossary .glossary-item:not([open]) .glossary-item__term {
  color: rgba(30, 41, 59, 0.95);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-glossary .glossary-item:not([open]) .glossary-item__icon {
  background: rgba(239, 246, 255, 0.94);
  border-color: rgba(37, 99, 235, 0.22);
}
html[data-mode="light"][data-theme="minimal_amber"] .section-sports-glossary .glossary-item:not([open]) .glossary-item__icon {
  background: rgba(255, 247, 228, 0.92);
  border-color: rgba(217, 119, 6, 0.24);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-sports-glossary .glossary-item:not([open]) .glossary-item__icon {
  background: rgba(245, 243, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.24);
}
html[data-mode="dark"] .section-sports-glossary .glossary-item:not([open]) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
html[data-mode="dark"] .section-sports-glossary .glossary-item:not([open]) .glossary-item__term {
  color: rgba(241, 245, 249, 0.96);
}
html[data-mode="dark"] .section-sports-glossary .glossary-item:not([open]) .glossary-item__icon {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.32);
}

/* Sports articles teaser v1: improve meta spacing and pill/date readability */
html[data-mode="light"][data-theme^="minimal"] .section-sports-articles .sports-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: rgba(71, 85, 105, 0.94);
  line-height: 1.2;
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-articles .article-pill {
  color: rgba(30, 41, 59, 0.95);
  background: rgba(248, 250, 252, 0.92);
  border-color: rgba(148, 163, 184, 0.26);
  font-weight: 900;
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-articles .article-date {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
html[data-mode="light"][data-theme="minimal_amber"] .section-sports-articles .article-pill {
  color: rgba(146, 64, 14, 0.95);
  background: rgba(255, 247, 228, 0.92);
  border-color: rgba(217, 119, 6, 0.24);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-sports-articles .article-pill {
  color: rgba(91, 33, 182, 0.95);
  background: rgba(245, 243, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.24);
}
html[data-mode="dark"] .section-sports-articles .sports-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: rgba(203, 213, 225, 0.94);
  line-height: 1.2;
}
html[data-mode="dark"] .section-sports-articles .article-pill {
  color: rgba(241, 245, 249, 0.96);
  background: rgba(51, 65, 85, 0.74);
  border-color: rgba(148, 163, 184, 0.38);
}
html[data-mode="dark"] .section-sports-articles .article-date {
  display: inline-flex;
  align-items: center;
  color: rgba(203, 213, 225, 0.94);
  line-height: 1.2;
}

/* Slots articles teaser v1: restore pill/date readability in minimal themes */
html[data-mode="light"][data-theme^="minimal"] .section-slots-articles .slots-article__meta {
  color: rgba(71, 85, 105, 0.96);
}
html[data-mode="light"][data-theme^="minimal"] .section-slots-articles .article-pill {
  color: rgba(30, 41, 59, 0.94);
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(30, 41, 59, 0.20);
}
html[data-mode="dark"] .section-slots-articles .article-pill {
  color: rgba(241, 245, 249, 0.95);
  background: rgba(51, 65, 85, 0.62);
  border-color: rgba(148, 163, 184, 0.35);
}
html[data-mode="dark"] .section-slots-articles .article-date {
  color: rgba(203, 213, 225, 0.92);
}

/* Sports basics v1: strengthen description/example contrast on light minimal variants */
html[data-mode="light"][data-theme^="minimal"] .section-sports-basics .basic-card__desc {
  color: rgba(71, 85, 105, 0.96);
}
html[data-mode="light"][data-theme^="minimal"] .section-sports-basics .basic-card__example {
  color: rgba(30, 58, 138, 0.92);
  opacity: 1;
}
html[data-mode="light"][data-theme="minimal_amber"] .section-sports-basics .basic-card__example {
  color: rgba(146, 64, 14, 0.92);
}
html[data-mode="light"][data-theme="minimal_violet"] .section-sports-basics .basic-card__example {
  color: rgba(91, 33, 182, 0.92);
}
html[data-mode="dark"] .section-sports-basics .basic-card__example {
  color: rgba(224, 231, 255, 0.94);
}

.section-articles-empty {
  padding-top: 14px;
}
.articles-empty {
  border-radius: var(--card-radius-lg, 22px);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12));
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-bg) 90%, transparent),
    color-mix(in oklab, var(--color-bg) 70%, transparent)
  );
  box-shadow: var(--card-shadow-md, var(--shadow-md));
  backdrop-filter: blur(12px);
  padding: clamp(24px, 3vw, 40px);
  text-align: center;
}
.articles-empty__icon {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  margin-bottom: 10px;
  opacity: 0.9;
}
.articles-empty__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
}
.articles-empty__desc {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ===== 404 page ===== */
.not-found-page {
  display: grid;
  min-height: clamp(420px, 58vh, 680px);
}
.not-found {
  display: flex;
  align-items: center;
}
.not-found__card {
  position: relative;
  isolation: isolate;
  width: min(100%, 780px);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) clamp(22px, 6vw, 64px);
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--card-border, var(--color-border));
  border-radius: var(--card-radius-xl, 28px);
  background: linear-gradient(
    145deg,
    var(--card-bg, var(--color-surface)),
    color-mix(in oklab, var(--color-primary) 8%, var(--color-surface))
  );
  box-shadow: var(--card-shadow-md, var(--shadow-md));
}
.not-found__card::before {
  position: absolute;
  z-index: -1;
  width: min(72vw, 440px);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  content: "";
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary) 18%, transparent);
  filter: blur(72px);
  transform: translate(-50%, -58%);
  pointer-events: none;
}
.not-found__code {
  color: color-mix(in oklab, var(--color-primary) 72%, var(--color-text));
  font-size: clamp(72px, 15vw, 156px);
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 0.78;
  opacity: 0.2;
}
.not-found__brand {
  margin: clamp(20px, 3vw, 30px) 0 8px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.not-found__title {
  margin: 0;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
}
.not-found__body {
  max-width: 52ch;
  margin: 16px auto 0;
  color: var(--color-text-muted);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
}
.not-found__hint {
  display: block;
  margin-top: 6px;
  font-size: 0.9em;
}
.not-found__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 4vw, 32px);
}

@media (max-width: 640px) {
  .not-found-page {
    min-height: auto;
  }
  .not-found {
    padding: 32px 0;
  }
  .not-found__card {
    padding: 34px 20px;
    border-radius: var(--card-radius-lg, 22px);
  }
  .not-found__code {
    font-size: clamp(68px, 28vw, 104px);
  }
  .not-found__actions .btn {
    width: 100%;
  }
}

/* Final narrow-screen override: keep long translated copy out of cramped two-column cards. */
@media (max-width: 640px) {
  .sports-hero-panel__grid,
  .casino-hero-panel__grid,
  .slots-hero-panel__grid,
  .casino-entries,
  .section-slots-providers .providers-wall--slots {
    grid-template-columns: 1fr;
  }

  .sports-entries,
  .basics-grid,
  .risk-grid,
  .leagues-grid,
  .themes-grid,
  .vip-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 340px);
    align-items: start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .sports-entries::-webkit-scrollbar,
  .basics-grid::-webkit-scrollbar,
  .risk-grid::-webkit-scrollbar,
  .leagues-grid::-webkit-scrollbar,
  .themes-grid::-webkit-scrollbar,
  .vip-grid::-webkit-scrollbar {
    display: none;
  }

  .sports-entries > *,
  .basics-grid > *,
  .risk-grid > *,
  .leagues-grid > *,
  .themes-grid > *,
  .vip-grid > * {
    scroll-snap-align: start;
  }

}

/* Site DNA v3.2 compositional structural axes. */
html[data-hero-composition="center-stack"] :is(.hero-v2, .hero-v3__top, .hero-v4) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  text-align: center;
}

html[data-hero-composition="center-stack"] :is(.hero__actions, .hero__tags) {
  justify-content: center;
}

/* A stacked composition is a full-width structural row, not a shrink-to-fit
   centered card. Keep every direct region on the container track. */
html[data-hero-composition="center-stack"] :is(.hero-v2, .hero-v3__top, .hero-v4) > * {
  width: 100%;
  min-width: 0;
}

/* Use the available second row instead of leaving two large empty gutters. */
@media (min-width: 981px) {
  html[data-hero-composition="center-stack"] .hero-v4__right {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: stretch;
  }

  html[data-hero-composition="center-stack"] .hero-v4__right > * {
    height: 100%;
  }
}

html[data-hero-composition="rail-metrics"] :is(.hero-v2, .hero-v4) {
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
}

/* Legacy rail heroes reorder content after the metrics rail. Reverse the
   structural columns as well so the headline keeps the wider track. */
html[data-hero-style="rail"][data-hero-composition="rail-metrics"] :is(.hero-v2, .hero-v4) {
  grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.35fr);
}

html[data-hero-composition="bento-asymmetry"] :is(.hero-v2, .hero-v4) {
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  align-items: stretch;
}

/* Composition axes must yield to the base responsive hero contract. These
   rules live after the desktop axes so they cannot be re-overridden by source
   order on narrow viewports. */
@media (max-width: 980px) {
  html[data-hero-composition] :is(.hero-v2, .hero-v4),
  html[data-hero-style][data-hero-composition] :is(.hero-v2, .hero-v4) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-hero-composition="center-stack"] .hero-v4__right {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-content-grid="two-column"] :is(
  .features-grid,
  .categories-grid,
  .promos-grid,
  .security-grid,
  .vip-grid,
  .testimonials-grid
) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-content-grid="three-column"] :is(
  .features-grid,
  .categories-grid,
  .promos-grid,
  .security-grid,
  .vip-grid,
  .testimonials-grid
) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-content-grid="asymmetric"] :is(
  .features-grid,
  .categories-grid,
  .promos-grid,
  .security-grid,
  .vip-grid,
  .testimonials-grid
) {
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
}

html[data-content-grid="asymmetric"] :is(
  .features-grid,
  .categories-grid,
  .promos-grid,
  .security-grid,
  .vip-grid,
  .testimonials-grid
) > :first-child {
  grid-row: span 2;
}

html[data-content-grid="editorial-list"] :is(
  .features-grid,
  .categories-grid,
  .promos-grid,
  .security-grid,
  .vip-grid,
  .testimonials-grid
) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
  margin-inline: auto;
}

/* Content-grid axes describe desktop composition. They must not override the
   module-level responsive contract or leave auto-flow columns with explicit
   desktop tracks on phones. */
@media (max-width: 980px) {
  html[data-content-grid] :is(
    .features-grid,
    .promos-grid,
    .security-grid,
    .vip-grid,
    .testimonials-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-content-grid] .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-content-grid="asymmetric"] :is(
    .features-grid,
    .categories-grid,
    .promos-grid,
    .security-grid,
    .vip-grid,
    .testimonials-grid
  ) > :first-child {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  html[data-content-grid] :is(
    .features-grid,
    .categories-grid,
    .promos-grid,
    .security-grid,
    .vip-grid,
    .testimonials-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

@media (min-width: 901px) {
  html[data-nav-layout="centered"] .site-header__inner {
    display: flex;
    justify-content: space-between;
    justify-items: normal;
    gap: 16px;
  }

  html[data-nav-layout="centered"] .site-nav {
    flex: 1 1 auto;
  }

  html[data-nav-layout="centered"] .nav-menu {
    width: 100%;
    justify-content: center;
  }

  html[data-nav-layout="split-cta"] .nav-menu {
    flex: 1;
    justify-content: space-between;
  }

  html[data-nav-layout="compact-drawer"] .site-header__inner {
    min-height: 62px;
  }

  html[data-nav-layout="compact-drawer"] .nav-link {
    padding-inline: 8px;
    font-size: 0.9rem;
  }
}

html[data-responsive-behavior="adaptive-dense"] main {
  --section-space: clamp(38px, 5vw, 68px);
}

html[data-responsive-behavior="adaptive-dense"] :is(
  .features-grid,
  .categories-grid,
  .promos-grid,
  .security-grid,
  .vip-grid,
  .testimonials-grid
) {
  gap: clamp(10px, 1.4vw, 18px);
}

/* ========================================================================== */
/* Site DNA v3.3 structural Header system                                    */
/* ========================================================================== */

.header-system__utility,
.header-system__status {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: color-mix(in oklab, var(--color-primary) 12%, rgba(7, 10, 20, 0.82));
  font-size: 12px;
}
.volatility-compare .compare-card__pill[data-ui-token="description"] {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word !important;
}

.header-system__utility-inner,
.header-system__status-inner {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.header-system__status-inner {
  justify-content: center;
}

.header-system__status-inner > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 18px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
}

.header-system__status-inner > span:last-child {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-header-family="utility-main"],
html[data-header-family="status-data"] {
  --header-h: 96px;
}

.header-system--utility-main .header-system__main-row,
.header-system--status-data .header-system__main-row {
  padding-block: 8px;
}

.header-system__split-shell {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.header-system__desktop-nav .nav-list {
  overflow: visible;
}

.header-system__desktop-nav--left .nav-list {
  justify-content: flex-end;
}

.header-system__desktop-nav--right .nav-list {
  justify-content: flex-start;
}

.header-system__split-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.header-system__mobile-actions {
  display: none;
  align-items: center;
  margin-inline-start: auto;
}

.header-system--floating-capsule {
  top: 12px;
  left: var(--container-pad);
  right: var(--container-pad);
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.header-system--floating-capsule .header-system__container {
  max-width: 1320px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(7, 10, 20, 0.82);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  padding-inline: 18px;
}

.header-system--floating-capsule .site-header__inner {
  padding-block: 9px;
}

.header-system__search {
  min-width: clamp(240px, 26vw, 430px);
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.06);
  text-align: start;
}

.header-system__search kbd {
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  font: inherit;
  font-size: 11px;
}

.header-system__mega-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(920px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: rgba(7, 10, 20, 0.96);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: 160ms ease;
}

.header-system--mega-menu:hover .header-system__mega-panel,
.header-system--mega-menu:focus-within .header-system__mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.header-system--mega-menu.header-system--has-overflow-menu
  .header-system__mega-panel {
  display: none;
}

.header-system__mega-panel .nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  white-space: normal !important;
}

.header-system--transparent-overlay {
  background: linear-gradient(180deg, rgba(4, 7, 16, 0.68), transparent);
  border-bottom-color: transparent;
  backdrop-filter: none;
}

html[data-header-family="transparent-overlay"] {
  --header-h: 76px;
}

html[data-header-family="transparent-overlay"] body {
  padding-top: 0;
}

/* Transparent headers may layer over the homepage Hero background, but every
   ordinary page must reserve the measured navigation height before content. */
html[data-header-family="transparent-overlay"]
  main:not([data-page-shell="home"]) {
  padding-block-start: var(--header-h);
}

/* Overflow controls stay detached until desktop measurement proves that links
   do not fit. Keep the hidden rule as a fail-safe during later refits. */
.header-system .nav-item--overflow[hidden] {
  display: none !important;
}

/* Structural headers keep their real desktop geometry on ordinary laptop and
   desktop widths. The legacy 1600px drawer threshold remains available to
   older modules, while Site DNA families collapse at their own 1200px edge. */
@media (min-width: 1201px) {
  .header-system:not(.header-system--minimal-drawer) .nav-toggle,
  .header-system:not(.header-system--minimal-drawer) .nav-register {
    display: none;
  }

  .header-system:not(.header-system--minimal-drawer) .nav-menu {
    position: static;
    z-index: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
  }

  .header-system:not(.header-system--minimal-drawer) .nav-list {
    flex-direction: row;
    align-items: center;
  }

  .header-system:not(.header-system--minimal-drawer) .header-system__drawer-menu {
    display: none;
  }

  html[data-header-family="side-rail"] {
    --header-h: 0px;
  }

  html[data-header-family="side-rail"] body {
    padding-left: 268px;
  }

  .header-system--side-rail {
    width: 268px;
    right: auto;
    bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0;
  }

  .header-system--side-rail .header-system__container,
  .header-system--side-rail .header-system__rail-inner,
  .header-system--side-rail .header-system__rail-nav,
  .header-system--side-rail .header-system__rail-menu {
    width: 100%;
    height: 100%;
  }

  .header-system--side-rail .header-system__rail-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 26px 16px;
  }

  .header-system--side-rail .brand {
    padding: 0 8px 22px;
    border-bottom: 1px solid var(--color-border);
  }

  .header-system--side-rail .header-system__rail-menu,
  .header-system--side-rail .nav-list,
  .header-system--side-rail .nav-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* The generic structural desktop menu selector has three class-level
     specificity components. Keep the rail contract at least as specific so
     its menu can never fall back to the horizontal desktop row. */
  html[data-header-family="side-rail"] .header-system--side-rail .header-system__rail-menu,
  html[data-header-family="side-rail"] .header-system--side-rail .nav-list,
  html[data-header-family="side-rail"] .header-system--side-rail .nav-cta {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-header-family="side-rail"] .header-system--side-rail .header-system__rail-menu {
    position: static;
    width: 100%;
    gap: 12px;
  }

  .header-system--side-rail .header-system__rail-menu {
    padding-top: 22px;
    position: static;
    z-index: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
  }

  .header-system--side-rail .nav-list {
    flex: 0 0 auto;
    overflow: visible;
    white-space: normal !important;
  }

  .header-system--side-rail .nav-link {
    width: 100%;
  }

  .header-system--side-rail .nav-cta {
    margin-top: auto;
  }

  /* Keep structural desktop headers on one row without silently hiding links.
     JavaScript moves only the trailing items that do not fit into this compact
     overflow menu and restores them below the structural desktop breakpoint. */
  .header-system:not(.header-system--side-rail):not(.header-system--minimal-drawer)
    .nav-list--overflow-managed {
    overflow: visible;
  }

  .header-system .nav-item--overflow {
    position: relative;
    display: none;
    flex: 0 0 auto;
  }

  .header-system .nav-item--overflow:not([hidden]) {
    display: block;
  }

  .header-system .nav-overflow-toggle {
    min-width: 48px;
    justify-content: center;
    gap: 7px;
    padding-inline: 11px;
  }

  .header-system .nav-item--overflow-active > .nav-overflow-toggle {
    color: rgba(255, 255, 255, 0.98) !important;
    border-color: color-mix(
      in oklab,
      var(--color-primary) 65%,
      rgba(255, 255, 255, 0.16)
    );
    background: color-mix(
      in oklab,
      var(--color-primary) 20%,
      rgba(255, 255, 255, 0.06)
    );
  }

  .header-system .nav-overflow__dots {
    display: inline-block;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    transform: translateY(-1px);
  }

  .header-system .nav-item--overflow .nav-overflow-menu {
    position: absolute;
    z-index: 940;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    display: block;
    width: max-content;
    min-width: 250px;
    max-width: min(360px, calc(100vw - 2 * var(--container-pad)));
    max-height: min(560px, calc(100vh - 120px));
    margin: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(7, 10, 20, 0.98);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  }

  .header-system .nav-item--overflow:hover .nav-overflow-menu,
  .header-system .nav-item--overflow:focus-within .nav-overflow-menu,
  .header-system .nav-item--overflow[data-open] .nav-overflow-menu {
    max-height: min(560px, calc(100vh - 120px));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .header-system .nav-overflow-menu .nav-item {
    display: block;
    width: 100%;
  }

  .header-system .nav-overflow-menu .nav-link {
    display: flex;
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    padding: 9px 11px;
    white-space: normal !important;
    color: rgba(245, 247, 255, 0.94) !important;
    border: 0;
    border-radius: 10px;
  }

  .header-system .nav-overflow-menu .nav-link:hover,
  .header-system .nav-overflow-menu .nav-link--active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Four true geometry variants shared by every Header family. */
@media (min-width: 1201px) {
  html[data-header-variant="brand-emphasis"] .header-system {
    --header-brand-track: minmax(300px, 0.86fr);
  }

  html[data-header-variant="brand-emphasis"] .header-system .brand__name {
    font-size: 1.12rem;
    letter-spacing: -0.015em;
  }

  html[data-header-variant="brand-emphasis"] .header-system__main-row {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  }

  html[data-header-variant="brand-emphasis"] .header-system .brand__mark,
  html[data-header-variant="brand-emphasis"] .header-system .brand__logo {
    width: 56px;
    height: 56px;
  }

  html[data-header-variant="brand-emphasis"] .header-system .brand__mark {
    flex-basis: 56px;
  }

  html[data-header-variant="brand-emphasis"] :is(
    .header-system--utility-main,
    .header-system--status-data
  ) :is(.brand__mark, .brand__logo) {
    width: 52px;
    height: 52px;
  }

  html[data-header-variant="brand-emphasis"] :is(
    .header-system--utility-main,
    .header-system--status-data
  ) .brand__mark {
    flex-basis: 52px;
  }

  html[data-header-variant="nav-emphasis"] .header-system__container {
    max-width: 1840px;
  }

  html[data-header-variant="nav-emphasis"] .header-system__main-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  html[data-header-variant="nav-emphasis"] .header-system .site-nav,
  html[data-header-variant="nav-emphasis"] .header-system .nav-menu {
    width: 100%;
  }

  html[data-header-variant="nav-emphasis"] .header-system .nav-list {
    justify-content: center;
    gap: clamp(10px, 1.2vw, 22px);
  }

  html[data-header-family="side-rail"][data-header-variant="nav-emphasis"] body {
    padding-left: 304px;
  }

  html[data-header-family="side-rail"][data-header-variant="nav-emphasis"] .header-system--side-rail {
    width: 304px;
  }

  html[data-header-variant="action-emphasis"] .header-system .nav-cta .btn--primary {
    min-width: 150px;
    min-height: 48px;
  }

  html[data-header-variant="action-emphasis"] .header-system .brand__text {
    max-width: 170px;
  }

  html[data-header-variant="action-emphasis"] .header-system__split-shell {
    grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.2fr);
  }

  html[data-header-variant="action-emphasis"] .header-system--minimal-drawer .nav-toggle {
    min-width: 138px;
    justify-content: center;
  }

  html[data-header-family="side-rail"][data-header-variant="brand-emphasis"] .header-system--side-rail .brand {
    padding-block-end: 32px;
  }

  .header-system--search-first .header-system__main-row {
    display: grid;
    grid-template-columns: auto minmax(240px, 0.72fr) minmax(0, 1.28fr);
  }

  html[data-header-family="search-first"][data-header-variant="brand-emphasis"] .header-system__main-row {
    grid-template-columns: minmax(280px, 0.72fr) minmax(240px, 0.62fr) minmax(0, 1.16fr);
  }

  html[data-header-family="search-first"][data-header-variant="nav-emphasis"] .header-system__main-row {
    grid-template-columns: auto minmax(260px, 0.58fr) minmax(0, 1.42fr);
  }
}

@media (max-width: 1200px) {
  .header-system__desktop-nav {
    display: none;
  }

  .header-system__split-shell {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 0;
  }

  .header-system__split-shell > .brand {
    justify-self: start;
  }

  .header-system__split-right {
    justify-content: flex-end;
  }

  .header-system__mobile-actions {
    display: flex;
  }

  .header-system--side-rail .header-system__rail-inner {
    display: flex;
  }

  .header-system__mega-panel {
    display: none;
  }
}

@media (max-width: 720px) {
  .header-system__utility,
  .header-system__status,
  .header-system__search {
    display: none;
  }

  html[data-header-family="utility-main"],
  html[data-header-family="status-data"] {
    --header-h: 72px;
  }

  .header-system--floating-capsule {
    top: 6px;
    left: 8px;
    right: 8px;
  }
}

/* ========================================================================== */
/* Mobile release baseline                                                     */
/* ========================================================================== */

@media (max-width: 980px) {
  /* Interactive controls share one measurable mobile hit-area contract. */
  :where(
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [role="button"],
    .btn,
    .nav-toggle,
    .nav-link,
    .nav-register,
    .nav-login
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  .seo-plain__p,
  .seo-plain__expanded {
    font-size: 14px;
  }

  .seo-plain__summary {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .header-system .nav-register {
    max-width: 44vw;
  }

}

@media (max-width: 720px) {
  /* A center masthead must not grow when the nav-emphasis variant exposes the
     menu label inside a fixed 44px grid track. */
  .header-system--center-brand-split-nav .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    white-space: nowrap;
  }

  .header-system--center-brand-split-nav .nav-toggle__text {
    display: none;
  }

  /* The desktop side rail becomes an in-flow-safe top command bar on phones.
     A fixed bottom dock inevitably obscures page content while scrolling. */
  html[data-header-family="side-rail"] {
    --header-h: 72px;
  }

  html[data-header-family="side-rail"] body {
    padding-top: var(--header-h);
    padding-bottom: 0;
  }

  .header-system--side-rail {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    background: rgba(7, 10, 20, 0.94);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  }

  .header-system--side-rail .header-system__container {
    padding-inline: var(--container-pad);
  }

  .header-system--side-rail .header-system__rail-inner {
    min-height: 72px;
    padding: 8px 0;
  }

  .header-system--side-rail :is(.brand__mark, .brand__logo) {
    width: 42px;
    height: 42px;
  }

  .header-system--side-rail .brand__mark {
    flex-basis: 42px;
  }

  .header-system--side-rail .header-system__rail-menu {
    top: 72px;
    bottom: auto;
    left: var(--container-pad);
    right: var(--container-pad);
    width: auto;
    max-height: calc(100svh - 92px);
  }

  html[data-header-family="mega-menu"] {
    --header-h: 120px;
  }

  .header-system--mega-menu .header-system__container {
    grid-template-rows: 64px 56px;
  }
}

@media (max-width: 560px) {
  /* Long synthetic strings are intentional stress input. Keep the semantic
     title intact while enforcing a predictable five-line visual budget. */
  .hero--structural .hero-system__title,
  .hero--structural .hero-system__title--long,
  .hero--structural .hero-system__title--extra-long {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    font-size: clamp(28px, 8.4vw, 34px);
    line-height: 1.04;
  }

  .hero--structural .hero-system__subtitle {
    margin-top: 14px;
  }

  .hero--structural .hero-system__description {
    margin-top: 10px;
  }

  .hero--structural[data-mobile-pattern] .hero-system {
    gap: 18px;
    padding-block: 20px;
  }

  /* Image/mosaic stages have fixed mobile envelopes. Their internal labels
     clamp instead of stretching a three-row stage beyond the Hero budget. */
  .hero--structural[data-mobile-pattern="stage-first"] :is(
    .hero-bento-stage,
    .hero-mosaic
  ) {
    min-height: 320px;
    height: clamp(320px, 105vw, 420px);
    max-height: 420px;
    overflow: hidden;
  }

  .hero-bento-stage__primary strong,
  .hero-mosaic__tile strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: clamp(20px, 6.4vw, 28px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .hero-bento-stage__metric :is(strong, span) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }

  .hero-bento-stage__metric strong {
    -webkit-line-clamp: 2;
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.08;
  }

  .hero-bento-stage__metric span {
    -webkit-line-clamp: 3;
  }

  .hero--structural {
    max-height: 1400px;
  }
}

/* Content integrity contract
   --------------------------
   Structural Hero copy has no disclosure control, so line-clamping it hides
   published content with no way to recover it. Keep the full semantic text
   visible; compactness is owned by the generation contract and typography. */
.hero--structural :is(
  .hero-system__title,
  .hero-system__title--long,
  .hero-system__title--extra-long,
  .hero-system__subtitle,
  .hero-system__description,
  .hero-proof blockquote,
  .hero-bento-stage__primary strong,
  .hero-mosaic__tile strong,
  .hero-bento-stage__metric strong,
  .hero-bento-stage__metric span
) {
  display: block !important;
  overflow: visible !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

.hero--structural .hero-system__tags {
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 560px) {
  .hero--structural {
    max-height: none !important;
  }

  .hero--structural[data-mobile-pattern="stage-first"] :is(
    .hero-bento-stage,
    .hero-mosaic
  ) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 980px) {
  .header-system--search-first .header-system__search {
    min-height: 44px !important;
  }

  .vip-miniSteps li {
    font-size: 14px !important;
  }
}

@media (min-width: 1601px) {
  .header-system--minimal-drawer .nav-toggle,
  .header-system--minimal-drawer .nav-register {
    display: inline-flex;
  }

  .header-system--minimal-drawer .nav-menu {
    position: fixed;
    z-index: 920;
    top: var(--header-h);
    left: auto;
    right: var(--container-pad);
    width: min(420px, calc(100vw - 2 * var(--container-pad)));
    max-height: calc(100vh - var(--header-h) - 20px);
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background: rgba(7, 10, 20, 0.96);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    overflow: auto;
  }

  .header-system--minimal-drawer .nav-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .header-system--minimal-drawer .nav-list {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ========================================================================== */
/* Site DNA v3.3 structural Hero system                                      */
/* ========================================================================== */

.hero--structural {
  min-height: clamp(590px, 72vh, 780px);
  display: grid;
  align-items: center;
  color: rgba(245, 247, 255, 0.96);
  background: #070a14;
}

.hero--structural .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(7, 10, 20, 0.9), rgba(7, 10, 20, 0.46));
}

.hero-system {
  position: relative;
  z-index: 2;
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  grid-template-areas: "copy stage";
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
  padding-block: clamp(48px, 7vw, 88px);
}

.hero-system__copy {
  grid-area: copy;
  min-width: 0;
}

.hero-system__stage {
  grid-area: stage;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
}

.hero-system__kicker {
  width: fit-content;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  font-weight: 800;
}

.hero-system__title {
  max-width: 18ch;
  margin: 0;
  font: var(--title-weight, 900) clamp(38px, 5.4vw, 78px) / 0.98 var(--font-display, var(--font-sans));
  letter-spacing: var(--hero-title-letter-spacing, -0.045em);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hero-system__title--long {
  max-width: 22ch;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.02;
  letter-spacing: var(--hero-title-letter-spacing, -0.038em);
}

html[data-hero-composition="bento-primary-left"] .hero-system__title--long,
html[data-hero-composition="bento-primary-right"] .hero-system__title--long,
html[data-hero-composition="dashboard-console"] .hero-system__title--long {
  max-width: 100%;
  font-size: clamp(32px, 3.2vw, 46px);
}

.hero-system__title--extra-long {
  max-width: 24ch;
  font-size: clamp(32px, 3.25vw, 48px);
  line-height: 1.04;
  letter-spacing: var(--hero-title-letter-spacing, -0.032em);
}

.hero-system__subtitle {
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 750;
}

.hero-system__description {
  max-width: 66ch;
  margin: 14px 0 0;
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.72;
}

.hero-system__actions,
.hero-system__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.hero-system__stage > *,
.hero-device,
.hero-proof,
.hero-asymrail,
.hero-console,
.hero-chapter,
.hero-searchbox,
.hero-searchbox__results,
.hero-offers > article,
.hero-compare__card,
.hero-timeline > article,
.hero-mosaic__tile,
.hero-type-stage {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.hero-split-media,
.hero-fullbleed-media,
.hero-poster-stage,
.hero-bento-stage__primary {
  background-position: center;
  background-size: cover;
}

.hero-split-media {
  position: relative;
  isolation: isolate;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 18px;
  border-radius: 34px;
  background-color: color-mix(in oklab, var(--color-primary) 28%, #111827);
}

.hero-split-media--fallback {
  background:
    radial-gradient(circle at 22% 24%, color-mix(in oklab, var(--color-primary) 76%, white) 0 8%, transparent 9%),
    linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 38%, #111827), #111827 64%);
}

.hero-split-media--fallback::before,
.hero-split-media--fallback::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  pointer-events: none;
}

.hero-split-media--fallback::before {
  width: 68%;
  aspect-ratio: 1;
  top: -24%;
  right: -18%;
}

.hero-split-media--fallback::after {
  width: 38%;
  aspect-ratio: 1;
  left: 10%;
  bottom: 18%;
}

.hero-split-media__caption {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(7, 10, 20, 0.76);
  backdrop-filter: blur(14px);
}

.hero-split-media__caption span,
.hero-split-media__caption small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-fullbleed-media {
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 28px;
  border-radius: 36px;
  background-color: color-mix(in oklab, var(--color-primary) 24%, #090d18);
}

.hero-fullbleed-media strong {
  font-size: clamp(54px, 9vw, 128px);
  line-height: 0.75;
  opacity: 0.72;
}

.hero-editorial-cover {
  min-height: 460px;
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 3px;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 34%, #111827), #070a14);
}

.hero-editorial-cover__issue {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.hero-editorial-cover > strong {
  max-width: 12ch;
  font: 900 clamp(38px, 5vw, 68px) / 0.92 var(--font-display, var(--font-sans));
  letter-spacing: -0.05em;
}

.hero-editorial-cover__lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-editorial-cover__lines span {
  padding-top: 10px;
  border-top: 3px solid var(--color-primary);
  font-size: 12px;
}

.hero-manifesto-mark {
  min-height: 420px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "quote metric" "quote label";
  align-items: end;
  padding: 28px;
  border-width: 1px 0;
  background: transparent;
  box-shadow: none;
}

.hero-manifesto-mark > span {
  grid-area: quote;
  align-self: start;
  color: var(--color-primary);
  font: 900 clamp(110px, 16vw, 240px) / 0.72 Georgia, serif;
}

.hero-manifesto-mark > strong {
  grid-area: metric;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.78;
  text-align: end;
}

.hero-manifesto-mark > small {
  grid-area: label;
  padding-top: 14px;
  text-align: end;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Manifesto decoration hierarchy contract
   ----------------------------------------
   Quotes and proof numerals are supporting marks. Keep them inside a clipped
   stage, below the headline's visual weight, and unable to establish Hero
   height on their own. */
.hero--centered-manifesto .hero-manifesto-mark {
  min-height: 0;
  height: clamp(220px, 34vh, 340px);
  max-height: 340px;
  overflow: hidden;
  align-self: center;
}

.hero--centered-manifesto .hero-manifesto-mark > span {
  max-width: 1.1em;
  overflow: hidden;
  font-size: clamp(64px, 8vw, 112px);
  line-height: 0.78;
  opacity: 0.28;
  transform: translate(-0.06em, -0.04em);
}

.hero--centered-manifesto .hero-manifesto-mark > strong {
  max-width: 8ch;
  overflow: hidden;
  justify-self: end;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.84;
  opacity: 0.46;
}

.hero--centered-manifesto .hero-manifesto-mark > small {
  max-width: 28ch;
  justify-self: end;
  overflow: hidden;
  opacity: 0.58;
}

@media (max-width: 560px) {
  .hero--centered-manifesto[data-mobile-pattern="layered"] .hero-system__stage > .hero-manifesto-mark {
    min-height: 0;
    height: min(300px, 42svh);
    max-height: 300px;
    align-self: start;
  }

  .hero--centered-manifesto .hero-manifesto-mark > span {
    font-size: clamp(56px, 19vw, 82px);
    opacity: 0.24;
  }

  .hero--centered-manifesto .hero-manifesto-mark > strong {
    font-size: clamp(36px, 13vw, 58px);
    opacity: 0.42;
  }
}

.hero-dashboard {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
}

.hero-dashboard__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hero-dashboard__metrics > span {
  display: grid;
  gap: 3px;
  min-height: 112px;
  align-content: end;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

.hero-dashboard__metrics strong {
  font-size: clamp(28px, 4vw, 48px);
}

.hero-dashboard__rows {
  display: grid;
  gap: 8px;
}

.hero-dashboard__rows > span {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  padding: 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.hero-dashboard__rows i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: color-mix(in oklab, var(--color-primary) 18%, transparent);
}

.hero-dashboard__rows b,
.hero-dashboard__rows em {
  position: relative;
  z-index: 1;
}

.hero-bento-stage {
  min-height: 450px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-bento-stage__primary {
  grid-row: 1 / -1;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  border-radius: 28px;
  background-color: color-mix(in oklab, var(--color-primary) 24%, #111827);
}

.hero-bento-stage__primary strong {
  font-size: clamp(24px, 3.4vw, 46px);
}

.hero-bento-stage__metric {
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.07);
}

.hero-bento-stage__metric strong {
  font-size: clamp(26px, 3vw, 42px);
}

.hero-poster-stage {
  min-height: 500px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px;
  border-radius: 6px;
  background-color: color-mix(in oklab, var(--color-primary) 32%, #111827);
}

.hero-poster-stage > span,
.hero-poster-stage > small {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.hero-poster-stage > strong {
  align-self: center;
  justify-self: center;
  font-size: clamp(108px, 18vw, 260px);
  line-height: 0.72;
  mix-blend-mode: screen;
}

.hero-device {
  overflow: hidden;
  border-radius: 30px;
  transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);
}

.hero-device__bar,
.hero-console__head {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-device__bar > span,
.hero-console__head > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
}

.hero-device__bar strong,
.hero-console__head code {
  margin-left: auto;
}

.hero-device__screen {
  display: grid;
  gap: 10px;
  padding: 22px;
}

.hero-device__metric {
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 900;
}

.hero-device__metric small {
  display: block;
  color: rgba(226, 232, 240, 0.7);
  font-size: 12px;
}

.hero-device__row,
.hero-console__line,
.hero-searchbox__results > span,
.hero-asymrail__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
}

.hero-compare,
.hero-offers,
.hero-proof__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hero-compare__card,
.hero-offers > article {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
}

.hero-compare__card > span,
.hero-offers > article > span {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
}

.hero-searchbox {
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 999px;
}

.hero-searchbox kbd {
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font: inherit;
}

.hero-searchbox__results,
.hero-asymrail,
.hero-console {
  display: grid;
  gap: 9px;
  padding: 16px;
  border-radius: 24px;
}

.hero-timeline {
  position: relative;
  display: grid;
  gap: 16px;
}

.hero-timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: color-mix(in oklab, var(--color-primary) 70%, transparent);
}

.hero-timeline > article {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
}

.hero-timeline > article > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 900;
}

.hero-proof {
  margin: 0;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 32px;
}

.hero-proof blockquote {
  margin: 0;
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.18;
}

.hero-proof figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.hero-proof__metrics > span {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}

.hero-asymrail__metric {
  display: grid;
  padding: 12px;
}

.hero-asymrail__metric strong {
  font-size: clamp(32px, 4vw, 52px);
}

.hero-asymrail__row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.hero-mosaic {
  min-height: 430px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.hero-mosaic__tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 18px;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
}

.hero-mosaic__tile--primary {
  grid-row: 1 / -1;
}

.hero-mosaic__tile--fallback {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: space-between;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in oklab, var(--color-primary) 72%, white) 0 7%, transparent 8%),
    radial-gradient(circle at 78% 30%, color-mix(in oklab, var(--color-accent, var(--color-primary)) 54%, transparent) 0 18%, transparent 38%),
    linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 32%, #111827), #101626 72%);
}

.hero-mosaic__tile--fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom right, black, transparent 78%);
}

.hero-mosaic__visual {
  position: relative;
  z-index: 1;
  min-height: 210px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  transform: rotate(-4deg) translate(8%, -2%);
}

.hero-mosaic__visual i {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.045));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.hero-mosaic__visual i:first-child {
  grid-row: 1 / -1;
}

.hero-mosaic__visual i:nth-child(3) {
  background: color-mix(in oklab, var(--color-primary) 42%, rgba(255, 255, 255, 0.08));
}

.hero-mosaic__eyebrow,
.hero-mosaic__tile--fallback > strong {
  position: relative;
  z-index: 2;
}

.hero-mosaic__eyebrow {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(7, 10, 20, 0.64);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-mosaic__tile strong {
  font-size: clamp(22px, 3vw, 42px);
}

.hero-type-stage {
  min-height: 440px;
  display: grid;
  align-content: space-between;
  padding: 28px;
  border-radius: 0;
  border-width: 1px 0;
  background: transparent;
  box-shadow: none;
}

.hero-type-stage strong {
  font-size: clamp(96px, 16vw, 220px);
  line-height: 0.72;
  opacity: 0.2;
}

.hero-console__head code,
.hero-console__line {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hero-console__line b {
  color: var(--color-primary);
}

.hero-console__line em {
  font-style: normal;
  opacity: 0.5;
}

.hero-chapter {
  min-height: 420px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 22px;
  padding: 28px;
  border-radius: 30px;
}

.hero-chapter > span {
  font-size: clamp(80px, 12vw, 170px);
  font-weight: 950;
  line-height: 0.72;
  color: color-mix(in oklab, var(--color-primary) 68%, white);
}

.hero-chapter strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(25px, 4vw, 48px);
}

/* Composition contracts: every supported id changes actual geometry. */
html[data-hero-composition="copy-left-media-right"] .hero-system {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  grid-template-areas: "copy stage";
}

html[data-hero-composition="media-left-copy-right"] .hero-system {
  grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
  grid-template-areas: "stage copy";
}

html[data-hero-composition="copy-overlay-bottom"] .hero-system,
html[data-hero-composition="copy-overlay-center"] .hero-system,
html[data-hero-composition="poster-with-floating-card"] .hero-system {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "overlay";
  min-height: 620px;
}

html[data-hero-composition="copy-overlay-bottom"] .hero-system__copy,
html[data-hero-composition="copy-overlay-center"] .hero-system__copy,
html[data-hero-composition="poster-with-floating-card"] .hero-system__copy,
html[data-hero-composition="copy-overlay-bottom"] .hero-system__stage,
html[data-hero-composition="copy-overlay-center"] .hero-system__stage,
html[data-hero-composition="poster-with-floating-card"] .hero-system__stage {
  grid-area: overlay;
}

html[data-hero-composition="copy-overlay-bottom"] .hero-system__copy,
html[data-hero-composition="poster-with-floating-card"] .hero-system__copy {
  align-self: end;
  z-index: 3;
  width: min(680px, 55%);
  margin: 0 0 24px 24px;
  padding: 24px;
  border-radius: 26px;
  background: rgba(7, 10, 20, 0.76);
  backdrop-filter: blur(14px);
}

html[data-hero-composition="copy-overlay-bottom"] .hero-system__stage,
html[data-hero-composition="poster-with-floating-card"] .hero-system__stage {
  z-index: 1;
  justify-self: end;
  width: min(560px, 43%);
}

html[data-hero-composition="copy-overlay-center"] .hero-system__copy {
  align-self: center;
  justify-self: center;
  z-index: 3;
  max-width: 900px;
  text-align: center;
}

html[data-hero-composition="copy-overlay-center"] .hero-system__stage {
  z-index: 1;
  opacity: 0.2;
  filter: saturate(0.72) contrast(0.88);
  pointer-events: none;
}

html[data-hero-composition="copy-overlay-center"] .hero-system__title,
html[data-hero-composition="copy-overlay-center"] .hero-system__subtitle,
html[data-hero-composition="copy-overlay-center"] .hero-system__description {
  margin-inline: auto;
}

html[data-hero-composition="copy-overlay-center"] .hero-system__actions,
html[data-hero-composition="copy-overlay-center"] .hero-system__tags {
  justify-content: center;
}

html[data-hero-composition="metrics-under-copy"] .hero-system,
html[data-hero-composition="stacked-proof-band"] .hero-system,
html[data-hero-composition="editorial-narrow-copy"] .hero-system,
html[data-hero-composition="media-edge-to-edge"] .hero-system {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "stage";
}

html[data-hero-composition="metrics-under-copy"] .hero-system__stage,
html[data-hero-composition="stacked-proof-band"] .hero-system__stage {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-hero-composition="editorial-narrow-copy"] .hero-system__copy {
  width: min(860px, 100%);
  margin-inline: auto;
  text-align: center;
}

html[data-hero-composition="editorial-narrow-copy"] .hero-system__title,
html[data-hero-composition="editorial-narrow-copy"] .hero-system__subtitle,
html[data-hero-composition="editorial-narrow-copy"] .hero-system__description {
  margin-inline: auto;
}

html[data-hero-composition="editorial-narrow-copy"] .hero-system__actions,
html[data-hero-composition="editorial-narrow-copy"] .hero-system__tags {
  justify-content: center;
}

html[data-hero-composition="metrics-side-rail"] .hero-system {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

html[data-hero-composition="dashboard-console"] .hero-system {
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
}

html[data-hero-composition="bento-primary-left"] .hero-system {
  grid-template-columns: minmax(420px, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "stage copy";
}

html[data-hero-composition="bento-primary-right"] .hero-system {
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  grid-template-areas: "copy stage";
}

html[data-hero-composition="asymmetric-65-35"] .hero-system {
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
}

html[data-hero-composition="asymmetric-35-65"] .hero-system {
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
  grid-template-areas: "stage copy";
}

html[data-hero-composition="media-edge-to-edge"] .hero-system__stage {
  width: calc(100% + (2 * var(--container-pad)));
  margin-inline: calc(-1 * var(--container-pad));
}

html[data-hero-composition="poster-with-floating-card"] .hero-system__stage {
  min-height: 620px;
}

.hero--centered-manifesto .hero-system__copy {
  text-align: center;
}

.hero--centered-manifesto :is(
  .hero-system__title,
  .hero-system__subtitle,
  .hero-system__description
) {
  margin-inline: auto;
}

.hero--centered-manifesto :is(
  .hero-system__kicker,
  .hero-system__actions,
  .hero-system__tags
) {
  margin-inline: auto;
  justify-content: center;
}

/* Existing Hero modules participate in the same structural composition ids. */
html[data-hero-composition="media-left-copy-right"] :is(.hero__inner, .hero-v2, .hero-v4) > :first-child,
html[data-hero-composition="asymmetric-35-65"] :is(.hero__inner, .hero-v2, .hero-v4) > :first-child {
  order: 2;
}

html[data-hero-composition="media-left-copy-right"] :is(.hero__inner, .hero-v2, .hero-v4) > :last-child,
html[data-hero-composition="asymmetric-35-65"] :is(.hero__inner, .hero-v2, .hero-v4) > :last-child {
  order: 1;
}

html[data-hero-composition="metrics-under-copy"] :is(.hero__inner, .hero-v2, .hero-v3__top, .hero-v4),
html[data-hero-composition="stacked-proof-band"] :is(.hero__inner, .hero-v2, .hero-v3__top, .hero-v4),
html[data-hero-composition="editorial-narrow-copy"] :is(.hero__inner, .hero-v2, .hero-v3__top, .hero-v4) {
  grid-template-columns: minmax(0, 1fr);
}

html[data-hero-composition="asymmetric-65-35"] :is(.hero__inner, .hero-v2, .hero-v4) {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
}

html[data-hero-composition="asymmetric-35-65"] :is(.hero__inner, .hero-v2, .hero-v4) {
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
}

html[data-hero-composition="editorial-narrow-copy"] :is(.hero-minimal, .hero__content, .hero-v2__content, .hero-v3__headline) {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 980px) {
  .hero--structural {
    min-height: auto;
  }

  .hero-system,
  html[data-hero-composition] .hero-system {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "stage";
    gap: 24px;
    padding-block: 42px;
  }

  html[data-hero-composition] .hero-system__copy,
  html[data-hero-composition] .hero-system__stage {
    width: 100%;
    margin: 0;
    grid-area: auto;
  }

  html[data-hero-composition] .hero-system__copy {
    grid-row: 1;
  }

  html[data-hero-composition] .hero-system__stage {
    grid-row: 2;
  }

  .hero-system__title {
    max-width: 100%;
    font-size: clamp(34px, 10vw, 58px);
  }

  .hero-system__title--long {
    font-size: clamp(30px, 8.4vw, 46px);
  }

  .hero-system__title--extra-long {
    font-size: clamp(28px, 7.6vw, 42px);
  }

  .hero-mosaic {
    min-height: 380px;
  }

  .hero-split-media,
  .hero-fullbleed-media,
  .hero-poster-stage,
  .hero-editorial-cover,
  .hero-manifesto-mark,
  .hero-bento-stage {
    min-height: clamp(340px, 62vw, 460px);
  }
}

@media (max-width: 560px) {
  .hero-compare,
  .hero-offers,
  .hero-proof__metrics,
  html[data-hero-composition] .hero-system__stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(150px, auto));
  }

  .hero-mosaic__tile--primary {
    grid-row: auto;
  }

  .hero-bento-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, auto) repeat(3, minmax(100px, auto));
  }

  .hero-bento-stage__primary {
    grid-row: auto;
  }

  .hero-editorial-cover__lines,
  .hero-dashboard__metrics {
    grid-template-columns: 1fr;
  }

  .hero-split-media__caption {
    grid-template-columns: 1fr;
  }

  .hero-manifesto-mark {
    grid-template-columns: 1fr;
    grid-template-areas: "quote" "metric" "label";
  }

  .hero-chapter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  html[data-responsive-behavior="stack-early"] :is(
    .hero-v2,
    .hero-v4,
    .features-grid,
    .categories-grid,
    .promos-grid,
    .security-grid,
    .vip-grid,
    .testimonials-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  html[data-responsive-behavior="stack-late"] :is(
    .hero-v2,
    .hero-v4,
    .features-grid,
    .categories-grid,
    .promos-grid,
    .security-grid,
    .vip-grid,
    .testimonials-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-responsive-behavior="mobile-priority"] :is(
    .features-grid,
    .categories-grid,
    .promos-grid,
    .security-grid,
    .vip-grid,
    .testimonials-grid
  ) {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 360px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding-bottom: 10px;
  }

  html[data-responsive-behavior="mobile-priority"] :is(
    .features-grid,
    .categories-grid,
    .promos-grid,
    .security-grid,
    .vip-grid,
    .testimonials-grid
  ) > * {
    scroll-snap-align: start;
  }
}

/* ========================================================================== */
/* Site DNA v3.3 mobile structural differentiation                            */
/* ========================================================================== */

@media (min-width: 721px) and (max-width: 1200px) {
  html[data-header-family="floating-capsule"] {
    --header-h: 88px;
  }
}

@media (max-width: 720px) {
  html[data-header-family] {
    --header-h: 68px;
  }

  .header-system .header-system__container {
    width: 100%;
  }

  .header-system :is(.site-header__inner, .header-system__split-shell) {
    min-height: 68px;
    padding-block: 8px;
  }

  .header-system .brand {
    min-width: 0;
  }

  .header-system :is(.brand__mark, .brand__logo) {
    width: 42px;
    height: 42px;
  }

  .header-system .brand__mark {
    flex-basis: 42px;
  }

  .header-system .nav-register {
    max-width: 34vw;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-system .nav-toggle {
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
  }

  html[data-header-variant="brand-emphasis"] .header-system :is(.brand__mark, .brand__logo) {
    width: 46px;
    height: 46px;
  }

  html[data-header-variant="brand-emphasis"] .header-system .brand__mark {
    flex-basis: 46px;
  }

  html[data-header-variant="nav-emphasis"] .header-system .nav-register {
    display: none;
  }

  html[data-header-variant="nav-emphasis"] .header-system .nav-toggle__text {
    display: inline;
  }

  html[data-header-variant="action-emphasis"] .header-system .nav-register {
    min-width: min(34vw, 132px);
    justify-content: center;
  }

  /* Center-brand becomes a true centered mobile masthead. */
  html[data-header-family="center-brand-split-nav"] {
    --header-h: 72px;
  }

  .header-system--center-brand-split-nav .header-system__split-shell {
    min-height: 72px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }

  .header-system--center-brand-split-nav .header-system__split-shell > .brand {
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
  }

  .header-system--center-brand-split-nav .header-system__split-right {
    grid-column: 3;
    justify-self: end;
  }

  .header-system--center-brand-split-nav .nav-register {
    display: none;
  }

  /* Utility and status families retain their second information layer. */
  html[data-header-family="utility-main"],
  html[data-header-family="status-data"] {
    --header-h: 96px;
  }

  .header-system--utility-main .header-system__utility,
  .header-system--status-data .header-system__status {
    display: block;
    color: rgba(245, 247, 255, 0.94);
  }

  .header-system--utility-main .header-system__utility-inner,
  .header-system--status-data .header-system__status-inner {
    min-height: 28px;
    overflow: hidden;
    gap: 0;
  }

  .header-system--utility-main .header-system__utility-inner > span {
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-system--status-data .header-system__status-inner > span {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
    overflow: hidden;
    white-space: nowrap;
  }

  .header-system--status-data .header-system__status-inner > span:nth-child(n + 3) {
    display: none;
  }

  .header-system--utility-main .header-system__main-row,
  .header-system--status-data .header-system__main-row {
    min-height: 68px;
    padding-block: 6px;
  }

  /* Floating navigation keeps an inset capsule instead of becoming a bar. */
  html[data-header-family="floating-capsule"] {
    --header-h: 76px;
  }

  .header-system--floating-capsule {
    top: 6px;
    left: 8px;
    right: 8px;
  }

  .header-system--floating-capsule .header-system__container {
    padding-inline: 12px;
    border-radius: 999px;
  }

  .header-system--floating-capsule .header-system__main-row {
    min-height: 60px;
    padding-block: 6px;
  }

  /* A desktop side rail becomes a bottom dock on phones. */
  html[data-header-family="side-rail"] {
    --header-h: 0px;
  }

  html[data-header-family="side-rail"] body {
    padding-top: 0;
    padding-bottom: 86px;
  }

  .header-system--side-rail {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    background: rgba(7, 10, 20, 0.9);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(18px);
  }

  .header-system--side-rail .header-system__container {
    padding-inline: 10px;
  }

  .header-system--side-rail .header-system__rail-inner {
    min-height: 58px;
    justify-content: space-between;
    padding: 6px 0;
  }

  .header-system--side-rail :is(.brand__mark, .brand__logo) {
    width: 38px;
    height: 38px;
  }

  .header-system--side-rail .brand__mark {
    flex-basis: 38px;
  }

  .header-system--side-rail .nav-register {
    display: none;
  }

  .header-system--side-rail .nav-toggle__text {
    display: inline;
  }

  .header-system--side-rail .header-system__rail-menu {
    top: auto;
    bottom: 74px;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - 104px);
    margin: 0;
  }

  /* Search-first uses a real second row, with the search control visible. */
  html[data-header-family="search-first"] {
    --header-h: 120px;
  }

  .header-system--search-first .header-system__main-row {
    min-height: 120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "search search";
    gap: 7px 12px;
    padding-block: 7px;
  }

  .header-system--search-first .brand {
    grid-area: brand;
  }

  .header-system--search-first .header-system__search {
    grid-area: search;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    display: grid;
    padding-block: 5px;
  }

  .header-system--search-first .site-nav {
    grid-area: actions;
  }

  /* Minimal drawer intentionally removes the duplicated mobile CTA. */
  html[data-header-family="minimal-drawer"] {
    --header-h: 64px;
  }

  .header-system--minimal-drawer .header-system__main-row {
    min-height: 64px;
    padding-block: 6px;
  }

  .header-system--minimal-drawer .brand__text,
  .header-system--minimal-drawer .nav-register {
    display: none;
  }

  .header-system--minimal-drawer .nav-toggle__text {
    display: inline;
  }

  /* Transparent navigation remains layered over the Hero on mobile. */
  html[data-header-family="transparent-overlay"] {
    --header-h: 76px;
  }

  html[data-header-family="transparent-overlay"] body {
    padding-top: 0;
  }

  .header-system--transparent-overlay {
    background: linear-gradient(180deg, rgba(4, 7, 16, 0.88), rgba(4, 7, 16, 0.38) 74%, transparent);
    box-shadow: none;
  }

  .header-system--transparent-overlay .header-system__main-row {
    min-height: 76px;
  }

  .header-system--transparent-overlay .nav-menu {
    top: 76px;
    max-height: calc(100vh - 96px);
  }

  html[data-header-family="transparent-overlay"] .hero-system {
    padding-block-start: 108px;
  }
}

@media (max-width: 980px) {
  .hero--structural[data-mobile-pattern] .hero-system {
    gap: clamp(18px, 5vw, 28px);
    padding-block: clamp(30px, 7vw, 46px);
  }

  /* Visual-first families lead with their defining media or interface. */
  .hero--structural[data-mobile-pattern="stage-first"] .hero-system {
    grid-template-areas: "stage" "copy";
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-system__stage {
    grid-row: 1;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-system__copy {
    grid-row: 2;
  }

  /* Layered families preserve an actual shared media/copy canvas. */
  .hero--structural[data-mobile-pattern="layered"] .hero-system {
    min-height: 640px;
    grid-template-areas:
      "mobile-stage"
      "mobile-copy";
    grid-template-rows: minmax(170px, 0.32fr) auto;
    isolation: isolate;
    padding-block: 24px;
  }

  .hero--structural[data-mobile-pattern="layered"] :is(.hero-system__copy, .hero-system__stage) {
    width: 100%;
    margin: 0;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__stage {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    overflow: hidden;
    border-radius: 28px;
    opacity: 0.54;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__stage::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
      radial-gradient(circle at 78% 14%, color-mix(in oklab, var(--color-primary) 48%, transparent), transparent 34%),
      linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.08) 42% 43%, transparent 43%);
    pointer-events: none;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__stage > * {
    min-height: 100%;
    height: 100%;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__copy {
    z-index: 3;
    grid-area: mobile-copy;
    grid-row: 2;
    align-self: end;
    padding: clamp(20px, 6vw, 30px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 26px;
    background: rgba(7, 10, 20, 0.76);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(16px);
  }

  .hero--centered-manifesto[data-mobile-pattern="layered"] .hero-system__stage,
  .hero--minimal-typography[data-mobile-pattern="layered"] .hero-system__stage {
    opacity: 0.34;
    filter: saturate(0.74);
  }

  .hero--centered-manifesto[data-mobile-pattern="layered"] .hero-system__stage::after,
  .hero--minimal-typography[data-mobile-pattern="layered"] .hero-system__stage::after {
    background:
      radial-gradient(circle at 24% 12%, color-mix(in oklab, var(--color-primary) 82%, white), transparent 32%),
      linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 48%);
  }

  /* Chapter opener keeps a compact visual chapter card before the headline. */
  .hero--structural[data-mobile-pattern="chapter-split"] .hero-system {
    grid-template-areas: "stage" "copy";
  }

  .hero--structural[data-mobile-pattern="chapter-split"] .hero-system__stage {
    grid-row: 1;
  }

  .hero--structural[data-mobile-pattern="chapter-split"] .hero-system__copy {
    grid-row: 2;
    padding-inline-start: clamp(18px, 6vw, 36px);
    border-inline-start: 4px solid var(--color-primary);
  }

  .hero--structural[data-mobile-pattern="chapter-split"] .hero-chapter {
    min-height: 260px;
  }

  /* Proof/offer/timeline families retain copy priority but become swipeable rails. */
  .hero--structural[data-mobile-pattern="rail-after"] .hero-system__stage {
    width: calc(100% + (2 * var(--container-pad)));
    margin-inline: calc(-1 * var(--container-pad));
    padding: 18px var(--container-pad) 8px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .hero--structural[data-mobile-pattern="rail-after"] :is(
    .hero-compare,
    .hero-offers,
    .hero-timeline,
    .hero-proof__metrics
  ) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    gap: 12px;
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .hero--structural[data-mobile-pattern="rail-after"] :is(
    .hero-compare,
    .hero-offers,
    .hero-timeline,
    .hero-proof__metrics
  ) > * {
    scroll-snap-align: start;
  }

  .hero--structural[data-mobile-pattern="rail-after"] .hero-timeline::before {
    display: none;
  }

  .hero--testimonial-proof[data-mobile-pattern="rail-after"] .hero-system__stage {
    grid-template-columns: min(82vw, 340px) min(82vw, 340px);
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
  }
}

@media (max-width: 560px) {
  .hero--structural[data-mobile-pattern="stage-first"] :is(
    .hero-split-media,
    .hero-editorial-cover,
    .hero-poster-stage
  ) {
    min-height: 300px;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-mosaic {
    min-height: 300px;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-mosaic__tile--primary {
    grid-row: 1 / -1;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-mosaic__visual {
    min-height: 150px;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-bento-stage {
    min-height: 300px;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-bento-stage__primary {
    grid-row: 1 / -1;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-dashboard__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-dashboard__metrics > span {
    min-height: 86px;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system {
    min-height: 610px;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__title {
    font-size: clamp(32px, 9.2vw, 46px);
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__title--long {
    font-size: clamp(28px, 7.6vw, 40px);
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__title--extra-long {
    font-size: clamp(25px, 6.8vw, 36px);
  }

  .hero--structural[data-mobile-pattern="chapter-split"] .hero-chapter {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 230px;
  }
}

/* Structural Hero viewport budget contract
   ----------------------------------------
   The outer Hero and its structural canvas previously both contributed large
   vertical padding. Vertical compositions then added a full-size stage below
   an unrestricted copy block, producing 1100-1440px desktop Heroes and a
   retained 620px mobile stage. Keep the stage visible while budgeting copy,
   evidence and whitespace as one composition. */
.hero--structural {
  padding-block: 0;
}

.hero--structural .hero-system__subtitle,
.hero--structural .hero-system__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.hero--structural .hero-system__subtitle {
  -webkit-line-clamp: 2;
}

.hero--structural .hero-system__description {
  -webkit-line-clamp: 3;
}

.hero--structural .hero-proof blockquote {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.hero--structural .hero-system__tags {
  max-height: 34px;
  overflow: hidden;
}

@media (min-width: 981px) {
  .hero--structural .hero-system {
    min-height: min(760px, calc(100svh - 72px));
    padding-block: clamp(32px, 4.8vh, 52px);
  }

  html[data-hero-composition="copy-overlay-bottom"] .hero--structural .hero-system__stage,
  html[data-hero-composition="copy-overlay-center"] .hero--structural .hero-system__stage,
  html[data-hero-composition="poster-with-floating-card"] .hero--structural .hero-system__stage {
    max-height: min(640px, calc(100svh - 120px));
    overflow: hidden;
  }

  html[data-hero-composition="metrics-under-copy"] .hero--structural .hero-system,
  html[data-hero-composition="stacked-proof-band"] .hero--structural .hero-system,
  html[data-hero-composition="editorial-narrow-copy"] .hero--structural .hero-system,
  html[data-hero-composition="media-edge-to-edge"] .hero--structural .hero-system {
    min-height: min(900px, calc(100svh - 64px));
    grid-template-rows: minmax(0, auto) clamp(190px, 28vh, 300px);
    align-content: center;
    gap: 22px;
    padding-block: 28px;
  }

  html[data-hero-composition="metrics-under-copy"] .hero--structural .hero-system__stage,
  html[data-hero-composition="stacked-proof-band"] .hero--structural .hero-system__stage,
  html[data-hero-composition="editorial-narrow-copy"] .hero--structural .hero-system__stage,
  html[data-hero-composition="media-edge-to-edge"] .hero--structural .hero-system__stage {
    min-height: 0;
    height: clamp(190px, 28vh, 300px);
    max-height: 300px;
    align-content: stretch;
    overflow: hidden;
  }

  html[data-hero-composition="metrics-under-copy"] .hero--structural .hero-system__stage > *,
  html[data-hero-composition="stacked-proof-band"] .hero--structural .hero-system__stage > *,
  html[data-hero-composition="editorial-narrow-copy"] .hero--structural .hero-system__stage > *,
  html[data-hero-composition="media-edge-to-edge"] .hero--structural .hero-system__stage > * {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  html[data-hero-composition="metrics-under-copy"] .hero--centered-manifesto .hero-system,
  html[data-hero-composition="stacked-proof-band"] .hero--centered-manifesto .hero-system,
  html[data-hero-composition="editorial-narrow-copy"] .hero--centered-manifesto .hero-system,
  html[data-hero-composition="media-edge-to-edge"] .hero--centered-manifesto .hero-system {
    grid-template-rows: minmax(0, auto) clamp(160px, 22vh, 220px);
  }

  html[data-hero-composition="metrics-under-copy"] .hero--centered-manifesto .hero-system__stage,
  html[data-hero-composition="stacked-proof-band"] .hero--centered-manifesto .hero-system__stage,
  html[data-hero-composition="editorial-narrow-copy"] .hero--centered-manifesto .hero-system__stage,
  html[data-hero-composition="media-edge-to-edge"] .hero--centered-manifesto .hero-system__stage {
    height: clamp(160px, 22vh, 220px);
    max-height: 220px;
  }
}

@media (max-width: 980px) {
  .hero--structural[data-mobile-pattern] .hero-system {
    padding-block: clamp(20px, 5vw, 30px);
  }

  html[data-hero-composition="copy-overlay-bottom"] .hero--structural[data-mobile-pattern] .hero-system__stage,
  html[data-hero-composition="copy-overlay-center"] .hero--structural[data-mobile-pattern] .hero-system__stage,
  html[data-hero-composition="poster-with-floating-card"] .hero--structural[data-mobile-pattern] .hero-system__stage,
  .hero--structural[data-mobile-pattern="stage-first"] .hero-system__stage {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .hero--structural[data-mobile-pattern="layered"] .hero-system {
    min-height: clamp(560px, 78svh, 660px);
    padding-block: 18px;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__copy {
    padding: clamp(18px, 5vw, 24px);
  }

  .hero--structural[data-mobile-pattern] .hero-system__actions,
  .hero--structural[data-mobile-pattern] .hero-system__tags {
    margin-top: 14px;
  }
}

/* Light-mode contrast contract
   ----------------------------
   Pale Site DNA themes use semantic foregrounds while deliberate dark
   Header, Hero and image-overlay compositions retain their light text. */
html[data-mode="light"] :is(
  .seo-plain__summary,
  .seo-link__arrow,
  .seo-card__cta,
  .entry-hero__cta,
  .entry-card__cta,
  .entry-mini__cta,
  .league-pillCard__cta,
  .league-featured__cta,
  .league-card__cta,
  .sports-teaser__cta,
  .sports-promo__cta,
  .sports-promoB__cta,
  .support-card__cta,
  .slots-catChip__arrow,
  .slots-catTile__cta,
  .slots-catCard__cta,
  .slot-rankRow__arrow,
  .slots-articleMini__cta,
  .slots-articleCard__cta,
  .limit-card__range,
  .limit-card__cta,
  .casino-promo__cta,
  .casino-teaser__cta
) {
  color: var(--color-action-text);
}

html[data-mode="light"][data-btn-style="outline"]
  .hero--structural .btn--primary {
  color: color-mix(in oklab, var(--color-primary) 60%, #ffffff);
  border-color: color-mix(in oklab, var(--color-primary) 64%, rgba(255, 255, 255, 0.48));
}

/* Outline buttons normally assume a pale page surface. Legacy image Heroes
   and the minimal dark Header are explicit dark-surface islands, so preserve
   the outline style while switching their action foreground contract. */
html[data-mode="light"][data-btn-style="outline"]
  .hero--light-text .btn--primary {
  color: var(--color-on-dark);
  background: rgba(7, 10, 20, 0.24);
  border-color: rgba(255, 255, 255, 0.48);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

html[data-mode="light"][data-btn-style="outline"]
  .hero--light-text .btn--primary:hover {
  background: rgba(7, 10, 20, 0.42);
  border-color: rgba(255, 255, 255, 0.64);
}

/* Small structural-Hero accent labels are real text, not decoration. */
html[data-mode="light"] .hero--structural :is(
  .hero-compare__card > span,
  .hero-offers > article > span
) {
  color: color-mix(in oklab, var(--color-primary) 60%, #ffffff);
}

html[data-mode="light"]:is(
  [data-theme="minimal_blue"],
  [data-theme="minimal_amber"],
  [data-theme="minimal_violet"]
) .hero-timeline > article > span {
  color: #111827;
}

/* Mobile audit root-cause guards
   --------------------------------
   This block follows the minimal-theme surface rules. Its more specific Hero
   selectors also survive the generic mobile shorthands below. */
@media (max-width: 560px) {
  /* Content-first rails still need enough of their visual proof in the first
     viewport. Two supporting lines per block preserve hierarchy without
     weakening the five-line headline stress budget. */
  .hero--structural[data-mobile-pattern="rail-after"] .hero-system__subtitle,
  .hero--structural[data-mobile-pattern="rail-after"] .hero-system__description {
    -webkit-line-clamp: 2;
  }
}

/* Final mobile launch guards live at the end of the cascade so structural
   family rules cannot reduce the shared accessibility and Hero budgets. */
@media (max-width: 980px) {
  /* The overlay Header is 76px tall. Preserve one 20px rhythm unit below it
     so the first heading never enters the fixed navigation layer. */
  html[data-header-family="transparent-overlay"]
    .hero--structural[data-mobile-pattern] .hero-system {
    padding-block-start: calc(var(--header-h) + 20px);
  }

  html :is(
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [role="button"],
    .btn,
    .nav-toggle,
    .nav-link,
    .nav-register,
    .nav-login
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  .seo-plain__p,
  .seo-plain__expanded {
    font-size: 14px;
  }

  .seo-plain__summary {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .header-system .nav-toggle,
  .header-system .nav-register {
    min-width: 44px;
    min-height: 44px;
  }

  .header-system .nav-register {
    max-width: 44vw;
  }

}

@media (max-width: 720px) {
  .header-system--center-brand-split-nav .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    white-space: nowrap;
  }

  html[data-header-variant="nav-emphasis"]
    .header-system--center-brand-split-nav .nav-toggle__text,
  .header-system--center-brand-split-nav .nav-toggle__text {
    display: none;
  }

  html[data-header-family="side-rail"] {
    --header-h: 72px;
  }

  html[data-header-family="side-rail"] body {
    padding-top: var(--header-h);
    padding-bottom: 0;
  }

  .header-system--side-rail {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    background: rgba(7, 10, 20, 0.94);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  }

  .header-system--side-rail .header-system__container {
    padding-inline: var(--container-pad);
  }

  .header-system--side-rail .header-system__rail-inner {
    min-height: 72px;
    padding: 8px 0;
  }

  .header-system--side-rail :is(.brand__mark, .brand__logo) {
    width: 42px;
    height: 42px;
  }

  .header-system--side-rail .brand__mark {
    flex-basis: 42px;
  }

  .header-system--side-rail .header-system__rail-menu {
    top: 72px;
    bottom: auto;
    left: var(--container-pad);
    right: var(--container-pad);
    width: auto;
    max-height: calc(100svh - 92px);
  }

}

@media (max-width: 560px) {
  .hero--structural .hero-system__title,
  .hero--structural .hero-system__title--long,
  .hero--structural .hero-system__title--extra-long {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    font-size: clamp(28px, 8.4vw, 34px);
    line-height: 1.04;
  }

  .hero--structural .hero-system__subtitle {
    margin-top: 14px;
  }

  .hero--structural .hero-system__description {
    margin-top: 10px;
  }

  .hero--structural[data-mobile-pattern] .hero-system {
    gap: 18px;
    padding-block: 20px;
  }

  .hero--structural[data-mobile-pattern="stage-first"] :is(
    .hero-bento-stage,
    .hero-mosaic
  ) {
    min-height: 320px;
    height: clamp(320px, 105vw, 420px);
    max-height: 420px;
    overflow: hidden;
  }

  .hero-bento-stage__primary strong,
  .hero-mosaic__tile strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: clamp(20px, 6.4vw, 28px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .hero-bento-stage__metric :is(strong, span) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }

  .hero-bento-stage__metric strong {
    -webkit-line-clamp: 2;
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.08;
  }

  .hero-bento-stage__metric span {
    -webkit-line-clamp: 3;
  }

  .hero--structural {
    max-height: 1400px;
  }
}

/* Brand-logo and mobile visual polish
   -----------------------------------
   Real brand marks use very different aspect ratios. Preserve those ratios in
   the Header/Footer, remove the redundant generated short name, and keep the
   most visual mobile Hero families compact enough to reveal the real offer. */
.brand:has(> .brand__logo) .brand__text {
  display: none;
}

.brand__logo,
html[data-header-family][data-header-variant] .header-system .brand img.brand__logo {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  max-width: 190px;
  max-height: 52px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

:is(
  .footer-brand__logo,
  .footer-row__logo,
  .footer-center__logo,
  .footer-cols__logo,
  .footer-split__logo,
  .footer-arcade__logo
) img {
  width: auto;
  height: auto;
  max-width: 210px;
  max-height: 58px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1600px) {
  .header-system .nav-menu[data-surface="header-menu"][data-surface-tone="dark"] {
    background: #070a14;
    backdrop-filter: none;
  }

  .header-system .nav-menu[data-surface="header-menu"][data-surface-tone="light"] {
    background: #f8fafc;
    backdrop-filter: none;
  }
}

@media (max-width: 720px) {
  .header-system .brand__logo,
  html[data-header-variant="brand-emphasis"] .header-system .brand__logo,
  .header-system--side-rail .brand__logo,
  html[data-header-family][data-header-variant] .header-system .brand img.brand__logo {
    width: auto;
    height: auto;
    max-width: min(38vw, 148px);
    max-height: 46px;
  }

  .header-system--floating-capsule .brand__logo {
    max-width: min(34vw, 132px);
    max-height: 42px;
  }

  .hero--offer-stack .hero-system__copy {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background: rgba(7, 10, 20, 0.76);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(12px);
  }
}

@media (max-width: 360px) {
  html[data-header-family][data-header-variant] .header-system .brand img.brand__logo {
    max-width: 32vw;
  }
}

@media (max-width: 560px) {
  .hero--structural[data-mobile-pattern="stage-first"] .hero-system {
    gap: 14px;
    padding-block: 14px 22px;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-system__stage {
    max-height: 310px;
    overflow: hidden;
  }

  .hero--structural[data-mobile-pattern="stage-first"] :is(
    .hero-mosaic,
    .hero-bento-stage,
    .hero-poster-stage
  ) {
    min-height: 0;
    height: 270px;
    max-height: 270px;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-device {
    min-height: 0;
    height: 310px;
    max-height: 310px;
  }

  .hero--structural[data-mobile-pattern="stage-first"] :is(
    .hero-mosaic__tile strong,
    .hero-bento-stage__primary strong
  ) {
    font-size: clamp(18px, 5.4vw, 22px);
    line-height: 1.1;
  }

  .hero--structural[data-mobile-pattern="stage-first"] .hero-bento-stage__metric strong {
    font-size: clamp(20px, 5.8vw, 24px);
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system {
    min-height: 520px;
    grid-template-rows: minmax(120px, 0.24fr) auto;
  }

  .hero--structural[data-mobile-pattern="layered"] .hero-system__copy {
    padding: 20px;
  }

  /* GD8 and Fun葡京 use a dark full-bleed image behind a layered copy card.
     Keep a small media reveal without reserving the generic 120px lead row. */
  .hero--structural:is(
    [data-brand-code="hk-gd8.com"],
    [data-brand-code="funpujing-hk.com"]
  )[data-mobile-pattern="layered"] .hero-system {
    min-height: 0;
    grid-template-rows: minmax(32px, 0.08fr) auto;
    gap: 12px;
    padding-block: 12px 20px;
  }
}

.promotion-detail-header__inner {
  max-width: 920px;
  padding: clamp(24px, 4vw, 52px) 0 20px;
}

.promotion-detail-header__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.promotion-detail-header__tag,
.promotion-detail-header__highlight {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.promotion-detail-header__highlight {
  border-color: color-mix(in srgb, var(--color-primary) 48%, transparent);
  color: var(--color-primary);
}

.promotion-detail-header__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.08;
}

.promotion-detail-header__subtitle,
.promotion-detail-header__summary {
  max-width: 760px;
  margin: 14px 0 0;
}

.promotion-detail-header__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
}

.promotion-detail-header__summary {
  color: var(--color-text-muted);
  line-height: 1.75;
}

.promotion-detail-header__validity {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.promotion-detail-header__validity-label {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--color-text);
}

.promotion-detail-body,
.promotion-terms-list,
.promotion-rule-card,
.promotion-summary {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.promotion-detail-body {
  padding: clamp(22px, 4vw, 40px);
  line-height: 1.8;
}

.promotion-detail-body h2:first-child {
  margin-top: 0;
}

.promotion-detail-body h2:not(:first-child) {
  margin-top: 1.8em;
}

.promotion-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.promotion-rule-card,
.promotion-terms-list,
.promotion-summary {
  padding: 22px;
}

.promotion-rule-card h3,
.promotion-terms-list h2,
.promotion-summary h2 {
  margin-top: 0;
}

.promotion-rule-card ul,
.promotion-rule-card ol,
.promotion-terms-list ol {
  margin-bottom: 0;
  padding-inline-start: 1.25rem;
  line-height: 1.7;
}

.promotion-rule-card dl,
.promotion-summary dl {
  margin: 0;
}

.promotion-rule-card dl div,
.promotion-summary dl div {
  display: grid;
  grid-template-columns: minmax(100px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.promotion-rule-card dt,
.promotion-summary dt {
  font-weight: 800;
}

.promotion-rule-card dd,
.promotion-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.promotion-terms-list {
  margin-top: 16px;
}

.promotion-summary {
  position: sticky;
  top: calc(var(--sticky-offset, 84px) + 16px);
}

.promotion-summary .btn {
  margin-top: 20px;
}

.promotion-summary__back {
  display: block;
  margin-top: 14px;
  text-align: center;
}

@media (max-width: 760px) {
  .promotion-rule-grid {
    grid-template-columns: 1fr;
  }

  .promotion-detail-header__validity,
  .promotion-rule-card dl div,
  .promotion-summary dl div {
    display: block;
  }

  .promotion-rule-card dd,
  .promotion-summary dd {
    margin-top: 4px;
  }

  .promotion-summary {
    position: static;
  }
}
.brand-home-link {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.brand-home-link:hover,
.brand-home-link:focus-visible {
  color: var(--color-secondary);
}

.brand-home-reference {
  padding-top: 8px;
  padding-bottom: 28px;
  color: var(--color-text-muted, var(--color-text));
  font-size: 0.9375rem;
}

.brand-home-reference p {
  margin: 0;
}


/* ===== assets/css/surfaces.css ===== */
/* Module-owned semantic surfaces
   ============================== */

[data-surface="header"].site-header.header-system {
  color: var(--surface-text);
  background: var(--surface-bg-glass);
  border-color: var(--surface-border);
}

[data-surface="header"].site-header.header-system :is(
  .brand__name,
  .brand__short,
  .brand__code,
  .nav-link,
  .nav-toggle,
  .nav-toggle__text,
  .header-system__search,
  .header-system__search kbd
) {
  color: var(--surface-text) !important;
}

[data-surface="header"].site-header.header-system
  .nav-toggle__icon::before,
[data-surface="header"].site-header.header-system
  .nav-toggle__icon::after {
  background: var(--surface-text);
}

[data-surface="header"].site-header.header-system .nav-link:hover {
  color: var(--surface-text) !important;
  background: var(--surface-interactive-hover);
  border-color: var(--surface-border);
}

[data-surface="header"].site-header.header-system .nav-link--active {
  color: var(--surface-text) !important;
  background: var(--surface-interactive-active);
  border-color: var(--surface-control-border);
}

[data-surface="header"].site-header.header-system :is(
  .nav-toggle,
  .header-system__search,
  .header-system__search kbd
) {
  background: var(--surface-control-bg);
  border-color: var(--surface-control-border);
}

[data-surface="header"].site-header.header-system .btn--primary {
  color: var(--surface-action-text) !important;
  background: var(--surface-action-bg);
  border-color: var(--surface-action-border);
  text-shadow: none;
}

[data-surface="header"].site-header.header-system .nav-cta {
  color: var(--surface-text);
  background: var(--surface-control-bg);
  border-color: var(--surface-border);
}

[data-surface="header"].site-header.header-system[data-header-family="floating-capsule"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-surface="header"].site-header.header-system[data-header-family="floating-capsule"]
  .header-system__container {
  background: var(--surface-elevated);
  border-color: var(--surface-border);
}

[data-surface="header"].site-header.header-system[data-header-family="transparent-overlay"] {
  background: linear-gradient(180deg, var(--surface-bg-glass), transparent);
  border-color: transparent;
  box-shadow: none;
}

.header-system [data-surface="header-menu"],
.header-system [data-surface="header-status"] {
  color: var(--surface-text);
  background: var(--surface-bg-glass);
  border-color: var(--surface-border);
}

.header-system [data-surface="header-menu"] :is(
  .nav-link,
  .btn--ghost,
  .nav-toggle
),
.header-system [data-surface="header-status"] :is(span, strong) {
  color: var(--surface-text) !important;
}

.hero--structural[data-surface="hero"] {
  color: var(--surface-text);
  background: var(--surface-bg);
}

.hero--structural[data-surface="hero"] :is(
  .hero-system__description,
  .hero-system__subtitle
) {
  color: var(--surface-text-muted);
}

.hero--structural[data-surface="hero"] :is(
  .hero-system__kicker,
  .hero-system__stage > *,
  .hero-searchbox,
  .hero-searchbox__results,
  .hero-timeline > article,
  .hero-compare__card,
  .hero-offers > article
) {
  border-color: var(--surface-border);
}

.hero--structural [data-surface="hero-stage"] {
  color: var(--surface-text);
}

/* Content-priority mobile Hero contract. Copy is the default first region;
   only compact, explicitly visual content may promote the stage. Actions move
   directly behind H1 so the primary CTA remains a first-screen decision. */
@media (max-width: 980px) {
  .hero--structural[data-mobile-pattern="copy-first"] .hero-system {
    grid-template-areas: "copy" "stage";
  }

  .hero--structural[data-mobile-pattern="copy-first"] .hero-system__copy {
    grid-row: 1;
  }

  .hero--structural[data-mobile-pattern="copy-first"] .hero-system__stage {
    grid-row: 2;
    min-height: 0;
  }

  .hero--structural[data-mobile-pattern] .hero-system__copy {
    display: grid;
    align-content: start;
  }

  .hero--structural[data-mobile-pattern] .hero-system__kicker {
    order: 1;
  }

  .hero--structural[data-mobile-pattern] .hero-system__title {
    order: 2;
  }

  .hero--structural[data-mobile-pattern] .hero-system__actions {
    order: 3;
    margin-top: 16px;
  }

  .hero--structural[data-mobile-pattern] .hero-system__actions .btn--primary {
    order: -1;
  }

  .hero--structural[data-mobile-pattern] .hero-system__subtitle {
    order: 4;
  }

  .hero--structural[data-mobile-pattern] .hero-system__description {
    order: 5;
  }

  .hero--structural[data-mobile-pattern] .hero-system__tags {
    order: 6;
  }

  .hero--structural[data-mobile-content-density="long"] .hero-system__stage {
    max-height: min(300px, 38svh);
    overflow: hidden;
  }

  .hero--chapter-opener[data-mobile-pattern] .hero-chapter > span {
    font-size: clamp(48px, 14vw, 64px);
    opacity: 0.3;
  }
}


/* === Tidy promotions module: uniform aligned grid === */
.section-promos--masonry .promo-masonry {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}
.section-promos--masonry .promo-masonry__side {
  display: contents;
}
.section-promos--masonry .promo-masonry__featured {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
}
.section-promos--masonry .promo-masonry__card {
  display: flex;
  flex-direction: column;
}
.section-promos--masonry .promo-masonry__media--featured {
  height: 200px;
}
.section-promos--masonry .promo-masonry__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.section-promos--masonry .promo-masonry__top {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.section-promos--masonry .promo-masonry__body .btn {
  margin-top: auto;
  align-self: flex-start;
}
.section-promos--masonry .promo-masonry__desc { margin: 0; }
@media (max-width: 980px) {
  .section-promos--masonry .promo-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .section-promos--masonry .promo-masonry {
    grid-template-columns: 1fr;
  }
  .section-promos--masonry .promo-masonry__featured {
    grid-column: auto;
  }
}