/* =============================================
   BDMBet Casino — Stylesheet v2
   Mobile-first, pixel-perfect responsive
   Palette: #0A0B12 | #F7F400 | #FFFFFF
   ============================================= */

/* ── TOKENS ─────────────────────────────────── */
:root {
  --yellow:        #F7F400;
  --yellow-dim:    rgba(247,244,0,.18);
  --yellow-border: rgba(247,244,0,.30);
  --yellow-dark:   #d4d100;

  --bg:        #0A0B12;
  --bg-card:   #13141F;
  --bg-card2:  #1A1B28;
  --bg-alt:    #0E0F18;

  --txt:       #FFFFFF;
  --txt-light: #C8CCDA;
  --txt-muted: #7A7F96;

  --border:    rgba(255,255,255,.07);
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  --shadow:    0 4px 28px rgba(0,0,0,.55);
  --glow:      0 0 28px rgba(247,244,0,.22);

  --ease:      cubic-bezier(.4,0,.2,1);
  --dur:       .28s;

  --font-h: 'Oswald','Inter',sans-serif;
  --font-b: 'Inter',sans-serif;

  /* layout */
  --wrap: 1280px;
  --px:   clamp(16px, 5vw, 40px);
  --section-py: clamp(48px, 7vw, 88px);
}

/* ── RESET ───────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-b);
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img  { max-width:100%; height:auto; display:block; }
a    { color:inherit; text-decoration:none; transition:color var(--dur) var(--ease); }
ul,ol{ list-style:none; }
button { cursor:pointer; font-family:var(--font-b); }

/* ── LAYOUT ──────────────────────────────────── */
.container {
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--px);
}

/* ── TYPOGRAPHY ──────────────────────────────── */
h1,h2,h3,h4 {
  font-family:var(--font-h);
  font-weight:700;
  line-height:1.2;
  color:var(--txt);
}
h1 { font-size:clamp(1.75rem,5vw,3rem);    letter-spacing:-.02em; }
h2 { font-size:clamp(1.35rem,3.5vw,2.2rem);letter-spacing:-.01em; }
h3 { font-size:clamp(1rem,2.2vw,1.4rem);   letter-spacing:-.01em; }
p  { margin-bottom:1rem; color:var(--txt-light); }
p:last-child { margin-bottom:0; }
strong { color:var(--txt); font-weight:600; }
.accent { color:var(--yellow); font-weight:700; }

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 26px;
  border-radius:50px;
  font-weight:700;
  font-size:.875rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:none;
  outline:none;
  white-space:nowrap;
  transition:background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn-primary {
  background:var(--yellow);
  color:#000;
  box-shadow:0 4px 18px rgba(247,244,0,.28);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background:#fff;
  box-shadow:0 6px 28px rgba(247,244,0,.45);
  transform:translateY(-2px);
}
.btn-primary:active { transform:translateY(0); }

.btn-ghost {
  background:transparent;
  color:var(--txt);
  border:1.5px solid var(--border);
}
.btn-ghost:hover { border-color:var(--yellow); color:var(--yellow); }

.btn-outline {
  background:transparent;
  color:var(--yellow);
  border:1.5px solid var(--yellow);
}
.btn-outline:hover { background:var(--yellow); color:#000; }

.btn-lg {
  padding:14px 36px;
  font-size:.95rem;
}

/* full-width helper */
.btn-full { width:100%; display:flex; }

/* ── HEADER ──────────────────────────────────── */
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(10,11,18,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--dur) var(--ease);
}
.site-header.scrolled { box-shadow:0 4px 32px rgba(0,0,0,.65); }

.header-inner {
  display:flex;
  align-items:center;
  height:64px;
  gap:20px;
}
.header-logo {
  flex-shrink:0;
  display:flex;
  align-items:center;
  line-height:0;
}
.header-logo img { height:38px; width:auto; }

