/* Home ES: existing SIKIO tokens and breakpoints; no separate visual scale. */
.hero-copy h1 {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-tracking);
  font-weight: var(--text-display-lg-weight);
}
.hero-copy .hero-description {
  position: relative;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
  font-weight: var(--text-body-lg-weight);
}
/* The original text remains in flow and in the accessibility tree throughout. */
.hero-description.is-typing { color: transparent; }
.hero-description .typewriter-visual {
  position: absolute;
  inset: 0;
  color: var(--text-secondary);
}
.typewriter-pending { visibility: hidden; }

/* Section wash: a soft blue-to-white gradient (blue-50/background-default only, per colors.md) instead of a flat or dark section background. */
.ecosystem {
  background: linear-gradient(180deg, var(--background-default) 0%, var(--blue-50) 48%, var(--background-default) 100%);
}
.ecosystem .solution-showcase-head {
  margin-bottom: var(--space-09);
}
.ecosystem .solution-showcase-head h2,
.support-section .included-title {
  color: var(--text-default);
  font-size: var(--text-heading-xl-size);
  line-height: var(--text-heading-xl-line);
  letter-spacing: var(--text-heading-xl-tracking);
  font-weight: var(--text-heading-xl-weight);
}
.ecosystem .solution-showcase-head > p:last-child {
  color: var(--text-secondary);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
  font-weight: var(--text-body-lg-weight);
}

.ecosystem-diagram {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-06);
  row-gap: var(--space-09);
  align-items: start;
  isolation: isolate;
}
/* Two faint concentric rings centered on CORE's grid cell, no matter its final pixel position. */
.ecosystem-diagram::before,
.ecosystem-diagram::after {
  content: "";
  position: absolute;
  grid-column: 2;
  grid-row: 2;
  place-self: center;
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
}
.ecosystem-diagram::before {
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(18, 109, 250, 0.14), transparent 70%);
}
.ecosystem-diagram::after {
  width: 30rem;
  height: 30rem;
  border: var(--border-width-default) solid rgba(18, 109, 250, 0.08);
}
.ecosystem-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.ecosystem-connections path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: var(--border-width-default);
  transition: stroke 160ms ease, stroke-width 160ms ease, opacity 200ms ease;
}
.ecosystem-connections path.is-active {
  stroke: var(--border-focus);
  stroke-width: calc(var(--border-width-default) * 2.5);
  filter: drop-shadow(0 0 3px rgba(18, 109, 250, .45));
}
.ecosystem-connections path:not(.orbit-pulse) {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke 160ms ease, stroke-width 160ms ease, opacity 200ms ease, stroke-dashoffset 700ms ease 180ms;
}
/* Cloned in home-ecosystem.js from the static paths above; carries the traveling pulse. */
.orbit-pulse {
  stroke: var(--action-primary-default);
  stroke-width: calc(var(--border-width-default) * 2.5);
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  opacity: .8;
  filter: drop-shadow(0 0 3px rgba(18, 109, 250, .5));
  animation: orbit-flow 3.4s linear infinite;
  animation-delay: var(--orbit-delay, 0s);
}
.orbit-pulse.is-active {
  stroke-width: calc(var(--border-width-default) * 3.5);
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(18, 109, 250, .8));
}
.ecosystem-diagram.has-active .ecosystem-connections path:not(.is-active) { opacity: .2; }
@keyframes orbit-flow {
  to { stroke-dashoffset: -100; }
}

.ecosystem-node {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: min(100%, 14rem);
  justify-self: center;
  border-radius: var(--radius-large);
  background: var(--surface-default);
  box-shadow: 0 10px 26px rgba(0, 22, 58, 0.07);
  color: var(--text-default);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.ecosystem-core {
  grid-area: 2 / 2;
  width: min(100%, 17rem);
  box-shadow: 0 16px 36px rgba(0, 22, 58, 0.11);
}
/* Thin ring around CORE; its offset also feeds home-ecosystem.js so connections stop just outside it. */
.ecosystem-core::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -14px;
  right: -14px;
  bottom: -14px;
  border: var(--border-width-default) solid rgba(18, 109, 250, .32);
  border-radius: calc(var(--radius-large) + 14px);
  transition: border-color 250ms ease, border-width 250ms ease, box-shadow 250ms ease;
  pointer-events: none;
}
.ecosystem-psychology { grid-column: 1; grid-row: 1; }
.ecosystem-veterinary { grid-column: 2; grid-row: 1; }
.ecosystem-nutri { grid-column: 3; grid-row: 1; }
.ecosystem-sector { grid-column: 1; grid-row: 2; }
.ecosystem-alternative { grid-column: 3; grid-row: 2; }

