.hero-visual[data-avatar-active="true"] .hero-funnel {
  --funnel-cycle: 6.2s;
  z-index: 12;
  top: 13%;
  right: 35%;
  bottom: 8%;
  left: -12%;
  isolation: isolate;
  filter: drop-shadow(0 28px 46px rgba(0, 0, 0, .52));
}

.hero-visual[data-avatar-active="true"] .hero-funnel::before {
  top: 8%;
  right: 5%;
  bottom: 1%;
  left: 5%;
  border-color: rgba(126, 208, 255, .2);
  background: linear-gradient(180deg, rgba(11, 24, 44, .92), rgba(7, 18, 30, .72));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 28px 60px rgba(0, 0, 0, .3);
  backdrop-filter: blur(15px);
}

.hero-visual[data-avatar-active="true"] .funnel-sources {
  z-index: 8;
  top: -2%;
  right: 4%;
  left: 4%;
}

.hero-visual[data-avatar-active="true"] .funnel-sources span {
  min-height: 27px;
  border-color: rgba(121, 181, 255, .28);
  background: rgba(7, 15, 27, .9);
  color: #c8d8ee;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04);
}

.funnel-route-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.funnel-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.funnel-route-inlet {
  stroke: rgba(121, 183, 255, .36);
  stroke-width: 1.1;
  stroke-dasharray: 4 7;
}

.funnel-route-spine {
  stroke: url("#hero-flow-gradient");
  stroke-width: 1.5;
  stroke-dasharray: 5 10;
  filter: url("#hero-route-glow");
}

.funnel-route-loss {
  stroke: url("#hero-loss-gradient");
  stroke-width: 2;
  stroke-dasharray: 7 8;
  opacity: .28;
  filter: url("#hero-route-glow");
}

.funnel-route-output {
  stroke: rgba(101, 243, 189, .6);
  stroke-width: 1.5;
  stroke-dasharray: 4 7;
  filter: url("#hero-route-glow");
}

.hero-visual[data-avatar-active="true"] .hero-funnel-core {
  z-index: 4;
  top: 12%;
  right: 3%;
  bottom: 5%;
  left: 3%;
}

.hero-visual[data-avatar-active="true"] .hero-funnel-stage {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #f7fbff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .58);
  backdrop-filter: none;
}

.hero-visual[data-avatar-active="true"] .hero-funnel-stage::before {
  border: 1px solid rgba(157, 206, 255, .38);
  background:
    linear-gradient(105deg, rgba(49, 91, 184, .92), rgba(57, 127, 222, .66) 55%, rgba(83, 208, 231, .46)),
    rgba(10, 25, 47, .82);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), inset 0 -16px 30px rgba(4, 12, 28, .22);
}

.hero-visual[data-avatar-active="true"] .hero-funnel-stage::after {
  top: -28%;
  left: 15%;
  width: 36%;
  height: 148%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  filter: blur(9px);
  opacity: .28;
  transform: rotate(17deg);
}

.hero-funnel-stage .funnel-copy,
.hero-funnel-stage .funnel-count {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
}

.hero-funnel-stage .funnel-count { justify-items: end; }