.header-nav {
  display:flex;
  align-items:center;
  gap:2px;
  flex:1;
}
.header-nav a {
  color:var(--txt-muted);
  font-weight:500;
  font-size:.85rem;
  padding:6px 11px;
  border-radius:8px;
  white-space:nowrap;
  transition:color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.header-nav a:hover,
.header-nav a.active { color:var(--txt); background:var(--bg-card); }
.header-nav a.active  { color:var(--yellow); background:var(--yellow-dim); }

.header-cta {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* burger */
.burger {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
  margin-left:auto;
  width:40px;
  height:40px;
  flex-shrink:0;
}
.burger span {
  display:block;
  width:22px;
  height:2px;
  background:var(--txt);
  border-radius:2px;
  transition:transform var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
  transform-origin:center;
}
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* mobile nav */
.mobile-nav {
  display:none;
  flex-direction:column;
  gap:2px;
  padding:12px var(--px) 16px;
  background:var(--bg-card);
  border-top:1px solid var(--border);
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  color:var(--txt-light);
  font-weight:500;
  font-size:.95rem;
  padding:11px 14px;
  border-radius:var(--radius-sm);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-nav a:hover { background:var(--bg-card2); color:var(--yellow); }
.mobile-nav .btn { margin-top:10px; }

/* ── SLIDER ──────────────────────────────────── */
.slider-section { position:relative; overflow:hidden; }

.slider {
  position:relative;
  width:100%;
  height:clamp(280px,52vw,600px);
}

.slide {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .75s ease;
  display:flex;
  align-items:center;
}
.slide.active { opacity:1; z-index:2; }

.slide-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(
    100deg,
    rgba(10,11,18,.94) 0%,
    rgba(10,11,18,.70) 45%,
    rgba(10,11,18,.15) 100%
  );
}

.slide-content {
  position:relative;
  z-index:3;
  max-width:560px;
  padding:24px 0;
}

.slide-tag {
  display:inline-block;
  background:var(--yellow);
  color:#000;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 14px;
  border-radius:50px;
  margin-bottom:14px;
}
.slide-title {
  font-family:var(--font-h);
  font-size:clamp(1.6rem,5vw,3.5rem);
  font-weight:700;
  color:#fff;
  line-height:1.1;
  margin-bottom:10px;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.slide-sub {
  font-size:clamp(.9rem,2vw,1.25rem);
  color:var(--txt-light);
  margin-bottom:22px;
}

/* slider controls */
.slider-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
  transition:background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.slider-btn:hover { background:var(--yellow); color:#000; border-color:var(--yellow); }
.slider-prev { left:14px; }
.slider-next { right:14px; }

.slider-dots {
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  gap:7px;
  align-items:center;
}
.dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  border:none;
  padding:0;
  cursor:pointer;
  transition:width var(--dur) var(--ease),
             border-radius var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.dot.active { width:22px; border-radius:4px; background:var(--yellow); }

/* ── STATS BAR ───────────────────────────────── */
.stats-bar {
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
}
.stats-inner {
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  flex-wrap:wrap;
}
.stat-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  flex:1;
  min-width:90px;
  padding:14px 8px;
  border-right:1px solid var(--border);
}
.stat-item:last-child { border-right:none; }
.stat-num {
  font-family:var(--font-h);
  font-size:clamp(1.2rem,3vw,1.6rem);
  font-weight:700;
  color:var(--yellow);
  line-height:1;
}
.stat-label {
  font-size:.72rem;
  color:var(--txt-muted);
  text-align:center;
  line-height:1.3;
}

/* ── CONTENT SECTIONS ────────────────────────── */
.content-section {
  padding:var(--section-py) 0;
}
.alt-bg { background:var(--bg-alt); }

.section-header {
  text-align:center;
  margin-bottom:clamp(28px,5vw,52px);
}
.section-header h2 { margin-bottom:10px; }
.section-sub {
  color:var(--txt-muted);
  font-size:clamp(.9rem,2vw,1.05rem);
  margin:0;
}

/* ── INTRO ───────────────────────────────────── */
.page-title {
  text-align:center;
  margin-bottom:clamp(24px,4vw,44px);
}

.intro-grid {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:clamp(24px,4vw,52px);
  align-items:start;
}

.lead {
  font-size:clamp(.95rem,2vw,1.1rem);
  color:var(--txt-light);
  margin-bottom:1.2rem;
}

/* lists */
.check-list {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:1.2rem 0;
}
.check-list li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--txt-light);
  font-size:.925rem;
  line-height:1.55;
}
.check-list li::before {
  content:"✓";
  color:var(--yellow);
  font-weight:700;
  flex-shrink:0;
  margin-top:2px;
  font-size:.85rem;
}

.numbered-list {
  display:flex;
  flex-direction:column;
  gap:13px;
  margin:1.2rem 0;
  counter-reset:num;
}
.numbered-list li {
  display:flex;
  align-items:flex-start;
  gap:13px;
  color:var(--txt-light);
  font-size:.925rem;
  line-height:1.55;
  counter-increment:num;
}
.numbered-list li::before {
  content:counter(num);
  min-width:26px;
  height:26px;
  background:var(--yellow);
  color:#000;
  font-weight:800;
  font-size:.75rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}

/* welcome card */
.welcome-card {
  background:var(--bg-card);
  border:1px solid var(--yellow-border);
  border-radius:var(--radius-lg);
  padding:clamp(20px,4vw,32px);
  text-align:center;
  box-shadow:var(--glow);
  position:sticky;
  top:80px;
}
.card-label {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--txt-muted);
  margin-bottom:8px;
}
.card-amount {
  font-family:var(--font-h);
  font-size:clamp(2.8rem,6vw,4rem);
  font-weight:700;
  color:var(--yellow);
  line-height:1;
  margin-bottom:4px;
}
.card-fs {
  font-size:1.1rem;
  font-weight:700;
  color:var(--txt);
  margin-bottom:22px;
}
.card-steps {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
  text-align:left;
}
.step {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--txt-light);
  font-size:.875rem;
}
.step-n {
  min-width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(247,244,0,.12);
  border:1.5px solid var(--yellow);
  color:var(--yellow);
  font-weight:700;
  font-size:.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.card-note {
  font-size:.68rem;
  color:var(--txt-muted);
  margin-top:12px;
  line-height:1.5;
}

/* ── REVIEW CARDS ────────────────────────────── */
.review-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.review-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  flex-direction:column;
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.review-card:hover { border-color:var(--yellow-border); transform:translateY(-4px); box-shadow:var(--glow); }
.review-stars { color:var(--yellow); font-size:.95rem; letter-spacing:2px; margin-bottom:8px; }
.review-category { font-weight:700; color:var(--txt); font-size:.9rem; margin-bottom:10px; }
.review-score { margin-top:auto; padding-top:16px; display:flex; align-items:baseline; gap:4px; }
.score-num { font-family:var(--font-h); font-size:2rem; color:var(--yellow); font-weight:700; }
.score-label { color:var(--txt-muted); font-size:.8rem; }

/* ── TWO-COL ─────────────────────────────────── */
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,52px);
  align-items:start;
}
.two-col h3 { color:var(--txt); margin-bottom:14px; }

