/* ===== 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);

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

/* Mobile container padding */
@media (max-width: 767px) {
  :root {
    --container-pad: 15px;
    --section-pad-y: 32px;
    --section-pad-y-sm: 24px;
    --header-h: 68px;
  }
}

/* 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);
}
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: radial-gradient(1000px 560px at 20% 0%, rgba(251, 113, 133, 0.12), transparent 60%),
    radial-gradient(1000px 560px at 80% 10%, rgba(251, 191, 36, 0.10), transparent 60%),
    linear-gradient(180deg, #12070b 0%, #050712 75%, #050712 100%);
}
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%;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  /* 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: 10px;
  padding: 10px 14px;
  border-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: 12px 18px;
  border-radius: 16px;
}
.btn--sm {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}
.btn--block {
  width: 100%;
}
.btn--primary {
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.btn--primary:hover {
  box-shadow: 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 {
  /* Unify across all sites: give nav more room (header-only) */
  max-width: 1360px;
}
/* Vietnamese labels tend to be longer; give desktop nav a bit more room. */
html[lang="vi-VN"] .site-header .container {
  max-width: 1480px;
}
.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__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));
  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));
}

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

@media (max-width: 980px) {
  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;
  }
  .nav-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* Hero */
.hero {
  position: relative;
  padding: calc(var(--section-pad-y) + 8px) 0 var(--section-pad-y);
  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__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: 56px;
  }
  .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__rail {
  display: grid;
  gap: 12px;
  justify-items: end;
}
.hero-v2__rail .rail-card {
  width: 100%;
  max-width: 520px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.82), rgba(7, 10, 20, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.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;
}
.hero-v3__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 18px;
  align-items: start;
}
.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-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: 22px;
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.82), rgba(7, 10, 20, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  padding: 16px;
}
.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: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid 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: stretch;
}
.hero-v4__glass {
  height: 100%;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 26px 26px 22px;
  overflow: hidden;
  backdrop-filter: blur(14px);
}
.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-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.5px;
}
.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: 22px;
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.82), rgba(7, 10, 20, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.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: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 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;
  }
  .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 {
  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);
}
.hero-casino__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.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-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.2px;
}
.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: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
}
.page-header__kicker {
  font-size: 12px;
  font-weight: 850;
  color: rgba(245, 247, 255, 0.92);
  margin-bottom: 8px;
}
.page-header__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.3px;
}
.page-header__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 80ch;
}

/* Articles list */
.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: rgba(245, 247, 255, 0.95);
}

/* 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;
}
.article-row__media {
  display: block;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.article-row__img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
}
.article-row__ph {
  width: 100%;
  height: 100%;
  min-height: 160px;
  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: rgba(245, 247, 255, 0.95);
}
.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: 180px;
  }
}

/* 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: stretch;
}
.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: 100%;
}
.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: 100%;
}
.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;
}
.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);
}
.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;
  }
}

/* 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: 240px;
}
.bento-article:nth-child(1) {
  grid-column: span 7;
  min-height: 320px;
}
.bento-article:nth-child(2) {
  grid-column: span 5;
  min-height: 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, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.78));
}
.bento-article__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 16px;
  display: grid;
  gap: 10px;
}
.bento-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bento-article__title {
  font-weight: 950;
  line-height: 1.2;
  font-size: 18px;
}
.bento-article__summary {
  color: rgba(245, 247, 255, 0.84);
  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;
}
.bento-article:hover .bento-article__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.86));
}

@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: 260px;
  }
}

/* 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: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  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: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 16px;
  box-shadow: 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: 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;
}
.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: 3.3em;
}

/* 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;
  }
}

/* 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: 10px 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-weight: 750;
  font-size: 13px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.pill:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.14);
  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: 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;
}
.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);
}
.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;
}
.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: 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;
}
.promo-card__media {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid 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: 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: 260px;
}
.promo-bento:nth-child(1) {
  grid-column: span 7;
  min-height: 320px;
}
.promo-bento:nth-child(2) {
  grid-column: span 5;
  min-height: 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: 16px 16px;
  display: grid;
  gap: 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;
}
.promo-bento__desc {
  color: rgba(245, 247, 255, 0.84);
  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;
}
.promo-bento__hi {
  font-weight: 950;
  opacity: 0.96;
}
.promo-bento__cta {
  font-weight: 850;
  opacity: 0.92;
}

/* 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: center;
  justify-content: space-between;
  gap: 12px;
}
.compare-card__title {
  font-weight: 950;
  letter-spacing: -0.2px;
}
.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: 950;
}
.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: 260px;
  }
  .promo-compare {
    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: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 18px;
  box-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: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  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-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: 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;
}
.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: rgba(245, 247, 255, 0.95);
}
.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: rgba(245, 247, 255, 0.9);
  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) ===== */
.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-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 {
  padding: var(--section-pad-y) 0 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(245, 247, 255, 0.95);
}
.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: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.badge__label {
  font-size: 12px;
  font-weight: 650;
  color: rgba(245, 247, 255, 0.9);
}
.footer-links {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.88);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.footer-links__list a:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(245, 247, 255, 0.94);
  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: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  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 rgba(255, 255, 255, 0.08);
  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: rgba(245, 247, 255, 0.92);
}
.sep {
  opacity: 0.4;
}

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

