/* Sustained hero motion starts automatically with the page. */
.hero { --hero-play-state: running; }
.hero.motion-paused { --hero-play-state: paused; }
.hero-grid { position: relative; z-index: 1; }
.hero-title-line { display: block; }
.hero-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint; }
/* One continuous field spans the illustration and the copy, without a panel edge. */
.hero-atmosphere::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--connector) .8px, transparent .8px); background-size: 28px 28px; opacity: .35; mask-image: linear-gradient(110deg, transparent, #000 60%, transparent); }
.hero-network { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; mask-image: linear-gradient(90deg, #0006, #000); }
.hero-network-tracks { stroke: var(--connector); stroke-width: 1; opacity: .55; }
.hero-network-flow { stroke: var(--purple); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 180; opacity: .7; }
.hero-network-flow use { animation: network-stream 24s linear infinite; animation-play-state: var(--hero-play-state); }
.hero-network-flow use:nth-child(2) { stroke: #418cd9; animation-duration: 30s; animation-delay: -10s; }
.hero-network-flow use:nth-child(3) { stroke: #42ac90; animation-duration: 28s; animation-delay: -18s; }
.hero-copy { isolation: isolate; }
.hero-copy::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--page-tint) 96%, transparent) 20%, transparent 75%); pointer-events: none; }
.aurora { position: absolute; width: 60%; height: 90%; border-radius: 50%; opacity: .6; }
.aurora-violet { top: 5%; right: -10%; background: radial-gradient(ellipse, var(--hero-purple), transparent 70%); }
.aurora-blue { top: -30%; right: 15%; background: radial-gradient(ellipse, var(--hero-blue), transparent 65%); }
.hero-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a36ae0; opacity: .5; box-shadow: 0 0 0 7px #a36ae010; }
.spark-one { top: 18%; left: 47%; }
.spark-two { bottom: 19%; right: 8%; background: #4eafdd; }
.spark-three { top: 64%; left: 55%; width: 5px; height: 5px; }
.hero.is-animated .hero-title-line { animation: title-unfold 1s cubic-bezier(.2,.75,.2,1) both; }
.hero.is-animated .hero-title-line:nth-child(2) { animation-delay: .12s; }
.hero.is-animated .hero-title-line:nth-child(3) { animation-delay: .24s; }
.hero.is-animated .gradient-text { display: inline-block; background-size: 240% 100%; animation: headline-spectrum 4.5s ease-in-out infinite alternate; }
.hero.is-animated .aurora-violet { animation: aurora-drift 9s ease-in-out infinite alternate; }
.hero.is-animated .aurora-blue { animation: aurora-drift 12s ease-in-out -5s infinite alternate-reverse; }
.hero.is-animated .hero-spark { animation: spark-drift 5s ease-in-out infinite alternate; }
.hero.is-animated .spark-two { animation-delay: -2s; animation-duration: 6s; }
.hero.is-animated .spark-three { animation-delay: -3s; animation-duration: 4.5s; }
.hero-actions .button-primary { position: relative; overflow: hidden; }
.hero-actions .button-primary::after { content: ''; position: absolute; inset: -40% auto -40% -60%; width: 35%; background: linear-gradient(90deg, transparent, #ffffff40, transparent); transform: skewX(-20deg); pointer-events: none; opacity: 0; }
.hero.is-animated .hero-actions .button-primary::after { animation: button-sheen 5s ease-in-out infinite; }
.ecosystem-core { transform: translate(-50%, -50%) perspective(800px) rotateX(var(--pointer-y, 0deg)) rotateY(var(--pointer-x, 0deg)); transition: transform .25s ease-out; }
.ecosystem.is-animated .app-node { animation-duration: 4.4s; }
.node-sales { --float-x: -6px; --float-y: -17px; }
.node-finance { --float-x: 7px; --float-y: -14px; }
.node-inventory { --float-x: -7px; --float-y: 15px; }
.node-operations { --float-x: 6px; --float-y: 17px; }
.ecosystem.is-animated .node-finance { animation-duration: 5.2s; }
.ecosystem.is-animated .node-inventory { animation-duration: 4.8s; }
.ecosystem.is-animated .node-operations { animation-duration: 5.6s; }
.ecosystem.is-animated .orbit-one { animation-duration: 11s; }
.ecosystem.is-animated .orbit-two { animation-duration: 16s; }
.orbit-satellite { position: absolute; display: block; width: 8px; height: 8px; border-radius: 50%; background: #a461e2; box-shadow: 0 0 0 5px #a461e217; }
.satellite-one { top: -4px; left: 50%; background: #4bb8ee; box-shadow: 0 0 0 5px #4bb8ee17; }
.satellite-two { left: -4px; top: 50%; }
.satellite-three { bottom: -4px; left: 50%; background: #65bfaa; box-shadow: 0 0 0 5px #65bfaa17; }
.connection-pulses path { stroke-width: 4; stroke-dasharray: .045 .2; }
.signal-sales { stroke: #a04ddc; }
.signal-finance { stroke: #418cd9; }
.signal-inventory { stroke: #d1974a; }
.signal-operations { stroke: #42ac90; }
.ecosystem.is-animated .connection-pulses path { animation-duration: 2.6s; }
.ecosystem.is-animated .ecosystem-core img { animation: logo-hover 4.5s ease-in-out infinite; }
.core-ripples { position: absolute; left: 50%; top: 48%; width: 230px; height: 230px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.core-ripples span { position: absolute; inset: 0; border: 1px solid #ad76e1; border-radius: 50%; opacity: 0; }
.ecosystem.is-animated .core-ripples span { animation: core-ripple 5s ease-out infinite; }
.ecosystem.is-animated .core-ripples span:nth-child(2) { animation-delay: -2.5s; }
.connection-meter { display: flex; align-items: center; gap: 2px; height: 14px; margin-left: 2px; }
.connection-meter i { width: 3px; height: 12px; border-radius: 2px; background: var(--purple); transform-origin: bottom; }
.ecosystem.is-animated .connection-meter i { animation: connection-bars 1.1s ease-in-out infinite alternate; }
.ecosystem.is-animated .connection-meter i:nth-child(2) { animation-delay: -.35s; }
.ecosystem.is-animated .connection-meter i:nth-child(3) { animation-delay: -.7s; }
.hero.is-animated .hero-copy,
.hero.is-animated .ecosystem,
.hero.is-animated .connection-lines path,
.hero.is-animated .hero-title-line,
.hero.is-animated .gradient-text,
.hero.is-animated .aurora,
.hero.is-animated .hero-spark,
.hero.is-animated .hero-actions .button-primary::after,
.ecosystem.is-animated .ecosystem-core img,
.ecosystem.is-animated .core-ripples span,
.ecosystem.is-animated .connection-meter i { animation-play-state: var(--hero-play-state); }
@keyframes title-unfold { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes headline-spectrum { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes aurora-drift { from { transform: translate3d(-25px, -20px, 0) scale(.9); } to { transform: translate3d(40px, 35px, 0) scale(1.15); } }
@keyframes spark-drift { from { transform: translate3d(0, 15px, 0); } to { transform: translate3d(14px, -25px, 0); } }
@keyframes button-sheen { 0%, 65%, 100% { opacity: 0; transform: translateX(0) skewX(-20deg); } 70% { opacity: 1; } 92% { opacity: 1; transform: translateX(550%) skewX(-20deg); } 93% { opacity: 0; transform: translateX(550%) skewX(-20deg); } }
@keyframes logo-hover { 0%, 100% { translate: 0 0; rotate: -3deg; scale: 1; } 50% { translate: 0 -8px; rotate: 3deg; scale: 1.05; } }
@keyframes core-ripple { 0% { opacity: 0; transform: scale(.7); } 20% { opacity: .4; } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes connection-bars { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes network-stream { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
@media (max-width: 640px) {
  .core-ripples { top: 47%; width: 180px; height: 180px; }
  .orbit-satellite { width: 6px; height: 6px; }
  .connection-meter { height: 12px; }
  .connection-meter i { height: 9px; width: 2px; }
}
@media print { .hero-atmosphere { display: none !important; } }
/* Let the browser render long-page sections as they approach the viewport.
   Content remains in the HTML and accessible through native anchors/search. */
@media screen {
  @supports (content-visibility: auto) {
    .home-page main > .section { content-visibility: auto; contain-intrinsic-block-size: auto 800px; }
  }
}