/* Decorative, full-bleed workflow behind the centered homepage identity. */
.hero-section {
  isolation: isolate;
  min-height: min(820px, max(680px, calc(90vh - var(--header-h))));
  padding-block: 84px 100px;
  background: radial-gradient(ellipse at 4% 30%, #e7f3fd, transparent 42%), radial-gradient(ellipse at 96% 66%, #e4f0fc, transparent 45%), #fbfdff;
}
.hero-workflow::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse 42% 64% at 50% 47%, #fff 0%, #ffffffed 38%, #ffffff9c 67%, transparent 100%), linear-gradient(transparent 88%, #fff);
  pointer-events: none;
}
.hero-section .hero-container { z-index: 2; }
.hero-section .hero-content { width: 100%; max-width: 850px; margin-inline: auto; }
.hero-workflow { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.wf-art { display: block; width: 100%; height: 100%; opacity: .68; }
.wf-network-mobile { display: none; }
.wf-network-edge { fill: none; stroke: #6aafd1; stroke-width: .8; opacity: .36; }
.wf-junction-halo { fill: #71c6e2; opacity: .16; }
.wf-junction-core { fill: #4a9dc4; opacity: .7; }
.wf-junction { animation: wf-synapse 5s ease-in-out infinite; animation-delay: var(--node-delay, 0s); animation-play-state: paused; }
.hero-workflow.is-running .wf-junction { animation-play-state: running; }
.wf-track { fill: none; stroke: #70a9cc; stroke-width: 1; opacity: .65; transition: stroke .6s; }
.wf-track-soft { fill: none; stroke: #88d1e8; stroke-width: 4; opacity: .09; }
.wf-track.is-active { stroke: #3d9dc7; opacity: .85; }
.wf-orbit { fill: none; stroke: #7baed4; stroke-width: 1; opacity: .3; }
.wf-orbit-outer { stroke-dasharray: 2 7; opacity: .25; }
.wf-node .wf-aura { opacity: .32; transition: opacity .7s; }
.wf-node .wf-core { stroke: #89b5d6; stroke-width: 1; transition: stroke .6s; }
.wf-node .wf-icon { color: #32719f; transition: color .6s; }
.wf-node.is-active .wf-core { stroke: #4388b7; }
.wf-node.is-active .wf-aura { opacity: .8; }
.wf-node.is-active .wf-icon { color: #01529a; }
.wf-node.is-active .wf-orbit { opacity: .6; }
.wf-node[data-flow-node="voice"] .wf-icon { color: #2d8293; }
.wf-signal { stroke: #358db4; stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: wf-listen 1.3s ease-in-out infinite alternate; animation-delay: var(--wave-delay, 0s); animation-play-state: paused; }
.hero-workflow.is-running .wf-node[data-flow-node="voice"].is-active .wf-signal { animation-play-state: running; }
.wf-packet { fill: #3b9dc6; stroke: #e5fbff; stroke-width: .6; opacity: 0; }
.wf-packet-halo { fill: #8cddec; fill-opacity: .35; opacity: 0; }
.wf-packet-trail { fill: #65c6dd; opacity: 0; }
@keyframes wf-listen { from { transform: scaleY(.4); } to { transform: scaleY(1.15); } }
@keyframes wf-synapse { 0%, 100% { opacity: .5; } 45% { opacity: 1; } }
@media (max-width: 700px) {
  .hero-section { min-height: 720px; padding-block: 72px 90px; }
  .hero-workflow::after { background: radial-gradient(ellipse 65% 62% at 50% 45%, #fffffffa 15%, #ffffffd4 60%, #ffffff33 100%), linear-gradient(transparent 88%, #fff); }
  .wf-art { opacity: .52; }
  .wf-network-desktop { display: none; }
  .wf-network-mobile { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-signal, .wf-junction { animation: none; }
  .wf-track, .wf-node .wf-aura, .wf-node .wf-core, .wf-node .wf-icon { transition: none; }
}