.hero.hero-refined{align-items:start;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2rem;padding-block:3rem;border-bottom:1px solid var(--line)}
.hero.hero-refined+#expertise{padding-top:4rem}
.hero .system-flow .system-node{position:relative;padding:.7rem 1.1rem;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.hero .system-flow .system-node h3{font-size:1.0625rem;line-height:1.5;letter-spacing:-.01em}
.hero .system-flow .system-node p{font-size:1rem;line-height:1.6;margin-top:.3rem;color:var(--muted)}
.flow-connector{position:relative;height:26px;width:2px;margin-inline:auto;background:#626a74}
.flow-connector::after{content:"";position:absolute;top:0;left:-.5px;width:3px;height:9px;border-radius:2px;background:var(--accent);opacity:0}
@media(prefers-reduced-motion:no-preference){
 .system-flow.is-playing .system-node{animation:flow-outline 1.2s ease-in-out both}
 .system-flow.is-playing .flow-exchange{animation-delay:1s}
 .system-flow.is-playing .flow-infra{animation-delay:2s}
 .system-flow.is-playing .flow-connector::after{animation:flow-travel .75s ease-in-out both}
 .system-flow.is-playing .flow-first::after{animation-delay:.65s}
 .system-flow.is-playing .flow-second::after{animation-delay:1.65s}
}
@keyframes flow-outline{0%,100%{border-color:var(--line)}45%{border-color:var(--accent)}}
@keyframes flow-travel{0%{transform:translateY(0);opacity:0}20%,80%{opacity:1}100%{transform:translateY(17px);opacity:0}}
@media(max-width:850px){.hero.hero-refined{grid-template-columns:1fr;gap:2rem;padding-block:2.5rem}.hero.hero-refined+#expertise{padding-top:3rem}}
@media(max-width:520px){.hero.hero-refined{padding-block:2rem}.hero.hero-refined+#expertise{padding-top:2.5rem}}