/* ============================================================
   RESPONSIVE — All media queries (mobile-first)
   Base styles = mobile. Queries add tablet (768px+) and desktop (1024px+).
   ============================================================ */

/* ── Tablet: 768px+ ── */
@media (min-width: 768px) {

    /* Layout */
    .section {
        padding-block: 80px;
    }

    .section--lg {
        padding-block: 100px;
    }

    /* Header logo — tablet */
    .header__logo-img {
        height: 40px;
    }

    /* Header CTA — tablet (hamburger still visible, no nav) */
    .header__cta-btn {
        font-size: 0.8rem;
        padding: 10px 20px;
    }

    /* Hero */
    .hero__headline {
        font-size: 2.75rem;
    }

    .hero__subheadline {
        font-size: 1.125rem;
    }

    /* Features grid: 2 columns */
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Mini grid: 2 columns */
    .mini-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Steps: horizontal */
    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 28px;
        inset-inline-start: calc(50% + 36px);
        width: calc(100% - 72px);
        height: 2px;
        background: var(--color-border);
    }

    /* Pricing grid: 2 columns */
    .pricing__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

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

    /* Section titles */
    .section-title {
        font-size: 2.125rem;
    }

    .section-subtitle {
        font-size: 1.125rem;
    }

    /* CTA */
    .cta-section__headline {
        font-size: 2.375rem;
    }

    /* Channel blocks: side by side */
    .channel-block {
        flex-direction: row;
        gap: 64px;
    }

    .channel-block--reverse {
        flex-direction: row-reverse;
    }

    .channel-block__visual {
        width: 50%;
        flex-shrink: 0;
    }

    .channel-block__content {
        width: auto;
        flex: 1;
    }

    .channel-block__title {
        font-size: 1.625rem;
    }
}

/* ── Desktop: 1024px+ ── */
@media (min-width: 1024px) {

    /* Layout */
    .section {
        padding-block: 96px;
    }

    .section--lg {
        padding-block: 120px;
    }

    /* Header logo — desktop */
    .header__logo-img {
        height: 44px;
    }

    /* Header: reveal full nav, hide hamburger — desktop only */
    .header__nav {
        display: flex;
        position: static;
        flex-direction: row;
        background: none;
        border: none;
        padding: 0;
        box-shadow: none;
        gap: 4px;
        align-items: center;
    }

    .header__hamburger {
        display: none;
    }

    /* Header CTA — full size on desktop, swap to full text */
    .header__cta-btn {
        font-size: 1rem;
        padding: 12px 24px;
    }

    .header__cta-full {
        display: inline;
    }

    .header__cta-short {
        display: none;
    }

    /* Hero: 2-column split layout */
    .hero {
        min-height: 88vh;
        padding-bottom: 64px;
    }

    .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .hero__content {
        text-align: start;
    }

    .hero__subheadline {
        margin-inline: 0;
    }

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

    .hero__trust {
        text-align: start;
    }

    .hero__headline {
        font-size: 3.5rem;
    }

    /* Features grid: 3 columns */
    .features__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    /* Mini grid: 3 columns */
    .mini-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Footer grid: 4 columns */
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
    }

    /* Section titles */
    .section-title {
        font-size: 2.375rem;
    }

    /* CTA */
    .cta-section__headline {
        font-size: 2.75rem;
    }

    .cta-section__subtitle {
        font-size: 1.125rem;
    }

    /* Channel visual */
    .channel-visual {
        aspect-ratio: 16 / 10;
    }
}

/* ── Wide: 1280px+ ── */
@media (min-width: 1280px) {

    .hero__headline {
        font-size: 3.875rem;
    }

    .hero__grid {
        gap: 80px;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .cta-section__headline {
        font-size: 3rem;
    }
}

/* ── Large mobile / small tablet (480px–767px) ── */
@media (min-width: 480px) {
    .hero__headline {
        font-size: 2.5rem;
    }

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

/* ── Max-width safety (no horizontal scroll) ── */
@media (max-width: 400px) {
    .hero__buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-section__buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary,
    .btn-secondary,
    .btn-whatsapp,
    .btn-inverse,
    .btn-whatsapp-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ── Trusted by title: uppercase letter-spacing only for desktop on English ── */
@media (min-width: 768px) {
    [lang="en"] .trusted-by__title {
        letter-spacing: 0.08em;
    }
}
@media (max-width: 434px) {
   .header__cta-btn {
        display: none;
    }
}