/* ==========================================================================
   Poprawki wersji mobilnej (ładowane jako ostatnie).
   ========================================================================== */
.nowrap { white-space: nowrap; }
.faq-box a[href^="tel:"], .ab-contact a, .ft-cols a[href^="tel:"] { white-space: nowrap; }

@media (max-width: 640px) {
    /* --- Hero --- */
    .m-hide { display: none; }
    .header-main-section .hero-eyebrow { text-align: center; }
    .header-main-section .header-paragraph-home { font-size: 16px; line-height: 25px; }
    .assure-hero { gap: 6px 14px; font-size: 13px; }
    .hero-price { font-size: 13px; line-height: 19px; }

    /* --- Nagłówki sekcji: spójne odstępy --- */
    .heading-two { font-size: 32px; line-height: 36px; letter-spacing: -1.2px; }
    .highlight-above-heading { font-size: 11px; }

    /* --- Cennik --- */
    .pricing-alert { padding: 14px 16px; gap: 12px; }
    .pricing-alert p { font-size: 13.5px; line-height: 21px; }
    .pricing-alert-tag { display: table; margin: 0 0 6px; }
    .pricing-grid { gap: 32px; }
    .pricing-badge { line-height: 17px; }
    .pricing-month { font-size: 13px; line-height: 19px; }
    .pricing-features li { font-size: 14.5px; line-height: 21px; }
    .pricing-foot { font-size: 12.5px; }

    /* --- Integracja: kompaktowe kafelki w 2 kolumnach --- */
    .tools-section { padding-left: 16px; padding-right: 16px; }
    .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tools-intro { grid-column: 1 / -1; padding-right: 0; margin-bottom: 8px; }
    .tools-card { padding: 14px; border-radius: 14px; }
    .tools-logo { width: 40px; height: 40px; border-radius: 10px; }
    .tools-logo img { width: 22px; height: 22px; }
    .tools-logo .tools-gen { width: 20px; height: 20px; }
    .tools-name { margin-top: 12px; font-size: 15px; line-height: 20px; }
    .tools-desc { font-size: 12.5px; line-height: 18px; }

    /* --- Liczby --- */
    .metrics-joined .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metrics-card { padding: 14px; }
    .metrics-label { font-size: 10.5px; line-height: 15px; min-height: 30px; }
    .metrics-value { font-size: 28px; line-height: 34px; white-space: nowrap; }

    /* --- Opinie: przewijane w poziomie zamiast 6 kart pod sobą --- */
    .ss-opinions .ss-grid { display: flex; max-width: none; margin-left: -16px; margin-right: -16px; padding: 4px 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; }
    .ss-opinions .ss-grid::-webkit-scrollbar { display: none; }
    .ss-opinions .ss-card { flex: 0 0 84%; scroll-snap-align: center; margin-top: 0 !important; }
    .ss-opinions .ss-q-open { display: none; }
    .ss-opinions .ss-card blockquote { margin-top: 14px; }

    /* --- FAQ --- */
    .faq-question { font-size: 16px; line-height: 23px; }

    /* --- Stopka --- */
    .ft-btns { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 10px; }
    .ft-btns .ft-btn { margin-top: 0; justify-content: space-between; }
    .ft-cols nav[aria-label="Kontakt"] { grid-column: 1 / -1; }
    .ft-cols a, .ft-cols span { overflow-wrap: normal; }
}

/* ===== Mobile – menu z oddechem, mniejszy nagłówek, akapity 15 px ===== */
@media (max-width: 640px) {
    /* Menu odsunięte od góry – nad nim widać niebo z tła hero */
    .site-nav { top: 24px; width: calc(100% - 40px); border-radius: 20px; }
    .site-nav.is-scrolled { top: 10px; }
    .header-main-section { padding-top: 120px; }

    /* Nagłówek w hero */
    .header-main-section .heading-one-home { font-size: 34px; line-height: 38px; letter-spacing: -1.4px; }

    /* Akapity 15 px */
    .paragraph,
    .header-main-section .header-paragraph-home,
    .stack-desc, .sig-desc, .bento-desc, .steps-desc,
    .faq-answer-text, .cs-block p, .groups-card p,
    .ss-card blockquote, .ss-lead, .pricing-lead, .pricing-note,
    .tools-nowp, .law-lead { font-size: 15px; line-height: 23px; }
    .stack-title { font-size: 24px; line-height: 30px; }
}

/* ===== Mobile – ujednolicona typografia i odstępy sekcji z kartami ===== */
@media (max-width: 640px) {
    /* Nagłówki sekcji (H2) */
    .heading-two { font-size: 28px; line-height: 33px; letter-spacing: -1px; font-weight: 500; }

    /* „Jedna zmiana ceny…”: 20 px od opisu do kart, mniejsze odstępy sekcji */
    .sig-section { padding-bottom: 48px; }
    .sig-section .sig-grid { margin-top: 20px; }

    /* Tytuły kart – jedna wielkość i grubość w całej stronie */
    .sig-title, .stack-title, .bento-title, .steps-title, .groups-card h3 { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.5px; }

    /* Karty „Główne funkcje” – takie same wewnętrzne odstępy jak karty powyżej */
    .stack-section { padding-top: 48px; padding-bottom: 48px; }
    .stack-list { gap: 16px; }
    .stack-card { padding: 16px 16px 22px; gap: 0; border-radius: 24px; }
    .stack-text { padding: 6px 4px 0; order: 2; }
    .stack-visual { order: 1; padding: 28px 14px; border-radius: 16px; }
    .stack-title { margin-top: 14px; }
    .stack-desc { margin-top: 10px; }
    .stack-button { margin-top: 20px; }
}

