/* ============ TOKENS ============ */
/* Footlab Design System tokens — amber #f1b04c / mint #4dd2b2 / navy.
   --primary = brand amber, --gold = brand mint (kept this var name to avoid churn). */
:root {
  --radius: 0.625rem;
  --background: #f8fafc;        /* bg-1 */
  --foreground: #0f172a;        /* text */
  --surface: #eef2f7;           /* bg-2 */
  --surface-elevated: #ffffff;  /* panel */
  --card: #ffffff;
  --muted: #e2e8f0;             /* track / chip bg */
  --muted-foreground: #64748b;
  --primary: #b45309;           /* amber, darkened for light-mode contrast */
  --primary-foreground: #ffffff;
  --destructive: #d6492f;
  --border: rgba(15, 23, 42, 0.12);
  --gold: #2f9e85;              /* mint, darkened for light-mode contrast */
  --wash-a: rgba(241, 176, 76, 0.05);
  --wash-b: rgba(77, 210, 178, 0.06);
}
html.dark {
  --background: #0c111a;        /* bg-1 */
  --foreground: #e9edf3;        /* text */
  --surface: #0b1521;           /* bg-2 */
  --surface-elevated: #161c28;  /* panel */
  --card: #11192a;
  --muted: #1c2433;             /* track / chip bg */
  --muted-foreground: #a1afc2;
  --primary: #f1b04c;           /* brand amber */
  --primary-foreground: #0c111a;
  --destructive: #ff7a7a;
  --border: rgba(233, 237, 243, 0.10);
  --gold: #4dd2b2;             /* brand mint */
  --wash-a: rgba(241, 176, 76, 0.04);
  --wash-b: rgba(77, 210, 178, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; border-color: var(--border); }
html { color-scheme: light dark; scroll-behavior: smooth; overflow-x: hidden; }
body {
  background:
    radial-gradient(circle at 20% 5%, var(--wash-a), transparent 35%),
    radial-gradient(circle at 85% 95%, var(--wash-b), transparent 40%),
    var(--background);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, .brand-name, .hero-h1, .sec-title, .cta-h2, .step-title { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
svg { display: block; }
.tnum { font-variant-numeric: tabular-nums; font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif; letter-spacing: 0; }
.big-score, .cta-h2 .tnum { font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif; }

/* ============ HELPERS ============ */
.glass {
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
}
.wrap { max-width: 80rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-left: 2rem; padding-right: 2rem; } }
.text-primary { color: var(--primary); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--muted-foreground); }
.data-grid-bg {
  background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--primary) 40%, transparent) 1px, transparent 0);
  background-size: 36px 36px;
}

/* eyebrow / pills */
.eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.3em; color: var(--primary); display: inline-flex; align-items: center; gap: 8px;
}
.pill-glass {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px;
  border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.2em;
}

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* dots */
.live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--destructive); display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.ping-wrap { position: relative; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); display: inline-block; }
.ping-wrap::after { content:''; position:absolute; inset:0; border-radius:999px; background: var(--primary); animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%,100% { transform: scale(2.4); opacity: 0; } }
@keyframes float-slow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.float { animation: float-slow 6s ease-in-out infinite; }

/* ============ NAV ============ */
nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
}
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 30px; height: 30px; display: block; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-weight: 700; letter-spacing: -0.03em; font-size: 19px; font-family: 'Space Grotesk', sans-serif; }
.nav-links { display: none; align-items: center; gap: 32px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.nav-links a:hover { color: var(--foreground); }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-right { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: transparent; border: none; cursor: pointer; color: var(--muted-foreground); transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.btn-solid {
  display: none; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 6px;
  background: var(--foreground); color: var(--background); font-size: 13px; font-weight: 600; cursor: pointer; border: none;
  transition: opacity .2s;
}
.btn-solid:hover { opacity: .9; }
@media (min-width: 640px) { .btn-solid { display: inline-flex; } }

/* ============ HERO ============ */
.hero { position: relative; height: 100vh; min-height: 720px; width: 100%; overflow: hidden; }
.hero-bg-grid { position: absolute; inset: 0; opacity: .4; }
.hero-map { position: absolute; inset: 0; opacity: .7; }
.hero-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 900px; height: 900px; max-width: 130vw; max-height: 130vw; border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--primary) 18%, transparent) 0%, transparent 60%);
}
.fade-top { position: absolute; left: 0; right: 0; top: 0; height: 128px; pointer-events: none; background: linear-gradient(to bottom, var(--background), transparent); }
.fade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none; background: linear-gradient(to top, var(--background), transparent); }
.hero-content { position: relative; height: 100%; padding-top: 96px; padding-bottom: 48px; display: flex; flex-direction: column; }
@media (min-width: 640px) { .hero-content { padding-top: 112px; } }
.hero-grid { display: grid; gap: 40px; flex: 1; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: repeat(12, 1fr); } }
.hero-left { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) { .hero-left { grid-column: span 7; } }
.hero-h1 { font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; font-size: clamp(2.75rem, 8vw, 6.5rem); }
.grad-primary-gold { background: linear-gradient(to bottom right, var(--primary), var(--primary), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; font-weight: 300; }
.hero-p { font-size: 1.0625rem; color: var(--muted-foreground); max-width: 52ch; line-height: 1.65; }
@media (min-width: 640px) { .hero-p { font-size: 1.125rem; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 6px; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: 14px; cursor: pointer; border: none;
  transition: box-shadow .3s, transform .3s;
}
.btn-primary:hover { box-shadow: 0 0 40px -8px var(--primary); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 6px; white-space: nowrap;
  font-weight: 600; font-size: 14px; cursor: pointer; transition: background .2s;
}
.btn-ghost:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }
.btn-primary:hover .ar { transform: translateX(2px); }
.ar { transition: transform .2s; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }
.hero-stats b { color: var(--foreground); font-weight: 600; }
.cdot { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; }
.hero-comps { display: flex; flex-direction: column; gap: 12px; }
.hc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
.hc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 50%, transparent); font-size: 13px; font-weight: 600; transition: border-color .2s, transform .2s; }
.hc-chip:hover { border-color: color-mix(in oklab, var(--primary) 45%, transparent); transform: translateY(-2px); }

