/* Counter-rotation keeps every label upright while its node follows the orbit. */
.ecosystem-motion{container-type:inline-size;isolation:isolate;--eco-period:28s;--orbit-radius:clamp(86px,18vw,184px);--eco-line:#74a6ff;--eco-flash:#e4f3ff;min-width:0}
@supports(width:1cqw){.ecosystem-motion{--orbit-radius:clamp(92px,calc(50cqw - 60px),184px)}}
.ecosystem-motion .eco-ring{width:calc(var(--orbit-radius)*2);height:calc(var(--orbit-radius)*2);animation:eco-ring-turn 48s linear infinite paused}
.ecosystem-motion .ring-inner{width:calc(var(--orbit-radius)*1.48);height:calc(var(--orbit-radius)*1.48);animation-duration:34s;animation-direction:reverse}
.ecosystem-motion .eco-ring:after{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 10deg,transparent 0% 78%,#5f95ff22 86%,var(--eco-line) 98%,#e3f3ff 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));opacity:.8}
.eco-node-orbit{position:absolute;top:50%;left:50%;width:0;height:0;z-index:3;transform:rotate(var(--phase));animation:eco-revolve var(--eco-period) linear infinite paused;pointer-events:none}
.eco-node-anchor{position:absolute;left:var(--orbit-radius);top:0;transform:translate(-50%,-50%);width:max-content}
.ecosystem-motion .eco-node{position:relative;inset:auto;margin:0;width:clamp(112px,25cqw,148px);min-height:56px;padding:13px 16px;font-size:11px;line-height:1.5;gap:10px;justify-content:center;transform:rotate(calc(-1*var(--phase)));animation:eco-upright var(--eco-period) linear infinite paused;box-shadow:0 10px 30px #0002;will-change:transform}
.ecosystem-motion .eco-node>span{min-width:0;overflow-wrap:anywhere}
.ecosystem-motion .eco-node svg{width:18px;height:18px;flex-shrink:0}
.ecosystem-motion .eco-core{position:relative;width:clamp(80px,28cqw,175px);height:clamp(80px,28cqw,175px);transition:border-color .1s,box-shadow .1s;z-index:2}
.ecosystem-motion .eco-core .brand-mark{width:clamp(24px,7cqw,42px);height:clamp(24px,7cqw,42px);margin-bottom:7px}
.ecosystem-motion .eco-core strong{font-size:clamp(11px,3cqw,17px);letter-spacing:2px}
.ecosystem-motion .eco-core>span:last-child{font-size:clamp(4px,1cqw,6px);letter-spacing:1px}
.ecosystem-motion .eco-viewfinder{position:absolute;inset:18px 8px 25px;z-index:5;pointer-events:none;opacity:0;background:linear-gradient(var(--eco-line),var(--eco-line)) left top/24px 1px no-repeat,linear-gradient(var(--eco-line),var(--eco-line)) left top/1px 24px no-repeat,linear-gradient(var(--eco-line),var(--eco-line)) right top/24px 1px no-repeat,linear-gradient(var(--eco-line),var(--eco-line)) right top/1px 24px no-repeat,linear-gradient(var(--eco-line),var(--eco-line)) left bottom/24px 1px no-repeat,linear-gradient(var(--eco-line),var(--eco-line)) left bottom/1px 24px no-repeat,linear-gradient(var(--eco-line),var(--eco-line)) right bottom/24px 1px no-repeat,linear-gradient(var(--eco-line),var(--eco-line)) right bottom/1px 24px no-repeat}
.ecosystem-motion .eco-flash{position:absolute;inset:25px 0 28px;z-index:4;border-radius:28px;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,var(--eco-flash),#d9edff66 45%,transparent 74%);mix-blend-mode:screen}
.ecosystem-motion.is-running :is(.eco-ring,.eco-node-orbit,.eco-node){animation-play-state:running}
.ecosystem-motion.is-exposing :is(.eco-ring,.eco-node-orbit,.eco-node){animation-play-state:paused}
.ecosystem-motion.is-exposing .eco-flash{animation:eco-shutter-flash .38s linear both}
.ecosystem-motion.is-exposing .eco-viewfinder{animation:eco-focus-lock .38s linear both}
.ecosystem-motion.is-exposing .eco-core{border-color:#b9dbff;box-shadow:0 0 0 1px #a8d1ff55,0 0 60px #679fff44}
html[data-theme="light"] .ecosystem-motion{--eco-line:#3278db;--eco-flash:#fff}
html[data-theme="light"] .ecosystem-motion .eco-flash{mix-blend-mode:normal}
html[data-theme="light"] .ecosystem-motion.is-exposing .eco-core{border-color:#659de6;box-shadow:0 0 0 1px #79a7e944,0 0 50px #5995ef33}
.localized-page .connection-copy h2{font-size:clamp(27px,3vw,43px);line-height:1.45;letter-spacing:-.025em;overflow-wrap:anywhere}
.localized-page .connection-points p{line-height:1.8}
@keyframes eco-revolve{from{transform:rotate(var(--phase))}to{transform:rotate(calc(var(--phase) + 360deg))}}
@keyframes eco-upright{from{transform:rotate(calc(-1*var(--phase)))}to{transform:rotate(calc(-1*var(--phase) - 360deg))}}
@keyframes eco-ring-turn{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Two clean exposures, 150 ms apart, followed by a long quiet interval. */
@keyframes eco-shutter-flash{0%,4%,26%,44%,66%,100%{opacity:0}8%{opacity:.46}49%{opacity:.32}}
@keyframes eco-focus-lock{0%,100%{opacity:0;transform:scale(1.015)}8%,44%{opacity:.7;transform:scale(1)}66%{opacity:.32;transform:scale(1)}}
@media(max-width:700px){.ecosystem-motion{--orbit-radius:clamp(80px,calc(50cqw - 40px),184px)}.ecosystem-motion .eco-node{width:clamp(74px,21cqw,92px);padding:8px 6px;min-height:47px;font-size:9px;gap:4px;flex-direction:column;text-align:center}.ecosystem-motion .eco-node svg{width:14px;height:14px}.ecosystem-motion .eco-core{width:clamp(86px,28cqw,110px);height:clamp(86px,28cqw,110px)}.ecosystem-motion .eco-viewfinder{inset:18px 0 6px}.ecosystem-motion .eco-flash{inset:24px 0 16px}.ecosystem-motion .eco-caption{max-width:100%;text-align:center;line-height:1.8;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.ecosystem-motion :is(.eco-ring,.eco-node-orbit,.eco-node){animation:none!important}.ecosystem-motion :is(.eco-flash,.eco-viewfinder){display:none}.ecosystem-motion .eco-core{transition:none}}