/* ==========================================================================
   Nexvork reference background
   Left translucent gradient ribbons + right geometric network mesh.
   ========================================================================== */

:root {
    --nx-bg-scroll: 0;
    --nx-bg-wash-y: 0px;
    --nx-bg-wave-y: 0px;
    --nx-bg-wave-x: 0px;
    --nx-bg-mesh-y: 0px;
    --nx-bg-mesh-x: 0px;
    --nx-bg-network-opacity: 0.88;
}

body.nexvork-bg-enabled {
    background: #ffffff !important;
}

body.fs-app.nexvork-bg-enabled {
    background:
        linear-gradient(120deg, rgba(247, 249, 255, 0.98), rgba(249, 253, 255, 0.96)) !important;
}

.dark body.nexvork-bg-enabled,
html[data-theme="dark"] body.nexvork-bg-enabled {
    background: #080b14 !important;
}

.nexvork-scroll-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint size;
    background:
        radial-gradient(circle at 12% 21%, rgba(157, 111, 255, 0.20), transparent 24%),
        radial-gradient(circle at 88% 64%, rgba(65, 143, 228, 0.10), transparent 30%),
        linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.96) 45%, rgba(246,251,255,0.92) 100%);
    isolation: isolate;
}

.nexvork-scroll-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 18%, rgba(190, 123, 229, 0.28), transparent 30%),
        radial-gradient(circle at 72% 58%, rgba(65, 143, 228, 0.06), transparent 42%);
    opacity: 0.62;
    transform: translate3d(0, var(--nx-bg-wash-y), 0);
}

.nexvork-bg-waves {
    position: absolute;
    top: 0;
    left: -116px;
    width: min(50vw, 620px);
    height: 100vh;
    transform: translate3d(var(--nx-bg-wave-x), var(--nx-bg-wave-y), 0);
    opacity: 0.88;
    filter: saturate(1.05);
}

.nexvork-bg-waves-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.nx-wave-soft {
    opacity: 0.46;
    filter: blur(14px);
    mix-blend-mode: multiply;
}

.nx-wave-cyan {
    opacity: 0.35;
    mix-blend-mode: multiply;
}

.nx-wave-blue {
    opacity: 0.42;
    mix-blend-mode: multiply;
}

.nx-wave-purple {
    opacity: 0.40;
    mix-blend-mode: multiply;
}

.nx-wave-deep {
    opacity: 0.24;
    mix-blend-mode: multiply;
}

.nexvork-bg-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--nx-bg-network-opacity);
    transform: translate3d(var(--nx-bg-mesh-x), var(--nx-bg-mesh-y), 0);
    mix-blend-mode: multiply;
}

.nexvork-bg-grain {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(45, 120, 205, 0.13) 0 1px, transparent 1.3px),
        linear-gradient(110deg, transparent 0 53%, rgba(65, 143, 228, 0.055) 74%, transparent 100%);
    background-size: 30px 30px, 100% 100%;
    mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.34) 58%, #000 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.34) 58%, #000 84%, transparent 100%);
    opacity: 0.32;
}

body.nexvork-bg-enabled:not(.fs-app) .hero-bg {
    display: none;
}

body.nexvork-bg-enabled:not(.fs-app) .announcement-bar,
body.nexvork-bg-enabled:not(.fs-app) .header,
body.nexvork-bg-enabled:not(.fs-app) #main,
body.nexvork-bg-enabled:not(.fs-app) .footer,
body.nexvork-bg-enabled:not(.fs-app) .cta-section,
body.nexvork-bg-enabled:not(.fs-app) .login-page,
body.nexvork-bg-enabled:not(.fs-app) #wrapper,
body.nexvork-bg-enabled:not(.fs-app) #content-wrapper {
    position: relative;
    z-index: 2;
}

body.nexvork-bg-enabled:not(.fs-app) .mobile-menu,
body.nexvork-bg-enabled:not(.fs-app) .scroll-top,
body.nexvork-bg-enabled:not(.fs-app) .wa-float,
body.nexvork-bg-enabled:not(.fs-app) .theme-toggle,
body.nexvork-bg-enabled:not(.fs-app) .hero-spotlight {
    z-index: 3;
}

body.nexvork-bg-enabled:not(.fs-app) .header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

body.nexvork-bg-enabled:not(.fs-app) .announcement-bar {
    z-index: 1001;
}

body.nexvork-bg-enabled:not(.fs-app) .mobile-menu {
    z-index: 999;
}

body.fs-app .nexvork-scroll-bg {
    opacity: 0.70;
}

body.fs-app .nexvork-bg-waves {
    opacity: 0.38;
    filter: blur(3px) saturate(0.95);
}

body.fs-app .nexvork-bg-network {
    opacity: 0.36;
}

body.fs-app .nexvork-bg-grain {
    opacity: 0.18;
}

body.fs-app.nexvork-bg-enabled .wrapper,
body.fs-app.nexvork-bg-enabled #content {
    position: relative;
    z-index: 2;
}

body.fs-app.nexvork-bg-enabled #content,
body.fs-app.nexvork-bg-enabled #content .container-fluid {
    background: transparent;
}

body.fs-app.nexvork-bg-enabled #content > .navbar {
    background: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="dark"] body.fs-app.nexvork-bg-enabled #content > .navbar {
    background: rgba(17, 24, 39, 0.76) !important;
}

.dark .nexvork-scroll-bg,
html[data-theme="dark"] .nexvork-scroll-bg {
    background:
        radial-gradient(circle at 12% 21%, rgba(157, 111, 255, 0.16), transparent 24%),
        radial-gradient(circle at 88% 64%, rgba(65, 143, 228, 0.14), transparent 30%),
        linear-gradient(90deg, rgba(8,11,20,0.98) 0%, rgba(8,11,20,0.96) 45%, rgba(8,15,28,0.92) 100%);
}

.dark .nx-wave-soft,
.dark .nx-wave-cyan,
.dark .nx-wave-blue,
.dark .nx-wave-purple,
.dark .nx-wave-deep,
.dark .nexvork-bg-network,
html[data-theme="dark"] .nx-wave-soft,
html[data-theme="dark"] .nx-wave-cyan,
html[data-theme="dark"] .nx-wave-blue,
html[data-theme="dark"] .nx-wave-purple,
html[data-theme="dark"] .nx-wave-deep,
html[data-theme="dark"] .nexvork-bg-network {
    mix-blend-mode: screen;
}

.dark .nexvork-bg-grain,
html[data-theme="dark"] .nexvork-bg-grain {
    opacity: 0.16;
}

body.nexvork-bg-enabled #pageLoader,
body.nexvork-bg-enabled .nx-loader {
    z-index: 99999;
}

@media (max-width: 900px) {
    .nexvork-bg-waves {
        left: -190px;
        width: 112vw;
        opacity: 0.82;
    }

    .nexvork-bg-network {
        opacity: 0.58;
    }

    .nexvork-bg-grain {
        opacity: 0.22;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nexvork-scroll-bg::before,
    .nexvork-bg-waves,
    .nexvork-bg-network {
        transition: none !important;
        transform: none !important;
    }
}