/* =====================================================
   Innovana AdBlock VPN — Responsive Styles
   ===================================================== */

/* ---------- Large tablets / small desktops ---------- */
@media (max-width: 1199.98px){
    .phone-wrap{max-width:380px}
}

/* ---------- Tablets (<= 991px) ---------- */
@media (max-width: 991.98px){
    .section{padding:70px 0}

    /* Navbar collapses to dark dropdown panel */
    .site-nav .navbar-collapse{
        background:var(--navy-deep);
        border-radius:14px;margin-top:12px;padding:12px;
    }
    .site-nav .nav-link{padding:.6rem 1rem !important}
    .site-nav .dropdown-menu{background:#2f2d78;margin-top:4px}
    .site-nav .dropdown-item{color:#e7e6f7}
    .site-nav .dropdown-item:hover{background:#3a387f;color:#fff}

    /* Hero centers */
    .hero{padding:50px 0 70px;text-align:center}
    .hero-sub{margin-left:auto;margin-right:auto}
    .hero-stats{justify-content:center;gap:30px}
    .hero-btns{justify-content:center}
    .trust-row{justify-content:center}
    .rating-pill{margin-top:6px}
    .phone-wrap{margin-top:46px}

    /* How-it-works: line hidden, steps stack 2-up */
    .steps-line{display:none}
    .step{margin-bottom:14px}
}

/* ---------- Mobile (<= 767px) ---------- */
@media (max-width: 767.98px){
    .section{padding:56px 0}
    .sec-title{font-size:1.6rem}

    .hero-title{font-size:2rem}
    .hero-stats{gap:22px}
    .hstat-num{font-size:1.4rem}

    .btn-grad.btn-lg{font-size:.9rem;padding:13px 22px;white-space:normal}

    /* Comparison: tighten padding */
    .compare-table thead th,
    .compare-table tbody td{padding:12px 14px;font-size:.82rem}

    .final-cta{padding:42px 24px}
    .fc-pills{gap:8px}
    .fc-pills span{font-size:.72rem;padding:6px 12px}

    .footer-addr{max-width:none}
}

/* ---------- Small mobile (<= 575px) ---------- */
@media (max-width: 575.98px){
    .hero-title{font-size:1.75rem}
    .hero-stats{flex-wrap:wrap;gap:18px 30px}

    /* Steps stack single column */
    .how-section .step{padding-bottom:6px}

    .phone-wrap{max-width:320px}
    .vpn-active-badge{font-size:.7rem;padding:6px 12px}
    .ads-blocked-float{padding:9px 13px}
    .abf-ic{width:30px;height:30px;font-size:.9rem}
    .abf-num{font-size:1.02rem}

    .rating-badge{flex-direction:column;gap:4px;text-align:center}
    .rb-sub{text-align:center}

    /* Footer columns stack, left-align */
    .footer-bottom{font-size:.76rem}
}