/* Homepage-only spectrum layer. Loaded after the shared stylesheet by design. */
.home-page .hero {
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  min-height: max(620px, calc(100svh - 82px));
  margin: 0 16px;
  padding: 142px 52px 112px;
  isolation: isolate;
}

.home-page .hero::before {
  inset: 104px 0 12px;
  z-index: 0;
  width: auto;
  border: 1px solid rgba(74, 70, 85, 0.14);
  border-radius: 34px;
  background:
    radial-gradient(circle at 16% 88%, rgba(198, 82, 103, 0.62), transparent 31%),
    radial-gradient(circle at 48% 94%, rgba(130, 75, 162, 0.58), transparent 35%),
    radial-gradient(circle at 82% 86%, rgba(69, 104, 177, 0.62), transparent 35%),
    linear-gradient(155deg, #e7e6ea 0%, #d5d3da 54%, #babfca 100%);
  background-size: 130% 130%, 140% 140%, 135% 135%, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 30px 86px rgba(62, 55, 75, 0.18);
  animation: spectrumBackdrop 14s ease-in-out infinite alternate;
}

.home-page .hero::after {
  position: absolute;
  right: 1.5%;
  bottom: -5%;
  left: 1.5%;
  z-index: 1;
  height: 54%;
  border-radius: 0 0 32px 32px;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 92%, rgba(211, 72, 91, 0.78), transparent 38%),
    radial-gradient(ellipse at 46% 105%, rgba(132, 70, 166, 0.72), transparent 42%),
    radial-gradient(ellipse at 84% 88%, rgba(59, 104, 190, 0.78), transparent 39%);
  filter: blur(32px) saturate(0.82);
  opacity: 0.78;
  transform: scale(1.08);
  animation: spectrumGlow 10s ease-in-out infinite alternate;
}

.home-page .hero-content {
  z-index: 4;
  display: grid;
  justify-items: center;
  width: min(100%, 1040px);
  max-width: 1040px;
  color: #222027;
  text-align: center;
  text-shadow: none;
}

.home-page .section-kicker {
  justify-content: center;
  color: #51485e;
}

.home-page .section-kicker::before {
  background: linear-gradient(90deg, #b34963, #7656a6, #4c72b8);
}

.home-page .hero-title {
  max-width: 1040px;
  margin-bottom: 22px;
  color: #1d1b21;
  font-size: clamp(4.8rem, 8.6vw, 9.8rem);
  line-height: 0.82;
  letter-spacing: -0.075em;
  text-shadow: none;
}

.home-page .hero-title span:last-child {
  color: #28252d;
  -webkit-text-stroke: 0;
}

.home-page .hero-title::after {
  width: 86px;
  height: 4px;
  margin-right: auto;
  margin-left: auto;
  background: linear-gradient(90deg, #c95a72, #805eb0, #5378c2);
  box-shadow: none;
}

.home-page .hero-lead {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  color: #504c57;
  font-size: clamp(1.03rem, 1.25vw, 1.2rem);
  line-height: 1.58;
}

.home-page .hero-actions {
  justify-content: center;
  margin-top: 24px;
}

.home-page .button.primary {
  color: #f8f7fa;
  background: #222027;
  box-shadow: 0 14px 36px rgba(43, 37, 50, 0.2);
}

.home-page .button.primary:hover,
.home-page .button.primary:focus-visible {
  color: #ffffff;
  background: #674c8b;
}

.home-page .button.secondary {
  border-color: rgba(42, 38, 48, 0.2);
  color: #242129;
  background: rgba(240, 239, 243, 0.5);
  box-shadow: 0 10px 30px rgba(60, 53, 70, 0.08);
}

.home-page .hero-proof {
  display: none;
}

.home-page .hero-visual {
  inset: 104px 0 12px;
  z-index: 2;
  width: auto;
  height: auto;
  border-radius: 34px;
  background: transparent;
}

.home-page .hero-visual::before {
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(229, 228, 232, 0.08), rgba(106, 92, 122, 0.08)),
    radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.18), transparent 38%);
  opacity: 1;
}

.home-page .hero-visual img {
  z-index: 0;
  border-radius: inherit;
  filter: grayscale(0.48) contrast(0.88) brightness(1.05);
  mix-blend-mode: multiply;
  opacity: 0.1;
}

@media (max-width: 900px) {
  .home-page .hero {
    width: calc(100% - 16px);
    min-height: max(670px, calc(100svh - 70px));
    margin: 0 8px;
    padding: 116px 28px 74px;
  }

  .home-page .hero::before,
  .home-page .hero-visual {
    inset: 82px 0 10px;
    width: auto;
    height: auto;
    border-radius: 26px;
  }

  .home-page .hero::after {
    right: 1%;
    bottom: -4%;
    left: 1%;
    height: 48%;
  }

  .home-page .hero-title {
    font-size: clamp(4.2rem, 14vw, 7.5rem);
  }
}

@media (max-width: 560px) {
  .home-page .hero {
    min-height: max(640px, calc(100svh - 62px));
    padding: 106px 18px 62px;
  }

  .home-page .hero-title {
    font-size: clamp(3.55rem, 16vw, 5.2rem);
  }

  .home-page .hero-lead {
    font-size: 0.98rem;
  }
}