/* FocusLead mobile performance layer */
@media (max-width: 768px) {
    html { scroll-behavior: auto !important; }
    body {
        background: #020304 !important;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    /* Backdrop blur is one of the biggest mobile GPU offenders. */
    body * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Keep cards readable without continuously painting large shadows. */
    .main-header,
    .assistant-panel,
    .legal-modal-panel,
    .contacts-modal-panel,
    .ref-card,
    .ref-service-card,
    .ref-product-panel,
    .ref-payment-panel,
    .ref-process-card,
    .solution-builder-card,
    .site-guide-panel,
    .works-card,
    .work-preview-panel {
        box-shadow: none !important;
    }

    /* Heavy blurred decorative layers look nice on desktop and roast phones. */
    .ref-hero-ambient-a,
    .ref-hero-ambient-b,
    .fl-welcome-glow,
    .fl-welcome-glow-a,
    .fl-welcome-glow-b,
    .site-guide-shadow,
    .ref-sec-scan,
    .ref-sec-orbit,
    .solution-builder-packet,
    [class*="ambient"],
    [class*="glow"] {
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* Stop purely decorative infinite animation on small screens. */
    .ref-ribbon-layer-a,
    .ref-ribbon-layer-b,
    .ref-ribbon-layer-c,
    .ref-hero-ambient-a,
    .ref-hero-ambient-b,
    .ref-cta-ribbon,
    .ref-arch-flow i,
    .ref-int-hub::before,
    .ref-int-hub::after,
    .ref-sec-orbit,
    .ref-sec-scan,
    .ref-payment-step-number::after,
    .fl-welcome-glow-a,
    .fl-welcome-glow-b,
    .fl-code-caret-inline,
    .fl-welcome-scroll-mouse i,
    .site-guide-character,
    .site-guide-eye,
    .site-guide-head-shine,
    .site-guide-shadow,
    .site-guide-code-particle,
    .solution-builder-lines path,
    .solution-builder-terminal-caret {
        animation: none !important;
    }

    /* Avoid expensive transform/parallax repaints while scrolling. */
    .ref-ribbon,
    .ref-pr-window,
    .site-guide-character {
        transform: none !important;
    }

    /* Render below-the-fold sections only when the browser approaches them. */
    .site-main > section:not(:first-of-type),
    .ref-services,
    .ref-product,
    .ref-process,
    .ref-payments,
    .solution-builder-section {
        content-visibility: auto;
        contain-intrinsic-size: 900px;
    }

    img {
        height: auto;
    }
}

@media (max-width: 480px) {
    :root { --shell: calc(100% - 28px); }
    .main-header { background: rgba(2,3,4,.96) !important; }
}

/* FocusLead mobile layout v2: compact, touch-friendly, GPU-light */
@media (max-width: 700px) {
    html, body { max-width: 100%; overflow-x: hidden !important; }
    body { overscroll-behavior-x: none; }

    /* Keep the decorative guide from covering real content on a phone. */
    .site-guide { display: none !important; }

    /* Hero: preserve the composition but stop the ribbon from owning half the viewport. */
    .ref-hero { min-height: 650px !important; }
    .ref-hero-grid { min-height: 584px !important; padding-top: 48px !important; }
    .ref-hero-title { font-size: clamp(38px, 12vw, 47px) !important; line-height: .98 !important; }
    .ref-hero-description { max-width: 92% !important; font-size: 11px !important; line-height: 1.65 !important; }
    .ref-hero-actions { gap: 9px !important; }
    .ref-hero-visual {
        width: 102% !important;
        height: 360px !important;
        right: -43% !important;
        bottom: -4% !important;
        opacity: .47 !important;
    }

    /* Technology showcase: the old 930-970px fixed height created a giant dead area. */
    .ref-tech-stage {
        min-height: 0 !important;
        height: 575px !important;
        padding: 7px 7px 0 !important;
        contain: layout paint;
    }
    .ref-tech-stage[data-active-mode="architecture"] { height: 820px !important; }
    .ref-tech-stage[data-active-mode="integrations"] { height: 760px !important; }
    .ref-tech-stage[data-active-mode="analytics"] { height: 660px !important; }
    .ref-tech-stage[data-active-mode="security"] { height: 720px !important; }

    .ref-tech-mode-panel {
        inset: 7px 7px 0 !important;
        min-height: 0 !important;
        height: calc(100% - 7px) !important;
        overflow: hidden !important;
    }
    .ref-tech-window,
    .ref-cap-window {
        min-height: 0 !important;
        height: 100% !important;
    }
    .ref-tech-workspace {
        min-height: 0 !important;
        height: calc(100% - 42px) !important;
        grid-template-columns: 1fr !important;
    }
    .ref-tech-editor { min-height: 0 !important; height: 100% !important; }
    .ref-tech-code-area {
        min-height: 0 !important;
        height: calc(100% - 70px) !important;
        overflow: hidden !important;
    }
    .ref-tech-code-panel {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .ref-tech-code {
        min-width: 560px !important;
        padding: 14px 18px 24px 45px !important;
    }
    .ref-tech-code li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ref-tech-pause { display: none !important; }

    /* Capability views scroll inside their own window instead of stretching the whole page. */
    .ref-arch-grid,
    .ref-int-map,
    .ref-an-layout,
    .ref-sec-layout {
        max-height: calc(100% - 76px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ref-cap-foot { position: sticky !important; bottom: 0 !important; background: rgba(9,13,18,.96); }

    .ref-tech-tabs-wrap { padding-top: 16px !important; }
    .ref-tech-tabs {
        width: 100% !important;
        padding: 5px !important;
        gap: 3px !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
    }
    .ref-tech-tab {
        min-width: 118px !important;
        flex-basis: 118px !important;
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 10px !important;
        scroll-snap-align: start;
    }

    /* Payments: real mobile cards, not three desktop columns stacked with acres of emptiness. */
    .ref-payments { padding: 42px 0 46px !important; }
    .ref-payments-heading h2 { font-size: clamp(32px, 10vw, 38px) !important; }
    .ref-payments-switcher {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        overflow: visible !important;
    }
    .ref-payment-tab {
        min-width: 0 !important;
        width: auto !important;
        flex: initial !important;
        padding: 0 7px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .ref-payments-wide {
        width: calc(100% - 24px) !important;
        margin-top: 24px !important;
        background: transparent !important;
    }
    .ref-payment-cell {
        min-height: 228px !important;
        padding: 20px 14px 22px !important;
    }
    .ref-payment-brand { min-height: 78px !important; }
    .ref-payment-brand::before { display: none !important; }
    .ref-payment-logo { filter: none !important; background: transparent !important; }
    .ref-payment-logo-kaspi {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }
    .ref-payment-logo-freedom {
        width: 170px !important;
        max-width: 78% !important;
        max-height: 58px !important;
    }
    .ref-payment-cell-content { margin-top: 18px !important; }
    .ref-payment-cell h3 { margin-top: 10px !important; font-size: 19px !important; }
    .ref-payment-cell p { font-size: 9px !important; line-height: 1.55 !important; }

    /* Avoid hover work on devices that cannot hover. */
    .ref-payment-cell:hover .ref-payment-logo,
    .ref-service-card:hover,
    .ref-product-panel:hover .ref-pr-window { transform: none !important; }
}

@media (max-width: 380px) {
    :root { --shell: calc(100% - 20px) !important; }
    .ref-hero-title { font-size: 37px !important; }
    .ref-hero-visual { width: 108% !important; right: -49% !important; }
    .ref-tech-stage { height: 545px !important; }
    .ref-tech-code { min-width: 530px !important; font-size: 8.5px !important; }
    .ref-payment-tab { font-size: 7.4px !important; padding: 0 4px !important; }
}