.ecosystem-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-large) var(--radius-large) 0 0;
}
/* The CORE screenshot is a laptop+phone mockup shot near 4:3 — forcing the
   shared 16:9 box cropped into the devices. This ratio is close enough to its
   native size (1030x760) that cover barely trims it, so nothing looks cut. */
.ecosystem-core .ecosystem-photo { aspect-ratio: 4 / 3; }
.ecosystem-psychology .ecosystem-photo { object-position: 50% 30%; }
.ecosystem-alternative .ecosystem-photo { object-position: 50% 22%; }
.ecosystem-veterinary .ecosystem-photo { object-position: 50% 35%; }
.ecosystem-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: var(--space-05) var(--space-06) var(--space-06);
}
/* Belt-and-braces card height: the h3/p min-heights below reserve 2 and 3 lines
   respectively, but a line-clamped paragraph shorter than 3 lines doesn't reliably
   honor its own min-height across engines. Fixing the height here instead — with
   the CTA's margin-top: auto — guarantees every non-CORE card (and its CTA) lines
   up regardless of how many lines a given title/description actually wraps to. */
.ecosystem-node:not(.ecosystem-core) .ecosystem-copy { min-height: 13rem; }
.ecosystem-node .ecosystem-origin {
  align-self: flex-start;
  margin-bottom: var(--space-03);
  padding: var(--space-02) var(--space-04);
  border-radius: var(--radius-full);
  background: var(--background-subtle);
  color: var(--text-muted);
  font-size: var(--text-body-xs-size);
  line-height: var(--line-height-100);
  letter-spacing: var(--text-body-xs-tracking);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}
.ecosystem-core .ecosystem-origin {
  background: var(--action-primary-default);
  color: var(--text-on-brand);
}
.ecosystem-node h3 {
  margin: 0 0 var(--space-03);
  min-height: calc(var(--text-heading-sm-line) * 2);
  font-size: var(--text-heading-sm-size);
  line-height: var(--text-heading-sm-line);
  letter-spacing: var(--text-heading-sm-tracking);
  font-weight: var(--text-heading-sm-weight);
  color: inherit;
}
.ecosystem-core h3 {
  min-height: 0;
  font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-line);
  letter-spacing: var(--text-heading-lg-tracking);
  font-weight: var(--text-heading-lg-weight);
}
.ecosystem-node a { color: inherit; }
.ecosystem-node a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-large); }
.ecosystem-node a:focus-visible { outline: none; }
.ecosystem-node a:focus-visible::after {
  inset: calc(-1 * var(--space-02));
  outline: var(--border-width-focus) solid var(--border-focus);
  border-radius: var(--radius-focus-large);
}
.ecosystem-node p:not(.ecosystem-origin) {
  margin: 0;
  min-height: calc(var(--text-body-sm-line) * 3);
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  letter-spacing: var(--text-body-sm-tracking);
  font-weight: var(--text-body-sm-weight);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ecosystem-cta {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-04);
  color: var(--action-link-default);
  font-size: var(--text-heading-2xs-size);
  line-height: var(--text-heading-2xs-line);
  letter-spacing: var(--text-heading-2xs-tracking);
  font-weight: var(--text-heading-2xs-weight);
}
.ecosystem-core .ecosystem-cta { color: var(--action-primary-default); }
.ecosystem-node:hover,
.ecosystem-node:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0, 22, 58, 0.16), 0 0 0 2px var(--action-primary-default);
}
.ecosystem-node:hover .ecosystem-cta,
.ecosystem-node:focus-within .ecosystem-cta { text-decoration: underline; }
.ecosystem-diagram.has-active .ecosystem-core::before {
  border-width: calc(var(--border-width-default) * 2);
  border-color: var(--action-primary-default);
  box-shadow: 0 0 0 5px rgba(18, 109, 250, .18);
}
.ecosystem-core { transition: box-shadow 200ms ease; }

