/* ================================================================
   Cross-platform performance & responsive hardening (v13)
   Keeps the visual language intact while reducing expensive paints,
   layout thrashing and mobile Safari/Android edge cases.
   ================================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-x: none;
}

img,
video {
    height: auto;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1100px) and (hover: none), (max-width: 768px) {
    /* Backdrop-filter is visually nice but disproportionately expensive on
       mobile/tablet GPUs. Opaque/near-opaque surfaces preserve the theme
       without forcing a large background blur pass during scroll. */
    .card,
    .hero,
    .feature,
    .price-card,
    .table-card,
    .article-card,
    header,
    .modal,
    .modal-content {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .card,
    .hero,
    .feature,
    .price-card,
    .table-card,
    .article-card {
        background: linear-gradient(145deg, #0d1525 0%, #0b1220 100%) !important;
    }

    header {
        background: #0c1322 !important;
    }

    .hero::before {
        display: none !important;
    }

    .feature-icon svg,
    .price-card-icon svg {
        filter: none !important;
    }

    .modal {
        background: rgba(0, 0, 0, .70) !important;
    }
}

/* Only animate compositor-friendly properties. */
.page-link,
.file-upload-label {
    transition: transform .20s ease, color .20s ease, background-color .20s ease,
                border-color .20s ease, box-shadow .20s ease;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .card,
    .hero,
    .feature,
    .price-card,
    .table-card,
    .article-card,
    header,
    .modal,
    .modal-content,
    .mobile-nav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
    }

    body {
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        max-width: 1280px;
        margin-inline: auto;
    }

    /* Prevent Flex children from forcing horizontal overflow. */
    header > *,
    .brand > *,
    .balance-head > *,
    .main-content > *,
    .grid > *,
    .grid-support > *,
    .pricing > *,
    .features > * {
        min-width: 0;
    }

    /* Stable viewport sizing across iOS Safari / Android Chrome. */
    .mobile-nav {
        height: 100vh !important;
        max-height: 100vh !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
    }

    .mobile-nav.open {
        height: 100vh !important;
        max-height: 100vh !important;
    }

    @supports (height: 100dvh) {
        .mobile-nav,
        .mobile-nav.open {
            height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }
}