/* ===== Design Tokens ===== */
:root{
    --blue1:#4278b6; --blue2:#5e97c9; --blue3:#7cd3ec; --blue4:#9be4f5;
    --primary:#113B73; --gold:#FFC845; --ink:#111111; --on-dark:#ffffff;
    --radius:16px; --shadow:0 18px 40px rgba(0,0,0,.12);
}
html,body{height:100%;}
body{
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
    color:var(--ink);
    /*background: url('/img/1980.jpg') center center / cover no-repeat fixed!important;*/
    /*background: #113B73 url('/img/1980.svg') center center / contain no-repeat fixed;*/
    background-color: #232a30;

}

a{color:var(--primary);}
.section-title{color:#fff;}
.section-title-light{color: #000000;}
/* ===== Навбар ===== */
.navbar{--bs-navbar-color:#fff; --bs-navbar-brand-color:#fff; transition:background .25s ease, box-shadow .25s ease;}
.navbar.scrolled{background:#000000; box-shadow:0 6px 30px rgba(0,0,0,.25);}
.navbar .nav-link{opacity:.9;}
.navbar .nav-link.active{color:var(--gold) !important;}
/* ===== Hero ===== */
.hero{min-height:106vh; display:grid; place-items:center; text-align:center; color:#fff; padding:6rem 0 4rem;}
.glass{
    background:#0211203d; border:1px solid rgba(255,255,255,.18);
    backdrop-filter:saturate(140%) blur(10px); border-radius:calc(var(--radius) + 6px);
}
.btn-gold{background:var(--gold); color:#111; border:none;}
.btn-gold:hover{filter:brightness(.97);}
.btn-ghost{border:2px solid #fff; color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
/* ===== Cards / blocks ===== */
.card-soft{background: #000000;border: #cdc19e5c 1px solid;border-radius:var(--radius);box-shadow: 3px 6px 20px 4px rgb(0 0 0 / 23%);}
.card-soft-black{background: rgba(0, 0, 0, 0.95); border:0; border-radius:var(--radius); box-shadow:var(--shadow);}
.icon-bubble{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#eef6ff;color:var(--primary);}
.badge-free{background:var(--blue3); color:#0b2b48;}
.timeline-dot{width:.75rem;height:.75rem;background:var(--gold);border-radius:50%; flex:0 0 .75rem; margin-top:.35rem;}
/* ===== Floating CTAs ===== */
.fab-whatsapp{
    position:fixed; right:18px; bottom:100px; z-index:1030;
    background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.fab-whatsapp:hover{filter:brightness(.95);}
.to-top{position:fixed; right:18px; bottom:130px; z-index:1030; opacity:0; pointer-events:none; transition:opacity .25s;}
.to-top.show{opacity:1; pointer-events:auto;}

/* HERO VIDEO */
.hero-video-wrap{position:relative; height:100vh; min-height:640px; overflow:hidden;}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.hero-video-overlay{position:absolute; inset:0;
    background: radial-gradient(80% 60% at 20% 10%, rgba(0, 0, 0, 0.25), transparent 50%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.29) 100%);
    pointer-events:none;
}
.hero-video-content{position:relative; z-index:2; height:100%; display:grid; place-items:center; text-align:center; padding:6rem 1rem;}
.hero-video-controls{
    position:absolute; right:1rem; bottom:1rem; z-index:3; display:flex; gap:.5rem;
}
.hero-video-controls .btn{--bs-btn-padding-y:.4rem; --bs-btn-padding-x:.7rem; --bs-btn-border-radius:.75rem;}
@media (max-width: 576px){ .hero-video-wrap{min-height:520px;} }
@media (prefers-reduced-motion: reduce){
    .hero-video{display:none;}
    .hero-video-overlay{background:linear-gradient(180deg, rgba(17,59,115,.85), rgba(17,59,115,.92));}
}
/* ===== Motion (respect reduced) ===== */
@media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(12px); transition:all .6s ease;}
    .reveal.show{opacity:1; transform:none;}
}

.img-top-persons {
    width: 100%;
    height: 400px;
    max-height: 400px;
    object-fit: cover;
    overflow: hidden;
    background-color: #ccc;
    filter: brightness(70%);
    border-bottom-left-radius: 15%;
    border-top-right-radius: 15%;
    border: #ece1be 1px solid;
}

/* Тек осы блокқа арналған шағын стильдер */
#topplayers .carousel-viewport { overflow: hidden; }
#topplayers .carousel-track { display:flex; flex-wrap:nowrap; transition:transform .6s ease; will-change:transform; }
#topplayers .carousel-track > [class*="col-"] { flex:0 0 auto; }

/* Навигация батырмалары */
#topplayers .carousel-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border:0; border-radius:50%;
    background:rgba(255,255,255,.18); color:#fff; font-size:22px; line-height:44px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    backdrop-filter: blur(4px);
    z-index:5;
}
#topplayers .btn-prev { left:30px; }
#topplayers .btn-next { right:30px; }
#topplayers .carousel-btn:hover { background:rgba(255,255,255,.3); }
#topplayers .carousel-btn:focus { outline:2px solid #9be4f5; outline-offset:2px; }

/* ---- SHOW MATCH section (scoped by #show-mach) ---- */
#show-mach { isolation:isolate; }

#show-mach .show-overlay{
    background: radial-gradient(1200px 600px at 80% -10%, rgba(66,120,182,.55), transparent 70%),
    radial-gradient(900px 500px at 0% 100%, rgba(124,211,236,.45), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.72));
    z-index:0;
}

#show-mach .show-bottomfade{
    height:80px;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,.75));
    pointer-events:none;
    z-index:1;
}

#show-mach .show-eyebrow{
    letter-spacing:.18em;
    font-size:.72rem;
    font-weight:700;
    color:#9be4f5;
    text-transform:uppercase;
    background:rgba(155,228,245,.12);
    border:1px solid rgba(155,228,245,.35);
    padding:.25rem .6rem;
    border-radius:999px;
}

#show-mach .show-title{
    line-height:1.15;
}
#show-mach .show-title-glow{
    background: linear-gradient(90deg,#9be4f5,#7cd3ec,#5e97c9);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 18px rgba(124,211,236,.35);
}