/* ===== Główne funkcje – nagłówek tylko na telefonie, makiety bez dodatkowego tła ===== */
.stack-head { display: none; }
@media (max-width: 640px) {
    .stack-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
    .stack-head .paragraph { max-width: 340px; }
    /* makiety jak mapa: bez kolorowego tła i bez wewnętrznych marginesów */
    .stack-card .stack-visual { padding: 0; background: none; }
    .stack-card .stack-visual .sv { max-width: none; box-shadow: 0 1px 2px rgba(16, 28, 25, .04); }
    /* odstęp między makietą a etykietą sekcji */
    .stack-card .stack-text { padding-top: 22px; }
}
@media (max-width: 640px) {
    .stack-section { flex-direction: column; align-items: stretch; }
    .stack-head { width: 100%; }
}
@media (max-width: 640px) { .stack-card .sv-code { display: none; } }

/* ===== Poprawki mobilne – cennik, realizacje, integracja, spółki, audyt ===== */
.pricing-alert p { text-align: left; }
.tools-buy { display: none; }
.at-score b { top: 0; height: 84px; display: flex; align-items: center; justify-content: center; line-height: 1; }

@media (max-width: 640px) {
    /* Realizacje: pasek „Twoja inwestycja…” bez ikony plusa */
    .cs-cta .pf-cta-ico { display: none; }
    .cs-cta .pf-cta-in { grid-template-columns: minmax(0, 1fr); }
    .cs-cta .pf-cta-in .pf-name, .cs-cta .pf-cta-in .pf-dev { grid-column: 1; }

    /* Integracja: przycisk zakupu na całą szerokość */
    .tools-section { flex-direction: column; align-items: stretch; }
    .tools-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 16px; padding: 8px 8px 8px 22px; min-height: 52px; border-radius: 999px; background: #101c19; color: #ffffff; font-family: 'Inter', 'Inter Fallback', Arial, sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; box-sizing: border-box; }
    .tools-buy-ico { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #ffffff; color: #101c19; display: flex; align-items: center; justify-content: center; }
    .tools-buy-ico svg { width: 14px; height: 14px; }

    /* Spółki celowe: notka o dniach w pliku – zawijanie zamiast wychodzenia poza kartę */
    .gm-note { flex-wrap: wrap; white-space: normal; line-height: 16px; }

    /* Audyt: najpierw tekst i formularz, potem animacja */
    .at-card .stack-text { order: 1; padding-top: 6px; }
    .at-card .stack-visual { order: 2; margin-top: 22px; }
    .at-score b { height: 56px; width: 56px; }
}
@media (max-width: 640px) { .groups-card p.gm-note { font-size: 11px; line-height: 16px; } }

/* ===== Mobile – odstępy sekcji i przyciski zakupu (listopad 2026) ===== */
.faq-buy, .sig-buy { display: none; }
@media (max-width: 640px) {
    /* Tekst nad nagłówkiem H2: 10 px zamiast 20 px */
    .highlight-above-heading + .heading-two,
    .ss-eyebrow + .heading-two,
    .ft-eyebrow + .ft-title { margin-top: 10px; }

    /* Jeden panel do zarządzania ofertą */
    .bento-section .bento-grid { margin-top: 20px; }
    .bento-section .bento-mock { margin-top: 20px; }

    /* Proces wdrożenia */
    .steps-section .steps-list { margin-top: 20px; }
    .steps-section.steps-joined { padding-bottom: 20px; }

    /* Cennik */
    .pricing-section .pricing-cta { padding-top: 20px; }
    .pricing-section .pricing-foot { margin-top: 10px; }

    /* Integracja */
    .tools-section { padding-top: 0; }

    /* Wiele spółek celowych w jednym panelu */
    .groups-section.groups-joined { padding-bottom: 20px; }

    /* Przyciski zakupu pod statystykami i pod FAQ */
    .metrics-section .m-buy { margin-top: 20px; }
    .faq-buy { display: block; position: relative; z-index: 1; width: 100%; align-self: stretch; margin-top: 24px; }
    .faq-buy .m-buy { margin-top: 0; }

    /* Audyt: bez górnego odstępu, nagłówek nad kafelkiem */
    .stack-section.at-section { padding-top: 0; }
    .at-section .at-head-m { margin-bottom: 20px; }
}

/* ===== Mobile – „Jedna zmiana ceny…”, akapity pod H2 ===== */
@media (max-width: 640px) {
    /* Akapit pod nagłówkiem H2: 10 px */
    .heading-two + .paragraph { margin-top: 10px; }

    /* „Jedna zmiana ceny…”: pełna szerokość, 16 px z lewej i prawej */
    .sig-section .sig-head,
    .sig-section .sig-grid { max-width: none; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
    .sig-section .sig-lead { max-width: none; }

    /* Przycisk zakupu pod kartami */
    .sig-buy { display: block; width: 100%; align-self: stretch; box-sizing: border-box; padding: 0 16px; margin-top: 10px; }
    .sig-buy .m-buy { margin-top: 0; }
}

/* ===== Mobile – menu po przewinięciu na całą szerokość, przyklejone do góry ===== */
@media (max-width: 640px) {
    .site-nav { transition: top .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1), border-radius .35s, border-color .3s, box-shadow .3s; }
    .site-nav.is-scrolled { top: 0; width: 100%; border-radius: 0; border-width: 0 0 1px; }
    .site-nav.is-scrolled .site-nav-inner { padding-left: 20px; padding-right: 20px; }
}