/* ==========================================
   MOBILE APP EXPERIENCE STYLE
   Universal Compatibility (All Phone Brands)
   ========================================== */

/* --- HIDE DESKTOP ELEMENTS ON ALL MOBILE DEVICES --- */
@media screen and (max-width: 991px) {

    .top-bar,
    .desktop-nav,
    .header-cta,
    .slider-btn,
    .footer-brand,
    .footer-links,
    .footer-contact {
        display: none !important;
    }
}

/* --- MAIN MOBILE APP STYLES (Tablets & Phones: < 768px) --- */
@media screen and (max-width: 768px) {

    /* >>> GLOBAL RESET & BASE <<< */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
        /* Dynamic bottom spacing */
        background-color: #050505;
        /* Deep black for OLED */
        -webkit-tap-highlight-color: transparent;
        /* Remove grey tap box on iOS */
    }

    .container {
        padding: 0 20px;
        /* Standardized side padding */
        width: 100%;
        max-width: 100%;
    }

    /* >>> HEADER & NAVIGATION <<< */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 12px 0;
        background: rgba(10, 10, 10, 0.85);
        /* Slightly more transparent */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        /* iOS Support */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
    }

    /* Adjust main content to not start behind fixed header */
    /* Header is fixed, main content layout handled by specific page styles or hero-slider settings */

    .top-bar,
    .desktop-nav,
    .header-cta,
    .mobile-toggle,
    .slider-btn {
        display: none !important;
    }

    header .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo img {
        height: 32px;
        /* Standard mobile navbar height */
        width: auto;
    }

    /* >>> HERO SLIDER (Immersive) <<< */
    #hero-slider {
        margin-top: 0;
        /* Align to top of screen behind header */
        height: 60vh;
        /* Taller for better visual impact */
        border-radius: 0 0 30px 30px;
        overflow: hidden;
        position: relative;
    }

    .hero-content {
        padding: 25px;
        bottom: 15%;
        /* Push up slightly */
        width: 100%;
        left: 0;
        transform: none;
        text-align: center;
        /* Center text for mobile */
    }

    .hero-content h1 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        /* Responsive scaling */
        margin-bottom: 10px;
        text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    .hero-content p {
        display: block;
        /* Show short blurb */
        font-size: 0.95rem;
        opacity: 0.9;
        margin-bottom: 20px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .hero-content .btn-primary,
    .hero-content .btn-secondary {
        padding: 12px 24px;
        font-size: 0.9rem;
        border-radius: 50px;
        /* Pill shape */
        width: auto;
        min-width: 120px;
    }

    /* >>> APP-LIKE BOTTOM NAVIGATION <<< */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        /* Subtle border */
        z-index: 10000;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        /* CRITICAL for iPhone X+ */
        box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #666;
        font-size: 10px;
        /* Small text */
        font-weight: 500;
        gap: 4px;
        padding: 5px 10px;
        flex: 1;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-item i {
        font-size: 1.4rem;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .nav-item.active {
        color: #ffffff;
        /* Active text is white */
    }

    .nav-item.active i {
        color: #d32f2f;
        /* Active icon is red */
        transform: translateY(-3px);
    }

    /* Floating Action Button (FAB) */
    .nav-item.fab {
        position: relative;
        top: -25px;
        /* Float upwards */
        background: #d32f2f;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 4px solid #050505;
        /* Cutout effect matching bg */
        color: white;
        box-shadow: 0 8px 20px rgba(211, 47, 47, 0.5);
        flex: 0 0 auto;
        /* Don't stretch */
        display: flex;
        justify-content: center;
        /* Center content horizontally */
        align-items: center;
        /* Center content vertically */
        padding: 0;
        /* Reset padding to center correctly */
    }

    .nav-item.fab i {
        font-size: 1.5rem;
        transform: none !important;
        color: white !important;
    }

    /* >>> HORIZONTAL SCROLL CARDS (Netflix Style) <<< */
    .services-grid,
    .references-grid,
    .testimonials-grid,
    .video-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Momentum scroll on iOS */
        gap: 16px;
        padding: 10px 20px 30px 20px;
        /* Side padding inside scroll container */
        margin: 0 -20px;
        /* Negative margin to pull to edges */
        width: calc(100% + 40px);
        /* Compensate negative margin */
    }

    .service-card,
    .reference-item,
    .testimonial-card,
    .video-item {
        flex: 0 0 85%;
        /* Shows 85% of card, hinting at next one */
        width: 85%;
        min-width: 280px;
        /* Min width for small phones */
        scroll-snap-align: center;
        margin: 0 !important;
    }

    /* Hide scrollbars */
    .services-grid::-webkit-scrollbar,
    .references-grid::-webkit-scrollbar,
    .testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    .services-grid,
    .references-grid,
    .testimonials-grid {
        scrollbar-width: none;
        /* Firefox */
    }

    /* >>> ADJUST SPECIFIC SECTIONS <<< */
    .section-header {
        text-align: center;
        padding: 0 10px;
        margin-bottom: 25px;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    /* Footer Simplified */
    footer.modern-footer {
        padding-bottom: 90px;
        /* Extra space for bottom nav */
        text-align: center;
    }

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

    .footer-links,
    .footer-contact {
        display: none;
        /* Simplify footer for app-view, focus on key actions */
    }

    .footer-brand .brand-desc {
        margin: 0 auto 20px auto;
    }

    .social-links {
        justify-content: center;
    }
}

/* --- SMALL PHONES (iPhone SE, Older Androids: < 380px) --- */
@media screen and (max-width: 380px) {
    .nav-item span {
        display: none;
        /* Hide labels on very small screens, show icons only */
    }

    .nav-item i {
        font-size: 1.6rem;
        /* Make icons slightly larger */
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }
}

/* --- HIDE BOTTOM NAV ON DESKTOP --- */
@media screen and (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}