/* ===== Theme overrides: minimal (light) ===== */
html[data-theme="minimal"] .hero {
  color: rgba(245, 247, 255, 0.95);
}
html[data-theme="minimal"] .hero__desc,
html[data-theme="minimal"] .panel__metricLabel {
  color: rgba(245, 247, 255, 0.78);
}

/* 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-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 {
  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"] .footer-meta a:hover {
  color: rgba(15, 23, 42, 0.96);
}

/* 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 {
  background: rgba(15, 23, 42, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  color: rgba(245, 247, 255, 0.95);
}
html[data-theme="minimal"] .site-header .container {
  max-width: 1360px;
}
html[data-theme="minimal"] .site-header .brand__name {
  color: rgba(245, 247, 255, 0.95);
}
html[data-theme="minimal"] .site-header .brand__code {
  color: rgba(245, 247, 255, 0.72);
}
html[data-theme="minimal"] .site-header .nav-link {
  color: rgba(245, 247, 255, 0.92);
}

/* 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"] 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"] .site-header {
  background: rgba(6, 7, 18, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="casino_neon"] .nav-link {
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="casino_neon"] .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(34, 197, 94, 0.22);
}
html[data-theme="casino_neon"] .btn--primary {
  box-shadow: 0 14px 40px rgba(34, 197, 94, 0.22);
}
html[data-theme="casino_neon"] .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"] .panel,
html[data-theme="casino_neon"] .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"] .tag,
html[data-theme="casino_neon"] .chip,
html[data-theme="casino_neon"] .pill {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="casino_neon"] .section-title {
  letter-spacing: -0.2px;
}
html[data-theme="casino_neon"] .feature-card,
html[data-theme="casino_neon"] .category-card,
html[data-theme="casino_neon"] .promo-card,
html[data-theme="casino_neon"] .testimonial-card,
html[data-theme="casino_neon"] .security-card,
html[data-theme="casino_neon"] .about-card,
html[data-theme="casino_neon"] .vip-card,
html[data-theme="casino_neon"] .article-card,
html[data-theme="casino_neon"] .footer-links,
html[data-theme="casino_neon"] .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"] .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"] 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"] .site-header {
  background: rgba(6, 4, 20, 0.74);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="slots_arcade"] .nav-link:hover {
  border-color: rgba(255, 61, 245, 0.22);
}
html[data-theme="slots_arcade"] .btn--primary {
  box-shadow: 0 16px 56px rgba(255, 61, 245, 0.22);
}
html[data-theme="slots_arcade"] .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"] .panel,
html[data-theme="slots_arcade"] .promo-card,
html[data-theme="slots_arcade"] .promo-slide,
html[data-theme="slots_arcade"] .feature-card,
html[data-theme="slots_arcade"] .testimonial-card,
html[data-theme="slots_arcade"] .security-card,
html[data-theme="slots_arcade"] .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"] .tag,
html[data-theme="slots_arcade"] .chip,
html[data-theme="slots_arcade"] .pill {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="slots_arcade"] .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;
}
.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__side {
  display: grid;
  gap: 14px;
  align-content: 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: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-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: 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);
}
.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;
}
.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: 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;
}
.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: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid 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: stretch;
}
.event-featured {
  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: 1fr 0.95fr;
  height: 100%;
}
.event-featured__media {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid 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: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 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: 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: 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: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid 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.10);
  border: 1px solid rgba(110, 231, 255, 0.22);
  color: rgba(245, 247, 255, 0.95);
  font-weight: 900;
  cursor: pointer;
}
.odds-btn:hover {
  background: rgba(110, 231, 255, 0.14);
}

/* Minimal theme: odds buttons need higher contrast on light background */
html[data-theme="minimal"] .odds-btn {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.24);
  color: rgba(15, 23, 42, 0.92);
}
html[data-theme="minimal"] .odds-btn:hover {
  background: rgba(37, 99, 235, 0.14);
}
.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.2fr) minmax(0, 0.8fr);
  gap: 0;
}
.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 {
  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: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sports-stat {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
}
.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: 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-size: 16px;
  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: 320px 1fr;
  gap: 0;
}
.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__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;
}
.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;
}
.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: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
}
.glossary-item__icon::before,
.glossary-item__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 2px;
  background: rgba(245, 247, 255, 0.85);
  border-radius: 2px;
}
.glossary-item__icon::after {
  transform: rotate(90deg);
}
.glossary-item[open] .glossary-item__icon::after {
  transform: rotate(0deg);
  opacity: 0;
}
.glossary-item__a {
  margin-top: 10px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* 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__a {
  color: color-mix(in oklab, var(--color-text) 78%, #000);
}
html[data-theme="minimal"] .section-sports-glossary .glossary-item__icon {
  background: rgba(2, 6, 23, 0.04);
  border-color: rgba(2, 6, 23, 0.10);
}
html[data-theme="minimal"] .section-sports-glossary .glossary-item__icon::before,
html[data-theme="minimal"] .section-sports-glossary .glossary-item__icon::after {
  background: rgba(2, 6, 23, 0.72);
}

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: 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(2, 6, 23, 0.02);
  border-color: rgba(2, 6, 23, 0.08);
}
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: stretch;
}
.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;
}
.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;
}
.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-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__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;
}
.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: 10px;
}
.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__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) 320px;
  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.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
}
.casino-stat__label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.casino-stat__value {
  margin-top: 6px;
  font-weight: 950;
}
.casino-stat__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.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: 320px 1fr;
  gap: 0;
}
.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.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
}
.slots-stat__label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.slots-stat__value {
  margin-top: 6px;
  font-weight: 950;
}
.slots-stat__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.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-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;
}
.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;
}
.slots-catTile__desc {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.slots-catTile__cta {
  margin-top: 2px;
  font-weight: 900;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.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;
}
.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;
}
.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: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 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: 14px;
  display: grid;
  gap: 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: 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;
}
.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: 16px;
  display: grid;
  gap: 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: 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;
  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 {
  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;
}
.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;
  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, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  align-items: start;
}
.themes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.theme-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;
}
.theme-card__name {
  font-weight: 950;
}
.theme-card__desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 13px;
}

