/* ==========================================================
   MAVIME - Responsive Styles
   Tablet: up to 900px | Mobile: up to 600px
   ========================================================== */

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        display: none;
    }

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

    .contact-layout {
        grid-template-columns: 1fr;
    }

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

    /* Mobile menu */
    .nav-toggle {
        display: block;
    }

    .nav-links {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        background: rgba(255, 255, 255, 0.95);
        flex-direction: column;
        left: 0;
        max-height: 0;
        overflow: hidden;
        position: absolute;
        top: 72px;
        transition: max-height 0.35s;
        width: 100%;
    }

    .nav-links.open {
        max-height: 520px;
        padding: 12px 0 20px;
    }

    .nav-links a.nav-cta {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .section {
        padding: 52px 0;
    }

    .grid-2,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Projects and other grids: one column */
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Services: TWO columns on mobile */
    .services-grid {
        gap: 12px;
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid .card {
        padding: 16px;
    }

    .services-grid .card h3 {
        font-size: 0.95rem;
    }

    .services-grid .card p,
    .services-grid .feature-list li {
        font-size: 0.8rem;
    }

    .hero {
        padding: 110px 0 60px;
    }

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

    .page-header h1 {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .footer-wave {
        height: 36px;
    }

    .floating-buttons {
        bottom: 14px;
        right: 14px;
    }

    .floating-btn {
        height: 46px;
        width: 46px;
    }
}