/* Glass/Neon card */
#show-mach .show-card{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
#show-mach .show-card::after{
    /* animated neon edge */
    content:""; position:absolute; inset:0;
    background:conic-gradient(from 180deg, #9be4f5 0%, rgba(155,228,245,0) 20% 80%, #7cd3ec 100%);
    filter:blur(18px); opacity:.18; pointer-events:none; transform:translateZ(0);
}
#show-mach .show-card:hover{
    transform: translateY(-6px);
    border-color: rgba(155,228,245,.5);
    box-shadow: 0 16px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(155,228,245,.25) inset;
}

/* Image frame with soft parallax on hover */
#show-mach .show-img-wrap{
    aspect-ratio: 16 / 9;
    overflow:hidden;
    position:relative;
}
#show-mach .show-img{
    width:100%; height:100%; object-fit:cover;
    transform: scale(1.06);
    transition: transform .6s ease;
}
#show-mach .show-card:hover .show-img{ transform: scale(1.12); }

/* Ribbons */
#show-mach .show-ribbon{
    position:absolute; top:14px; left:14px; z-index:2;
    font-size:.75rem; font-weight:700; letter-spacing:.08em;
    color:#0b1d33; background:#9be4f5; border-radius:999px;
    padding:.28rem .6rem; box-shadow:0 2px 10px rgba(155,228,245,.45);
}
#show-mach .show-ribbon.alt{
    color:#071a2e; background:#7cd3ec;
}

/* Small screen tweaks */
@media (max-width: 575.98px){
    #show-mach .section-title{ font-size:1.6rem; }
}

/* ===== Mobile tweaks ===== */
@media (max-width: 575.98px){
    .hero-video-content{ padding: 4rem 1rem; margin-top: 8rem !important; }
    .glass{ padding: 1.25rem !important; border-radius: 14px; }
    .display-6{ font-size: 1.5rem; }
    .hero-video-wrap{ min-height: 520px; }
}
@media (min-width: 576px) and (max-width: 991.98px){
    .hero-video-content{ margin-top: 10rem !important; }
}

/* логотиптің тым үлкен болмауы */
.navbar-brand img{ height: 56px; width:auto; }
@media (min-width: 768px){ .navbar-brand img{ height: 72px; } }

