/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { column-count: 2; }
    .item-wide { /* Deprecated */ }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-content { grid-template-columns: 1fr 1fr; gap: 30px; }
    .contact-page-grid { grid-template-columns: 1fr; }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* NAV */
    .hamburger { display: flex; }
    .nav-links {
        position: fixed; top: 0; right: -100%;
        width: 280px; height: 100vh; height: 100dvh;
        background: var(--bg2); flex-direction: column;
        justify-content: center; gap: 24px; padding: 40px;
        transition: right 0.4s ease;
        border-left: 1px solid var(--border);
        z-index: 999;
    }
    .nav-links.open { right: 0; }
    .nav-link.cta-link { text-align: center; }

    /* HERO */
    .hero { padding: 90px 16px 40px; min-height: 100vh; min-height: 100dvh; }
    .hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
    .hero-subtitle { font-size: 0.92rem; padding: 0 8px; margin-bottom: 0; }
    .hero-actions { flex-direction: column; align-items: center; gap: 10px; }
    .hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; padding: 12px 20px; }
    .hero-stats { flex-direction: row; justify-content: space-around; gap: 12px; width: 100%; max-width: 480px; margin-top: 16px; }
    .stat-number { font-size: 1.8rem; }
    .stat-suffix { font-size: 1.1rem; }
    .stat-label { font-size: 0.7rem; }
    .stat-divider { width: 1px; height: 32px; }
    .scroll-indicator { display: none; }

    /* SECTIONS */
    .section { padding: 60px 0; }
    .section-header { margin-bottom: 36px; }
    .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }
    .section-desc { font-size: 0.95rem; padding: 0 8px; }
    .container { padding: 0 16px; }

    /* ABOUT */
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-visual { order: -1; justify-content: center; }
    .visual-card { width: 160px; height: 210px; }

    /* SERVICES */
    .services-grid { grid-template-columns: 1fr; gap: 16px; }
    .service-card { padding: 24px 20px; }

    /* PORTFOLIO */
    .portfolio-grid { column-count: 1; column-gap: 16px; }
    .item-wide { /* Deprecated */ }
    .portfolio-filters { gap: 8px; }
    .filter-btn { padding: 6px 14px; font-size: 0.8rem; }

    /* REVIEWS */
    .reviews-grid { grid-template-columns: 1fr; gap: 16px; }
    .review-card { padding: 24px 20px; }
    .review-badge-large { padding: 20px 28px; }
    .review-percent { font-size: 2.2rem; }

    /* PROCESS */
    .process-grid { grid-template-columns: 1fr; gap: 16px; }
    .process-step { padding: 28px 20px; }

    /* FAQ */
    .faq-question { padding: 16px 18px; font-size: 0.92rem; }
    .faq-answer p { padding: 0 18px 16px; font-size: 0.88rem; }

    /* CTA BANNER */
    .cta-banner { padding: 50px 0; }
    .cta-banner h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
    .cta-banner p { font-size: 0.95rem; padding: 0 16px; }

    /* CONTACT */
    .contact-wrapper { max-width: 100%; }
    .contact-page-grid { grid-template-columns: 1fr; gap: 32px; }
    .contact-item { padding: 12px 16px; }

    /* FOOTER */
    .footer { padding: 40px 0 16px; }
    .footer-content { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .footer-social { justify-content: center; }
    .footer-brand p { max-width: 100%; }

    /* PAGE HERO */
    .page-hero { padding: 120px 16px 50px; }
    .page-hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .page-hero p { font-size: 0.95rem; }

    /* VALUES & TIMELINE */
    .values-grid { grid-template-columns: 1fr; gap: 16px; }
    .timeline { padding-left: 20px; border-left: 1px dashed rgba(255,255,255,0.15); }
    .timeline-item { padding: 0; padding-left: 16px; margin-bottom: 40px; }
    .timeline-item::before { left: -26px; top: 8px; width: 10px; height: 10px; }
    .timeline-item:hover { transform: translateX(4px); }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    .hero { padding: 75px 12px 20px; min-height: 100vh; min-height: 100dvh; }
    .hero-title { font-size: clamp(1.4rem, 6vw, 1.8rem); margin-bottom: 0; }
    .hero-subtitle { font-size: 0.85rem; margin-bottom: 0; }
    .hero-badge { font-size: 0.75rem; padding: 6px 14px; margin-bottom: 0; }
    .stat-number { font-size: 1.5rem; }
    .stat-suffix { font-size: 1rem; }
    .stat-label { font-size: 0.65rem; }
    .hero-stats { margin-top: 16px; gap: 8px; }

    .section { padding: 48px 0; }
    .section-title { font-size: 1.35rem; }
    .section-tag { font-size: 0.7rem; letter-spacing: 2px; }

    .service-card h3 { font-size: 1.1rem; }
    .service-card p { font-size: 0.85rem; }
    .service-tags span { font-size: 0.68rem; padding: 3px 8px; }

    .btn { padding: 12px 24px; font-size: 0.9rem; }
    .btn-outline { padding: 11px 23px; }

    .nav-links { width: 100%; }

    .footer-links h4 { font-size: 0.85rem; }
    .footer-links a { font-size: 0.8rem; }
    .footer-bottom p { font-size: 0.72rem; }

    .contact-icon { width: 36px; height: 36px; min-width: 36px; }
    .contact-label { font-size: 0.68rem; }
    .contact-item strong { font-size: 0.85rem; }

    .review-card p { font-size: 0.88rem; }
    .author-avatar { width: 34px; height: 34px; font-size: 0.85rem; }

    .page-hero { padding: 100px 12px 40px; }
    .page-hero h1 { font-size: 1.5rem; }
    .cta-banner { padding: 36px 0; }
    .cta-banner h2 { font-size: 1.3rem; }
}

/* ===== SAFE AREA / NOTCH SUPPORT ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    .footer-bottom { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .nav-links { padding-bottom: env(safe-area-inset-bottom); }
}