/* =====================================================
   OddsVista — Premium UI (EN)
   Cleaned, deduped, production-ready
   ===================================================== */

/* ----------------- Tokens ----------------- */
:root{
  /* palette */
  --bg:#0b1020;
  --bg2:#0a142d;
  --fg:#e6e9ef;
  --muted:#a7adbd;
  --accent:#6ee7ff;   /* cyan */
  --accent2:#7cff9f;  /* neon green */
  --card:#131721;
  --border:#23314f;
  --shadow:rgba(0,0,0,.22);

  /* bg gradient palette */
  --bg-start:#0a0f2b; --bg-mid:#142e4f; --bg-end:#2a0f4a;
  --accent1:#6b7cff; --accentP:#9b5cff; --accent3:#2dd4bf;
}

/* ----------------- Base / Reset ----------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--fg);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden; position:relative;

  /* unified background */
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(107,124,255,.15), transparent 60%),
    radial-gradient(900px 600px at 100% 10%, rgba(155,92,255,.18), transparent 60%),
    linear-gradient(135deg, var(--bg-start), var(--bg-mid), var(--bg-end));
  animation:bgShift 14s ease-in-out infinite alternate;
}

/* subtle mesh + noise */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.06;
  background-image:
    linear-gradient(transparent 24px, rgba(255,255,255,.05) 25px),
    linear-gradient(90deg, transparent 24px, rgba(255,255,255,.05) 25px);
  background-size:25px 25px,25px 25px;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" stitchTiles="stitch"/></filter><rect width="48" height="48" filter="url(%23n)"/></svg>');
  background-size:180px 180px;
}

a{color:var(--accent);text-decoration:none}
a:hover{opacity:.92}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

.muted{color:var(--muted)}
.small{font-size:.95rem}
.tiny{font-size:.8rem}
.kicker{font-size:.85rem;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}

/* depth helpers */
.bg-glow{position:fixed; inset:0; pointer-events:none; background:
  radial-gradient(800px 500px at 20% 10%, rgba(107,124,255,.22), transparent 60%),
  radial-gradient(900px 550px at 90% 0%, rgba(155,92,255,.18), transparent 60%),
  radial-gradient(700px 480px at 10% 100%, rgba(45,212,191,.16), transparent 60%);
  transition: transform .3s ease-out;
}
.grid-mesh{position:fixed; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay; transition: transform .3s ease-out}
.noise{position:fixed; inset:0; pointer-events:none; opacity:.06;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%221%22 stitchTiles=%22stitch%22/></filter><rect width=%2248%22 height=%2248%22 filter=%22url(%23n)%22/></svg>');
  background-size:180px 180px;
}

/* ----------------- Header / Nav ----------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(10,14,28,.92), rgba(10,14,28,.70));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(110,231,255,.14);
  transition:all .25s ease;
}
.site-header.scrolled{
  background:rgba(10,14,28,.96);
  border-color:rgba(124,255,159,.22);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.nav-flex{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:12px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.2px}
.logo-mark{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#001018;font-weight:900;
  box-shadow:0 0 25px rgba(124,255,159,.35), 0 0 22px rgba(110,231,255,.25);
}
.nav{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.nav a{margin:0; font-weight:600; opacity:.95}
.nav a:hover{opacity:1}
.langsel{
  background:#0f1219;color:var(--fg);border:1px solid var(--border);
  border-radius:10px;padding:4px 6px;font-size:14px
}

/* language row (scrollable pills) */
.site-header + .container.tiny{
  display:block; overflow:auto; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none; padding:6px 0 10px;
}
.site-header + .container.tiny::-webkit-scrollbar{display:none}
.site-header + .container.tiny span{ margin-right:10px; opacity:.8 }
.site-header + .container.tiny a{
  display:inline-block; margin-right:8px; padding:4px 10px 5px;
  border-radius:999px; font-size:.92rem; letter-spacing:.02em;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.site-header + .container.tiny a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  opacity:1;
}

/* ----------------- Layout / Cards ----------------- */
.card{
  background:linear-gradient(180deg, rgba(20,28,52,.85), rgba(14,20,36,.85));
  border:1px solid var(--border);
  border-radius:18px; padding:24px;
  box-shadow:0 10px 30px var(--shadow);
}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.hero-card{position:relative; overflow:hidden; margin-top:18px}
.hero-grid{position:relative; display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:center}
.hero-left{display:flex; flex-direction:column; gap:12px}

/* blobs */
.blob{position:absolute; border-radius:50%; filter:blur(60px)}
.blob.t1{inset:-40px -80px auto auto; width:360px; height:360px; background:radial-gradient(circle at 30% 30%, rgba(124,255,159,.22), transparent 60%)}
.blob.b1{inset:auto auto -60px -80px; width:420px; height:420px; background:radial-gradient(circle at 60% 60%, rgba(110,231,255,.18), transparent 60%)}