/* ── TABLES ──────────────────────────────────── */
.bonus-table-wrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
  min-width:520px;
}
.data-table thead { background:var(--bg-card2); }
.data-table th {
  padding:13px 16px;
  text-align:left;
  color:var(--txt-muted);
  font-weight:600;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td {
  padding:13px 16px;
  color:var(--txt-light);
  border-bottom:1px solid rgba(255,255,255,.04);
  line-height:1.4;
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:rgba(255,255,255,.025); }
.accent-td  { color:var(--yellow); font-weight:600; }
.green-td   { color:#4ade80; font-weight:600; }
.orange-td  { color:#fb923c; font-weight:600; }
.highlight-col { background:rgba(247,244,0,.035); }

/* ── FRICTION BLOCK ──────────────────────────── */
.friction-block {
  margin-bottom:clamp(28px,4vw,44px);
}
.friction-block h3 {
  color:var(--txt);
  margin-bottom:12px;
  font-size:clamp(1rem,2.2vw,1.3rem);
}
.friction-block > p { margin-bottom:16px; }

/* ── DIAGNOSTIC BLOCK ────────────────────────── */
.diagnostic-block {
  margin-top:clamp(24px,4vw,40px);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(20px,4vw,32px);
}
.diagnostic-block h3 {
  color:var(--txt);
  margin-bottom:20px;
  font-size:clamp(1rem,2.2vw,1.25rem);
}
.diag-steps {
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:18px;
}
.diag-step {
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.diag-num {
  min-width:36px;
  height:36px;
  border-radius:50%;
  background:var(--yellow);
  color:#000;
  font-weight:800;
  font-size:.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.diag-content strong {
  display:block;
  color:var(--txt);
  margin-bottom:6px;
  font-size:.925rem;
}
.diag-content p {
  font-size:.875rem;
  margin:0;
  color:var(--txt-light);
}
.diag-note {
  font-size:.82rem;
  color:var(--txt-muted);
  border-top:1px solid var(--border);
  padding-top:14px;
  margin:0;
}
@media (max-width:480px) {
  .diag-step { gap:12px; }
  .diag-num  { min-width:30px; height:30px; font-size:.8rem; }
}

/* ── ICON ELEMENTS (emoji-driven) ────────────── */
.promo-icon,
.feature-icon,
.game-cat-img,
.sport-icon,
.sec-icon,
.vip-icon,
.support-icon,
.app-feat-icon,
.ch-icon {
  font-style:normal;
  line-height:1;
  display:block;
  user-select:none;
}

/* ── PROMO CARDS ─────────────────────────────── */
.promo-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:clamp(24px,4vw,40px);
}
.promo-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 18px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transition:border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.promo-card:hover { border-color:var(--yellow-border); transform:translateY(-4px); }
.promo-icon { font-size:2rem; margin-bottom:0; }
.promo-card h3 { color:var(--txt); font-size:.95rem; margin:0; }
.promo-card p  { font-size:.85rem; color:var(--txt-muted); margin:0; line-height:1.55; }

/* ── CODE BOX ────────────────────────────────── */
.code-box {
  background:var(--bg-card);
  border:1.5px dashed var(--yellow-border);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  margin-top:20px;
}
.code-label {
  font-size:.75rem;
  color:var(--txt-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.code-value {
  display:block;
  font-family:var(--font-h);
  font-size:clamp(1.6rem,4vw,2.2rem);
  font-weight:700;
  color:var(--yellow);
  letter-spacing:.1em;
  margin-bottom:8px;
  cursor:pointer;
}
.code-value:hover { text-shadow:0 0 22px rgba(247,244,0,.65); }
.code-note { font-size:.75rem; color:var(--txt-muted); margin:0; }

/* ── INFO BOX ────────────────────────────────── */
.info-box {
  background:rgba(247,244,0,.055);
  border:1px solid var(--yellow-border);
  border-radius:var(--radius);
  padding:16px 18px;
  margin:1.2rem 0;
}
.info-title {
  font-weight:700;
  color:var(--yellow);
  margin-bottom:10px;
  font-size:.875rem;
}
.info-box ul { display:flex; flex-direction:column; gap:6px; }
.info-box ul li {
  color:var(--txt-light);
  font-size:.875rem;
  padding-left:16px;
  position:relative;
  line-height:1.5;
}
.info-box ul li::before { content:"→"; position:absolute; left:0; color:var(--yellow); }

/* ── FEATURES GRID ───────────────────────────── */
.features-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.feature-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-item:hover { border-color:var(--yellow-border); box-shadow:var(--glow); }
.feature-icon { font-size:2rem; margin-bottom:12px; }
.feature-item h3 { color:var(--txt); margin-bottom:8px; font-size:1rem; }
.feature-item p  { font-size:.875rem; margin:0; }

/* ── GAME CATEGORIES ─────────────────────────── */
.games-categories {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:clamp(28px,4vw,48px);
}
.game-cat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  flex-direction:column;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.game-cat-card:hover { border-color:var(--yellow-border); transform:translateY(-3px); }
.game-cat-img { font-size:2.5rem; margin-bottom:12px; }
.game-cat-card h3 { color:var(--txt); margin-bottom:8px; font-size:1rem; }
.game-cat-card p  { font-size:.875rem; margin-bottom:12px; flex:1; }
.mini-list { display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.mini-list li {
  color:var(--txt-muted);
  font-size:.78rem;
  padding-left:12px;
  position:relative;
  line-height:1.5;
}
.mini-list li::before { content:"▸"; position:absolute; left:0; color:var(--yellow); }

/* providers */
.providers-section { margin-top:clamp(20px,3vw,36px); }
.providers-section h3 { text-align:center; margin-bottom:16px; }
.providers-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.provider-tag {
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--txt-muted);
  font-size:.78rem;
  font-weight:600;
  padding:6px 14px;
  border-radius:50px;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.provider-tag:hover { border-color:var(--yellow); color:var(--yellow); }

/* ── PLAYER QUOTES ───────────────────────────── */
.quote-cards { display:flex; flex-direction:column; gap:14px; }
.player-quote {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:3px solid var(--yellow);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:14px 16px;
}
.player-quote p    { font-size:.875rem; font-style:italic; margin-bottom:7px; }
.player-quote cite { font-size:.76rem; color:var(--txt-muted); font-style:normal; }

/* ── LIVE CASINO ─────────────────────────────── */
.live-games-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.live-game-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.live-game-card:hover { border-color:rgba(255,80,80,.45); transform:translateY(-3px); }
.live-badge {
  font-size:.68rem;
  font-weight:700;
  color:#ff4444;
  letter-spacing:.1em;
  margin-bottom:10px;
  animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.45} }
.live-game-card h3 { color:var(--txt); margin-bottom:8px; font-size:1rem; }
.live-meta {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.live-meta span { font-size:.76rem; color:var(--txt-muted); }

/* ── APP FEATURES ────────────────────────────── */
.app-features { display:flex; flex-direction:column; gap:14px; margin:20px 0; }
.app-feature {
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.app-feat-icon { font-size:1.75rem; flex-shrink:0; margin-top:2px; }
.app-feature strong { display:block; margin-bottom:4px; font-size:.9rem; }
.app-feature p { font-size:.84rem; margin:0; }

/* ── SPORTS ──────────────────────────────────── */
.sports-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.sport-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 18px;
  text-align:center;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sport-card:hover { border-color:var(--yellow-border); transform:translateY(-3px); }
.sport-icon { font-size:2.25rem; margin-bottom:10px; }
.sport-card h3 { color:var(--txt); margin-bottom:7px; font-size:1rem; }
.sport-card p  { font-size:.875rem; margin:0; }

/* ── SECURITY ────────────────────────────────── */
.security-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:clamp(20px,3vw,36px);
}
.security-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 18px;
  text-align:center;
  transition:border-color var(--dur) var(--ease);
}
.security-item:hover { border-color:var(--yellow-border); }
.sec-icon { font-size:2rem; margin-bottom:10px; }
.security-item h3 { color:var(--txt); font-size:.95rem; margin-bottom:8px; }

.responsible-gaming-banner {
  background:linear-gradient(135deg,rgba(247,244,0,.07) 0%,transparent 100%);
  border:1px solid var(--yellow-border);
  border-radius:var(--radius-lg);
  padding:clamp(18px,3vw,28px) clamp(18px,4vw,32px);
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;
}
.rg-content { flex:1; min-width:200px; }
.rg-content h3 { color:var(--txt); margin-bottom:8px; font-size:1.05rem; }
.rg-limits { display:flex; gap:10px; flex-wrap:wrap; }
.rg-limit {
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--txt-muted);
  font-size:.78rem;
  font-weight:600;
  padding:7px 13px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}

/* ── LOCAL GAIN BLOCK ────────────────────────── */
.local-gain-block {
  margin-top:clamp(24px,4vw,40px);
  background:linear-gradient(135deg,rgba(247,244,0,.04) 0%,transparent 100%);
  border:1px solid var(--yellow-border);
  border-radius:var(--radius-lg);
  padding:clamp(20px,4vw,32px);
}
.local-gain-block h3 {
  color:var(--txt);
  margin-bottom:22px;
  font-size:clamp(1rem,2.2vw,1.25rem);
}
.local-gain-block h4 {
  color:var(--yellow);
  font-size:.9rem;
  font-weight:700;
  margin-bottom:8px;
  margin-top:18px;
  font-family:var(--font-b);
  letter-spacing:.01em;
}
.local-gain-block h4:first-child { margin-top:0; }
.local-gain-block p { font-size:.875rem; }

/* ── VIP ─────────────────────────────────────── */
.vip-levels {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.vip-level {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(18px,3vw,26px) 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  transition:transform var(--dur) var(--ease);
}
.vip-level:hover { transform:translateY(-4px); }
.vip-icon { font-size:2.25rem; margin-bottom:10px; }
.vip-level h3 { color:var(--txt); font-size:1.1rem; margin-bottom:8px; }
.vip-level > p { font-size:.84rem; margin-bottom:14px; }
.vip-level ul  { display:flex; flex-direction:column; gap:6px; text-align:left; margin-top:auto; }
.vip-level ul li {
  font-size:.82rem;
  color:var(--txt-muted);
  padding-left:14px;
  position:relative;
  line-height:1.5;
}
.vip-level ul li::before { content:"✓"; position:absolute; left:0; color:var(--yellow); font-weight:700; }

.bronze { border-color:rgba(205,127,50,.35); }
.silver { border-color:rgba(192,192,192,.3); }
.gold   { border-color:rgba(255,215,0,.45); box-shadow:0 0 20px rgba(255,215,0,.1); }
.diamond{ border-color:rgba(180,240,255,.3); }

/* ── SUPPORT ─────────────────────────────────── */
.support-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.support-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(20px,3vw,28px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.support-card:hover { border-color:var(--yellow-border); transform:translateY(-3px); }
.support-icon { font-size:2.25rem; }
.support-card h3 { color:var(--txt); font-size:1.05rem; }

/* ── CHALLENGES ──────────────────────────────── */
.challenge-examples { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.challenge {
  display:flex;
  gap:13px;
  align-items:flex-start;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
}
.ch-icon { font-size:1.5rem; flex-shrink:0; margin-top:2px; }
.challenge strong { display:block; font-size:.875rem; margin-bottom:3px; }
.challenge p { font-size:.82rem; margin:0; }

/* ── FAQ ─────────────────────────────────────── */
.faq-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:860px;
  margin:0 auto;
}
.faq-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.faq-item.open { border-color:var(--yellow-border); }
.faq-q {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:17px 20px;
  background:none;
  border:none;
  color:var(--txt);
  font-size:.925rem;
  font-weight:600;
  text-align:left;
  line-height:1.4;
  transition:color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.faq-q:hover { color:var(--yellow); }
.faq-arrow {
  color:var(--yellow);
  font-size:.75rem;
  transition:transform .3s ease;
  flex-shrink:0;
}
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { display:none; padding:0 20px 17px; }
.faq-a p { font-size:.875rem; line-height:1.75; margin:0; }
.faq-item.open .faq-a { display:block; }

/* ── FOOTER ──────────────────────────────────── */
.site-footer {
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding-top:clamp(36px,5vw,56px);
}
.footer-inner {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:clamp(24px,4vw,48px);
  padding-bottom:clamp(36px,5vw,48px);
}
.footer-brand img { margin-bottom:14px; }
.footer-brand > p { font-size:.84rem; color:var(--txt-muted); line-height:1.65; }
.footer-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.badge {
  background:var(--bg-card2);
  border:1px solid var(--border);
  color:var(--txt-muted);
  font-size:.72rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:50px;
}
.footer-links h4,
.footer-cta-col h4 {
  color:var(--txt);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:14px;
  font-family:var(--font-h);
}
.footer-links ul { display:flex; flex-direction:column; gap:9px; }
.footer-links ul li a { color:var(--txt-muted); font-size:.86rem; }
.footer-links ul li a:hover { color:var(--yellow); }
.footer-cta-col > p { color:var(--txt-muted); font-size:.86rem; margin-bottom:4px; }
.footer-bonus {
  font-family:var(--font-h);
  font-size:1.9rem;
  font-weight:700;
  color:var(--yellow);
  margin-bottom:14px !important;
}
.footer-rg {
  font-size:.7rem;
  color:var(--txt-muted);
  margin-top:12px;
  line-height:1.6;
}
.footer-rg a { color:var(--yellow); text-decoration:underline; }
.footer-bottom { border-top:1px solid var(--border); padding:18px 0; }
.footer-bottom p {
  font-size:.72rem;
  color:var(--txt-muted);
  text-align:center;
  line-height:1.65;
  margin-bottom:5px;
}
.footer-bottom a { color:var(--txt-muted); text-decoration:underline; }
.footer-bottom a:hover { color:var(--yellow); }

/* ── STICKY CTA ──────────────────────────────── */
.sticky-cta {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:900;
  background:var(--bg-card);
  border-top:1px solid var(--yellow-border);
  padding:10px 0;
  transform:translateY(100%);
  transition:transform .38s var(--ease);
  box-shadow:0 -4px 24px rgba(0,0,0,.45);
}
.sticky-cta.visible { transform:translateY(0); }
.sticky-cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.sticky-cta-inner p { color:var(--txt-light); font-size:.875rem; margin:0; }
.sticky-cta-inner strong { color:var(--yellow); }

/* ── ANIMATIONS ──────────────────────────────── */
.fade-up {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET ≤1100px
   ═══════════════════════════════════════════════ */
@media (max-width:1100px) {
  .review-grid       { grid-template-columns:repeat(2,1fr); }
  .games-categories  { grid-template-columns:repeat(2,1fr); }
  .live-games-grid   { grid-template-columns:repeat(2,1fr); }
  .vip-levels        { grid-template-columns:repeat(2,1fr); }
  .security-grid     { grid-template-columns:repeat(2,1fr); }
  .promo-cards       { grid-template-columns:repeat(2,1fr); }
  .footer-inner      { grid-template-columns:1fr 1fr; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET ≤900px
   ═══════════════════════════════════════════════ */
@media (max-width:900px) {
  .intro-grid        { grid-template-columns:1fr; }
  .welcome-card      { position:static; max-width:480px; margin:0 auto; }
  .two-col           { grid-template-columns:1fr; gap:clamp(20px,4vw,32px); }
  .features-grid     { grid-template-columns:repeat(2,1fr); }
  .sports-grid       { grid-template-columns:repeat(3,1fr); }
  .support-grid      { grid-template-columns:1fr 1fr; gap:16px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤768px
   ═══════════════════════════════════════════════ */
@media (max-width:768px) {
  /* header */
  .header-nav  { display:none; }
  .header-cta  { display:none; }
  .burger      { display:flex; }
  .header-inner{ gap:12px; }

  /* slider */
  .slider      { height:clamp(240px,68vw,380px); }
  .slider-btn  { width:36px; height:36px; font-size:.875rem; }
  .slide-content{ max-width:100%; }
  .slide-tag   { font-size:.6rem; }

  /* stats */
  .stats-inner {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
  }
  .stat-item {
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:12px 6px;
  }
  .stat-item:nth-child(3)  { border-right:none; }
  .stat-item:nth-child(4)  { border-right:none; border-bottom:none; }
  .stat-item:nth-child(5)  { border-bottom:none; border-right:none; }
  .stat-item:last-child    { border-bottom:none; border-right:none; }

  /* grids */
  .review-grid       { grid-template-columns:1fr; }
  .promo-cards       { grid-template-columns:1fr 1fr; gap:12px; }
  .games-categories  { grid-template-columns:1fr 1fr; gap:12px; }
  .live-games-grid   { grid-template-columns:1fr 1fr; gap:12px; }
  .features-grid     { grid-template-columns:1fr 1fr; gap:12px; }
  .security-grid     { grid-template-columns:1fr 1fr; gap:12px; }
  .vip-levels        { grid-template-columns:1fr 1fr; gap:12px; }
  .sports-grid       { grid-template-columns:repeat(2,1fr); gap:12px; }
  .support-grid      { grid-template-columns:1fr; }
  .footer-inner      { grid-template-columns:1fr; gap:28px; }

  /* sticky CTA */
  .sticky-cta-inner  { gap:10px; }
  .sticky-cta-inner p{ font-size:.8rem; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE ≤480px
   ═══════════════════════════════════════════════ */
@media (max-width:480px) {
  :root { --px: 16px; }

  /* slider */
  .slider       { height:clamp(220px,75vw,320px); }
  .slider-btn   { display:none; }  /* swipe only */
  .slide-title  { font-size:1.5rem; }
  .slide-sub    { font-size:.875rem; margin-bottom:16px; }
  .btn-lg       { padding:12px 24px; font-size:.875rem; }

  /* stats — 2 col */
  .stats-inner  { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(3) { border-right:1px solid var(--border); border-bottom:none; }
  .stat-item:nth-child(4) { border-bottom:none; }
  .stat-item:nth-child(5) { border-right:none; border-bottom:none; }

  /* all 1-col on tiny screens */
  .promo-cards      { grid-template-columns:1fr; }
  .games-categories { grid-template-columns:1fr; }
  .live-games-grid  { grid-template-columns:1fr; }
  .features-grid    { grid-template-columns:1fr; }
  .security-grid    { grid-template-columns:1fr; }
  .vip-levels       { grid-template-columns:1fr; }
  .sports-grid      { grid-template-columns:1fr; }

  /* responsible gaming */
  .responsible-gaming-banner { padding:16px; flex-direction:column; }
  .rg-limits  { justify-content:center; }

  /* FAQ */
  .faq-q { font-size:.875rem; padding:14px 16px; }
  .faq-a  { padding:0 16px 14px; }

  /* footer */
  .footer-inner       { gap:24px; }
  .footer-links       { display:grid; grid-template-columns:1fr 1fr; }
  .footer-cta-col     { grid-column:1/-1; }
}

/* ═══════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════ */
.info-box--mt  { margin-top:2rem; }
.section-cta   { text-align:center; margin-top:clamp(24px,4vw,40px); }

::-webkit-scrollbar        { width:5px; height:5px; }
::-webkit-scrollbar-track  { background:var(--bg); }
::-webkit-scrollbar-thumb  { background:var(--bg-card2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--yellow); }
::selection { background:var(--yellow); color:#000; }

/* touch targets — min 44px */
@media (pointer:coarse) {
  .btn        { min-height:44px; }
  .faq-q      { min-height:52px; }
  .dot        { width:12px; height:12px; }
  .dot.active { width:28px; }
  .slider-btn { width:44px; height:44px; }
}

/* ═══════════════════════════════════════════════
   DEMO SLOT BLOCK
   ═══════════════════════════════════════════════ */
.demo-slot-block {
  margin: clamp(28px,4vw,48px) 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.demo-slot-title {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 600;
  color: var(--yellow);
  text-align: center;
  margin: 0;
  padding: clamp(16px,3vw,24px) clamp(16px,4vw,32px) 8px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.demo-slot-desc {
  text-align: center;
  color: var(--txt-light);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
  padding: 0 clamp(16px,4vw,40px) clamp(12px,2vw,20px);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive iframe wrapper — 16:9 aspect ratio */
.demo-slot-frame-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  background: #000;
}

.demo-slot-frame-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.demo-slot-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: clamp(14px,2.5vw,24px) clamp(16px,4vw,32px);
  border-top: 1px solid var(--border);
}

.demo-slot-note {
  font-size: .78rem;
  color: var(--txt-muted, rgba(255,255,255,.4));
}

/* Mobile — fix iframe minimum height */
@media (max-width: 600px) {
  .demo-slot-frame-wrap {
    padding-bottom: 75%; /* taller on small screens */
  }
  .demo-slot-cta {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}