body { isolation: isolate; background: #05080e; }
main, body > footer { position: relative; z-index: 1; }

#space-environment {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #05080e;
  contain: strict;
}

#space-environment > canvas,
.space-fallback,
.space-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }

.space-fallback {
  background:
    radial-gradient(ellipse at 81% 39%, #113b61 0, #0b1e36 25%, transparent 59%),
    radial-gradient(ellipse at 4% 95%, #0f3450 0, transparent 50%), #05080e;
}
.space-fallback::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#bfdfff .8px, transparent 1.3px), radial-gradient(#8fb6d5 .6px, transparent 1px); background-size: 139px 173px, 217px 191px; background-position: 27px 52px, 81px 17px; opacity: .45; }
.effects-ready .space-fallback::after { opacity: 0; }

#aurora-field { opacity: .9; }
#space-environment #signal-field { z-index: 2; opacity: 1; }
.space-vignette { z-index: 3; background: radial-gradient(ellipse, transparent 25%, #02050b99 100%); }
.hero { background: transparent; }
.hero-atmosphere {
  background: linear-gradient(90deg, #05080edb, #05080e9c 35%, transparent 71%);
}
.hero-grid-floor { opacity: .75; }
.hero h1 { text-shadow: 0 5px 35px #03081099; }
.hero h1 > span { color: #f3f6fa; }
.hero-foot { min-height: 75px; }
.hero-meta { color: #a7c7de; }
.core-aura {
  background: radial-gradient(ellipse, #208fff42 0, #116fbc26 27%, transparent 65%);
}
.core-portal {
  position: absolute;
  width: 112%;
  height: 112%;
  inset: -7% -6%;
  transform: rotate(-19deg);
  opacity: .7;
  filter: drop-shadow(0 0 11px #248cda4d);
  pointer-events: none;
}
.portal-segment {
  transform-box: fill-box;
  transform-origin: center;
  animation: portal-revolve 32s linear infinite paused;
}
.orbital-system { opacity: 1; }
.orbit-one { border-color: #72deff8a; border-width: 1.5px; }
.orbit-two { border-color: #3d8aff99; }
.orbit-three { border-color: #79d8ff52; }
.orbit > i { box-shadow: 0 0 8px #a4efff, 0 0 22px #44baff; }
.core { filter: drop-shadow(0 24px 25px #020811b3) drop-shadow(0 0 18px #2eafff38); }
.core-scan {
  position: absolute;
  inset: 15% 10% 20%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(ellipse, #000 40%, transparent 72%);
}
.core-scan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, #87e8ff2b 49%, #c9f7ff65 50%, #4ec9ff1a 52%, transparent 61%);
  transform: translateY(-80%);
  animation: core-light-scan 9s ease-in-out infinite paused;
  mix-blend-mode: screen;
}
.effects-ready:not(.effects-paused):not(.scene-idle) .portal-segment,
.effects-ready:not(.effects-paused):not(.scene-idle) .core-scan::before { animation-play-state: running; }
.effects-paused .portal-segment, .scene-idle .portal-segment,
.effects-paused .core-scan::before, .scene-idle .core-scan::before,
.document-idle .portal-segment, .document-idle .core-scan::before { animation-play-state: paused; }

.solutions, .faq, .lab, .contact { background-color: #05080e4d; }
.solutions, .process, .lab, .contact { position: relative; }
.signal-junction { position: absolute; top: 0; left: 32px; bottom: 0; width: 1px; background: linear-gradient(transparent, #4ac8ff40 25%, #2265d55c 70%, transparent); pointer-events: none; }
.signal-junction::before { content: ''; position: absolute; top: 40px; left: -4px; width: 7px; height: 7px; border: 1px solid #81e7ff; background: #3f99c9; transform: rotate(45deg); box-shadow: 0 0 15px #49bfff77; }
.signal-junction i { position: absolute; top: 40px; left: 0; width: 24px; height: 1px; background: #62ddff99; }
.signal-junction span { position: absolute; left: -1px; top: 8%; height: 45px; width: 2px; background: linear-gradient(transparent, #b7f2ff, transparent); opacity: 0; transform: translateY(0); }
.effects-ready:not(.effects-paused):not(.document-idle) .scene-visible > .signal-junction span { opacity: .9; animation: spine-flow 7s ease-in-out infinite; }
.signal-bridge { color: #afd4e6; }
.bridge-line i { background: linear-gradient(90deg, transparent, #72dfff); box-shadow: 0 0 12px #49b9fa33; }
.bridge-line b { border-color: #92e7ff; box-shadow: 0 0 30px #2baeff3d; }
.service { background: radial-gradient(ellipse at 70% 0, #267da23d, transparent 50%), linear-gradient(135deg, #142633ef, #0b1725f2); border-color: #527a95; }
.service::after { height: 2px; box-shadow: 0 0 19px #4bc6ff4d; }
.service::before { background: radial-gradient(370px circle at var(--light-x, 50%) var(--light-y, 10%), #66dfff29, transparent 68%); }
.service-art { height: 180px; overflow: hidden; border-radius: 50%; background: radial-gradient(ellipse, #36a9da16, transparent 65%); }
.service-art svg { position: relative; z-index: 1; }
.service-art svg > g:first-of-type { stroke: #426d87; }
.hardware-art svg { filter: drop-shadow(0 0 8px #45b9e026); }
.art-scan { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 2; background: linear-gradient(90deg, transparent, #90e8ff33, transparent); transform: translateX(-250%) skewX(-25deg); pointer-events: none; }
.effects-ready:not(.effects-paused):not(.document-idle) .scene-visible .art-scan { animation: art-light-scan 6s ease-in-out infinite; }
.effects-ready:not(.effects-paused):not(.document-idle) .scene-visible .signal-trace { animation: transmit 3.4s linear infinite; }
.effects-ready:not(.effects-paused):not(.document-idle) .scene-visible .signal-packet { animation: packet 2.7s ease-in-out infinite alternate; }
.care { position: relative; background: linear-gradient(90deg, #123d601a, transparent); }

.process { background: radial-gradient(ellipse at 20% 0, #1c6f9b40, transparent 65%), #091726d9; border-color: #426b85; }
.process::after { opacity: .45; }
.process-track { background: #4b7795; }
.process-track span { box-shadow: 0 0 22px #6dd5ffbb; }
.track-pulse { position: absolute; top: -1px; left: 0; height: 3px; width: 100px; background: linear-gradient(90deg, transparent, #dcfbff, transparent); opacity: 0; }
.effects-ready:not(.effects-paused):not(.document-idle) .scene-visible .track-pulse { opacity: .85; animation: process-signal 6s ease-in-out infinite; }
.steps li > span { color: #a8d9eb; }

.lab { background: radial-gradient(ellipse at 80% 55%, #114b842e, transparent 66%); }
.lab-orbit { border-color: #417cc54d; box-shadow: 0 0 0 65px #1f6bb011, 0 0 0 130px #1f6bb008; }
.lab-portal { position: absolute; z-index: -1; width: min(76vw, 880px); height: 540px; left: 36%; top: 165px; border: 1px solid #58a9e94d; transform: perspective(700px) rotateY(-35deg) rotateZ(-12deg); pointer-events: none; box-shadow: inset 0 0 60px #1b8bf514, 0 0 70px #127ae521; }
.lab-portal i { position: absolute; inset: 32px; border: 1px solid #599ce43d; }
.lab-portal i:nth-child(2) { inset: 65px; border-color: #599ce426; }
.lab-portal i:nth-child(3) { inset: 98px; border-color: #599ce41a; }
.demo-launch { border-color: #5c8daa; background: radial-gradient(ellipse at 50% 45%, #24617d, #10283b 50%, #09121e 80%); box-shadow: inset 0 1px #9ae9ff55, 0 0 30px #0c75c21a; }
.demo-launch::after { background-image: linear-gradient(#80c8f20b 1px, transparent 1px), linear-gradient(90deg, #80c8f20b 1px, transparent 1px); }
.flow-node.central { box-shadow: 0 0 45px #36b6ed59, inset 0 1px #b2edff66; }
.effects-ready:not(.effects-paused):not(.document-idle) .scene-visible .flow-line::after { opacity: 1; animation: flow-packet 2.2s ease-in-out infinite; }
.mini-dashboard { box-shadow: 0 25px 30px #020710aa, 0 0 45px #228cdb38, inset 0 1px #b9e9fb44; }
.faq { background: linear-gradient(90deg, #05080e99, #05080e4d); }
.questions details { background: #050d16a6; }
.questions summary { padding-inline: 16px; }
.questions p { padding-left: 16px; }
.contact { background: radial-gradient(ellipse at 15% 70%, #1a678f38, transparent 60%), #05080e59; }
.contact-emblem { -webkit-text-stroke-color: #5fbbf73d; text-shadow: 0 0 80px #2c93ea11; }
.contact-rays { position: absolute; z-index: -1; pointer-events: none; top: 10%; right: 3%; width: 550px; height: 550px; border: 1px solid #3b90c34d; transform: perspective(700px) rotateX(65deg) rotateZ(-22deg); box-shadow: 0 0 0 40px #4f9cd715, 0 0 0 80px #4f9cd70b; }
.contact form { border-color: #5f8da4; box-shadow: inset 0 1px #b4eaff4d, 0 0 32px #1289cc1a; }
.contact form::before { content: ''; height: 2px; background: linear-gradient(90deg, transparent, #94e6ff, transparent); margin: -28px -28px 20px; }
.footer-wordmark { -webkit-text-stroke-color: #6fa4c17a; }

.accessibility-options { margin: 0 0 22px; width: max-content; max-width: 100%; position: relative; color: #a6bdcf; font-size: 11px; }
.accessibility-options summary { min-height: 32px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.accessibility-options summary::-webkit-details-marker { display: none; }
.accessibility-options summary::after { content: '+'; color: #9bbed1; }
.accessibility-options[open] summary::after { content: '−'; }
.accessibility-options > div { max-width: 350px; padding: 15px 20px; border: 1px solid #405e75; background: #0c1a28; margin-top: 6px; }
.accessibility-options p { font-size: 12px; color: #b0c5d7; }
.accessibility-options .effects-toggle { margin-top: 7px; }
.skip-motion:focus { z-index: 110; }

@keyframes portal-revolve { to { transform: rotate(360deg); } }
@keyframes core-light-scan { 0%, 10% { transform: translateY(-80%); } 70%, 100% { transform: translateY(85%); } }
@keyframes art-light-scan { to { transform: translateX(380%) skewX(-25deg); } }
@keyframes spine-flow { 0% { transform: translateY(0); } 100% { transform: translateY(350px); } }
@keyframes process-signal { 0%, 10% { transform: translateX(0); opacity: 0; } 20% { opacity: .85; } 90%, 100% { transform: translateX(min(76vw, 1100px)); opacity: 0; } }

@media (max-width: 1100px) {
  .signal-junction { left: 17px; }
  .service-art { height: 145px; }
  .contact form::before { margin: -22px -22px 18px; }
}

@media (max-width: 760px) {
  .hero-meta > span:last-child { max-width: 145px; white-space: nowrap; font-size: 9px; }
  .hero-atmosphere { background: linear-gradient(#05080e70 8%, transparent 65%); }
  .hero-foot { min-height: 56px; }
  .signal-junction { left: 10px; }
  .signal-junction i { width: 10px; }
  .signal-junction::before { width: 5px; height: 5px; left: -3px; }
  .core-portal { opacity: .7; width: 106%; height: 106%; inset: -4% -3%; }
  .core-scan { opacity: .7; }
  .service-art { height: 150px; }
  .art-scan { opacity: .5; }
  .lab-portal { height: 650px; top: 250px; width: 380px; left: 14%; }
  .contact-rays { width: 380px; height: 500px; top: 35%; }
  .contact form::before { margin: -22px -18px 18px; }
  .questions summary { padding-inline: 8px; }
  .questions p { padding-left: 8px; }
}

@media (forced-colors: active) {
  #space-environment, .core-portal, .core-scan, .art-scan, .signal-junction, .lab-portal, .contact-rays { display: none; }
  .contact form, .accessibility-options > div { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .art-scan, .core-scan, .track-pulse, .signal-junction span { display: none; }
}