.hero-right { display: none; position: relative; height: 520px; }
@media (min-width: 1024px) { .hero-right { display: block; grid-column: span 5; } }
.hero-widgets-mobile { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .hero-widgets-mobile { display: none; } }

/* widgets */
.widget { border-radius: 12px; padding: 16px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.4); }
.widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.w-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.bar-track { height: 4px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); transition: width .8s ease-out; }

.scroll-cue { display: none; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
@media (min-width: 768px) { .scroll-cue { display: flex; } }
.scroll-cue .line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--primary), transparent); }

/* ============ SECTIONS ============ */
section.block { position: relative; padding: 128px 0; border-top: 1px solid var(--border); }
.block.alt { background: color-mix(in oklab, var(--surface) 40%, transparent); }
.sec-head { display: flex; flex-direction: column; gap: 24px; max-width: 64rem; }
@media (min-width: 1024px) { .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.sec-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; max-width: 42rem; }
@media (min-width: 640px) { .sec-title { font-size: 3rem; } }
.sec-desc { color: var(--muted-foreground); max-width: 28rem; text-wrap: pretty; }

/* live engine */
.engine-grid { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .engine-grid { grid-template-columns: repeat(3, 1fr); } }
.engine-main { border-radius: 16px; padding: 24px; position: relative; overflow: hidden; }
@media (min-width: 640px) { .engine-main { padding: 32px; } }
@media (min-width: 1024px) { .engine-main { grid-column: span 2; } }
.engine-side { display: flex; flex-direction: column; gap: 20px; }
.score-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; margin-bottom: 40px; }
.big-score { font-size: clamp(3rem, 6vw, 3.75rem); font-weight: 700; letter-spacing: -0.02em; }
.dim { color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); }
.seg-track { height: 6px; background: var(--muted); border-radius: 999px; overflow: hidden; display: flex; }
.radar-card svg text { font-family: 'JetBrains Mono', monospace; }

/* competitions */
.comp-grid { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 640px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .comp-grid { grid-template-columns: repeat(4, 1fr); } }
.comp-card { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; cursor: pointer; }
.comp-card .grad { position: absolute; inset: 0; opacity: .8; transition: opacity .3s; }
.comp-card:hover .grad { opacity: 1; }
.comp-card .glow { position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; border-radius: 999px; filter: blur(48px); opacity: .4; transition: opacity .3s; }
.comp-card:hover .glow { opacity: .8; }
.comp-inner { position: relative; height: 100%; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.comp-card .ar2 { transition: transform .3s, color .2s; color: var(--muted-foreground); }
.comp-card:hover .ar2 { transform: rotate(12deg); color: var(--foreground); }
.comp-spark { position: absolute; left: 24px; right: 24px; bottom: 80px; opacity: .4; transition: opacity .3s; }
.comp-card:hover .comp-spark { opacity: .9; }

/* how it helps */
.steps { margin-top: 80px; position: relative; }
.steps-line { position: absolute; left: 26px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--primary) 30%, transparent), transparent); display: none; }
@media (min-width: 640px) { .steps-line { display: block; } }
.step { display: grid; gap: 24px; align-items: start; }
@media (min-width: 640px) { .step { grid-template-columns: 56px 1fr; } }
@media (min-width: 1024px) { .step { grid-template-columns: 56px 1fr 1fr; gap: 48px; } }
.steps-stack { display: flex; flex-direction: column; gap: 80px; }
@media (min-width: 640px) { .steps-stack { gap: 128px; } }
.step-icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; position: relative; z-index: 1; }
.step-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); margin-bottom: 12px; }
.step-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; max-width: 36rem; }
@media (min-width: 640px) { .step-title { font-size: 1.875rem; } }
.step-desc { margin-top: 16px; color: var(--muted-foreground); line-height: 1.65; max-width: 28rem; }
.step-viz { display: none; }
@media (min-width: 1024px) { .step-viz { display: block; } }
.viz { border-radius: 12px; padding: 20px; height: 176px; }
.code-line { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted-foreground); }