/* сурет биіктігі экранға сай өзгереді */
.img-top-persons{
    height: clamp(220px, 36vw, 400px);
}

/* ұсақ экранда навбатырмалар кішірейеді, қол жетімді аймақ үлкейеді */
#topplayers .carousel-btn{
    width: 40px; height: 40px; font-size: 20px;
}
@media (max-width: 575.98px){
    #topplayers .carousel-btn{ width: 36px; height: 36px; font-size: 18px; }
    #topplayers .btn-prev{ left: 10px; }
    #topplayers .btn-next{ right: 10px; }
}

/* тректің ішіндегі элементтер арасы жұмсақ жылжуы үшін */
#topplayers .carousel-viewport{ -webkit-overflow-scrolling: touch; }

@media (max-width: 575.98px){
    #show-mach .p-4{ padding: 1rem !important; }
    #show-mach .show-img-wrap{ aspect-ratio: 16/10; }
    #show-mach .section-title{ font-size: 1.45rem; }
}

.navbar .nav-link{ padding: .5rem .75rem; }
@media (max-width: 991.98px){
    .navbar .nav-link{ padding: .75rem 1rem; } /* мобайлда тап-таргет ↑ */
}

/* ===== Mobile hotfixes (iPhone 12 Pro ≈ 390px) ===== */

/* 1) Hero толық экран: жолақ биіктігін ескерсін */
.hero-video-wrap{ height: 100dvh; }

/* 2) Hero контент: орталыққа дәл түссін, инлайн margin-top орнына */
.hero-video-content{ padding: clamp(48px, 10vh, 96px) 1rem; }

/* 3) «Шыны» карточка: түбінде батырмаларға орын қалсын */
.glass{ padding-bottom: clamp(56px, 8vh, 92px) !important; border-radius: 14px; }

/* 4) Countdown: ұсақ экранда 2×2 тор */
@media (max-width: 420px){
    #countdown{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        justify-content: center;
    }
    #countdown > .col-auto{
        width: 100% !important;
        padding: 0 !important;
    }
    #countdown .card-soft-black{ width: 100%; }
}

/* 5) Батырмалар: қатар сыймаса — авто-оралу */
.hero-video-content .d-flex{ flex-wrap: wrap; }
@media (max-width: 380px){
    .hero-video-content .d-flex > a{ flex: 1 1 100%; }
}

/* 6) WhatsApp FAB басқа элементтермен қабаттаспасын */
.fab-whatsapp{
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1030;
}

/* 7) Навбар: оқылуы жақсы болсын */
.navbar.scrolled{ background: rgba(0,0,0,.92); backdrop-filter: blur(6px); }

/* 8) Үлкен тақырып пен лид үшін адаптив өлшем */
.display-6{ font-size: clamp(20px, 4.5vw, 32px); }
.lead{ font-size: clamp(13px, 3.6vw, 18px); }

.map-card{overflow:hidden}
.map-card::after{
    content:"";position:absolute;inset:0;
    transition:background .2s ease
}
.map-card:hover::after{background:rgba(0,0,0,.55)}
.map-card img{display:block;transition:transform .35s ease}
.map-card:hover img{transform:scale(1.03)}
.map-cta{
    position:absolute;top:.75rem;right:.75rem;
    transform:none;
    color:#fff;padding:.5rem .9rem;border-radius:999px;
    background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
    text-decoration:none
}
.map-card:hover .map-cta{background:rgba(0,0,0,.65)}
.map-card:focus-visible .map-cta{outline:2px solid #fff;outline-offset:3px}

/* Контейнер */
.partners-marquee {
    white-space: nowrap;
    animation: scroll-right 8s linear infinite;
}

/* Анимация: оңнан солға жылжу */
@keyframes scroll-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Лого стильдері */
.partner-logo {
    height: 120px;
    width: auto;
    background-color: rgb(185 196 213 / 25%);
    border-radius: 8px;
}

/* Hover кезінде баяулау */
.partners-marquee:hover {
    animation-play-state: paused;
}

/* Мобильдіге бейімдеу */
@media (max-width: 576px) {
    .partner-logo {
        height: 90px;
        padding: 4px !important;
    }
}