/* =========================================================
   REDDYBOOK.CLUB — Core Stylesheet
   Theme: Light / White base with deep maroon-red identity
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* ---- Color tokens (derived from logo maroon) ---- */
  --color-bg:          #FFFFFF;
  --color-bg-soft:     #FBF6F5;
  --color-bg-alt:      #F6EDEC;
  --color-primary:     #7A2331;   /* deep brownish red, from logo */
  --color-primary-2:   #591722;   /* darker shade for hovers */
  --color-primary-3:   #9C3B48;   /* lighter tint */
  --color-gold:         #C7973E;  /* accent for CTAs / highlights */
  --color-gold-2:       #A87A2C;
  --color-accent:       #B8892B;  /* accent used by the promo hero section */
  --color-text:         #241012;
  --color-text-muted:   #7A6367;
  --color-border:       #ECDFDE;
  --color-success:      #1E7B4D;
  --color-shadow:       0 20px 45px -20px rgba(122,35,49,.35);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- Layout ---- */
  --container: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --header-h: 78px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 .5em; line-height:1.15; color: var(--color-primary-2); }
p{ margin:0 0 1em; color: var(--color-text-muted); }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding:0 24px; }
section{ padding: 84px 0; }
.section-alt{ background: var(--color-bg-soft); }

:focus-visible{ outline: 3px solid var(--color-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-primary); font-weight:600; margin-bottom: 14px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background: var(--color-gold); display:inline-block; }

.section-head{ max-width: 640px; margin: 0 0 46px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight:700; font-size:15px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background: var(--color-primary); color:#fff; box-shadow: var(--color-shadow); }
.btn-primary:hover{ background: var(--color-primary-2); transform: translateY(-2px); }
.btn-gold{ background: var(--color-gold); color:#2b1c05; box-shadow: 0 14px 30px -14px rgba(200,151,62,.6); }
.btn-gold:hover{ background: var(--color-gold-2); transform: translateY(-2px); }
.btn-outline{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary); color:#fff; }
.btn-lg{ padding: 17px 34px; font-size:16.5px; }
.btn-sm{ padding: 9px 18px; font-size:13.5px; }

/* =========================================================
   HEADER
   ========================================================= */
#site-header{ position: sticky; top:0; z-index: 500; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--color-border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height: var(--header-h); gap: 20px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height: 42px; width:auto; }
.brand-text{ font-family: var(--font-display); font-weight:800; font-size:21px; color: var(--color-primary); }
.brand-text span{ color: var(--color-gold-2); font-family: var(--font-body); font-weight:700; font-size:12px; letter-spacing:.08em; display:block; margin-top:-2px; }

.main-nav{ display:flex; align-items:center; gap: 34px; }
.main-nav a{ font-weight:600; font-size:14.5px; color: var(--color-text); position:relative; padding: 6px 0; }
.main-nav a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--color-gold); transition: width .2s ease; }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color: var(--color-primary); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--color-primary-2); margin: 5px 0; transition: .25s; }

@media (max-width: 960px){
  .main-nav{
    position: fixed; inset: var(--header-h) 0 0 0; background:#fff; flex-direction:column;
    justify-content:flex-start; align-items:flex-start; padding: 28px 24px; gap: 4px;
    transform: translateX(100%); transition: transform .3s ease; overflow-y:auto;
  }
  .main-nav a{ width:100%; padding: 14px 4px; border-bottom:1px solid var(--color-border); }
  .main-nav.open{ transform: translateX(0); }
  .nav-toggle{ display:block; }
  .header-actions .btn-outline{ display:none; }
}

/* =========================================================
   MIRROR TICKER (signature element)
   ========================================================= */
