/* ============================================
   PAN ENGINEERS — RESPONSIVE CSS
   Mobile First Media Queries
============================================ */

/* ---- Laptop / Small Desktop (1200px) ---- */
@media (max-width: 1200px) {
    .header-phone .phone-text {
        display: none;
    }
    .header-phone {
        padding: 8px;
        border-radius: 50%;
    }
    .pe-nav {
        margin: 0 4px;
        gap: 2px;
    }
    .nav-link {
        padding: 6px 8px;
        font-size: 13px;
    }
}

/* ---- Tablet (1024px) ---- */
@media (max-width: 1024px) {
    .header-phone {
        display: none;
    }

    .products-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

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

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

/* ---- Mobile (768px) ---- */
@media (max-width: 768px) {
    :root {
        --section-py: 70px;
    }

    /* Header */
    .pe-nav {
        display: none;
    }

    .header-cta-btn {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-nav {
        display: flex;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-nav.open {
        opacity: 1;
        pointer-events: all;
    }

    /* Hero */
    .hero-stats {
        gap: 0;
        flex-wrap: wrap;
    }

    .stat-item {
        padding: 0 16px;
    }

    .hero-controls {
        bottom: 60px;
        right: 20px;
    }

    .hero-scroll-indicator {
        display: none;
    }

    /* Products */
    .products-grid {
        grid-template-columns: 1fr;
    }

    .card-image-wrap {
        height: 220px;
    }

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

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

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

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

/* ---- Small Mobile (480px) ---- */
@media (max-width: 480px) {
    .header-inner {
        height: 68px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
    }

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

    .stat-divider {
        display: none;
    }

    .stat-item {
        padding: 0;
    }

    .card-content {
        padding: 20px;
    }

    .card-footer {
        flex-direction: column;
    }

    .card-btn {
        width: 100%;
    }

    .card-call-btn {
        width: 100%;
        justify-content: center;
    }

    .products-cta {
        flex-direction: column;
    }

    .products-cta-btn,
    .catalogue-cta-btn {
        width: 100%;
        justify-content: center;
    }
}