/* ═══════════════════════════════════════════════════
   MOBILE FIXES
   ═══════════════════════════════════════════════════ */

/* ── Logo — nie wyłazi za pasek na mobile ──────────── */
@media (max-width: 767px) {
    .nav-logo img {
        height: 52px !important;
    }
    .nav-logo {
        margin-bottom: -10px !important;
    }
}

/* ── Hero heading — łamanie tekstu na mobile ───────── */
@media (max-width: 639px) {
    #hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
        word-break: break-word;
    }
    #hero h1 br { display: none; }
    #hero .pt-20 { padding-top: 5rem; }
}

/* ── Przyciski CTA — nie wychodzą poza ekran ───────── */
@media (max-width: 639px) {
    .btn-neon, .btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }
    /* Self-start anchor buttons */
    a.self-start.btn-neon,
    a.self-start.btn-outline {
        align-self: stretch;
    }
}

/* ── Cennik — ceny nie wylewają się ────────────────── */
@media (max-width: 479px) {
    .offer-card p.text-2xl,
    .offer-card p.text-xl {
        font-size: 1.2rem !important;
    }
    .offer-card p.text-2xl span,
    .offer-card p.text-xl span {
        display: block;
        font-size: 0.7rem !important;
        margin-top: 2px;
    }
    /* Netto w osobnej linii */
    .offer-card .text-\[11px\] {
        display: block;
    }
}

/* ── CTA końcowe — karty na mobile full width ──────── */
@media (max-width: 767px) {
    #cta .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    /* Ukryj pionowy divider LUB na mobile, pokaż poziomy */
    #cta .flex.md\:flex-col {
        flex-direction: row !important;
        padding: 0.5rem 0 !important;
    }
}

/* ── Overflow fix — żaden element nie wychodzi ─────── */
* { max-width: 100%; }
img, svg { max-width: 100%; height: auto; }

/* ── Padding sekcji na małych ekranach ─────────────── */
@media (max-width: 639px) {
    section { overflow-x: hidden; }
    .max-w-5xl, .max-w-6xl, .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ── Pipeline moduły — 1 kolumna na mobile ─────────── */
@media (max-width: 639px) {
    #system .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Sekcja "Masz marketing" — karty na mobile ─────── */
@media (max-width: 639px) {
    .control-card {
        padding: 1.25rem !important;
    }
}

/* ── Problem grid ──────────────────────────────────── */
@media (max-width: 479px) {
    #problem .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Dane grid ─────────────────────────────────────── */
@media (max-width: 479px) {
    #dane .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ── Prevent white background flash / bleed ─────────── */
html { background: #050505 !important; }

/* ── Mobile menu doesn't bleed through ──────────────── */
@media (max-width: 767px) {
    body { background: #050505 !important; }
    
    /* Prevent page content from showing through mobile overlay */
    #mobileOverlay.hidden { display: none !important; }
    
    /* Nav logo sizing */
    nav img { max-height: 36px; }
}

/* ── Mobile menu — schowany domyślnie, wysuwa się po kliknięciu ── */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}