@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@600;700;800&display=swap');
:root{--bg:#071821;--bg2:#0a202b;--panel:#0d2632;--panel2:#102d39;--text:#f5f7f8;--muted:#9fb0b7;--accent:#9cff20;--line:rgba(255,255,255,.09);--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}.landing-container{width:min(var(--max),calc(100% - 64px));margin:auto}
.topbar{position:sticky;top:0;z-index:50;height:72px;padding:0 max(32px,calc((100vw - var(--max))/2));display:flex;align-items:center;gap:42px;background:rgba(5,20,28,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-family:Unbounded,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.06em;white-space:nowrap}.brand span{color:#fff}.brand b{color:var(--accent)}.topnav{display:flex;gap:30px;margin:auto;font-size:13px;font-weight:700;color:#c7d1d5}.topnav a:hover{color:#fff}.topbar-cta{font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap}.topbar-cta span{font-size:20px;margin-left:7px}
.hero{position:relative;min-height:690px;overflow:hidden;display:flex;align-items:center;background:#071923}.hero-background{position:absolute;inset:0;background:url('/static/images/landing/hero-stadium.png') center/cover no-repeat;opacity:.72}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,25,.96) 0%,rgba(4,18,25,.80) 38%,rgba(4,18,25,.16) 70%,rgba(4,18,25,.40) 100%),linear-gradient(0deg,#071821 0%,transparent 22%)}.hero-player{position:absolute;right:4%;bottom:0;height:94%;max-width:58%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}.hero-content{position:relative;z-index:2;width:min(760px,58vw);margin-left:max(32px,calc((100vw - var(--max))/2));padding:58px 0 46px}.hero h1,.section-heading h2,.timing-copy h2,.block-title,.stats-head h2,.league-head h2,.legend-layout h2,.faq-title h2,.final-cta h2{font-family:Unbounded,sans-serif;letter-spacing:-.055em}.hero h1{margin:0;font-size:clamp(48px,5vw,78px);line-height:.98}.hero h1 span,.section-heading h2 span,.timing-copy h2 span,.stats-head h2 span,.final-cta h2 span{color:var(--accent)}.hero h2{margin:22px 0 12px;font-size:23px;line-height:1.25}.hero-text{max-width:650px;margin:0;color:#c6d1d5;font-size:16px;line-height:1.65}.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0 26px;max-width:700px}.hero-fact{min-height:142px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(9,32,42,.82);border:1px solid rgba(156,255,32,.16);border-radius:14px}.fact-icon{width:42px;height:42px;color:var(--accent);margin-bottom:7px}.fact-icon svg,.how-icon svg,.timeline-icon svg,.brain-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.hero-fact strong{font-family:Unbounded,sans-serif;font-size:21px;line-height:1.1}.hero-fact span{margin-top:6px;font-size:14px;font-weight:700;color:#c5d0d4}.primary-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;background:var(--accent);color:#07151c;border-radius:8px;font-size:13px;font-weight:900;letter-spacing:.02em;box-shadow:0 10px 30px rgba(156,255,32,.12)}.primary-button span{margin-left:12px;font-size:19px}.hero-note{margin:15px 0 0;color:#84969e;font-size:12px}
.how-section{padding:62px 0;background:#061720}.section-heading{text-align:center;max-width:780px;margin:0 auto 32px}.section-heading h2{font-size:34px;margin:0 0 10px}.section-heading p,.timing-copy p,.stats-head p,.league-head p,.legend-layout p,.faq-title p{color:var(--muted);line-height:1.6}.how-flow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;align-items:center}.how-card{min-height:208px;padding:28px 22px;text-align:center;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#0b222d,#081b24)}.how-card.final{border-color:var(--line);box-shadow:none}.how-icon{width:64px;height:64px;margin:0 auto 15px;color:var(--accent)}.how-card h3{margin:0 0 9px;font-size:18px}.how-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.how-arrow{text-align:center;color:#647982;font-size:26px}
.timing-strip{padding:48px 0;background:#0a1f29;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.timing-layout{display:grid;grid-template-columns:370px 1fr;gap:70px;align-items:center}.timing-copy h2{font-size:36px;line-height:1.12;margin:0 0 12px}.timing-copy p{font-size:14px}.timeline{display:grid;grid-template-columns:1fr 90px 1fr 90px 1fr;align-items:start}.timeline-step{text-align:center}.timeline-icon{width:58px;height:58px;margin:0 auto 8px;color:var(--accent)}.timeline-step strong{display:block;font-family:Unbounded,sans-serif;font-size:25px}.timeline-step b{display:block;margin-top:7px;font-size:14px}.timeline-step span{display:block;margin-top:4px;color:var(--muted);font-size:12px}.timeline-line{height:1px;margin-top:29px;background:linear-gradient(90deg,var(--accent),rgba(156,255,32,.18))}
.example-section{padding:60px 0}.block-title{font-size:34px;margin:0 0 24px}.match-card{display:grid;grid-template-columns:1.65fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#0b222d}.match-main{padding:30px 34px}.match-meta{display:flex;align-items:center;justify-content:center;gap:11px;color:#cbd5d8;font-size:14px;font-weight:700}.match-meta i{width:4px;height:4px;border-radius:50%;background:#6f838b}.competition-mark{width:34px;height:34px;padding:5px;border-radius:50%;background:#f3f5f5}.competition-mark img{width:100%;height:100%;object-fit:contain}.teams{display:flex;align-items:center;justify-content:center;gap:34px;margin:27px 0}.team{display:flex;align-items:center;gap:14px;font-size:20px}.team.away{text-align:right}.crest{width:74px;height:74px;padding:7px;border-radius:17px;background:#f3f5f5}.crest img{width:100%;height:100%;object-fit:contain}.versus{font-size:25px;color:#6f838b}.probabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.probabilities div{padding:17px;text-align:center;background:#071a23;border-radius:10px}.probabilities span{display:block;color:var(--muted);font-size:12px}.probabilities strong{display:block;margin-top:4px;font-family:Unbounded,sans-serif;font-size:30px}.recommendation-line{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:14px;padding:12px;border:1px solid rgba(156,255,32,.2);border-radius:10px}.recommendation-line span{font-size:12px;color:var(--muted)}.recommendation-line strong{font-family:Unbounded,sans-serif;color:var(--accent);font-size:22px}.recommendation-line small{font-size:11px;color:#c5d0d4}.sanya-opinion{padding:31px;background:#102c38;border-left:1px solid var(--line)}.sanya-opinion h3{display:flex;align-items:center;gap:11px;margin:0 0 16px;font-size:19px}.brain-icon{width:34px;height:34px;color:var(--accent)}.sanya-opinion p{max-height:190px;overflow:auto;margin:0;color:#c4d0d4;font-size:13px;line-height:1.7}.analysis-badge{display:inline-block;margin-top:17px;padding:7px 10px;border-radius:6px;background:rgba(156,255,32,.1);color:var(--accent);font-size:11px;font-weight:800}.empty-example{padding:35px;border:1px solid var(--line);border-radius:14px;background:#0b222d}.empty-example strong,.empty-example span{display:block}.empty-example span{margin-top:7px;color:var(--muted)}
.stats-section{padding:52px 0;background:#061720}.stats-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}.stats-head h2{margin:0;font-size:32px}.stats-head p{margin:10px 0 0;font-size:14px}.period-switch{display:flex;padding:4px;background:#0c2733;border:1px solid var(--line);border-radius:9px}.period-switch button{border:0;background:transparent;color:#8fa2aa;padding:9px 15px;border-radius:6px;font:700 12px Manrope;cursor:pointer}.period-switch button.active{background:var(--accent);color:#07151c}.stats-period{display:none;grid-template-columns:repeat(4,1fr);gap:12px}.stats-period.active{display:grid}.stat-card{min-height:132px;padding:22px;background:#0b222d;border:1px solid var(--line);border-radius:12px}.stat-card span{display:block;min-height:36px;color:#aebdc2;font-size:13px;font-weight:700}.stat-card strong{display:block;margin-top:8px;font-family:Unbounded,sans-serif;font-size:34px}.stat-card small{display:block;margin-top:6px;color:#71858d;font-size:11px}
.leagues-section{padding:54px 0}.league-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:22px}.league-head h2{margin:0;font-size:33px}.league-head>p{max-width:none;text-align:right;font-size:12px;white-space:nowrap}.league-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.league-card{min-height:156px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#0b222d;border:1px solid var(--line);border-radius:12px}.league-logo{width:70px;height:70px;padding:10px;display:grid;place-items:center;margin-bottom:10px;border-radius:18px;background:#f1f4f3;box-shadow:0 7px 18px rgba(0,0,0,.18)}.league-logo img{max-width:100%;max-height:100%;object-fit:contain}.league-card b{font-size:12px}.league-card>span:last-child{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.2}
.legend-section{padding:20px 0 58px}.legend-layout{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center}.legend-layout h2{margin:0;font-size:30px}.legend-layout p{font-size:13px}.legend-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.legend-grid div{min-height:104px;padding:14px 10px;display:flex;align-items:center;gap:10px;background:#0b222d;border:1px solid var(--line);border-radius:10px}.legend-grid b{min-width:58px;height:58px;display:grid;place-items:center;border-radius:8px;background:#12313d;color:var(--accent);font-family:Unbounded,sans-serif;font-size:26px}.legend-grid span{font-size:13px;line-height:1.35;font-weight:700}.legend-grid .none b{color:#d6dde0}
.faq-section{padding:58px 0;background:#0a1f29;border-top:1px solid var(--line)}.faq-layout{display:grid;grid-template-columns:350px 1fr;gap:70px}.faq-title>span{display:inline-block;margin-bottom:10px;color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.12em}.faq-title h2{margin:0;font-size:31px;line-height:1.15}.faq-title p{font-size:13px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;padding:19px 4px;display:flex;justify-content:space-between;gap:20px;font-size:18px;font-weight:800}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:var(--accent);font-size:21px}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list p{margin:0;padding:0 45px 24px 4px;color:var(--muted);font-size:16px;line-height:1.7}
.final-cta{padding:68px 0;text-align:center;background:radial-gradient(circle at 50% 100%,rgba(156,255,32,.08),transparent 45%),#071821}.final-cta h2{margin:0;font-size:45px}.final-cta p{margin:10px 0 22px;color:var(--muted);font-size:15px}.site-footer{padding:24px 0;border-top:1px solid var(--line);background:#06151d}.footer-inner{display:flex;align-items:center;gap:42px}.site-footer nav{display:flex;gap:24px;margin:auto;font-size:12px;color:#a6b5ba}.site-footer small{text-align:right;color:#73878f;font-size:10px;line-height:1.5}
@media(max-width:1050px){.topnav{display:none}.hero-content{width:65vw}.how-flow{grid-template-columns:1fr 1fr;gap:12px}.how-arrow{display:none}.timing-layout,.faq-layout,.legend-layout{grid-template-columns:1fr}.league-grid{grid-template-columns:repeat(4,1fr)}.legend-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.landing-container{width:min(100% - 28px,var(--max))}.topbar{height:64px;padding:0 14px}.topbar-cta{margin-left:auto;font-size:10px}.hero{min-height:760px;align-items:flex-start}.hero-player{height:50%;max-width:92%;right:-10%;opacity:.68}.hero-content{width:auto;margin:0;padding:55px 18px 32px}.hero h1{font-size:43px}.hero h2{font-size:19px}.hero-text{font-size:14px}.hero-facts{grid-template-columns:1fr 1fr}.hero-fact{min-height:128px}.how-section{padding:42px 0}.section-heading h2{font-size:27px}.how-flow{grid-template-columns:1fr 1fr}.how-card{min-height:190px;padding:22px 12px}.how-icon{width:54px;height:54px}.timing-layout{gap:28px}.timeline{grid-template-columns:1fr}.timeline-line{width:1px;height:28px;margin:8px auto;background:linear-gradient(var(--accent),rgba(156,255,32,.18))}.match-card{grid-template-columns:1fr}.sanya-opinion{border-left:0;border-top:1px solid var(--line)}.match-meta{flex-wrap:wrap}.teams{gap:10px}.team{gap:7px;font-size:13px}.crest{width:50px;height:50px}.probabilities{gap:6px}.probabilities div{padding:12px 5px}.probabilities strong{font-size:22px}.recommendation-line{flex-wrap:wrap}.stats-head,.league-head{display:block}.period-switch{width:max-content;margin-top:18px}.stats-period{grid-template-columns:1fr 1fr}.league-head>p{text-align:left}.league-grid{grid-template-columns:repeat(2,1fr)}.legend-grid{grid-template-columns:1fr 1fr}.faq-layout{gap:25px}.final-cta h2{font-size:34px}.footer-inner{flex-wrap:wrap}.site-footer nav{order:3;width:100%;justify-content:space-between}.site-footer small{margin-left:auto}}
/* =========================================================
   LANDING — FINAL POLISH
   ========================================================= */


/* ---------------------------------------------------------
   1. REAL ANALYSIS — делаем карточку заметнее и читабельнее
   --------------------------------------------------------- */

.match-card {
    margin-top: 28px;
}

.match-meta {
    font-size: 14px;
    line-height: 1.4;
    gap: 10px;
}

.match-meta .competition-mark {
    width: 28px;
    height: 28px;
}

.match-meta .competition-mark img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}


/* Команды */

.teams {
    margin-top: 22px;
    gap: 22px;
}

.team {
    gap: 14px;
}

.team b {
    font-size: 20px;
    line-height: 1.15;
}

.crest {
    width: 62px;
    height: 62px;
}

.crest img {
    max-width: 48px;
    max-height: 48px;
}

.versus {
    font-size: 22px;
}


/* ---------------------------------------------------------
   2. Вероятности
   --------------------------------------------------------- */

.probabilities {
    margin-top: 20px;
    gap: 12px;
}

.probabilities > div {
    min-height: 84px;
    padding: 13px 12px;
}

.probabilities span {
    font-size: 13px;
    line-height: 1.25;
}

.probabilities strong {
    margin-top: 5px;
    font-size: 31px;
    line-height: 1;
}


/* ---------------------------------------------------------
   3. РАСКЛАД САНИ
   X2 становится главным элементом строки
   --------------------------------------------------------- */

.recommendation-line {
    margin-top: 15px;
    min-height: 52px;
    padding: 10px 18px;
    gap: 14px;
}

.recommendation-line > span {
    font-size: 13px;
}

.recommendation-line > strong {
    font-size: 24px;
    line-height: 1;
}

.recommendation-line > small {
    font-size: 13px;
    opacity: .8;
}


/* ---------------------------------------------------------
   4. МНЕНИЕ САНИ
   --------------------------------------------------------- */

.sanya-opinion {
    padding: 28px 30px;
}

.sanya-opinion h3 {
    gap: 10px;
    margin-bottom: 17px;
    font-size: 21px;
    line-height: 1.2;
}

.sanya-opinion .brain-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.sanya-opinion .brain-icon svg {
    width: 30px;
    height: 30px;
}

.sanya-opinion p {
    font-size: 15px;
    line-height: 1.6;
    max-width: 620px;
}

.analysis-badge {
    margin-top: 18px;
    font-size: 12px;
    padding: 7px 11px;
}


/* ---------------------------------------------------------
   5. Статистика — подписи делаем заметнее
   --------------------------------------------------------- */

.stats-card small,
.stat-card small,
.landing-stat small {
    font-size: 12px;
    opacity: .78;
}

.stats-card strong,
.stat-card strong,
.landing-stat strong {
    line-height: 1;
}


/* ---------------------------------------------------------
   6. Немного уменьшаем огромные вертикальные промежутки
   между нижними секциями
   --------------------------------------------------------- */

.analysis-example,
.statistics-section,
.leagues-section,
.prediction-guide,
.faq-section {
    padding-top: 64px;
    padding-bottom: 64px;
}


/* ---------------------------------------------------------
   7. Лиги — чуть усиливаем подписи
   --------------------------------------------------------- */

.league-card {
    padding-top: 18px;
    padding-bottom: 18px;
}

.league-card strong,
.league-card b {
    font-size: 13px;
}

.league-card small,
.league-card span {
    line-height: 1.25;
}


/* ---------------------------------------------------------
   8. Как читать расклады — исходы заметнее
   --------------------------------------------------------- */

.prediction-item strong,
.outcome-item strong {
    font-size: 22px;
}

.prediction-item span,
.outcome-item span {
    font-size: 13px;
}


/* ---------------------------------------------------------
   9. FAQ
   --------------------------------------------------------- */

.faq-question {
    font-size: 17px;
    line-height: 1.35;
}

.faq-answer {
    font-size: 15px;
    line-height: 1.6;
}

/* =========================================================
   MOBILE — REAL ANALYSIS CARD
   ========================================================= */

@media (max-width: 768px) {

    .example-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .example-section .block-title {
        font-size: 28px;
        line-height: 1.08;
        margin-bottom: 20px;
    }

    /* Карточка занимает всю доступную ширину */
    .match-card {
        margin-top: 0;
        grid-template-columns: 1fr;
        overflow: hidden;
        border-radius: 14px;
    }

    .match-main {
        min-width: 0;
        padding: 20px 14px 16px;
    }

    /* Лига + дата */
    .match-meta {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        text-align: center;
        font-size: 11px;
        line-height: 1.35;
    }

    .match-meta .competition-mark {
        width: 25px;
        height: 25px;
        padding: 4px;
        flex: 0 0 25px;
    }

    .match-meta .competition-mark img {
        width: 17px;
        height: 17px;
    }

    .match-meta i {
        flex: 0 0 3px;
    }

    /* Команды */
    .teams {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
        align-items: center;
        gap: 5px;
        margin: 18px 0 15px;
    }

    .team {
        min-width: 0;
        gap: 7px;
        font-size: 12px;
    }

    .team:first-child {
        justify-content: flex-end;
    }

    .team.away {
        justify-content: flex-start;
    }

    .team b {
        min-width: 0;
        font-size: 12px;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .team:first-child b {
        text-align: right;
    }

    .team.away b {
        text-align: left;
    }

    .crest {
        width: 42px;
        height: 42px;
        padding: 5px;
        border-radius: 11px;
        flex: 0 0 42px;
    }

    .crest img {
        width: 100%;
        height: 100%;
        max-width: 32px;
        max-height: 32px;
    }

    .versus {
        text-align: center;
        font-size: 18px;
    }

    /* Вероятности — обязательно остаются в одну строку */
    .probabilities {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 0;
    }

    .probabilities > div {
        min-width: 0;
        min-height: 72px;
        padding: 10px 4px;
    }

    .probabilities span {
        min-height: 26px;
        font-size: 9px;
        line-height: 1.2;
    }

    .probabilities strong {
        margin-top: 3px;
        font-size: 22px;
    }

    /* Расклад Сани — отдельная полноценная строка */
    .recommendation-line {
        width: 100%;
        min-height: 46px;
        margin-top: 8px;
        padding: 8px 10px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 7px;
    }

    .recommendation-line > span {
        text-align: right;
        font-size: 10px;
    }

    .recommendation-line > strong {
        font-size: 20px;
    }

    .recommendation-line > small {
        text-align: left;
        font-size: 9px;
        line-height: 1.2;
    }

    /* Мнение Сани */
    .sanya-opinion {
        padding: 19px 16px 20px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .sanya-opinion h3 {
        margin-bottom: 12px;
        font-size: 17px;
    }

    .sanya-opinion .brain-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .sanya-opinion .brain-icon svg {
        width: 26px;
        height: 26px;
    }

    .sanya-opinion p {
        max-height: none;
        overflow: visible;
        font-size: 13px;
        line-height: 1.55;
    }

    .analysis-badge {
        margin-top: 13px;
        font-size: 10px;
        padding: 6px 8px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .analysis-example,
    .statistics-section,
    .leagues-section,
    .prediction-guide,
    .faq-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .team b {
        font-size: 17px;
    }

    .crest {
        width: 52px;
        height: 52px;
    }

    .crest img {
        max-width: 40px;
        max-height: 40px;
    }

    .probabilities strong {
        font-size: 26px;
    }

    .sanya-opinion {
        padding: 22px 20px;
    }

    .sanya-opinion p {
        font-size: 14px;
    }

    .recommendation-line > strong {
        font-size: 21px;
    }
}

/* =========================================================
   FAQ — SMOOTH ACCORDION
   ========================================================= */

.faq-list details {
    overflow: hidden;
}

.faq-list summary {
    transition:
        color 0.22s ease,
        background-color 0.22s ease;
}

.faq-list summary span {
    display: inline-block;
    transition: transform 0.28s ease;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
}

.faq-list details > p {
    overflow: hidden;
    height: 0;
    opacity: 0;

    margin: 0;
    padding: 0 45px 0 4px;

    transition:
        height 0.32s ease,
        opacity 0.22s ease,
        padding-bottom 0.32s ease;
}

.faq-list details[open] > p {
    opacity: 1;
    padding-bottom: 24px;
}