/**
 * Websly Extra Background Presets v3
 * High-performance, robust CSS-centric modern effects.
 */

:root {
    --websly-aurora-1: #4f46e5;
    --websly-aurora-2: #7c3aed;
}

.dark {
    --websly-aurora-1: #312e81;
    --websly-aurora-2: #4c1d95;
}

/* Base Container for JS-injected effects */
.websly-fx-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    /* Promoted to ensure it's visible over the base body background */
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
    will-change: opacity;
}

/* When atmosphere is set on a block (data-bg-effect), scope the effect to that block only and keep it behind content */
.websly-fx-container.websly-fx-scoped {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
}

/* Block with atmosphere: contain effect and stack content above it */
[data-bg-effect] {
    position: relative;
    overflow: hidden;
}

[data-bg-effect]>*:not(.websly-fx-container) {
    position: relative;
    z-index: 1;
}

.websly-fx-container.active {
    opacity: 1;
}

/* Keep page content (navbar, main, footer) above the background layer */
:where(body[class*="websly-bg-"] > *:not(.websly-fx-container)) {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 1. MIDNIGHT MESH
/* ═══════════════════════════════════════════════════════════════════════════ */
.websly-fx-mesh-inner {
    position: absolute;
    top: -75%;
    left: -75%;
    width: 250%;
    height: 250%;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 50%);
    background-blend-mode: screen;
    opacity: 0.45;
    filter: blur(80px);
    /* Sharpened slightly for definition */
    transform: translate(var(--mesh-x, 0), var(--mesh-y, 0));
    animation: websly-mesh-drift 40s linear infinite;
    will-change: transform;
}

@keyframes websly-mesh-drift {
    from {
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) rotate(0deg);
    }

    to {
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) rotate(360deg);
    }
}

/* 1a. Variation: Subtle */
.midnight-mesh-subtle .websly-fx-mesh-inner {
    opacity: 0.15;
    filter: blur(140px);
}

/* 1b. Variation: Light */
.midnight-mesh-light .websly-fx-mesh-inner {
    opacity: 0.35;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 60%),
        radial-gradient(circle at 20% 30%, #FFFFFF 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--theme-surface) 0%, transparent 60%);
    filter: blur(100px);
}

/* 1c. Variation: Dark */
.midnight-mesh-dark .websly-fx-mesh-inner {
    opacity: 0.55;
    background: radial-gradient(circle at 50% 50%, #000000 0%, transparent 70%),
        radial-gradient(circle at 30% 20%, var(--theme-accent) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, #0D0D12 0%, transparent 60%);
    background-blend-mode: multiply;
}

/* 1d. Variation: Accent */
.midnight-mesh-accent .websly-fx-mesh-inner {
    opacity: 0.5;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, var(--theme-accent) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, var(--theme-accent) 0%, transparent 40%);
    background-blend-mode: overlay;
}

/* 1e. Variation: Deep */
.midnight-mesh-deep .websly-fx-mesh-inner {
    opacity: 0.7;
    filter: blur(60px);
    background-blend-mode: hard-light;
}

/* 1f. Variation: Flux - Smoother, deeper gradients with noise dithering to eradicate banding */
.midnight-mesh-flux .websly-fx-mesh-inner,
.websly-bg-midnight-mesh-flux .websly-fx-mesh-inner {
    opacity: 0.35;
    animation: websly-mesh-drift 32s linear infinite;
    filter: blur(200px) saturate(1.1);
    /* Higher blur for smoothness */
    background:
        radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 70%),
        radial-gradient(circle at 20% 40%, var(--theme-surface) 0%, transparent 60%),
        radial-gradient(circle at 80% 60%, var(--theme-accent) 0%, transparent 70%);
    background-blend-mode: screen;
}

/* 1f-s. V5: Grainy Flux (Noise Overlays) */
.midnight-mesh-flux-v5 .websly-fx-mesh-inner,
.websly-bg-midnight-mesh-flux-v5 .websly-fx-mesh-inner {
    opacity: 0.35;
    animation: websly-mesh-drift 35s linear infinite;
    filter: blur(200px) saturate(1.1);
    background:
        radial-gradient(circle at 35% 35%, var(--theme-accent) 0%, transparent 75%),
        radial-gradient(circle at 65% 65%, var(--theme-surface) 0%, transparent 75%),
        radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 80%);
    background-blend-mode: soft-light;
}

/* 1f-u. V6: Ultra Smooth Flux (Extreme Blur; No Grain) */
.midnight-mesh-flux-ultra .websly-fx-mesh-inner,
.websly-bg-midnight-mesh-flux-ultra .websly-fx-mesh-inner {
    opacity: 0.3;
    animation: websly-mesh-drift 45s linear infinite;
    filter: blur(340px) saturate(1.05);
    /* Extreme blur for perfect smoothness */
    background:
        radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 80%),
        radial-gradient(circle at 20% 20%, var(--theme-surface) 0%, transparent 80%),
        radial-gradient(circle at 80% 80%, var(--theme-accent) 0%, transparent 80%);
    background-blend-mode: screen;
}