/* match experience */
.match-card { margin-top: 64px; border-radius: 24px; overflow: hidden; }
.match-head { padding: 24px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 640px) { .match-head { padding: 24px 40px; } }
.tag-ucl { padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent); }
.match-body { padding: 32px 24px; }
@media (min-width: 640px) { .match-body { padding: 32px 40px; } }
.match-strip { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--border); }
@media (min-width: 1024px) { .match-strip { grid-template-columns: repeat(4,1fr); } }
.strip-cell { padding: 20px 24px; border-right: 1px solid var(--border); }

/* why footlab */
.why-grid { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card { position: relative; border-radius: 16px; padding: 28px; transition: transform .3s; }
.why-card:hover { transform: translateY(-4px); }
.why-card .topline { position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; opacity: .5; transition: opacity .3s; background: linear-gradient(90deg, transparent, var(--primary), transparent); }
.why-card:hover .topline { opacity: 1; }
.why-icon { width: 40px; height: 40px; border-radius: 8px; background: color-mix(in oklab, var(--primary) 10%, transparent); display: grid; place-items: center; margin-bottom: 20px; transition: background .2s; }
.why-card:hover .why-icon { background: color-mix(in oklab, var(--primary) 15%, transparent); }

/* final cta */
.cta { position: relative; padding: 128px 0; border-top: 1px solid var(--border); overflow: hidden; }
@media (min-width: 640px) { .cta { padding: 160px 0; } }
.cta-glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 800px; height: 800px; max-width: 130vw; max-height: 130vw; border-radius: 999px; pointer-events: none; background: radial-gradient(circle, color-mix(in oklab, var(--primary) 20%, transparent) 0%, transparent 60%); }
.cta-inner { position: relative; max-width: 56rem; margin: 0 auto; text-align: center; }
.cta-h2 { font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(2.25rem, 6vw, 4.75rem); }
.btn-dark { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 32px; border-radius: 6px; background: var(--foreground); color: var(--background); font-weight: 600; font-size: 15px; cursor: pointer; border: none; transition: transform .3s; }
.btn-dark:hover { transform: scale(1.02); }
.btn-ghost-lg { display: inline-flex; align-items: center; height: 56px; padding: 0 32px; border-radius: 6px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s; }
.btn-ghost-lg:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }

/* footer */
footer { border-top: 1px solid var(--border); padding: 40px 0; }
.foot-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
@media (min-width: 768px) { .foot-inner { flex-direction: row; } }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.foot-links a:hover { color: var(--foreground); }
.foot-mark { width: 22px; height: 22px; display: block; }
.foot-mark svg { width: 100%; height: 100%; }

/* ============ PROMO BANNER ============ */
.promo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--primary); color: var(--primary-foreground); }
.promo-inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 6px 44px; text-align: center; font-size: 12.5px; font-weight: 600; }
.promo-inner .promo-pill { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; background: var(--primary-foreground); color: var(--primary); padding: 1px 9px; border-radius: 5px; letter-spacing: 0; }
.promo-inner a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.promo-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: none; background: transparent; color: var(--primary-foreground); cursor: pointer; opacity: .8; border-radius: 5px; }
.promo-close:hover { opacity: 1; background: rgba(0,0,0,.12); }
body.has-promo nav.top { top: 40px; }
body.has-promo .hero-content { padding-top: 136px; }
@media (max-width: 600px) { .promo-inner { font-size: 11px; padding: 6px 40px; } .promo-inner .promo-pill { font-size: 14px; } }

/* ============ NAV EXTRAS ============ */
.comp-switch { display: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent); font-size: 11px; font-weight: 600; color: var(--foreground); cursor: pointer; }
.comp-switch:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.comp-switch .dotmark { width: 14px; height: 14px; border-radius: 4px; background: var(--gold); display: inline-block; }
@media (min-width: 1180px) { .comp-switch { display: inline-flex; } }
.lang-wrap { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; border-radius: 6px; border: none; background: transparent; color: var(--muted-foreground); font-size: 12px; font-weight: 600; cursor: pointer; }
.lang-btn:hover { background: var(--muted); color: var(--foreground); }
.lang-menu { position: absolute; top: 42px; right: 0; min-width: 150px; border-radius: 10px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 70; }
.lang-menu.open { display: flex; }
.lang-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; border: none; background: transparent; color: var(--foreground); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.lang-menu button:hover { background: var(--muted); }
.lang-menu button.active { color: var(--primary); font-weight: 700; }
.lang-menu .ccode { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted-foreground); margin-left: auto; }
.lang-menu .cdot { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; }
.btn-login { display: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; background: transparent; border: 1px solid var(--border); color: var(--foreground); font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-login:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
@media (min-width: 1024px) { .btn-login { display: inline-flex; } }

/* ============ MOBILE NAV (hamburger + drawer) ============ */
.nav-burger { display: none; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; }
.nav-burger:hover { background: var(--muted); }
.nav-burger span { width: 20px; height: 2px; border-radius: 2px; background: var(--foreground); transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s; }
body.mnav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mnav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.mnav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1023px) { .nav-burger { display: flex; } }
/* on phones, fold the inline lang/login/CTA into the drawer to declutter */
@media (max-width: 1023px) {
  .nav-right .lang-wrap, .nav-right .btn-login, .nav-right .btn-solid { display: none; }
}
body.mnav-open { overflow: hidden; }

