/* ═══════════════════════════════════════════
   ZORATIPS — assets/style.css
   Version 4.1 — Amber Gold Update
═══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --gold:      #d4920a;
  --gold-d:    #b07508;
  --gold-rgb:  212,146,10;
  --green:     #18c96a;
  --green-rgb: 24,201,106;
  --red:       #e84040;
  --red-rgb:   232,64,64;
  --blue:      #3b8ae6;
  --blue-rgb:  59,138,230;
  --radius:    8px;
  --radius-sm: 5px;
  --tr:        0.2s ease;
}

[data-theme="dark"] {
  --bg:       #080b10;
  --bg2:      #0b0e15;
  --surface:  #0e1219;
  --surface2: #141820;
  --surface3: #1a1f2c;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.10);
  --text:     #e8ecf4;
  --text2:    #a8b5c8;
  --text3:    #6b7a96;
  --shadow:   rgba(0,0,0,0.6);
  --nav-bg:   rgba(8,11,16,0.96);
  --hover:    rgba(255,255,255,0.025);
  --input-bg: #080b10;
}

[data-theme="light"] {
  --bg:       #f0f2f8;
  --bg2:      #ffffff;
  --surface:  #ffffff;
  --surface2: #e8ecf5;
  --surface3: #dde0ed;
  --border:   rgba(0,0,0,0.07);
  --border2:  rgba(0,0,0,0.12);
  --text:     #0d1119;
  --text2:    #374151;
  --text3:    #6b7280;
  --shadow:   rgba(0,0,0,0.08);
  --nav-bg:   rgba(240,242,248,0.97);
  --hover:    rgba(0,0,0,0.02);
  --input-bg: #f0f2f8;
  /* Deeper gold for light mode legibility */
  --gold:     #b87800;
  --gold-d:   #965f00;
  --gold-rgb: 184,120,0;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 15px;
  overflow-x: hidden;
}
body {
  background: var(--bg); color: var(--text);
  font-family: 'Outfit', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--tr), color var(--tr);
  max-width: 100vw;
}
a { color: inherit; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-d); border-radius: 2px; }

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: background var(--tr);
}

.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.logo-mark {
  width: 28px; height: 28px; background: var(--gold);
  border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', cursive; font-size: 17px; color: #fff; letter-spacing: 0.5px;
}
[data-theme="dark"] .logo-mark { color: #000; }
.logo-text { font-family: 'Bebas Neue', cursive; font-size: 18px; letter-spacing: 2px; color: var(--text); }
.logo-text em { color: var(--gold); font-style: normal; }

.nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
.nav-links > li { position: relative; }
.nav-links > li > a,
.nav-links > li > button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 500; color: var(--text2);
  text-decoration: none; letter-spacing: 0.3px;
  background: none; border: none; cursor: pointer;
  transition: color var(--tr), background var(--tr);
  white-space: nowrap; font-family: 'Outfit', sans-serif;
}
.nav-links > li > a:hover,
.nav-links > li > button:hover { color: var(--text); background: var(--hover); }
.nav-links > li > a.active { color: var(--gold); }
.nav-links .chevron { font-size: 9px; transition: transform 0.2s; }
.nav-links li.open .chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px var(--shadow);
  min-width: 200px;
  opacity: 0; transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: all 0.18s ease;
  z-index: 9999;
}
.nav-links li.open .nav-dropdown {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}
.nav-dropdown a {
  display: flex; align-items: center;
  padding: 9px 14px; font-size: 12.5px; font-weight: 500;
  color: var(--text2); text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: all var(--tr);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { color: var(--gold); background: var(--hover); }
.nav-dropdown a:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.nav-dropdown a:last-child { border-radius: 0 0 var(--radius) var(--radius); }

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.theme-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text2); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--tr);
}
.theme-btn:hover { border-color: var(--gold); transform: rotate(18deg); }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 6px; z-index: 210;
}
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px; transition: all 0.28s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════ */
.mobile-menu { position: fixed; inset: 0; z-index: 190; pointer-events: none; }
.mob-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.28s;
}
.mob-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(300px, 88vw); background: var(--surface);
  border-left: 1px solid var(--border2);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
  padding-top: 56px; overflow-y: auto;
  box-shadow: -16px 0 48px var(--shadow);
}
.mobile-menu.open { pointer-events: all; }
.mobile-menu.open .mob-backdrop { opacity: 1; }
.mobile-menu.open .mob-drawer { transform: translateX(0); }

.mob-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.mob-theme-row span { font-size: 12px; font-weight: 600; color: var(--text2); }
.tog {
  width: 40px; height: 22px; border-radius: 11px;
  background: var(--surface3); border: 1px solid var(--border2);
  position: relative; cursor: pointer; transition: background 0.28s;
}
.tog.on { background: var(--gold); }
.tog-k {
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform 0.28s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.tog.on .tog-k { transform: translateX(18px); }

.mob-sec {
  padding: 10px 18px 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text3);
}
.mob-links { list-style: none; }
.mob-links li a {
  display: flex; align-items: center;
  padding: 10px 18px; font-size: 13px; font-weight: 500;
  color: var(--text2); text-decoration: none;
  transition: all var(--tr); border-left: 3px solid transparent;
}
.mob-links li a:hover,
.mob-links li a.active { color: var(--gold); background: var(--hover); border-left-color: var(--gold); }
.mob-divider { height: 1px; background: var(--border); margin: 6px 0; }

.mob-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px 14px;
}
.mst {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; text-align: center;
}
.mst-v { font-family: 'Bebas Neue', cursive; font-size: 22px; color: var(--gold); letter-spacing: 1px; }
.mst-l { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
.mst--free { background: rgba(24,201,106,0.07); border-color: rgba(24,201,106,0.2); }
.mst--free .mst-v { color: var(--green); }

.mob-cta-wrap { padding: 4px 14px 20px; }
.mob-cta {
  display: block; width: 100%; padding: 12px;
  background: var(--gold); color: #fff; border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer; text-align: center; transition: all var(--tr);
}
[data-theme="dark"] .mob-cta { color: #000; }
.mob-cta:hover { background: var(--gold-d); }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero {
  padding: 96px 24px 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.hero-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--gold); }
.hero h1 {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95; letter-spacing: 2px; color: var(--text);
  margin-bottom: 18px;
}
.hero h1 em { color: var(--gold); font-style: normal; display: block; }
.hero-sub {
  font-size: 14px; line-height: 1.75; color: var(--text2);
  max-width: 420px; margin-bottom: 28px;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.hero-panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 40px var(--shadow);
}
.hp-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text3); margin-bottom: 18px;
}
.hp-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 18px;
}
.hp-stat {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px;
  text-align: center;
}
.hp-val { font-family: 'Bebas Neue', cursive; font-size: 28px; color: var(--gold); letter-spacing: 1px; line-height: 1; }
.hp-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 3px; }
.hp-sep { height: 1px; background: var(--border); margin: 0 0 14px; }
.hp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.hp-row:last-child { border-bottom: none; }
.hp-market { color: var(--text2); }
.hp-rate { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--green); font-size: 11px; }