/* 1f1. Variation: Flux Darker (same light as Flux; darker in dark mode) */
.midnight-mesh-flux-darker .websly-fx-mesh-inner,
.websly-bg-midnight-mesh-flux-darker .websly-fx-mesh-inner {
    opacity: 0.45;
    animation: websly-mesh-drift 20s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 50%);
}

/* 1f2. Variation: Flux Darkest (same light as Flux; even darker in dark mode) */
.midnight-mesh-flux-darkest .websly-fx-mesh-inner,
.websly-bg-midnight-mesh-flux-darkest .websly-fx-mesh-inner {
    opacity: 0.45;
    animation: websly-mesh-drift 20s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 50%);
}

/* 1g. Variation: Flux V2 (Balanced - Slightly more visible in Dark, slightly less in Light) */
.midnight-mesh-flux-v2 .websly-fx-mesh-inner {
    opacity: 0.5;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 55%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 45%);
    animation: websly-mesh-drift 25s linear infinite;
}

html:not(.dark) .midnight-mesh-flux-v2 .websly-fx-mesh-inner {
    opacity: 0.1;
}

/* 1h. Variation: Flux V3 (Depth - Darker shadows in Dark, warmer in Light) */
.midnight-mesh-flux-v3 .websly-fx-mesh-inner {
    opacity: 0.4;
    background: radial-gradient(circle at 30% 30%, var(--theme-accent) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, #000000 0%, transparent 70%);
    animation: websly-mesh-drift 30s linear infinite;
}

html:not(.dark) .midnight-mesh-flux-v3 .websly-fx-mesh-inner {
    opacity: 0.15;
    background: radial-gradient(circle at 60% 40%, var(--theme-accent) 0%, transparent 60%),
        radial-gradient(circle at 20% 70%, #FFFFFF 0%, transparent 50%);
}

/* 1i. Variation: Flux V4 (Soft - Minimal movement, very blended) */
.midnight-mesh-flux-v4 .websly-fx-mesh-inner {
    opacity: 0.3;
    filter: blur(120px);
    animation: websly-mesh-drift 45s linear infinite;
}

html:not(.dark) .midnight-mesh-flux-v4 .websly-fx-mesh-inner {
    opacity: 0.08;
    filter: blur(160px);
}

/* 1j. Variation: Wave Loop (Seamless right-to-left flux gradient) */
.midnight-mesh-wave-loop .websly-fx-mesh-inner {
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--theme-accent) 25%,
            var(--theme-surface) 50%,
            var(--theme-accent) 75%,
            transparent 100%);
    background-size: 50% 100%;
    opacity: 0.25;
    filter: blur(80px);
    animation: websly-wave-loop 15s linear infinite;
}

html:not(.dark) .midnight-mesh-wave-loop .websly-fx-mesh-inner {
    opacity: 0.1;
}

@keyframes websly-wave-loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ─── LIGHT MODE REFINEMENTS (Dynamic contrast gradient) ─── */
html:not(.dark) .websly-bg-midnight-mesh .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-flux .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-flux .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-flux-darker .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-flux-darker .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-flux-darkest .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-flux-darkest .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-subtle .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-subtle .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-light .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-light .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-deep .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-deep .websly-fx-mesh-inner {
    background: radial-gradient(circle at 60% 40%, var(--theme-accent) 0%, transparent 55%),
        radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--theme-accent) 0%, transparent 50%);
    mix-blend-mode: normal;
    opacity: 0.12;
    filter: blur(140px) saturate(1.1);
}

/* Force light background behind mesh effects in light mode */
html:not(.dark) .websly-fx-container {
    background: var(--theme-bg, #FFFFFF) !important;
}

/* Light mode + midnight mesh: let the mesh show through as section background */
html:not(.dark) body[class*="midnight-mesh"] main section[class*="bg-theme-bg"],
html:not(.dark) body[class*="midnight-mesh"] main .showcase-container,
html:not(.dark) body[class*="midnight-mesh"] main section[id="pricing"],
html:not(.dark) body[class*="midnight-mesh"] main section[id="styles"],
html:not(.dark) body[class*="midnight-mesh"] main section[id="hero"],
html:not(.dark) body[class*="midnight-mesh"] main .websly-metrics,
html:not(.dark) body[class*="midnight-mesh"] main .websly-testimonials,
html:not(.dark) body[class*="midnight-mesh"] main .websly-timeline,
html:not(.dark) body[class*="midnight-mesh"] main .protocol-container,
html:not(.dark) body[class*="midnight-mesh"] main .websly-carousel-section,
html:not(.dark) body[class*="midnight-mesh"] main .websly-hero-banner {
    background-color: transparent !important;
}

/* Dark mode + midnight mesh: same — let the flux/mesh show through (no black sections) */
.dark body[class*="midnight-mesh"] main section[class*="bg-theme-bg"],
.dark body[class*="midnight-mesh"] main .showcase-container,
.dark body[class*="midnight-mesh"] main section[id="pricing"],
.dark body[class*="midnight-mesh"] main section[id="styles"],
.dark body[class*="midnight-mesh"] main .websly-metrics,
.dark body[class*="midnight-mesh"] main .websly-testimonials,
.dark body[class*="midnight-mesh"] main .websly-timeline,
.dark body[class*="midnight-mesh"] main .protocol-container,
.dark body[class*="midnight-mesh"] main .websly-carousel-section,
.dark body[class*="midnight-mesh"] main .websly-hero-banner,
.dark body[class*="midnight-mesh"] main .websly-bento,
.dark body[class*="midnight-mesh"] main .websly-stats,
.dark body[class*="midnight-mesh"] main .websly-team,
.dark body[class*="midnight-mesh"] main .websly-custom-section,
.dark body[class*="midnight-mesh"] main .websly-hero-aside,
.dark body[class*="midnight-mesh"] main .manifesto-section {
    background-color: transparent !important;
}

/* Hero: show mesh in both light and dark mode (not only light) */
body[class*="midnight-mesh"] main section[id="hero"] {
    background-color: transparent !important;
}

/* Hero overlays: stop solid theme-bg from hiding the mesh (all layouts) */
body[class*="midnight-mesh"] section[id="hero"] div[class*="from-theme-bg"],
body[class*="midnight-mesh"] section[id="hero"] div[class*="via-theme-bg"],
body[class*="midnight-mesh"] section[id="hero"] div[class*="bg-theme-bg/"] {
    opacity: 0.2;
}

/* Clear dark main background so mesh shows (e.g. features/pricing page templates) */
html:not(.dark) body[class*="midnight-mesh"] main.bg-obsidian,
html:not(.dark) body[class*="midnight-mesh"] main#primary.bg-obsidian {
    background-color: transparent !important;
}