.slots-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  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: 320px minmax(0, 1fr);
}
.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__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: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  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-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;
  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: 950;
  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: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
  padding: 18px;
}
.slots-supportPanel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 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: 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;
}
.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: 10px;
}
.slots-supportCards {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 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-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 (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: rgba(2, 6, 23, 0.02);
  border-left-color: rgba(2, 6, 23, 0.08);
}
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;
}
.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: 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;
}
.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;
}
.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: 12px;
}
.tips-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;
}
.tips-col__title {
  font-weight: 950;
  font-size: 16px;
  padding: 2px 2px 12px;
}
.tips-list {
  margin-top: 0;
  display: grid;
  gap: 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: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid 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-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) 320px;
  gap: 16px;
  align-items: start;
}
.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) 320px;
  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__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: 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;
}
.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: 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: 12px;
}
.section-casino-support .casino-faq .faq-item {
  margin: 0;
}
.casino-supportPanel {
  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;
}
.casino-supportPanel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 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: 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;
}
.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: 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-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) {
  .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: center;
  justify-content: space-between;
  gap: 10px;
}
.promo-slide__title {
  font-weight: 850;
}
.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);
}
.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(3, minmax(0, 1fr));
  gap: 14px;
}
.vip-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
}
.vip-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.vip-card__title {
  font-weight: 850;
}
.vip-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);
}
.vip-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}
.payments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.payment-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid 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: 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: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: 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: rgba(255, 255, 255, 0.08);
}
.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 {
  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;
}
.vip-levels__main {
  background: rgba(255, 255, 255, 0.02);
}
.vip-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.vip-step {
  display: grid;
  grid-template-columns: 44px 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 {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  box-shadow: 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: 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-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: 10px;
}
.vip-perk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vip-perk {
  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;
  gap: 12px;
  align-items: start;
}
.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: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 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 rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
}
.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 rgba(255, 255, 255, 0.10);
  background: 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: 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-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: 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-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: 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);
}

/* ===== 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: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.tips-card__title {
  font-weight: 900;
  margin-bottom: 10px;
}
.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.tips-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.responsible-split__actions {
  margin-top: 12px;
  display: flex;
  gap: 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: 16px;
  align-items: start;
}
.responsible-pane {
  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: 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: 10px;
  flex-wrap: wrap;
}
.responsible-tiles {
  display: grid;
  gap: 12px;
}
.responsible-tile {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 14px;
  display: flex;
  gap: 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;
  }
}

/* Responsible timeline (v4) */
.responsible-timeline {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.rail-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;
}
.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;
  }
}

/* ===== Getting started / Personas ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.step-card {
  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;
}
.step-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
}
.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);
}
.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: center;
  justify-content: space-between;
  gap: 10px;
}
.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;
}
.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;
}
.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;
}
.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--placeholder {
  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(3, minmax(0, 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;
}

/* 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;
}
.pagination__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.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: 1 1 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-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;
  }
}

html[data-theme="minimal"] .reader-article,
html[data-theme="minimal"] .reader-content,
html[data-theme="minimal"] .reader-related__card,
html[data-theme="minimal"] .split-article,
html[data-theme="minimal"] .split-article__main,
html[data-theme="minimal"] .split-sideCard,
html[data-theme="minimal"] .split-sideCta {
  background: var(--card-bg);
  border-color: var(--card-border);
}
html[data-theme="minimal"] .reader-content,
html[data-theme="minimal"] .split-article__content {
  color: rgba(15, 23, 42, 0.96);
}
html[data-theme="minimal"] .reader-content p,
html[data-theme="minimal"] .split-article__content p {
  color: rgba(15, 23, 42, 0.74);
}

.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;
  }
}