/* hero content */
.hero-center{text-align:center;padding:26px 14px 6px}
.hero-title{font-size:46px;line-height:1.02;letter-spacing:.3px;margin:4px 0 10px}
.hero-sub{color:var(--muted);max-width:70ch;margin:0 auto 14px}

/* ticker */
.hero-ticker{
  overflow:hidden;white-space:nowrap;border:1px solid rgba(110,231,255,.2);
  border-radius:12px;padding:6px 10px;background:rgba(10,20,34,.35);
  color:var(--muted);font-size:.9rem
}
.hero-ticker .stream{display:inline-block;padding-left:100%;animation:ticker 18s linear infinite}

/* highlight (right glass card) */
.highlight{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 16px;border-radius:16px;border:1px solid rgba(124,255,159,.18);
  background:linear-gradient(180deg, rgba(124,255,159,.08), rgba(110,231,255,.06));
  box-shadow:0 16px 40px var(--shadow);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.highlight:hover{ transform:translateY(-3px); box-shadow:0 22px 60px var(--shadow); border-color:rgba(110,231,255,.28) }
.highlight .tag{ font-size:.8rem;padding:6px 8px;border-radius:10px; border:1px solid rgba(110,231,255,.25);color:var(--accent); background:rgba(10,20,34,.65) }
.highlight .meta{margin:8px 0 10px}
.highlight .note{color:var(--muted); margin:6px 0}
.highlight .trend{position:absolute; right:16px; bottom:12px; font-weight:700; opacity:.65}
.highlight .trend.up{color:#7CFFA7}

/* marquee flags */
.marquee{overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); margin-top:14px}
.marquee .track{white-space:nowrap; padding:8px 0; opacity:.7; animation: marquee 18s linear infinite}

/* ----------------- Buttons ----------------- */
.btn-tele{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:14px;font-weight:900;color:#001018;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  box-shadow:0 10px 25px rgba(110,231,255,.28), 0 0 0 2px rgba(124,255,159,.12) inset;
  transition:transform .12s ease, box-shadow .2s ease;
  backdrop-filter:blur(8px);
}
.btn-tele::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 40%, transparent 60%);
  transform:translateX(-120%); transition:transform .8s ease; border-radius:inherit; pointer-events:none;
}
.btn-tele:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(110,231,255,.35), 0 0 0 2px rgba(124,255,159,.2) inset}
.btn-tele:hover::after{transform:translateX(120%)}
.btn-tele svg{width:18px;height:18px;transition:transform .2s ease}
.btn-tele:hover svg{transform:scale(1.08) rotate(-3deg)}
.btn-tele.pulse{animation:pulse 2.2s ease-in-out infinite}

/* glass variant */
.btn-tele.glass-cta{
  border-radius:16px; backdrop-filter: blur(10px);
  background: linear-gradient(135deg, rgba(107,124,255,.22), rgba(155,92,255,.22)); border:1px solid rgba(255,255,255,.18);
  gap:.55rem; padding:.8rem 1.1rem; box-shadow:0 6px 18px rgba(64,34,120,.35);
  transition:transform .18s ease, box-shadow .25s ease;
}
.btn-tele.glass-cta:hover{transform: translateY(-2px) scale(1.01); box-shadow:0 10px 28px rgba(64,34,120,.55)}
.btn-tele.glass-cta .tg{opacity:.9; transition: transform .2s ease}
.btn-tele.glass-cta:hover .tg{transform: scale(1.08) rotate(-3deg)}
.btn-tele.glass-cta .sheen{position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 40%, transparent 60%); transform: translateX(-120%); transition: transform .8s ease}
.btn-tele.glass-cta:hover .sheen{transform: translateX(120%)}

/* green variant (telegram vibe) */
.btn-tele.glass-cta.btn-green{
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border: 1px solid rgba(34,197,94,.5);
  color: #fff;
  box-shadow: 0 6px 20px rgba(34,197,94,.35), 0 0 22px rgba(34,197,94,.25);
}
.btn-tele.glass-cta.btn-green:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(34,197,94,.5), 0 0 30px rgba(34,197,94,.4);
}