/* Dark mode: clear main bg-obsidian so mesh shows */
.dark body[class*="midnight-mesh"] main.bg-obsidian,
.dark body[class*="midnight-mesh"] main#primary.bg-obsidian {
    background-color: transparent !important;
}

/* Features grid section has no bg-theme-bg class; ensure features section is transparent */
html:not(.dark) body[class*="midnight-mesh"] main .features-grid {
    background-color: transparent !important;
}

.dark body[class*="midnight-mesh"] main .features-grid {
    background-color: transparent !important;
}

/* Dark mode + midnight mesh: ensure text is readable on flux/mesh (sections have transparent bg) */
.dark body[class*="midnight-mesh"] main .features-grid {
    color: #f5f5f4 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark body[class*="midnight-mesh"] main .features-grid a:not([class*="btn"]) {
    color: #f5f5f4 !important;
}

/* Presets block (#styles) section header only — do not override card content */
.dark body[class*="midnight-mesh"] main section[id="styles"]>div:first-of-type h2,
.dark body[class*="midnight-mesh"] main section[id="styles"]>div:first-of-type h2.ws-text-effect-target,
.dark body[class*="midnight-mesh"] main section[id="styles"]>div:first-of-type p {
    color: #f5f5f4 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark body[class*="midnight-mesh"] main section[id="styles"]>div:first-of-type p {
    color: rgba(245, 245, 244, 0.85) !important;
}

/* Light mode + midnight mesh: ensure cards/surfaces stay visible (elevated above mesh) */
html:not(.dark) body[class*="midnight-mesh"] [class*="bg-theme-surface"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html:not(.dark) body[class*="midnight-mesh"] [class*="bg-theme-bg"].shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* 1g. Variation: Airy (Premium Light Atmosphere) */
.midnight-mesh-airy .websly-fx-mesh-inner {
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 60%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.15;
    filter: blur(140px);
}

html:not(.dark) .midnight-mesh-airy .websly-fx-mesh-inner {
    background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFFFFF 65%, transparent 95%),
        radial-gradient(circle at 20% 40%, var(--theme-accent) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, #FFFFFF 0%, transparent 50%);
    mix-blend-mode: normal;
    opacity: 0.1;
    filter: blur(120px);
}

/* 1h. Variation: Airy Flux (Premium Light Atmosphere) */
.midnight-mesh-flux-airy .websly-fx-mesh-inner {
    animation: websly-mesh-drift 30s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 60%),
        radial-gradient(circle at 30% 20%, var(--theme-surface) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, var(--theme-accent) 0%, transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.15;
    filter: blur(140px);
}

html:not(.dark) .midnight-mesh-flux-airy .websly-fx-mesh-inner {
    background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFFFFF 75%, transparent 95%),
        radial-gradient(circle at 30% 20%, var(--theme-accent) 0%, transparent 35%),
        radial-gradient(circle at 70% 80%, #FFFFFF 0%, transparent 50%);
    mix-blend-mode: normal;
    opacity: 0.1;
    filter: blur(120px);
}

/* 1i. Hybrid: Deep Light / Premium Dark */
.midnight-mesh-deep-airy .websly-fx-mesh-inner {
    animation: websly-mesh-drift 40s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 50%);
    opacity: 0.45;
}

html:not(.dark) .midnight-mesh-deep-airy .websly-fx-mesh-inner {
    /* Flux-Style Light Depth */
    background: radial-gradient(circle at 60% 40%, var(--theme-accent) 0%, transparent 55%),
        radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--theme-accent) 0%, transparent 50%);
    opacity: 0.12;
}

/* 1j. Hybrid: Deep Light / Flux Dark */
.midnight-mesh-deep-flux .websly-fx-mesh-inner {
    animation: websly-mesh-drift 20s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 50%);
    opacity: 0.45;
}

