/* ============================================================
   AURA — Responsive Styles
   Breakpoints: 1200 / 1024 / 768 / 640 / 480px
   ============================================================ */

/* ── 1200px — Large tablets / small laptops ── */
@media (max-width: 1200px) {
    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--sp-xl);
    }

    .pricing-grid {
        gap: var(--sp-md);
    }
}

/* ── 1024px — Tablets landscape ── */
@media (max-width: 1024px) {
    :root {
        --fs-hero: clamp(2rem, 4vw, 3.5rem);
        --fs-5xl: 2.5rem;
        --fs-4xl: 2rem;
    }

    /* Nav mobile */
    .nav__links {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        height: 100vh;
        background: var(--color-bg);
        flex-direction: column;
        padding: calc(var(--nav-height) + var(--sp-lg)) var(--sp-xl) var(--sp-xl);
        gap: var(--sp-sm);
        box-shadow: -4px 0 24px rgba(0,0,0,0.1);
        z-index: 999;
        overflow-y: auto;
    }

    .nav__links--open {
        display: flex;
    }

    .nav__burger {
        display: flex;
        z-index: 1001;
    }

    .nav__cta {
        margin-left: 0;
        margin-top: var(--sp-md);
    }

    .nav__link {
        font-size: var(--fs-base);
        padding: var(--sp-sm) 0;
    }

    /* Grids */
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }

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

    .showcase {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }

    .showcase__content {
        max-width: 100%;
    }

    .steps::before { display: none; }

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

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

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .roi-calc__grid {
        grid-template-columns: 1fr;
    }

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

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

    /* Hero metrics */
    .hero__metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 768px — Tablets portrait ── */
@media (max-width: 768px) {
    :root {
        --sp-4xl: 64px;
        --sp-3xl: 48px;
        --container-padding: 20px;
    }

    .section {
        padding: var(--sp-3xl) 0;
    }

    .section__header {
        margin-bottom: var(--sp-2xl);
    }

    .section__title {
        font-size: var(--fs-3xl);
    }

    .highlights__grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; gap: var(--sp-xl); }

    .testimonials__grid { grid-template-columns: 1fr; }
    .advantages__grid { grid-template-columns: 1fr; }

    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--sp-2xl));
        padding-bottom: var(--sp-3xl);
    }

    .hero__metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-md);
    }

    .comparison-table {
        font-size: var(--fs-xs);
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 14px;
    }

    .phone-mockup {
        width: 220px;
        height: 440px;
        border-radius: 28px;
    }

    .phone-mockup__notch {
        width: 100px;
        height: 20px;
    }

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

    .contact-form__row {
        grid-template-columns: 1fr;
    }
}

/* ── 640px — Small tablets ── */
@media (max-width: 640px) {
    .nav__links {
        width: 100%;
    }

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

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

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

    .impact__stat-value {
        font-size: var(--fs-4xl);
    }

    .roi-calc__results {
        grid-template-columns: 1fr;
    }

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

    .cta-section__form {
        flex-direction: column;
    }
}

/* ── 480px — Mobile phones ── */
@media (max-width: 480px) {
    :root {
        --fs-hero: 2rem;
        --fs-5xl: 2rem;
        --fs-4xl: 1.75rem;
        --fs-3xl: 1.5rem;
        --container-padding: 16px;
    }

    .hero__metrics {
        grid-template-columns: 1fr 1fr;
        padding: var(--sp-md);
    }

    .hero__metric-value {
        font-size: var(--fs-2xl);
    }

    .hero__actions .btn {
        width: 100%;
    }

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

    .stat-grid--2 { grid-template-columns: 1fr; }
    .stat-grid--3 { grid-template-columns: 1fr; }

    .phone-mockup {
        width: 200px;
        height: 400px;
        border-radius: 24px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 8px;
        font-size: 11px;
    }

    .social-proof__logos {
        gap: var(--sp-xl);
    }

    .social-proof__logo {
        font-size: var(--fs-base);
    }

    .ticker__item {
        font-size: var(--fs-xs);
        padding: 6px 14px;
    }

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