/* ════════════════════════════════════════════════════════
     * VIEWPORT + OVERFLOW HARDENING
     * ════════════════════════════════════════════════════════ */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    img, video, iframe, svg, canvas {
        max-width: 100% !important;
        height: auto;
    }

    /* ════════════════════════════════════════════════════════
     * TABLET (≤ 960px)
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 960px) {
        body { padding-top: 56px !important; }

        /* Hero — single column stack */
        .hero, .home-hero {
            min-height: auto !important;
            padding: 70px 16px 50px !important;
        }
        .hero-grid {
            grid-template-columns: 1fr !important;
            gap: 40px !important;
            text-align: center !important;
        }
        .hero-text {
            text-align: center !important;
            align-items: center !important;
        }
        .hero h1, .home-hero h1 {
            font-size: clamp(28px, 7vw, 44px) !important;
            line-height: 1.15 !important;
        }
        .hero p.lead,
        .hero .hero-text p:not(.hero-bullets) {
            max-width: 100% !important;
            font-size: 15px !important;
        }
        .hero-bullets {
            justify-content: center;
            font-size: 13px !important;
        }
        .hero-cta {
            justify-content: center;
            width: 100%;
        }

        /* Hero visual — small grid 2×2 */
        .hero-visual {
            min-height: auto !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 12px !important;
            padding: 0 !important;
        }
        .hero-card {
            min-height: 150px !important;
            padding: 16px 14px !important;
        }
        .hero-card h4 { font-size: 14px !important; }
        .hero-card p { font-size: 11.5px !important; }
        .hero-card-metric .num { font-size: 18px !important; }
        .hero-card-icon { width: 38px !important; height: 38px !important; }
        .hero-card-icon .iconify { width: 18px !important; height: 18px !important; }
        .hero-card-chip {
            padding: 3px 8px;
            font-size: 9.5px;
        }

        /* Stats — column with proper alignment */
        .hero-stats, .stats-row {
            justify-content: center !important;
            gap: 24px !important;
            margin-top: 32px !important;
            padding-top: 22px !important;
        }
        .hero-stats > *, .stats-row > * {
            text-align: center !important;
            min-width: 28%;
        }
        .hero-stats > * > *:first-child,
        .stats-row > * > *:first-child {
            font-size: 28px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * MOBILE (≤ 640px)
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
        body { padding-top: 52px !important; }

        .hero, .home-hero {
            padding: 60px 14px 40px !important;
            min-height: auto !important;
        }
        .hero h1, .home-hero h1 {
            font-size: clamp(26px, 8vw, 36px) !important;
        }
        .hero-bullets {
            gap: 4px 12px !important;
            font-size: 12px !important;
        }
        .hero-bullets .b-sep { display: none; }

        /* Stack hero visual cards vertically */
        .hero-visual {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }
        .hero-card {
            min-height: auto !important;
            padding: 16px !important;
        }

        /* Stats — 1 column on tiny screens */
        .hero-stats, .stats-row {
            flex-direction: column !important;
            gap: 18px !important;
            align-items: center;
        }
        .hero-stats > *, .stats-row > * {
            min-width: 100% !important;
            padding-bottom: 18px !important;
            border-bottom: 1px solid rgba(212, 175, 55,.12) !important;
        }
        .hero-stats > *:last-child,
        .stats-row > *:last-child {
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }

        /* CTAs full width stack */
        .hero-cta {
            flex-direction: column !important;
            width: 100% !important;
        }
        .hero-cta a {
            width: 100% !important;
            justify-content: center;
        }

        /* Section titles smaller */
        section h2, .section-title h2, .section h2 {
            font-size: clamp(22px, 6vw, 30px) !important;
            padding: 0 16px;
        }
        .mt-comparison-section,
        .mt-personas-section {
            padding: 60px 14px !important;
        }
        .mt-comparison-section .lead,
        .mt-personas-section .lead {
            font-size: 14px !important;
            padding: 0 8px;
        }

        /* Comparison grid stack */
        .mt-cmp-grid {
            grid-template-columns: 1fr !important;
            gap: 16px !important;
        }
        .mt-cmp-card {
            padding: 24px 20px !important;
        }
        .mt-cmp-card h3 { font-size: 18px !important; }
        .mt-cmp-card li { font-size: 13.5px !important; }

        /* Personas grid stack */
        .mt-personas-grid {
            grid-template-columns: 1fr !important;
            gap: 14px !important;
        }
        .mt-persona-card {
            padding: 24px 22px !important;
        }
        .mt-persona-card h3 { font-size: 17px !important; }
        .mt-persona-card p { font-size: 13.5px !important; }
        .mt-persona-card::after {
            top: 22px;
            left: 22px;
            font-size: 20px;
        }
        body:not([dir="rtl"]) .mt-persona-card::after {
            left: auto;
            right: 22px;
        }

        /* Marquee smaller */
        .mt-marquee-section { padding: 32px 0; }
        .mt-marquee-track .item { font-size: 18px !important; }
        .mt-marquee-label { font-size: 10px; letter-spacing: 2px; }

        /* Section spacing tighter */
        section + section { padding-top: 50px !important; }

        /* Service cards (9-grid section) */
        .service-card {
            padding: 22px 18px !important;
        }
        .service-card h3, .service-card h4 {
            font-size: 17px !important;
        }
        .service-card p {
            font-size: 13.5px !important;
        }
        .service-card .service-icon,
        .service-card .icon {
            width: 44px !important;
            height: 44px !important;
            padding: 10px !important;
        }

        /* Container padding */
        .container {
            padding: 0 14px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * EXTRA SMALL (≤ 380px) — iPhone SE etc.
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 380px) {
        .hero h1, .home-hero h1 {
            font-size: clamp(22px, 8.5vw, 30px) !important;
        }
        .hero-card h4 { font-size: 13px !important; }
        .hero-card p { font-size: 11px !important; }
        .mt-toggles {
            top: 56px !important;
            left: 8px !important;
        }
        body[dir="rtl"] .mt-toggles {
            left: auto !important;
            right: 8px !important;
        }
        .mt-toggle-btn {
            width: 34px !important;
            height: 34px !important;
        }
        .mt-toggle-btn svg { width: 16px; height: 16px; }
        .mt-toggle-lang {
            font-size: 11.5px !important;
            padding: 0 9px !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * FAB STACK ORDER (Mobile)
     * Bottom-right: WhatsApp (24px) + Messenger (90px) + scroll-up
     * Top-left:     Theme + Lang toggles
     * Avoid overlap
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        /* WhatsApp FAB */
        .mt-wa-fab, [class*="whatsapp"][class*="fab"] {
            bottom: 18px !important;
            right: 18px !important;
            width: 50px !important;
            height: 50px !important;
            z-index: 9990 !important;
        }
        /* Messenger FAB above WhatsApp */
        .mt-msg-fab {
            bottom: 80px !important;
            right: 18px !important;
            width: 48px !important;
            height: 48px !important;
            z-index: 9989 !important;
        }
        /* Hide old back-fab if any */
        .mt-back-fab { display: none !important; }

        /* Mobile sticky CTA below FABs (if present) */
        .mt-mobile-sticky {
            padding-bottom: env(safe-area-inset-bottom, 12px) !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * NAVIGATION MOBILE — collapse to hamburger
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .mt-topbar {
            padding: 8px 12px !important;
            gap: 8px !important;
        }
        .mt-topbar-menu {
            gap: 2px !important;
            justify-content: flex-end !important;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
        }
        .mt-topbar-menu::-webkit-scrollbar { display: none; }
        .mt-topbar-link {
            padding: 5px 8px !important;
            font-size: 12px !important;
            white-space: nowrap;
        }
        .mt-topbar-link svg { width: 14px !important; height: 14px !important; }
        .mt-topbar-brand img { width: 22px !important; height: 22px !important; }
        .mt-topbar-brand { font-size: 13px !important; }
        .mt-topbar-cta {
            padding: 5px 10px !important;
            font-size: 11.5px !important;
        }
    }
    @media (max-width: 520px) {
        .mt-topbar-link span.label-text,
        .mt-topbar-link span:not(.iconify):not(.mt-dd-arrow) {
            display: none !important;
        }
        .mt-topbar-link {
            padding: 6px 10px !important;
        }
        .mt-topbar-cta span {
            display: inline !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * AMBIENT ORBS — reduce on mobile (performance + spacing)
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        .hero::before {
            width: 280px !important;
            height: 280px !important;
            filter: blur(50px) !important;
        }
        .hero::after {
            width: 220px !important;
            height: 220px !important;
            filter: blur(50px) !important;
        }
        body::after {
            opacity: .25 !important;
        }
    }

    /* ════════════════════════════════════════════════════════
     * TYPOGRAPHY tweaks
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        body { font-size: 15px; }
        p { line-height: 1.7 !important; }
        h1, h2, h3, h4 { line-height: 1.25 !important; }
    }

    /* ════════════════════════════════════════════════════════
     * TABLES — horizontal scroll
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        table {
            display: block;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
    }

    /* ════════════════════════════════════════════════════════
     * Forms — full-width inputs on mobile
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
        input[type="text"], input[type="email"], input[type="tel"],
        input[type="number"], input[type="search"], textarea, select {
            width: 100% !important;
            font-size: 16px !important; /* prevents iOS zoom */
            min-height: 44px !important;
        }
        button, .btn, a.btn {
            min-height: 44px !important; /* a11y touch target */
        }
    }

    /* ════════════════════════════════════════════════════════
     * Footer mobile
     * ════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        footer, .footer, .site-footer {
            padding: 36px 14px 80px !important;
            text-align: center;
        }
        footer .container > div,
        .footer .container > div {
            flex-direction: column !important;
            align-items: center;
            gap: 20px !important;
        }
    }