/* ══════════════════════════════════════════
   SECTION SHELL
══════════════════════════════════════════ */
.section { position: relative; z-index: 0; }
.si { max-width: 1160px; margin: 0 auto; padding: 64px 24px; }
.si-sm { max-width: 1160px; margin: 0 auto; padding: 40px 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--gold); opacity: 0.7; }
.sh2 {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(32px, 4.5vw, 52px); letter-spacing: 2px; line-height: 1; margin-bottom: 10px;
}
.sh2 em { color: var(--gold); font-style: normal; }
.ssub { font-size: 14px; color: var(--text2); max-width: 500px; line-height: 1.7; }
.ssub a { color: var(--gold); text-decoration: none; }
.ssub a:hover { text-decoration: underline; }

.bg-surface { background: var(--surface); border-top: 1px solid var(--border); }
.bg-alt     { background: var(--bg2); }

.btn-p {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold); color: #fff; border: none;
  padding: 11px 24px; border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: all 0.18s; text-decoration: none;
}
[data-theme="dark"] .btn-p { color: #000; }
.btn-p:hover { background: var(--gold-d); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(var(--gold-rgb),0.35); }
.btn-g {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border2); padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 13px;
  cursor: pointer; transition: all 0.18s; text-decoration: none;
}
.btn-g:hover { border-color: var(--gold); color: var(--gold); }
.btn-p--full { width: 100%; justify-content: center; }

.ta-center { text-align: center; }
.ta-right  { text-align: right; }
.tc-wrap   { text-align: center; margin-top: 24px; }

.text-green  { color: var(--green); }
.text-gold   { color: var(--gold); }
.text-red    { color: var(--red); }
.text-muted  { color: var(--text2); }
.text-faint  { color: var(--text3); }
.font-mono   { font-family: 'JetBrains Mono', monospace; }

/* ══════════════════════════════════════════
   MATCH TABLE
══════════════════════════════════════════ */
.mtw { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 16px var(--shadow); overflow-x: auto; width: 100%; }
.mth { display: grid; grid-template-columns: 1.2fr 1fr 70px 90px 64px; padding: 9px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); align-items: center; gap: 10px; min-width: 480px; }
.mr { display: grid; grid-template-columns: 1.2fr 1fr 70px 90px 64px; padding: 13px 16px; border-bottom: 1px solid var(--border); align-items: center; gap: 10px; transition: background var(--tr); min-width: 480px; }
.mr:last-child { border-bottom: none; }
.mr:hover { background: var(--hover); }
.mr.tp { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.04), transparent 70%); border-left: 3px solid var(--gold); }
.mr.tp:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.065), var(--hover) 70%); }
.mc-m { display: flex; flex-direction: column; gap: 4px; }
.mc-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mhm, .maw { font-weight: 700; font-size: 12.5px; }
.mvs { font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.mc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-time { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text3); }
.mc-top { font-size: 8px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; background: var(--gold); color: #fff; padding: 1px 5px; border-radius: 3px; }
[data-theme="dark"] .mc-top { color: #000; }
.mc-league { font-size: 9px; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; }
.mpl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.mpv { font-size: 12px; font-weight: 600; color: var(--text); }
.mo { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; color: var(--gold); text-align: center; }
.mco { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cds { display: flex; gap: 3px; }
.cd { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); }
.cd.on { background: var(--gold); }
.cd.h  { background: rgba(var(--gold-rgb),0.4); }
.mct { font-size: 9px; color: var(--text3); }
.mfr { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; color: var(--green); border: 1px solid rgba(var(--green-rgb),0.3); background: rgba(var(--green-rgb),0.08); }
.no-tips { padding: 40px 20px; text-align: center; color: var(--text3); font-size: 13px; }

/* ══════════════════════════════════════════
   PROBABILITY BAR
══════════════════════════════════════════ */
.prob-bar-wrap { margin-top: 5px; }
.prob-bar-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--text3); margin-bottom: 3px; }
.prob-bar { display: flex; height: 4px; border-radius: 3px; overflow: hidden; }
.pb-home { background: var(--green); }
.pb-draw { background: var(--gold); }
.pb-away { background: var(--red); }

/* ══════════════════════════════════════════
   ACCUMULATOR STRIP
══════════════════════════════════════════ */
.acca { position: relative; overflow: hidden; background: var(--surface); border: 1px solid rgba(var(--gold-rgb),0.22); border-radius: var(--radius); padding: 0; margin-top: 20px; display: flex; align-items: stretch; justify-content: space-between; box-shadow: 0 4px 32px rgba(var(--gold-rgb),0.06); }
.acca::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.acca::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(var(--gold-rgb),0.04) 0%, transparent 60%); }
.al { flex: 1; min-width: 0; padding: 20px 24px 20px 28px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.al-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }
.al-lbl::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--gold); }
.al-t { font-family: 'Bebas Neue', cursive; font-size: clamp(18px, 2.4vw, 26px); letter-spacing: 1.5px; color: var(--text); line-height: 1; }
.al-p { display: flex; gap: 6px; flex-wrap: wrap; }
.ap { background: var(--surface2); border: 1px solid var(--border2); border-radius: 4px; padding: 3px 10px; font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 4px; }
.ap strong { color: var(--gold); font-weight: 700; }
.ar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; padding: 20px 28px; min-width: 140px; background: rgba(var(--gold-rgb),0.04); border-left: 1px solid rgba(var(--gold-rgb),0.14); position: relative; z-index: 1; }
.aol { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text3); font-weight: 600; }
.aov { font-family: 'Bebas Neue', cursive; font-size: 52px; color: var(--gold); letter-spacing: 2px; line-height: 1; text-shadow: 0 0 32px rgba(var(--gold-rgb),0.3); }
.a-badge { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; border-radius: 3px; background: var(--gold); color: #fff; text-decoration: none; transition: all 0.18s; display: inline-block; }
[data-theme="dark"] .a-badge { color: #000; }
.a-badge:hover { background: var(--gold-d); transform: translateY(-1px); }

/* ══════════════════════════════════════════
   STATS BAND
══════════════════════════════════════════ */
.stats-band { display: grid; grid-template-columns: repeat(5,1fr); border-bottom: 1px solid var(--border); }
.sc { padding: 28px 14px; text-align: center; border-right: 1px solid var(--border); position: relative; overflow: hidden; transition: background var(--tr); }
.sc:last-child { border-right: none; }
.sc::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 50%; height: 2px; background: var(--gold); transition: transform 0.35s; }
.sc:hover { background: var(--hover); }
.sc:hover::after { transform: translateX(-50%) scaleX(1); }
.sb { font-family: 'Bebas Neue', cursive; font-size: 38px; letter-spacing: 1px; color: var(--gold); line-height: 1; }
.ss { font-size: 10px; color: var(--text3); margin-top: 4px; letter-spacing: 0.4px; text-transform: uppercase; }

/* ══════════════════════════════════════════
   CATEGORIES GRID
══════════════════════════════════════════ */
.cats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 32px; }
.cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 16px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 7px; position: relative; overflow: hidden; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--shadow); border-color: rgba(var(--gold-rgb),0.28); }
.cat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); opacity: 0; transition: opacity 0.25s; }
.cat-card:hover::before { opacity: 1; }
.cat-num { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text3); }
.cat-name { font-family: 'Bebas Neue', cursive; font-size: 16px; letter-spacing: 0.8px; }
.cat-desc { font-size: 11.5px; color: var(--text2); line-height: 1.6; flex: 1; }
.cat-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--border); }
.cat-rate { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green); font-weight: 700; }
.cat-arrow { color: var(--gold); font-size: 13px; transition: transform var(--tr); }
.cat-card:hover .cat-arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════
   WIN RATE CHART
