/* ═══════════════════════════════════════════
   Revix - Responsive Breakpoints
   Mobile-first: base → sm → md → lg → xl
   ═══════════════════════════════════════════ */

/* ─── sm: 640px+ (Large mobile) ─── */
@media (min-width: 640px) {
    .hero__title {
        font-size: 3rem;
    }

    .hero__actions {
        flex-direction: row;
    }

    .download__badges {
        flex-direction: row;
    }

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

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

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

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

/* ─── md: 768px+ (Tablet) ─── */
@media (min-width: 768px) {
    :root {
        --container-padding: 32px;
    }

    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }

    .section {
        padding: var(--spacing-4xl) 0;
    }

    .section__title {
        font-size: 2.25rem;
    }

    .hero__title {
        font-size: 3.25rem;
    }

    .steps {
        flex-direction: row;
        gap: var(--spacing-xl);
    }

    .steps::before {
        left: 48px;
        right: 48px;
        top: 24px;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
    }

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

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

    .legal__title {
        font-size: 2.5rem;
    }

    .phone-mockup-pair {
        gap: var(--spacing-xl);
    }
}

/* ─── lg: 1024px+ (Desktop) ─── */
@media (min-width: 1024px) {
    .nav__links {
        display: flex;
    }

    .nav__toggle {
        display: none;
    }

    .hero__inner {
        flex-direction: row;
        text-align: left;
    }

    .hero__content {
        text-align: left;
        flex: 1;
    }

    .hero__actions {
        justify-content: flex-start;
    }

    .hero__mockup {
        flex-shrink: 0;
    }

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

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

    .download__inner {
        flex-direction: row;
    }

    .download__content {
        text-align: left;
        flex: 1;
    }

    .download__badges {
        align-items: flex-start;
    }

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

    .footer__stores {
        flex-direction: row;
    }
}

/* ─── xl: 1280px+ (Large desktop) ─── */
@media (min-width: 1280px) {
    .hero__title {
        font-size: 3.5rem;
    }

    .hero__description {
        font-size: 1.25rem;
    }

    .phone-mockup {
        width: 280px;
        height: 570px;
    }

    .phone-mockup--sm {
        width: 240px;
        height: 490px;
    }

    .services__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}