@media(max-width: 1024px){

    .hero-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .hero-content{
        text-align:center;
    }

    .hero-content p,
    .hero-stats{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .bs-nav-menu{
        display:none;
    }
}

@media(max-width: 768px){

    .container{
        width:min(100% - 28px, 1180px);
    }

    .bs-navbar{
        padding:14px 0;
    }

    .bs-logo img{
        height:44px;
    }

    .bs-nav-actions{
        gap:8px;
    }

    .bs-btn-primary,
    .bs-btn-outline{
        height:42px;
        padding:0 15px;
        font-size:12px;
    }

    .hero-section{
        padding:30px 0 54px;
    }

    .hero-content h1{
        font-size:42px;
        letter-spacing:-1.5px;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.75;
    }

    .hero-stats{
        grid-template-columns:1fr;
    }

    .prediction-card{
        padding:20px;
        border-radius:24px;
    }

    .teams{
        grid-template-columns:1fr;
    }

    .vs{
        margin:auto;
    }

    .prediction-result{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .section-title h2{
        font-size:30px;
    }

    .bs-footer-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width: 420px){

    .bs-nav-actions .bs-btn-outline{
        display:none;
    }

    .hero-content h1{
        font-size:36px;
    }

    .hero-badge{
        font-size:10px;
        padding:9px 12px;
    }
}
.mobile-bottom-nav{
    display:none;
}

@media(max-width:768px){

    body{
        padding-bottom:82px;
    }

    .mobile-bottom-nav{
        position:fixed;
        left:14px;
        right:14px;
        bottom:14px;
        z-index:999;
        height:68px;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:6px;
        padding:8px;
        border-radius:24px;
        background:rgba(5,7,13,.86);
        border:1px solid rgba(255,255,255,.12);
        backdrop-filter:blur(22px);
        box-shadow:
            0 20px 50px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.08);
    }

    .mobile-nav-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        border-radius:18px;
        color:rgba(255,255,255,.54);
        font-size:18px;
        transition:.25s ease;
    }

    .mobile-nav-item small{
        font-size:10px;
        font-weight:700;
    }

    .mobile-nav-item.active,
    .mobile-nav-item:hover{
        color:#07100a;
        background:linear-gradient(135deg,var(--bs-green),var(--bs-gold));
        box-shadow:0 0 24px rgba(183,255,42,.25);
    }
}