/* ===================================================
   Anti-Ugar Theme — Responsive CSS
   =================================================== */

/* ===== Tablet (≤ 1024px) ===== */
@media (max-width: 1024px) {
    .hero-title      { font-size: 42px; }
    .section-title   { font-size: 34px; }
    .hero-grid       { gap: 40px; }
    .pricing-grid    { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .calc-grid       { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto 60px; }
    .problems-grid   { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-top      { grid-template-columns: 1fr 1fr; }
    .single-layout   { grid-template-columns: 1fr; }
}

/* ===== Mobile Large (≤ 768px) ===== */
@media (max-width: 768px) {
    .header-content .btn { display: none; }
    .mobile-menu-btn { display: flex; }

    .nav-menu {
        position: fixed;
        top: 70px; left: 0; right: 0;
        background: #0a0c12;
        backdrop-filter: blur(12px);
        flex-direction: column;
        padding: 20px;
        gap: 4px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 999;
    }
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
    .nav-link {
        display: block;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 16px;
        color: #ffffff;
    }
    .nav-link:hover { background: rgba(245,158,11,.15); color: #F59E0B; }

    .hero { padding: 120px 0 72px; }
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { order: -1; }
    .hero-title { font-size: 36px; }
    .hero-description { font-size: 16px; }
    .hero-stats { gap: 20px; }
    .stat-number, .stat-suffix { font-size: 26px; }

    .floating-card-1, .floating-card-2 { display: none; }

    .problems-grid { grid-template-columns: 1fr; }

    .features-grid { grid-template-columns: 1fr; }

    .testimonials-grid { grid-template-columns: 1fr; }

    /* Download */
    .download-main-card { flex-direction: column; padding: 28px; text-align: center; }
    .download-card-left { flex-direction: column; align-items: center; text-align: center; }
    .download-card-right { width: 100%; }
    .btn-download-main { width: 100%; }
    .download-features-row { flex-direction: column; }
    .df-divider { padding: 8px 0; writing-mode: unset; }
    .df-divider::before { top: 50%; bottom: unset; left: 0; right: 0; width: auto; height: 1px; }
    .df-divider span { writing-mode: unset; padding: 0 12px; }
    .install-steps { grid-template-columns: 1fr 1fr; }
    .download-install-guide { padding: 28px 20px; }
    .user-journey { padding: 28px 20px; }
    .journey-steps { flex-direction: column; align-items: stretch; gap: 20px; }
    .journey-step { flex-direction: row; text-align: left; }
    .journey-body { max-width: 100%; }
    .journey-arrow { transform: rotate(90deg); margin: 0 auto; }

    .section-title { font-size: 28px; }

    .cta-title { font-size: 32px; }
    .cta-card { padding: 52px 28px; }

    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 16px; }

    .posts-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }

    .pricing-grid { max-width: 100%; }

    .testimonials-stats { gap: 32px; padding: 32px; flex-wrap: wrap; }

    .calc-form { padding: 28px; }
}

/* ===== Mobile Small (≤ 480px) ===== */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    .hero-title { font-size: 26px; }
    .section-title { font-size: 22px; }
    .cta-title { font-size: 24px; }
    .cta-card { padding: 32px 20px; }

    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-stats { flex-direction: column; gap: 16px; }
    .install-steps { grid-template-columns: 1fr; }
    .stat-divider { display: none; }

    .btn-lg { padding: 14px 24px; font-size: 16px; }

    .features-tabs { gap: 8px; }
    .tab-btn { padding: 8px 16px; font-size: 14px; }

    .cta-actions { flex-direction: column; }
    .cta-actions .btn { width: 100%; }

    .pricing-card { padding: 28px 16px; }
    .pricing-grid { max-width: 100%; }

    .calc-result-value { font-size: 28px; }
    .calc-form { padding: 20px 16px; }

    .testimonials-stats { gap: 20px; padding: 24px 16px; }
    .t-stat-number { font-size: 28px; }

    .problems-grid { grid-template-columns: 1fr; }

    .order-tariffs { grid-template-columns: 1fr; }
    .order-requisites-grid { grid-template-columns: 1fr; }

    .download-title { font-size: 28px; }
    .btn-download-main { font-size: 16px; }
    .journey-step { flex-direction: column; text-align: center; }

    .footer-top { gap: 24px; }

    .hero-mockup { transform: none !important; }
    .section-header { margin-bottom: 32px; }
}

/* ===== Print ===== */
@media print {
    .header, .footer, .back-to-top, .progress-bar, .cta-section { display: none !important; }
    body { background: white; }
    .site-main { padding-top: 0; }
}
