/* Three small SVG signals; all other continuous motion uses transform/opacity. */
.hero-grid{grid-template-columns:1.05fr 1fr;gap:42px}
.hero-system{--pointer-x:0px;--pointer-y:0px;aspect-ratio:.96;margin-top:0;background:radial-gradient(ellipse at 50% 52%,#d7e0c8 0,transparent 65%)}
.system-scene{position:absolute;inset:7% 0 9%;transform:translate3d(var(--pointer-x),var(--pointer-y),0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.system-top{left:0;right:0;top:0;font-size:12px}.system-caption{bottom:0;font-size:12px;letter-spacing:1.1px}
.hero-system .system-center{left:32%;top:33%;width:36%;height:auto;aspect-ratio:1;gap:13px;box-shadow:0 0 0 8px var(--paper),0 0 0 9px #adbba0;isolation:isolate}
.hero-system .system-center:before,.hero-system .system-center:after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid #7b945e;z-index:-1;pointer-events:none;animation:core-ripple 6s ease-out infinite}
.hero-system .system-center:after{animation-delay:-3s}
.hero-system .code-brackets{display:flex;justify-content:center;gap:18px;font-size:76px;line-height:1}
.hero-system .code-brackets>span{animation:bracket-breathe 6s ease-in-out infinite;--bracket-distance:-4px}.hero-system .code-brackets>span:last-child{--bracket-distance:4px}
.hero-system .system-center>span:last-child{font-size:12px;line-height:1.5;max-width:120px;letter-spacing:1px}
.hero-system .node-operation{top:13%;left:0;transform:rotate(-5deg)}.hero-system .node-data{top:13%;right:0;transform:rotate(4deg)}.hero-system .node-systems{bottom:8%;left:33%;transform:rotate(-3deg)}
.hero-system .system-node{z-index:2;padding:16px 19px;background:#f7f8f0;transition:border-color .3s,box-shadow .3s}.hero-system .system-node:hover{border-color:#819766;box-shadow:0 8px 24px #1b302b0c}
.hero-system .system-lines{stroke:#a7b49a;stroke-width:1;overflow:visible}.hero-system .system-outer-orbit{stroke:#bdc9ae;stroke-dasharray:1 8}.hero-system .system-inner-orbit{stroke:#aebda0;stroke-dasharray:2 6}.hero-system .system-orbit{stroke:#8fa47a;stroke-dasharray:2 7}.hero-system .orbit-marker{fill:#6e8a48;stroke:none}
.system-orbit-track{transform-origin:center;transform-box:fill-box;animation:context-orbit 70s linear infinite}
.hero-system .system-connector{stroke:#9caf83;stroke-dasharray:1;stroke-dashoffset:0}.hero-system.system-entered .system-connector{animation:connection-draw 1.8s cubic-bezier(.3,0,.2,1) both}
.hero-system .signal-line{stroke:#567d33;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.03 .97;animation:context-signal 7s linear infinite}
.hero-system .signal-data{animation-delay:-2.3s}.hero-system .signal-systems{animation-delay:-4.6s}
.hero-system[data-active='false'] *, .hero-system[data-active='false'] *:before,.hero-system[data-active='false'] *:after{animation-play-state:paused!important}
@keyframes context-orbit{to{transform:rotate(360deg)}}
@keyframes context-signal{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
@keyframes connection-draw{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes core-ripple{0%{transform:scale(1);opacity:.4}75%,100%{transform:scale(1.5);opacity:0}}
@keyframes bracket-breathe{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--bracket-distance))}}
@media(max-width:1050px){.hero-grid{gap:25px}.hero-system .system-node{padding:12px}.hero-system .node-icon{display:none}.hero-system .code-brackets{font-size:60px}.hero-system .system-center{gap:9px}.hero-system .system-center>span:last-child{max-width:105px;letter-spacing:.4px}}
@media(max-width:700px){.hero-grid{grid-template-columns:1fr;gap:12px}.hero-system{aspect-ratio:.94;margin-top:38px;max-width:480px}.system-scene{inset:8% 0 9%;transform:none}.system-top{font-size:12px;letter-spacing:1px}.hero-system .system-center{left:31%;top:34%;width:38%;gap:8px}.hero-system .code-brackets{font-size:57px;gap:15px}.hero-system .system-center>span:last-child{font-size:12px;max-width:108px}.hero-system .node-operation,.hero-system .node-data{top:12%;width:48%;padding:12px;transform:none;align-items:start}.hero-system .node-systems{bottom:5%;left:21%;width:58%;padding:13px;transform:none}.hero-system .system-node small{line-height:1.4}.system-caption{letter-spacing:.7px}.system-orbit-track{animation-duration:90s}.hero-system .signal-line{stroke-width:2;animation-duration:9s}}
@media(max-width:370px){.hero-system .system-node{padding:9px}.hero-system .code-brackets{font-size:47px}.hero-system .system-center>span:last-child{max-width:85px;letter-spacing:0}.hero-system .system-center{gap:5px}.system-caption{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.system-scene{transform:none!important;transition:none}.hero-system *, .hero-system *:before,.hero-system *:after{animation:none!important}.hero-system .system-center:before,.hero-system .system-center:after,.hero-system .signal-line{display:none}.hero-system .system-connector{stroke-dashoffset:0;opacity:1}}
@media(max-width:700px){.hero-system{aspect-ratio:.78}.hero-system .system-center{top:37%}.hero-system .node-operation,.hero-system .node-data{top:7%}.hero-system .node-systems{bottom:3%}}
@media(max-width:370px){.hero-system{aspect-ratio:.70}}
/* Cards visibly converge, while the section stays in ordinary document flow. */
.flow-node{--card-x:0px;--card-y:0px;--card-angle:0deg;transform:translate3d(calc(var(--card-x)*(1 - var(--flow-progress))),calc(var(--card-y)*(1 - var(--flow-progress))),0) rotate(calc(var(--card-angle)*(1 - var(--flow-progress)))) scale(calc(.92 + var(--flow-progress)*.08))}
.flow-input{--card-x:-40px;--card-y:-62px;--card-angle:-12deg}
.flow-data{--card-x:-48px;--card-y:62px;--card-angle:10deg}
.flow-api{--card-x:44px;--card-y:-58px;--card-angle:11deg}
.flow-result{--card-x:48px;--card-y:62px;--card-angle:-10deg}
.flow-core{transform:scale(calc(.85 + var(--flow-progress)*.15))}
@media(max-width:1050px){.flow-node{--card-x:0px;--card-angle:0deg}}
@media(max-width:700px){.flow-section{--flow-progress:var(--flow-motion-progress,1)!important}.flow-input,.flow-api{--card-y:-36px}.flow-data,.flow-result{--card-y:36px}.flow-core{transform:scale(calc(.92 + var(--flow-progress)*.08))}}
@media(prefers-reduced-motion:reduce){.flow-section{--flow-progress:1!important}.flow-node,.flow-core{transform:none!important}}