/* Entrance: JS adds .orbit-pending immediately (before the section enters the viewport) only
   when it will also drive the reveal, so content stays fully visible without JS or with
   prefers-reduced-motion; .orbit-revealed is added once, on intersection, to play it.
   Kept as a separate `animation` (not `transition`) so the per-card stagger never bleeds
   into the hover/focus transform+box-shadow transition declared on .ecosystem-node above.
   --orbit-entrance-delay is set per node in home-ecosystem.js. */
@keyframes orbit-reveal-head {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes orbit-reveal-core {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes orbit-reveal-node {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.ecosystem.orbit-pending:not(.orbit-revealed) .ecosystem-connections path:not(.orbit-pulse) {
  stroke-dashoffset: 100;
}
.ecosystem.orbit-pending .solution-showcase-head,
.ecosystem.orbit-pending .ecosystem-core,
.ecosystem.orbit-pending .ecosystem-node:not(.ecosystem-core) {
  opacity: 0;
}
.ecosystem.orbit-pending.orbit-revealed .solution-showcase-head {
  animation: orbit-reveal-head 500ms ease both;
}
.ecosystem.orbit-pending.orbit-revealed .ecosystem-core {
  animation: orbit-reveal-core 500ms ease 120ms both;
}
.ecosystem.orbit-pending.orbit-revealed .ecosystem-node:not(.ecosystem-core) {
  animation: orbit-reveal-node 500ms ease both;
  animation-delay: var(--orbit-entrance-delay, 0ms);
}

.support-section { padding-top: var(--space-10); }
.support-section .human-support-home h3 {
  margin: var(--space-04) 0 0;
  color: var(--text-default);
  font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-line);
  letter-spacing: var(--text-heading-lg-tracking);
  font-weight: var(--text-heading-lg-weight);
}
.support-section .human-support-home p { color: var(--text-secondary); }

@media (max-width: 1100px) {
  .ecosystem-diagram {
    max-width: 26rem;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-08);
    padding-left: var(--space-10);
  }
  .ecosystem-diagram::before,
  .ecosystem-diagram::after { content: none; }
  .ecosystem-node,
  .ecosystem-core,
  .ecosystem-nutri,
  .ecosystem-veterinary,
  .ecosystem-alternative {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}
@media (max-width: 760px) {
  .ecosystem .solution-showcase-head { margin-bottom: var(--space-07); }
  .ecosystem-diagram { padding-left: var(--space-11); gap: var(--space-10); }
}
@media (max-width: 380px) {
  .ecosystem-diagram { padding-left: var(--space-10); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-description.is-typing { color: var(--text-secondary); }
  .hero-description .typewriter-visual { display: none; }
  .ecosystem-node,
  .ecosystem-connections path,
  .solution-showcase-head,
  .ecosystem-core,
  .ecosystem-core::before { transition: none; }
  .orbit-pulse { display: none; }
}
/* New components consume the documented semantic dark pairs locally. */
@media (prefers-color-scheme: dark) {
  .ecosystem {
    --background-default: var(--neutral-900);
    --surface-default: var(--neutral-800);
    --text-default: var(--neutral-50);
    --text-secondary: var(--neutral-200);
    --text-muted: var(--neutral-400);
    --background-subtle: var(--neutral-700);
    --border-subtle: var(--neutral-700);
    --action-link-default: var(--blue-400);
    background: linear-gradient(180deg, var(--background-default) 0%, var(--neutral-800) 48%, var(--background-default) 100%);
  }
  .ecosystem-node {
    border: var(--border-width-default) solid var(--border-subtle);
    box-shadow: none;
  }
  .ecosystem-node:hover,
  .ecosystem-node:focus-within {
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--blue-400);
  }
}