.use-cases-page {
  --uc-night: #071b18;
  --uc-aqua: #8ee9db;
  --uc-sand: #f2e5c6;
  --uc-coral: #f09a82;
}

.uc-hero {
  position: relative;
  min-height: 720px;
  color: white;
  background:
    radial-gradient(circle at 78% 22%, rgba(63, 199, 179, .24), transparent 24%),
    radial-gradient(circle at 12% 90%, rgba(239, 195, 79, .13), transparent 30%),
    linear-gradient(135deg, #061512 0%, #0b2a24 55%, #09211f 100%);
  overflow: hidden;
}
.uc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image:
    linear-gradient(rgba(174, 239, 226, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 239, 226, .22) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
}
.uc-hero-orbit {
  position: absolute;
  border: 1px solid rgba(142, 233, 219, .2);
  border-radius: 50%;
  pointer-events: none;
}
.uc-hero-orbit::before,
.uc-hero-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(142, 233, 219, .12);
  border-radius: inherit;
}
.uc-hero-orbit::before { inset: 12%; }
.uc-hero-orbit::after { inset: 28%; }
.uc-hero-orbit.orbit-one { width: 640px; height: 640px; right: -235px; top: -280px; }
.uc-hero-orbit.orbit-two { width: 360px; height: 360px; left: -210px; bottom: -210px; }

.uc-hero-layout {
  position: relative;
  z-index: 2;
  min-height: 720px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 80px;
  align-items: center;
  padding-block: 90px;
}
.uc-hero .next-kicker { color: var(--uc-aqua); }
.uc-hero .next-kicker i { background: var(--uc-aqua); box-shadow: 0 0 0 5px rgba(142, 233, 219, .11); }
.uc-hero-copy h1 { max-width: 700px; margin: 22px 0 25px; font-size: clamp(4rem, 6.3vw, 6.7rem); line-height: .92; letter-spacing: -.068em; }
.uc-hero-copy h1 em { display: block; color: var(--uc-aqua); font: 500 .92em/1.04 var(--next-serif); letter-spacing: -.04em; }
.uc-hero-copy > p { max-width: 680px; margin: 0; color: #c5ddd7; font-size: 18px; line-height: 1.75; }
.uc-plain-promise { max-width: 650px; display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); color: #9db9b2; font-size: 12px; }
.uc-plain-promise b { color: var(--next-yellow); }

.uc-hero-map { position: relative; min-height: 540px; display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; }
.uc-source-cloud,
.uc-map-outcomes { display: grid; gap: 18px; }
.uc-source-cloud span,
.uc-map-outcomes span {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(193, 235, 226, .22);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}
.uc-source-cloud span:nth-child(2) { transform: translateX(-24px); }
.uc-source-cloud span:nth-child(4) { transform: translateX(-14px); }
.uc-source-cloud span::after { content: ""; position: absolute; right: -25px; width: 24px; height: 1px; background: rgba(142,233,219,.42); }
.uc-map-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 166px;
  height: 166px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid var(--uc-aqua);
  border-radius: 50%;
  background: #0a2722;
  box-shadow: 0 0 0 20px rgba(142,233,219,.06), 0 0 70px rgba(76,205,184,.16);
  transform: translate(-50%, -50%);
}
.uc-map-core::after { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(142,233,219,.24); border-radius: 50%; animation: ucPulse 2.7s ease-out infinite; }
.uc-map-core small { color: var(--uc-aqua); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.uc-map-core strong { margin: 8px 0; font-size: 24px; line-height: 1.02; }
.uc-map-core span { color: #88aaa1; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.uc-map-line { height: 1px; background: linear-gradient(90deg, transparent, var(--uc-aqua), transparent); }
.uc-map-line i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--next-yellow); border-radius: 50%; box-shadow: 0 0 14px var(--next-yellow); animation: ucPacket 3s linear infinite; }
.uc-map-line i:nth-child(2) { animation-delay: -1s; }
.uc-map-line i:nth-child(3) { animation-delay: -2s; }
.uc-map-outcomes span { padding-left: 40px; }
.uc-map-outcomes i { position: absolute; left: 17px; width: 9px; height: 9px; border-radius: 50%; }
.uc-map-outcomes .release i { background: var(--next-green-bright); }
.uc-map-outcomes .conflict i { background: var(--uc-coral); }
.uc-map-outcomes .refuse i { background: var(--next-yellow); }

@keyframes ucPulse {
  0% { transform: scale(.88); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.16); opacity: 0; }
}
@keyframes ucPacket {
  from { transform: translateX(-110px); opacity: 0; }
  18%, 82% { opacity: 1; }
  to { transform: translateX(105px); opacity: 0; }
}

