/* VATSE public responsiveness and scroll performance hardening.
   Loaded after page inline styles so it can normalize public pages without
   touching business logic or SaaS internals. */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

.sc-dome-root {
    max-width: 100vw !important;
}

@media (min-width: 901px) {
    .sc-dome-root {
        width: calc(100vw - 12px) !important;
    }
}

:where(.sc-card, .sc-sys-card, .sc-sys-info-col, .sc-srv-info, .sc-auth-card, .sc-testi-card) {
    overflow-wrap: anywhere;
}

@supports (content-visibility: auto) {
    body:not(.vatse-force-full-render) :where(.sc-section, .sc-section-sm) {
        content-visibility: auto;
        contain-intrinsic-size: 1px 900px;
    }

    :where(.sc-hero-full, #hero, .sc-mobile-nav, .sc-chat-float) {
        content-visibility: visible;
        contain-intrinsic-size: auto;
    }
}

@media (hover: none), (pointer: coarse), (max-width: 1024px), (prefers-reduced-motion: reduce) {
    #sc-cursor,
    #sc-cursor-ring,
    .sc-mouse-scroll,
    .sc-glow,
    .sc-ball,
    .sc-balls,
    .sc-hero-tech-bg,
    #scHeroTechCanvas,
    #scDotGrid,
    #scDotGrid2,
    #scSysDotGrid,
    #scSvcDotGrid,
    #scPortDotGrid,
    .sc-srv-barra,
    .sc-sys-deco-bar,
    .sc-about2-bg-blob,
    .sc-about2-bg-grid {
        display: none !important;
    }

    .sc-word-track,
    .sc-marquee,
    .sc-gm-row,
    .sc-hm-chip,
    .sc-hm-window,
    .sc-sys-ripple,
    .sc-chat-toggle,
    .sc-chat-badge,
    .sc-auth-grid-canvas {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .sc-hm-window,
    .sc-gm-wrap {
        transform: none !important;
        filter: none !important;
    }
}

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

/* Global public layout */
@media (max-width: 1180px) {
    .sc-container,
    .sc-container-wide {
        padding-left: clamp(20px, 4vw, 36px) !important;
        padding-right: clamp(20px, 4vw, 36px) !important;
    }

    .sc-section {
        padding-top: 92px !important;
        padding-bottom: 92px !important;
    }

    .sc-section-sm {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
}

@media (max-width: 900px) {
    .sc-nav {
        height: 64px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .sc-nav-logo {
        max-width: calc(100vw - 96px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sc-mobile-nav {
        -webkit-overflow-scrolling: touch;
    }

    .sc-hero-full {
        min-height: auto !important;
        padding-top: calc(var(--nav-h, 70px) + 32px) !important;
        padding-bottom: 56px !important;
    }

    .sc-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        padding: 42px 0 58px !important;
    }

    .sc-hero-visual,
    .sc-hm-wrap,
    .sc-sys-vis-col,
    .sc-srv-visual,
    .sc-about2-right {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    .sc-hm-wrap {
        padding: 0 !important;
        margin-top: 10px !important;
    }

    .sc-hm-window {
        width: min(100%, 520px) !important;
        transform: none !important;
    }

    .sc-display-hero,
    .sc-display-1 {
        font-size: clamp(2.15rem, 11vw, 4rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.035em !important;
    }

    .sc-display-2 {
        font-size: clamp(1.8rem, 9vw, 3rem) !important;
    }

    .sc-lead,
    .sc-hero-sub,
    .sc-srv-desc,
    .sc-sys-info-p {
        font-size: .95rem !important;
        line-height: 1.7 !important;
        max-width: 100% !important;
    }

    .sc-btn-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .sc-btn-group .sc-btn,
    .sc-hero-full .sc-btn,
    .sc-cta-block .sc-btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    .sc-card {
        padding: 22px !important;
        border-radius: 18px !important;
    }

    .sc-stats-row,
    .sc-stats-v2 {
        grid-template-columns: 1fr !important;
    }

    .sc-stat,
    .sc-stat-v2 {
        padding: 28px 22px !important;
    }

    .sc-stat-v2:not(:last-child)::after {
        display: none !important;
    }

    .sc-stat-v2:not(:last-child) {
        border-bottom: 1px solid var(--sc-border) !important;
    }
}

/* Horizontal tabs and panels */
@media (max-width: 960px) {
    .sc-sys-tabs,
    .sc-srv-tabs {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 10px !important;
        padding-bottom: 0 !important;
        margin-bottom: 26px !important;
        justify-content: stretch !important;
    }

    .sc-sys-tabs::-webkit-scrollbar,
    .sc-srv-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .sc-sys-tabs::-webkit-scrollbar-thumb,
    .sc-srv-tabs::-webkit-scrollbar-thumb {
        background: rgba(var(--sc-primary-rgb), .45);
        border-radius: 999px;
    }

    .sc-sys-tab,
    .sc-srv-tab {
        flex: 1 1 auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .sc-sys-cpanel.act {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }

    .sc-srv-panel.act,
    .sc-srv-panel.srv-reverse.act {
        display: block !important;
        min-height: auto !important;
    }

    .sc-sys-info-col {
        order: 1 !important;
        padding: 30px 22px !important;
        border-left: 0 !important;
    }

    .sc-sys-vis-col {
        order: 2 !important;
        display: block !important;
        min-height: clamp(280px, 78vw, 380px) !important;
        height: auto !important;
    }

    .sc-gm-wrap {
        width: 145% !important;
        height: 145% !important;
        opacity: .78 !important;
    }

    .sc-sys-feats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .sc-srv-panel.act {
        gap: 24px !important;
    }

    .sc-srv-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .sc-srv-star {
        min-width: 0 !important;
        width: 100% !important;
    }

    .sc-btn-vatse-primary,
    .sc-srv-panel .sc-btn-vatse-primary {
        background: linear-gradient(135deg, var(--sc-primary), var(--sc-primary-dark)) !important;
        border-color: rgba(var(--sc-primary-rgb), .45) !important;
        color: #fff !important;
        box-shadow: 0 4px 24px rgba(var(--sc-primary-rgb), .19) !important;
    }

    .sc-srv-info {
        z-index: 4 !important;
        width: 100% !important;
    }

    .sc-srv-visual {
        position: relative !important;
        z-index: 1 !important;
        pointer-events: none !important;
        margin-bottom: -8px !important;
    }

    .sc-srv-visual img {
        max-width: min(520px, 112vw) !important;
        width: 112% !important;
    }

    .sc-srv-info .sc-btn {
        position: relative !important;
        z-index: 5 !important;
    }

    .sc-cardswap-stage {
        min-width: 0 !important;
        width: 100% !important;
        height: min(520px, 106vw) !important;
        overflow: visible !important;
    }

    .sc-swap-card {
        width: min(100%, 520px) !important;
        height: min(480px, 96vw) !important;
    }

    .sc-builder-feature-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
        margin-bottom: 72px !important;
    }

    .sc-builder-feature-row > div:last-child {
        flex: 1 1 auto !important;
        width: 100% !important;
        text-align: center !important;
    }

    .sc-builder-feature-row ul {
        align-items: center !important;
    }

    .sc-dome-root {
        display: block !important;
        height: clamp(420px, 78vw, 560px) !important;
        --dome-r: clamp(360px, 78vw, 520px) !important;
    }

    .sc-scrollstack-inner {
        display: block !important;
        padding: 8vh 14px 12rem !important;
    }

    .sc-sstack-card {
        transform-origin: top center !important;
        filter: none !important;
    }
}

/* Public checkout and cards */
@media (max-width: 640px) {
    .sc-container,
    .sc-container-wide {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sc-section,
    .sc-section-sm {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .sc-card,
    .sc-auth-card {
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .sc-auth-wrap {
        min-height: 100dvh !important;
    }

    .sc-auth-right {
        align-items: flex-start !important;
        padding: 26px 16px 40px !important;
    }

    .sc-auth-header {
        margin-bottom: 22px !important;
    }

    .sc-auth-header h1 {
        font-size: clamp(1.45rem, 8vw, 1.9rem) !important;
    }

    .sc-auth-footer {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .sc-chat-float {
        right: 16px !important;
        bottom: 16px !important;
    }

    .sc-chat-win {
        width: min(340px, calc(100vw - 32px)) !important;
        max-height: min(560px, calc(100dvh - 110px)) !important;
    }

    .sc-word-marquee-wrap {
        margin-top: 0 !important;
    }

    .sc-word-pill {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    table,
    .admin-table {
        max-width: 100%;
    }
}

/* Forms and payment methods */
@media (max-width: 520px) {
    .pay-method-label,
    [id$="-label"][class*="pay-method"] {
        padding: 14px !important;
        align-items: flex-start !important;
    }

    .pay-method-label p {
        padding-left: 0 !important;
    }

    #checkout-form button[type="submit"],
    .sc-auth-btn {
        min-height: 48px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important; /* avoid iOS zoom */
    }
}

/* Lightweight mode set by JS for touch/reduced-motion environments. */
html.vatse-lite-motion .sc-fade-up,
html.vatse-lite-motion .sc-fade-in,
html.vatse-lite-motion .sc-slide-right,
html.vatse-lite-motion .sc-scale-in {
    opacity: 1 !important;
    transform: none !important;
}

html.vatse-lite-motion .sc-dome-root,
html.vatse-lite-motion .sc-card-swap-root,
html.vatse-lite-motion .sc-scrollstack-inner,
html.vatse-lite-motion .sc-hero-visual {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 520px) {
    .sc-sys-tabs,
    .sc-srv-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sc-srv-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Keep the public mobile menu functional even when content-visibility or
   page-level effects are active. */
.sc-mobile-nav.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    content-visibility: visible !important;
}

body.sc-mobile-menu-open {
    overflow: hidden;
}