html:not(.dark) .midnight-mesh-deep-flux .websly-fx-mesh-inner {
    background: radial-gradient(circle at 60% 40%, var(--theme-accent) 0%, transparent 55%),
        radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--theme-accent) 0%, transparent 50%);
    opacity: 0.12;
}

/* 1k. Variation: Ultra-Vibrant (High-Intensity Flux) */
.midnight-mesh-vibrant .websly-fx-mesh-inner {
    animation: websly-mesh-drift 15s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 50%);
    opacity: 0.7;
}

html:not(.dark) .midnight-mesh-vibrant .websly-fx-mesh-inner {
    opacity: 0.25;
}

/* 1l. Variation: Cosmic Glow (Slow Atmospheric Flux) */
.midnight-mesh-cosmic .websly-fx-mesh-inner {
    animation: websly-mesh-drift 60s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 60%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 60%);
    opacity: 0.45;
}

html:not(.dark) .midnight-mesh-cosmic .websly-fx-mesh-inner {
    opacity: 0.15;
}

/* 1m. Variation: Eclipse (Shadow Gradient Flux) */
.midnight-mesh-eclipse .websly-fx-mesh-inner {
    animation: websly-mesh-drift 30s linear infinite;
    background: radial-gradient(circle at 50% 50%, #000000 0%, transparent 70%),
        radial-gradient(circle at 20% 30%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, #000000 0%, transparent 60%);
    opacity: 0.6;
}

html:not(.dark) .midnight-mesh-eclipse .websly-fx-mesh-inner {
    opacity: 0.15;
}

/* 1n. Variation: Nova Burst (Fast Dynamic Flux) */
.midnight-mesh-nova .websly-fx-mesh-inner {
    animation: websly-mesh-drift 10s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, var(--theme-surface) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--theme-accent) 0%, transparent 50%);
    opacity: 0.55;
}

html:not(.dark) .midnight-mesh-nova .websly-fx-mesh-inner {
    opacity: 0.25;
}

/* 1o. Variation: Phantom Subtle (Ghostly Flux) */
.midnight-mesh-phantom .websly-fx-mesh-inner {
    animation: websly-mesh-drift 50s linear infinite;
    background: radial-gradient(circle at 50% 50%, var(--theme-surface) 0%, transparent 80%),
        radial-gradient(circle at 80% 20%, var(--theme-accent) 0%, transparent 90%);
    opacity: 0.2;
    filter: blur(140px);
}

html:not(.dark) .midnight-mesh-phantom .websly-fx-mesh-inner {
    opacity: 0.08;
}

/* Light Mode: Subtle (Base Revert) */
html:not(.dark) .midnight-mesh-subtle .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-subtle .websly-fx-mesh-inner {
    opacity: 0.25;
}

/* Light Mode: Flux (Base Revert) */
html:not(.dark) .midnight-mesh-flux .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-flux .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-flux-darker .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-flux-darker .websly-fx-mesh-inner,
html:not(.dark) .midnight-mesh-flux-darkest .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-flux-darkest .websly-fx-mesh-inner {
    opacity: 0.65;
}

/* Light Mode: Deep (Base Revert) */
html:not(.dark) .midnight-mesh-deep .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-deep .websly-fx-mesh-inner {
    opacity: 0.85;
}

/* Light Mode: Light (Base Revert) */
html:not(.dark) .midnight-mesh-light .websly-fx-mesh-inner,
html:not(.dark) .websly-bg-midnight-mesh-light .websly-fx-mesh-inner {
    opacity: 0.35;
}


/* ─── DARK MODE REFINEMENTS ─── */
/* Deepening intensities for dark themes as requested. Flux, Accent, and Premium (base) are left alone. */

.dark .websly-bg-midnight-mesh .websly-fx-mesh-inner {
    filter: brightness(0.6) saturate(0.9);
    opacity: 0.35;
    background-blend-mode: screen;
}

.dark .websly-bg-midnight-mesh-flux .websly-fx-mesh-inner {
    filter: brightness(0.5) saturate(0.8);
    opacity: 0.4;
    background-blend-mode: screen;
}

/* Flux Darker: darker than Flux in dark mode only */
.dark .midnight-mesh-flux-darker .websly-fx-mesh-inner,
.dark .websly-bg-midnight-mesh-flux-darker .websly-fx-mesh-inner {
    filter: brightness(0.32) saturate(0.75);
    opacity: 0.28;
    background-blend-mode: screen;
}

/* Flux Darkest: even darker in dark mode only */
.dark .midnight-mesh-flux-darkest .websly-fx-mesh-inner,
.dark .websly-bg-midnight-mesh-flux-darkest .websly-fx-mesh-inner {
    filter: brightness(0.2) saturate(0.7);
    opacity: 0.2;
    background-blend-mode: multiply;
}

.dark .midnight-mesh-subtle .websly-fx-mesh-inner {
    opacity: 0.12;
    /* Slightly more visible depth */
    filter: brightness(0.8);
}

.dark .midnight-mesh-light .websly-fx-mesh-inner {
    opacity: 0.28;
    background: radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    filter: blur(140px) brightness(0.6);
}

