.ecosystem-page {
  --eco-line-dark: color-mix(in srgb, var(--color-light) 17%, transparent);
  --eco-line-light: color-mix(in srgb, var(--color-dark) 17%, transparent);
  color: var(--color-light);
  background: var(--color-dark);
}
.ecosystem-page * { box-sizing: border-box; }
.ecosystem-page h1, .ecosystem-page h2, .ecosystem-page h3, .ecosystem-page p { margin-top: 0; }
.ecosystem-kicker { margin: 0 0 1.4rem; font: 700 .68rem/1.3 Axiforma, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }

.ecosystem-hero { position: relative; display: flex; min-height: 100svh; overflow: hidden; align-items: end; padding: clamp(11rem, 17vw, 16rem) 0 clamp(5rem, 8vw, 8rem); background: var(--color-dark); isolation: isolate; }
.ecosystem-hero__inner { position: relative; z-index: 2; }
.ecosystem-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(4.3rem, 10.5vw, 11rem); font-weight: 500; letter-spacing: -.07em; line-height: .82; }
.ecosystem-hero h1 em { color: color-mix(in srgb, var(--color-primary) 76%, var(--color-light)); font-style: normal; }
.ecosystem-hero__lower { max-width: 66rem; margin: clamp(4rem, 8vw, 7rem) 0 0 auto; padding-top: 1.4rem; border-top: 1px solid var(--eco-line-dark); }
.ecosystem-hero__lower > p { max-width: 45rem; margin: 0; color: color-mix(in srgb, var(--color-light) 72%, transparent); font-size: clamp(1.05rem, 1.65vw, 1.5rem); line-height: 1.55; }
.ecosystem-hero__network { position: absolute; z-index: 0; top: 12%; right: -7%; width: min(52vw, 46rem); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--color-primary) 54%, transparent); border-radius: 50%; opacity: .72; transform: rotate(-12deg); }
.ecosystem-hero__network::before, .ecosystem-hero__network::after { position: absolute; border: 1px solid color-mix(in srgb, var(--color-light) 12%, transparent); border-radius: 50%; content: ""; }
.ecosystem-hero__network::before { inset: 17%; }.ecosystem-hero__network::after { inset: 35%; }
.ecosystem-hero__network span { position: absolute; width: .75rem; height: .75rem; border: .18rem solid var(--color-dark); border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 74%, var(--color-light)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-light) 30%, transparent); }
.ecosystem-hero__network span:nth-child(1) { top: 8%; left: 46%; }.ecosystem-hero__network span:nth-child(2) { top: 30%; right: 4%; }.ecosystem-hero__network span:nth-child(3) { right: 10%; bottom: 22%; }.ecosystem-hero__network span:nth-child(4) { bottom: 5%; left: 42%; }.ecosystem-hero__network span:nth-child(5) { bottom: 26%; left: 8%; }.ecosystem-hero__network span:nth-child(6) { top: 27%; left: 9%; }