══════════════════════════════════════════ */
.chart-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cg { display: grid; grid-template-columns: 1fr 220px; gap: 36px; align-items: start; margin-top: 36px; }
.cf { display: flex; gap: 5px; align-items: flex-end; height: 160px; position: relative; overflow: hidden; }
.cf::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--border2); }
.bc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bw { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px 3px 0 0; position: relative; height: 140px; }
.bf { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--gold), var(--gold-d)); border-radius: 3px 3px 0 0; height: 0; transition: height 1.1s cubic-bezier(0.34,1.56,0.64,1); }
.bw:hover .bf { filter: brightness(1.12); }
.bm { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text3); text-transform: uppercase; }
.ck-col { display: flex; flex-direction: column; gap: 8px; }
.ck { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.ckv { font-family: 'Bebas Neue', cursive; font-size: 30px; letter-spacing: 1px; color: var(--gold); line-height: 1; }
.ckl { font-size: 10px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; }
.cks { font-size: 11px; color: var(--green); margin-top: 4px; font-weight: 500; }

/* ══════════════════════════════════════════
   RESULTS TABLE
══════════════════════════════════════════ */
.res-sect { background: var(--bg2); }
.rtw { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 16px var(--shadow); margin-top: 32px; overflow-x: auto; width: 100%; }
.rh { display: grid; grid-template-columns: 52px 1.4fr 1fr 72px 72px 72px 60px; padding: 9px 16px; background: var(--surface3); border-bottom: 1px solid var(--border); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); align-items: center; gap: 8px; min-width: 560px; }
.rr { display: grid; grid-template-columns: 52px 1.4fr 1fr 72px 72px 72px 60px; padding: 10px 16px; border-bottom: 1px solid var(--border); align-items: center; gap: 8px; transition: background var(--tr); min-width: 560px; min-height: unset; grid-auto-rows: auto; }
.rr > * { align-self: center; }
.rr:last-child { border-bottom: none; }
.rr:hover { background: var(--hover); }
.rr.wr { border-left: 3px solid rgba(var(--green-rgb),0.5); }
.rr.lr { border-left: 3px solid rgba(var(--red-rgb),0.4); }
.rr.pr { border-left: 3px solid rgba(var(--blue-rgb),0.4); }
.rd { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text3); }
.rm { font-weight: 600; font-size: 13px; line-height: 1.3; }
.rlt { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; }
.rpk { color: var(--text2); font-size: 12px; }
.rsc { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; text-align: center; }
.rod { font-family: 'JetBrains Mono', monospace; color: var(--gold); font-weight: 700; font-size: 13px; text-align: center; }
.rp { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; text-align: right; }
.pp { color: var(--green); }
.pn { color: var(--red); }
.pna { color: var(--text3); }
.badge { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: 0.6px; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; width: fit-content; align-self: center; justify-self: center; height: auto; line-height: 1.4; }
.bw { background: rgba(var(--green-rgb),0.1); color: var(--green); border: 1px solid rgba(var(--green-rgb),0.2); }
.bl { background: rgba(var(--red-rgb),0.1);   color: var(--red);   border: 1px solid rgba(var(--red-rgb),0.2);   }
.bp { background: rgba(var(--blue-rgb),0.1);  color: var(--blue);  border: 1px solid rgba(var(--blue-rgb),0.2);  }
.rsum { display: flex; background: var(--surface2); border-top: 1px solid var(--border); flex-wrap: wrap; }
.rsc2 { flex: 1; padding: 12px; text-align: center; border-right: 1px solid var(--border); min-width: 72px; }
.rsc2:last-child { border-right: none; }
.rv { font-family: 'Bebas Neue', cursive; font-size: 22px; letter-spacing: 1px; color: var(--gold); }
.rv-green { color: var(--green); }
.rv-red   { color: var(--red); }
.rl { font-size: 9px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; }

