{% if module.show_blobs %}
/* -- BLOBS (same as previous, abstract shapes, vibrant) -- */
.blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: lighten;
  filter: blur(80px) brightness(1.08);
  opacity: 0.82;
  transition: opacity 1s;
}


/* Desktop sizes: blobs sized as a % of hero area (responsive!) */
.blob1 {
  left: 52%;
  top: -15%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle at 40% 40%, #033bf0 0%, #0FCFEF 40%, #3ED9F3 80%, transparent 100%);
  border-radius: 55% 33% 70% 38% / 67% 61% 43% 65%;
  opacity: 0.8;
  animation: blob1move 18s ease-in-out infinite alternate;
}
.blob2 {
  left: -20%;
  top: 8%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle at 60% 50%, #6b54ed 10%, #210f8a 55%, #0CA5BF 90%, transparent 100%);
  border-radius: 60% 51% 43% 70% / 36% 73% 38% 66%;
  opacity: 0.54;
  animation: blob2move 23s ease-in-out infinite alternate;
}
.blob3 {
  left: 45%;
  top: 62%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle at 20% 80%, #ffe026 20%, #e3c200 65%, #ffeb6b 100%, transparent 100%);
  border-radius: 63% 34% 53% 73% / 52% 62% 45% 68%;
  opacity: 0.38;
  animation: blob3move 20s ease-in-out infinite alternate;
}
.blob4 {
  left: 18%;
  top: 68%;
  width: 48%;
  height: 30%;
  background: radial-gradient(circle at 90% 20%, #a191f5 15%, #0329ab 60%, #ffe026 95%, transparent 100%);
  border-radius: 74% 23% 61% 48% / 53% 77% 33% 59%;
  opacity: 0.44;
  animation: blob4move 27s ease-in-out infinite alternate;
}

/* RESPONSIVE TWEAKS */
@media (max-width: 1169px) {
  .blob1 {
    left: 48%;
    top: -17%;
    width: 110%;
    height: 90%;
  }
  .blob2 {
    left: -24%;
    top: 13%;
    width: 85%;
    height: 80%;
  }
  .blob3 {
    left: 32%;
    top: 61%;
    width: 65%;
    height: 50%;
  }
  .blob4 {
    left: 11%;
    top: 77%;
    width: 66%;
    height: 40%;
  }
}

@media (max-width: 767px) {
  .blob1 {
    left: 33%;
    top: -22%;
    width: 170%;
    height: 110%;
  }
  .blob2 {
    left: -37%;
    top: 9%;
    width: 170%;
    height: 120%;
  }
  .blob3 {
    left: 4%;
    top: 62%;
    width: 120%;
    height: 65%;
  }
  .blob4 {
    left: -11%;
    top: 81%;
    width: 110%;
    height: 48%;
  }
}

@keyframes blob1move {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 55% 33% 70% 38% / 67% 61% 43% 65%;
  }
  32% {
    transform: translate(-4vw, -2vw) scale(1.13) rotate(19deg);
    border-radius: 61% 25% 76% 51% / 45% 72% 41% 78%;
  }
  67% {
    transform: translate(2vw, 3vw) scale(0.93) rotate(-11deg);
    border-radius: 69% 32% 58% 41% / 59% 54% 63% 42%;
  }
  100% {
    transform: translate(0, 0) scale(1.05) rotate(0deg);
    border-radius: 59% 43% 61% 35% / 71% 61% 36% 62%;
  }
}
@keyframes blob2move {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 60% 51% 43% 70% / 36% 73% 38% 66%;
  }
  28% {
    transform: translate(2vw, 3vw) scale(1.07) rotate(8deg);
    border-radius: 52% 69% 41% 74% / 52% 54% 60% 45%;
  }
  70% {
    transform: translate(-2vw, -3vw) scale(0.97) rotate(-12deg);
    border-radius: 71% 37% 63% 42% / 60% 36% 58% 62%;
  }
  100% {
    transform: translate(0, 0) scale(1.02) rotate(0deg);
    border-radius: 66% 43% 67% 41% / 42% 77% 37% 67%;
  }
}
@keyframes blob3move {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 63% 34% 53% 73% / 52% 62% 45% 68%;
  }
  23% {
    transform: translate(3vw, -2vw) scale(1.11) rotate(22deg);
    border-radius: 68% 43% 69% 31% / 57% 74% 43% 60%;
  }
  65% {
    transform: translate(-2vw, 4vw) scale(0.89) rotate(-14deg);
    border-radius: 51% 49% 78% 26% / 65% 54% 75% 46%;
  }
  100% {
    transform: translate(0, 0) scale(1.08) rotate(0deg);
    border-radius: 71% 27% 60% 64% / 66% 51% 57% 58%;
  }
}
@keyframes blob4move {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 74% 23% 61% 48% / 53% 77% 33% 59%;
  }
  36% {
    transform: translate(-1vw, -4vw) scale(0.95) rotate(15deg);
    border-radius: 67% 44% 52% 68% / 49% 60% 37% 74%;
  }
  80% {
    transform: translate(2vw, 2vw) scale(1.17) rotate(-18deg);
    border-radius: 60% 32% 75% 41% / 74% 56% 63% 49%;
  }
  100% {
    transform: translate(0, 0) scale(1.06) rotate(0deg);
    border-radius: 72% 29% 64% 46% / 56% 73% 43% 57%;
  }
}

/* Animation: leader slides from top, benefit from bottom */
.leader.rotating-out {
  opacity: 0;
  transform: translateY(-1.2em) scaleY(0.9) rotateX(25deg);
  transition: opacity 0.32s, transform 0.38s cubic-bezier(0.4, 1.5, 0.6, 1);
}
.leader.rotating-in {
  opacity: 1;
  transform: translateY(1.2em) scaleY(0.95) rotateX(-22deg);
  animation: leader-in 0.62s cubic-bezier(0.38, 1.3, 0.6, 1) forwards;
}
@keyframes leader-in {
  from {
    opacity: 0;
    transform: translateY(1.2em) scaleY(0.95) rotateX(-22deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1) rotateX(0deg);
  }
}

.benefit.rotating-out {
  opacity: 0;
  transform: translateY(1.2em) scaleY(0.9) rotateX(-25deg);
  transition: opacity 0.32s, transform 0.38s cubic-bezier(0.4, 1.5, 0.6, 1);
}
.benefit.rotating-in {
  opacity: 1;
  transform: translateY(-1.2em) scaleY(0.95) rotateX(22deg);
  animation: benefit-in 0.62s cubic-bezier(0.38, 1.3, 0.6, 1) forwards;
}
@keyframes benefit-in {
  from {
    opacity: 0;
    transform: translateY(-1.2em) scaleY(0.95) rotateX(22deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1) rotateX(0deg);
  }
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .hero-content.single-col {
    padding: 0 4vw;
  }
  .hero-content.single-col h1 {
    font-size: clamp(1.6rem, 9vw, 2.3rem);
  }
  .highlight-gradient,
  .rotate-text {
    min-width: 5em;
  }
}
{% endif %}