/* =============================================
   BETWIN — Dark Neon Design System
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:   #070b14;
  --bg2:  #0d1220;
  --card-bg:     rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.08);
  --purple:      #7c3aed;
  --blue:        #3b82f6;
  --text:        #f1f5f9;
  --text-2:      #94a3b8;
  --text-3:      #64748b;
  --grad:        linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  --radius:      16px;
  --radius-sm:   10px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Background orbs ─────────────────────────── */
.bg-animation { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .12; animation: orbFloat 20s ease-in-out infinite; }
.orb-1 { width:600px;height:600px;background:radial-gradient(circle,#7c3aed,transparent);top:-200px;left:-100px; }
.orb-2 { width:500px;height:500px;background:radial-gradient(circle,#3b82f6,transparent);top:40%;right:-150px;animation-delay:-7s; }
.orb-3 { width:400px;height:400px;background:radial-gradient(circle,#06b6d4,transparent);bottom:10%;left:30%;animation-delay:-14s; }
@keyframes orbFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-40px) scale(1.05)}
  66%{transform:translate(-20px,20px) scale(.97)}
}

/* ── Layout ──────────────────────────────────── */
.container { max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1; }

/* ── Header ──────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,11,20,.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner { display:flex;align-items:center;gap:32px;height:68px; }

.logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0; }
.logo-icon {
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(59,130,246,.2));
  border:1px solid rgba(124,58,237,.3);border-radius:10px;
}
.logo-text { font-size:20px;font-weight:900;letter-spacing:-.5px;color:var(--text); }
.logo-accent { background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

.nav { display:flex;align-items:center;gap:4px;flex:1; }
.nav-link { color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border-radius:8px;transition:all .2s; }
.nav-link:hover { color:var(--text);background:rgba(255,255,255,.06); }

.bonus-badge {
  display:flex;align-items:center;gap:8px;padding:8px 16px;
  background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05));
  border:1px solid rgba(245,158,11,.25);border-radius:100px;
  font-size:14px;font-weight:600;color:#fbbf24;white-space:nowrap;margin-left:auto;
}

/* ── Hero ────────────────────────────────────── */
.hero { padding:72px 0 52px; }
.hero-label { display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:18px; }
.pulse-dot { width:8px;height:8px;background:#10b981;border-radius:50%;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(16,185,129,.4); }
@keyframes pulse {
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}
  70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.hero-title { font-size:clamp(34px,5vw,60px);font-weight:900;line-height:1.1;letter-spacing:-2px;margin-bottom:18px; }
.gradient-text { background:linear-gradient(135deg,#7c3aed,#3b82f6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-desc { font-size:17px;color:var(--text-2);max-width:500px;margin-bottom:36px; }

.hero-stats {
  display:flex;align-items:center;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:20px 32px;width:fit-content;backdrop-filter:blur(10px);
}
.stat-card { padding:0 28px; }
.stat-card:first-child { padding-left:0; }
.stat-num { font-size:34px;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2px; }
.stat-label { font-size:13px;color:var(--text-2);white-space:nowrap; }
.stat-divider { width:1px;height:44px;background:var(--card-border); }

/* ── Section header ──────────────────────────── */
.section-header { margin-bottom:32px; }
.section-label { font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-3);margin-bottom:6px; }
.section-title { font-size:28px;font-weight:800;letter-spacing:-.5px; }

/* ═══════════════════════════════════════════════
   SLIDER / CAROUSEL
   ═══════════════════════════════════════════════ */
.slider-section { padding:60px 0; }

.slider-wrapper {
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:28px;
}

/* Arrows */
.sl-arrow {
  position:absolute;top:50%;transform:translateY(-80%);
  width:44px;height:44px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:50%;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:10;
}
.sl-arrow:hover { background:rgba(124,58,237,.3);border-color:rgba(124,58,237,.5); }
.sl-prev { left:-28px; }
.sl-next { right:-28px; }

/* Track (fade-style — only active visible) */
.sl-track { position:relative;width:100%;min-height:440px;display:flex;align-items:center;justify-content:center; }

/* Individual slider card */
.sl-card {
  position:absolute;
  width:100%;max-width:640px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:24px;
  padding:48px 40px;
  text-align:center;
  opacity:0;
  transform:scale(.94) translateY(10px);
  transition:all .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  overflow:hidden;
}
.sl-card.active {
  opacity:1;transform:scale(1) translateY(0);pointer-events:auto;
  border-color:rgba(124,58,237,.3);
  box-shadow:0 24px 80px rgba(0,0,0,.4), 0 0 40px rgba(124,58,237,.08);
}

/* Glow blob behind card */
.sl-glow {
  position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:300px;height:300px;
  background:radial-gradient(circle,var(--glow,#7c3aed),transparent 70%);
  opacity:.12;pointer-events:none;border-radius:50%;
}

.sl-inner { position:relative;z-index:1; }

/* Logo inside slider */
.sl-logo-wrap {
  width:80px;height:80px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;overflow:hidden;font-size:16px;font-weight:800;color:#fff;
}
.sl-logo-wrap img { width:100%;height:100%;object-fit:contain;padding:10px;background:#fff;border-radius:16px; }

.sl-name { font-size:26px;font-weight:800;margin-bottom:8px; }

.sl-rating { display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:20px; }
.sl-rv { font-size:14px;font-weight:700;margin-left:4px; }

.sl-amount { font-size:52px;font-weight:900;letter-spacing:-2px;line-height:1;margin-bottom:16px; }
.sl-amount span { font-size:36px; }

.sl-chip {
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:8px;font-size:13px;font-weight:500;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#34d399;
  margin-bottom:16px;
}
.sl-chip.freebet-chip { background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.25);color:#93c5fd; }

.sl-desc { font-size:15px;color:var(--text-2);max-width:420px;margin:0 auto 28px; }

/* Slider button */
.btn-sl {
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 40px;background:var(--grad);
  border-radius:var(--radius-sm);color:#fff;font-size:16px;font-weight:700;
  text-decoration:none;transition:all .2s;
  box-shadow:0 4px 20px rgba(124,58,237,.35);
}
.btn-sl:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,58,237,.5); }

/* Dots */
.sl-dots { display:flex;gap:8px;align-items:center; }
.sl-dot {
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);
  border:none;cursor:pointer;transition:all .3s;padding:0;
}
.sl-dot.active { width:28px;border-radius:4px;background:linear-gradient(90deg,#7c3aed,#3b82f6); }

/* Brand colors for slider logos */
.sl-logo-wrap.melbet     { background:linear-gradient(135deg,#16a34a,#166534); }
.sl-logo-wrap.fonbet     { background:linear-gradient(135deg,#e63946,#c1121f); }
.sl-logo-wrap.winline    { background:linear-gradient(135deg,#f97316,#c2410c); }
.sl-logo-wrap.betboom    { background:linear-gradient(135deg,#111827,#374151); }
.sl-logo-wrap.ligastavok { background:linear-gradient(135deg,#1d4ed8,#1e40af); }
.sl-logo-wrap.pari       { background:linear-gradient(135deg,#15803d,#166534); }
.sl-logo-wrap.olimpbet   { background:linear-gradient(135deg,#4d7c0f,#3f6212); }

/* ═══════════════════════════════════════════════
   OFFERS LIST (горизонтальные строки)
   ═══════════════════════════════════════════════ */
.offers-section { padding:0 0 80px; }

.offer-filters { display:flex;gap:8px;flex-wrap:wrap;margin-top:20px; }
.tab {
  padding:9px 18px;border:1px solid var(--card-border);border-radius:100px;
  background:var(--card-bg);color:var(--text-2);font-size:13px;font-weight:500;
  cursor:pointer;transition:all .2s;font-family:inherit;
}
.tab:hover { border-color:rgba(124,58,237,.4);color:var(--text); }
.tab.active { background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(59,130,246,.25));border-color:rgba(124,58,237,.5);color:var(--text); }

.offers-list { display:flex;flex-direction:column;gap:12px; }

.offer-row {
  display:grid;
  grid-template-columns: 280px 1fr auto;
  align-items:center;gap:24px;
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:20px 24px;
  transition:all .25s;
}
.offer-row:hover {
  border-color:rgba(124,58,237,.3);
  box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 20px rgba(124,58,237,.06);
  transform:translateX(4px);
}
.offer-row.hidden { display:none; }

/* Left: logo + meta */
.or-left { display:flex;align-items:center;gap:16px; }

.or-logo {
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;overflow:hidden;
}
.or-logo img { width:100%;height:100%;object-fit:contain;padding:7px;background:#fff;border-radius:10px; }

.or-logo.melbet     { background:linear-gradient(135deg,#16a34a,#166534); }
.or-logo.fonbet     { background:linear-gradient(135deg,#e63946,#c1121f); }
.or-logo.winline    { background:linear-gradient(135deg,#f97316,#c2410c); }
.or-logo.betboom    { background:linear-gradient(135deg,#111827,#374151); }
.or-logo.ligastavok { background:linear-gradient(135deg,#1d4ed8,#1e40af); }
.or-logo.marafon    { background:linear-gradient(135deg,#b91c1c,#991b1b); }
.or-logo.pari       { background:linear-gradient(135deg,#15803d,#166534); }
.or-logo.leon       { background:linear-gradient(135deg,#0891b2,#0e7490); }
.or-logo.betsity    { background:linear-gradient(135deg,#1d4ed8,#1e3a8a); }
.or-logo.olimpbet   { background:linear-gradient(135deg,#4d7c0f,#3f6212); }

.or-meta { display:flex;flex-direction:column;gap:4px; }
.or-name { font-size:17px;font-weight:700; }
.or-stars { display:flex;align-items:center;gap:2px; }
.or-rv { font-size:13px;font-weight:700;margin-left:4px; }
.or-cnt { font-size:12px;color:var(--text-3); }
.or-legal {
  display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#34d399;width:fit-content;
}

/* Center: amount + chip + desc */
.or-center { display:flex;flex-direction:column;gap:6px; }
.or-amount { font-size:28px;font-weight:900;letter-spacing:-1px;line-height:1; }
.or-chip {
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:6px;font-size:12px;font-weight:500;width:fit-content;
}
.bonus-chip-row  { background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#34d399; }
.freebet-chip-row{ background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#93c5fd; }
.promo-chip-row  { background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.25);color:#c4b5fd; }
.or-desc { font-size:13px;color:var(--text-2);line-height:1.4; }

/* CTA button */
.btn-offer {
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;
  padding:13px 24px;background:var(--grad);
  border-radius:var(--radius-sm);color:#fff;font-size:14px;font-weight:700;
  text-decoration:none;transition:all .2s;
  box-shadow:0 4px 16px rgba(124,58,237,.3);
}
.btn-offer:hover { transform:translateY(-1px);box-shadow:0 6px 24px rgba(124,58,237,.45); }

/* Stars shared */
.star { font-size:13px;line-height:1; }
.star.filled { color:#fbbf24; }
.star.half   { color:#fbbf24;opacity:.6; }
.star.empty  { color:#374151; }

/* ── Footer ──────────────────────────────────── */
.footer { background:var(--bg2);border-top:1px solid var(--card-border);padding:56px 0 28px; }
.footer-inner { display:flex;justify-content:space-between;gap:48px;margin-bottom:44px; }
.footer-desc { font-size:14px;color:var(--text-3);margin-top:10px;max-width:240px; }
.footer-links { display:flex;gap:64px; }
.fl-col { display:flex;flex-direction:column;gap:10px; }
.fl-title { font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);margin-bottom:4px; }
.fl-col a { font-size:14px;color:var(--text-2);text-decoration:none;transition:color .2s; }
.fl-col a:hover { color:var(--text); }
.footer-bottom { padding-top:20px;border-top:1px solid var(--card-border);display:flex;flex-direction:column;gap:6px; }
.footer-legal,.footer-copy { font-size:12px;color:var(--text-3);line-height:1.6; }

/* ── Responsive ──────────────────────────────── */
@media (max-width:1000px) {
  .sl-prev { left:-10px; }
  .sl-next { right:-10px; }
}

@media (max-width:860px) {
  .nav { display:none; }
  .offer-row { grid-template-columns:1fr auto;gap:16px; }
  .or-center { display:none; }
  .footer-inner { flex-direction:column; }
  .footer-links { gap:32px; }
}

@media (max-width:640px) {
  .hero { padding:48px 0 36px; }
  .hero-stats { padding:16px 20px; }
  .stat-card { padding:0 16px; }
  .sl-card { padding:36px 24px; }
  .sl-amount { font-size:40px; }
  .offer-row { grid-template-columns:1fr; }
  .or-left { justify-content:flex-start; }
  .btn-offer { width:100%;justify-content:center; }
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,.3);border-radius:3px; }

/* ═══════════════════════════════════════════════
   FLOATING "CONTACT MANAGER" (Telegram) BUTTON
   ═══════════════════════════════════════════════ */
.tg-manager {
  position:fixed; right:24px; bottom:24px; z-index:1000;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px 13px 16px;
  background:linear-gradient(135deg,#2AABEE,#229ED9);
  color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; line-height:1;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(34,158,217,.45), 0 2px 8px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:tgPulse 2.6s ease-in-out infinite;
}
.tg-manager:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 40px rgba(34,158,217,.6), 0 4px 12px rgba(0,0,0,.3);
  animation-play-state:paused;
}
.tg-manager-icon {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0;
  background:rgba(255,255,255,.18); border-radius:50%;
}
.tg-manager-text { white-space:nowrap; }

@keyframes tgPulse {
  0%,100% { box-shadow:0 10px 30px rgba(34,158,217,.45), 0 0 0 0 rgba(42,171,238,.5); }
  50%     { box-shadow:0 10px 30px rgba(34,158,217,.45), 0 0 0 12px rgba(42,171,238,0); }
}

@media (max-width:640px) {
  .tg-manager { right:16px; bottom:16px; padding:12px; gap:0; }
  .tg-manager-text { display:none; }
  .tg-manager-icon { width:30px; height:30px; }
}