.gradient-bg {
     width: 100vw;
     height: 100vh;
     position: fixed;
     inset: 0;
     overflow: hidden;
     z-index: 0;
     background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
 }

 .node--type-solution .gradient-bg,
 .node--type-solution-free .gradient-bg {
    position: absolute;
    height: 100%;
 }

 .gradient-bg svg {
     position: absolute;
     width: 0;
     height: 0;
 }

 .gradients-container {
     width: 100%;
     height: 100%;
     position: relative;
     filter: url(#goo) blur(50px);
 }

 .g1,
 .g2,
 .g3,
 .g4,
 .g5,
 .g6,
 .g7,
 .g8,
 .interactive {
     position: absolute;
     mix-blend-mode: var(--blending);
     will-change: transform;
     mix-blend-mode: soft-light;
     opacity: 0.6;
 }

 @keyframes moveInCircle {
     0% {
         transform: rotate(0deg);
     }

     50% {
         transform: rotate(180deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes moveVertical {
     0% {
         transform: translateY(-50%);
     }

     50% {
         transform: translateY(50%);
     }

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

 @keyframes moveHorizontal {
     0% {
         transform: translateX(-50%) translateY(-10%);
     }

     50% {
         transform: translateX(50%) translateY(10%);
     }

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

 .g1 {
     width: var(--circle-size);
     height: var(--circle-size);
     top: calc(50% - var(--circle-size) / 2);
     left: calc(50% - var(--circle-size) / 2);
     background: radial-gradient(circle at center, rgba(var(--color1), 0.85) 0, rgba(var(--color1), 0) 50%) no-repeat;
     transform-origin: center center;
     animation: moveVertical 30s ease infinite;
     opacity: 1;
 }

 .g2 {
     width: var(--circle-size);
     height: var(--circle-size);
     top: calc(50% - var(--circle-size) / 2);
     left: calc(50% - var(--circle-size) / 2);
     background: radial-gradient(circle at center, rgba(var(--color2), 0.80) 0, rgba(var(--color2), 0) 50%) no-repeat;
     transform-origin: calc(50% - 400px);
     animation: moveInCircle 20s reverse infinite;
     opacity: 1;
 }

 .g3 {
     width: var(--circle-size);
     height: var(--circle-size);
     top: calc(50% - var(--circle-size) / 2 + 180px);
     left: calc(50% - var(--circle-size) / 2 - 200px);
     background: radial-gradient(circle at center, rgba(var(--color3), 0.75) 0, rgba(var(--color3), 0) 50%) no-repeat;
     transform-origin: calc(50% + 400px);
     animation: moveInCircle 40s linear infinite;
     opacity: 1;
 }

 .g4 {
     width: var(--circle-size);
     height: var(--circle-size);
     top: calc(50% - var(--circle-size) / 2);
     left: calc(50% - var(--circle-size) / 2);
     background: radial-gradient(circle at center, rgba(var(--color4), 0.72) 0, rgba(var(--color4), 0) 50%) no-repeat;
     transform-origin: calc(50% - 200px);
     animation: moveHorizontal 40s ease infinite;
     opacity: 0.9;
 }

 .g5 {
     width: calc(var(--circle-size) * 2);
     height: calc(var(--circle-size) * 2);
     top: calc(50% - var(--circle-size));
     left: calc(50% - var(--circle-size));
     background: radial-gradient(circle at center, rgba(var(--color5), 0.22) 0, rgba(var(--color5), 0) 50%) no-repeat;
     transform-origin: calc(50% - 800px) calc(50% + 200px);
     animation: moveInCircle 20s ease infinite;
     opacity: 1;
 }

 .g6 {
     width: calc(var(--circle-size) * 0.6);
     height: calc(var(--circle-size) * 0.6);
     top: calc(20% - var(--circle-size) * 0.3);
     left: calc(75% - var(--circle-size) * 0.3);
     background: radial-gradient(circle at center, rgba(0, 200, 255, 0.7) 0, rgba(0, 200, 255, 0) 50%) no-repeat;
     transform-origin: calc(50% + 300px) calc(50% - 200px);
     animation: moveInCircle 25s ease infinite;
     opacity: 0.85;
 }

 .g7 {
     width: calc(var(--circle-size) * 1.2);
     height: calc(var(--circle-size) * 1.2);
     top: calc(65% - var(--circle-size) * 0.6);
     left: calc(15% - var(--circle-size) * 0.6);
     background: radial-gradient(circle at center, rgba(0, 80, 160, 0.65) 0, rgba(0, 80, 160, 0) 50%) no-repeat;
     transform-origin: calc(50% + 500px) calc(50% + 100px);
     animation: moveInCircle 50s linear reverse infinite;
     opacity: 0.9;
 }

 .g8 {
     width: calc(var(--circle-size) * 0.4);
     height: calc(var(--circle-size) * 0.4);
     top: calc(80% - var(--circle-size) * 0.2);
     left: calc(55% - var(--circle-size) * 0.2);
     background: radial-gradient(circle at center, rgba(140, 210, 255, 0.8) 0, rgba(140, 210, 255, 0) 50%) no-repeat;
     transform-origin: calc(50% - 150px) calc(50% + 300px);
     animation: moveHorizontal 18s ease-in-out infinite;
     opacity: 0.75;
 }

 .interactive {
     width: 100%;
     height: 100%;
     top: -50%;
     left: -50%;
     opacity: 0.35;
     background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
 }