/* ══════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════ */
.how-sect { background: var(--surface); border-top: 1px solid var(--border); }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 36px; }
.step { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; position: relative; overflow: hidden; transition: transform var(--tr), box-shadow var(--tr); }
.step:hover { transform: translateY(-3px); box-shadow: 0 10px 32px var(--shadow); }
.step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); opacity: 0; transition: opacity 0.25s; }
.step:hover::before { opacity: 1; }
.snum { font-family: 'Bebas Neue', cursive; font-size: 44px; color: rgba(var(--gold-rgb),0.07); line-height: 1; margin-bottom: 10px; letter-spacing: 2px; }
.stit { font-family: 'Bebas Neue', cursive; font-size: 20px; letter-spacing: 0.8px; margin-bottom: 8px; }
.sbod { font-size: 12.5px; color: var(--text2); line-height: 1.75; }

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.tg { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 36px; }
.tc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; transition: border-color var(--tr), transform var(--tr); }
.tc:hover { border-color: rgba(var(--gold-rgb),0.22); transform: translateY(-2px); }
.tc::before { content: '"'; position: absolute; top: 6px; right: 12px; font-family: Georgia,serif; font-size: 56px; color: rgba(var(--gold-rgb),0.04); line-height: 1; }
.tst { color: var(--gold); font-size: 11px; letter-spacing: 2px; margin-bottom: 10px; }
.tb { font-size: 12.5px; line-height: 1.8; color: var(--text2); margin-bottom: 16px; font-style: italic; }
.ta { display: flex; align-items: center; gap: 9px; }
.tav { width: 36px; height: 36px; border-radius: 50%; background: var(--surface2); border: 2px solid var(--border2); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', cursive; font-size: 16px; color: var(--gold); flex-shrink: 0; }
.tnm { font-weight: 600; font-size: 12.5px; }
.tloc { font-size: 10px; color: var(--text3); margin-top: 1px; }
.tu { display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 700; color: var(--green); background: rgba(var(--green-rgb),0.1); border: 1px solid rgba(var(--green-rgb),0.18); padding: 2px 6px; border-radius: 3px; }

/* ══════════════════════════════════════════
   SEO ARTICLE / SIDEBAR
══════════════════════════════════════════ */
.art-sect { background: var(--surface); border-top: 1px solid var(--border); }
.aw { display: grid; grid-template-columns: 1fr 280px; gap: 36px; align-items: start; }
.am { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.aav { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', cursive; font-size: 13px; flex-shrink: 0; }
[data-theme="dark"] .aav { color: #000; }
.author-row { display: flex; align-items: center; gap: 7px; }
.aan { font-size: 12.5px; font-weight: 600; }
.adt { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text3); }
.atg { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; color: var(--blue); border: 1px solid rgba(var(--blue-rgb),0.25); background: rgba(var(--blue-rgb),0.08); }
.ah2 { font-family: 'Bebas Neue', cursive; font-size: clamp(24px,3.5vw,36px); letter-spacing: 1px; line-height: 1.1; margin-bottom: 16px; }
.alead { font-size: 15px; line-height: 1.8; color: var(--text2); margin-bottom: 22px; border-left: 3px solid var(--gold); padding-left: 16px; }
.abody p { font-size: 13px; line-height: 1.85; color: var(--text2); margin-bottom: 16px; }
.abody h3 { font-family: 'Bebas Neue', cursive; font-size: 20px; letter-spacing: 0.8px; color: var(--text); margin: 24px 0 10px; }
.abody strong { color: var(--text); font-weight: 600; }
.abody a { color: var(--gold); text-decoration: none; }
.abody a:hover { text-decoration: underline; }
.abody ul { list-style: none; margin: 0 0 18px; padding: 0; }
.abody ul li { font-size: 13px; color: var(--text2); line-height: 1.75; padding: 6px 0 6px 18px; border-bottom: 1px solid var(--border); position: relative; }
.abody ul li::before { content: '—'; color: var(--gold); position: absolute; left: 0; font-weight: 700; }
.rt { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 12.5px; }
.rt thead tr { background: var(--surface3); }
.rt th { padding: 9px 12px; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); font-weight: 700; border-bottom: 1px solid var(--border); }
.rt td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text2); transition: background var(--tr); }
.rt tr:hover td { background: var(--hover); }
.rt .rno { font-family: 'JetBrains Mono', monospace; color: var(--text3); font-size: 10px; }
.rt .rsi { color: var(--text); font-weight: 600; }
.rt .rrt { color: var(--green); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.rt .rus { background: rgba(var(--gold-rgb),0.04); }
.rt .rus .rsi { color: var(--gold); }
.rt-free    { color: var(--green); }
.rt-limited { color: var(--text3); }
.rt-paid    { color: var(--text3); }
.rt-muted   { font-size: 11.5px; color: var(--text2); }
.rt-bad     { color: var(--red); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.sbox { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.sbh { padding: 10px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.sbb { padding: 14px 16px; }
.qs { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.qs:last-child { border-bottom: none; }
.qsl { color: var(--text2); }
.qsv { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--gold); }
.qsg { color: var(--green); }
.fi { margin-bottom: 10px; }
.fq { font-size: 11.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; display: flex; align-items: flex-start; gap: 6px; }
.fq::before { content: 'Q'; color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 9px; margin-top: 1px; flex-shrink: 0; }
.fa { font-size: 11.5px; color: var(--text2); line-height: 1.6; padding-left: 14px; }
.sidebar-cta { background: rgba(var(--gold-rgb),0.05); border: 1px solid rgba(var(--gold-rgb),0.16); border-radius: var(--radius); padding: 20px; text-align: center; }
.sidebar-cta h3 { font-family: 'Bebas Neue', cursive; font-size: 20px; letter-spacing: 1px; margin-bottom: 6px; }
.sidebar-cta p { font-size: 11.5px; color: var(--text2); margin-bottom: 14px; line-height: 1.6; }

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.bc-wrap { background: var(--surface); border-bottom: 1px solid var(--border); padding-top: 56px; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text3); padding: 10px 24px; max-width: 1160px; margin: 0 auto; flex-wrap: wrap; }
.breadcrumb a { color: var(--text3); text-decoration: none; transition: color var(--tr); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--gold); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer { background: var(--surface); border-top: 1px solid var(--border); }
.fi2 { max-width: 1160px; margin: 0 auto; padding: 48px 24px 24px; }
.disc { background: rgba(var(--gold-rgb),0.04); border: 1px solid rgba(var(--gold-rgb),0.09); border-radius: var(--radius); padding: 10px 16px; font-size: 10.5px; color: var(--text3); line-height: 1.7; margin-bottom: 36px; }
.fg { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--border); }
.fb-col p { font-size: 12.5px; color: var(--text3); line-height: 1.7; max-width: 240px; margin-top: 10px; }
.fc h4 { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.fc ul { list-style: none; }
.fc li { margin-bottom: 8px; }
.fc a { font-size: 12.5px; color: var(--text3); text-decoration: none; transition: color var(--tr); }
.fc a:hover { color: var(--text); }
.fbot { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; font-size: 10.5px; color: var(--text3); flex-wrap: wrap; gap: 8px; }

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.mo-ov { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.88); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; padding: 20px; }
.mo-ov.open { opacity: 1; pointer-events: all; }
.modal { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 32px; width: 420px; max-width: 100%; position: relative; transform: translateY(16px); transition: transform 0.25s; }
.mo-ov.open .modal { transform: translateY(0); }
.mcl { position: absolute; top: 12px; right: 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); width: 28px; height: 28px; border-radius: 50%; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr); }
.mcl:hover { border-color: var(--gold); color: var(--gold); }
.mlog { font-family: 'Bebas Neue', cursive; font-size: 26px; letter-spacing: 2px; margin-bottom: 4px; }
.mlog em { color: var(--gold); font-style: normal; }
.msub { color: var(--text2); font-size: 12.5px; margin-bottom: 20px; line-height: 1.6; }
.fld { margin-bottom: 12px; }
.fld label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 5px; }
.fld input, .fld select { width: 100%; background: var(--input-bg); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-family: 'Outfit', sans-serif; font-size: 13px; outline: none; transition: border-color var(--tr); -webkit-appearance: none; }
.fld input:focus, .fld select:focus { border-color: var(--gold); }
.fld input::placeholder { color: var(--text3); }
.modal-submit-gap { margin-top: 8px; }
.modal-fine { font-size: 10.5px; color: var(--text3); margin-top: 10px; text-align: center; }