.dark .midnight-mesh-dark .websly-fx-mesh-inner {
    opacity: 0.4;
    background: radial-gradient(circle at 50% 50%, #000000 0%, transparent 80%),
        radial-gradient(circle at 30% 20%, var(--theme-accent) 0%, transparent 40%);
    filter: contrast(1.2) brightness(0.3);
    background-blend-mode: multiply;
}

.dark .midnight-mesh-deep .websly-fx-mesh-inner {
    opacity: 0.35;
    filter: blur(120px) brightness(0.4) saturate(0.7);
    background-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 2. GLASSMORPHIC AURORA
/* ═══════════════════════════════════════════════════════════════════════════ */
.websly-fx-aurora-blob {
    position: absolute;
    width: 70vw;
    /* Larger blobs */
    height: 70vw;
    border-radius: 50%;
    filter: blur(80px);
    /* More define edges */
    opacity: 0.55;
    /* Significant boost */
    mix-blend-mode: plus-lighter;
    will-change: transform;
}

.blob-1 {
    background: var(--websly-aurora-1);
    top: -10%;
    left: -10%;
    animation: websly-aurora-float-1 25s ease-in-out infinite alternate;
}

.blob-2 {
    background: var(--websly-aurora-2);
    bottom: -10%;
    right: -10%;
    animation: websly-aurora-float-2 30s ease-in-out infinite alternate;
}

@keyframes websly-aurora-float-1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(20%, 15%) scale(1.1);
    }
}

@keyframes websly-aurora-float-2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-15%, -20%) scale(1.2);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 3. VELVET GRAIN
/* ═══════════════════════════════════════════════════════════════════════════ */
.websly-fx-grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 4. BRUTALIST GRID
/* ═══════════════════════════════════════════════════════════════════════════ */
.websly-fx-brutalist-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
    background-size: 60px 60px;
}

.dark .websly-fx-brutalist-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 5. AMBIENT WAVES — Minimal horizontal waves, slow drift, theme colors
/* ═══════════════════════════════════════════════════════════════════════════ */
.ambient-waves .websly-fx-ambient-waves-inner {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 140%;
    opacity: 0.35;
    background:
        linear-gradient(90deg, transparent 0%, var(--theme-accent) 20%, transparent 40%, var(--theme-surface) 55%, transparent 70%, var(--theme-accent) 85%, transparent 100%);
    background-size: 200% 100%;
    filter: blur(60px);
    transform: translate(var(--mesh-x, 0), var(--mesh-y, 0));
    animation: websly-ambient-waves-drift 25s ease-in-out infinite;
    will-change: transform;
}

@keyframes websly-ambient-waves-drift {

    0%,
    100% {
        background-position: 0% 50%;
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) scale(1);
    }

    50% {
        background-position: 100% 50%;
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) scale(1.05);
    }
}

html:not(.dark) .ambient-waves .websly-fx-ambient-waves-inner {
    opacity: 0.12;
}

.dark .ambient-waves .websly-fx-ambient-waves-inner {
    opacity: 0.28;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 6. ORBITAL GLOW — Soft orbs that orbit slowly, mouse-reactive
/* ═══════════════════════════════════════════════════════════════════════════ */
.orbital-glow .websly-fx-orbital-inner {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 30% 40%, var(--theme-accent) 0%, transparent 45%),
        radial-gradient(circle at 70% 60%, var(--theme-surface) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 55%);
    background-blend-mode: screen;
    opacity: 0.4;
    filter: blur(90px);
    transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) rotate(0deg);
    animation: websly-orbital-spin 45s linear infinite;
    will-change: transform;
}

@keyframes websly-orbital-spin {
    from {
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) rotate(0deg);
    }

    to {
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) rotate(360deg);
    }
}

html:not(.dark) .orbital-glow .websly-fx-orbital-inner {
    opacity: 0.14;
}

.dark .orbital-glow .websly-fx-orbital-inner {
    opacity: 0.38;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 7. FLUID BLUR — Slow morphing gradient blobs, abstract
/* ═══════════════════════════════════════════════════════════════════════════ */
.fluid-blur .websly-fx-fluid-blur-inner {
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background:
        radial-gradient(ellipse 40% 50% at 20% 30%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 70%, var(--theme-surface) 0%, transparent 50%),
        radial-gradient(ellipse 45% 45% at 50% 50%, var(--theme-accent) 0%, transparent 55%);
    background-blend-mode: overlay;
    opacity: 0.42;
    filter: blur(100px);
    transform: translate(var(--mesh-x, 0), var(--mesh-y, 0));
    animation: websly-fluid-blur-morph 30s ease-in-out infinite;
    will-change: transform;
}

@keyframes websly-fluid-blur-morph {

    0%,
    100% {
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) scale(1.08) rotate(5deg);
    }

    66% {
        transform: translate(var(--mesh-x, 0), var(--mesh-y, 0)) scale(0.95) rotate(-5deg);
    }
}

html:not(.dark) .fluid-blur .websly-fx-fluid-blur-inner {
    opacity: 0.26;
    filter: blur(100px) saturate(1.1);
}

