.liquid-shape {
  --liquid-a: #f154e8;
  --liquid-b: #31c6ff;
  --liquid-c: #8a4dff;
  --liquid-glow: rgba(227, 58, 221, 0.32);
  --liquid-r0: 36% 64% 45% 55% / 54% 38% 62% 46%;
  --liquid-r1: 70% 30% 58% 42% / 36% 68% 32% 64%;
  --liquid-r2: 31% 69% 37% 63% / 67% 31% 69% 33%;
  --liquid-r3: 58% 42% 72% 28% / 42% 66% 34% 58%;
  --liquid-mask: none;
  aspect-ratio: 1;
  border-radius: var(--liquid-r0);
  -webkit-mask-image: var(--liquid-mask);
  mask-image: var(--liquid-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background:
    radial-gradient(ellipse at 28% 24%, rgba(255, 255, 255, 0.86), transparent 0 8%, transparent 18%),
    radial-gradient(ellipse at 72% 18%, rgba(255, 255, 255, 0.32), transparent 0 11%, transparent 25%),
    radial-gradient(ellipse at 73% 70%, var(--liquid-a) 0 29%, transparent 64%),
    radial-gradient(ellipse at 28% 72%, var(--liquid-b) 0 34%, transparent 68%),
    linear-gradient(135deg, var(--liquid-a), var(--liquid-b) 48%, var(--liquid-c));
  box-shadow:
    0 0 70px var(--liquid-glow),
    0 0 120px rgba(49, 198, 255, 0.14),
    inset 18px 22px 42px rgba(255, 255, 255, 0.18),
    inset -28px -34px 54px rgba(0, 0, 0, 0.38);
  display: block;
  isolation: isolate;
  overflow: visible;
  pointer-events: none;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: border-radius, transform, opacity;
  animation: liquidMorph 10s ease-in-out infinite alternate, liquidDrift 8s ease-in-out infinite alternate;
}

.liquid-shape::before,
.liquid-shape::after,
.liquid-shape span {
  content: "";
  position: absolute;
  border-radius: inherit;
  mix-blend-mode: screen;
  pointer-events: none;
}

.liquid-shape::before {
  inset: 8%;
  z-index: 1;
  background:
    conic-gradient(from 120deg, transparent, rgba(255, 255, 255, 0.38), transparent 32%, rgba(49, 198, 255, 0.42), transparent 62%, rgba(241, 84, 232, 0.46), transparent);
  filter: blur(8px);
  opacity: 0.58;
  animation: liquidSpin 14s linear infinite;
}

.liquid-shape::after {
  inset: -9%;
  z-index: -1;
  background:
    radial-gradient(circle at 42% 46%, var(--liquid-a), transparent 45%),
    radial-gradient(circle at 62% 54%, var(--liquid-b), transparent 52%);
  filter: blur(28px);
  opacity: 0.72;
  animation: liquidGlow 7s ease-in-out infinite alternate;
}

.liquid-shape span:nth-child(1) {
  width: 48%;
  height: 42%;
  left: 4%;
  top: 9%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), var(--liquid-b) 35%, transparent 72%);
  filter: blur(4px);
  animation: liquidBubbleOne 7s ease-in-out infinite alternate;
}

.liquid-shape span:nth-child(2) {
  width: 40%;
  height: 34%;
  right: 3%;
  top: 18%;
  background: radial-gradient(circle at 55% 40%, rgba(255, 255, 255, 0.68), var(--liquid-a) 42%, transparent 74%);
  filter: blur(5px);
  animation: liquidBubbleTwo 8s ease-in-out infinite alternate;
}

.liquid-shape span:nth-child(3) {
  width: 52%;
  height: 52%;
  left: 25%;
  bottom: 6%;
  background: radial-gradient(circle at 54% 48%, var(--liquid-c), transparent 64%);
  filter: blur(9px);
  opacity: 0.82;
  animation: liquidBubbleThree 9s ease-in-out infinite alternate;
}

.liquid-shape span:nth-child(4) {
  width: 18%;
  height: 18%;
  left: 53%;
  top: 15%;
  background: rgba(255, 255, 255, 0.86);
  filter: blur(7px);
  opacity: 0.56;
  animation: liquidSpark 5s ease-in-out infinite alternate;
}

