:root{
  --pitch:#0A141E;
  --pitch-2:#0C1824;
  --panel:#12212F;
  --panel-2:#0F1B27;
  --line:#213748;
  --line-soft:#1a2c3a;
  --ink:#EAF1F6;
  --muted:#7C93A5;
  --muted-2:#5c7385;
  --flood:#FFB627;
  --flood-soft:#FFCF6B;
  --live:#FF4D4D;
  --win:#39D98A;
  --tg:#2AABEE;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--pitch); color:var(--ink);
  min-height:100vh; position:relative; overflow-x:hidden; line-height:1.5;
}
a{color:inherit;text-decoration:none}
code{font-family:'JetBrains Mono',monospace;font-size:.88em;background:rgba(255,182,39,.12);
  color:var(--flood-soft);padding:1px 6px;border-radius:5px}

/* атмосфера */
.floodlight{position:fixed;inset:-25% 0 auto 0;height:80vh;pointer-events:none;z-index:0;
  background:radial-gradient(55% 55% at 50% 0%, rgba(255,182,39,.11), rgba(255,182,39,0) 70%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);background-size:3px 3px}

/* ШАПКА */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;
  padding:14px clamp(16px,4vw,48px);
  background:linear-gradient(180deg, rgba(10,20,30,.92), rgba(10,20,30,.72));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.02em;margin-right:auto}
.brand-name{font-weight:700;font-size:1.05rem}
.brand-alt{color:var(--flood)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}70%{box-shadow:0 0 0 8px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.nav{display:flex;gap:22px;font-size:.9rem;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.top-actions{display:flex;align-items:center;gap:12px}
.badge{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap}

/* КНОПКИ */
.btn{font-family:'Archivo',sans-serif;font-weight:600;font-size:.88rem;
  border-radius:9px;padding:10px 18px;cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease,filter .12s ease,background .15s ease,color .15s ease;
  display:inline-block}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--flood-soft);outline-offset:2px}
.btn-solid{background:var(--flood);color:var(--pitch)}
.btn-solid:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--flood);color:var(--flood-soft)}
.btn.on{color:var(--win);border-color:var(--win)}

main,section{position:relative;z-index:1}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}

/* ГЕРОЙ */
.hero{max-width:1120px;margin:0 auto;padding:clamp(48px,8vw,110px) clamp(16px,4vw,48px) clamp(40px,6vw,80px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy .eyebrow{margin-bottom:18px}
.headline{font-family:'Archivo Narrow',sans-serif;font-weight:700;
  font-size:clamp(2.6rem,7vw,5rem);line-height:.98;letter-spacing:-.01em}
.headline em{font-style:normal;color:var(--flood)}
.sub{margin-top:20px;color:var(--muted);max-width:46ch;font-size:1.08rem}
.hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

.hero-demo{position:relative}
.demo-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--flood);animation:pulse 1.6s infinite}

/* ТАБЛО / КАРТОЧКИ МАТЧЕЙ */
.match{background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:16px;padding:18px 22px;
  transition:border-color .3s ease,box-shadow .3s ease}
.match-head{display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);margin-bottom:12px}
.minute::after{content:"'"}
.minute{color:var(--live);font-weight:500}
.score-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.team{font-weight:600;font-size:1.06rem}
.team.home{text-align:right}.team.away{text-align:left}
.score{font-family:'Archivo Narrow',sans-serif;font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem);letter-spacing:.02em;
  display:inline-flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.score i{font-style:normal;color:var(--muted);font-size:.7em}
.score b{min-width:1ch;text-align:center;display:inline-block}

.match.goal{border-color:var(--flood);
  box-shadow:0 0 0 1px var(--flood),0 0 44px rgba(255,182,39,.35);animation:flash 1.1s ease}
@keyframes flash{0%{box-shadow:0 0 0 1px var(--flood),0 0 74px rgba(255,182,39,.6)}
  100%{box-shadow:0 0 0 1px var(--flood),0 0 44px rgba(255,182,39,0)}}
.score b.bump{animation:bump .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes bump{0%{transform:translateY(0) scale(1);color:var(--ink)}
  35%{transform:translateY(-7px) scale(1.4);color:var(--flood)}
  100%{transform:translateY(0) scale(1);color:var(--ink)}}

/* СЕКЦИИ */
.section{max-width:1120px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px)}
.section-head{margin-bottom:30px}
.section-title{font-family:'Archivo Narrow',sans-serif;font-weight:700;
  font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.01em}
.section-note{margin-top:8px;color:var(--muted);max-width:52ch}
.board{display:grid;gap:14px}
.empty{color:var(--muted);text-align:center;padding:48px 0;
  border:1px dashed var(--line);border-radius:14px}

