/* Motion sits behind the copy and never intercepts links or changes layout. */
.signal-art { position:absolute; inset:0 0 auto; height:520px; pointer-events:none; overflow:hidden; mask-image:linear-gradient(#000 65%,transparent); }
.signal-art svg { width:100%; height:100%; }
.signal-track { fill:none; stroke:url(#signal-blue); stroke-width:1.5; opacity:0; }
.hero-copy-center, .hero-stage { position:relative; }
@media(max-width:700px) { .signal-art { opacity:.45; } }
@media(prefers-reduced-motion:reduce) { .signal-art { display:none; } }

.signal-guide { fill:none; stroke:#245bff; stroke-width:1; opacity:.065; }

/* Each service illustration gets a flowing connector and its own short sequence. */
.motion-ribbon { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.motion-ribbon-guide { fill:none; stroke:#245bff; stroke-width:1; opacity:.12; }
.motion-ribbon-pulse { fill:none; stroke:#245bff; stroke-width:2; stroke-linecap:round; stroke-dasharray:48 520; opacity:0; }
.mini-email > i { transform-origin:left; }
.mini-bars i { transform-origin:bottom; }
.system-card { position:relative; isolation:isolate; }
.system-card::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:radial-gradient(250px circle at var(--glow-x,50%) var(--glow-y,50%),#245bff18,transparent 80%); opacity:0; transition:opacity .3s; }
@media(hover:hover) and (pointer:fine) { .system-card:hover::before { opacity:1; } }
.system-card:focus-visible::before { opacity:1; }
.motion-steps .step { position:relative; padding-top:18px; }
.motion-step-rail { position:absolute; top:0; left:0; right:0; height:2px; background:#245bff15; overflow:hidden; }
.motion-step-rail i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#245bff,#9db4ff); transform:scaleX(0); transform-origin:left; }
@media(prefers-reduced-motion:reduce) {
  .motion-ribbon-pulse, .system-card::before { display:none; }
  .motion-step-rail i { transform:none; }
}

/* Thin trails live in section padding, never behind a card or text block. */
.has-section-trails:not(.scene-card) { position:relative; }
.section-trails { position:absolute; left:0; right:0; bottom:9px; height:18px; overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); }
.section-trails svg { display:block; width:100%; height:100%; }
.section-trail-guide { fill:none; stroke:#245bff; stroke-width:1; opacity:.09; }
.section-trail-pulse { fill:none; stroke-width:1.5; opacity:0; }
.card--blue .section-trail-guide { stroke:#b6c9ff; opacity:.14; }
.card--blue .section-trail-pulse { stroke:#b6c9ff; }
@media(max-width:700px) { .section-trails { opacity:.65; } }
@media(prefers-reduced-motion:reduce) { .section-trails { display:none; } }