.mobile-drawer { position: fixed; inset: 0; z-index: 120; display: none; }
.mobile-drawer.open { display: block; }
.mobile-drawer::before { content: ""; position: absolute; inset: 0; background: rgba(4, 8, 14, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; }
.mobile-drawer.in::before { opacity: 1; }
.md-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: var(--surface-elevated, var(--card)); border-left: 1px solid var(--border); padding: 80px 22px 28px; display: flex; flex-direction: column; gap: 24px; transform: translateX(100%); transition: transform .34s cubic-bezier(.16,1,.3,1); overflow-y: auto; box-shadow: -16px 0 48px -12px rgba(0,0,0,.5); }
.mobile-drawer.in .md-panel { transform: none; }
.md-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: none; background: var(--muted); border-radius: 10px; color: var(--foreground); display: grid; place-items: center; cursor: pointer; }
.md-close:hover { color: var(--primary); }
.md-sec { display: flex; flex-direction: column; }
.md-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); margin-bottom: 6px; }
.md-link { display: flex; align-items: center; min-height: 50px; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--foreground); border-bottom: 1px solid var(--border); }
.md-link.active { color: var(--primary); }
.md-comp { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--foreground); }
.md-comp .cdot { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.md-comp.active { color: var(--primary); }
.md-comp-tag { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.md-langs { display: flex; gap: 8px; }
.md-lang { min-width: 48px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; cursor: pointer; }
.md-lang.active { border-color: color-mix(in oklab, var(--primary) 45%, transparent); color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }
.md-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 12px; background: var(--primary); color: var(--primary-foreground); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .md-panel { transition: none; } .mobile-drawer::before { transition: none; } }

/* ============ HERO COUNTDOWN ============ */
.kickoff { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; align-self: flex-start; }
.kickoff .ko-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
.kickoff .ko-time { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: 0; color: var(--foreground); }
.kickoff .ko-time b { color: var(--primary); }

/* ============ FIXTURES TICKER ============ */
.fixtures-marquee { margin-top: 56px; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fixtures-track { display: flex; gap: 16px; width: max-content; animation: fx-scroll 48s linear infinite; }
.fixtures-marquee:hover .fixtures-track { animation-play-state: paused; }
@keyframes fx-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fixtures-track { animation: none; flex-wrap: nowrap; overflow-x: auto; } }
.fx-card { width: 280px; flex: none; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.fx-top { display: flex; align-items: center; justify-content: space-between; }
.fx-comp { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.fx-status { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 999px; }
.st-live { background: color-mix(in oklab, var(--destructive) 14%, transparent); color: var(--destructive); }
.st-done { background: var(--muted); color: var(--muted-foreground); }
.st-soon { background: color-mix(in oklab, var(--gold) 16%, transparent); color: var(--gold); }
.st-up { background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.fx-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-team { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.fx-team span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-team-a { justify-content: flex-end; text-align: right; }
.fx-vs { font-size: 9px; color: var(--muted-foreground); flex: none; }
.flag { width: 26px; height: 26px; flex: none; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: var(--muted); border: 1px solid var(--border); }
.flag .flag-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag.flag-tbd { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; color: var(--muted-foreground); }
.flag[data-tone="home"] { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--primary) 45%, transparent); }
.flag[data-tone="away"] { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--gold) 40%, transparent); }
.fx-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.odd { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 8px; background: color-mix(in oklab, var(--muted) 55%, transparent); border: 1px solid transparent; }
.odd-lab { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--muted-foreground); }
.odd-val { font-size: 16px; font-weight: 700; }
.odd-home { border-color: color-mix(in oklab, var(--primary) 22%, transparent); }
.odd-away { border-color: color-mix(in oklab, var(--gold) 22%, transparent); }
.fx-foot { font-size: 10px; color: var(--muted-foreground); text-align: center; }

/* ============ INFO / LEGAL BANNER ============ */
.legal-strip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; border: 1px dashed color-mix(in oklab, var(--muted-foreground) 35%, transparent); background: color-mix(in oklab, var(--muted) 30%, transparent); color: var(--muted-foreground); font-size: 12.5px; line-height: 1.5; }
.legal-strip i { flex: none; color: var(--primary); }
.legal-strip b { color: var(--foreground); font-weight: 600; }

