@media (max-width: 767px), (orientation: landscape) and (max-height: 520px) and (pointer: coarse), (orientation: landscape) and (max-height: 520px) and (hover: none) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .nav-links,
    #sectionNav {
        display: none !important;
    }

    .hamburger-menu {
        display: inline-flex !important;
    }

    .navbar .nav-btn,
    .navbar .navbar-demo-btn,
    .language-btn,
    .theme-toggle {
        display: none !important;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
    }

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

    .navbar {
        width: 68%;
        max-width: 320px;
        padding: 8px 16px;
        justify-content: center;
    }

    .container {
        width: min(100% - 1rem, 100%);
        padding-inline: clamp(0.5rem, 2.8vw, 0.75rem);
    }

    h1 {
        font-size: clamp(1.62rem, 5.6vw, 2.18rem);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(1.24rem, 4.3vw, 1.72rem);
        line-height: 1.25;
    }

    h3 {
        font-size: clamp(1rem, 3.6vw, 1.24rem);
        line-height: 1.35;
    }

    p,
    li,
    .faq-answer,
    .contact-pane-intro,
    .modal-content p {
        font-size: clamp(0.88rem, 3vw, 0.96rem);
        line-height: 1.58;
        overflow-wrap: anywhere;
    }

    button,
    .btn,
    .nav-links a,
    .mobile-menu a,
    .section-nav-text {
        font-size: clamp(0.84rem, 2.8vw, 0.94rem);
        line-height: 1.35;
    }

    html[lang="ar"] h1,
    html[lang="ar"] h2,
    html[lang="ar"] h3,
    html[lang="ar"] p,
    html[lang="ar"] li,
    html[lang="ar"] button,
    html[lang="ar"] .btn,
    html[lang="ar"] .nav-links a,
    html[lang="ar"] .mobile-menu a {
        letter-spacing: normal !important;
        line-height: 1.7;
    }

    .grid-3,
    .inl-011,
    .inl-025,
    .inl-037,
    .contact-methods-grid,
    .social-media-buttons,
    .demo-form-grid,
    .x4i-rd-summary-grid,
    .x4i-rd-phase-item,
    .x4i-rd-diff-grid,
    .x4i-rd-flow-grid,
    .x4i-rd-compare-grid,
    .x4i-rd-legacy-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(0.65rem, 2.8vw, 0.9rem) !important;
    }

    .card,
    .panel,
    .modal,
    .pricing-card,
    .faq-item,
    .loss-card,
    .value-anchor-card,
    .about-stats-card,
    .phone-box,
    #sectionNavItems,
    .about-modal .panel,
    .contact-method-card,
    .contact-modal-body,
    .contact-tab-pane {
        padding: clamp(0.72rem, 2.8vw, 0.92rem);
        border-radius: 12px;
    }

    section {
        padding-block: clamp(2.8rem, 7.2vw, 4.2rem) !important;
    }

    .section-title {
        margin-bottom: clamp(0.9rem, 3.8vw, 1.35rem) !important;
    }

    .badge {
        padding: 0.38rem 0.76rem !important;
        font-size: clamp(0.72rem, 2.5vw, 0.84rem) !important;
        margin-bottom: 0.85rem !important;
    }

    a,
    button,
    .btn,
    .social-btn,
    .contact-tab,
    .contact-method-card,
    .section-nav-item,
    .section-nav-toggle,
    .carousel-fixed-btn,
    .carousel__navigation-button,
    .mobile-menu a,
    .mobile-menu .nav-btn,
    .close-mobile-menu,
    .mobile-language-btn,
    .mobile-theme-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .mobile-menu a,
    .mobile-menu .nav-btn,
    .mobile-language-btn,
    .mobile-theme-toggle,
    .close-mobile-menu {
        display: inline-flex;
        align-items: center;
    }

    .mobile-menu a,
    .mobile-language-btn,
    .mobile-theme-toggle {
        padding: 12px 18px !important;
    }

    .mobile-menu .nav-btn {
        padding: 10px 14px !important;
    }

    .mobile-menu,
    .contact-modal-body,
    .section-nav-items,
    .applications-carousel,
    .about-cards,
    .contact-pane-shell {
        overflow-x: hidden;
    }

    #applications .carousel-track .card {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Keep execution-phase cards fully visible on mobile. */
    #applications .applications-carousel {
        max-width: 100% !important;
        padding: 0 clamp(0.45rem, 3.4vw, 0.8rem) 3.5rem !important;
    }

    #applications .carousel-track {
        overflow-y: visible !important;
        align-items: stretch !important;
    }

    #applications .carousel__slide {
        min-height: auto !important;
        height: auto !important;
    }

    #applications .carousel__snapper {
        position: relative !important;
        inset: auto !important;
        align-items: stretch !important;
    }

    #applications .carousel-track .card {
        height: auto !important;
        max-height: none !important;
        margin-inline: auto;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    .card:hover,
    .loss-card:hover,
    .value-anchor-card:hover,
    .section-nav-item:hover,
    .social-btn:hover,
    .about-card-vertical:hover {
        transform: none !important;
    }

    body[dir="rtl"] .mobile-menu a,
    body[dir="rtl"] .contact-modal-body,
    body[dir="rtl"] .section-nav-item {
        text-align: right;
    }
}