/* =========================================================================
   Betcha (betcha1.com) — bespoke stylesheet
   Hybrid sportsbook + casino. Blue #0d6efd / red #dc3545 on dark slate.
   ========================================================================= */

:root{
  --blue: #0d6efd;
  --blue-dim: #3d8bfd;
  --blue-deep: #094episode;
  --blue-deep: #073b8a;
  --red: #dc3545;
  --red-bright: #ff4d5e;
  --slate-900: #14171a;
  --slate-800: #1b1f24;
  --slate-700: #21262c;
  --slate-600: #2c333b;
  --slate-500: #6c757d;
  --slate-400: #93999f;
  --line: #323a42;
  --paper: #f7f8fa;
  --paper-line: #e3e6ea;
  --ink: #1a1d20;
  --ink-soft: #4c5359;
  --white: #ffffff;
  --green: #12a454;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 12px 32px -12px rgba(0,0,0,.45);
  --shadow-card: 0 6px 18px -8px rgba(0,0,0,.35);
  --container: 1180px;
  --header-h: 72px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--slate-900);
  color: var(--white);
  line-height: 1.55;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding:0 20px; }

/* =========================== Skip link =========================== */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--blue); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; z-index:200;
}
.skip-link:focus{ left:0; }

/* =========================== Header =========================== */
.site-header{
  position: sticky; top:0; z-index:100;
  height: var(--header-h);
  background: rgba(20,23,26,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.brand-bet{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:#fff; }
.brand-cha{
  font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:#fff;
  background: var(--red); padding: 1px 9px 3px; border-radius: 8px; margin-left:1px;
}
.brand-tld{ font-size:.72rem; font-weight:700; color: var(--slate-400); margin-left:5px; }

.desktop-nav{ display:flex; align-items:center; gap:28px; margin:0 auto; }
.desktop-nav a{
  font-size:.92rem; font-weight:600; color:#dfe3e6; white-space:nowrap;
  padding:8px 2px; border-bottom:2px solid transparent; transition:.15s;
}
.desktop-nav a:hover{ color:#fff; border-color: var(--blue); }

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lang-switch{ display:flex; align-items:center; gap:2px; font-size:.78rem; font-weight:700; color:var(--slate-400); }
.lang-switch a{ padding:4px 7px; border-radius:6px; }
.lang-switch a.active{ background: var(--slate-600); color:#fff; }
.lang-switch .sep{ opacity:.4; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:.88rem; font-weight:700; padding:10px 18px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:.15s;
}
.btn-ghost{ color:#fff; border-color: var(--line); background:transparent; }
.btn-ghost:hover{ border-color:#fff; }
.btn-primary{ background: var(--red); color:#fff; box-shadow: 0 6px 16px -4px rgba(220,53,69,.55); }
.btn-primary:hover{ background: var(--red-bright); }
.btn-blue{ background: var(--blue); color:#fff; box-shadow: 0 6px 16px -4px rgba(13,110,253,.5); }
.btn-blue:hover{ background: var(--blue-dim); }
.btn-block{ width:100%; }
.btn-lg{ padding:14px 26px; font-size:1rem; }

/* burger */
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:10px;
  background: var(--slate-800); position:relative; flex-shrink:0;
}
.burger span, .burger span::before, .burger span::after{
  content:""; position:absolute; left:11px; right:11px; height:2px; background:#fff; border-radius:2px;
  transition:.2s;
}
.burger span{ top:21px; }
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); }

/* mobile nav panel */
.mobile-nav{
  display:none;
  position:fixed; top: var(--header-h); left:0; right:0; bottom:0;
  background: var(--slate-900);
  z-index:99; padding:22px 20px 40px; overflow-y:auto;
  transform: translateY(-8px); opacity:0; pointer-events:none; transition: .18s ease;
}
.mobile-nav.open{ display:block; transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-nav a{ color:#fff; }
.mobile-nav-links{ display:flex; flex-direction:column; }
.mobile-nav-links a{
  font-size:1.05rem; font-weight:700; padding:15px 4px; border-bottom:1px solid var(--line);
}
.mobile-lang{
  display:flex; gap:10px; margin:22px 0; font-weight:700; font-size:.95rem;
}
.mobile-lang a{
  flex:1; text-align:center; padding:10px; border-radius:10px; border:1px solid var(--line); color:var(--slate-400);
}
.mobile-lang a.active{ background: var(--slate-700); color:#fff; border-color: var(--blue); }
.mobile-cta{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }

/* =========================== Hero =========================== */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(ellipse 900px 500px at 20% -10%, rgba(13,110,253,.35), transparent 60%), var(--slate-900);
  padding: 56px 0 44px;
  border-bottom: 1px solid var(--line);
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; mix-blend-mode: luminosity; opacity:.45; filter: contrast(1.1); }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,20,30,.55), rgba(20,23,26,.96) 88%), linear-gradient(100deg, rgba(13,110,253,.5), transparent 55%);
}
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap:44px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue-dim); background: rgba(13,110,253,.14); border:1px solid rgba(13,110,253,.4);
  padding:6px 12px; border-radius:999px; margin-bottom:18px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--red); box-shadow:0 0 0 3px rgba(220,53,69,.25); }
.hero-title{
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0 0 16px;
  color:#fff;
}
.hero-title em{ font-style:normal; color: var(--blue-dim); }
.hero-lede{ font-size:1.08rem; color:#c9ced2; max-width:52ch; margin:0 0 26px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:26px; margin-top:32px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size:1.5rem; font-weight:800; font-variant-numeric: tabular-nums; color:#fff; }
.hero-stat span{ font-size:.78rem; color: var(--slate-400); }

/* promo band */
.promo-band{ position:relative; z-index:1; }
.promo-card{
  background: var(--slate-800); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-soft);
}
.promo-card img{ width:100%; height:auto; }
.promo-card-body{ padding:16px 18px 20px; }
.promo-tag{ font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--red-bright); }
.promo-title{ font-size:1.05rem; font-weight:800; margin:4px 0 10px; color:#fff; }

/* =========================== Section shell =========================== */
.section{ padding: 56px 0; }
.section-tight{ padding: 40px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.section-kicker{ font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--blue-dim); margin:0 0 8px; }
.section-title{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight:800; margin:0; color:#fff; letter-spacing:-.01em; }
.section-sub{ color: var(--slate-400); max-width:60ch; margin:10px 0 0; font-size:.98rem; }
.section-alt{ background: var(--slate-800); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* =========================== Odds board =========================== */
.odds-board{
  background: var(--slate-800); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-card);
}
.odds-tabs{ display:flex; gap:4px; padding:14px 14px 0; overflow-x:auto; }
.odds-tab{
  font-size:.82rem; font-weight:700; color: var(--slate-400); padding:9px 16px; border-radius:999px 999px 0 0;
  background:transparent; border:1px solid transparent;
}
.odds-tab.is-active{ background: var(--slate-900); color:#fff; border-color: var(--line); border-bottom-color: var(--slate-900); }
.odds-table-wrap{ overflow-x:auto; }
table.odds{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px; }
table.odds th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--slate-400);
  padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700;
}
table.odds td{ padding:14px 16px; border-bottom:1px solid var(--line); color:#e7eaec; }
table.odds tr:last-child td{ border-bottom:none; }
.odds-match{ font-weight:700; color:#fff; }
.odds-league{ font-size:.76rem; color: var(--slate-400); display:block; margin-top:2px; }
.odds-pill{
  display:inline-block; min-width:64px; text-align:center; font-variant-numeric: tabular-nums; font-weight:700;
  padding:8px 10px; border-radius:9px; background: var(--slate-700); border:1px solid var(--line); color:#fff;
}
.odds-pill:hover{ border-color: var(--blue); color: var(--blue-dim); }
.odds-live{ color: var(--red-bright); font-weight:800; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; }
.odds-live .dot{ width:6px; height:6px; border-radius:50%; background: var(--red-bright); animation: pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.odds-foot{ padding:14px 18px; font-size:.8rem; color: var(--slate-400); border-top:1px solid var(--line); }

/* =========================== Casino / game grid =========================== */
.chip-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.chip{
  font-size:.85rem; font-weight:700; color:#dfe3e6; background: var(--slate-800); border:1px solid var(--line);
  padding:9px 16px; border-radius:999px; cursor:pointer; transition:.15s;
}
.chip.is-active{ background: var(--blue); border-color: var(--blue); color:#fff; }
.chip:hover{ border-color: var(--blue-dim); }

.game-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; align-items:start; }
.game-card{
  border-radius: var(--radius-md); overflow:hidden; background: var(--slate-800); border:1px solid var(--line);
  box-shadow: var(--shadow-card); transition:.2s;
}
.game-card:hover{ transform: translateY(-4px); border-color: var(--blue); }
.game-card img{ width:100%; height:auto; aspect-ratio: 4/3; object-fit:cover; }
.game-card-body{ padding:14px 16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.game-card-name{ font-weight:800; font-size:.95rem; color:#fff; }
.game-card-cat{ font-size:.72rem; color: var(--slate-400); }
.game-card-play{
  width:34px; height:34px; border-radius:50%; background: var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex-shrink:0;
}
.game-tile-plain{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  background: linear-gradient(135deg, var(--slate-700), var(--slate-800));
}
.game-tile-plain .g-ico{ font-size:2rem; }
.game-tile-plain .g-label{ font-weight:800; color:#fff; font-size:.92rem; }

/* =========================== Payments strip =========================== */
.pay-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.pay-item{
  background: var(--slate-800); border:1px solid var(--line); border-radius: var(--radius-md);
  padding:16px; display:flex; flex-direction:column; gap:6px;
}
.pay-item b{ color:#fff; font-size:.95rem; }
.pay-item span{ color: var(--slate-400); font-size:.78rem; }
.trust-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:26px; opacity:.9; }
.trust-row img{ height:34px; width:auto; filter: grayscale(1) brightness(1.6); opacity:.85; }

/* =========================== App teaser =========================== */
.app-teaser{ display:grid; grid-template-columns: .95fr 1.05fr; gap:48px; align-items:center; }
.app-mock{ position:relative; text-align:center; }
.app-mock img{ max-width:280px; margin:0 auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.app-points{ list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:14px; }
.app-points li{ display:flex; gap:12px; align-items:flex-start; color:#dfe3e6; font-size:.95rem; }
.app-points b{ color: var(--blue-dim); flex-shrink:0; }
.app-store-row{ display:flex; gap:12px; flex-wrap:wrap; }
.store-btn{
  display:flex; align-items:center; gap:10px; background: var(--slate-800); border:1px solid var(--line);
  padding:10px 18px; border-radius:12px; font-weight:700; font-size:.85rem;
}
.store-btn:hover{ border-color:#fff; }

/* =========================== SEO article panel =========================== */
.article-panel{ background: var(--paper); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.article-panel .container{ padding-top:48px; padding-bottom:8px; }
.breadcrumb{ font-size:.82rem; color: var(--ink-soft); margin-bottom:22px; }
.breadcrumb a{ color: var(--ink-soft); font-weight:600; }
.breadcrumb a:hover{ color: var(--blue); }
.breadcrumb .sep{ margin:0 6px; opacity:.5; }
.breadcrumb .current{ color: var(--ink); font-weight:700; }

.seo-article{ color: var(--ink); max-width:840px; }
.seo-article h1{
  font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight:800; line-height:1.2; letter-spacing:-.01em;
  color: var(--ink); margin:0 0 22px;
}
.seo-article h2{
  font-size:1.35rem; font-weight:800; color: var(--ink); margin:40px 0 14px; letter-spacing:-.005em;
}
.seo-article h3{ font-size:1.08rem; font-weight:800; color: var(--ink); margin:26px 0 10px; }
.seo-article p{ margin:0 0 16px; color: var(--ink-soft); font-size:1rem; }
.seo-article strong{ color: var(--ink); }
.seo-article a{ color: var(--blue); font-weight:700; border-bottom:1px solid rgba(13,110,253,.35); }
.seo-article a:hover{ border-color: var(--blue); }
.seo-article ul, .seo-article ol{ margin:0 0 18px; padding-left:22px; color: var(--ink-soft); }
.seo-article li{ margin-bottom:8px; }
.seo-article em{ color: var(--ink-soft); }

/* responsive tables inside article */
.table-scroll{ width:100%; overflow-x:auto; margin:0 0 22px; border:1px solid var(--paper-line); border-radius:12px; }
.seo-article table{
  width:100%; min-width:560px; border-collapse:collapse; table-layout:fixed; background:#fff;
}
.seo-article table th, .seo-article table td{
  border-bottom:1px solid var(--paper-line); padding:12px 14px; text-align:left; font-size:.9rem;
  overflow-wrap:anywhere; color: var(--ink-soft);
}
.seo-article table th{ background:#eef1f4; color: var(--ink); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.seo-article table tr:last-child td{ border-bottom:none; }

/* FAQ accordion (still inside seo-article, headings preserved) */
.faq-item{ border-bottom:1px solid var(--paper-line); }
.faq-item h3{
  margin:0; padding:18px 34px 18px 0; cursor:pointer; position:relative; font-size:1.02rem;
}
.faq-item h3::after{
  content:"+"; position:absolute; right:0; top:14px; font-size:1.4rem; font-weight:400; color: var(--blue); transition:.2s;
}
.faq-item.open h3::after{ transform: rotate(45deg); }
.faq-item p{ margin:0 0 18px; max-height:0; overflow:hidden; transition:.25s ease; }
.faq-item.open p{ max-height:600px; margin-bottom:18px; }
.faq-item:not(.open) p{ display:none; }
.faq-item.open p{ display:block; }

.rg-note{
  margin-top:18px; padding:16px 18px; background:#fff4e0; border:1px solid #f2d9a6; border-radius:12px;
  color:#7a5b12; font-size:.92rem;
}

/* =========================== Footer =========================== */
.site-footer{ background: var(--slate-900); border-top:1px solid var(--line); padding:48px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:32px; margin-bottom:34px; }
.footer-brand p{ color: var(--slate-400); font-size:.88rem; max-width:34ch; margin:14px 0 0; }
.footer-col b{ display:block; color:#fff; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color: var(--slate-400); font-size:.9rem; }
.footer-col a:hover{ color:#fff; }
.footer-badges{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.footer-badges img{ height:30px; width:auto; filter:grayscale(1) brightness(1.7); opacity:.8; }
.footer-legal{ border-top:1px solid var(--line); padding-top:22px; display:flex; flex-direction:column; gap:10px; }
.footer-copy{ color: var(--slate-400); font-size:.82rem; }
.footer-rg{ color: var(--slate-400); font-size:.8rem; display:flex; align-items:center; gap:8px; }
.age-badge{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px;
  background: var(--red); color:#fff; font-weight:800; font-size:.75rem; flex-shrink:0;
}

/* =========================== Utilities =========================== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; }
.mt-0{ margin-top:0; }
.tabular{ font-variant-numeric: tabular-nums; }

/* =========================== Responsive =========================== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .app-teaser{ grid-template-columns:1fr; }
  .app-mock{ order:-1; }
  .game-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .pay-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 860px){
  .desktop-nav{ display:none; }
  .header-actions .lang-switch, .header-actions .btn{ display:none; }
  .burger{ display:block; }
  .header-actions{ gap:10px; }
}

@media (max-width: 640px){
  .grid-2, .grid-4{ grid-template-columns:1fr; }
  .game-grid{ grid-template-columns:repeat(2,1fr); }
  .promo-band .container > div{ grid-template-columns:1fr !important; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .section{ padding:40px 0; }
  .hero{ padding:38px 0 32px; }
}

@media (max-width: 560px){
  .seo-article table, .seo-article table th, .seo-article table td{ font-size:.78rem; }
  .seo-article table th, .seo-article table td{ padding:8px 8px; }
  .odds-pill{ min-width:52px; padding:6px 6px; font-size:.82rem; }
  table.odds th, table.odds td{ padding:10px 8px; }
}

@media (max-width: 400px){
  .game-grid{ grid-template-columns:1fr 1fr; }
  .hero-stats{ gap:16px; }
}