.dark .fluid-blur .websly-fx-fluid-blur-inner {
    opacity: 0.35;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 8. CORNER GLOW — Soft accent glows in four corners (professional)
/* ═══════════════════════════════════════════════════════════════════════════ */
.corner-glow .websly-fx-corner-glow-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, var(--theme-accent) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 100% 0%, var(--theme-accent) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 100% 100%, var(--theme-accent) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 0% 100%, var(--theme-accent) 0%, transparent 55%);
    opacity: 0.2;
    filter: blur(40px);
}

html:not(.dark) .corner-glow .websly-fx-corner-glow-inner {
    opacity: 0.12;
}

.dark .corner-glow .websly-fx-corner-glow-inner {
    opacity: 0.22;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 9. SOFT GRID PULSE — Theme-colored grid with slow opacity pulse (tech / pro)
/* ═══════════════════════════════════════════════════════════════════════════ */
.soft-grid-pulse .websly-fx-soft-grid-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(var(--theme-accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--theme-accent) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: websly-grid-pulse 4s ease-in-out infinite;
}

@keyframes websly-grid-pulse {

    0%,
    100% {
        opacity: 0.06;
    }

    50% {
        opacity: 0.14;
    }
}

html:not(.dark) .soft-grid-pulse .websly-fx-soft-grid-inner {
    animation: websly-grid-pulse-light 4s ease-in-out infinite;
}

@keyframes websly-grid-pulse-light {

    0%,
    100% {
        opacity: 0.04;
    }

    50% {
        opacity: 0.12;
    }
}

.dark .soft-grid-pulse .websly-fx-soft-grid-inner {
    opacity: 0.1;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 10. GRADIENT STRIPE — Minimal diagonal accent stripe(s) (cool, minimal)
/* ═══════════════════════════════════════════════════════════════════════════ */
.gradient-stripe .websly-fx-gradient-stripe-inner {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background:
        linear-gradient(105deg, transparent 42%, var(--theme-accent) 48%, transparent 54%),
        linear-gradient(75deg, transparent 60%, var(--theme-surface) 64%, transparent 68%);
    opacity: 0.35;
    filter: blur(2px);
    animation: websly-stripe-drift 20s linear infinite;
}

@keyframes websly-stripe-drift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(5%);
    }
}

html:not(.dark) .gradient-stripe .websly-fx-gradient-stripe-inner {
    opacity: 0.18;
}

.dark .gradient-stripe .websly-fx-gradient-stripe-inner {
    opacity: 0.28;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 11. DOT FIELD — Repeating dot pattern, theme color, subtle drift (modern)
/* ═══════════════════════════════════════════════════════════════════════════ */
.dot-field .websly-fx-dot-field-inner {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: radial-gradient(circle, var(--theme-accent) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    animation: websly-dot-field-drift 60s linear infinite;
}

@keyframes websly-dot-field-drift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 28px 28px;
    }
}

html:not(.dark) .dot-field .websly-fx-dot-field-inner {
    opacity: 0.2;
}

.dark .dot-field .websly-fx-dot-field-inner {
    opacity: 0.15;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 12. VIGNETTE GLOW — Radial vignette with accent (cinematic, professional)
/* ═══════════════════════════════════════════════════════════════════════════ */
.vignette-glow .websly-fx-vignette-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 25%, var(--theme-accent) 100%);
    opacity: 0.18;
    filter: blur(30px);
}

html:not(.dark) .vignette-glow .websly-fx-vignette-inner {
    opacity: 0.08;
}

