.elementor-widget-xyloon-hero-effects {
    --xyh-title-color-1: #F2A93B;
    --xyh-title-color-2: #FF4FA3;
    --xyh-title-color-3: #3FC1FF;
    --xyh-title-duration: 8s;
    --xyh-title-angle: 100deg;

    --xyh-background-z: 0;
    --xyh-blend-mode: normal;

    --xyh-radar-color: #F2A93B;
    --xyh-radar-size: 760px;
    --xyh-radar-x: 50%;
    --xyh-radar-y: 50%;
    --xyh-radar-opacity: 0.25;
    --xyh-radar-rings-opacity: 0.12;
    --xyh-radar-duration: 7s;

    --xyh-wave-color-1: #3FC1FF;
    --xyh-wave-color-2: #9B6BFF;
    --xyh-wave-opacity: 0.65;
    --xyh-wave-amplitude: 70px;
    --xyh-wave-frequency: 2.3;
    --xyh-wave-line-width: 1.5;
    --xyh-wave-glow: 10;

    --xyh-network-node-color: #3FC1FF;
    --xyh-network-line-color: #9B6BFF;
    --xyh-network-opacity: 0.6;
    --xyh-network-density: 55;
    --xyh-network-distance: 135;
    --xyh-network-node-size: 2;
    --xyh-network-line-width: 0.8;
    --xyh-network-mouse-radius: 160;

    --xyh-rain-color-1: #2FD9B8;
    --xyh-rain-color-2: #F2EFE9;
    --xyh-rain-opacity: 0.58;
    --xyh-rain-font-size: 16;

    --xyh-circuit-track-color: #3FC1FF;
    --xyh-circuit-pulse-color: #F2A93B;
    --xyh-circuit-opacity: 0.55;
    --xyh-circuit-spacing: 44;
    --xyh-circuit-line-width: 1;

    --xyh-grid3d-color: #3FC1FF;
    --xyh-grid3d-opacity: 0.52;
    --xyh-grid3d-line-width: 1;
    --xyh-grid3d-gap: 52;
    --xyh-grid3d-horizon: 35;

    --xyh-tunnel-color-1: #9B6BFF;
    --xyh-tunnel-color-2: #3FC1FF;
    --xyh-tunnel-opacity: 0.55;
    --xyh-tunnel-line-width: 1.2;

    --xyh-particles-color-1: #2FD9B8;
    --xyh-particles-color-2: #3FC1FF;
    --xyh-particles-opacity: 0.7;
    --xyh-particles-size: 1.8;
    --xyh-particles-mouse-radius: 150;

    --xyh-topo-color: #F2A93B;
    --xyh-topo-opacity: 0.48;
    --xyh-topo-line-width: 1;
    --xyh-topo-gap: 24;

    --xyh-scanner-color: #CC0033;
    --xyh-scanner-grid-color: #3FC1FF;
    --xyh-scanner-opacity: 0.65;
    --xyh-scanner-thickness: 2;

    --xyh-glitch-color-1: #FF4FA3;
    --xyh-glitch-color-2: #3FC1FF;
    --xyh-glitch-color-3: #F2A93B;
    --xyh-glitch-opacity: 0.45;

    --xyh-vortex-color-1: #9B6BFF;
    --xyh-vortex-color-2: #F2A93B;
    --xyh-vortex-opacity: 0.68;
    --xyh-vortex-particle-size: 1.8;
    --xyh-vortex-radius: 42;
    --xyh-vortex-x: 50%;
    --xyh-vortex-y: 50%;

    --xyh-ribbons-color-1: #F2A93B;
    --xyh-ribbons-color-2: #FF4FA3;
    --xyh-ribbons-color-3: #3FC1FF;
    --xyh-ribbons-opacity: 0.55;
    --xyh-ribbons-amplitude: 65px;
    --xyh-ribbons-thickness: 2;

    --xyh-hex-color-1: #3FC1FF;
    --xyh-hex-color-2: #FF4FA3;
    --xyh-hex-opacity: 0.48;
    --xyh-hex-size: 34;
    --xyh-hex-line-width: 1;

    --xyh-dna-color-1: #3FC1FF;
    --xyh-dna-color-2: #FF4FA3;
    --xyh-dna-link-color: #F2EFE9;
    --xyh-dna-opacity: 0.65;
    --xyh-dna-amplitude: 70px;
    --xyh-dna-line-width: 1.5;

    --xyh-globe-color-1: #3FC1FF;
    --xyh-globe-color-2: #9B6BFF;
    --xyh-globe-opacity: 0.58;
    --xyh-globe-size: 420px;
    --xyh-globe-x: 50%;
    --xyh-globe-y: 50%;
    --xyh-globe-line-width: 1;

    --xyh-equalizer-color-1: #F2A93B;
    --xyh-equalizer-color-2: #FF4FA3;
    --xyh-equalizer-color-3: #3FC1FF;
    --xyh-equalizer-opacity: 0.62;
    --xyh-equalizer-bar-width: 8;
    --xyh-equalizer-gap: 5;

    --xyh-pixel-color-1: #2FD9B8;
    --xyh-pixel-color-2: #3FC1FF;
    --xyh-pixel-color-3: #FF4FA3;
    --xyh-pixel-opacity: 0.7;
    --xyh-pixel-size: 2.2;

    --xyh-orbitals-color-1: #9B6BFF;
    --xyh-orbitals-color-2: #F2A93B;
    --xyh-orbitals-opacity: 0.62;
    --xyh-orbitals-size: 460px;
    --xyh-orbitals-x: 50%;
    --xyh-orbitals-y: 50%;
    --xyh-orbitals-line-width: 1;

    --xyh-vector-color-1: #3FC1FF;
    --xyh-vector-color-2: #2FD9B8;
    --xyh-vector-opacity: 0.5;
    --xyh-vector-spacing: 34;
    --xyh-vector-length: 13;
    --xyh-vector-line-width: 1;


    --xyh-drone-color: #CC3300;
    --xyh-drone-accent-color: #3FC1FF;
    --xyh-drone-grid-color: #6E6E6E;
    --xyh-drone-opacity: 0.72;
    --xyh-drone-size: 34;
    --xyh-drone-grid-spacing: 54;

    --xyh-mobile-color-1: #CC3300;
    --xyh-mobile-color-2: #6E6E6E;
    --xyh-mobile-screen-color: #171A1E;
    --xyh-mobile-opacity: 0.76;
    --xyh-mobile-phone-size: 116;

    --xyh-business-color-1: #CC3300;
    --xyh-business-color-2: #6E6E6E;
    --xyh-business-line-color: #6E6E6E;
    --xyh-business-opacity: 0.70;
    --xyh-business-module-size: 145;

    --xyh-social-color-1: #CC3300;
    --xyh-social-color-2: #6E6E6E;
    --xyh-social-line-color: #6E6E6E;
    --xyh-social-opacity: 0.78;
    --xyh-social-node-size: 42;

    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: layout;
    z-index: var(--xyh-background-z);
    pointer-events: none;
    mix-blend-mode: var(--xyh-blend-mode);
}