/* ============ BANKROLL / TRACKING ============ */
.track-grid { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .track-grid { grid-template-columns: 1.45fr 1fr; align-items: start; } }
.track-chart { border-radius: 20px; padding: 28px; }
.track-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.kpi { padding: 14px; border-radius: 12px; background: color-mix(in oklab, var(--muted) 40%, transparent); }
.kpi .kpi-n { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.kpi .kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.kpi-pos .kpi-n { color: var(--gold); }
.kpi-neg .kpi-n { color: var(--destructive); }
.chart-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-legend { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted-foreground); }
.understand-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--primary); cursor: pointer; background: none; border: none; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; }
.understand-link:hover { text-decoration: underline; }
.picks-card { border-radius: 20px; padding: 24px; }
.picks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pick-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pick-row:last-child { border-bottom: none; }
.pick-date { font-size: 10px; color: var(--muted-foreground); }
.pick-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-match { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-meta { font-size: 10px; color: var(--muted-foreground); }
.pick-res { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.pick-win .pick-res { background: color-mix(in oklab, var(--gold) 18%, transparent); color: var(--gold); }
.pick-loss .pick-res { background: color-mix(in oklab, var(--destructive) 16%, transparent); color: var(--destructive); }
.pick-val { font-size: 15px; font-weight: 700; text-align: right; min-width: 64px; }
.pick-win .pick-val { color: var(--gold); }
.pick-loss .pick-val { color: var(--destructive); }
.policy { margin-top: 20px; display: grid; gap: 10px; }
.policy-item { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }
.policy-item i { flex: none; color: var(--gold); margin-top: 2px; }

/* ============ GROUPS ============ */
.groups-grid { margin-top: 56px; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .groups-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .groups-grid { grid-template-columns: repeat(6, 1fr); } }
.group-card { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s, border-color .25s; }
.group-card:hover { transform: translateY(-3px); }
.group-top { display: flex; align-items: center; justify-content: space-between; }
.group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); font-weight: 600; }
.group-teams { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.group-teams li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.grp-rank { font-size: 10px; color: var(--muted-foreground); width: 10px; }
.group-teams .flag { width: 22px; height: 22px; font-size: 8px; }
.grp-name { font-weight: 600; }
.grp-pts { margin-left: auto; font-size: 9px; color: var(--muted-foreground); }

/* ============ FREEMIUM STRIP ============ */
.free-strip { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 24px; border-radius: 16px; }
.free-strip .free-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 15%, transparent); color: var(--gold); flex: none; }
.free-strip .free-txt { flex: 1; min-width: 220px; }
.free-strip .free-txt h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.free-strip .free-txt p { font-size: 12.5px; color: var(--muted-foreground); }

/* ============ PRICING ============ */
.pricing-grid { margin-top: 56px; display: grid; gap: 20px; }
@media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { position: relative; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 18px; transition: transform .3s, border-color .3s; }
.plan:hover { transform: translateY(-4px); }
.plan-pop { border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent); box-shadow: 0 0 50px -18px var(--primary); }
.plan-badge { position: absolute; top: -11px; left: 28px; font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; background: var(--primary); color: var(--primary-foreground); padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.plan-name { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; color: var(--muted-foreground); }
.plan-price { display: flex; align-items: flex-end; gap: 6px; }
.plan-price .amt { font-family: 'Barlow Condensed', sans-serif; font-size: 44px; font-weight: 800; line-height: 0.9; letter-spacing: 0; background: linear-gradient(135deg, var(--primary), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-price .per { font-size: 12px; color: var(--muted-foreground); margin-bottom: 6px; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: color-mix(in oklab, var(--foreground) 88%, transparent); line-height: 1.45; }
.plan-feats .chk { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 18%, transparent); color: var(--gold); font-size: 10px; font-weight: 800; margin-top: 1px; }
.plan-feats .chk.muted { background: var(--muted); color: var(--muted-foreground); }
.plan-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--foreground); transition: background .2s, box-shadow .3s; }
.plan-cta:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.plan-cta.primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.plan-cta.primary:hover { box-shadow: 0 0 36px -8px var(--primary); }
.plan-note { font-size: 11px; color: var(--muted-foreground); text-align: center; }

/* ============ METHOD / CREDIBILITY ============ */
.cred-card { margin-top: 48px; border-radius: 20px; padding: 32px; display: grid; gap: 24px; }
@media (min-width: 768px) { .cred-card { grid-template-columns: auto 1fr; align-items: center; } }
.cred-badge { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.cred-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.cred-card p { font-size: 13.5px; color: var(--muted-foreground); line-height: 1.6; }
.cred-card a { color: var(--primary); }

/* ============ FOOTER EXPANDED ============ */
.foot-top { display: grid; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brandcol { display: flex; flex-direction: column; gap: 14px; max-width: 30ch; }
.foot-brandcol .fb-row { display: flex; align-items: center; gap: 8px; }
.foot-brandcol .fb-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; }
.foot-brandcol p { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.6; }
.foot-col h5 { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 13px; color: color-mix(in oklab, var(--foreground) 82%, transparent); margin-bottom: 10px; }
.foot-col a:hover { color: var(--primary); }
.foot-warn { margin-top: 32px; padding: 18px 20px; border-radius: 12px; background: color-mix(in oklab, var(--destructive) 6%, transparent); border: 1px solid color-mix(in oklab, var(--destructive) 18%, transparent); display: flex; gap: 12px; font-size: 12px; color: var(--muted-foreground); line-height: 1.55; }
.foot-warn i { flex: none; color: var(--destructive); margin-top: 1px; }
.foot-warn b { color: var(--foreground); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 28px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }
.foot-socials { display: flex; gap: 10px; }
.foot-socials a { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--muted-foreground); }
.foot-socials a:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 40%, transparent); }