.hero-funnel-stage .funnel-copy small,
.hero-funnel-stage .funnel-count small {
  display: block;
  color: rgba(224, 241, 255, .68);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-funnel-stage .funnel-copy b {
  margin-top: 2px;
  font-size: clamp(14px, 1.45vw, 20px);
}

.hero-funnel-stage .funnel-copy em {
  margin-top: 4px;
  color: rgba(229, 242, 255, .72);
  font-size: 9px;
  text-align: left;
}

.hero-funnel-stage .funnel-count strong { font-size: clamp(24px, 2.45vw, 34px); }
.hero-funnel-stage .funnel-count small { margin-top: 3px; text-align: right; }

.hero-visual[data-avatar-active="true"] .hero-funnel-stage.stage-leads {
  top: 0;
  height: 23%;
  padding: 0 12%;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

.hero-visual[data-avatar-active="true"] .hero-funnel-stage.stage-bookings {
  top: 24.5%;
  height: 22%;
  padding: 0 19%;
  clip-path: polygon(10% 0, 90% 0, 78% 100%, 22% 100%);
}

.hero-visual[data-avatar-active="true"] .hero-funnel-stage.stage-arrivals {
  top: 48%;
  height: 20.5%;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: stretch;
  padding: 0 29%;
  text-align: left;
  clip-path: polygon(22% 0, 78% 0, 68% 100%, 32% 100%);
}

.hero-visual[data-avatar-active="true"] .stage-arrivals .funnel-copy small,
.hero-visual[data-avatar-active="true"] .stage-arrivals .funnel-count { display: grid; }
.hero-visual[data-avatar-active="true"] .stage-arrivals .funnel-copy em { display: none; }
.hero-visual[data-avatar-active="true"] .stage-arrivals b::after { display: none; content: none; }

.hero-visual[data-avatar-active="true"] .hero-funnel-stage.stage-payments {
  top: 70%;
  height: 18%;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0 35%;
  text-align: center;
  clip-path: polygon(32% 0, 68% 0, 62% 100%, 38% 100%);
}

.hero-visual[data-avatar-active="true"] .stage-payments::before {
  border-color: rgba(119, 255, 211, .62);
  background: linear-gradient(116deg, rgba(25, 113, 126, .96), rgba(65, 204, 178, .82));
  box-shadow: 0 0 28px rgba(101, 243, 189, .2), inset 0 1px rgba(255, 255, 255, .28);
}

.hero-visual[data-avatar-active="true"] .stage-payments .funnel-copy,
.hero-visual[data-avatar-active="true"] .stage-payments .funnel-count {
  display: grid;
  grid-auto-flow: column;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.hero-visual[data-avatar-active="true"] .stage-payments .funnel-copy small { display: none; }
.hero-visual[data-avatar-active="true"] .stage-payments .funnel-copy b { font-size: clamp(12px, 1.18vw, 16px); }
.hero-visual[data-avatar-active="true"] .stage-payments .funnel-count strong { font-size: clamp(21px, 2vw, 28px); }

.funnel-conversion {
  position: absolute;
  z-index: 9;
  display: grid;
  min-width: 52px;
  padding: 5px 7px;
  border: 1px solid rgba(160, 210, 255, .22);
  border-radius: 9px;
  background: rgba(5, 13, 24, .9);
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
  transform: translateY(-50%);
  backdrop-filter: blur(9px);
}

.funnel-conversion strong {
  color: #dff7ff;
  font-family: "Unbounded", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.funnel-conversion small {
  margin-top: 3px;
  color: #8fa5bd;
  font-size: 7px;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
}

.funnel-conversion.conversion-one { top: 23.7%; left: 1%; border-color: rgba(255, 109, 124, .4); }
.funnel-conversion.conversion-one strong { color: #ffabb4; }
.funnel-conversion.conversion-two { top: 47.2%; left: 12%; }
.funnel-conversion.conversion-three { top: 69.2%; left: 23%; border-color: rgba(101, 243, 189, .3); }
.funnel-conversion.conversion-three strong { color: #9affd7; }

.hero-visual[data-avatar-active="true"] .hero-funnel-loss {
  z-index: 12;
  top: 89.5%;
  right: auto;
  left: 12%;
  display: grid;
  width: 142px;
  padding: 11px 13px 12px;
  border-color: rgba(255, 109, 124, .54);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(65, 12, 26, .95), rgba(28, 10, 21, .92));
  color: #ffd8dd;
  line-height: 1.08;
  animation: none;
  box-shadow: 0 18px 38px rgba(20, 0, 7, .44), inset 0 1px rgba(255, 255, 255, .05);
  transform: translate3d(0, 0, 0);
  transition: transform 300ms cubic-bezier(.2, 0, 0, 1);
  backdrop-filter: blur(14px);
}

.hero-visual[data-avatar-active="true"] .hero-funnel-loss::before {
  position: absolute;
  top: 15px;
  left: -5px;
  width: 9px;
  height: 9px;
  margin: 0;
}

.hero-funnel-loss::after {
  position: absolute;
  z-index: -1;
  inset: -10px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(255, 109, 124, .28), transparent 68%);
  content: "";
  opacity: 0;
  transform: scale(.9);
}

.hero-funnel-loss small {
  color: #ff8f9c;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-funnel-loss strong {
  margin-top: 4px;
  color: #fff0f2;
  font-family: "Unbounded", sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.07em;
}

.hero-funnel-loss span {
  margin-top: 3px;
  color: #ffbdc5;
  font-size: 9px;
}

.hero-funnel[data-mode="loss"] .hero-funnel-loss {
  transform: translate3d(0, -2px, 0) scale(1.045);
}

.hero-funnel[data-mode="loss"] .hero-funnel-loss::after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.2, 0, 0, 1);
}

.hero-visual[data-avatar-active="true"] .hero-funnel-output {
  z-index: 10;
  top: 89.5%;
  left: 69%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  min-width: 132px;
  padding: 7px 12px 8px;
  border: 1px solid rgba(101, 243, 189, .28);
  border-radius: 12px;
  background: rgba(5, 29, 29, .82);
  box-shadow: 0 12px 30px rgba(0, 23, 19, .34);
  transform: translateX(-50%);
  transition: transform 300ms cubic-bezier(.2, 0, 0, 1);
  backdrop-filter: blur(10px);
}

.hero-visual[data-avatar-active="true"] .hero-funnel-output strong { font-size: clamp(20px, 2vw, 28px); }
.hero-visual[data-avatar-active="true"] .hero-funnel-output span { margin: 0 0 0 6px; font-size: 8px; }

.hero-funnel-output em {
  grid-column: 1 / -1;
  margin-top: 3px;
  color: rgba(174, 255, 226, .68);
  font-size: 7px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-funnel[data-mode="output"] .hero-funnel-output { transform: translateX(-50%) scale(1.05); }

.funnel-particle,
.funnel-leak-particle {
  position: absolute;
  z-index: 11;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.funnel-particle {
  top: -1%;
  left: var(--particle-left, 50%);
  background: #eaffff;
  box-shadow: 0 0 10px #62e8ff, 0 0 20px rgba(98, 232, 255, .54);
}

.funnel-particle.particle-one,
.funnel-particle.particle-four { --particle-left: 18%; --merge-x: 142px; }
.funnel-particle.particle-two,
.funnel-particle.particle-five { --particle-left: 50%; --merge-x: 0px; }
.funnel-particle.particle-three,
.funnel-particle.particle-six { --particle-left: 82%; --merge-x: -142px; }
.funnel-particle.particle-four { animation-delay: .38s !important; }
.funnel-particle.particle-five { animation-delay: .62s !important; }
.funnel-particle.particle-six { animation-delay: .86s !important; }

.funnel-leak-particle {
  top: 24%;
  left: 35%;
  background: #fff0f2;
  box-shadow: 0 0 10px #ff6d7c, 0 0 20px rgba(255, 109, 124, .54);
}

.funnel-leak-particle.leak-two { animation-delay: .18s !important; }
.funnel-leak-particle.leak-three { animation-delay: .34s !important; }

.hero-funnel.is-live .funnel-route-inlet,
.hero-funnel.is-live .funnel-route-spine,
.hero-funnel.is-live .funnel-route-output {
  animation: hero-route-flow var(--funnel-cycle) linear 1 both;
}

.hero-funnel.is-live .funnel-route-loss {
  animation: hero-loss-route var(--funnel-cycle) cubic-bezier(.2, 0, 0, 1) 1 both;
}

.hero-funnel.is-live .funnel-particle {
  animation: hero-patient-flow var(--funnel-cycle) cubic-bezier(.35, 0, .2, 1) 1 both;
}

.hero-funnel.is-live .funnel-leak-particle {
  animation: hero-patient-leak var(--funnel-cycle) cubic-bezier(.2, 0, 0, 1) 1 both;
}

.hero-funnel.is-live .stage-leads::after {
  animation: hero-stage-intake var(--funnel-cycle) ease-in-out 1 both;
}

@keyframes hero-route-flow {
  from { stroke-dashoffset: 48; }
  to { stroke-dashoffset: -48; }
}

@keyframes hero-loss-route {
  0%, 24%, 48%, 100% { opacity: .18; stroke-dashoffset: 32; }
  29%, 40% { opacity: .95; stroke-dashoffset: -12; }
}

@keyframes hero-patient-flow {
  0%, 4% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.45); }
  9% { opacity: 1; }
  24% { opacity: 1; transform: translate3d(var(--merge-x), 78px, 0) scale(.9); }
  42% { opacity: 1; transform: translate3d(var(--merge-x), 158px, 0) scale(.82); }
  59% { opacity: .8; transform: translate3d(var(--merge-x), 236px, 0) scale(.74); }
  76% { opacity: 1; transform: translate3d(var(--merge-x), 316px, 0) scale(.68); }
  86%, 100% { opacity: 0; transform: translate3d(var(--merge-x), 370px, 0) scale(.42); }
}

@keyframes hero-patient-leak {
  0%, 27% { opacity: 0; transform: translate3d(0, -6px, 0) scale(.5); }
  31% { opacity: 1; }
  42% { opacity: .9; transform: translate3d(-42px, 150px, 0) scale(.86); }
  48%, 100% { opacity: 0; transform: translate3d(-70px, 252px, 0) scale(.4); }
}

@keyframes hero-stage-intake {
  0%, 8%, 28%, 100% { opacity: .28; }
  14%, 22% { opacity: .82; }
}

@media (max-width: 1080px) {
  .hero-visual[data-avatar-active="true"] .hero-funnel {
    right: 31%;
    left: -7%;
  }

  .funnel-particle.particle-one,
  .funnel-particle.particle-four { --merge-x: 128px; }
  .funnel-particle.particle-three,
  .funnel-particle.particle-six { --merge-x: -128px; }
}

@media (max-width: 900px) {
  .hero-visual[data-avatar-active="true"] .hero-funnel {
    top: 13%;
    right: 39%;
    bottom: 6%;
    left: 1%;
  }

  .hero-visual[data-avatar-active="true"] .hero-funnel-loss {
    right: auto;
    left: 8%;
    width: 126px;
  }

  .funnel-particle.particle-one,
  .funnel-particle.particle-four { --merge-x: 100px; }
  .funnel-particle.particle-three,
  .funnel-particle.particle-six { --merge-x: -100px; }
}

@media (max-width: 620px) {
  .hero-visual[data-avatar-active="true"] .hero-funnel {
    --funnel-cycle: 4.8s;
    top: 40%;
    right: -1%;
    bottom: 1%;
    left: -1%;
    filter: none;
  }

  .hero-visual[data-avatar-active="true"] .funnel-sources {
    right: 2%;
    left: 2%;
  }

  .hero-visual[data-avatar-active="true"] .funnel-sources span {
    padding: 5px 6px;
    font-size: 7px;
  }

  .hero-visual[data-avatar-active="true"] .hero-funnel-core {
    right: 1%;
    left: 1%;
  }

  .hero-funnel-stage .funnel-copy b { font-size: 12px; }
  .hero-funnel-stage .funnel-count strong { font-size: 23px; }

  .hero-visual[data-avatar-active="true"] .stage-arrivals {
    padding-right: 28%;
    padding-left: 28%;
  }

  .hero-visual[data-avatar-active="true"] .stage-payments {
    padding-right: 33%;
    padding-left: 33%;
  }

  .hero-visual[data-avatar-active="true"] .hero-funnel-loss {
    top: 88.5%;
    right: auto;
    left: 3%;
    width: 112px;
    padding: 9px 10px;
  }

  .hero-funnel-loss strong { font-size: 20px; }
  .hero-funnel-loss span { font-size: 8px; }
  .funnel-conversion { min-width: 45px; padding: 4px 5px; }
  .funnel-conversion.conversion-one { right: auto; left: 3%; }
  .funnel-conversion.conversion-two { right: auto; left: 14%; }
  .funnel-conversion.conversion-three { right: auto; left: 25%; }

  .hero-visual[data-avatar-active="true"] .hero-funnel-output { left: 72%; }

  .funnel-particle.particle-one,
  .funnel-particle.particle-four { --merge-x: 118px; }
  .funnel-particle.particle-three,
  .funnel-particle.particle-six { --merge-x: -118px; }

  .funnel-particle.particle-four,
  .funnel-particle.particle-five,
  .funnel-particle.particle-six,
  .funnel-leak-particle.leak-three {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-funnel .funnel-particle,
  .hero-funnel .funnel-leak-particle {
    display: none !important;
  }

  .hero-funnel .funnel-route,
  .hero-funnel .hero-funnel-stage::after {
    animation: none !important;
  }

  .hero-funnel .hero-funnel-loss {
    transform: none;
    transition: none !important;
  }

  .hero-funnel .hero-funnel-output {
    transform: translateX(-50%);
    transition: none !important;
  }
}