.elementor-widget-xyloon-hero-effects > .elementor-widget-container,
.elementor-widget-xyloon-hero-effects .xyh-widget {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none;
}

.elementor-widget-xyloon-hero-effects.xyh-layer-clip,
.elementor-widget-xyloon-hero-effects.xyh-layer-clip > .elementor-widget-container,
.elementor-widget-xyloon-hero-effects.xyh-layer-clip .xyh-widget {
    overflow: hidden !important;
    contain: layout paint;
}

.xyh-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

.xyh-radar {
    position: absolute;
    top: var(--xyh-radar-y);
    left: var(--xyh-radar-x);
    display: block;
    width: var(--xyh-radar-size);
    height: var(--xyh-radar-size);
    color: var(--xyh-radar-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.xyh-radar::before,
.xyh-radar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.xyh-radar::before {
    opacity: var(--xyh-radar-rings-opacity);
    border: 1px solid currentColor;
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), currentColor 50%, transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), currentColor 50%, transparent calc(50% + 0.5px)),
        radial-gradient(circle at center,
            transparent 0 24.7%,
            currentColor 24.9% 25.1%,
            transparent 25.3% 49.7%,
            currentColor 49.9% 50.1%,
            transparent 50.3% 74.7%,
            currentColor 74.9% 75.1%,
            transparent 75.3% 100%
        );
}

.xyh-radar::after {
    opacity: var(--xyh-radar-opacity);
    background: conic-gradient(from 0deg, transparent 0 87%, currentColor 96%, transparent 100%);
    animation: xyh-radar-spin var(--xyh-radar-duration) linear infinite;
    transform-origin: center;
}

.xyh-radar--no-rings::before {
    display: none;
}

.xyh-title-gradient {
    background-image: linear-gradient(
        var(--xyh-title-angle),
        var(--xyh-title-color-1),
        var(--xyh-title-color-2),
        var(--xyh-title-color-3),
        var(--xyh-title-color-1)
    ) !important;
    background-size: 300% 100% !important;
    background-position: 0 0;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: xyh-title-shimmer var(--xyh-title-duration) linear infinite;
}

.xyh-host {
    isolation: isolate;
}

.xyh-host > :not(.elementor-widget-xyloon-hero-effects):not(.elementor-widget-xyloon-corners) {
    position: relative;
    z-index: 1;
}


@keyframes xyh-radar-spin {
    to { transform: rotate(360deg); }
}

@keyframes xyh-title-shimmer {
    to { background-position: 300% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .xyh-radar::after,
    .xyh-title-gradient {
        animation: none;
    }
}