/* ============ MODALS ============ */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 8, 14, 0.62); backdrop-filter: blur(6px); }
.modal.open { display: flex; }
.modal-card { width: 100%; max-width: 420px; border-radius: 20px; padding: 28px; position: relative; max-height: 90vh; overflow: auto; }
.modal-card.wide { max-width: 560px; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: none; background: var(--muted); color: var(--muted-foreground); cursor: pointer; }
.modal-close:hover { color: var(--foreground); }
.modal-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; }
.modal-sub { font-size: 13px; color: var(--muted-foreground); margin-bottom: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.field input { height: 44px; border-radius: 8px; border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); padding: 0 14px; color: var(--foreground); font-size: 14px; font-family: inherit; }
.field input:focus { outline: none; border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.modal-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 20px; }
.modal-row label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.modal-card .understand-body { display: flex; flex-direction: column; gap: 14px; }
.understand-body .ub-item { display: flex; gap: 12px; font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }
.understand-body .ub-item .n { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; color: var(--primary); flex: none; }
.search-input { width: 100%; height: 50px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); padding: 0 16px; color: var(--foreground); font-size: 15px; font-family: inherit; }
.search-input:focus { outline: none; border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.search-hint { font-size: 12px; color: var(--muted-foreground); margin-top: 12px; }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.search-chips a { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--muted) 50%, transparent); border: 1px solid var(--border); }
.search-chips a:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); color: var(--primary); }

/* ============ COOKIE BANNER ============ */
.cookie-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 90; max-width: 520px; margin: 0 auto; border-radius: 14px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; box-shadow: 0 16px 48px -12px rgba(0,0,0,.5); }
.cookie-banner p { font-size: 12.5px; color: var(--muted-foreground); flex: 1; min-width: 200px; line-height: 1.5; }
.cookie-banner p a { color: var(--primary); }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions button { height: 36px; padding: 0 16px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--foreground); }
.cookie-actions button.accept { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }

/* ============ CONTEXT BAR (compétition active + accès) ============ */
.ctx-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 55%, transparent); font-size: 12.5px; margin-bottom: 20px; }
.ctx-bar .cb-comp { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.ctx-bar .cb-sep { width: 1px; height: 16px; background: var(--border); }
.ctx-bar .cb-tier { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.ctx-bar .cb-tier.warn { color: var(--destructive); }
.ctx-bar .cb-note { font-size: 12px; color: var(--muted-foreground); }
.ctx-bar .cb-note a { color: var(--primary); }
.ctx-bar .cb-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary); }
.nav-links a.active { color: var(--foreground); position: relative; }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--primary); }
.lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: var(--foreground); font-size: 13px; font-weight: 500; text-align: left; }
.lang-menu a:hover { background: var(--muted); }
.lang-menu a.active { color: var(--primary); font-weight: 700; }

/* ---- grouped competition switcher ---- */
#comp-menu { min-width: 280px; padding: 6px; }
.comp-menu-scroll { max-height: min(64vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px; }
.comp-menu-scroll::-webkit-scrollbar { width: 7px; }
.comp-menu-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 7px; }
.cm-group { display: flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); padding: 12px 8px 6px; }
.cm-group i { color: var(--primary); }
.comp-item { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 8px; color: var(--foreground); text-decoration: none; }
.comp-item:hover { background: var(--muted); }
.comp-item .cm-mono { width: 30px; flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0; text-align: center; }
.comp-item .cm-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-item .cm-flag { font-family: 'JetBrains Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); padding: 2px 6px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent); flex: none; }
.comp-item .cm-check { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--border); }
.comp-item.active { background: color-mix(in oklab, var(--primary) 12%, transparent); }
.comp-item.active .cm-name { color: var(--primary); font-weight: 700; }
.comp-item.active .cm-check { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 42%, transparent 46%); }
.cb-type { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border); }
.comp-pills .comp-pill .cp-mono { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0; margin-right: 2px; }

