/*
 * Signal bridge between the dark diagnostic hero and the first light section.
 * The boundary stays crisp; only the funnel axis receives a compact halo and
 * a short continuation line. A single grid row carries the data-system motif.
 */

.hero {
  padding-bottom: 112px;
}

#value {
  position: relative;
  z-index: 4;
  margin-top: 0;
  padding-top: 104px;
  border-top: 1px solid rgba(98, 232, 255, .24);
  border-radius: 0;
  background-color: #f5f8fc;
  background-image:
    linear-gradient(rgba(42, 82, 126, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 82, 126, .055) 1px, transparent 1px);
  background-repeat: repeat-x;
  background-size: 68px 68px;
  box-shadow: none;
  isolation: isolate;
}

#value::before {
  position: absolute;
  z-index: 0;
  top: -30px;
  right: 0;
  left: 0;
  height: 60px;
  background: radial-gradient(
    ellipse 168px 30px at 64% 50%,
    rgba(98, 232, 255, .2) 0%,
    rgba(65, 153, 194, .11) 42%,
    rgba(65, 153, 194, 0) 78%
  );
  content: "";
  pointer-events: none;
}

#value::after {
  position: absolute;
  z-index: 0;
  top: -62px;
  left: 64%;
  width: 20px;
  height: 64px;
  background:
    radial-gradient(circle at 50% 96%, rgba(57, 146, 194, .9) 0 3px, rgba(98, 232, 255, .22) 4px, transparent 8px),
    linear-gradient(180deg, transparent 0%, rgba(98, 232, 255, .13) 16%, rgba(98, 232, 255, .68) 70%, rgba(57, 146, 194, .74) 94%, transparent 100%) center / 1px 100% no-repeat;
  content: "";
  filter: drop-shadow(0 0 8px rgba(98, 232, 255, .3));
  pointer-events: none;
  transform: translateX(-50%);
}

#value > .container {
  position: relative;
  z-index: 1;
}

:root[data-theme="dark"] #value {
  border-top-color: rgba(126, 191, 242, .16);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(126, 191, 242, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 191, 242, .045) 1px, transparent 1px);
}

:root[data-theme="dark"] #value::before {
  background: radial-gradient(
    ellipse 168px 30px at 64% 50%,
    rgba(98, 232, 255, .12) 0%,
    rgba(45, 112, 150, .06) 44%,
    rgba(45, 112, 150, 0) 78%
  );
}

@media (max-width: 900px) {
  .hero {
    padding-bottom: 88px;
  }

  #value {
    padding-top: 92px;
  }

  #value::before {
    top: -26px;
    height: 52px;
    background: radial-gradient(
      ellipse 144px 26px at 50% 50%,
      rgba(98, 232, 255, .18) 0%,
      rgba(65, 153, 194, .09) 44%,
      rgba(65, 153, 194, 0) 78%
    );
  }

  #value::after {
    top: -52px;
    left: 50%;
    height: 54px;
  }

  :root[data-theme="dark"] #value::before {
    background: radial-gradient(
      ellipse 144px 26px at 50% 50%,
      rgba(98, 232, 255, .1) 0%,
      rgba(45, 112, 150, .05) 44%,
      rgba(45, 112, 150, 0) 78%
    );
  }
}

@media (max-width: 620px) {
  .hero {
    padding-bottom: 72px;
  }

  #value {
    padding-top: 80px;
    background-size: 52px 52px;
  }

  #value::before {
    top: -22px;
    height: 44px;
    background: radial-gradient(
      ellipse 120px 22px at 50% 50%,
      rgba(98, 232, 255, .17) 0%,
      rgba(65, 153, 194, .085) 44%,
      rgba(65, 153, 194, 0) 78%
    );
  }

  #value::after {
    top: -44px;
    height: 46px;
  }

  :root[data-theme="dark"] #value::before {
    background: radial-gradient(
      ellipse 120px 22px at 50% 50%,
      rgba(98, 232, 255, .09) 0%,
      rgba(45, 112, 150, .045) 44%,
      rgba(45, 112, 150, 0) 78%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  #value::after {
    filter: none;
  }
}