/* КАРТОЧКИ-КАНАЛЫ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.card-k{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}
.card h3{font-size:1.2rem;font-weight:700}
.card p{color:var(--muted);font-size:.95rem}
.card-btn{margin-top:auto;align-self:flex-start}
.card-accent{border-color:rgba(255,182,39,.4);
  box-shadow:0 0 40px rgba(255,182,39,.06) inset}

/* TELEGRAM */
.tg-inner{display:grid;grid-template-columns:1fr .9fr;gap:clamp(28px,5vw,56px);align-items:center;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,44px)}
.tg-steps{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:12px}
.tg-steps li{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:1rem}
.tg-steps span{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:var(--flood);color:var(--pitch);font-weight:700;font-size:.85rem}
.tg-hint{margin-top:12px;color:var(--muted-2);font-size:.82rem}
.tg-mock{display:flex;flex-direction:column;gap:12px}
.tg-bubble{background:#17242f;border:1px solid var(--line);border-radius:14px 14px 14px 4px;
  padding:14px 16px;max-width:300px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tg-goal{font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:1.15rem;color:var(--flood);margin-bottom:2px}
.tg-meta{color:var(--muted);font-size:.8rem;margin-top:4px;font-family:'JetBrains Mono',monospace}

/* ФУТЕР */
.foot{border-top:1px solid var(--line-soft);margin-top:40px;
  padding:32px clamp(16px,4vw,48px);max-width:1120px;margin-left:auto;margin-right:auto;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.foot-brand{font-weight:700}
.foot p{color:var(--muted-2);font-size:.85rem;max-width:60ch}

/* ТОСТЫ */
.toasts{position:fixed;right:clamp(12px,3vw,24px);bottom:clamp(12px,3vw,24px);
  z-index:50;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{background:var(--panel);border:1px solid var(--flood);border-left:4px solid var(--flood);
  border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.5);
  transform:translateX(120%);animation:slidein .35s ease forwards}
.toast .t-title{font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:1.1rem;color:var(--flood)}
.toast .t-body{color:var(--ink);font-size:.9rem;margin-top:2px}
.toast .t-sub{color:var(--muted);font-size:.78rem;margin-top:4px;font-family:'JetBrains Mono',monospace}
@keyframes slidein{to{transform:translateX(0)}}
.toast.out{animation:slideout .3s ease forwards}
@keyframes slideout{to{transform:translateX(120%);opacity:0}}

/* АДАПТИВ */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:clamp(32px,10vw,60px)}
  .hero-demo{max-width:440px}
  .nav{display:none}
  .cards{grid-template-columns:1fr}
  .tg-inner{grid-template-columns:1fr}
  .tg-mock{order:-1;align-items:center}
  .tg-bubble{max-width:100%}
}
@media (max-width:560px){
  .top{gap:12px;padding:12px 16px}
  .nav{display:none}
  .badge{display:none}                 /* экономим место в шапке */
  .btn{padding:9px 14px;font-size:.82rem}
  .headline{font-size:clamp(2.3rem,11vw,3.2rem)}
  .sub{font-size:1rem}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;text-align:center}   /* кнопки на всю ширину */
  .section{padding:36px 16px}
  .match{padding:15px 16px;border-radius:14px}
  .score-row{grid-template-columns:1fr;gap:8px;text-align:center}
  .team.home,.team.away{text-align:center;font-size:1rem}
  .score{font-size:2.4rem}
  .foot{flex-direction:column;align-items:flex-start;gap:10px}
  .toasts{left:12px;right:12px;bottom:12px;max-width:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ===== ГРУППЫ ЛИГ ===== */
.league-group{margin-bottom:18px}
.league-title{display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px 2px}
.league-title .country{color:var(--flood-soft)}
.league-group .board{gap:8px}
.match{cursor:pointer}
.match:hover{border-color:var(--flood-soft)}

/* ===== ДЕТАЛИ МАТЧА (оверлей) ===== */
.detail{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.detail[hidden]{display:none}
.detail-backdrop{position:absolute;inset:0;background:rgba(4,10,16,.72);backdrop-filter:blur(3px)}
.detail-panel{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.detail-close{position:absolute;top:14px;right:16px;background:none;border:none;
  color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1}
.detail-close:hover{color:var(--ink)}
.detail-league{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:14px}
.detail-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.d-team{font-weight:700;font-size:1.15rem}
.detail-score .d-team:first-child{text-align:right}
.detail-score .d-team:last-child{text-align:left}
.d-num{font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:2.6rem;
  display:inline-flex;gap:8px;font-variant-numeric:tabular-nums}
.d-num i{color:var(--muted);font-style:normal}
.detail-min{text-align:center;color:var(--live);font-family:'JetBrains Mono',monospace;
  font-size:.8rem;margin-top:6px}
.detail-min::after{content:"'"}

.detail-tabs{display:flex;gap:8px;margin:20px 0 16px;border-bottom:1px solid var(--line)}
.d-tab{background:none;border:none;color:var(--muted);font-family:'Archivo',sans-serif;
  font-weight:600;font-size:.9rem;padding:8px 4px;cursor:pointer;border-bottom:2px solid transparent}
.d-tab.active{color:var(--ink);border-bottom-color:var(--flood)}

/* строки статистики с двойным баром */
.stat-row{margin:14px 0}
.stat-head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.9rem;margin-bottom:6px}
.stat-head b{font-variant-numeric:tabular-nums}
.stat-head span{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.stat-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line-soft)}
.stat-bar .sh{background:var(--flood)}
.stat-bar .sa{background:var(--tg)}
.stat-empty{color:var(--muted);text-align:center;padding:24px 0;font-size:.9rem}

/* лента событий */
.ev{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.ev:last-child{border-bottom:none}
.ev-min{font-family:'JetBrains Mono',monospace;color:var(--muted);width:38px;flex:none}
.ev-min::after{content:"'"}
.ev-ic{width:22px;text-align:center;flex:none}
.ev-goal .ev-ic{filter:none}
.ev-txt{font-size:.92rem}
.ev-txt .team{color:var(--muted)}

@media (max-width:560px){
  .detail-panel{padding:20px 16px}
  .d-num{font-size:2.1rem}
  .d-team{font-size:1rem}
}

.league-title .flag{font-size:1rem;line-height:1}