/* Animated software ecosystem. All decoration stays behind the content. */
.software-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #040b18;
}
.software-hero > :not(.software-scene) { position: relative; z-index: 2; }
.software-hero h1 { text-shadow: 0 4px 36px rgba(2, 8, 20, .48); }
.software-hero-copy p { color: #c4d5e9; }
.software-hero-copy > span { color: #88cfff; border-color: #70baff55; }
.software-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.software-scene::before {
  content: ''; position: absolute; inset: -20%;
  background: radial-gradient(ellipse at 78% 25%, #2353da50, transparent 36%),
    radial-gradient(ellipse at 58% 60%, #00c8ee24, transparent 35%),
    radial-gradient(ellipse at 25% 85%, #4c24d52b, transparent 42%);
  animation: software-aurora 18s ease-in-out infinite alternate;
}
.software-scene::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #040b18c9 0%, #040b1880 37%, transparent 78%),
    linear-gradient(0deg, #040b18 0%, transparent 32%, #040b1822 75%, #040b1844);
}
.software-grid-floor {
  position: absolute; width: 160%; height: 85%; left: -30%; bottom: -43%;
  background-image: linear-gradient(#398bdc35 1px, transparent 1px), linear-gradient(90deg, #398bdc35 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(620px) rotateX(58deg);
  mask-image: radial-gradient(ellipse at 65% 30%, black, transparent 67%);
}
.software-circuits { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.software-circuit-base { stroke: #4799e5; opacity: .2; stroke-width: 1; }
.software-circuit-flow {
  stroke: #79e7ff; stroke-width: 1.8; stroke-dasharray: 14 22 3 290;
  filter: drop-shadow(0 0 5px #2bbdff);
  animation: software-data 14s linear infinite;
}
.software-circuit-flow.flow-secondary { stroke: #778bff; animation-duration: 21s; animation-direction: reverse; }
.software-circuit-nodes { fill: #a5f0ff; filter: drop-shadow(0 0 7px #36c5ff); }
.software-circuit-nodes circle { animation: software-node 4s ease-in-out infinite alternate; }
.software-circuit-nodes circle:nth-child(3n) { animation-delay: -2s; }
.software-circuit-nodes circle:nth-child(3n + 1) { animation-delay: -3s; }
.software-core {
  position: absolute; width: clamp(400px, 49vw, 780px); aspect-ratio: 1;
  top: -13%; right: -7%; border-radius: 50%;
  background: radial-gradient(circle, #369dff1c 0%, #195aff09 44%, transparent 69%);
  filter: drop-shadow(0 0 35px #258cff20);
}
.software-core::before {
  content: ''; position: absolute; inset: 30%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #bdf9ff28, #419aff16 30%, #0e286718 65%);
  border: 1px solid #95e9ff42;
  box-shadow: inset 0 0 55px #319dff20, 0 0 65px #227fff1c;
  animation: software-core-breathe 7s ease-in-out infinite alternate;
}
.software-core svg { width: 100%; height: 100%; overflow: visible; }
.software-orbit { transform-origin: 300px 300px; }
.software-orbit-outer { animation: software-orbit 65s linear infinite; }
.software-orbit-inner { animation: software-orbit 42s linear infinite reverse; }
.software-orbit-middle { animation: software-orbit 85s linear infinite reverse; }
.software-core-traces { stroke: #94d8ff; opacity: .32; }
.software-core-axis { stroke: #70c9ff; opacity: .2; stroke-dasharray: 2 8; }
@keyframes software-data { to { stroke-dashoffset: -658; } }
@keyframes software-orbit { to { transform: rotate(360deg); } }
@keyframes software-aurora { to { transform: translate(-4%, 5%) scale(1.12); } }
@keyframes software-node { from { opacity: .35; } to { opacity: 1; } }
@keyframes software-core-breathe { to { opacity: .55; transform: scale(.94); } }
@media (max-width: 1000px) {
  .software-core { width: 600px; top: -100px; right: -220px; opacity: .8; }
  .software-scene::after { background: linear-gradient(90deg, #040b18aa, #040b1833), linear-gradient(0deg, #040b18, transparent 65%); }
}
@media (max-width: 650px) {
  .software-core { width: 460px; top: -60px; right: -230px; opacity: .65; }
  .software-circuits { width: 180%; left: -55%; opacity: .6; }
  .software-grid-floor { background-size: 48px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .software-scene *, .software-scene::before, .software-core::before { animation: none !important; }
}

/* A more focused headline and a luminous, navigable ecosystem card. */
.software-hero { grid-template-columns: 1.45fr .85fr; gap: clamp(2rem, 5vw, 5rem); }
.software-hero h1 { font-size: clamp(3.2rem, 6.2vw, 6.3rem); line-height: 1.02; letter-spacing: -.06em; }
.software-hero h1 em { font-style: normal; color: #92d9ff; background: linear-gradient(110deg, #f0fbff 0%, #87dbff 40%, #7399ff 85%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.software-hero-copy { max-width: 450px; padding-bottom: .25rem; }
.software-hero-copy p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.75; margin-bottom: 2rem; }
.software-ecosystem { position: relative; display: flex; align-items: center; gap: 1.25rem; padding: 1.2rem 1.35rem; border: 1px solid #78c7ff40; border-radius: 20px; color: #eef8ff; text-decoration: none; background: linear-gradient(125deg, #1c528841, #10224099 65%, #1e255644); box-shadow: inset 0 1px 0 #d1efff18, 0 18px 55px #0000002e, 0 0 35px #2878ff0c; backdrop-filter: blur(14px); transition: border-color .25s, background .25s, box-shadow .25s; }
.software-ecosystem::before { content: ''; position: absolute; height: 1px; top: -1px; left: 15%; right: 15%; background: linear-gradient(90deg, transparent, #b1eaff, transparent); }
.software-ecosystem-number { flex: 0 0 84px; position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.software-ecosystem-number svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #70cdff; stroke-width: .8; animation: software-orbit 38s linear infinite; }
.software-ecosystem-number svg circle:nth-child(1) { stroke-dasharray: 100 35 40 102; opacity: .75; }
.software-ecosystem-number svg circle:nth-child(2) { opacity: .2; }
.software-ecosystem-number svg circle:nth-child(n+3) { fill: #a9ecff; stroke: none; filter: drop-shadow(0 0 4px #63c8ff); }
.software-ecosystem-number strong { font: 600 2.6rem/1 var(--display); letter-spacing: -.06em; color: #c0edff; text-shadow: 0 0 24px #5bc5ff55; }
.software-ecosystem-label { flex: 1; }
.software-ecosystem-label small { display: block; margin-bottom: .55rem; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: #8fcfff; }
.software-ecosystem-label b { display: block; font: 500 clamp(1.15rem, 1.7vw, 1.5rem)/1.2 var(--display); letter-spacing: -.035em; }
.software-ecosystem-arrow { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #8bd2ff33; border-radius: 50%; color: #9ddfff; font-size: 1.1rem; }
.software-ecosystem:hover { border-color: #8bdfff99; background: linear-gradient(125deg, #24669b55, #152c4cbb 65%, #2b367055); box-shadow: inset 0 1px 0 #d1efff22, 0 18px 55px #0000002e, 0 0 35px #2878ff22; }
.software-ecosystem:focus-visible { outline: 2px solid #9ae6ff; outline-offset: 5px; }
#software-catalog { scroll-margin-top: 110px; }
@media (max-width: 1000px) { .software-hero { grid-template-columns: 1fr; gap: 3rem; } .software-hero-copy { max-width: 580px; } .software-ecosystem { max-width: 410px; } }
@media (max-width: 650px) { .software-hero h1 { font-size: clamp(2.7rem, 11.8vw, 4.2rem); } .software-ecosystem { gap: 1rem; padding: 1rem; border-radius: 16px; } .software-ecosystem-number { flex-basis: 70px; width: 70px; height: 70px; } .software-ecosystem-number strong { font-size: 2.2rem; } .software-ecosystem-label small { font-size: .56rem; } }
@media (prefers-reduced-motion: reduce) { .software-ecosystem-number svg { animation: none; } .software-ecosystem { transition: none; } }