.mirror-ticker{ background: var(--color-primary); color:#fff; overflow:hidden; position:relative; }
.mirror-ticker::before, .mirror-ticker::after{
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.mirror-ticker::before{ left:0; background: linear-gradient(90deg, var(--color-primary), transparent); }
.mirror-ticker::after{ right:0; background: linear-gradient(270deg, var(--color-primary), transparent); }
.ticker-track{ display:flex; gap: 48px; width: max-content; padding: 9px 0; animation: ticker-scroll 28s linear infinite; }
.ticker-track span{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:12.5px; letter-spacing:.03em; opacity:.95; }
.ticker-track .dot{ width:7px; height:7px; border-radius:50%; background: #6CE79A; box-shadow: 0 0 0 3px rgba(108,231,154,.25); flex-shrink:0; }
@keyframes ticker-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =========================================================
   HERO / SLIDER
   ========================================================= */
.hero{ position:relative; overflow:hidden; background: var(--color-bg-soft); }
.hero-slider{ position:relative; width:100%; aspect-ratio: 16/8; min-height:340px; max-height: 640px; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition: opacity 1s ease;
  background-size: cover; background-position:center;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(36,16,18,.05) 0%, rgba(36,16,18,.55) 100%); }
.hero-slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 34px 24px 44px; text-align:center; z-index:2;
}
.hero-slide-caption .tag{
  display:inline-block; font-family: var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  background: rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.4); padding:6px 14px; border-radius:999px; margin-bottom:10px;
}
.hero-slide-caption h2{ color:#fff; font-size: clamp(22px,3.6vw,34px); margin-bottom:0; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-dots{ position:absolute; bottom:16px; left:50%; transform: translateX(-50%); z-index:3; display:flex; gap:8px; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:none; background: rgba(255,255,255,.5); cursor:pointer; padding:0; }
.hero-dots button.is-active{ background:#fff; width:22px; border-radius:6px; transition: width .25s ease; }
.hero-cta-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; padding: 26px 24px 0; }

/* Floating WhatsApp CTA — bottom center, per reference mock */
.floating-cta{
  position: fixed; left:50%; bottom: 22px; transform: translateX(-50%); z-index: 600;
  display:flex; align-items:center; gap:10px; background: var(--color-success); color:#fff;
  padding: 14px 22px; border-radius: 999px; font-weight:700; font-size:14.5px;
  box-shadow: 0 16px 34px -12px rgba(30,123,77,.55); animation: float-pulse 2.6s ease-in-out infinite;
}
.floating-cta svg{ width:20px; height:20px; flex-shrink:0; }
@keyframes float-pulse{ 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-6px);} }
@media (max-width: 560px){ .floating-cta{ font-size:13px; padding:12px 18px; } }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip{ padding: 30px 0; border-bottom:1px solid var(--color-border); }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.trust-item{ display:flex; align-items:center; gap:12px; }
.trust-item .num{ font-family: var(--font-display); font-weight:800; font-size: 26px; color: var(--color-primary); }
.trust-item .lbl{ font-size:12.5px; color: var(--color-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width: 800px){ .trust-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   CARDS — generic
   ========================================================= */
.grid{ display:grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 30px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform: translateY(-5px); box-shadow: var(--color-shadow); border-color: transparent; }
.card .icon{
  width:52px; height:52px; border-radius: 14px; background: var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color: var(--color-primary);
}
.card h3{ font-size:19px; margin-bottom:8px; }
.card p{ font-size: 14.5px; margin-bottom:0; }

/* Mirror site cards */
.mirror-card{
  position:relative; background: linear-gradient(160deg,#fff, var(--color-bg-alt)); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 26px; overflow:hidden;
}
.mirror-card .status{
  display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color: var(--color-success); font-weight:700; margin-bottom:14px;
}
.mirror-card .status .dot{ width:7px; height:7px; border-radius:50%; background: var(--color-success); }
.mirror-card .url{ font-family: var(--font-mono); font-size: 17px; font-weight:600; color: var(--color-primary-2); word-break: break-word; margin-bottom:10px; display:block; }
.mirror-card .desc{ font-size:13.5px; margin-bottom:18px; }

/* Game / feature tiles with image */
.tile{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; background: var(--color-bg-alt); }
.tile img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.tile:hover img{ transform: scale(1.06); }
.tile .tile-label{
  position:absolute; left:0; right:0; bottom:0; padding: 16px; background: linear-gradient(0deg, rgba(36,16,18,.85), transparent);
  color:#fff; font-weight:700; font-size:15px;
}

/* =========================================================
   ABOUT / SPLIT SECTIONS
   ========================================================= */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:34px; } }
.split img, .split .media{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--color-shadow); }
.split .media{ position:relative; aspect-ratio: 4/3; background: var(--color-primary); }
.check-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; font-size:15px; color: var(--color-text); font-weight:500; }
.check-list li svg{ flex-shrink:0; margin-top:2px; color: var(--color-primary); }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list{ max-width: 820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding: 22px 4px; font-family: var(--font-body); font-weight:700; font-size:16px; color: var(--color-text);
}
.faq-q .plus{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:2px solid var(--color-primary); position:relative; transition: transform .25s ease; }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background: var(--color-primary); top:50%; left:50%; transform: translate(-50%,-50%); }
.faq-q .plus::before{ width:11px; height:2px; }
.faq-q .plus::after{ width:2px; height:11px; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-a p{ padding: 0 30px 22px 4px; font-size:14.5px; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-2));
  border-radius: var(--radius-lg); padding: 56px; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color: rgba(255,255,255,.82); max-width:560px; margin-left:auto; margin-right:auto; }