/* hero cta sizing */
.hero-cta{display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap}
.hero-cta .btn-tele{
  font-size:1.25rem; padding:16px 36px; border-radius:14px; color:#fff; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(270deg,#6EE7B7,#3B82F6,#8B5CF6,#EC4899); background-size:600% 600%; animation:gradientMove 8s ease infinite;
  box-shadow:0 10px 26px rgba(59,130,246,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.hero-cta .btn-tele .tg{ width:22px; height:22px; margin-right:10px }

/* ----------------- KPI Badge (single, final) ----------------- */
.kpi-hero{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:8px 0 4px }
.kpi-badge{
  position:relative; display:inline-flex; align-items:center; gap:10px; isolation:isolate;
  padding:10px 14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.kpi-badge::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:.60;
  background:linear-gradient(135deg, rgba(124,255,159,.45), rgba(110,231,255,.45));
  padding:1px; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.kpi-badge::after{
  content:""; position:absolute; inset:-24px -28px; z-index:-1; border-radius:28px;
  background:
    radial-gradient(120px 80px at 30% 30%, rgba(124,255,159,.18), transparent 60%),
    radial-gradient(140px 90px at 70% 60%, rgba(110,231,255,.16), transparent 60%);
  filter: blur(18px); opacity:.9;
}
.kpi-label{ font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.kpi-value{
  font-weight:900; font-variant-numeric:tabular-nums;
  font-size:clamp(28px, 9.5vw, 44px); line-height:1.03; letter-spacing:.2px; color:#eef2ff;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.kpi-meta{ font-size:.95rem; color:var(--muted); text-align:center; opacity:.9 }

/* hide old neon number/particles if вдруг подключены где-то */
.hero-card .kpi, .hero-card .kpi-shadow, .hero-card .particles { display:none !important }

/* ----------------- Utilities ----------------- */
.trust{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:10px}
.trust .chip{ font-size:.85rem;color:var(--muted);border:1px solid var(--border); border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.02) }

.blob.t1,.blob.b1{will-change:transform,opacity}

/* ----------------- Animations ----------------- */
@keyframes ticker{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-100%,0,0)}}
@keyframes pulse{
  0%{transform:translateY(0);box-shadow:0 10px 25px rgba(110,231,255,.28)}
  50%{transform:translateY(-1px);box-shadow:0 14px 30px rgba(110,231,255,.38)}
  100%{transform:translateY(0);box-shadow:0 10px 25px rgba(110,231,255,.28)}
}
@keyframes bgShift{0%{filter:hue-rotate(0deg) saturate(105%)} 100%{filter:hue-rotate(12deg) saturate(120%)}}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes gradientMove{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
@keyframes heroBreath{
  0%   { transform:translate3d(0,0,0) scale(1);      filter:hue-rotate(0deg) }
  100% { transform:translate3d(-2%,1%,0) scale(1.03); filter:hue-rotate(10deg) }
}
.hero-card::before{
  content:""; position:absolute; inset:-30% -10%; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 40% at 20% 10%, rgba(107,124,255,.20), transparent 65%),
    radial-gradient(55% 45% at 85% 20%, rgba(45,212,191,.16), transparent 65%),
    radial-gradient(45% 35% at 10% 90%, rgba(155,92,255,.14), transparent 65%);
  filter:saturate(120%); animation:heroBreath 14s ease-in-out infinite alternate;
}

/* ----------------- Responsive ----------------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .grid{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .container { padding: 0 14px }
  .site-header { backdrop-filter: blur(10px); border-bottom: 1px solid rgba(110,231,255,.14) }
  .nav-flex { min-height: 52px }
  .logo-mark { width: 34px; height: 34px; border-radius: 10px }
  .logo { gap: 8px; font-size: .98rem }
  .nav { gap:8px 12px; justify-content:flex-end }
  .nav a { font-size:.95rem; opacity:.95 }

  /* опционально скрыть вторичное меню */
  .nav a[href*="/leagues/"], .nav a[href*="/countries/"], .nav a[href*="/teams/"]{ display:none }

  .hero-grid{ grid-template-columns: 1fr !important; gap:14px }
  .hero-card, .card { padding: 18px !important; border-radius: 16px }
  .hero-center{ padding:18px 8px 6px }

  .hero-title{ font-size:clamp(22px, 5.5vw, 32px); line-height:1.08; text-align:center; margin:6px 0 8px }
  .hero-sub{ font-size:.98rem; line-height:1.45; margin:0 auto 10px; max-width:60ch; text-align:center }

  .hero-cta{ justify-content:center; gap:10px; margin-top:16px }
  .btn-tele{ width:100%; max-width:560px }

  .hero-ticker{ font-size:.92rem; padding:6px 8px }
  .hero-ticker .stream { animation-duration:24s }

  .marquee{ margin-top:10px }
  .marquee .track{ animation-duration:26s; opacity:.85 }
}
@media (max-width:420px){
  body::before, .bg-glow, .grid-mesh, .noise { opacity: .04 }
  .btn-tele { font-size: 1rem; padding: 12px 14px }
  .hero-title { font-size: clamp(20px, 6vw, 28px) }
  .hero-sub { font-size: .95rem }
  .kpi-value{ font-size:clamp(26px, 11.5vw, 38px); text-shadow:0 1px 8px rgba(0,0,0,.22) }
}

/* motion/accessibility */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important }
}