.metaballs-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.metaballs-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-metaballs-section {
  isolation: isolate;
}

.hero-metaballs-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-metaballs-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 32%, rgba(59, 111, 232, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(13, 27, 62, 0.1) 0%, rgba(13, 27, 62, 0.72) 100%);
}

.hero-metaballs-layer .metaballs-container {
  opacity: 0.92;
}