/**
 * ═══════════════════════════════════════════════════════════════════
 *  Warstwa mobilna — wspólna dla wszystkich stron motywu.
 *
 *  DLACZEGO OSOBNY PLIK
 *  main.css to skompilowany arkusz przeniesiony ze statycznej wersji
 *  serwisu (ma własną mapę źródeł). Poprawki mobilne trzymamy obok,
 *  żeby dało się je przejrzeć w jednym miejscu i żeby ewentualna
 *  ponowna kompilacja main.css ich nie skasowała.
 *
 *  Ładowany jako ostatni, więc przy równej specyficzności wygrywa.
 * ═══════════════════════════════════════════════════════════════════
 */

/* ═══════════ TYPOGRAFIA I ODDECH SEKCJI ═══════════ */
/*
 * .section-title miał clamp(2rem, 4vw, 2.8rem) — dolna granica 2rem
 * oznaczała 32 px także na 360-px ekranie. Nagłówki zajmowały wtedy
 * po cztery wiersze. Obniżamy dolną granicę i pozwalamy skalować się
 * z szerokością ekranu.
 */
@media (max-width: 768px) {

    .section          { padding: 62px 0; }
    .section-header   { margin-bottom: 38px; }

    .section-title    { font-size: clamp(1.55rem, 5.6vw, 2rem); letter-spacing: -.3px; line-height: 1.25; }
    .section-desc     { font-size: 1rem; line-height: 1.7; }
    .section-tag      { font-size: .72rem; padding: 6px 14px; }

    h3                { font-size: 1.06rem; }

    /* Karty: mniejszy wyściółka = krótsze scrollowanie */
    .feature-card,
    .pricing-card,
    .seo-content-card,
    .step-item,
    .usp-strip__item  { padding: 22px 20px; }

    .features-grid,
    .steps-grid,
    .usp-strip__grid,
    .benefits-grid    { gap: 16px; }
}

/* Sekcja CTA ma własne tło i własny padding — nie łapie się na .section */
@media (max-width: 768px) {
    .cta-section           { padding: 58px 0; }
    .cta-section h2,
    .cta-content h2        { font-size: clamp(1.5rem, 5.4vw, 1.9rem); line-height: 1.3; }
    .cta-section::before   { max-width: 100%; }
}

@media (max-width: 480px) {
    .section          { padding: 48px 0; }
    .cta-section      { padding: 46px 0; }
    .section-header   { margin-bottom: 30px; }
    .container        { padding: 0 18px; }
}

/*
 * Pułapka na boty leży poza ekranem (left: -9999px), ale zachowywała
 * swoją naturalną szerokość. Zwężamy ją, żeby nie liczyła się w żadnych
 * pomiarach szerokości dokumentu.
 */
.hp-field { width: 1px; }

/* ═══════════ PODGLĄD: ZAKŁADKI ═══════════ */
/*
 * Trzy zakładki w rzędzie zajmowały 566 px przy 390-px ekranie.
 * Pasek nie zawijał się ani nie przewijał, więc trzecia zakładka
 * była nieosiągalna. Na wąskim ekranie układamy je jedna pod drugą.
 */
@media (max-width: 720px) {

    .demo-tabs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .demo-tab {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 16px;
        font-size: 14px;
    }

    /* Poświata tła sekcji miała sztywne 900 px i wypychała stronę w bok */
    .demo-bg-glow {
        max-width: 100%;
        height: 70vw;
        top: -80px;
    }
}

/* ═══════════ PRZYCISKI ═══════════ */
/*
 * Pary przycisków (hero, sekcje CTA) na wąskim ekranie układamy
 * pionowo i rozciągamy — inaczej łamią się w środku etykiety.
 */
@media (max-width: 560px) {

    .hero-actions,
    .cta-actions,
    .kup-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

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

    /* Dwukolumnowe pary pól w formularzach */
    .form-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════ SIATKI DWUKOLUMNOWE ═══════════ */
@media (max-width: 620px) {
    .features-grid,
    .steps-grid,
    .usp-strip__grid,
    .pricing-grid,
    .trust-grid,
    .seo-content-grid { grid-template-columns: 1fr; }
}

/* ═══════════ ZABEZPIECZENIE PRZED PRZEWIJANIEM W BOK ═══════════ */
/*
 * Ostatnia linia obrony: dekoracje w tle (poświaty, siatki, znaki wodne)
 * nie mogą rozciągać dokumentu. Treść, która ma się przewijać w poziomie
 * — tabele i pasek faktów — ma własny kontener i jest tu pominięta.
 */
@media (max-width: 768px) {
    body { overflow-x: hidden; }
}