/* === LANDING-RESPONSIVE.CSS ===
   assets/css/landing-responsive.css
   НАЗНАЧЕНИЕ: Responsive breakpoints для landing page
   СВЯЗИ: landing.css, main.css
   РАЗМЕР: ~150 строк */

/* -- 1200px: tablets landscape -- */
@media (max-width: 1200px) {
    .mb-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* -- 768px: tablets portrait -- */
@media (max-width: 768px) {
    .mb-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bg-secondary);
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 24px 40px;
        gap: 20px;
        border-left: 1px solid var(--border-color);
        transition: right 0.3s ease;
        z-index: 99;
    }

    .mb-nav.open { right: 0; }

    .mb-burger { display: flex; z-index: 101; }

    .mb-lang { align-self: flex-start; }

    .mb-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .mb-section { padding: 70px 0; }

    .mb-section__title {
        margin-bottom: 40px;
    }

    .mb-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mb-stat-card { padding: 20px 16px; }
    .mb-stat-card__value { font-size: 1.8rem; }

    .mb-how__steps {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .mb-step { flex: none; width: 100%; max-width: 340px; }

    .mb-step__line {
        width: 2px;
        height: 30px;
        flex: 0 0 30px;
        margin: 0;
        background: linear-gradient(180deg, rgba(233, 69, 96, 0.3), var(--color-primary));
    }

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

    .mb-compare__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mb-footer__inner {
        flex-direction: column;
        text-align: center;
    }

    .mb-footer__links { justify-content: center; }
}

/* -- 480px: mobile -- */
@media (max-width: 480px) {
    .mb-container { padding: 0 16px; }

    .mb-hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .mb-hero__actions .mb-btn { width: 100%; }

    .mb-section__title {
        margin-bottom: 32px;
    }

    .mb-stats__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mb-stat-card__value { font-size: 1.6rem; }

    .mb-feature-card { padding: 20px 16px; }

    .mb-compare__row {
        font-size: 0.85rem;
        padding: 12px 16px;
    }

    .mb-faq__question {
        font-size: 0.95rem;
        padding: 14px 16px;
    }

    .mb-faq__answer p {
        padding: 0 16px 14px;
        font-size: 0.85rem;
    }

    .mb-footer__links {
        flex-direction: column;
        gap: 12px;
    }
}