/* =========================================================
   VPSMakers — reusable section background
   Load before vpsm-how.css.
   ========================================================= */

.vpsm-how {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

.vpsm-how__background {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.vpsm-how__background::before,
.vpsm-how__background::after {
    content: "" !important;
    position: absolute !important;
    border: 1px solid rgba(95, 109, 255, 0.16) !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 90px rgba(59, 68, 255, 0.1),
        inset 0 0 70px rgba(59, 68, 255, 0.05) !important;
}

.vpsm-how__background::before {
    top: -300px !important;
    left: -220px !important;
    width: 650px !important;
    height: 650px !important;
}

.vpsm-how__background::after {
    right: -190px !important;
    bottom: -280px !important;
    width: 570px !important;
    height: 570px !important;
}

.vpsm-how__veil {
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(800px 460px at 18% 0%, rgba(59, 68, 255, 0.18), transparent 65%),
        radial-gradient(760px 430px at 92% 100%, rgba(60, 224, 160, 0.07), transparent 65%) !important;
}

.vpsm-how__fade {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        var(--vpsm-night, #080b1d) 0%,
        transparent 18%,
        transparent 82%,
        var(--vpsm-night, #080b1d) 100%
    ) !important;
}

/* Keeps section content above the decorative background. */
.vpsm-how__wrap {
    position: relative !important;
    z-index: 1 !important;
}