.liquid-hero-left {
  --liquid-a: #f154e8;
  --liquid-b: #35c8ff;
  --liquid-c: #804cff;
  --liquid-glow: rgba(241, 84, 232, 0.36);
  --liquid-r0: 31% 69% 63% 37% / 21% 45% 55% 79%;
  --liquid-r1: 55% 45% 74% 26% / 25% 69% 31% 75%;
  --liquid-r2: 23% 77% 51% 49% / 52% 28% 72% 48%;
  --liquid-r3: 64% 36% 42% 58% / 34% 74% 26% 66%;
  --liquid-mask: none;
  aspect-ratio: .9;
  filter: saturate(1.18) drop-shadow(0 0 42px var(--liquid-glow));
  opacity: 0.88;
}

.liquid-hero-left span:nth-child(1) {
  width: 56%;
  height: 38%;
  left: 23%;
  top: 0;
}

.liquid-hero-left span:nth-child(2) {
  width: 42%;
  height: 54%;
  right: -7%;
  top: 24%;
}

.liquid-hero-left span:nth-child(3) {
  width: 64%;
  height: 58%;
  left: -8%;
  bottom: -6%;
}

.liquid-hero-left span:nth-child(4) {
  left: 58%;
  top: 9%;
}

.liquid-hero-right {
  --liquid-a: #31c6ff;
  --liquid-b: #e33add;
  --liquid-c: #4f5dff;
  --liquid-glow: rgba(49, 198, 255, 0.32);
  --liquid-r0: 68% 32% 28% 72% / 40% 23% 77% 60%;
  --liquid-r1: 44% 56% 62% 38% / 25% 72% 28% 75%;
  --liquid-r2: 78% 22% 46% 54% / 55% 31% 69% 45%;
  --liquid-r3: 38% 62% 71% 29% / 64% 42% 58% 36%;
  --liquid-mask: none;
  aspect-ratio: 1.18;
  filter: saturate(1.16) drop-shadow(0 0 40px var(--liquid-glow));
  opacity: 0.82;
  animation-duration: 12s, 9s;
}

.liquid-hero-right span:nth-child(1) {
  width: 52%;
  height: 32%;
  left: -6%;
  top: 18%;
}

.liquid-hero-right span:nth-child(2) {
  width: 36%;
  height: 58%;
  right: 4%;
  top: 35%;
}

.liquid-hero-right span:nth-child(3) {
  width: 58%;
  height: 42%;
  left: 27%;
  bottom: -5%;
}

.liquid-hero-right span:nth-child(4) {
  left: 34%;
  top: 11%;
}

.feature .liquid-feature-ring {
  --liquid-a: #e33add;
  --liquid-b: #31c6ff;
  --liquid-c: #ff7bd9;
  --liquid-glow: rgba(227, 58, 221, 0.42);
  --liquid-r0: 64% 36% 52% 48% / 28% 60% 40% 72%;
  --liquid-r1: 46% 54% 31% 69% / 66% 35% 65% 34%;
  --liquid-r2: 73% 27% 62% 38% / 42% 78% 22% 58%;
  --liquid-r3: 35% 65% 43% 57% / 54% 30% 70% 46%;
  --liquid-mask: none;
  position: absolute;
  width: 520px;
  right: -32px;
  top: -42px;
  z-index: 1;
  aspect-ratio: 1.14;
  filter: saturate(1.14) drop-shadow(0 0 46px var(--liquid-glow));
  animation-duration: 11s, 8s;
}

.feature .liquid-feature-ring span:nth-child(1) {
  width: 58%;
  height: 34%;
  left: 6%;
  top: 1%;
}

.feature .liquid-feature-ring span:nth-child(2) {
  width: 36%;
  height: 54%;
  right: -2%;
  top: 26%;
}

.feature .liquid-feature-ring span:nth-child(3) {
  width: 60%;
  height: 45%;
  left: 10%;
  bottom: -6%;
}

.feature .liquid-feature-ring::before {
  inset: 2%;
  filter: blur(6px);
}