/* ---- global match push toasts ---- */
.fl-push-host { position: fixed; left: 16px; bottom: 16px; z-index: 95; display: flex; flex-direction: column-reverse; gap: 10px; max-width: min(340px, calc(100vw - 32px)); }
.fl-push { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 14px; background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: blur(16px); border: 1px solid var(--border); border-left: 3px solid var(--pt); box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); text-decoration: none; color: var(--foreground); transform: translateX(-120%); opacity: 0; transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .34s; }
.fl-push.in { transform: none; opacity: 1; }
.fl-push .fp-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in oklab, var(--pt) 16%, transparent); color: var(--pt); }
.fl-push .fp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fl-push .fp-comp { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.fl-push .fp-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.fl-push .fp-sub { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-push .fp-x { flex: none; background: none; border: none; color: var(--muted-foreground); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fl-push .fp-x:hover { color: var(--foreground); }
@media (prefers-reduced-motion: reduce) { .fl-push { transition: opacity .2s; transform: none; } }

/* ---- shared lineup pitch (compos + buteurs + banc) ---- */
.fl-lineup { display: flex; flex-direction: column; gap: 0; }
.fl-lu-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.fl-lu-head .fl-lu-team { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; }
.fl-lu-head .fl-lu-mid { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.fl-pitch { position: relative; display: flex; height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, #163a23, #0e2718 60%, #0c2014); }
.fl-pitch::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.16); }
.fl-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.fl-pitch { background-image: linear-gradient(160deg, #163a23, #0e2718 60%, #0c2014), repeating-linear-gradient(90deg, transparent 0 11.11%, rgba(255,255,255,.025) 11.11% 22.22%); }
.fl-half { flex: 1; display: flex; padding: 16px 6px; position: relative; z-index: 1; }
.fl-half.away { flex-direction: row-reverse; }
.fl-col { flex: 1; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
.fl-pl { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.fl-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.fl-dot.home { background: var(--accent, #f1b04c); color: #0c111a; }
.fl-dot.away { background: var(--accent-2, #4dd2b2); color: #0c111a; }
.fl-goal { position: absolute; top: -5px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.fl-nm { font-size: 9px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; max-width: 62px; overflow: hidden; text-overflow: ellipsis; font-family: 'DM Sans', sans-serif; font-weight: 500; }
.fl-bench { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 16px; }
.fl-bench-col .bt { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); margin-bottom: 8px; }
.fl-bench-col.away { text-align: right; }
.fl-bench-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12.5px; color: color-mix(in oklab, var(--text, #e9edf3) 88%, transparent); }
.fl-bench-col.away .fl-bench-row { flex-direction: row-reverse; }
.fl-bench-row .bn { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; min-width: 18px; text-align: center; }
@media (max-width: 560px) { .fl-pitch { height: 260px; } .fl-nm { display: none; } .fl-dot { width: 26px; height: 26px; font-size: 12px; } }

/* ---- live value-bet opportunity alert (paying tiers) ---- */
.fl-value { position: fixed; top: 78px; left: 50%; transform: translate(-50%, -16px); z-index: 130; width: min(380px, calc(100vw - 28px));
  display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 16px; text-decoration: none; color: var(--foreground);
  background: linear-gradient(135deg, color-mix(in oklab, var(--gold) 18%, var(--surface)), color-mix(in oklab, var(--primary) 12%, var(--surface)));
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent); box-shadow: 0 18px 48px -14px rgba(0,0,0,.55), 0 0 0 0 color-mix(in oklab, var(--gold) 40%, transparent);
  opacity: 0; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s; }
.fl-value.in { transform: translate(-50%, 0); opacity: 1; animation: flValGlow 2.2s ease-in-out infinite; }
@keyframes flValGlow { 50% { box-shadow: 0 18px 48px -14px rgba(0,0,0,.55), 0 0 22px -2px color-mix(in oklab, var(--gold) 55%, transparent); } }
.fl-value .fv-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 22%, transparent); color: var(--gold); }
.fl-value .fv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-value .fv-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.fl-value .fv-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.fl-value .fv-title b { font-family: 'Barlow Condensed', sans-serif; color: var(--gold); }
.fl-value .fv-sub { font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-value .fv-cta { flex: none; height: 34px; padding: 0 13px; border-radius: 9px; background: var(--gold); color: #0c111a; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; }
.fl-value .fv-x { position: absolute; top: 8px; right: 9px; background: none; border: none; color: var(--muted-foreground); font-size: 16px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .fl-value.in { animation: none; } .fl-value { transition: opacity .2s; transform: translate(-50%,0); } }

/* ---- home hub: competition categories ---- */
.cat-grid { margin-top: 64px; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card { position: relative; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; transition: transform .25s, border-color .25s; }
.cat-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.cat-card .cat-glow { position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 999px; filter: blur(48px); opacity: .35; pointer-events: none; }
.cat-card .cat-top { display: flex; align-items: center; gap: 10px; position: relative; }
.cat-card .cat-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.cat-card .cat-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-card .cat-tmpl { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.cat-card .cat-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.15; letter-spacing: -0.01em; }
.cat-card .cat-list { display: flex; flex-direction: column; gap: 2px; position: relative; }
.cat-chip { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 9px; text-decoration: none; color: var(--foreground); }
.cat-chip:hover { background: var(--muted); }
.cat-chip .cc-mono { width: 30px; flex: none; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; }
.cat-chip .cc-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-chip .cc-flag { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); padding: 2px 6px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent); flex: none; }
.cat-chip .cc-go { width: 14px; height: 14px; color: var(--muted-foreground); flex: none; opacity: 0; transition: opacity .2s; }
.cat-chip:hover .cc-go { opacity: 1; }

/* ============ FREEGATE (conversion) ============ */
.freegate { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; padding: 20px 24px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--primary) 32%, transparent); background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 9%, transparent), color-mix(in oklab, var(--gold) 6%, transparent)); }
.freegate .fg-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 16%, transparent); color: var(--primary); flex: none; }
.freegate .fg-txt { flex: 1; min-width: 240px; }
.freegate .fg-txt h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; font-family: 'Space Grotesk', sans-serif; }
.freegate .fg-txt p { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }
.freegate .fg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.freegate .fg-primary { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: 13.5px; border: none; cursor: pointer; transition: box-shadow .3s; }
.freegate .fg-primary:hover { box-shadow: 0 0 30px -8px var(--primary); }
.freegate .fg-ghost { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border); color: var(--foreground); font-weight: 600; font-size: 13.5px; }
.freegate.compact { padding: 14px 16px; margin-top: 18px; }
.freegate.compact .fg-ico { width: 34px; height: 34px; }
.freegate.compact .fg-txt h4 { font-size: 13.5px; }
.freegate.compact .fg-txt p { font-size: 11.5px; }
.freegate.compact .fg-primary, .freegate.compact .fg-ghost { height: 36px; font-size: 12.5px; }

/* ============ OFFER TEASER (home) ============ */
.offer-teaser { margin-top: 56px; display: grid; gap: 14px; }
@media (min-width: 760px) { .offer-teaser { grid-template-columns: repeat(3, 1fr); } }
.ot-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 16px; transition: transform .25s, border-color .25s; }
.ot-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.ot-card .ot-name { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.ot-card .ot-price { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ot-card .ot-line { font-size: 12.5px; color: var(--muted-foreground); }
.ot-card .ot-go { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }

/* ---- portfolio selector bar (suivi de performance) ---- */
.pf-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 36px 0 8px; }
.pf-sel { display: flex; flex-direction: column; gap: 6px; }
.pf-sel label { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.pf-sel select { height: 42px; min-width: 200px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 70%, transparent); color: var(--foreground); padding: 0 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; }
.pf-sel select:focus { outline: none; border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.pf-tag { align-self: center; margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); }
.pf-tag b { color: var(--foreground); }

/* ============ COMPARATOR ============ */
.compare-card { margin-top: 56px; border-radius: 24px; overflow: hidden; }
.compare-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 28px 32px; border-bottom: 1px solid var(--border); }
.compare-team { display: flex; align-items: center; gap: 12px; }
.compare-team.away { justify-content: flex-end; }
.compare-team .ct-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; }
.compare-team .flag { width: 38px; height: 38px; border-radius: 9px; }
.compare-vs { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted-foreground); letter-spacing: 0.1em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); }
.compare-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 22px; }
.cmp-row { display: grid; gap: 8px; }
.cmp-row-top { display: flex; align-items: center; justify-content: space-between; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 700; }
.cmp-row-top .cmp-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.cmp-h { color: var(--primary); }
.cmp-a { color: var(--gold); }
.cmp-bar { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--gold) 55%, transparent); overflow: hidden; display: flex; }
.cmp-bar .cmp-fill { height: 100%; background: var(--primary); border-radius: 999px 0 0 999px; transition: width 1s cubic-bezier(.16,1,.3,1); }
.cmp-winner { font-size: 10px; }

