/* ==========================================================================
 * BERDIGITAL — RESPONSIVE VANILLA CSS (TABLET & MOBILE BREAKPOINTS)
 * ========================================================================== */

@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-text {
        margin: 0 auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-stats {
        max-width: 480px;
        margin: 0 auto;
    }

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

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

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

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

@media (max-width: 768px) {
    .navbar-menu,
    .navbar-actions {
        display: none;
    }

    .mobile-toggle-btn {
        display: block;
    }

    .hero {
        padding: 50px 0 80px 0;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .catalog-header-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-tabs {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
        flex-wrap: nowrap;
    }

    .filter-tab {
        white-space: nowrap;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .btn-subscribe {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }

    .hero-title {
        font-size: 2.1rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .guarantee-banner {
        flex-direction: column;
        text-align: center;
    }

    .guarantee-content {
        flex-direction: column;
    }
}