/* ==========================================================================
   AVP TECH SOLUTION - COMPREHENSIVE MOBILE RESPONSIVE STYLESHEET
   ========================================================================== */

/* 1. GLOBAL OVERFLOW PREVENTATIVE & NATIVE SMOOTH MOMENTUM SCROLL */
html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    max-width: 100%;
}

/* 2. MOBILE PERFORMANCE GPU OPTIMIZATION (DISABLE HEAVY BLUR FILTERS ON MOBILE) */
@media (max-width: 900px) {
    #cursor {
        display: none !important;
    }
    
    /* Disable heavy 120px blur background blobs on mobile GPUs */
    .aurora-blob {
        display: none !important;
    }
    
    /* Replace heavy backdrop-filter blur with crisp solid semi-transparent background for 60fps scrolling */
    .glass, .glass-light {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(18, 24, 32, 0.95) !important;
    }
    
    .navbar.scrolled {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(8, 10, 17, 0.96) !important;
    }
}

/* 3. NAVBAR & MOBILE HEADER FIX */
@media (max-width: 900px) {
    .navbar {
        padding: 0.75rem 0 !important;
    }
    .nav-container {
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        justify-content: space-between !important;
    }
    .logo {
        font-size: 1.15rem !important;
        white-space: nowrap !important;
    }
    /* Hide header button on small mobile screens to prevent pushing hamburger offscreen */
    .nav-cta-btn {
        display: none !important;
    }
    .hamburger {
        display: flex !important;
        z-index: 10001 !important;
    }
    .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 82% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #080A11 !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.75rem !important;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 10000 !important;
        box-shadow: -10px 0 40px rgba(0,0,0,0.9) !important;
        padding: 2rem !important;
    }
    .nav-links.active {
        right: 0 !important;
    }
    .nav-links a {
        font-size: 1.15rem !important;
        color: #F7F6F2 !important;
    }
}

/* 4. HERO SECTION MOBILE OPTIMIZATION */
@media (max-width: 900px) {
    .hero {
        min-height: auto !important;
        padding-top: 6.5rem !important;
        padding-bottom: 3rem !important;
    }
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        text-align: center !important;
    }
    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.25 !important;
    }
    .hero p {
        font-size: 1rem !important;
    }
    .hero-buttons {
        flex-direction: column !important;
        gap: 0.85rem !important;
        width: 100% !important;
    }
    .hero-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .workflow-diagram {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 5. ALL INLINE MULTI-COLUMN GRIDS CONVERT TO SINGLE-COLUMN ON MOBILE */
@media (max-width: 768px) {
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    [style*="repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    [style*="repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .bento-wide {
        grid-column: span 1 !important;
    }
    .bento-card {
        padding: 1.5rem !important;
    }

    .case-study-card {
        grid-template-columns: 1fr !important;
        padding: 1.5rem !important;
    }

    .crm-grid {
        grid-template-columns: 1fr !important;
    }
    .kanban-cols {
        grid-template-columns: 1fr !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    svg {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    [style*="repeat(4, 1fr)"],
    [style*="repeat(3, 1fr)"],
    [style*="repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    .container {
        padding: 0 1rem !important;
    }
    h1 {
        font-size: 1.85rem !important;
    }
    h2 {
        font-size: 1.5rem !important;
    }
}