.cms-hero {
  position: relative;
  overflow: hidden;
  background:
    /* lavender blob top-right */ radial-gradient(
      circle at 78% 18%,
      rgba(184, 171, 246, 0.45) 0,
      rgba(184, 171, 246, 0) 48%
    ),
    /* peach blob mid-right */
      radial-gradient(
        circle at 90% 55%,
        rgba(255, 206, 165, 0.55) 0,
        rgba(255, 206, 165, 0) 50%
      ),
    /* pink tint lower-right */
      radial-gradient(
        circle at 80% 85%,
        rgba(250, 189, 189, 0.35) 0,
        rgba(250, 189, 189, 0) 52%
      ),
    #fafafa;
}

/* Right-hand hero visual container (column) */
.cms-hero-visual {
  display: flex;
  justify-content: flex-end; /* push blobs to fill the right side */
  align-items: center;
}

/* The area that holds the blobs */
.cms-hero .et_pb_row,
.cms-hero .et_pb_column,
.cms-hero-blobs {
  overflow: visible !important;
}

.cms-hero-blobs {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* Base blob shape – keep as you have */
.cms-hero-blob {
  position: absolute;
  width: 56%;
  height: 56%;
  border-radius: 65% 75% 70% 80% / 78% 68% 75% 70%;
  opacity: 0.75;
  mix-blend-mode: multiply;
  will-change: transform, border-radius;
  transform-origin: center;
}

/* Peach blobs */
.cms-hero-blob--1 {
  background: #ffcea5;
  top: -5%;
  left: 22%;
  animation: cmsBlobMove1 26s ease-in-out infinite alternate;
}

.cms-hero-blob--4 {
  background: #ffcea5;
  top: 42%;
  right: -6%;
  width: 46%;
  height: 46%;
  opacity: 0.55;
  animation: cmsBlobMove4 34s ease-in-out infinite alternate;
}

/* Lavender blobs */
.cms-hero-blob--2 {
  background: #b8abf6;
  top: -6%;
  right: -6%;
  animation: cmsBlobMove2 32s ease-in-out infinite alternate;
}

.cms-hero-blob--5 {
  background: #b8abf6;
  bottom: -14%;
  left: 14%;
  width: 50%;
  height: 50%;
  opacity: 0.5;
  animation: cmsBlobMove5 40s ease-in-out infinite alternate;
}

/* Pink blob */
.cms-hero-blob--3 {
  background: #fabdbd;
  bottom: 0%;
  left: 30%;
  animation: cmsBlobMove3 38s ease-in-out infinite alternate;
}

/* Lava-lamp style animations */
/* Smooth, organic, constantly-changing shapes */
@keyframes cmsBlobMove1 {
  0% {
    transform: translate(0%, 0%) scale(0.96) rotate(0deg);
    border-radius: 68% 78% 72% 82% / 80% 70% 76% 68%;
  }
  25% {
    transform: translate(10%, 8%) scale(1.12) rotate(8deg);
    border-radius: 72% 64% 78% 70% / 74% 82% 68% 76%;
  }
  50% {
    transform: translate(4%, 24%) scale(0.9) rotate(-6deg);
    border-radius: 80% 70% 68% 76% / 72% 78% 70% 82%;
  }
  75% {
    transform: translate(-6%, 16%) scale(1.06) rotate(4deg);
    border-radius: 70% 82% 74% 68% / 78% 72% 80% 66%;
  }
  100% {
    transform: translate(-10%, 22%) scale(0.98) rotate(-10deg);
    border-radius: 76% 68% 80% 72% / 82% 76% 70% 74%;
  }
}

@keyframes cmsBlobMove2 {
  0% {
    transform: translate(0%, 0%) scale(1.08) rotate(0deg);
    border-radius: 74% 66% 82% 70% / 76% 84% 68% 72%;
  }
  25% {
    transform: translate(-14%, 14%) scale(0.92) rotate(-6deg);
    border-radius: 82% 72% 70% 80% / 70% 78% 84% 66%;
  }
  50% {
    transform: translate(-8%, 30%) scale(1.14) rotate(10deg);
    border-radius: 68% 80% 76% 72% / 84% 70% 72% 78%;
  }
  75% {
    transform: translate(8%, 8%) scale(0.9) rotate(-12deg);
    border-radius: 78% 68% 82% 74% / 72% 86% 70% 80%;
  }
  100% {
    transform: translate(4%, -4%) scale(1.1) rotate(6deg);
    border-radius: 84% 72% 74% 82% / 80% 74% 86% 70%;
  }
}

@keyframes cmsBlobMove3 {
  0% {
    transform: translate(0%, 0%) scale(1.02) rotate(0deg);
    border-radius: 70% 82% 76% 84% / 78% 72% 80% 70%;
  }
  25% {
    transform: translate(14%, -18%) scale(0.9) rotate(10deg);
    border-radius: 84% 70% 72% 80% / 72% 86% 74% 82%;
  }
  50% {
    transform: translate(-12%, -8%) scale(1.18) rotate(-8deg);
    border-radius: 72% 86% 80% 70% / 82% 74% 86% 72%;
  }
  75% {
    transform: translate(-6%, 20%) scale(0.94) rotate(6deg);
    border-radius: 86% 76% 74% 84% / 78% 82% 70% 86%;
  }
  100% {
    transform: translate(6%, 10%) scale(1.06) rotate(-12deg);
    border-radius: 76% 84% 86% 72% / 86% 76% 82% 74%;
  }
}

@keyframes cmsBlobMove4 {
  0% {
    transform: translate(0%, 0%) scale(1) rotate(0deg);
    border-radius: 80% 70% 86% 74% / 76% 82% 72% 86%;
  }
  25% {
    transform: translate(-10%, -10%) scale(1.12) rotate(-8deg);
    border-radius: 72% 86% 78% 84% / 86% 74% 80% 72%;
  }
  50% {
    transform: translate(-4%, 16%) scale(0.9) rotate(12deg);
    border-radius: 84% 72% 86% 78% / 80% 86% 76% 74%;
  }
  75% {
    transform: translate(8%, 6%) scale(1.04) rotate(-6deg);
    border-radius: 76% 80% 72% 86% / 84% 76% 82% 78%;
  }
  100% {
    transform: translate(0%, 22%) scale(0.94) rotate(8deg);
    border-radius: 88% 74% 80% 72% / 82% 88% 74% 80%;
  }
}

@keyframes cmsBlobMove5 {
  0% {
    transform: translate(0%, 0%) scale(0.94) rotate(0deg);
    border-radius: 76% 80% 84% 72% / 82% 76% 88% 74%;
  }
  25% {
    transform: translate(12%, -20%) scale(1.18) rotate(8deg);
    border-radius: 86% 74% 76% 88% / 78% 86% 72% 84%;
  }
  50% {
    transform: translate(-12%, -6%) scale(0.9) rotate(-10deg);
    border-radius: 72% 88% 82% 76% / 86% 78% 80% 74%;
  }
  75% {
    transform: translate(4%, 22%) scale(1.1) rotate(6deg);
    border-radius: 84% 76% 88% 72% / 80% 90% 76% 86%;
  }
  100% {
    transform: translate(-6%, 12%) scale(0.96) rotate(-8deg);
    border-radius: 78% 86% 80% 74% / 88% 78% 84% 76%;
  }
}

/* Mobile spacing – keep visual under text nicely */
@media (max-width: 980px) {
  .cms-hero-visual {
    justify-content: center;
  }

  .cms-hero-blobs {
    max-width: 100vw;
  }
}