.feature .liquid-feature-ring::after {
  inset: -14%;
}

.liquid-solutions-comet {
  --liquid-a: #8a4dff;
  --liquid-b: #31c6ff;
  --liquid-c: #e33add;
  --liquid-glow: rgba(49, 198, 255, 0.34);
  --liquid-r0: 45% 55% 62% 38% / 36% 58% 42% 64%;
  --liquid-r1: 61% 39% 46% 54% / 52% 34% 66% 48%;
  --liquid-r2: 38% 62% 56% 44% / 61% 45% 55% 39%;
  --liquid-r3: 58% 42% 35% 65% / 42% 64% 36% 58%;
  --liquid-mask: none;
  position: absolute;
  z-index: 1;
  left: clamp(-360px, -22vw, -230px);
  bottom: 164px;
  width: min(680px, 54vw);
  aspect-ratio: 1.45;
  opacity: .34;
  filter: saturate(1.18) blur(2.5px) drop-shadow(0 0 32px var(--liquid-glow));
  animation-duration: 13s, 10s;
}

.liquid-solutions-comet span:nth-child(1) {
  width: 52%;
  height: 38%;
  left: 7%;
  top: 6%;
}

.liquid-solutions-comet span:nth-child(2) {
  width: 34%;
  height: 48%;
  right: 3%;
  top: 22%;
}

.liquid-solutions-comet span:nth-child(3) {
  width: 58%;
  height: 42%;
  left: 18%;
  bottom: -2%;
}

.liquid-solutions-comet span:nth-child(4) {
  width: 16%;
  height: 18%;
  left: 68%;
  top: 16%;
}

.solutions-liquid-mini,
.liquid-bottom-mini {
  position: absolute;
  z-index: 1;
  opacity: .5;
  filter: saturate(1.28) blur(.15px);
}

.bottom-cta > .liquid-bottom-mini {
  position: absolute;
  z-index: 1;
}

.liquid-solutions-mini-one {
  --liquid-a: #e33add;
  --liquid-b: #31c6ff;
  --liquid-c: #7f48ff;
  --liquid-glow: rgba(227, 58, 221, .3);
  width: clamp(82px, 8vw, 128px);
  right: clamp(8px, 7vw, 112px);
  top: 265px;
  opacity: .48;
  animation-duration: 12s, 9s;
}

.liquid-solutions-mini-two {
  --liquid-a: #31c6ff;
  --liquid-b: #e33add;
  --liquid-c: #ffffff;
  --liquid-glow: rgba(49, 198, 255, .26);
  width: clamp(54px, 5vw, 84px);
  left: clamp(20px, 12vw, 180px);
  bottom: 20px;
  opacity: .38;
  animation-duration: 10s, 8s;
}

.bottom-cta > .liquid-bottom-orb {
  --liquid-a: #e33add;
  --liquid-b: #31c6ff;
  --liquid-c: #ffffff;
  --liquid-glow: rgba(227, 58, 221, 0.28);
  --liquid-r0: 58% 42% 29% 71% / 36% 68% 32% 64%;
  --liquid-r1: 33% 67% 57% 43% / 62% 31% 69% 38%;
  --liquid-r2: 72% 28% 39% 61% / 45% 76% 24% 55%;
  --liquid-r3: 45% 55% 68% 32% / 28% 58% 42% 72%;
  --liquid-mask: none;
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: min(620px, 52vw);
  aspect-ratio: 1.16;
  opacity: 0.5;
  filter: blur(2px) saturate(1.32) drop-shadow(0 0 44px var(--liquid-glow));
  animation-duration: 14s, 11s;
}

.bottom-cta > .liquid-bottom-orb span:nth-child(1) {
  width: 58%;
  height: 36%;
  left: 28%;
  top: -2%;
}

.bottom-cta > .liquid-bottom-orb span:nth-child(2) {
  width: 44%;
  height: 52%;
  right: -8%;
  top: 31%;
}

.bottom-cta > .liquid-bottom-orb span:nth-child(3) {
  width: 62%;
  height: 48%;
  left: -5%;
  bottom: 2%;
}

