/* =====================================================
   ANAIZEL TECHNOLOGIES — RESPONSIVE DESIGN SYSTEM
   Tablets, Mobile, Breakpoints & Touch Optimization
===================================================== */

/* =====================================================
   LARGE LAPTOP / COMPACT DESKTOP (1200px - 1440px)
===================================================== */
@media (max-width: 1440px) {
    .nav-menu {
        gap: clamp(10px, 1.4vw, 20px);
    }

    .mega-menu {
        width: min(1000px, calc(100% - 24px));
    }

    .hero-grid {
        gap: 36px;
    }
}

/* =====================================================
   LAPTOP / TABLET LANDSCAPE (1025px - 1200px)
===================================================== */
@media (max-width: 1200px) {
    .nav-menu {
        gap: 12px;
    }

    .nav-link {
        font-size: 13.5px;
    }

    .nav-actions .btn {
        padding: 7px 13px;
        font-size: 12.5px;
    }
    
    .mega-menu {
        width: min(920px, calc(100% - 20px));
        padding: 16px 18px;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr 1fr 220px;
        gap: 14px;
    }

    .mega-cap-item {
        padding: 6px 8px;
    }

    .hero-grid {
        gap: 32px;
    }
    
    .timeline-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .timeline-grid::before {
        display: none;
    }
    
    .footer-grid {
        grid-template-columns: 1.5fr repeat(3, 1fr);
        gap: 28px;
    }
}

/* =====================================================
   TABLET PORTRAIT (769px - 1024px)
===================================================== */
@media (max-width: 1024px) {
    .header {
        top: 10px;
        padding: 0 clamp(12px, 2vw, 20px);
    }

    .navbar {
        height: 58px;
        padding: 0 16px;
    }

    .nav-menu,
    .nav-actions {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }

    .page-header,
    .insights-hero {
        padding-top: clamp(34px, 4.5vw, 48px);
        padding-bottom: clamp(30px, 4vw, 44px);
    }

    .hero-supporting {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-trust {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }

    .hero-visual-wrapper {
        max-width: 380px;
        max-height: 380px;
        margin: 0 auto;
    }

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

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

    .split-layout,
    .split-layout.reversed {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .eco-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .arch-mesh-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .why-anaizel-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .home-careers-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .toolkit-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .case-study-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .footer-brand {
        grid-column: span 2;
    }
}

/* =====================================================
   MOBILE (max-width: 768px)
===================================================== */
@media (max-width: 768px) {
    .announcement {
        display: none;
    }

    .header {
        top: 8px;
        padding: 0 10px;
    }

    .navbar {
        height: 56px;
        padding: 0 14px;
    }

    .logo-img {
        height: 26px;
    }

    .page-header,
    .insights-hero {
        padding-top: clamp(28px, 4vw, 38px);
        padding-bottom: clamp(26px, 3.5vw, 36px);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .timeline-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .toolkit-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .arch-mesh-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tabs-nav {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: 12px;
    }

    .ecosystem-selector {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .eco-pill {
        flex-shrink: 0;
        padding: 6px 13px;
        font-size: 11.5px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cta-buttons .btn {
        width: 100%;
    }

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

    .footer-legal-links {
        justify-content: center;
        gap: 12px;
    }

    .hero-visual-wrapper {
        max-width: 320px;
        max-height: 320px;
    }
}

/* =====================================================
   SMALL MOBILE (max-width: 480px)
===================================================== */
@media (max-width: 480px) {
    :root {
        --container-padding: 14px;
        --section-spacing: 44px;
        --section-spacing-sm: 28px;
    }

    .capability-card,
    .principle-card,
    .industry-card,
    .toolkit-card,
    .insight-card,
    .case-study-card {
        padding: 18px 16px;
    }

    .hero-headline {
        font-size: clamp(1.85rem, 7.5vw, 2.35rem);
    }

    .page-header,
    .insights-hero {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .home-culture-highlights {
        grid-template-columns: 1fr;
    }

    .home-role-card {
        padding: 12px 14px;
    }

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

    .footer-brand {
        grid-column: span 1;
    }
}

/* =====================================================
   EXTRA SMALL MOBILE (max-width: 375px)
===================================================== */
@media (max-width: 375px) {
    :root {
        --container-padding: 12px;
    }

    .navbar {
        padding: 0 10px;
    }

    .logo-img {
        height: 24px;
    }
}