.hero-visual {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .22s ease, box-shadow .22s ease;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(circle at var(--glow-x,75%) var(--glow-y,25%),rgba(55,184,196,.2),transparent 25%);
  opacity: .8;
}

.hero-visual:hover { box-shadow: 0 38px 90px rgba(15,53,77,.28); }
.hero-visual > * { position: relative; z-index: 1; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg,#e7a72b,#37b8c4,#0c80bc);
  pointer-events: none;
}

.nav-links > a:not(.nav-cta) { position: relative; }
.nav-links > a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:#e7a72b; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.nav-links a.current:not(.nav-cta) { color:#0c80bc; }
.nav-links a.current:not(.nav-cta)::after { transform:scaleX(1); }

.hero-visual .visual-topbar i::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#70e4b4; box-shadow:0 0 0 0 rgba(112,228,180,.55); animation:livePulse 2s infinite; }
@keyframes livePulse { 65% { box-shadow:0 0 0 7px rgba(112,228,180,0); } 100% { box-shadow:0 0 0 0 rgba(112,228,180,0); } }

.lifecycle article { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.lifecycle article:hover { transform:translateY(-7px); box-shadow:0 18px 45px rgba(10,41,66,.14); border-color:#6bd2d8; }
.lifecycle article:hover b { color:#e7a72b; }
.unit-mark { width:108px; height:58px; margin-top:20px; padding:7px 8px 5px; border:1px solid #0a2942; border-radius:2px; background:#fff; text-align:center; box-shadow:5px 5px 0 #e4f2f4; }
.unit-mark::before,.unit-mark::after { content:none; display:none; }
.unit-mini-barcode { display:block; height:27px; width:100%; background:repeating-linear-gradient(90deg,#071d33 0 2px,transparent 2px 4px,#071d33 4px 5px,transparent 5px 8px); }
.unit-mark small { display:block; margin-top:5px; color:#071d33; font:700 7px "DM Sans",sans-serif; letter-spacing:.04em; line-height:1; }
.cap-row { transition:padding .25s ease,background .25s ease; }
.cap-row:hover { background:#f1f7f8; padding-left:16px; padding-right:16px; }

.region-group { border:1px solid transparent; transition:transform .22s ease,opacity .22s ease,border-color .22s ease,box-shadow .22s ease; cursor:default; }
.architecture-regional-groups.has-selection .region-group:not(.active) { opacity:.48; transform:scale(.985); }
.region-group.active { border-color:rgba(71,200,208,.75); box-shadow:0 18px 45px rgba(2,17,29,.25); transform:translateY(-4px); }
.region-group:focus-visible { outline:2px solid #e7a72b; outline-offset:4px; }
.region-group.active .region-plants article { background:rgba(55,184,196,.08); border-color:rgba(71,200,208,.4); }
.region-plant-connector { position:relative; overflow:hidden; }
.region-plant-connector::before { content:""; position:absolute; left:16.666%; right:16.666%; top:14px; height:1px; background:#47c8d0; }
.region-plant-connector::after { content:""; position:absolute; left:50%; top:0; width:1px; height:14px; background:#47c8d0; }
.region-plant-connector > span { position:absolute; top:14px; bottom:0; width:1px; background:#47c8d0; overflow:hidden; }
.region-plant-connector > span:nth-child(1) { left:16.666%; }
.region-plant-connector > span:nth-child(2) { left:50%; }
.region-plant-connector > span:nth-child(3) { left:83.333%; }
.region-plant-connector > span::after,.region-plant-connector > em::after { content:""; position:absolute; left:-2px; top:-7px; width:5px; height:8px; border-radius:4px; background:#e7a72b; box-shadow:0 0 9px rgba(231,167,43,.8); opacity:0; }
.region-plant-connector > em { position:absolute; left:50%; top:0; width:1px; height:14px; overflow:hidden; }
.region-group.active .region-plant-connector > span::after,.region-group.active .region-plant-connector > em::after { opacity:1; animation:flowDown 1.25s linear infinite; }
.region-group.active .region-plant-connector > span:nth-child(2)::after { animation-delay:.16s; }
.region-group.active .region-plant-connector > span:nth-child(3)::after { animation-delay:.32s; }
.flow-path { position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; pointer-events:none; }
.flow-path path { fill:none; stroke:#e7a72b; stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-dasharray:7 93; stroke-dashoffset:100; filter:drop-shadow(0 0 4px rgba(231,167,43,.9)); animation:flowFullPath 3.1s linear infinite; }
.flow-path path:nth-child(2) { animation-delay:.16s; }
.flow-path path:nth-child(3) { animation-delay:.32s; }
.flow-path path:nth-child(4) { animation-delay:.48s; }
.flow-path path:nth-child(5) { animation-delay:.64s; }
.flow-path path:nth-child(6) { animation-delay:.8s; }
.source-global-flow > span::after,.source-global-flow > em::after,.global-region-flow > span::after,.global-region-flow > em::after { display:none; }
.region-plant-connector .flow-path { opacity:.72; transition:opacity .18s ease,filter .18s ease; }
.region-group.active .region-plant-connector .flow-path { opacity:1; filter:brightness(1.22); }
.region-group.active .region-plant-connector > span::after,.region-group.active .region-plant-connector > em::after { opacity:0; animation:none; }

.architecture-source-heading { display:grid; justify-items:center; gap:3px; margin:0 0 18px; text-align:center; }
.architecture-source-heading small { color:#55d4dc; font:700 9px "Manrope",sans-serif; letter-spacing:.16em; }
.architecture-source-heading strong { color:#fff; font:700 20px "Manrope",sans-serif; }
.architecture-source-heading span { color:#9db2bd; font-size:10px; }
.source-global-flow { position:relative; height:52px; margin-bottom:0; }
.source-global-flow::before { content:""; position:absolute; left:8.333%; right:8.333%; top:18px; height:1px; background:#47c8d0; }
.source-global-flow::after { content:""; position:absolute; left:50%; top:18px; bottom:0; width:1px; background:#47c8d0; }
.source-global-flow > span { position:absolute; top:0; height:18px; width:1px; background:#47c8d0; overflow:hidden; }
.source-global-flow > span:nth-child(1) { left:8.333%; }.source-global-flow > span:nth-child(2) { left:25%; }.source-global-flow > span:nth-child(3) { left:41.667%; }.source-global-flow > span:nth-child(4) { left:58.333%; }.source-global-flow > span:nth-child(5) { left:75%; }.source-global-flow > span:nth-child(6) { left:91.667%; }
.source-global-flow > span::after,.source-global-flow > em::after,.global-region-flow > span::after,.global-region-flow > em::after { content:""; position:absolute; left:-2px; top:-8px; width:5px; height:9px; border-radius:4px; background:#e7a72b; box-shadow:0 0 10px rgba(231,167,43,.85); animation:flowDown 1.45s linear infinite; }
.source-global-flow > span:nth-child(2)::after,.global-region-flow > span:nth-child(2)::after { animation-delay:.18s; }.source-global-flow > span:nth-child(3)::after,.global-region-flow > span:nth-child(3)::after { animation-delay:.36s; }.source-global-flow > span:nth-child(4)::after { animation-delay:.54s; }.source-global-flow > span:nth-child(5)::after { animation-delay:.72s; }.source-global-flow > span:nth-child(6)::after { animation-delay:.9s; }
.source-global-flow > em { position:absolute; left:50%; top:18px; bottom:0; width:1px; overflow:hidden; }

.mls-output-flow { height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#56d4dc; }
.mls-output-flow span { font:700 8px "Manrope",sans-serif; letter-spacing:.14em; }
.mls-output-flow b { color:#e7a72b; font-size:20px; line-height:1; animation:dataDrop 1.7s ease-in-out infinite; }
.global-region-flow { position:relative; height:40px; }
.global-region-flow::before { content:""; position:absolute; top:14px; left:16.666%; right:16.666%; height:1px; background:#47c8d0; }
.global-region-flow::after { content:""; position:absolute; top:0; left:50%; width:1px; height:14px; background:#47c8d0; }
.global-region-flow > span { position:absolute; top:14px; bottom:0; width:1px; background:#47c8d0; overflow:hidden; }
.global-region-flow > span:nth-child(1) { left:16.666%; }.global-region-flow > span:nth-child(2) { left:50%; }.global-region-flow > span:nth-child(3) { left:83.333%; }
.global-region-flow > em { position:absolute; left:50%; top:0; height:14px; width:1px; overflow:hidden; }

@keyframes sourceFlow { to { left:105%; } }
@keyframes dataDrop { 0%,100% { transform:translateY(-2px); opacity:.55; } 50% { transform:translateY(3px); opacity:1; } }
@keyframes flowDown { to { top:110%; } }
@keyframes flowFullPath { to { stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-visual,.lifecycle article,.cap-row,.region-group { transition:none; }
  .hero-visual .visual-topbar i::before,.region-plant-connector span::after,.region-plant-connector em::after,.source-global-flow span::after,.source-global-flow em::after,.global-region-flow span::after,.global-region-flow em::after,.mls-output-flow b,.flow-path path { animation:none; }
}

@media (max-width:1000px) {
  .global-region-flow { display:none; }
  .architecture-source-heading strong { font-size:17px; }
}