.bottom-cta > .liquid-bottom-orb span:nth-child(4) {
  left: 66%;
  top: 15%;
}

.liquid-bottom-mini-one {
  --liquid-a: #31c6ff;
  --liquid-b: #e33add;
  --liquid-c: #794bff;
  --liquid-glow: rgba(49, 198, 255, .24);
  width: clamp(70px, 7vw, 112px);
  left: clamp(32px, 10vw, 170px);
  bottom: 22%;
}

.liquid-bottom-mini-two {
  --liquid-a: #e33add;
  --liquid-b: #ffffff;
  --liquid-c: #31c6ff;
  --liquid-glow: rgba(227, 58, 221, .22);
  width: clamp(46px, 5vw, 76px);
  left: clamp(360px, 34vw, 540px);
  top: 18%;
  opacity: .36;
}

.bottom-cta > .liquid-bottom-orb::before,
.bottom-cta > .liquid-bottom-orb::after,
.bottom-cta > .liquid-bottom-orb span {
  filter: blur(10px);
}

@keyframes liquidMorph {
  0% { border-radius: var(--liquid-r0); }
  33% { border-radius: var(--liquid-r1); }
  66% { border-radius: var(--liquid-r2); }
  100% { border-radius: var(--liquid-r3); }
}

@keyframes liquidDrift {
  0% { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
  50% { transform: translate3d(10px, -8px, 0) rotate(2deg) scale(1.025); }
  100% { transform: translate3d(-8px, 9px, 0) rotate(-2deg) scale(1.01); }
}

@keyframes liquidSpin {
  to { transform: rotate(360deg); }
}

@keyframes liquidGlow {
  to { opacity: 0.92; transform: scale(1.08); }
}

@keyframes liquidBubbleOne {
  to { transform: translate(30%, 24%) scale(1.28); }
}

@keyframes liquidBubbleTwo {
  to { transform: translate(-32%, 30%) scale(0.78); }
}

@keyframes liquidBubbleThree {
  to { transform: translate(12%, -28%) scale(1.16); }
}

@keyframes liquidSpark {
  to { transform: translate(44%, 76%) scale(1.65); opacity: 0.2; }
}

@media (max-width: 900px) {
  .liquid-solutions-comet {
    width: min(520px, 96vw);
    left: -260px;
    bottom: 400px;
    opacity: .34;
  }

  .liquid-solutions-mini-one {
    right: 18px;
    top: 360px;
    width: 82px;
  }

  .liquid-solutions-mini-two {
    left: 28px;
    bottom: 58px;
    width: 56px;
  }

  .feature .liquid-feature-ring {
    width: 430px;
    top: auto;
    right: -82px;
    bottom: -48px;
  }

  .bottom-cta > .liquid-bottom-orb {
    width: min(560px, 96vw);
    justify-self: start;
    margin: 0 0 -96px -58px;
    opacity: 0.38;
  }

  .liquid-bottom-mini-one {
    left: 24px;
    bottom: 18%;
    width: 76px;
  }

  .liquid-bottom-mini-two {
    left: auto;
    right: 30px;
    top: 15%;
    width: 58px;
  }
}

@media (max-width: 600px) {
  .liquid-shape {
    animation-duration: 12s, 10s;
  }

  .feature .liquid-feature-ring {
    width: 360px;
    right: -124px;
  }

  .liquid-solutions-comet {
    width: 420px;
    left: -250px;
    bottom: 535px;
    opacity: .26;
  }

  .liquid-solutions-mini-one {
    width: 62px;
    right: 20px;
    top: 420px;
  }

  .liquid-solutions-mini-two {
    width: 46px;
    left: 16px;
    bottom: 88px;
  }

  .bottom-cta > .liquid-bottom-orb {
    width: min(460px, 108vw);
    margin: 0 0 -84px -76px;
  }

  .liquid-bottom-mini-one {
    width: 58px;
    left: 18px;
    bottom: 19%;
  }

  .liquid-bottom-mini-two {
    width: 44px;
    right: 22px;
    top: 17%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-shape,
  .liquid-shape::before,
  .liquid-shape::after,
  .liquid-shape span {
    animation: none !important;
  }
}