.cta-banner .btn-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:22px; }

/* =========================================================
   FOOTER
   ========================================================= */
#site-footer{ background: #2A1014; color: #E8D9DA; padding-top: 70px; }
.footer-top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand .brand-text{ color:#fff; }
.footer-brand p{ color: rgba(232,217,218,.7); font-size:14px; max-width:320px; margin-top:14px; }
.footer-col h4{ color:#fff; font-family: var(--font-body); font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
.footer-col a{ display:block; color: rgba(232,217,218,.75); font-size:14.5px; margin-bottom:12px; transition: color .2s; }
.footer-col a:hover{ color: var(--color-gold); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background: var(--color-gold); color:#2b1c05; }

.footer-disclaimer{ padding: 30px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-disclaimer p{ color: rgba(232,217,218,.55); font-size: 12.5px; line-height:1.7; margin-bottom:10px; }
.footer-disclaimer strong{ color: rgba(232,217,218,.85); }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding: 22px 0; font-size:13px; color: rgba(232,217,218,.55); }
.footer-bottom a{ color: rgba(232,217,218,.65); }
.footer-bottom a:hover{ color: var(--color-gold); }
.age-badge{ display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,.08); padding:5px 12px; border-radius:999px; font-weight:700; }

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.page-hero{ background: var(--color-bg-soft); padding: 64px 0 54px; text-align:center; border-bottom:1px solid var(--color-border); }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ font-size: clamp(30px,4vw,46px); }
.breadcrumbs{ font-size:13px; color: var(--color-text-muted); font-family: var(--font-mono); }
.breadcrumbs a{ color: var(--color-primary); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 50px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-item{ display:flex; gap:16px; padding: 18px 0; border-bottom:1px solid var(--color-border); }
.contact-info-item .icon{ width:44px; height:44px; border-radius:12px; background: var(--color-bg-alt); color: var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item h4{ font-size:15px; margin-bottom:4px; }
.contact-info-item p{ font-size:14px; margin:0; }

.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 15px; border-radius: 10px; border:1.5px solid var(--color-border);
  font-family: var(--font-body); font-size:14.5px; background: var(--color-bg-soft); color: var(--color-text);
  transition: border-color .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--color-primary); outline:none; background:#fff; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* =========================================================
   LEGAL / POLICY PAGES
   ========================================================= */
.legal-content{ max-width: 820px; margin: 0 auto; }
.legal-content h2{ font-size:22px; margin-top:44px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ font-size:15px; color: var(--color-text-muted); }
.legal-content ul{ margin: 0 0 1em; }
.legal-content li{ display:flex; gap:10px; margin-bottom:8px; }
.legal-content li::before{ content:'—'; color: var(--color-primary); flex-shrink:0; }
.legal-toc{ background: var(--color-bg-soft); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px 26px; margin-bottom: 40px; }
.legal-toc h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.legal-toc a{ display:block; font-size:14px; padding:5px 0; color: var(--color-primary); font-weight:600; }
.updated-badge{ display:inline-block; font-family: var(--font-mono); font-size:12px; background: var(--color-bg-alt); color: var(--color-primary); padding:5px 12px; border-radius:999px; margin-bottom:16px; }

/* util */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }

/* =========================================================
   CATEGORY ICON NAV (dark strip under header)
   ========================================================= */
.category-nav{ background: var(--color-primary-2); overflow-x:auto; scrollbar-width:none; }
.category-nav::-webkit-scrollbar{ display:none; }
.category-track{ display:flex; width:max-content; min-width:100%; }
.cat-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding: 12px 18px; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color: rgba(255,255,255,.78); border-bottom:3px solid transparent; flex-shrink:0; white-space:nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.cat-icon{ font-size:17px; line-height:1; }
.cat-item:hover{ color:#fff; background: rgba(255,255,255,.06); }
.cat-item.active{ color:#fff; border-color: var(--color-gold); background: var(--color-primary); }

/* =========================================================
   PAGE HEADLINE (reference-style centered red heading)
   ========================================================= */
.home-headline{ padding: 40px 0 8px; text-align:center; }
.home-headline h1{ font-size: clamp(24px, 3.2vw, 34px); color: var(--color-primary); }

/* =========================================================
   SECTION LABEL BANNER (solid color block, like "Casino Games")
   ========================================================= */
.label-banner{
  background: var(--color-primary); color:#fff; font-family: var(--font-display); font-weight:700;
  font-size: 20px; padding: 14px 22px; border-radius: 8px; margin-bottom: 26px;
}

/* =========================================================
   AUTO-SLIDING GAME MARQUEE
   ========================================================= */
.marquee-wrap{ overflow:hidden; position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marquee-track{ display:flex; gap: 18px; width: max-content; animation: marquee-scroll 34s linear infinite; }
.marquee-track.reverse{ animation-direction: reverse; }
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.game-card{
  flex-shrink:0; width: 210px; border-radius: var(--radius-md); overflow:hidden; position:relative;
  aspect-ratio: 3/4; background: var(--color-bg-alt); box-shadow: 0 8px 22px -14px rgba(36,16,18,.35);
}
.game-card img{ width:100%; height:100%; object-fit:cover; }
.game-card .provider{
  position:absolute; top:10px; left:10px; background: rgba(0,0,0,.55); color:#fff;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding: 4px 9px; border-radius: 6px;
}
.game-card .name{
  position:absolute; left:0; right:0; bottom:0; padding: 14px; color:#fff; font-weight:800; font-size:15px;
  background: linear-gradient(0deg, rgba(0,0,0,.82), transparent 65%);
}

/* =========================================================
   COLOURFUL CATEGORY TILES
   ========================================================= */
.category-tiles{ display:grid; grid-template-columns: repeat(6,1fr); gap:18px; }
@media (max-width: 980px){ .category-tiles{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .category-tiles{ grid-template-columns: repeat(2,1fr); } }
.cat-tile{
  border-radius: var(--radius-md); padding: 20px 18px; min-height:120px; display:flex; flex-direction:column;
  justify-content:flex-end; color:#fff; font-family: var(--font-display); font-weight:700; font-size:16px;
  position:relative; overflow:hidden; transition: transform .2s ease;
}
.cat-tile:hover{ transform: translateY(-4px); }
.cat-tile .emoji{ font-size:30px; position:absolute; top:14px; right:14px; opacity:.9; }
.cat-tile.t1{ background: linear-gradient(135deg,#E8B84B,#B8862A); }
.cat-tile.t2{ background: linear-gradient(135deg,#C0525A,#7A2331); }
.cat-tile.t3{ background: linear-gradient(135deg,#B8862A,#5C1620); }
.cat-tile.t4{ background: linear-gradient(135deg,#3F8F5F,#1E5C3A); }
.cat-tile.t5{ background: linear-gradient(135deg,#3C8CA6,#215064); }
.cat-tile.t6{ background: linear-gradient(135deg,#9C3B48,#591722); }

/* =========================================================
   LIVE ODDS TABLE
   ========================================================= */
.odds-panel{ border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; }
.odds-panel-head{
  background: var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; font-family: var(--font-display); font-weight:700; font-size:17px;
}
.odds-panel-head .pill{ background: rgba(255,255,255,.16); font-family: var(--font-mono); font-size:11px; padding:5px 12px; border-radius:999px; font-weight:600; }
.odds-table{ width:100%; border-collapse:collapse; }
.odds-table th{ background: var(--color-bg-soft); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: var(--color-text-muted); padding: 12px; text-align:center; }
.odds-table td{ padding: 14px 12px; border-top:1px solid var(--color-border); text-align:center; font-family: var(--font-mono); font-size:14px; }
.odds-table td.match-name{ text-align:left; font-family: var(--font-body); font-weight:700; color: var(--color-text); font-size:14.5px; }
.odds-table td.match-name small{ display:block; font-weight:500; color: var(--color-text-muted); font-size:12px; margin-top:2px; }
.odds-table .live-badge{ display:inline-flex; align-items:center; gap:5px; color: var(--color-success); font-weight:700; font-size:11.5px; }
.odds-table .live-badge .dot{ width:6px; height:6px; border-radius:50%; background: var(--color-success); animation: float-pulse 1.6s ease-in-out infinite; }
.odds-table .back{ background: #EAF3FB; color:#1B5A8A; font-weight:700; }
.odds-table .lay{ background: #FBEAF0; color:#9C2350; font-weight:700; }
.odds-table-scroll{ overflow-x:auto; }
@media (max-width:760px){ .odds-table{ min-width:620px; } }

/* =========================================================
   PROMO CONTENT BLOCK (reference "India's Most Trusted" style)
   ========================================================= */
.promo-block{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items:center; }
@media (max-width:900px){ .promo-block{ grid-template-columns:1fr; } }
.promo-media{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--color-shadow); border:1px solid var(--color-border); }
.promo-block h2{ font-size: clamp(24px,3vw,32px); }
.promo-block p a{ color: var(--color-gold-2); font-weight:700; text-decoration:underline; }

/* =========================================================
   NEW HERO — heading, auto-moving card row, then paragraphs
   Renamed from .hero → .hero-promo and .hero-cta-row →
   .hero-promo-cta-row so this doesn't collide with the
   existing slider hero (.hero) above. Uses the new
   --color-accent token added to :root. Button colors are
   scoped under .hero-promo so global .btn/.btn-gold/
   .btn-outline styles elsewhere are untouched.
   ========================================================= */
.hero-promo{ padding: 56px 24px 64px; background: var(--color-bg-soft); overflow:hidden; }
.hero-promo-heading{ max-width: 760px; margin: 0 auto 40px; text-align:center; }
.hero-promo-heading .tag{
  display:inline-block; font-family: var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  background: rgba(184,137,43,.12); color: var(--color-accent); border:1px solid rgba(184,137,43,.35);
  padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.hero-promo-heading h1{ font-size: clamp(28px, 4vw, 42px); line-height:1.15; margin: 0 0 12px; }
.hero-promo-heading p{ font-size: 16px; color:#5b4a4c; margin:0; }

/* Auto-moving clickable card row */
.card-row-viewport{
  position:relative; overflow:hidden; margin: 0 -24px; padding: 0 24px;
}
.card-row-viewport::before,
.card-row-viewport::after{
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.card-row-viewport::before{ left:0; background: linear-gradient(90deg, var(--color-bg-soft), transparent); }
.card-row-viewport::after{ right:0; background: linear-gradient(270deg, var(--color-bg-soft), transparent); }
.card-row{
  display:flex; gap:20px; width:max-content;
  animation: card-scroll 28s linear infinite;
}
.card-row:hover{ animation-play-state: paused; }
.hero-card{
  flex: 0 0 auto; width: 260px; border-radius:16px; overflow:hidden; text-decoration:none;
  background:#fff; box-shadow: 0 10px 30px -14px rgba(36,16,18,.25);
  transition: transform .25s ease, box-shadow .25s ease;
  display:block; color: var(--color-text);
}
.hero-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px -14px rgba(36,16,18,.35); }
.hero-card img{ width:100%; height:150px; object-fit:cover; display:block; }
.hero-card-body{ padding:14px 16px 18px; }
.hero-card-body .label{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--color-accent); margin-bottom:6px; display:block;
}
.hero-card-body h3{ font-size:16px; margin:0 0 4px; }
.hero-card-body span.cta{ font-size:13px; color: var(--color-success); font-weight:600; }
@keyframes card-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); } /* card set is duplicated, so -50% loops seamlessly */
}

/* Paragraph content below the card row */
.hero-promo-copy{ max-width: 760px; margin: 44px auto 0; text-align:center; }
.hero-promo-copy p{ font-size:15px; line-height:1.7; color:#5b4a4c; margin:0 0 16px; }
.hero-promo-cta-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top: 28px; }

/* Scoped button color tweaks — only affect buttons inside .hero-promo,
   existing global .btn / .btn-gold / .btn-outline elsewhere are unaffected */
.hero-promo .btn-gold{ background: var(--color-accent); color:#fff; }
.hero-promo .btn-outline{ border-color: var(--color-text); color: var(--color-text); }

@media (max-width:560px){
  .hero-promo{ padding: 40px 16px 48px; }
  .hero-card{ width:210px; }
  .hero-card img{ height:120px; }
}