.dark .vignette-glow .websly-fx-vignette-inner {
    opacity: 0.2;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Static gradient backgrounds (no animation) — theme-aware */
/* ═══════════════════════════════════════════════════════════════════════════ */
.static-gradient-black-primary .websly-fx-static-gradient-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            #000 0%,
            var(--theme-primary-very-dark, #0f172a) 45%,
            var(--theme-primary, #3b82f6) 100%);
    opacity: 1;
}

.static-gradient-deep-fade .websly-fx-static-gradient-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            #000 0%,
            var(--theme-primary-very-dark, #0f172a) 60%,
            var(--theme-primary-dark, #1e3a5f) 100%);
    opacity: 1;
}

.static-gradient-corner-primary .websly-fx-static-gradient-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, var(--theme-primary, #3b82f6) 0%, transparent 50%),
        linear-gradient(225deg, var(--theme-primary-dark, #1e3a5f) 0%, transparent 45%),
        #000;
    background-blend-mode: normal, normal, normal;
    opacity: 1;
}

.static-gradient-radial-primary .websly-fx-static-gradient-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 80% 70% at 50% 30%,
            var(--theme-primary, #3b82f6) 0%,
            var(--theme-primary-dark, #1e3a5f) 40%,
            var(--theme-primary-very-dark, #0f172a) 70%,
            #000 100%);
    opacity: 1;
}

.static-gradient-split-diagonal .websly-fx-static-gradient-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            var(--theme-primary-very-dark, #0f172a) 0%,
            var(--theme-primary-very-dark, #0f172a) 48%,
            var(--theme-primary, #3b82f6) 52%,
            var(--theme-primary-dark, #1e3a5f) 100%);
    opacity: 1;
}

/* Dark mode: reverse atmosphere static gradients (when used via data-bg-effect) */
.dark .static-gradient-black-primary .websly-fx-static-gradient-inner {
    background: linear-gradient(180deg,
            var(--theme-primary, #3b82f6) 0%,
            var(--theme-primary-very-dark, #0f172a) 55%,
            #000 100%);
}

.dark .static-gradient-deep-fade .websly-fx-static-gradient-inner {
    background: linear-gradient(180deg,
            var(--theme-primary-dark, #1e3a5f) 0%,
            var(--theme-primary-very-dark, #0f172a) 40%,
            #000 100%);
}

.dark .static-gradient-corner-primary .websly-fx-static-gradient-inner {
    background:
        linear-gradient(135deg, var(--theme-primary-dark, #1e3a5f) 0%, transparent 50%),
        linear-gradient(225deg, var(--theme-primary, #3b82f6) 0%, transparent 45%),
        #000;
}

.dark .static-gradient-radial-primary .websly-fx-static-gradient-inner {
    background: radial-gradient(ellipse 80% 70% at 50% 70%,
            var(--theme-primary-dark, #1e3a5f) 0%,
            var(--theme-primary-very-dark, #0f172a) 40%,
            #000 100%);
}

.dark .static-gradient-split-diagonal .websly-fx-static-gradient-inner {
    background: linear-gradient(135deg,
            var(--theme-primary-dark, #1e3a5f) 52%,
            var(--theme-primary, #3b82f6) 48%,
            var(--theme-primary-very-dark, #0f172a) 100%);
}

/* Section-level static gradients (Section Background dropdown) — dramatic, high-contrast */
.ws-section-bg-static-gradient-black-primary {
    background: linear-gradient(180deg,
            #000 0%,
            var(--theme-primary-very-dark, #0f172a) 30%,
            var(--theme-primary-dark, #1e3a5f) 55%,
            var(--theme-primary, #3b82f6) 85%,
            var(--theme-primary-light, #60a5fa) 100%) !important;
}

.ws-section-bg-static-gradient-deep-fade {
    background: linear-gradient(180deg,
            #000 0%,
            var(--theme-primary-very-dark, #0f172a) 25%,
            var(--theme-primary-dark, #1e3a5f) 50%,
            var(--theme-primary-very-dark, #0f172a) 100%) !important;
}

.ws-section-bg-static-gradient-corner-primary {
    background:
        linear-gradient(135deg, var(--theme-primary, #3b82f6) 0%, transparent 45%),
        linear-gradient(225deg, var(--theme-primary-dark, #1e3a5f) 0%, transparent 50%),
        linear-gradient(0deg, #000 0%, var(--theme-primary-very-dark, #0f172a) 100%) !important;
}

.ws-section-bg-static-gradient-radial-primary {
    background: radial-gradient(ellipse 100% 80% at 50% 20%,
            var(--theme-primary-light, #60a5fa) 0%,
            var(--theme-primary, #3b82f6) 30%,
            var(--theme-primary-dark, #1e3a5f) 60%,
            var(--theme-primary-very-dark, #0f172a) 85%,
            #000 100%) !important;
}

.ws-section-bg-static-gradient-split-diagonal {
    background: linear-gradient(135deg,
            var(--theme-primary-very-dark, #0f172a) 0%,
            var(--theme-primary-very-dark, #0f172a) 45%,
            var(--theme-primary, #3b82f6) 50%,
            var(--theme-primary-dark, #1e3a5f) 55%,
            var(--theme-primary-very-dark, #0f172a) 100%) !important;
}

/* Dark mode: reverse section gradients (primary-based and static) */
.dark .ws-section-bg-gradient-primary-1 {
    background: linear-gradient(180deg, var(--theme-primary-very-dark) 0%, var(--theme-primary-very-light) 100%) !important;
}

.dark .ws-section-bg-gradient-primary-2 {
    background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary-light) 100%) !important;
}

.dark .ws-section-bg-gradient-primary-3 {
    background: linear-gradient(180deg, var(--theme-primary-very-dark) 0%, var(--theme-primary) 50%, var(--theme-primary-very-light) 100%) !important;
}

.dark .ws-section-bg-gradient-primary-4 {
    background: linear-gradient(160deg, var(--theme-primary-very-dark) 0%, var(--theme-primary-dark) 60%, var(--theme-primary) 100%) !important;
}

.dark .ws-section-bg-gradient-primary-5 {
    background: radial-gradient(ellipse 120% 100% at 50% 0%, var(--theme-primary-very-dark) 0%, var(--theme-primary-dark) 40%, var(--theme-primary-very-light) 100%) !important;
}

.dark .ws-section-bg-static-gradient-black-primary {
    background: linear-gradient(180deg,
            var(--theme-primary, #3b82f6) 0%,
            var(--theme-primary-very-dark, #0f172a) 55%,
            #000 100%) !important;
}

.dark .ws-section-bg-static-gradient-deep-fade {
    background: linear-gradient(180deg,
            var(--theme-primary-dark, #1e3a5f) 0%,
            var(--theme-primary-very-dark, #0f172a) 40%,
            #000 100%) !important;
}

.dark .ws-section-bg-static-gradient-corner-primary {
    background:
        linear-gradient(135deg, var(--theme-primary-dark, #1e3a5f) 0%, transparent 50%),
        linear-gradient(225deg, var(--theme-primary, #3b82f6) 0%, transparent 45%),
        #000 !important;
}

.dark .ws-section-bg-static-gradient-radial-primary {
    background: radial-gradient(ellipse 80% 70% at 50% 70%,
            var(--theme-primary-dark, #1e3a5f) 0%,
            var(--theme-primary-very-dark, #0f172a) 40%,
            #000 100%) !important;
}

.dark .ws-section-bg-static-gradient-split-diagonal {
    background: linear-gradient(135deg,
            var(--theme-primary-dark, #1e3a5f) 52%,
            var(--theme-primary, #3b82f6) 48%,
            var(--theme-primary-very-dark, #0f172a) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Title & Subtitle (Gradient) block — always primary gradient; overrides global bg */
/* ═══════════════════════════════════════════════════════════════════════════ */
.websly-title-subtitle-gradient.ws-tt-gradient {
    background-color: transparent;
}

/* 1 — Subtle: very close shades */
.ws-tt-gradient-subtle {
    background: linear-gradient(180deg,
            var(--theme-primary-very-light, #e0e7ff) 0%,
            var(--theme-primary-light, #c7d2fe) 50%,
            var(--theme-primary-very-light, #e0e7ff) 100%) !important;
}

/* 2 — Soft: light to mid */
.ws-tt-gradient-soft {
    background: linear-gradient(180deg,
            var(--theme-primary-very-light, #e0e7ff) 0%,
            var(--theme-primary-light, #818cf8) 40%,
            var(--theme-primary, #4f46e5) 100%) !important;
}

/* 3 — Medium: full range, clear sweep */
.ws-tt-gradient-medium {
    background: linear-gradient(180deg,
            var(--theme-primary-very-light, #e0e7ff) 0%,
            var(--theme-primary-light, #818cf8) 25%,
            var(--theme-primary, #4f46e5) 50%,
            var(--theme-primary-dark, #3730a3) 75%,
            var(--theme-primary-very-dark, #1e1b4b) 100%) !important;
}

/* 4 — Strong: deeper contrast */
.ws-tt-gradient-strong {
    background: linear-gradient(180deg,
            var(--theme-primary-light, #818cf8) 0%,
            var(--theme-primary, #4f46e5) 30%,
            var(--theme-primary-dark, #3730a3) 60%,
            var(--theme-primary-very-dark, #1e1b4b) 100%) !important;
}

/* 5 — Maximum: very dramatic, light to near-black */
.ws-tt-gradient-maximum {
    background: linear-gradient(180deg,
            var(--theme-primary-very-light, #e0e7ff) 0%,
            var(--theme-primary-light, #818cf8) 15%,
            var(--theme-primary, #4f46e5) 35%,
            var(--theme-primary-dark, #3730a3) 55%,
            var(--theme-primary-very-dark, #1e1b4b) 75%,
            #0f0d24 100%) !important;
}

/* Dark mode: reverse gradient direction */
.dark .ws-tt-gradient-subtle {
    background: linear-gradient(180deg,
            var(--theme-primary-light, #c7d2fe) 0%,
            var(--theme-primary-very-light, #e0e7ff) 100%) !important;
}

.dark .ws-tt-gradient-soft {
    background: linear-gradient(180deg,
            var(--theme-primary, #4f46e5) 0%,
            var(--theme-primary-light, #818cf8) 60%,
            var(--theme-primary-very-light, #e0e7ff) 100%) !important;
}

.dark .ws-tt-gradient-medium {
    background: linear-gradient(180deg,
            var(--theme-primary-very-dark, #1e1b4b) 0%,
            var(--theme-primary-dark, #3730a3) 25%,
            var(--theme-primary, #4f46e5) 50%,
            var(--theme-primary-light, #818cf8) 75%,
            var(--theme-primary-very-light, #e0e7ff) 100%) !important;
}

.dark .ws-tt-gradient-strong {
    background: linear-gradient(180deg,
            var(--theme-primary-very-dark, #1e1b4b) 0%,
            var(--theme-primary-dark, #3730a3) 40%,
            var(--theme-primary, #4f46e5) 70%,
            var(--theme-primary-light, #818cf8) 100%) !important;
}

.dark .ws-tt-gradient-maximum {
    background: linear-gradient(180deg,
            #0f0d24 0%,
            var(--theme-primary-very-dark, #1e1b4b) 25%,
            var(--theme-primary-dark, #3730a3) 45%,
            var(--theme-primary, #4f46e5) 65%,
            var(--theme-primary-light, #818cf8) 85%,
            var(--theme-primary-very-light, #e0e7ff) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Title style (block inspector: As is, Bold, Shadow, Strong+shadow, Primary-dark shadow) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.ws-title-default {
    /* no change */
}

.ws-title-bold {
    font-weight: 700 !important;
}

.ws-title-shadow {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.ws-title-strong-shadow {
    font-weight: 700 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.ws-title-shadow-primary-dark {
    text-shadow: 0 2px 12px var(--theme-primary-dark), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}