.ecosystem-platforms, .ecosystem-elements, .ecosystem-routes { padding: clamp(6rem, 10vw, 10rem) 0; color: var(--color-dark); background: var(--color-light); }
.ecosystem-heading { display: grid; grid-template-columns: minmax(10rem, .52fr) minmax(0, 1.48fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.ecosystem-heading h2 { max-width: 14ch; margin: 0 0 1.4rem; font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.ecosystem-heading > div > p { max-width: 43rem; margin: 0; color: color-mix(in srgb, var(--color-dark) 64%, transparent); font-size: 1rem; line-height: 1.7; }
.ecosystem-heading--light > div > p { color: color-mix(in srgb, var(--color-light) 64%, transparent); }
.ecosystem-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--eco-line-light); background: var(--eco-line-light); }
.ecosystem-platform-card { display: flex; min-height: 26rem; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 3vw, 3rem); color: var(--color-dark); background: var(--color-light); text-decoration: none; transition: color .25s ease, background-color .25s ease; }
.ecosystem-index, .ecosystem-element-grid article > span { color: var(--color-primary); font: 700 .69rem/1 Axiforma, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ecosystem-platform-card p { margin-bottom: .7rem; color: color-mix(in srgb, var(--color-dark) 55%, transparent); font: 600 .7rem/1.4 Axiforma, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ecosystem-platform-card h3 { max-width: 13ch; margin-bottom: 2rem; font-size: clamp(2.2rem, 4vw, 4.4rem); font-weight: 500; letter-spacing: -.055em; line-height: .92; }
.ecosystem-card-action { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--eco-line-light); font: 700 .7rem/1.3 Axiforma, Arial, sans-serif; }
.ecosystem-card-action b, .ecosystem-route-grid b { font-size: 1.25rem; font-weight: 400; }

.ecosystem-constellation { overflow: hidden; padding: clamp(6rem, 10vw, 10rem) 0; background: var(--color-dark); }
.ecosystem-constellation__stage { position: relative; border: 1px solid var(--eco-line-dark); background: color-mix(in srgb, var(--color-dark) 96%, var(--color-primary)); }
.ecosystem-constellation__readout { position: absolute; z-index: 2; top: clamp(1rem, 2.4vw, 2rem); left: clamp(1rem, 2.4vw, 2rem); display: grid; gap: .45rem; pointer-events: none; }
.ecosystem-constellation__readout span, .ecosystem-constellation__timing { color: color-mix(in srgb, var(--color-light) 48%, transparent); font: 700 .6rem/1.2 Axiforma, Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.ecosystem-constellation__readout strong { max-width: 24rem; color: var(--color-light); font: 600 clamp(.76rem, 1.25vw, 1rem)/1.35 Axiforma, Arial, sans-serif; }
.ecosystem-constellation__timing { position: absolute; z-index: 2; top: clamp(1rem, 2.4vw, 2rem); right: clamp(1rem, 2.4vw, 2rem); }
.ecosystem-constellation__map { display: block; width: 100%; height: auto; min-height: 30rem; }
.ecosystem-constellation__line, .ecosystem-constellation__trail { fill: none; vector-effect: non-scaling-stroke; }
.ecosystem-constellation__line { stroke: color-mix(in srgb, var(--color-light) 16%, transparent); stroke-width: 1; }
.ecosystem-constellation__trail { stroke: color-mix(in srgb, var(--color-primary) 72%, var(--color-light)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ecosystem-constellation__halo { fill: transparent; stroke: color-mix(in srgb, var(--color-light) 18%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .35s ease, stroke .35s ease, transform .35s ease; }
.ecosystem-constellation__star { fill: color-mix(in srgb, var(--color-light) 42%, transparent); transition: fill .35s ease, transform .35s ease; }
.ecosystem-constellation__node text { fill: color-mix(in srgb, var(--color-light) 52%, transparent); font: 700 13px/1 Axiforma, Arial, sans-serif; letter-spacing: .1em; text-anchor: middle; transition: fill .35s ease; }
.ecosystem-constellation__node.is-visited .ecosystem-constellation__star, .ecosystem-constellation__node.is-active .ecosystem-constellation__star { fill: var(--color-light); }
.ecosystem-constellation__node.is-active .ecosystem-constellation__halo { fill: color-mix(in srgb, var(--color-primary) 20%, transparent); stroke: color-mix(in srgb, var(--color-primary) 76%, var(--color-light)); transform: scale(1.22); }
.ecosystem-constellation__node.is-active .ecosystem-constellation__star { fill: color-mix(in srgb, var(--color-primary) 70%, var(--color-light)); transform: scale(1.45); }
.ecosystem-constellation__node.is-active text { fill: var(--color-light); }
.ecosystem-constellation__signal path { fill: var(--color-light); stroke: color-mix(in srgb, var(--color-primary) 80%, var(--color-light)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ecosystem-constellation__legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; border-bottom: 1px solid var(--eco-line-dark); list-style: none; }
.ecosystem-constellation__legend li { min-height: 7.5rem; padding: 1.25rem 1.25rem 1.25rem 0; border-top: 1px solid var(--eco-line-dark); color: color-mix(in srgb, var(--color-light) 72%, transparent); font-size: .74rem; line-height: 1.5; }
.ecosystem-constellation__legend li:not(:nth-child(5n + 1)) { padding-left: 1.25rem; border-left: 1px solid var(--eco-line-dark); }
.ecosystem-constellation__legend span { display: block; margin-bottom: 1rem; color: color-mix(in srgb, var(--color-primary) 74%, var(--color-light)); font: 700 .62rem/1 Axiforma, Arial, sans-serif; letter-spacing: .12em; }

.ecosystem-pathways { padding: clamp(6rem, 10vw, 10rem) 0; background: var(--color-dark); }
.ecosystem-heading--light { color: var(--color-light); }
.ecosystem-path-list { margin: 0; padding: 0; border-top: 1px solid var(--eco-line-dark); list-style: none; }
.ecosystem-path-list li { display: grid; grid-template-columns: 4rem minmax(12rem, .8fr) minmax(18rem, 1.2fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; padding: 1.8rem 0; border-bottom: 1px solid var(--eco-line-dark); }
.ecosystem-path-list span { color: color-mix(in srgb, var(--color-primary) 76%, var(--color-light)); font: 700 .7rem/1.4 Axiforma, Arial, sans-serif; }
.ecosystem-path-list h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 3.25rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.ecosystem-path-list p { max-width: 38rem; margin: 0; color: color-mix(in srgb, var(--color-light) 64%, transparent); line-height: 1.65; }

.ecosystem-elements { background: color-mix(in srgb, var(--color-light) 94%, var(--color-dark)); }
.ecosystem-element-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--eco-line-light); }
.ecosystem-element-grid article { min-height: 18rem; padding: 2.2rem 2.2rem 2.2rem 0; border-bottom: 1px solid var(--eco-line-light); }
.ecosystem-element-grid article:nth-child(odd) { padding-right: clamp(2rem, 6vw, 6rem); border-right: 1px solid var(--eco-line-light); }
.ecosystem-element-grid article:nth-child(even) { padding-left: clamp(2rem, 6vw, 6rem); }
.ecosystem-element-grid h3 { max-width: 16ch; margin: 4.5rem 0 1rem; font-size: clamp(1.75rem, 3vw, 3rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.ecosystem-element-grid p { max-width: 36rem; margin: 0; color: color-mix(in srgb, var(--color-dark) 64%, transparent); line-height: 1.65; }
.ecosystem-element--future { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }

.ecosystem-convergence { padding: clamp(7rem, 13vw, 13rem) 0; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 76%, var(--color-dark)), var(--color-primary)); }
.ecosystem-convergence__inner { text-align: center; }
.ecosystem-convergence h2 { max-width: 12ch; margin: 0 auto 2rem; font-size: clamp(3.3rem, 7.5vw, 8rem); font-weight: 500; letter-spacing: -.065em; line-height: .87; }
.ecosystem-convergence__inner > p:not(.ecosystem-kicker) { max-width: 48rem; margin: 0 auto; color: color-mix(in srgb, var(--color-light) 76%, transparent); font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.65; }
.ecosystem-button { display: inline-flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 2.5rem; margin-top: 2.5rem; padding: 1rem 1.2rem; border: 1px solid var(--color-light); color: var(--color-dark); background: var(--color-light); font: 700 .72rem/1 Axiforma, Arial, sans-serif; text-decoration: none; transition: color .25s ease, background-color .25s ease; }

.ecosystem-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--eco-line-light); }
.ecosystem-route-grid a { display: flex; min-height: 8rem; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--eco-line-light); color: var(--color-dark); font-size: clamp(1.15rem, 2vw, 2rem); font-weight: 500; letter-spacing: -.025em; text-decoration: none; transition: color .25s ease, padding .25s ease; }
.ecosystem-route-grid a:nth-child(odd) { padding-right: clamp(2rem, 6vw, 6rem); border-right: 1px solid var(--eco-line-light); }.ecosystem-route-grid a:nth-child(even) { padding-left: clamp(2rem, 6vw, 6rem); }

.ecosystem-closing { padding: clamp(7rem, 13vw, 13rem) 0; background: var(--color-dark); }
.ecosystem-closing h2 { max-width: 14ch; margin: 0; font-size: clamp(3.2rem, 7vw, 7.4rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.ecosystem-closing__actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-top: 3rem; }
.ecosystem-closing__platform-link { min-width: 13rem; }
.ecosystem-arrow-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .8rem 0; border: 0; border-bottom: 1px solid currentColor; color: var(--color-dark); background: transparent; font: 700 .7rem/1.2 Axiforma, Arial, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.ecosystem-arrow-link--light { color: var(--color-light); }

@media (hover: hover) and (pointer: fine) {
  .ecosystem-platform-card:hover { color: var(--color-light); background: var(--color-primary); }
  .ecosystem-platform-card:hover p, .ecosystem-platform-card:hover .ecosystem-index { color: color-mix(in srgb, var(--color-light) 75%, transparent); }
  .ecosystem-platform-card:hover .ecosystem-card-action { border-color: color-mix(in srgb, var(--color-light) 34%, transparent); }
  .ecosystem-route-grid a:hover { padding-right: 1rem; color: var(--color-primary); }
  .ecosystem-button:hover { color: var(--color-light); background: transparent; }
}
.ecosystem-platform-card:focus-visible, .ecosystem-route-grid a:focus-visible, .ecosystem-button:focus-visible, .ecosystem-arrow-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

@media (max-width: 991px) {
  .ecosystem-hero__lower, .ecosystem-heading { grid-template-columns: 1fr; }.ecosystem-hero__network { width: 70vw; opacity: .45; }
  .ecosystem-constellation__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ecosystem-constellation__legend li:not(:nth-child(5n + 1)) { padding-left: 0; border-left: 0; }.ecosystem-constellation__legend li:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--eco-line-dark); }
}
@media (max-width: 700px) {
  .ecosystem-hero { min-height: 46rem; padding-top: 10rem; }.ecosystem-hero h1 { font-size: clamp(3.8rem, 18vw, 6.5rem); }.ecosystem-hero__lower { gap: 1.8rem; }.ecosystem-hero__network { top: 17%; right: -32%; width: 105vw; }
  .ecosystem-constellation__stage { margin-right: calc(var(--container-padding) * -1); margin-left: calc(var(--container-padding) * -1); border-right: 0; border-left: 0; }.ecosystem-constellation__map { min-height: 24rem; }.ecosystem-constellation__readout strong { max-width: 13rem; }.ecosystem-constellation__timing { max-width: 5rem; text-align: right; }
  .ecosystem-platform-grid, .ecosystem-element-grid, .ecosystem-route-grid { grid-template-columns: 1fr; }.ecosystem-platform-card { min-height: 22rem; }.ecosystem-path-list li { grid-template-columns: 2.2rem 1fr; }.ecosystem-path-list p { grid-column: 2; }
  .ecosystem-element-grid article, .ecosystem-element-grid article:nth-child(odd), .ecosystem-element-grid article:nth-child(even) { min-height: 0; padding: 2rem 0; border-right: 0; }.ecosystem-element-grid h3 { margin-top: 3.5rem; }
  .ecosystem-route-grid a, .ecosystem-route-grid a:nth-child(odd), .ecosystem-route-grid a:nth-child(even) { min-height: 6.5rem; padding: 1.25rem 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .ecosystem-platform-card, .ecosystem-route-grid a, .ecosystem-button, .ecosystem-constellation__halo, .ecosystem-constellation__star, .ecosystem-constellation__node text { transition: none; } }