/* Shared flow artwork; homepage layout stays scoped to .hero--flows. */
.hero--flows { padding: 44px 0 64px; min-height: calc(100svh - 84px); overflow: hidden; }
.hero--flows .hero-grid { grid-template-columns: minmax(0,.82fr) minmax(0,1.4fr); gap: 28px; }
.hero--flows .hero-copy { position: relative; z-index: 1; }
.hero--flows .hero-logo-wrap { max-width: 340px; margin-bottom: 30px; }
.hero--flows .hero-lead { max-width: 24ch; font-size: clamp(1.2rem,1.8vw,1.55rem); }
.hero--flows .hero-support { font-size: .95rem; line-height: 1.8; }
.hero--flows .eyebrow { font-size: .64rem; letter-spacing: .17em; color: #8e9caf; margin-bottom: 28px; }
.hero--flows .spaced-actions { gap: 12px; }
.hero--flows .cta-button { background: #c7dcff; color: #09101c; font-size: .84rem; border-color: #c7dcff; padding: 0 20px; }
.hero--flows .secondary-button { font-size: .82rem; border-radius: 999px; }
.flow-visual { margin: 0 -20px 0 0; min-width: 0; }
.flow-scene { position: relative; isolation: isolate; }
.flow-ambient { position: absolute; inset: 0 -14%; z-index: -1; background: radial-gradient(ellipse at 50% 49%,#09445955,transparent 58%),radial-gradient(ellipse at 77% 65%,#4930801a,transparent 48%); }
.flow-stage { position: relative; aspect-ratio: 1000/900; container-type: inline-size; }
.flow-stage::before { content: ''; position: absolute; inset: 12% -10% -4%; background-image: linear-gradient(#67b2d40a 1px,transparent 1px),linear-gradient(90deg,#67b2d40a 1px,transparent 1px); background-size: 46px 46px; transform: perspective(500px) rotateX(52deg); mask-image: radial-gradient(ellipse,#0009,transparent 68%); }
.flow-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-rails path { stroke: var(--flow-color); stroke-width: 2.5; opacity: .55; filter: drop-shadow(0 0 3px var(--flow-color)); }
.flow-streams path { stroke: var(--flow-color); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 96; filter: drop-shadow(0 0 5px var(--flow-color)); animation: flow-converge 3.8s linear infinite; animation-delay: var(--flow-delay); }
.flow-orbit { position: absolute; left: 50%; top: 49%; border: 1px solid #65b3ce12; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.flow-orbit--outer { width: 70%; aspect-ratio: 1; }
.flow-orbit--inner { width: 48%; aspect-ratio: 1; border-style: dashed; border-color: #65b3ce1a; }
.flow-node { position: absolute; left: var(--node-x); top: var(--node-y); transform: translate(-50%,-50%); width: 24%; padding: 13px 12px 10px; border: 1px solid color-mix(in srgb,var(--flow-color) 42%,#152431); border-radius: 10px; background: linear-gradient(145deg,#111e2bf5,#080e18fa); box-shadow: 0 12px 28px #0006,0 0 22px color-mix(in srgb,var(--flow-color) 8%,transparent),inset 0 1px 0 #ffffff06; }
.flow-node-heading { display: flex; align-items: center; gap: 7px; color: #e4ecf8; font-size: clamp(10px,1.1vw,13px); font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.flow-node-heading svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--flow-color); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.flow-node-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--flow-color); margin-left: auto; opacity: .7; }
.flow-node-detail { display: block; margin-top: 7px; font-size: clamp(7px,.72vw,9px); color: #778a9e; white-space: nowrap; }
.flow-node-art { height: 37px; margin-top: 9px; position: relative; overflow: hidden; border-radius: 3px; }
.flow-landscape { display: block; height: 29px; background: radial-gradient(ellipse at 61% 38%,#efd6a0 0%,#d9a77c 8%,#78959f 28%,#24394f 65%); position: relative; overflow: hidden; }
.flow-landscape::after { content: ''; position: absolute; inset: 14% -5% -15%; background: linear-gradient(150deg,#526c83,#172331 65%); clip-path: polygon(0 80%,22% 10%,37% 67%,55% 32%,72% 80%,86% 40%,100% 65%,100% 100%,0 100%); }
.flow-player-track { display: block; height: 2px; background: linear-gradient(90deg,var(--flow-color) 60%,#1d2a3a 60%); margin-top: 5px; }
.flow-filmstrip { display: flex; height: 18px; gap: 3px; }
.flow-filmstrip i { flex: 1; background: linear-gradient(150deg,#7396aa,#283b58 47%,#141e31 48%,#35475a); border-radius: 2px; }
.flow-filmstrip i:nth-child(2) { filter: hue-rotate(25deg); }
.flow-timeline { display: grid; gap: 2px; margin-top: 4px; }
.flow-timeline i { height: 3px; width: 86%; background: #537ed7; border-radius: 1px; }
.flow-timeline i:nth-child(2) { width: 65%; margin-left: 18%; background: #8771d5; }
.flow-timeline i:nth-child(3) { width: 78%; background: #40bba9; }
.flow-color-wheels { display: flex; justify-content: space-around; padding: 2px 8px; }
.flow-color-wheels i { width: 25px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#5a98d8,#9c62e4,#eb669e,#e8ac63,#63d5c1,#5a98d8); position: relative; }
.flow-color-wheels i::after { content: ''; position: absolute; inset: 3px; border-radius: inherit; background: #101b29; }
.flow-scope { display: block; height: 5px; margin-top: 3px; background: repeating-linear-gradient(90deg,#5d82af44 0 3px,transparent 3px 6px); }
.flow-wave { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.flow-wave i { width: 3px; height: var(--bar); border-radius: 2px; background: linear-gradient(#55e1c5,#276d80); }
.flow-deliveries { display: flex; gap: 6px; height: 100%; }
.flow-deliveries i { display: flex; align-items: center; justify-content: center; flex: 1; border: 1px solid #c17dff3d; border-radius: 4px; color: #c2b0d9; font-size: 7px; font-style: normal; background: #c17dff08; }
.flow-avatars { display: flex; align-items: center; justify-content: center; gap: 7px; height: 100%; }
.flow-avatars i { width: 25px; aspect-ratio: 1; border-radius: 50%; border: 1px solid #58d6ff66; background: #153347; color: #8ed2e8; font-size: 8px; font-style: normal; text-align: center; line-height: 25px; }
.flow-avatars i:nth-child(2n) { border-color: #9b7de899; background: #292241; color: #b6a2e2; }
.flow-transfer-bars,.flow-checks { display: grid; gap: 6px; padding: 1px 0; }
.flow-transfer-bars i { height: 7px; border-radius: 2px; background: linear-gradient(90deg,#41e4cb99 70%,#41e4cb12 70%); }
.flow-transfer-bars i:nth-child(2) { background: linear-gradient(90deg,#41e4cb77 45%,#41e4cb12 45%); }
.flow-transfer-bars i:nth-child(3) { background: linear-gradient(90deg,#41e4cb55 84%,#41e4cb12 84%); }
.flow-checks i { height: 7px; background: linear-gradient(90deg,#ffb26d88 0 5%,transparent 5% 12%,#ffb26d25 12% 80%,transparent 80%); border-radius: 1px; }
.flow-checks i:nth-child(2) { opacity: .65; }
.flow-checks i:nth-child(3) { opacity: .4; }
.flow-hub { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); width: 32%; padding: 18px 14px 14px; text-align: center; border: 1px solid #62d4f5a1; border-radius: 14px; background: linear-gradient(150deg,#192b3bf5,#0a1222 70%); box-shadow: 0 0 0 5px #57d6f707,0 0 55px #40c9f029,0 20px 45px #0009; }
.flow-hub::before { content: ''; position: absolute; inset: -8px; border-radius: 21px; border: 1px solid #6bc6ec38; animation: flow-arrival 3.8s ease-out infinite; pointer-events: none; }
.flow-hub-top { display: flex; align-items: center; justify-content: center; gap: 5px; color: #8fb3c9; font-size: clamp(5px,.55vw,7px); letter-spacing: .09em; white-space: nowrap; }
.flow-hub-signal { width: 4px; height: 4px; border-radius: 50%; background: #67e4ca; box-shadow: 0 0 6px #67e4ca88; }
.flow-hub img { width: 74%; height: auto; margin: 19px auto 16px; filter: drop-shadow(0 0 12px #b37dff30); }
.flow-hub-divider { height: 1px; background: linear-gradient(90deg,transparent,#74a9c442,transparent); }
.flow-hub-label { display: block; font-size: clamp(7px,.83vw,10px); color: #c0d4e2; margin: 10px 0; }
.flow-hub-channels { display: flex; gap: 4px; justify-content: center; }
.flow-hub-channels i { width: 12px; height: 3px; background: #62d4f5; border-radius: 2px; opacity: .35; animation: flow-channel 3.8s ease-in-out infinite; }
.flow-hub-channels i:nth-child(3n) { background: #bd8bf1; animation-delay: -.8s; }
.flow-hub-channels i:nth-child(2n) { background: #41e4cb; animation-delay: -1.6s; }
.flow-caption { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 6% 0; border-top: 1px solid #8badc31c; padding-top: 16px; color: #8196a9; font-size: .72rem; }
.flow-caption strong { color: #b8cadb; font-weight: 500; }
.flow-caption-dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #58d6ff; box-shadow: 0 0 8px #58d6ff77; }
.flow-toggle { display: inline-flex; align-items: center; gap: 6px; background: #111c284d; color: #a0b4c7; border: 1px solid #90b3cd26; border-radius: 5px; padding: 5px 8px; font: inherit; flex: none; }
.flow-toggle:hover { color: #e0eeff; border-color: #90b3cd66; }
.flow-toggle[hidden] { display: none; }
.flow-visual.is-paused *,.flow-visual.is-paused *::before,.flow-visual.is-dormant *,.flow-visual.is-dormant *::before { animation-play-state: paused !important; }
@keyframes flow-converge { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes flow-arrival { 0% { opacity: .65; transform: scale(.97); } 80%,100% { opacity: 0; transform: scale(1.14); } }
@keyframes flow-channel { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@media (min-width:1500px) { .hero--flows .hero-grid { width: min(1360px,calc(100vw - 80px)); } }
@media (min-width:801px) and (max-height:780px) {
  .hero--flows { padding-top: 24px; padding-bottom: 32px; }
  .flow-visual { width: 100%; max-width: min(100%,calc((100svh - 196px)*1.1111)); justify-self: end; }
  .hero--flows .hero-logo-wrap { max-width: 300px; }
  .flow-node { padding: 10px 8px 8px; }
  .flow-node-heading { font-size: 10px; gap: 4px; }
  .flow-node-heading svg { width: 13px; height: 13px; }
  .flow-node-detail { font-size: 7px; }
  .flow-hub-top { font-size: 5px; }
  .flow-hub-label { font-size: 8px; }
}
@media (max-width:1050px) and (min-width:801px) {
  .hero--flows .hero-grid { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 16px; }
  .flow-node { padding: 10px 8px 8px; }
  .flow-node-heading { font-size: 10px; gap: 4px; }
  .flow-node-heading svg { width: 13px; height: 13px; }
  .flow-node-detail { font-size: 6.5px; }
  .hero--flows .hero-logo-wrap { max-width: 270px; }
}
@media (max-width:800px) {
  .hero--flows { padding: 48px 0 56px; min-height: auto; }
  .hero--flows .hero-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .hero--flows .hero-copy { max-width: 560px; }
  .hero--flows .hero-logo-wrap { max-width: 260px; margin-bottom: 22px; }
  .hero--flows .hero-lead { max-width: none; }
  .hero--flows .hero-support { margin-bottom: 24px; }
  .flow-visual { margin: 0; width: 100%; max-width: 650px; justify-self: center; }
  .flow-node-heading { font-size: clamp(8px,2.3vw,13px); gap: 5px; }
  .flow-node-detail { font-size: clamp(6px,1.25vw,9px); }
  .flow-hub-top { font-size: clamp(5px,1vw,7px); }
  .flow-hub-label { font-size: clamp(6px,1.7vw,10px); }
}
@media (max-width:480px) {
  .hero--flows { padding-top: 36px; }
  .hero--flows .eyebrow { margin-bottom: 22px; font-size: .59rem; }
  .hero--flows .hero-logo-wrap { max-width: 230px; }
  .hero--flows .hero-support { font-size: .88rem; }
  .hero--flows .spaced-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero--flows .cta-button,.hero--flows .secondary-button { font-size: .72rem; padding: 0 8px; min-height: 46px; }
  .flow-node { padding: 8px 6px; border-radius: 6px; width: 25%; }
  .flow-node-heading { font-size: 8px; gap: 4px; }
  .flow-node-heading svg { width: 11px; height: 11px; }
  .flow-node-dot,.flow-node-detail { display: none; }
  .flow-node-art { height: 23px; margin-top: 6px; }
  .flow-landscape { height: 18px; }
  .flow-player-track { margin-top: 3px; height: 1px; }
  .flow-filmstrip { height: 11px; }
  .flow-timeline { gap: 1px; margin-top: 3px; }
  .flow-timeline i { height: 2px; }
  .flow-color-wheels { padding: 0; }
  .flow-color-wheels i { width: 17px; }
  .flow-color-wheels i::after { inset: 2px; }
  .flow-scope { height: 3px; margin-top: 2px; }
  .flow-wave { gap: 1px; }
  .flow-wave i { width: 2px; }
  .flow-deliveries { gap: 3px; }
  .flow-deliveries i { font-size: 4.5px; }
  .flow-avatars { gap: 4px; }
  .flow-avatars i { width: 15px; font-size: 5px; line-height: 15px; }
  .flow-transfer-bars,.flow-checks { gap: 4px; }
  .flow-transfer-bars i,.flow-checks i { height: 4px; }
  .flow-hub { width: 33%; padding: 10px 6px 9px; border-radius: 9px; }
  .flow-hub-top { font-size: 4.4px; letter-spacing: .04em; gap: 3px; }
  .flow-hub img { margin: 12px auto 10px; width: 80%; }
  .flow-hub-label { margin: 6px 0; font-size: 6px; }
  .flow-hub-channels { gap: 3px; }
  .flow-hub-channels i { width: 7px; height: 2px; }
  .flow-caption { margin: 10px 0 0; padding-top: 12px; font-size: .62rem; }
}
@media (max-width:360px) {
  .flow-node-heading { font-size: 7px; gap: 3px; }
  .flow-node-heading svg { width: 9px; height: 9px; }
}
@media (prefers-reduced-motion:reduce) {
  .flow-visual *,.flow-visual *::before { animation: none !important; }
  .flow-streams path { stroke-dasharray: none; stroke-width: 1.5; opacity: .45; }
  .flow-hub::before { opacity: .3; }
  .flow-toggle { display: none; }
}