/* Homepage-only ecosystem map. Keep diagram paths orthogonal and beneath opaque cards. */
.systems-figure { margin:3rem 0 0; }
.systems-motion-toggle { width:1.1rem; height:1.1rem; accent-color:var(--orange); vertical-align:middle; }
.systems-motion-label { display:inline-flex; align-items:center; min-height:44px; margin:0 0 1.25rem .4rem; font-size:.875rem; cursor:pointer; }
.systems-motion-toggle:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
.systems-motion-toggle:not(:checked) ~ .systems-map .systems-signals path { animation-play-state:paused; opacity:0; }
.systems-map { position:relative; isolation:isolate; display:grid; grid-template-columns:27% 32% 27%; grid-template-areas:"crm hub product" "erp hub work"; column-gap:7%; row-gap:3rem; align-items:stretch; }
.systems-connections { position:absolute; inset:0; width:100%; height:100%; z-index:-1; overflow:visible; pointer-events:none; }
.systems-tracks path { stroke:var(--theme-line); stroke-width:2; vector-effect:non-scaling-stroke; }
.systems-signals path { stroke:var(--orange); stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:9 110; stroke-dashoffset:10; opacity:0; animation:systems-handoff 16s linear infinite; }
.systems-signals path:nth-child(2) { animation-delay:4s; }
.systems-signals path:nth-child(3) { animation-delay:8s; }
.systems-signals path:nth-child(4) { animation-delay:12s; }
@keyframes systems-handoff { 0% { stroke-dashoffset:10; opacity:0; } 3% { opacity:.8; } 22% { stroke-dashoffset:-100; opacity:.8; } 25%,100% { stroke-dashoffset:-110; opacity:0; } }
.systems-node,.systems-hub { min-width:0; background:var(--theme-page); border:1px solid var(--theme-line); padding:1.6rem; border-radius:12px; }
.systems-node { min-height:220px; }
.systems-node h3 { font-size:clamp(1.2rem,1.8vw,1.65rem); line-height:1.2; letter-spacing:-.025em; margin:.9rem 0; }
.systems-node p { font-size:1rem; line-height:1.5; margin:.7rem 0 0; color:var(--theme-muted); }
.systems-node .systems-example { color:var(--theme-text); font-weight:600; }
.systems-map .systems-kicker { margin:0; font-size:.875rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--theme-muted); }
.systems-crm { grid-area:crm; }.systems-erp { grid-area:erp; }.systems-product { grid-area:product; }.systems-work { grid-area:work; }
.systems-hub { grid-area:hub; align-self:center; padding:2rem; background:#111; color:#fffdf8; border-color:var(--orange); box-shadow:0 16px 40px var(--theme-shadow); }
.systems-hub img { display:block; margin:0 0 1rem -12px; }
.systems-hub .systems-kicker { color:var(--orange); }
.systems-hub h3 { font-size:clamp(2.8rem,5vw,4.5rem); line-height:1; margin:.6rem 0 1rem; }
.systems-hub > p:not(.systems-kicker) { font-size:1rem; color:#d5d1c9; }
.systems-hub ul { list-style:none; padding:1rem 0 0; margin:1.5rem 0 0; border-top:1px solid #44413b; font-size:1rem; }
.systems-hub li + li { margin-top:.5rem; }
.systems-figure figcaption { max-width:900px; margin:1.5rem 0 0; font-size:.875rem; line-height:1.6; color:var(--theme-muted); }
.systems-next { display:flex; align-items:center; justify-content:space-between; gap:2rem; border-top:1px solid var(--theme-line); margin-top:2.5rem; padding-top:2rem; }
.systems-next h3 { margin:0 0 .6rem; font-size:1.5rem; }
.systems-next p { margin:0; max-width:660px; font-size:1rem; color:var(--theme-muted); }
.systems-next .button { flex-shrink:0; min-height:48px; font-size:1rem; }
.systems-attribution { margin:1.5rem 0 0; font-size:.875rem; color:var(--theme-muted); }
@media (max-width:900px) {
  .systems-map { display:flex; flex-direction:column; gap:1.5rem; padding-left:1.5rem; }
  .systems-connections { display:none; }
  .systems-map::before { content:""; position:absolute; top:2rem; bottom:2rem; left:0; width:1px; background:var(--theme-line); }
  .systems-node,.systems-hub { position:relative; width:100%; min-height:0; padding:1.5rem; }
  .systems-node::before,.systems-hub::before { content:""; position:absolute; left:calc(-1.5rem - 1px); top:2rem; width:1.5rem; height:1px; background:var(--orange); }
  .systems-node h3 { font-size:1.5rem; }
  .systems-next { align-items:flex-start; flex-direction:column; }
  .systems-next .button { white-space:normal; }
}
@media (prefers-reduced-motion:reduce), (max-width:900px) { .systems-signals,.systems-motion-toggle,.systems-motion-label { display:none; } }