/* ================================================================
   RESPONSIVE STYLES — AVP Tech Solution
   Mobile-first responsive breakpoints
   ================================================================ */

/* ---- Tablet & Below (max-width: 1024px) ---- */
@media (max-width: 1024px) {

    .avp-grid--4,
    .avp-process__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .avp-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--avp-spacing-xl);
    }

    .avp-why__grid {
        grid-template-columns: 1fr;
        gap: var(--avp-spacing-xl);
    }

    .avp-why__visual {
        order: -1;
        min-height: 300px;
    }

    .avp-hero__content {
        max-width: 100%;
    }

    .avp-hero__stats {
        gap: var(--avp-spacing-lg);
    }

    .avp-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .avp-contact__grid {
        grid-template-columns: 1fr;
        gap: var(--avp-spacing-xl);
    }

    .avp-process__connector {
        display: none;
    }
}


/* ---- Mobile Landscape & Below (max-width: 768px) ---- */
@media (max-width: 768px) {

    :root {
        --avp-spacing-section: 5rem;
    }

    /* Navigation */
    .avp-menu-toggle {
        display: flex;
    }

    .avp-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 360px;
        height: 100vh;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        flex-direction: column;
        justify-content: center;
        padding: var(--avp-spacing-xl);
        transition: right var(--avp-transition-base);
        border-left: 1px solid var(--avp-dark-border);
        z-index: 1000;
    }

    .avp-nav.active {
        right: 0;
    }

    .avp-nav__list {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .avp-nav__link {
        display: block;
        padding: 0.85rem 1.25rem;
        font-size: 1.1rem;
        border-radius: var(--avp-radius-md);
    }

    .avp-nav__link:hover {
        background: rgba(37, 99, 235, 0.08);
    }

    .avp-nav__link::after {
        display: none;
    }

    .avp-nav .avp-btn {
        width: 100%;
        margin-top: var(--avp-spacing-md);
    }

    /* Overlay */
    .avp-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .avp-menu-overlay.active {
        display: block;
    }

    /* Grid */
    .avp-grid--2,
    .avp-grid--3,
    .avp-grid--4,
    .avp-about-mission__grid,
    .avp-testimonials__grid {
        grid-template-columns: 1fr;
    }

    .avp-process__steps {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    /* Hero */
    .avp-hero {
        text-align: center;
    }

    .avp-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .avp-hero__actions {
        justify-content: center;
    }

    .avp-hero__stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--avp-spacing-lg);
    }

    .avp-hero__glow {
        width: 350px;
        height: 350px;
    }

    /* Footer */
    .avp-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--avp-spacing-lg);
    }

    .avp-footer__brand {
        text-align: center;
    }

    .avp-footer__brand p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .avp-footer__social {
        justify-content: center;
    }

    .avp-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    /* CTA */
    .avp-cta__inner {
        padding: var(--avp-spacing-xl);
    }

    /* Why Us Visual */
    .avp-why__visual-ring:nth-child(1) {
        width: 220px;
        height: 220px;
    }

    .avp-why__visual-ring:nth-child(2) {
        width: 160px;
        height: 160px;
    }

    .avp-why__visual-ring:nth-child(3) {
        width: 100px;
        height: 100px;
    }
}


/* ---- Mobile Portrait (max-width: 480px) ---- */
@media (max-width: 480px) {

    :root {
        --avp-spacing-section: 4rem;
    }

    html {
        font-size: 15px;
    }

    .avp-container {
        padding: 0 var(--avp-spacing-sm);
    }

    .avp-hero {
        min-height: auto;
        padding-top: 120px;
        padding-bottom: var(--avp-spacing-3xl);
    }

    .avp-hero__title {
        font-size: 2.2rem;
    }

    .avp-hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .avp-hero__actions .avp-btn {
        width: 100%;
        max-width: 320px;
    }

    .avp-hero__stat-value {
        font-size: 1.6rem;
    }

    .avp-btn--large {
        padding: 0.95rem 2rem;
        font-size: 0.95rem;
    }

    .avp-card {
        padding: var(--avp-spacing-lg);
    }

    .avp-page-hero {
        padding: 130px 0 60px;
    }

    .avp-page-hero h1 {
        font-size: 2rem;
    }

    .avp-values-grid {
        grid-template-columns: 1fr;
    }
}