@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    :root { --header-height: 64px; }

    body { padding-top: calc(var(--topbar-height) + var(--header-height)); }

    .top-bar { height: 46px; }
    .top-bar-inner { gap: 8px; padding: 0 10px; }
    .top-bar-contact-list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; min-width: 0; }
    .top-bar-contact-list .top-bar-contact:nth-of-type(2),
    .top-bar-contact-mail { display: none; }
    .top-bar-contact {
        min-width: 0;
        height: 34px;
        justify-content: center;
        padding: 0 10px;
        gap: 8px;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 999px;
        background: rgba(255,255,255,.10);
    }
    .top-bar-contact:first-child { padding-left: 10px; }
    .top-bar-contact-wa { background: rgba(37,211,102,.18); }
    .top-bar-icon { width: 24px; height: 24px; }
    .top-bar-text { display: none; min-width: 0; }
    .top-bar-text small { display: none; }
    .top-bar-text strong { display: none; max-width: 132px; font-size: 12px; line-height: 1; }
    .top-bar-emergency {
        width: 132px;
        height: 34px;
        justify-content: center;
        padding: 0 10px;
        gap: 7px;
        box-shadow: none;
    }
    .top-bar-emergency strong { max-width: 96px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }

    .mobile-menu-toggle { display: flex; }

    .main-nav {
        position: fixed;
        inset: calc(46px + var(--header-height)) 0 0 0;
        display: none;
        padding: 0;
        background: rgba(15,31,61,.42);
        backdrop-filter: blur(8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .24s ease, visibility .24s ease;
        overflow: hidden;
        z-index: 9998;
    }
    .main-nav.open { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
    .nav-list {
        width: min(430px, calc(100vw - 20px));
        height: 100%;
        margin: 0 auto;
        padding: 18px 14px 28px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(226,232,240,.92);
        border-top: 0;
        border-radius: 0 0 26px 26px;
        box-shadow: 0 28px 70px rgba(15,31,61,.24);
        transform: translateY(-18px) scale(.98);
        transition: transform .32s cubic-bezier(.22,1,.36,1);
    }
    .main-nav.open .nav-list { transform: translateY(0) scale(1); }
    .nav-item { width: 100%; }
    .nav-link {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 28px;
        min-height: 58px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 850;
        justify-content: initial;
        align-items: center;
        text-align: left;
        color: var(--primary-dark);
        background: transparent;
    }
    .nav-item:not(.has-mega) .nav-link { grid-template-columns: 40px minmax(0, 1fr); }
    .nav-link:hover, .nav-link.active { color: var(--primary); background: #eef5ff; border-color: rgba(45,108,192,.12); }
    .menu-icon { width: 36px; height: 36px; margin: 0; border-radius: 12px; background: #f1f6ff; font-size: 18px; }
    .menu-arrow { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f8fafc; color: var(--text-light); font-size: 11px; }
    .nav-contact { margin-top: 8px; justify-content: center; color: var(--white) !important; background: linear-gradient(135deg, var(--primary), var(--primary-light)); box-shadow: 0 14px 30px rgba(45,108,192,.22); }
    .has-mega.open .menu-arrow { transform: rotate(180deg); }

    .mega-menu {
        position: static;
        display: grid;
        grid-template-rows: 0fr;
        min-width: 0;
        max-width: none;
        margin: 0 0 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        overflow: hidden;
        transition: grid-template-rows .28s ease;
    }
    .has-mega:hover .mega-menu { transform: none; }
    .has-mega.open .mega-menu { grid-template-rows: 1fr; }
    .mega-inner { min-height: 0; padding: 0 0 0 52px; display: none; overflow: hidden; }
    .mega-grid { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; padding: 6px 0 8px; }
    .is-mega .mega-grid { min-width: 0; }
    .mega-col { padding: 12px; border: 1px solid rgba(226,232,240,.92); border-radius: 16px; background: #f8fbff; }
    .mega-title { font-size: 12px; margin-bottom: 7px; padding-bottom: 7px; border-bottom-color: rgba(45,108,192,.12); letter-spacing: .2px; }
    .mega-col ul { gap: 4px; }
    .mega-col ul li a { padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--primary-dark); }
    .mega-col ul li a:hover { padding-left: 14px; background: var(--white); color: var(--primary); }
    .mega-visual { display: none; }

    .hero { padding: 40px 0 60px; }
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 15px; }
    .hero-buttons .btn { width: 100%; }

    .hero-slider { height: 480px; }
    .hero-slider h1 { font-size: 28px; }
    .hero-slider p { font-size: 15px; }
    .slide-content, .slide-content-right { text-align: left; margin-left: 0; margin-right: 0; }
    .slide-content p, .slide-content-right p { margin-left: 0; margin-right: 0; }
    .slide-content .hero-buttons, .slide-content-right .hero-buttons { justify-content: flex-start; }
    .slider-arrow { width: 38px; height: 38px; }
    .slider-dots { bottom: 20px; }
    .slider-controls { padding: 0 10px; }

    .section { padding: 48px 0; }
    .section-header h2 { font-size: 26px; }
    .contact-page-modern { padding: 36px 16px 56px; }
    .contact-reference-grid, .contact-map-grid { grid-template-columns: 1fr; }
    .contact-form-modern { padding: 28px 24px 0; }
    .contact-alert { margin: 20px 24px 0; }
    .contact-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-row-modern { grid-template-columns: 1fr; gap: 0; }
    .contact-info-rich { padding: 0 28px 32px; }
    .contact-info-illustration { right: 28px; top: 170px; width: 210px; height: 330px; }
    .home-vitrin-shell { padding: 28px 18px; border-radius: 22px; }
    .home-vitrin-header h2 { font-size: 30px; }
    .services-grid, .blog-grid, .trust-grid { grid-template-columns: 1fr; }
    .reviews-showcase { grid-template-columns: 1fr; }
    .reviews-summary-card { padding: 22px; }
    .reviews-track { grid-auto-columns: minmax(260px, 82vw); }
    .review-prev { left: 4px; }
    .review-next { right: 4px; }

    .cta-banner h2 { font-size: 24px; }
    .cta-banner-buttons .btn { width: 100%; }

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

    .page-content h1, .blog-detail h1, .service-header h1 { font-size: 28px; }

    .float-call, .float-wa { width: 48px; height: 48px; bottom: 16px; }
    .float-call { left: 16px; }
    .float-wa { right: 16px; }
    .ai-chatbot { right: 16px; bottom: 78px; }
    .ai-chatbot-toggle { width: 48px; height: 48px; }
    .ai-chatbot-panel { right: 0; bottom: 62px; width: calc(100vw - 32px); max-height: 72vh; }
    .ai-chatbot-messages { height: min(300px, 48vh); }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .top-bar-inner { padding: 0 8px; gap: 6px; }
    .top-bar-contact-list { gap: 6px; }
    .top-bar-contact { height: 32px; padding: 0 8px; gap: 6px; }
    .top-bar-contact:first-child { padding-left: 8px; }
    .top-bar-icon { width: 22px; height: 22px; }
    .top-bar-text small { display: none; }
    .top-bar-text strong { max-width: 118px; font-size: 11px; }
    .top-bar-emergency { width: 112px; height: 32px; padding: 0 8px; }
    .top-bar-emergency strong { max-width: 78px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
    .hero { padding: 32px 0 48px; }
    .hero h1 { font-size: 24px; }
    .hero-slider { height: 420px; }
    .hero-slider h1 { font-size: 24px; letter-spacing: -.8px; }
    .hero-slider p { font-size: 14px; }
    .hero-label { font-size: 11px; padding: 7px 14px; margin-bottom: 16px; }
    .slider-dot { width: 22px; }
    .slider-dot.active { width: 22px; transform: scaleX(1.18); }
    .contact-card-title { min-height: 82px; padding: 18px; }
    .contact-form-modern { padding: 22px 18px 0; }
    .contact-service-grid { grid-template-columns: 1fr; }
    .contact-service-option { min-height: 86px; }
    .contact-form-modern label, .contact-section-label { font-size: 16px; }
    .contact-form-modern .form-control { min-height: 54px; font-size: 16px; padding: 13px 16px; }
    .contact-info-rich { padding: 0 20px 24px; }
    .contact-info-row { grid-template-columns: 44px 1fr; gap: 13px; }
    .contact-info-row-icon { width: 44px; height: 44px; }
    .contact-info-row strong { font-size: 17px; }
    .contact-info-illustration { display: none; }
    .contact-map-preview { min-height: 220px; }

    /* ── Contact V2 Responsive ── */
    .contact-page-v2 { padding: 28px 0 48px; }
    .contact-v2-grid { grid-template-columns: 1fr; gap: 20px; }
    .contact-v2-form { padding: 22px 20px 28px; }
    .contact-v2-alert { margin: 16px 20px 0; }
    .contact-v2-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .contact-v2-service-inner { min-height: 90px; padding: 10px 4px; border-radius: 12px; }
    .contact-v2-service-icon { width: 36px; height: 36px; }
    .contact-v2-service-icon svg { width: 20px; height: 20px; }
    .contact-v2-service-inner strong { font-size: 12px; }
    .contact-v2-row { grid-template-columns: 1fr; gap: 0; }
    .contact-v2-group { margin-bottom: 14px; }
    .contact-v2-input { min-height: 48px; padding: 10px 14px; font-size: 16px; border-radius: 10px; }
    .contact-v2-textarea { min-height: 100px; }
    .contact-v2-captcha { padding: 14px 16px; }
    .contact-v2-captcha-q { min-width: 90px; min-height: 40px; font-size: 16px; padding: 0 12px; }
    .contact-v2-submit { min-height: 52px; font-size: 16px; border-radius: 12px; }

    .contact-v2-info-header { min-height: 74px; padding: 16px 20px; }
    .contact-v2-info-body { padding: 20px 20px 24px; }
    .contact-v2-info-item { grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 12px; }
    .contact-v2-info-item-icon { width: 40px; height: 40px; }
    .contact-v2-info-item strong { font-size: 14px; }
    .contact-v2-tracking { margin-top: 20px; padding: 24px 16px 20px; }
    .contact-v2-tracking-icon { width: 56px; height: 56px; }
    .contact-v2-tracking strong { font-size: 16px; }
    .contact-v2-wa-btn { min-height: 56px; font-size: 16px; }

    .contact-v2-map-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
    .contact-v2-map-card { border-radius: 16px; padding: 16px 16px 12px; }
    .contact-v2-map-card h3 { font-size: 15px; margin-bottom: 10px; }
    .contact-v2-map-frame iframe { height: 260px; }

    .service-card, .trust-card { padding: 24px; }
    .ai-chatbot-form { padding: 10px; }
    .ai-chatbot-form button { padding: 0 12px; }
    .service-card.has-image { padding: 0; }
    .service-image { height: 170px; }
    .service-body { padding: 22px 24px 24px; }
    .faq-question { padding: 16px 20px; font-size: 15px; }
    .review-card { min-height: 245px; padding: 20px; }
    .review-nav { width: 36px; height: 36px; font-size: 26px; }
}