/* ══════════════════════════════════════════
   REVEAL ANIMATION
══════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.vis { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════
   HERO WRAP
══════════════════════════════════════════ */
.hero-wrap { background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 0; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cats-grid { grid-template-columns: repeat(3,1fr); }
  .stats-band { grid-template-columns: repeat(3,1fr); }
  .sc:nth-child(3) { border-right: none; }
  .sc:nth-child(4) { border-top: 1px solid var(--border); }
}
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding: 86px 24px 44px; gap: 28px; }
  .hero-panel { display: none; }
  .cg { grid-template-columns: 1fr; }
  .ck-col { flex-direction: row; }
  .aw { grid-template-columns: 1fr; }
  .art-sidebar { display: none; }
}
@media (max-width: 900px) {
  .cats-grid { grid-template-columns: repeat(2,1fr); }
  .tg { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .stats-band { grid-template-columns: repeat(2,1fr); }
  .sc { border-right: none !important; border-bottom: 1px solid var(--border); }
  .sc:nth-child(odd) { border-right: 1px solid var(--border) !important; }
  .mth { grid-template-columns: 1fr 80px 65px; min-width: unset; }
  .mth > :nth-child(n+4) { display: none; }
  .mr { grid-template-columns: 1fr 80px 65px; min-width: unset; }
  .mr > :nth-child(n+4) { display: none; }
  .rh { grid-template-columns: 48px 1.4fr 1fr 64px 60px; min-width: unset; }
  .rh > :nth-child(n+6) { display: none; }
  .rr { grid-template-columns: 48px 1.4fr 1fr 64px 60px; min-width: unset; }
  .rr > :nth-child(n+6) { display: none; }
  .fg { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 0 16px; }
  .nav-links { display: none; }
  .theme-btn { display: none; }
  .hamburger { display: flex; }
  .cats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tg { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .acca { flex-direction: column; }
  .acca::before { width: 100%; height: 3px; bottom: auto; right: 0; }
  .ar { flex-direction: row; border-left: none; border-top: 1px solid rgba(var(--gold-rgb),0.14); padding: 14px 20px; justify-content: flex-start; min-width: unset; gap: 14px; }
  .aov { font-size: 38px; }
  .ar { flex-direction: row; align-items: center; gap: 12px; }
  .mth { display: none; }
  .mr { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; border-left: none !important; min-width: unset; }
  .mr.tp { border-left: 3px solid var(--gold) !important; }
  .mo { text-align: left; }
  .mco { align-items: flex-start; }
  .mfr { align-self: flex-start; }
  .rh { display: none; }
  .rr { grid-template-columns: 1fr; gap: 5px; padding: 10px 14px; min-width: unset; }
  .rd { display: none; }
  .rsum { flex-wrap: wrap; }
  .rsc2 { min-width: 50%; }
  .fg { grid-template-columns: 1fr; }
  .fbot { flex-direction: column; text-align: center; }
  .modal { padding: 22px 16px; }
  .ck-col { flex-direction: column; }
  .si { padding: 44px 16px; }
  .si-sm { padding: 28px 16px; }
}
@media (max-width: 480px) {
  .cats-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .btn-p, .btn-g { width: 100%; justify-content: center; }
  .aov { font-size: 34px; }
  .si { padding: 36px 14px; }
  nav { padding: 0 14px; }
  .acca { flex-direction: column; }
  .hero { padding: 76px 14px 36px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO / TIP PAGES
═══════════════════════════════════════════════════════════ */
.page-hero { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 24px; padding-top: 56px; }
.page-hero-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 36px 0 32px; flex-wrap: wrap; }
.ph-h1 { font-family: 'Bebas Neue', cursive; font-size: clamp(32px, 4.5vw, 56px); letter-spacing: 2px; line-height: 1; color: var(--text); margin: 0 0 10px; }
.ph-h1 em { color: var(--gold); font-style: normal; }
.ph-sub { font-size: 13px; color: var(--text2); line-height: 1.75; max-width: 460px; margin: 0; }
.ph-sub a { color: var(--gold); text-decoration: none; }
.ph-sub a:hover { text-decoration: underline; }
.ph-stats  { display: flex; gap: 28px; flex-wrap: wrap; flex-shrink: 0; }
.ph-stat   { text-align: center; }
.ph-val    { font-family: 'Bebas Neue', cursive; font-size: 32px; letter-spacing: 1px; color: var(--gold); line-height: 1; }
.ph-val.c-green { color: var(--green); }
.ph-lbl    { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin-top: 3px; }

.filter-bar { position: sticky; top: 56px; z-index: 80; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 24px; }
.filter-bar-inner { max-width: 1160px; margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.filter-bar-inner::-webkit-scrollbar { display: none; }
.ftab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 100px; border: 1px solid var(--border); background: transparent; color: var(--text3); font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; transition: all var(--tr); flex-shrink: 0; }
.ftab:hover  { border-color: var(--gold); color: var(--text); }
.ftab.active { background: rgba(var(--gold-rgb),.1); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.ftab-n { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 100px; background: var(--surface2); color: var(--text3); }
.ftab.active .ftab-n { background: rgba(var(--gold-rgb),.15); color: var(--gold); }

.tp-wrap { max-width: 1160px; margin: 0 auto; padding: 28px 24px 64px; display: grid; grid-template-columns: 1fr 272px; gap: 28px; align-items: start; }
@media (max-width: 1024px) { .tp-wrap { grid-template-columns: 1fr; } .tp-sidebar { display: none; } }

.tp-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 16px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tp-sum-note { font-size: 12px; color: var(--text3); }
.tp-sum-note strong { color: var(--text); }
.tp-sum-stats { display: flex; gap: 20px; }
.tp-ss   { text-align: center; }
.tp-ss-v { font-family: 'Bebas Neue', cursive; font-size: 22px; color: var(--gold); letter-spacing: 1px; line-height: 1; }
.tp-ss-l { font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--text3); margin-top: 2px; }

.lg-group { margin-bottom: 24px; }
.lg-head  { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.lg-flag  { font-size: 15px; line-height: 1; }
.lg-name  { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text); }
.lg-cnt   { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text3); margin-left: auto; }

.pc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; position: relative; overflow: hidden; cursor: pointer; transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr); }
.pc:hover     { border-color: var(--border2); box-shadow: 0 4px 20px var(--shadow); transform: translateY(-1px); }
.pc.tp-pick   { border-color: rgba(var(--gold-rgb),.35); }
.pc.tp-pick::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); }
.pc-inner { display: grid; grid-template-columns: 1fr 170px 88px; align-items: center; }
@media (max-width: 640px) { .pc-inner { grid-template-columns: 1fr; } .pc-col-tip  { border-left: none; border-top: 1px solid var(--border); padding: 10px 14px 0; } .pc-col-odds { display: none; } }
.pc-col-match { padding: 13px 16px; }
.pc-teams-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; }
.pc-hn, .pc-an { font-size: 13.5px; font-weight: 700; color: var(--text); }
.pc-vs { font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
.pc-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.pc-time { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text3); }
.pc-lbadge { font-size: 9px; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; }
.pc-prob-labels { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--text3); margin-bottom: 3px; }
.pc-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--surface3); }
.pb-h { background: var(--green); height: 100%; }
.pb-d { background: var(--gold);  height: 100%; }
.pb-a { background: var(--red);   height: 100%; }
.pc-col-tip { padding: 13px 16px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.pc-mkt { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.pc-tip { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.pc-col-odds { padding: 13px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.pc-odds-val { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--gold); line-height: 1; }
.pc-dots { display: flex; gap: 3px; }
.pc-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--surface3); }
.pc-dot.on { background: var(--gold); }
.pc-clbl { font-size: 9px; color: var(--text3); }
.pc-hint { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 5px 16px 8px; font-size: 10px; color: var(--text3); border-top: 1px solid var(--border); transition: color var(--tr); user-select: none; }
.pc:hover .pc-hint { color: var(--gold); }

.an-ov { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.85); backdrop-filter: blur(10px); align-items: center; justify-content: center; padding: 20px; }
.an-ov.open { display: flex; }
.an-modal { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); width: 100%; max-width: 680px; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 64px var(--shadow); animation: anIn .2s cubic-bezier(.4,0,.2,1); }
@keyframes anIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.an-modal::-webkit-scrollbar { width: 3px; }
.an-modal::-webkit-scrollbar-thumb { background: var(--gold-d); border-radius: 2px; }
.an-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.an-title { font-family: 'Bebas Neue', cursive; font-size: 22px; letter-spacing: 1px; color: var(--text); line-height: 1.1; }
.an-title em { color: var(--gold); font-style: normal; }
.an-head-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.an-htime { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text3); }
.an-close { width: 30px; height: 30px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr); flex-shrink: 0; }
.an-close:hover { border-color: var(--gold); color: var(--gold); }
.an-tip-bar { margin: 14px 20px 0; background: rgba(var(--gold-rgb),.06); border: 1px solid rgba(var(--gold-rgb),.2); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-tip-lbl  { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin-bottom: 2px; }
.an-tip-val  { font-size: 14px; font-weight: 700; color: var(--text); }
.an-tip-odds { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; color: var(--gold); line-height: 1; }
.an-body { padding: 18px 20px 22px; }
.an-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 480px) { .an-stats { grid-template-columns: repeat(2,1fr); } }
.an-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.an-stat.span4 { grid-column: span 4; }
@media (max-width: 480px) { .an-stat.span4 { grid-column: span 2; } }
.an-stat-v        { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--gold); line-height: 1; }
.an-stat-v.c-green{ color: var(--green); }
.an-stat-v.c-sm   { font-size: 11px; line-height: 1.4; color: var(--text2); }
.an-stat-l        { font-size: 9px; text-transform: uppercase; letter-spacing: .7px; color: var(--text3); margin-top: 3px; }
.an-prob-labels { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text3); margin-bottom: 5px; }
.an-prob-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--surface2); margin-bottom: 18px; }
.an-sec { font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--gold); display: block; margin-bottom: 8px; }
.an-form-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.an-form-team { font-size: 11.5px; font-weight: 600; color: var(--text); width: 100px; flex-shrink: 0; }
.an-form-dots { display: flex; gap: 4px; }
.fmd   { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fmd-w { background: var(--green); color: #000; }
.fmd-d { background: var(--gold);  color: #fff; }
[data-theme="dark"] .fmd-d { color: #000; }
.fmd-l { background: var(--red);   color: #fff; }
.an-text { font-size: 13px; color: var(--text2); line-height: 1.85; margin-bottom: 14px; border-left: 3px solid var(--gold); padding-left: 14px; }
.an-factors { display: flex; flex-wrap: wrap; gap: 5px; }
.an-factor { font-size: 10.5px; padding: 4px 10px; border-radius: 100px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); }
.an-factor.pos { border-color: rgba(24,201,106,.35); color: var(--green); background: rgba(24,201,106,.07); }
.an-factor.neg { border-color: rgba(232,64,64,.35);  color: var(--red);   background: rgba(232,64,64,.07); }

.tp-sidebar { display: flex; flex-direction: column; gap: 14px; }
.sb-acca { background: var(--surface); border: 1px solid rgba(var(--gold-rgb),.22); border-radius: var(--radius); overflow: hidden; }
.sb-acca-hd { background: rgba(var(--gold-rgb),.05); padding: 10px 14px; border-bottom: 1px solid rgba(var(--gold-rgb),.14); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold); }
.sb-acca-body { padding: 12px 14px; }
.sb-acca-leg { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.sb-acca-leg:last-child { border-bottom: none; }
.sb-leg-m { font-size: 12.5px; font-weight: 600; color: var(--text); }
.sb-leg-t { font-size: 10px; color: var(--text3); margin-top: 1px; }
.sb-leg-o { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--gold); }
.sb-acca-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; margin-top: 4px; border-top: 1px solid rgba(var(--gold-rgb),.18); }
.sb-total-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); font-weight: 700; }
.sb-total-val { font-family: 'Bebas Neue', cursive; font-size: 32px; letter-spacing: 1px; color: var(--gold); line-height: 1; }
.sb-method { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sb-method:last-child { border-bottom: none; }
.sb-method-icon { width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0; background: rgba(var(--gold-rgb),.08); border: 1px solid rgba(var(--gold-rgb),.18); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700; color: var(--gold); }
.sb-method-lbl  { font-size: 11.5px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.sb-method-desc { font-size: 10.5px; color: var(--text3); line-height: 1.5; }
.tp-article { background: var(--surface); border-top: 1px solid var(--border); }

/* ── Pagination bar ── */
.pag-bar { display:flex; align-items:center; gap:6px; margin:24px 0 8px; flex-wrap:wrap; }
.pag-info { font-size:.75rem; font-weight:600; color:var(--text3); margin-right:8px; white-space:nowrap; }
.pag-item { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:var(--radius); font-family:Outfit,sans-serif; font-size:.83rem; font-weight:600; text-decoration:none; border:1px solid var(--border2); color:var(--text2); background:var(--surface); transition:background .15s,color .15s,border-color .15s; cursor:pointer; }
.pag-item:hover { background:rgba(var(--gold-rgb),.1); border-color:rgba(var(--gold-rgb),.4); color:var(--gold); }
.pag-current { background:var(--gold) !important; border-color:var(--gold) !important; color:#fff !important; font-weight:800; pointer-events:none; }
[data-theme="dark"] .pag-current { color:#000 !important; }
.pag-disabled { opacity:.3; pointer-events:none; cursor:default; }
.pag-arrow { padding:0 14px; }
.pag-ellipsis { display:inline-flex; align-items:center; color:var(--text3); padding:0 4px; font-size:.85rem; }

/* ── Result type chips ── */
.mr-chip { display:inline-block; padding:2px 10px; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.mr-chip.home { background:rgba(99,200,120,.15); color:#63c878; }
.mr-chip.draw { background:rgba(var(--gold-rgb),.13); color:var(--gold); }
.mr-chip.away { background:rgba(99,161,255,.15); color:#63a1ff; }

/* ── Results-specific styles ── */
.pc-result { pointer-events:none; cursor:default; }
.pc-result:hover { transform:none; box-shadow:none; border-color:var(--border); }
.pc-result.res-won  { border-left:3px solid var(--green); }
.pc-result.res-lost { border-left:3px solid var(--red); }
.pc-result.res-void { border-left:3px solid var(--text3); }
.pc-score { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--text); text-align:center; line-height:1; }
.pc-score-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.7px; color:var(--text3); text-align:center; margin-top:3px; }
.pc-col-outcome { padding:13px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.outcome-badge { display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:4px 10px; border-radius:3px; white-space:nowrap; }
.ob-won  { background:rgba(24,201,106,.1);  color:var(--green); border:1px solid rgba(24,201,106,.25); }
.ob-lost { background:rgba(232,64,64,.1);   color:var(--red);   border:1px solid rgba(232,64,64,.25); }
.ob-void { background:rgba(255,255,255,.05);color:var(--text3); border:1px solid var(--border2); }
.pc-pl { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; }
.pc-pl.pos { color:var(--green); }
.pc-pl.neg { color:var(--red); }
.pc-pl.neu { color:var(--text3); }
.pc-inner-res { display:grid; grid-template-columns:1fr 160px 64px 88px; align-items:center; }
@media (max-width:640px) { .pc-inner-res { grid-template-columns:1fr auto; } .pc-col-score { display:none; } }
.res-scorecard { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:24px; }
@media (max-width:640px) { .res-scorecard { grid-template-columns:repeat(3,1fr); } }
.rsc-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 12px; text-align:center; }
.rsc-item.won  { border-color:rgba(24,201,106,.25);  background:rgba(24,201,106,.05); }
.rsc-item.lost { border-color:rgba(232,64,64,.25);   background:rgba(232,64,64,.05); }
.rsc-item.rate { border-color:rgba(var(--gold-rgb),.25); background:rgba(var(--gold-rgb),.05); }
.rsc-val { font-family:'Bebas Neue',cursive; font-size:30px; letter-spacing:1px; line-height:1; color:var(--gold); }
.rsc-item.won  .rsc-val { color:var(--green); }
.rsc-item.lost .rsc-val { color:var(--red); }
.rsc-item.rate .rsc-val { color:var(--gold); }
.rsc-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); margin-top:3px; }

@media (max-width:768px) {
  .page-hero { padding: 0 16px; }
  .page-hero-inner { flex-direction:column; align-items:flex-start; gap:18px; padding:24px 0 20px; }
  .ph-stats { gap:20px; }
  .tp-wrap  { padding:18px 16px 48px; }
  .filter-bar { padding-left:16px; padding-right:16px; }
}

/* ════════════════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════════════════ */
.about-hero{background:var(--bg-depth,#0a0a0a);border-bottom:1px solid var(--border);padding:48px 0 40px}
.about-hero-inner{max-width:1100px;margin:0 auto;padding:0 24px}
.about-breadcrumb{font-size:.76rem;color:rgba(255,255,255,.45);margin-bottom:18px}
.about-breadcrumb a{color:rgba(255,255,255,.45);text-decoration:none}
.about-breadcrumb a:hover{color:var(--gold)}
.about-breadcrumb span{margin:0 6px;opacity:.5}
.about-hero-content{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px}
.about-hero-text{flex:1;min-width:280px}
.about-h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:.04em;color:#fff;line-height:1.05;margin:0 0 14px}
.about-h1 em{color:var(--gold);font-style:normal}
.about-sub{font-size:1rem;color:rgba(255,255,255,.6);max-width:560px;line-height:1.7;margin:0}
.about-hero-stats{display:flex;gap:32px;flex-shrink:0;padding-bottom:4px}
.ahs-item{text-align:center}
.ahs-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:.04em;color:var(--gold);line-height:1}
.ahs-lbl{font-size:.7rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.about-wrap{max-width:1100px;margin:0 auto;padding:56px 24px 80px}
.about-section{margin-bottom:8px}
.as-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:8px}
.as-h2{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.04em;color:var(--text);margin:0 0 28px;line-height:1.15}
.as-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.as-text p{line-height:1.78;color:var(--text2);margin-bottom:14px;font-size:.95rem}
.as-text a{color:var(--gold);text-decoration:none}
.as-text a:hover{text-decoration:underline}
.as-text strong{color:var(--text)}
.as-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ash-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px}
.ash-num{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--gold);background:var(--surface2);padding:3px 8px;border-radius:4px;display:inline-block;margin-bottom:10px}
.ash-title{font-weight:700;font-size:.88rem;color:var(--text);margin-bottom:6px}
.ash-desc{font-size:.8rem;line-height:1.6;color:var(--text2)}
.about-divider{height:1px;background:var(--border);margin:48px 0}
.about-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.asg-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px}
.asg-card.top{border-color:var(--gold)}
.asg-market{font-weight:700;font-size:.85rem;color:var(--text);margin-bottom:8px}
.asg-rate{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.04em;color:var(--gold);line-height:1}
.asg-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:8px}
.asg-bar{height:4px;background:var(--border);border-radius:2px;margin:8px 0}
.asg-fill{height:4px;background:var(--gold);border-radius:2px}
.asg-note{font-size:.76rem;line-height:1.55;color:var(--text2)}
.about-commitment{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.acom-text p{line-height:1.78;color:var(--text2);margin-bottom:14px;font-size:.95rem}
.acom-text a{color:var(--gold);text-decoration:none}
.acom-text a:hover{text-decoration:underline}
.acom-text strong{color:var(--text)}
.acom-principles{display:flex;flex-direction:column;gap:12px}
.acp-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:.86rem;line-height:1.6;color:var(--text2)}
.acp-check{color:var(--gold);font-size:1rem;flex-shrink:0;margin-top:1px;font-weight:700}
.acp-item strong{color:var(--text)}
.about-leagues{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.al-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:.86rem;font-weight:500;color:var(--text2)}
.about-team{display:flex;flex-direction:column;gap:24px}
.team-card{display:flex;gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px}
.team-card.featured{border-color:var(--gold)}
.tc-avatar{width:52px;height:52px;border-radius:50%;background:var(--gold);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1.6rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme="dark"] .tc-avatar{color:#000}
.tc-name{font-weight:700;font-size:1rem;color:var(--text);margin-bottom:2px}
.tc-role{font-size:.78rem;color:var(--gold);margin-bottom:12px;font-weight:600}
.tc-bio{font-size:.86rem;line-height:1.72;color:var(--text2);margin-bottom:10px}
.tc-bio:last-child{margin-bottom:0}
.tc-bio a{color:var(--gold);text-decoration:none}
.tc-bio a:hover{text-decoration:underline}
.team-values{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tv-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px}
.tv-title{font-weight:700;font-size:.88rem;color:var(--text);margin-bottom:6px}
.tv-desc{font-size:.8rem;line-height:1.6;color:var(--text2)}
.about-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ac-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;flex-direction:column}
.ac-title{font-weight:700;font-size:1rem;color:var(--text);margin-bottom:12px}
.ac-card p{font-size:.86rem;line-height:1.72;color:var(--text2);flex:1;margin-bottom:16px}
.ac-card a:not(.ac-btn){color:var(--gold);text-decoration:none}
.ac-card a:not(.ac-btn):hover{text-decoration:underline}
.ac-btn{display:inline-block;text-decoration:none}
.about-cta-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:56px;padding:28px 32px;background:var(--surface);border:1px solid var(--gold);border-radius:14px}
.acs-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.04em;color:var(--text);margin-bottom:4px}
.acs-sub{font-size:.84rem;color:var(--text2)}
.acs-links{display:flex;flex-wrap:wrap;gap:10px}
.about-cta-strip .btn-p,.ac-card .btn-p{color:#fff !important;text-decoration:none !important}
[data-theme="dark"] .about-cta-strip .btn-p,[data-theme="dark"] .ac-card .btn-p{color:#000 !important}
.about-cta-strip .btn-g,.ac-card .btn-g{text-decoration:none !important}
@media(max-width:960px){.as-body{grid-template-columns:1fr}.about-commitment{grid-template-columns:1fr}.about-stats-grid{grid-template-columns:repeat(2,1fr)}.team-values{grid-template-columns:1fr 1fr}.about-contact{grid-template-columns:1fr 1fr}.about-leagues{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.about-hero-content{flex-direction:column;align-items:flex-start}.about-hero-stats{gap:20px}.as-highlights{grid-template-columns:1fr}.about-stats-grid{grid-template-columns:1fr}.team-values{grid-template-columns:1fr}.about-contact{grid-template-columns:1fr}.about-leagues{grid-template-columns:repeat(2,1fr)}.about-cta-strip{flex-direction:column;align-items:flex-start;padding:20px}.acs-links{width:100%}.acs-links .btn-p,.acs-links .btn-g{flex:1;text-align:center}}

/* ════════════════════════════════════════════════════════
   BETTING GUIDE
════════════════════════════════════════════════════════ */
.guide-hero{background:var(--bg-depth,#0a0a0a);border-bottom:1px solid var(--border);padding:40px 0 32px}
.guide-hero-inner{max-width:1140px;margin:0 auto;padding:0 24px}
.guide-breadcrumb{font-size:.76rem;color:rgba(255,255,255,.5);margin-bottom:14px}
.guide-breadcrumb a{color:rgba(255,255,255,.5);text-decoration:none}
.guide-breadcrumb a:hover{color:var(--gold)}
.guide-breadcrumb span{margin:0 6px;opacity:.5}
.guide-h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3rem);letter-spacing:.04em;color:#fff;line-height:1.1;margin:0 0 10px}
.guide-sub{font-size:1rem;color:rgba(255,255,255,.65);max-width:640px;line-height:1.6;margin-bottom:20px}
.guide-meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.guide-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;font-weight:900;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme="dark"] .guide-avatar{color:#000}
.guide-author{font-weight:600;font-size:.84rem;color:#fff}
.guide-date{font-size:.76rem;color:rgba(255,255,255,.55)}
.guide-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:4px;background:transparent;color:var(--gold);border:1px solid var(--gold)}
.guide-wrap{max-width:780px;margin:0 auto;padding:48px 24px 80px}
.guide-body{width:100%}
.guide-toc-inline{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:10px;padding:20px 24px;margin-bottom:36px}
.gtoc-title{font-family:'Bebas Neue',sans-serif;font-size:.9rem;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;margin-bottom:12px}
.gtoc-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.gtoc-list li{font-size:.9rem;line-height:1.4}
.gtoc-list a{color:var(--gold);text-decoration:none}
.gtoc-list a:hover{text-decoration:underline}
.guide-lead{font-size:1.05rem;line-height:1.8;color:var(--text2);border-left:3px solid var(--gold);padding-left:18px;margin-bottom:40px}
.guide-body section{margin-bottom:48px}
.guide-body h2{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.04em;color:var(--text);margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--border)}
.guide-body h3{font-size:1.0rem;font-weight:700;color:var(--text);margin:24px 0 8px}
.guide-body p{line-height:1.78;color:var(--text2);margin-bottom:14px}
.guide-body a{color:var(--gold);text-decoration:none}
.guide-body a:hover{text-decoration:underline}
.guide-body strong{color:var(--text)}
.guide-body .btn-p{color:#fff !important;text-decoration:none !important}
[data-theme="dark"] .guide-body .btn-p{color:#000 !important}
.guide-body .btn-g{color:var(--text) !important;text-decoration:none !important}
.guide-callout{display:flex;gap:14px;background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:8px;padding:16px 18px;margin:20px 0;font-size:.88rem;line-height:1.65;color:var(--text2)}
.gc-icon{font-size:1.4rem;flex-shrink:0;line-height:1.2}
.guide-steps{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.gs-step{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-size:.88rem;line-height:1.65;color:var(--text2)}
.gs-num{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
[data-theme="dark"] .gs-num{color:#000}
.market-grid{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.mkt-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;transition:border-color .2s}
.mkt-card:hover{border-color:var(--gold)}
.mkt-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:8px}
.mkt-num{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--text3);background:var(--surface2);padding:3px 7px;border-radius:4px;flex-shrink:0;margin-top:2px}
.mkt-name{font-weight:700;font-size:.95rem;color:var(--text);margin-bottom:4px}
.mkt-name a{color:var(--text);text-decoration:none}
.mkt-name a:hover{color:var(--gold)}
.mkt-stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mkt-rate{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--gold)}
.mkt-tag{font-size:.68rem;color:var(--text3);background:var(--surface2);padding:2px 8px;border-radius:10px}
.mkt-card p{font-size:.86rem;line-height:1.7;color:var(--text2);margin:0}
.guide-dots-legend{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin:16px 0}
.gdl-row{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--text2);line-height:1.5}
.gdl-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);flex-shrink:0}
.guide-table{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:16px 0;font-size:.85rem}
.gt-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.gt-row>div{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text2)}
.gt-row:last-child>div{border-bottom:none}
.gt-head{background:var(--surface2)}
.gt-head>div{font-weight:700;color:var(--text);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.guide-support{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.gs-link{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 16px;text-decoration:none;transition:border-color .15s}
.gs-link:hover{border-color:var(--gold)}
.gsl-name{font-weight:700;font-size:.88rem;color:var(--gold)}
.gsl-desc{font-size:.78rem;color:var(--text2)}
.guide-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:48px;padding:24px;background:var(--surface2);border-radius:12px;border:1px solid var(--border)}
.gct-title{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.04em;color:var(--text);margin-bottom:4px}
.gct-sub{font-size:.82rem;color:var(--text2)}
.gct-links{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:600px){.guide-h1{font-size:1.8rem}.guide-wrap{padding:32px 16px 60px}.guide-cta{flex-direction:column}.gct-links{width:100%}.gct-links .btn-p,.gct-links .btn-g{flex:1;text-align:center}.gt-row{grid-template-columns:1fr 1fr}.gt-row>div:last-child{display:none}}

/* ── Cat nav bar ── */
.cat-bar{position:sticky;top:56px;z-index:80;background:var(--bg);border-bottom:1px solid var(--border);padding:0 24px}
.cat-bar-inner{max-width:1160px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.cat-bar-inner::-webkit-scrollbar{display:none}
.c-green{color:var(--green)}

/* ── Accumulator page ── */
.acca-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:20px;transition:border-color .2s}
.acca-card.acca-featured{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.acca-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.acca-head-left{flex:1;min-width:0}
.acca-name{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:.04em;color:var(--text);line-height:1.2;margin-bottom:8px}
.acca-meta-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.acca-head-right{text-align:right;flex-shrink:0}
.acca-odds-label{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.acca-combined-odds{font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:700;color:var(--gold);line-height:1}
.acca-rationale{font-size:.82rem;color:var(--text2);line-height:1.6;margin-bottom:16px;padding:12px 14px;background:var(--surface2);border-radius:8px;border-left:3px solid var(--gold)}
.acca-legs{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.acca-leg{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface2);border-radius:8px;transition:background .15s}
.acca-leg:hover{background:var(--surface3)}
.acca-leg-num{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;font-weight:700;font-size:.72rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme="dark"] .acca-leg-num{color:#000}
.acca-leg-body{flex:1;min-width:0}
.acca-leg-fixture{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.acca-leg-teams{font-weight:600;font-size:.84rem;color:var(--text)}
.acca-leg-time{font-size:.72rem;color:var(--text3);margin-left:auto}
.acca-leg-tip-row{display:flex;align-items:center;gap:8px}
.acca-leg-market{font-size:.70rem;color:var(--text3);background:var(--surface);padding:2px 7px;border-radius:4px}
.acca-leg-tip{font-size:.78rem;font-weight:600;color:var(--gold)}
.acca-leg-odds{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--text);flex-shrink:0;min-width:40px;text-align:right}
.acca-foot{display:flex;gap:12px;flex-wrap:wrap;padding:12px 14px;background:var(--surface2);border-radius:8px}
.acca-foot-return{display:flex;flex-direction:column;gap:2px}
.acca-foot-label{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.acca-foot-val{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.95rem;color:var(--green)}
@media(max-width:600px){.acca-head{flex-direction:column}.acca-head-right{text-align:left}.acca-foot{gap:20px}.acca-leg-time{display:none}}

/* ── BTTS chips ── */
.btts-chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.btts-yes{background:rgba(24,201,106,.12);color:var(--green);border:1px solid rgba(24,201,106,.3)}
.btts-no{background:rgba(232,64,64,.1);color:var(--red);border:1px solid rgba(232,64,64,.25)}

/* ── Results archive day blocks ── */
.res-day-block{margin-bottom:28px}
.res-day-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 14px;background:var(--surface);border-radius:10px;margin-bottom:6px;border-left:3px solid var(--gold)}
.res-day-date{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.06em;color:var(--text)}
.res-day-stats{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.76rem}
.rds-won{color:var(--green);font-weight:600}
.rds-lost{color:var(--red);font-weight:600}
.rds-void{color:var(--text3)}
.rds-rate{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--text);background:var(--surface2);padding:2px 8px;border-radius:4px}
.rds-pl{font-family:'JetBrains Mono',monospace;font-weight:700;padding:2px 8px;border-radius:4px}
.rds-pl.pos{color:var(--green);background:rgba(24,201,106,.08)}
.rds-pl.neg{color:var(--red);background:rgba(232,64,64,.08)}
@media(max-width:600px){.res-day-head{flex-direction:column;align-items:flex-start}}