/* ==========================================================================
   responsive.css — Mobile-first breakpoint refinements
   ========================================================================== */

/* Navbar expands only at xl (8 links + CTA). Below xl it becomes a collapse. */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lift);
        padding: 1rem 1.25rem 1.5rem;
        margin-top: 0.9rem;
    }
    .navbar-nav {
        margin-bottom: 1rem !important;
    }
    .navbar-nav .nav-link.active::after { display: none; }
    .btn-sm-nav { width: 100%; justify-content: center; }
}

@media (max-width: 991.98px) {
    :root { --section-pad: 70px; }

    .hero { padding-top: 56px; }

    .section-head { margin-bottom: 2.5rem; }
    .process-list::before { left: 25px; }
    .process-number { width: 52px; height: 52px; font-size: 1rem; }

    /* Keep the hero mockup readable on tablets */
    .mock-layout { grid-template-columns: 1fr 200px; }
}

@media (max-width: 767.98px) {
    :root { --section-pad: 56px; }

    .hero-actions .btn { width: 100%; justify-content: center; }

    .stats-row {
        margin-top: 2.5rem;
        padding-top: 2rem;
        row-gap: 1.75rem;
    }

    /* Stack the hero mockup: desktop, then mobile+analytics, then automation */
    .mock-layout {
        grid-template-columns: 1fr;
    }
    .mock-side {
        flex-direction: row;
        align-items: stretch;
    }
    .phone-mock { flex: 1; }
    .analytics-card { flex: 1; }
}

@media (max-width: 575.98px) {
    .hero-title { font-size: 2.1rem; }
    .hero-subtitle { font-size: 1.05rem; }
    .hero-trust { flex-direction: column; gap: 0.75rem; }
    .cta-actions .btn { width: 100%; justify-content: center; }
    .btn-whatsapp { width: 100%; justify-content: center; }
}