.uc-anchor-bar a { white-space: nowrap; }
.uc-intro { padding: 95px 0; background: var(--next-paper-2); border-bottom: 1px solid var(--next-line); }
.uc-intro-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: 75px; align-items: center; }
.uc-intro h2 { margin: 15px 0 0; font-size: clamp(2.8rem, 4.7vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.uc-three-step { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; }
.uc-three-step > div { min-height: 235px; padding: 24px; border: 1px solid var(--next-line); background: var(--next-paper); }
.uc-three-step > div.focus { color: white; background: var(--next-green); border-color: var(--next-green); }
.uc-three-step > i { display: grid; place-items: center; color: var(--next-green); font-style: normal; font-weight: 900; }
.uc-three-step span { display: grid; width: 30px; height: 30px; place-items: center; color: white; background: var(--next-green); border-radius: 50%; font-size: 10px; font-weight: 900; }
.uc-three-step .focus span { color: var(--next-ink); background: var(--next-yellow); }
.uc-three-step b { display: block; margin-top: 42px; font-size: 17px; line-height: 1.25; }
.uc-three-step p { margin: 10px 0 0; color: var(--next-muted); font-size: 12px; line-height: 1.6; }
.uc-three-step .focus p { color: #cce5df; }

.uc-domain { padding: 115px 0; border-bottom: 1px solid var(--next-line); background: var(--next-paper); scroll-margin-top: 120px; }
.uc-domain-layout { display: grid; grid-template-columns: 340px 1fr; gap: 90px; }
.uc-domain-intro { position: sticky; top: 118px; align-self: start; }
.uc-domain-number { display: block; margin-bottom: 62px; color: rgba(13,106,93,.2); font: 500 88px/1 var(--next-serif); }
.uc-domain-intro h2 { margin: 17px 0; font-size: clamp(2.7rem, 4vw, 4.4rem); line-height: .98; letter-spacing: -.052em; }
.uc-domain-intro p { color: var(--next-muted); font-size: 14px; line-height: 1.75; }
.uc-case-list { border-top: 1px solid var(--next-line); }
.uc-case { padding: 52px 0 58px; border-bottom: 1px solid var(--next-line); scroll-margin-top: 120px; }
.uc-case > header { display: grid; grid-template-columns: 155px 1fr; column-gap: 28px; }
.uc-case > header > span { padding-top: 7px; color: var(--next-green); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.uc-case h3 { max-width: 750px; margin: 0; font-size: clamp(2rem, 3.1vw, 3.25rem); line-height: 1.02; letter-spacing: -.045em; }
.uc-case > header > p { grid-column: 2; max-width: 720px; margin: 15px 0 0; color: var(--next-muted); }
.uc-case-route { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 36px; margin-left: 183px; }
.uc-case-route > div { position: relative; min-height: 190px; padding: 22px 24px 18px; border-top: 4px solid var(--next-line); background: rgba(255,255,255,.33); }
.uc-case-route > div + div { border-left: 1px solid var(--next-line); }
.uc-case-route > div:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -8px; top: 42px; width: 14px; height: 14px; border-top: 1px solid var(--next-green); border-right: 1px solid var(--next-green); transform: rotate(45deg); }
.uc-case-route .risk { border-top-color: var(--uc-coral); }
.uc-case-route .check { border-top-color: var(--next-green-bright); }
.uc-case-route .return { border-top-color: var(--next-yellow); }
.uc-case-route b { display: block; color: var(--next-green); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.uc-case-route .risk b { color: #a94f3f; }
.uc-case-route p { margin: 34px 0 0; color: var(--next-muted); font-size: 12px; line-height: 1.62; }

.uc-domain-dark { color: white; background: var(--uc-night); border-color: rgba(255,255,255,.13); }
.uc-domain-dark .uc-domain-number { color: rgba(142,233,219,.15); }
.uc-domain-dark .next-kicker { color: var(--uc-aqua); }
.uc-domain-dark .uc-domain-intro p,
.uc-domain-dark .uc-case > header > p,
.uc-domain-dark .uc-case-route p { color: #a8beb8; }
.uc-domain-dark .uc-case-list,
.uc-domain-dark .uc-case,
.uc-domain-dark .uc-case-route > div + div { border-color: rgba(255,255,255,.14); }
.uc-domain-dark .uc-case > header > span,
.uc-domain-dark .uc-case-route b { color: var(--uc-aqua); }
.uc-domain-dark .uc-case-route .risk b { color: #ffad98; }
.uc-domain-dark .uc-case-route > div { background: rgba(255,255,255,.035); }
.uc-domain-dark .uc-case-route > div:not(:last-child)::after { border-color: var(--uc-aqua); }
.uc-domain-sand { background: var(--uc-sand); }
.uc-domain-research { color: white; background: #0a2331; border-color: rgba(255,255,255,.13); }
.uc-domain-research .uc-domain-number { color: rgba(142,214,233,.17); }
.uc-domain-research .next-kicker,
.uc-domain-research .uc-case > header > span,
.uc-domain-research .uc-case-route b { color: #9fdff0; }
.uc-domain-research .uc-domain-intro p,
.uc-domain-research .uc-case > header > p,
.uc-domain-research .uc-case-route p { color: #abc4ce; }
.uc-domain-research .uc-case-list,
.uc-domain-research .uc-case,
.uc-domain-research .uc-case-route > div + div { border-color: rgba(255,255,255,.14); }
.uc-domain-research .uc-case-route .risk b { color: #ffad98; }
.uc-domain-research .uc-case-route > div { background: rgba(255,255,255,.04); }

.uc-fit { padding: 115px 0; background: var(--next-paper-2); border-bottom: 1px solid var(--next-line); scroll-margin-top: 120px; }
.uc-fit-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; }
.uc-fit header h2 { margin: 15px 0; font-size: clamp(3rem, 5vw, 5.1rem); line-height: .98; letter-spacing: -.055em; }
.uc-fit header p { color: var(--next-muted); }
.uc-fit-path { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--next-line); }
.uc-fit-path li { display: grid; grid-template-columns: 42px 1fr auto; gap: 18px; align-items: center; min-height: 92px; border-bottom: 1px solid var(--next-line); }
.uc-fit-path span { display: grid; width: 32px; height: 32px; place-items: center; color: white; background: var(--next-green); border-radius: 50%; font-size: 10px; font-weight: 900; }
.uc-fit-path p { margin: 0; font-weight: 650; line-height: 1.4; }
.uc-fit-path b { color: var(--next-green); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.uc-not-fit { grid-column: 2; display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 25px 0 0; color: var(--next-muted); }
.uc-not-fit b { color: #a94f3f; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.uc-not-fit p { margin: 0; font-size: 13px; }

@media (max-width: 1120px) {
  .uc-hero-layout { grid-template-columns: 1fr; gap: 35px; }
  .uc-hero-map { min-height: 450px; }
  .uc-domain-layout { grid-template-columns: 280px 1fr; gap: 55px; }
  .uc-case-route { margin-left: 0; }
}
@media (max-width: 900px) {
  .uc-intro-layout,
  .uc-domain-layout,
  .uc-fit-layout { grid-template-columns: 1fr; }
  .uc-domain-intro { position: static; }
  .uc-domain-number { margin-bottom: 28px; }
  .uc-not-fit { grid-column: auto; }
}
@media (max-width: 720px) {
  .uc-hero { min-height: auto; }
  .uc-hero-layout { min-height: auto; padding-block: 70px; }
  .uc-hero-copy h1 { font-size: clamp(3.4rem, 15vw, 5rem); }
  .uc-plain-promise { grid-template-columns: 1fr; }
  .uc-hero-map { min-height: 560px; grid-template-columns: 1fr; align-content: space-between; }
  .uc-source-cloud { grid-template-columns: 1fr 1fr; gap: 8px; }
  .uc-source-cloud span:nth-child(2),
  .uc-source-cloud span:nth-child(4) { transform: none; }
  .uc-source-cloud span::after,
  .uc-map-line { display: none; }
  .uc-map-core { width: 140px; height: 140px; }
  .uc-map-outcomes { grid-template-columns: 1fr; gap: 8px; }
  .uc-three-step { grid-template-columns: 1fr; }
  .uc-three-step > i { min-height: 35px; transform: rotate(90deg); }
  .uc-three-step > div { min-height: 190px; }
  .uc-case > header { grid-template-columns: 1fr; }
  .uc-case > header > p { grid-column: auto; }
  .uc-case h3 { margin-top: 18px; }
  .uc-case-route { grid-template-columns: 1fr; }
  .uc-case-route > div { min-height: 145px; }
  .uc-case-route > div + div { border-left: 0; border-top-width: 4px; }
  .uc-case-route > div:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -8px; transform: rotate(135deg); }
  .uc-case-route p { margin-top: 22px; }
  .uc-not-fit { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .uc-source-cloud { grid-template-columns: 1fr; }
  .uc-hero-map { min-height: 680px; }
  .uc-domain,
  .uc-fit { padding-block: 80px; }
  .uc-fit-path li { grid-template-columns: 38px 1fr; padding-block: 16px; }
  .uc-fit-path b { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-map-core::after,
  .uc-map-line i { animation: none; }
}