/* ============ MATCH DETAIL MODAL ============ */
.modal-card.match { max-width: 720px; padding: 0; align-self: flex-start; margin-top: 8vh; }
.md-head { padding: 24px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.md-teams { display: flex; align-items: center; gap: 18px; }
.md-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.md-team .flag { width: 40px; height: 40px; border-radius: 10px; }
.md-team span { font-size: 12px; font-weight: 600; }
.md-score { font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: 0; }
.md-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.md-prob { display: flex; flex-direction: column; gap: 8px; }
.md-events { display: flex; flex-direction: column; gap: 10px; }
.md-event { display: grid; grid-template-columns: 44px 20px 1fr; align-items: center; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.md-event:last-child { border-bottom: none; }
.md-event .me-min { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted-foreground); }
.md-event .me-ico { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; }
.me-goal { background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--primary); }
.me-yellow { background: color-mix(in oklab, var(--gold) 24%, transparent); color: var(--gold); }
.me-shot { background: var(--muted); color: var(--muted-foreground); }
.md-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.md-stat { padding: 14px; border-radius: 12px; background: color-mix(in oklab, var(--muted) 40%, transparent); }
.md-stat .ms-v { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; }
.md-stat .ms-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); font-family: 'JetBrains Mono', monospace; margin-top: 4px; }
.fx-card { cursor: pointer; }
.fx-card:hover { border-color: color-mix(in oklab, var(--primary) 35%, transparent); }