/* Mobile visual acceptance fixes: fixed layers, content rhythm, and focused navigation. */
@media (max-width: 768px) {
    html.page-home {
        --mobile-header-safe: calc(76px + env(safe-area-inset-top, 0px));
        --mobile-cta-safe: calc(90px + env(safe-area-inset-bottom, 0px));
        scroll-padding-top: var(--mobile-header-safe);
        scroll-padding-bottom: var(--mobile-cta-safe);
    }

    html.page-home body {
        padding-bottom: var(--mobile-cta-safe) !important;
    }

    html.page-home main > section,
    html.page-home #contact,
    html.page-home #quoteForm,
    html.page-home .footer {
        scroll-margin-top: var(--mobile-header-safe) !important;
        scroll-margin-bottom: var(--mobile-cta-safe) !important;
    }

    html.page-home #contact.cta-section {
        padding-bottom: calc(64px + var(--mobile-cta-safe)) !important;
    }

    /* Keep the corporate note from becoming a second localized description. */
    html.page-home #contact .cta-left > p.cta-company-note {
        display: none !important;
    }

    /* Preserve a deliberate photograph on the horizontal industry cards. */
    html.page-home #industries .industry-grid {
        margin-top: 22px !important;
        padding-bottom: 6px !important;
    }

    html.page-home #industries .industry-card--bg {
        position: relative !important;
        min-height: 292px !important;
        overflow: hidden !important;
        background: #111514 !important;
    }

    html.page-home #industries .industry-card--bg .industry-card-bg {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        opacity: 0.72 !important;
        background-size: cover !important;
        background-position: center !important;
        transform: none !important;
    }

    html.page-home #industries .industry-card--bg-industrial .industry-card-bg { background-image: url("../img/industries/i-industrial-control.webp") !important; }
    html.page-home #industries .industry-card--bg-medical .industry-card-bg { background-image: url("../img/industries/i-medical-electronics.webp") !important; }
    html.page-home #industries .industry-card--bg-automotive .industry-card-bg { background-image: url("../img/industries/i-automotive-electronics.webp") !important; }
    html.page-home #industries .industry-card--bg-iot .industry-card-bg { background-image: url("../img/industries/i-iot-smart-devices.webp") !important; }
    html.page-home #industries .industry-card--bg-telecom .industry-card-bg { background-image: url("../img/industries/i-telecom-networking.webp") !important; }
    html.page-home #industries .industry-card--bg-energy .industry-card-bg { background-image: url("../img/industries/i-energy-power.webp") !important; }

    html.page-home #industries .industry-card--bg .industry-card-overlay {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg, rgba(7, 10, 10, 0.14) 0%, rgba(7, 10, 10, 0.48) 45%, rgba(7, 10, 10, 0.93) 100%) !important;
    }

    html.page-home #industries .industry-card--bg .industry-card-content {
        min-height: 292px !important;
        padding: 20px !important;
    }

    /* One intentional visual beat per mobile viewport. */
    html.page-home #quality,
    html.page-home #industries,
    html.page-home #capabilities,
    html.page-home #process {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    html.page-home #quality .quality-grid,
    html.page-home #process .process-grid {
        margin-top: 22px !important;
    }

    html.page-home #process .process-grid {
        padding-bottom: var(--mobile-cta-safe) !important;
    }

    /* Reading state: remove the floating RFQ shortcut entirely. */
    html.page-home body.mobile-after-hero:not(.contact-in-view):not(.nav-open) .mobile-conversion-bar {
        display: none !important;
    }

    /* Turn the navigation into a true modal layer. */
    html.page-home body.nav-open::before {
        z-index: 1700 !important;
        background: rgba(3, 5, 5, 0.9) !important;
        backdrop-filter: blur(14px) saturate(110%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(110%) !important;
    }

    html.page-home body.nav-open .navbar,
    html.page-home body.nav-open .nav-container,
    html.page-home body.nav-open .mobile-toggle,
    html.page-home body.nav-open .lang-switcher {
        z-index: 1720 !important;
    }

    html.page-home body.nav-open #navLinks.nav-links {
        z-index: 1710 !important;
        top: calc(var(--mobile-header-safe) + 6px) !important;
        bottom: auto !important;
        max-height: calc(100dvh - var(--mobile-header-safe) - 28px) !important;
        padding: 14px !important;
        background: #151718 !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 28px 72px rgba(0, 0, 0, 0.58) !important;
    }

    html.page-home body.nav-open .mobile-conversion-bar,
    html.page-home body.nav-open .whatsapp-float,
    html.page-home body.nav-open .back-to-top {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Homepage delivery pass: keep the first decision clear, then reveal detail. */
html.page-home .hero-content { max-width: 620px; }
html.page-home .hero-badge { letter-spacing: 0; }
html.page-home .hero h1 { text-wrap: balance; }
html.page-home .hero-desc { max-width: 38rem; }
html.page-home .hero-buttons a { min-height: 48px; }
html.page-home .decision-signal-grid { align-items: stretch; }
html.page-home .decision-signal { min-height: 116px; }

html.page-home a:focus-visible,
html.page-home button:focus-visible,
html.page-home [tabindex]:focus-visible {
    outline: 3px solid #9ae9df !important;
    outline-offset: 4px;
}

@media (min-width: 1025px) {
    html.page-home #services .section-desc { max-width: 660px; }
}

@media (max-width: 768px) {
    /* Mobile sections must be complete before deferred interaction scripts run. */
    html.page-home .fade-up,
    html.page-home .fade-up:not(.visible) {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    /* Improve small-text scanning without changing the established color system. */
    html.page-home #services .service-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    html.page-home #services .service-badge,
    html.page-home #services .section-label,
    html.page-home #services .section-label .learn-more {
        font-size: 12px !important;
    }

    /* One clear task on arrival: understand the offer and request a quote. */
    html.page-home .hero {
        min-height: auto !important;
        padding-top: 84px !important;
        padding-bottom: 36px !important;
    }

    html.page-home .hero-content h1 {
        min-height: 0 !important;
        margin-bottom: 14px !important;
    }

    html.page-home .hero-desc { margin-bottom: 18px !important; }

    html.page-home .hero-visual {
        min-height: auto !important;
        margin-bottom: 16px !important;
    }

    html.page-home .hero-float-cards { display: none !important; }

    html.page-home .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 12px !important;
    }

    html.page-home .hero-stats .stat { min-height: 74px !important; }

    /* Retain buyer-routing content without a four-card vertical interruption. */
    html.page-home #services .decision-signal-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        margin: 18px -4px 28px !important;
        padding: 4px 4px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    html.page-home #services .decision-signal-grid::-webkit-scrollbar { display: none; }

    html.page-home #services .decision-signal {
        flex: 0 0 min(280px, 82vw);
        width: min(280px, 82vw) !important;
        min-width: min(280px, 82vw) !important;
        min-height: 124px;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.page-home *,
    html.page-home *::before,
    html.page-home *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}