:root {
  --ink: #03070d;
  --deep: #07111f;
  --panel: rgba(5, 18, 31, 0.66);
  --panel-strong: rgba(7, 22, 38, 0.84);
  --line: rgba(135, 225, 255, 0.22);
  --cyan: #55e6ff;
  --blue: #2c7dff;
  --green: #55ffad;
  --orange: #ffb15b;
  --violet: #a987ff;
  --text: #edf8ff;
  --muted: #a9bfd0;
  --shadow-cyan: 0 0 32px rgba(85, 230, 255, 0.36);
  --shadow-green: 0 0 28px rgba(85, 255, 173, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--ink);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 10%, rgba(44, 125, 255, 0.2), transparent 30rem),
    radial-gradient(circle at 16% 72%, rgba(85, 255, 173, 0.14), transparent 26rem),
    radial-gradient(circle at 82% 64%, rgba(255, 177, 91, 0.12), transparent 24rem),
    linear-gradient(135deg, #020409 0%, #06111d 42%, #02070d 100%);
}

body::selection {
  background: rgba(85, 230, 255, 0.26);
}

#webgl-scene,
#atmosphere-canvas,
.css-datacenter,
.technician-layer,
.aurora-layer,
.depth-grid,
.noise-layer,
.scanline-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#webgl-scene {
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

body.webgl-ready #webgl-scene {
  opacity: 1;
}

#atmosphere-canvas {
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0.82;
}

.css-datacenter {
  z-index: 0;
  overflow: hidden;
  perspective: 800px;
  opacity: 1;
  transition: opacity 1.2s ease;
}

body.webgl-ready .css-datacenter {
  opacity: 0.26;
}

.css-datacenter::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 130vw;
  height: 72vh;
  transform: translateX(-50%) rotateX(64deg);
  transform-origin: bottom;
  background-image:
    linear-gradient(rgba(85, 230, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 230, 255, 0.14) 1px, transparent 1px);
  background-size: 58px 58px;
  filter: drop-shadow(0 0 18px rgba(85, 230, 255, 0.18));
  animation: floorDrift 14s linear infinite;
}

.rack-row {
  position: absolute;
  top: 13vh;
  display: flex;
  gap: clamp(0.7rem, 1.5vw, 1.4rem);
  transform-style: preserve-3d;
  opacity: 0.7;
}

.rack-row-left {
  left: -5vw;
  transform: rotateY(31deg) rotateX(2deg);
}

.rack-row-right {
  right: -5vw;
  transform: rotateY(-31deg) rotateX(2deg);
}

.rack-row span {
  position: relative;
  display: block;
  width: clamp(4.6rem, 8vw, 8.2rem);
  height: clamp(16rem, 49vh, 38rem);
  border: 1px solid rgba(141, 222, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, rgba(255, 255, 255, 0.04) 52%, transparent),
    repeating-linear-gradient(0deg, rgba(91, 114, 128, 0.26) 0 4px, rgba(3, 12, 19, 0.92) 4px 19px);
  box-shadow:
    inset 0 0 34px rgba(77, 191, 255, 0.09),
    0 22px 72px rgba(0, 0, 0, 0.62);
  overflow: hidden;
}

.rack-row span::before {
  content: "";
  position: absolute;
  inset: 7% 10%;
  background:
    radial-gradient(circle, var(--green) 0 2px, transparent 3px) 12% 16% / 32px 32px,
    radial-gradient(circle, var(--cyan) 0 2px, transparent 3px) 76% 22% / 38px 38px,
    radial-gradient(circle, var(--orange) 0 1.5px, transparent 3px) 34% 68% / 30px 30px;
  animation: ledField 1.8s steps(2, end) infinite;
}

.rack-row span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(160, 234, 255, 0.18) 36%, transparent 52%);
  transform: translateX(-120%);
  animation: glassSweep 5.8s ease-in-out infinite;
}

.cable-field i {
  position: absolute;
  width: 34vw;
  height: 22vh;
  border-top: 2px solid rgba(85, 230, 255, 0.24);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(85, 230, 255, 0.32));
  animation: cablePulse 4.4s linear infinite;
}

.cable-field i:nth-child(1) {
  left: 10vw;
  top: 42vh;
  transform: rotate(12deg);
}

.cable-field i:nth-child(2) {
  right: 8vw;
  top: 36vh;
  transform: rotate(-18deg);
  border-color: rgba(85, 255, 173, 0.22);
  animation-delay: -1.2s;
}

.cable-field i:nth-child(3) {
  left: 33vw;
  top: 20vh;
  width: 46vw;
  border-color: rgba(255, 177, 91, 0.18);
  animation-delay: -2.2s;
}

.cable-field i:nth-child(4) {
  left: -4vw;
  top: 68vh;
  animation-delay: -0.4s;
}

.cable-field i:nth-child(5) {
  right: -3vw;
  top: 61vh;
  border-color: rgba(169, 135, 255, 0.2);
  animation-delay: -3.1s;
}

.cable-field i:nth-child(6) {
  left: 40vw;
  top: 76vh;
  width: 26vw;
  border-color: rgba(85, 230, 255, 0.18);
  animation-delay: -1.8s;
}

.technician-layer {
  z-index: 3;
  overflow: hidden;
  opacity: 0.9;
  transform: translate3d(calc(var(--cursor-x, 50vw) * 0.004 - 0.2vw), 0, 0);
}

body.webgl-ready .technician-layer {
  opacity: 0.42;
}

.technician {
  position: absolute;
  width: 4.2rem;
  height: 7.2rem;
  transform-origin: bottom center;
  filter:
    drop-shadow(0 0 14px rgba(85, 230, 255, 0.22))
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.5));
}

.technician-cable {
  left: clamp(3.2rem, 14vw, 16rem);
  top: 55vh;
  transform: scale(0.82) rotate(-4deg);
}

.technician-tablet {
  right: clamp(5rem, 16vw, 18rem);
  top: 45vh;
  transform: scale(0.76) rotate(5deg);
}

.technician-door {
  left: clamp(6rem, 22vw, 22rem);
  top: 31vh;
  transform: scale(0.64) rotate(2deg);
  opacity: 0.82;
}

.technician-carry {
  right: clamp(3rem, 24vw, 26rem);
  top: 66vh;
  transform: scale(0.7);
  animation: carryWalk 4.6s ease-in-out infinite;
}

.technician b,
.technician i,
.technician span {
  position: absolute;
  display: block;
}

.technician .head {
  left: 1.55rem;
  top: 0.35rem;
  width: 1.05rem;
  height: 1.15rem;
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(circle at 62% 36%, rgba(255, 255, 255, 0.45), transparent 0.1rem),
    linear-gradient(145deg, #e2b18c, #9f6e52);
  box-shadow: inset -0.18rem -0.1rem 0.2rem rgba(43, 18, 9, 0.18);
  animation: headScan 3.8s ease-in-out infinite;
}

.technician .hair {
  left: 1.45rem;
  top: 0.15rem;
  width: 1.25rem;
  height: 0.62rem;
  border-radius: 48% 48% 18% 18%;
  background: #17110e;
}

.technician-female .hair {
  left: 1.36rem;
  top: 0.12rem;
  width: 1.45rem;
  height: 1rem;
  border-radius: 52% 52% 38% 38%;
  box-shadow: 0.42rem 0.62rem 0 -0.2rem #17110e;
}

.technician .torso {
  left: 1.28rem;
  top: 1.58rem;
  width: 1.58rem;
  height: 2.25rem;
  border-radius: 0.42rem 0.42rem 0.28rem 0.28rem;
  background:
    linear-gradient(90deg, transparent 44%, rgba(85, 230, 255, 0.54) 45% 55%, transparent 56%),
    linear-gradient(145deg, #254251, #122632 72%);
  border: 1px solid rgba(145, 239, 255, 0.25);
  box-shadow: inset 0 0 1rem rgba(85, 230, 255, 0.12);
}

.technician .torso::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: 0.35rem;
  height: 0.18rem;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--orange));
  border-radius: 999px;
  box-shadow: 0 0 0.8rem rgba(85, 230, 255, 0.5);
}

.technician .arm,
.technician .leg {
  width: 0.38rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #31576a, #132633);
  border: 1px solid rgba(145, 239, 255, 0.16);
  transform-origin: top center;
}

.technician .arm {
  top: 1.78rem;
  height: 2rem;
}

.technician .arm-left {
  left: 1.02rem;
  transform: rotate(19deg);
}

.technician .arm-right {
  right: 1.02rem;
  transform: rotate(-19deg);
}

.technician .leg {
  top: 3.65rem;
  height: 2.45rem;
}

.technician .leg-left {
  left: 1.42rem;
  transform: rotate(6deg);
}

.technician .leg-right {
  right: 1.42rem;
  transform: rotate(-6deg);
}

.technician .leg::after {
  content: "";
  position: absolute;
  left: -0.12rem;
  bottom: -0.15rem;
  width: 0.7rem;
  height: 0.28rem;
  border-radius: 0.2rem;
  background: #03070d;
}

.technician .tool {
  filter: drop-shadow(0 0 10px rgba(85, 230, 255, 0.35));
}

.technician .cable {
  left: 2.42rem;
  top: 2.22rem;
  width: 4.5rem;
  height: 1.7rem;
  border-top: 3px solid var(--green);
  border-right: 3px solid var(--green);
  border-radius: 50% 45% 0 0;
  animation: cablePlug 1.9s ease-in-out infinite;
}

.technician-cable .arm-right {
  transform: rotate(-76deg);
  animation: plugArm 1.9s ease-in-out infinite;
}

.technician .tablet {
  left: 1.3rem;
  top: 2.75rem;
  width: 1.55rem;
  height: 1rem;
  border: 1px solid rgba(85, 230, 255, 0.5);
  border-radius: 0.12rem;
  background:
    linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(circle at 65% 35%, rgba(85, 255, 173, 0.7), transparent 0.18rem),
    #071520;
  transform: rotateX(32deg) rotate(-5deg);
  animation: tabletGlow 2.8s ease-in-out infinite;
}

.technician-tablet .arm-left {
  transform: rotate(55deg);
}

.technician-tablet .arm-right {
  transform: rotate(-55deg);
}

.technician .rack-door {
  left: 2.95rem;
  top: 1.25rem;
  width: 1.95rem;
  height: 4.2rem;
  border: 1px solid rgba(85, 230, 255, 0.38);
  border-radius: 0.18rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 0.12rem, transparent 0.12rem 0.34rem),
    rgba(4, 16, 26, 0.48);
  transform-origin: left center;
  transform: perspective(8rem) rotateY(-28deg);
  animation: doorInspect 4.8s ease-in-out infinite;
}

.technician-door .arm-right {
  transform: rotate(-84deg);
  animation: doorArm 4.8s ease-in-out infinite;
}

.technician .hardware {
  left: 0.78rem;
  top: 2.72rem;
  width: 2.65rem;
  height: 1.1rem;
  border: 1px solid rgba(255, 177, 91, 0.34);
  border-radius: 0.18rem;
  background:
    radial-gradient(circle at 22% 52%, var(--orange) 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 78% 52%, var(--cyan) 0 0.08rem, transparent 0.1rem),
    linear-gradient(145deg, #344655, #0b1823);
  box-shadow: 0 0 1.2rem rgba(255, 177, 91, 0.2);
}

.technician-carry .arm-left {
  transform: rotate(56deg);
}

.technician-carry .arm-right {
  transform: rotate(-56deg);
}

.maintenance-stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  transform: translate3d(calc(var(--cursor-x, 50vw) * 0.003 - 0.16vw), calc(var(--cursor-y, 50vh) * 0.002 - 0.1vh), 0);
  transform-origin: center;
}

body.webgl-ready .technician-layer {
  opacity: 0.88;
}

.stage-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 55%, rgba(255, 50, 50, 0.18), transparent 16rem),
    radial-gradient(circle at 75% 54%, rgba(85, 230, 255, 0.14), transparent 18rem),
    radial-gradient(circle at 51% 70%, rgba(85, 255, 173, 0.1), transparent 24rem);
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: incidentHaze 5.4s ease-in-out infinite alternate;
}

.service-rail {
  position: absolute;
  height: 2px;
  width: 54vw;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(85, 230, 255, 0.42), transparent),
    repeating-linear-gradient(90deg, rgba(85, 255, 173, 0.38) 0 0.55rem, transparent 0.55rem 2.2rem);
  box-shadow: 0 0 18px rgba(85, 230, 255, 0.3);
  opacity: 0.52;
}

.service-rail-a {
  left: 6vw;
  top: 67vh;
  transform: rotate(-5deg);
}

.service-rail-b {
  right: 6vw;
  top: 58vh;
  transform: rotate(7deg);
}

.scene-rack,
.patch-panel,
.terminal-station,
.laptop-station,
.carry-crew,
.doc-runner,
.crate-runner,
.toolcart-runner,
.scene-tech,
.panic-ring {
  position: absolute;
}

.scene-rack {
  width: clamp(5rem, 7.8vw, 8rem);
  height: clamp(14rem, 34vh, 22rem);
  border: 1px solid rgba(151, 233, 255, 0.25);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 18%, rgba(255, 255, 255, 0.05) 58%, transparent),
    linear-gradient(180deg, rgba(17, 42, 58, 0.92), rgba(3, 11, 18, 0.94));
  box-shadow:
    inset 0 0 30px rgba(85, 230, 255, 0.1),
    0 24px 60px rgba(0, 0, 0, 0.62);
  transform-style: preserve-3d;
  overflow: visible;
}

.scene-rack-intake {
  right: clamp(0.5rem, 3vw, 3.4rem);
  top: 23vh;
  transform: perspective(48rem) rotateY(-24deg) rotateX(2deg);
}

.scene-rack-defective {
  left: clamp(0.5rem, 3vw, 3.4rem);
  top: 25vh;
  transform: perspective(48rem) rotateY(25deg) rotateX(2deg);
  border-color: rgba(255, 83, 83, 0.6);
  box-shadow:
    inset 0 0 30px rgba(255, 52, 52, 0.22),
    0 0 55px rgba(255, 52, 52, 0.32),
    0 24px 60px rgba(0, 0, 0, 0.68);
  animation: defectiveRackJitter 0.5s steps(2, end) infinite;
}

.rack-crown {
  position: absolute;
  left: 12%;
  top: 4%;
  width: 76%;
  height: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--cyan));
  box-shadow: 0 0 18px rgba(85, 230, 255, 0.6);
}

.alarm-crown {
  background: linear-gradient(90deg, #ff4f4f, #ffb15b, #ff4f4f);
  box-shadow: 0 0 24px rgba(255, 67, 67, 0.75);
  animation: redAlarm 0.65s steps(2, end) infinite;
}

.rack-bay {
  position: relative;
  display: block;
  width: 74%;
  height: 10.5%;
  margin: 11% auto 0;
  border: 1px solid rgba(120, 230, 255, 0.16);
  border-radius: 0.22rem;
  background:
    radial-gradient(circle at 12% 50%, var(--green) 0 0.07rem, transparent 0.09rem),
    radial-gradient(circle at 22% 50%, var(--cyan) 0 0.06rem, transparent 0.08rem),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 0.08rem, transparent 0.08rem 0.38rem),
    rgba(2, 9, 15, 0.88);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.65);
}

.defective-bay {
  border-color: rgba(255, 86, 86, 0.8);
  background:
    radial-gradient(circle at 12% 50%, #ff4444 0 0.1rem, transparent 0.13rem),
    radial-gradient(circle at 24% 50%, #ffb15b 0 0.08rem, transparent 0.11rem),
    linear-gradient(90deg, rgba(255, 44, 44, 0.34), transparent 64%),
    rgba(18, 4, 4, 0.95);
  animation: failedBayPulse 0.38s steps(2, end) infinite;
}

.rack-door-open {
  position: absolute;
  right: 83%;
  top: 14%;
  width: 42%;
  height: 72%;
  border: 1px solid rgba(85, 230, 255, 0.3);
  border-radius: 0.28rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 0.14rem, transparent 0.14rem 0.42rem),
    rgba(8, 25, 38, 0.62);
  transform: perspective(10rem) rotateY(-48deg);
  transform-origin: right center;
  animation: intakeDoorBreath 4s ease-in-out infinite;
}

.fault-light {
  position: absolute;
  left: 74%;
  top: 41%;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #ff3333;
  box-shadow: 0 0 30px #ff3333;
  animation: redAlarm 0.45s steps(2, end) infinite;
}

.spark {
  position: absolute;
  left: 78%;
  top: 42%;
  width: 0.16rem;
  height: 3.2rem;
  border-radius: 999px;
  background: linear-gradient(to bottom, #fff, var(--orange), transparent);
  filter: drop-shadow(0 0 8px #ffb15b);
  transform-origin: top center;
}

.spark-one {
  animation: sparkOne 0.7s linear infinite;
}

.spark-two {
  animation: sparkTwo 0.55s linear infinite;
  animation-delay: -0.18s;
}

.spark-three {
  animation: sparkThree 0.9s linear infinite;
  animation-delay: -0.32s;
}

.smoke {
  position: absolute;
  left: 61%;
  top: 32%;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 193, 199, 0.28), transparent 62%);
  filter: blur(5px);
  animation: smokeRise 3.8s ease-in-out infinite;
}

.smoke-two {
  animation-delay: -1.9s;
  left: 72%;
  top: 36%;
}

.patch-panel {
  left: clamp(0.8rem, 4vw, 4.5rem);
  top: 50vh;
  width: clamp(7rem, 11vw, 12rem);
  height: clamp(4rem, 9vh, 6rem);
  border: 1px solid rgba(85, 255, 173, 0.25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 22% 50%, rgba(85, 255, 173, 0.12), transparent 40%),
    rgba(3, 14, 22, 0.78);
  box-shadow:
    inset 0 0 22px rgba(85, 255, 173, 0.07),
    0 0 22px rgba(85, 255, 173, 0.12);
}

.panel-row {
  position: relative;
  display: block;
  width: 84%;
  height: 0.42rem;
  margin: 0.75rem auto 0;
  background:
    radial-gradient(circle, var(--green) 0 0.055rem, transparent 0.075rem) 0 0 / 0.68rem 0.42rem,
    rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.patch-cable {
  position: absolute;
  left: 23%;
  top: 39%;
  width: 72%;
  height: 70%;
  border-top: 0.16rem solid rgba(85, 255, 173, 0.78);
  border-right: 0.16rem solid rgba(85, 255, 173, 0.78);
  border-radius: 58% 44% 0 0;
  filter: drop-shadow(0 0 9px rgba(85, 255, 173, 0.55));
  transform-origin: 0 0;
}

.patch-cable-a {
  animation: patchCableSwapA 2.6s ease-in-out infinite;
}

.patch-cable-b {
  top: 54%;
  border-color: rgba(85, 230, 255, 0.72);
  animation: patchCableSwapB 2.6s ease-in-out infinite;
  animation-delay: -0.7s;
}

.patch-cable-c {
  top: 24%;
  border-color: rgba(255, 177, 91, 0.68);
  animation: patchCableSwapC 3.1s ease-in-out infinite;
}

.data-pulse {
  position: absolute;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  animation: patchPulse 1.9s linear infinite;
}

.data-pulse-a {
  left: 28%;
  top: 32%;
}

.data-pulse-b {
  left: 48%;
  top: 63%;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
  animation-delay: -0.8s;
}

.terminal-station,
.laptop-station {
  border: 1px solid rgba(85, 230, 255, 0.18);
  border-radius: 8px;
  background: rgba(2, 9, 15, 0.58);
  box-shadow: 0 0 28px rgba(85, 230, 255, 0.14);
}

.terminal-station {
  right: clamp(0.8rem, 2.5vw, 3rem);
  top: 58vh;
  width: clamp(7rem, 10vw, 11rem);
  height: clamp(5rem, 10vh, 7rem);
}

.terminal-screen,
.laptop-screen {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(85, 230, 255, 0.32);
  background: linear-gradient(180deg, #071827, #02080d);
  box-shadow: inset 0 0 18px rgba(85, 230, 255, 0.1);
}

.terminal-screen {
  left: 10%;
  top: 12%;
  width: 80%;
  height: 60%;
  border-radius: 0.22rem;
}

.terminal-keyboard {
  position: absolute;
  left: 19%;
  bottom: 11%;
  width: 62%;
  height: 0.55rem;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 0.1rem, transparent 0.1rem 0.32rem);
}

.laptop-station {
  right: clamp(1.4rem, 5vw, 5.8rem);
  top: 69vh;
  width: clamp(7rem, 11vw, 12rem);
  height: clamp(4rem, 8vh, 5.5rem);
}

.laptop-screen {
  left: 17%;
  bottom: 32%;
  width: 66%;
  height: 64%;
  border-radius: 0.24rem 0.24rem 0.05rem 0.05rem;
  transform: perspective(9rem) rotateX(-16deg);
  transform-origin: bottom;
}

.laptop-base {
  position: absolute;
  left: 9%;
  bottom: 14%;
  width: 82%;
  height: 0.55rem;
  border-radius: 0.12rem;
  background: linear-gradient(90deg, #263845, #0d1821);
}

.terminal-screen i,
.laptop-screen i {
  display: block;
  height: 0.18rem;
  margin: 0.45rem 0.55rem 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--cyan), transparent);
  box-shadow: 0 0 9px rgba(85, 255, 173, 0.4);
  animation: laptopLog 2.8s linear infinite;
}

.terminal-screen i:nth-child(2),
.laptop-screen i:nth-child(2) {
  width: 62%;
  animation-delay: -0.6s;
}

.terminal-screen i:nth-child(3),
.laptop-screen i:nth-child(3) {
  width: 78%;
  animation-delay: -1.2s;
}

.terminal-screen i:nth-child(4),
.laptop-screen i:nth-child(4) {
  width: 46%;
  animation-delay: -1.8s;
}

.laptop-screen i:nth-child(5) {
  width: 68%;
  animation-delay: -2.3s;
}

.scene-tech {
  width: 3.8rem;
  height: 6.4rem;
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 0 12px rgba(85, 230, 255, 0.22))
    drop-shadow(0 16px 12px rgba(0, 0, 0, 0.52));
}

.scene-tech span {
  position: absolute;
  display: block;
}

.tech-shadow {
  left: 0.45rem;
  bottom: 0;
  width: 2.9rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.46);
  filter: blur(3px);
}

.tech-head {
  left: 1.43rem;
  top: 0.52rem;
  width: 0.96rem;
  height: 1.05rem;
  border-radius: 44% 44% 42% 42%;
  background:
    radial-gradient(circle at 66% 37%, rgba(255, 255, 255, 0.45), transparent 0.09rem),
    linear-gradient(145deg, #ddb28d, #9b6b52);
  box-shadow: inset -0.12rem -0.08rem 0.2rem rgba(20, 7, 4, 0.24);
  animation: techHeadCheck 3.4s ease-in-out infinite;
}

.tech-hair {
  left: 1.32rem;
  top: 0.36rem;
  width: 1.16rem;
  height: 0.5rem;
  border-radius: 48% 48% 20% 20%;
  background: #15100e;
}

.tech-body {
  left: 1.16rem;
  top: 1.55rem;
  width: 1.5rem;
  height: 2.24rem;
  border: 1px solid rgba(145, 239, 255, 0.25);
  border-radius: 0.38rem 0.38rem 0.28rem 0.28rem;
  background:
    linear-gradient(90deg, transparent 43%, rgba(85, 230, 255, 0.58) 44% 56%, transparent 57%),
    linear-gradient(145deg, #284759, #0e2330);
  box-shadow: inset 0 0 0.9rem rgba(85, 230, 255, 0.14);
}

.tech-body::before {
  content: "";
  position: absolute;
  left: 0.18rem;
  right: 0.18rem;
  top: 0.32rem;
  height: 0.16rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--orange));
  box-shadow: 0 0 0.8rem rgba(85, 230, 255, 0.5);
}

.tech-arm,
.tech-leg {
  width: 0.34rem;
  border: 1px solid rgba(145, 239, 255, 0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, #31596d, #132531);
  transform-origin: top center;
}

.tech-arm {
  top: 1.82rem;
  height: 1.88rem;
}

.tech-arm::after {
  content: "";
  position: absolute;
  left: -0.08rem;
  bottom: -0.18rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #c99675;
}

.tech-arm-left {
  left: 0.9rem;
  transform: rotate(18deg);
}

.tech-arm-right {
  right: 0.9rem;
  transform: rotate(-18deg);
}

.tech-leg {
  top: 3.58rem;
  height: 2.14rem;
}

.tech-leg-left {
  left: 1.36rem;
  transform: rotate(6deg);
}

.tech-leg-right {
  right: 1.36rem;
  transform: rotate(-6deg);
}

.tech-leg::after {
  content: "";
  position: absolute;
  left: -0.13rem;
  bottom: -0.16rem;
  width: 0.64rem;
  height: 0.26rem;
  border-radius: 0.2rem;
  background: #02070c;
}

.carry-crew {
  left: 4vw;
  top: 64vh;
  width: 13.5rem;
  height: 7rem;
  transform-origin: 50% 90%;
  animation: carryCrewRoute 13s cubic-bezier(0.44, 0, 0.24, 1) infinite;
}

.carry-crew .scene-tech {
  top: 0.1rem;
  animation: carryBob 0.54s ease-in-out infinite;
}

.tech-carry-left {
  left: 0.1rem;
}

.tech-carry-right {
  right: 0.1rem;
  transform: scaleX(-1);
}

.carry-crew .tech-arm-right,
.carry-crew .tech-arm-left {
  animation: carryHoldArms 1.1s ease-in-out infinite;
}

.carry-crew .tech-leg-left {
  animation: walkLegA 0.54s ease-in-out infinite;
}

.carry-crew .tech-leg-right {
  animation: walkLegB 0.54s ease-in-out infinite;
}

.carried-blade {
  position: absolute;
  left: 4.15rem;
  top: 2.55rem;
  width: 5.3rem;
  height: 1.18rem;
  border: 1px solid rgba(151, 233, 255, 0.45);
  border-radius: 0.18rem;
  background:
    radial-gradient(circle at 10% 50%, var(--green) 0 0.08rem, transparent 0.11rem),
    radial-gradient(circle at 18% 50%, var(--cyan) 0 0.07rem, transparent 0.1rem),
    linear-gradient(145deg, #3d5262, #0d1c28);
  box-shadow:
    inset 0 0 1rem rgba(85, 230, 255, 0.1),
    0 0 1.4rem rgba(85, 230, 255, 0.2);
  animation: bladeInsert 13s cubic-bezier(0.44, 0, 0.24, 1) infinite;
}

.carried-blade i {
  display: block;
  float: right;
  width: 0.42rem;
  height: 0.18rem;
  margin: 0.5rem 0.28rem 0 0;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 0.7rem var(--cyan);
}

.tech-patch {
  left: clamp(2.4rem, 7vw, 7.8rem);
  top: 55vh;
  transform: scale(0.78) rotate(-5deg);
}

.tech-patch .tech-arm-right {
  animation: patchHand 1.35s ease-in-out infinite;
}

.tech-patch .tech-arm-left {
  transform: rotate(58deg);
}

.hand-cable {
  left: 2.32rem;
  top: 2.34rem;
  width: 3.8rem;
  height: 1.3rem;
  border-top: 0.16rem solid var(--green);
  border-right: 0.16rem solid var(--green);
  border-radius: 60% 42% 0 0;
  filter: drop-shadow(0 0 10px rgba(85, 255, 173, 0.6));
  animation: handCablePlug 1.35s ease-in-out infinite;
}

.doc-runner {
  left: clamp(2rem, 11vw, 12rem);
  top: 69vh;
  width: 4rem;
  height: 6.6rem;
  animation: documentRoute 10.5s cubic-bezier(0.4, 0, 0.24, 1) infinite;
}

.tech-doc {
  inset: 0;
  animation: runBodyTilt 0.52s ease-in-out infinite;
}

.tech-doc .tech-leg-left,
.tech-crate .tech-leg-left,
.tech-cart .tech-leg-left {
  animation: runLegA 0.52s ease-in-out infinite;
}

.tech-doc .tech-leg-right,
.tech-crate .tech-leg-right,
.tech-cart .tech-leg-right {
  animation: runLegB 0.52s ease-in-out infinite;
}

.document-folder {
  left: 2.18rem;
  top: 2.12rem;
  width: 1.04rem;
  height: 1.34rem;
  border: 1px solid rgba(255, 177, 91, 0.55);
  border-radius: 0.1rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(180deg, #ffc46b, #a35f20);
  box-shadow: 0 0 0.9rem rgba(255, 177, 91, 0.24);
  animation: folderGrip 0.52s ease-in-out infinite;
}

.tech-laptop {
  right: clamp(3rem, 8vw, 8.8rem);
  top: 68vh;
  transform: scale(0.74) rotate(3deg);
}

.tech-laptop .tech-arm-left {
  animation: typeLeft 0.62s ease-in-out infinite;
}

.tech-laptop .tech-arm-right {
  animation: typeRight 0.62s ease-in-out infinite;
  animation-delay: -0.31s;
}

.crate-runner {
  left: 2vw;
  top: 78vh;
  width: 4rem;
  height: 6.7rem;
  animation: crateRoute 12s cubic-bezier(0.42, 0, 0.24, 1) infinite;
}

.tech-crate {
  inset: 0;
  animation: runBodyTilt 0.6s ease-in-out infinite;
}

.tech-crate .tech-arm-left,
.tech-crate .tech-arm-right {
  transform: rotate(58deg);
}

.spare-crate {
  left: 0.58rem;
  top: 2.52rem;
  width: 2.8rem;
  height: 1.42rem;
  border: 1px solid rgba(85, 230, 255, 0.28);
  border-radius: 0.22rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent),
    linear-gradient(180deg, #445b68, #162530);
  box-shadow: 0 0 1.2rem rgba(85, 230, 255, 0.18);
}

.spare-crate i {
  display: block;
  width: 72%;
  height: 0.14rem;
  margin: 0.38rem auto 0;
  border-radius: 999px;
  background: rgba(85, 230, 255, 0.62);
}

.toolcart-runner {
  right: 3vw;
  top: 74vh;
  width: 8rem;
  height: 6.7rem;
  animation: toolCartRoute 11s cubic-bezier(0.42, 0, 0.24, 1) infinite;
}

.tech-cart {
  left: 0;
  top: 0;
  transform: scale(0.7) rotate(-4deg);
}

.tech-cart .tech-arm-right {
  transform: rotate(-74deg);
  animation: pushArm 1s ease-in-out infinite;
}

.tool-cart {
  position: absolute;
  right: 0;
  top: 3rem;
  width: 4rem;
  height: 2.2rem;
  border: 1px solid rgba(255, 177, 91, 0.38);
  border-radius: 0.28rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent),
    linear-gradient(180deg, #3b4d55, #101a22);
  box-shadow: 0 0 1.2rem rgba(255, 177, 91, 0.16);
}

.tool-cart i {
  position: absolute;
  bottom: -0.32rem;
  width: 0.62rem;
  height: 0.62rem;
  border: 0.12rem solid #080c10;
  border-top-color: var(--cyan);
  border-radius: 50%;
  background: #162733;
  animation: cartWheel 0.5s linear infinite;
}

.tool-cart i:first-child {
  left: 0.42rem;
}

.tool-cart i:nth-child(2) {
  right: 0.42rem;
}

.tool-cart b {
  position: absolute;
  left: 0.5rem;
  top: 0.46rem;
  width: 3rem;
  height: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
  box-shadow: 0 0 0.8rem rgba(255, 177, 91, 0.4);
}

.panic-ring {
  left: clamp(0.9rem, 4vw, 4.5rem);
  top: 48vh;
  width: 12rem;
  height: 8rem;
}

.panic-tech {
  transform: scale(0.64);
}

.panic-tech .tech-arm-left {
  animation: panicArmLeft 0.42s ease-in-out infinite;
}

.panic-tech .tech-arm-right {
  animation: panicArmRight 0.42s ease-in-out infinite;
}

.panic-tech .tech-head {
  animation: panicHead 0.42s ease-in-out infinite;
}

.panic-tech .tech-leg-left {
  animation: franticLegA 0.36s ease-in-out infinite;
}

.panic-tech .tech-leg-right {
  animation: franticLegB 0.36s ease-in-out infinite;
}

.panic-tech-a {
  animation: panicOrbitA 2.5s linear infinite;
}

.panic-tech-b {
  animation: panicOrbitB 2.5s linear infinite;
  animation-delay: -0.83s;
}

.panic-tech-c {
  animation: panicOrbitC 2.5s linear infinite;
  animation-delay: -1.66s;
}

.aurora-layer {
  z-index: 1;
  background:
    linear-gradient(110deg, transparent 4%, rgba(85, 230, 255, 0.1) 18%, transparent 32%),
    linear-gradient(72deg, transparent 42%, rgba(85, 255, 173, 0.1) 58%, transparent 72%),
    radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 44%), rgba(255, 255, 255, 0.12), transparent 26rem);
  filter: blur(18px) saturate(1.25);
  mix-blend-mode: screen;
  opacity: 0.76;
  animation: auroraFloat 16s ease-in-out infinite alternate;
}

.depth-grid {
  z-index: 1;
  opacity: 0.34;
  background:
    linear-gradient(to bottom, transparent 0 64%, rgba(85, 230, 255, 0.08) 65%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(85, 230, 255, 0.08) 61px, transparent 62px);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 100%);
}

.noise-layer {
  z-index: 5;
  opacity: 0.13;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.6) 0 0.5px, transparent 1px),
    radial-gradient(circle at 65% 78%, rgba(255, 255, 255, 0.4) 0 0.5px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay;
}

.scanline-layer {
  z-index: 6;
  opacity: 0.18;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(127, 211, 255, 0.06) 9px, transparent 10px);
  animation: scanlines 9s linear infinite;
}

.page-shell {
  position: relative;
  z-index: 10;
  min-height: 150vh;
  padding: clamp(1.2rem, 3vw, 3rem);
}

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 9vh, 8rem) 0;
}

.maintenance-chip {
  position: absolute;
  top: clamp(1.2rem, 3vw, 2.2rem);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.8rem;
  border: 1px solid rgba(85, 230, 255, 0.28);
  border-radius: 999px;
  color: #dffaff;
  background: rgba(3, 12, 20, 0.42);
  box-shadow: var(--shadow-cyan);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 800;
}

.radar-dot,
.status-orb {
  display: inline-block;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
}

.radar-dot {
  position: relative;
}

.radar-dot::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border: 1px solid rgba(85, 255, 173, 0.6);
  border-radius: 50%;
  animation: radarPing 1.8s ease-out infinite;
}

.glass-card {
  position: relative;
  width: min(100%, 840px);
  padding: clamp(1.25rem, 3vw, 2.65rem);
  border: 1px solid rgba(151, 233, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 34%, rgba(7, 22, 38, 0.5)),
    linear-gradient(180deg, rgba(7, 20, 35, 0.62), rgba(4, 10, 17, 0.46));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 28px 110px rgba(0, 0, 0, 0.62),
    0 0 70px rgba(85, 230, 255, 0.18);
  backdrop-filter: blur(24px) saturate(1.45);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  overflow: hidden;
  isolation: isolate;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(85, 230, 255, 0.32), transparent 26%, rgba(85, 255, 173, 0.2) 55%, transparent 78%, rgba(255, 177, 91, 0.22)),
    radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(255, 255, 255, 0.18), transparent 18rem);
  opacity: 0.68;
  animation: borderEnergy 8s ease-in-out infinite alternate;
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.12) 34%, transparent 52%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px);
  transform: translateX(-130%);
  mix-blend-mode: screen;
  animation: cardSweep 7s ease-in-out infinite;
}

.brand-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  color: #ddf9ff;
}

.brand-mark {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(85, 230, 255, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 28%, rgba(85, 255, 173, 0.32), transparent 44%),
    rgba(0, 12, 22, 0.72);
  box-shadow: var(--shadow-cyan);
  font-weight: 950;
}

.brand-copy {
  font-weight: 900;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.brand-status {
  margin-left: auto;
  padding: 0.48rem 0.65rem;
  border: 1px solid rgba(255, 177, 91, 0.28);
  border-radius: 999px;
  color: #ffd6a3;
  background: rgba(255, 177, 91, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h1 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: #f6fcff;
  text-wrap: balance;
  font-size: clamp(2.35rem, 5.7vw, 4.55rem);
  line-height: 0.96;
  letter-spacing: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  text-shadow:
    0 0 24px rgba(85, 230, 255, 0.28),
    0 0 70px rgba(44, 125, 255, 0.22);
}

.lead,
.subline {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.62;
}

.subline {
  color: #d9f8ff;
  font-weight: 760;
}

.status-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.status-badges span {
  position: relative;
  overflow: hidden;
  padding: 0.68rem 0.78rem;
  border: 1px solid rgba(118, 231, 255, 0.23);
  border-radius: 999px;
  color: #dffaff;
  background: rgba(10, 32, 48, 0.54);
  box-shadow: inset 0 0 18px rgba(85, 230, 255, 0.05);
  font-size: 0.82rem;
  font-weight: 760;
}

.status-badges span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(85, 230, 255, 0.18), transparent);
  transform: translateX(-120%);
  animation: badgePulse 5.8s ease-in-out infinite;
}

.status-badges span:nth-child(2)::before {
  animation-delay: -1.4s;
}

.status-badges span:nth-child(3)::before {
  animation-delay: -2.6s;
}

.status-badges span:nth-child(4)::before {
  animation-delay: -3.9s;
}

.progress-module {
  position: relative;
  z-index: 1;
  margin-top: 1.3rem;
  padding: 1rem 0 0;
}

.progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.62rem;
  color: #dffaff;
  font-weight: 850;
}

.progress-header span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--muted);
}

.progress-header strong {
  color: var(--green);
  text-shadow: var(--shadow-green);
}

.progress-track {
  position: relative;
  height: 0.72rem;
  overflow: hidden;
  border: 1px solid rgba(130, 230, 255, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(0, 8, 14, 0.78);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.82),
    0 0 28px rgba(85, 230, 255, 0.18);
}

.progress-fill {
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--cyan), var(--green) 64%, var(--orange)),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.2) 12px 14px);
  box-shadow:
    0 0 24px rgba(85, 230, 255, 0.65),
    0 0 30px rgba(85, 255, 173, 0.34);
  animation: progressBreath 3.8s ease-in-out infinite;
}

.progress-track i {
  position: absolute;
  top: -0.3rem;
  width: 2.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.44);
  filter: blur(8px);
  animation: packetTravel 2.8s linear infinite;
}

.progress-track i:nth-child(2) {
  animation-delay: -0.8s;
}

.progress-track i:nth-child(3) {
  animation-delay: -1.7s;
}

.server-status-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.status-tile {
  min-width: 0;
  padding: 0.92rem;
  border: 1px solid rgba(120, 230, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(3, 14, 24, 0.48);
  box-shadow: inset 0 0 22px rgba(85, 230, 255, 0.06);
}

.status-orb {
  margin-bottom: 0.75rem;
}

.status-orb-cyan {
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}

.status-orb-green {
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
}

.status-orb-orange {
  background: var(--orange);
  box-shadow: 0 0 16px var(--orange);
}

.status-tile small,
.status-tile strong {
  display: block;
}

.status-tile small {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.status-tile strong {
  margin-top: 0.24rem;
  color: #f2fbff;
  font-size: clamp(0.94rem, 1.8vw, 1.1rem);
}

.terminal-panel {
  position: fixed;
  right: clamp(0.7rem, 2vw, 2rem);
  bottom: clamp(0.7rem, 2vw, 2rem);
  z-index: 9;
  width: min(30rem, calc(100vw - 1.4rem));
  border: 1px solid rgba(85, 230, 255, 0.18);
  border-radius: 8px;
  background: rgba(2, 9, 15, 0.66);
  box-shadow:
    0 0 44px rgba(85, 230, 255, 0.1),
    inset 0 0 34px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(16px);
  overflow: hidden;
  transform: translate3d(0, var(--terminal-shift, 0px), 0);
}

.terminal-topline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid rgba(85, 230, 255, 0.14);
  color: #dffaff;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
}

.terminal-topline strong {
  margin-left: 0.45rem;
  color: rgba(224, 250, 255, 0.78);
  font-weight: 740;
}

.terminal-dot {
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px currentColor;
}

.terminal-dot:nth-child(2) {
  background: var(--green);
}

.terminal-dot:nth-child(3) {
  background: var(--orange);
}

.terminal-output {
  height: 9.5rem;
  padding: 0.72rem 0.85rem 0.9rem;
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.7rem, 1.3vw, 0.8rem);
  line-height: 1.55;
  color: rgba(194, 255, 232, 0.9);
  text-shadow: 0 0 12px rgba(85, 255, 173, 0.22);
}

.terminal-output p {
  margin: 0;
  opacity: 0;
  transform: translateY(0.5rem);
  animation: logIn 0.5s ease forwards;
}

.terminal-output span {
  color: rgba(85, 230, 255, 0.74);
  margin-right: 0.6rem;
}

.telemetry-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: min(1100px, 100%);
  margin: 0 auto clamp(4rem, 10vh, 8rem);
  border: 1px solid rgba(85, 230, 255, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(85, 230, 255, 0.12);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
}

.telemetry-item {
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: rgba(3, 13, 22, 0.72);
}

.telemetry-item span,
.telemetry-item strong {
  display: block;
}

.telemetry-item span {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.telemetry-item strong {
  margin-top: 0.5rem;
  color: #f4fcff;
  font-size: clamp(1.2rem, 3vw, 2rem);
  text-shadow: 0 0 20px rgba(85, 230, 255, 0.2);
}

@keyframes floorDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 116px;
  }
}

@keyframes ledField {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
    filter: brightness(1.4);
  }
}

@keyframes glassSweep {
  0%,
  55% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes cablePulse {
  0%,
  100% {
    opacity: 0.24;
    filter: drop-shadow(0 0 6px rgba(85, 230, 255, 0.24));
  }
  45% {
    opacity: 0.74;
    filter: drop-shadow(0 0 18px rgba(85, 230, 255, 0.7));
  }
}

@keyframes auroraFloat {
  from {
    transform: translate3d(-2vw, -1vh, 0) scale(1.04);
  }
  to {
    transform: translate3d(2vw, 2vh, 0) scale(1.11);
  }
}

@keyframes scanlines {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(48px);
  }
}

@keyframes radarPing {
  from {
    transform: scale(0.35);
    opacity: 0.8;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes borderEnergy {
  from {
    filter: hue-rotate(0deg) brightness(1);
  }
  to {
    filter: hue-rotate(22deg) brightness(1.2);
  }
}

@keyframes cardSweep {
  0%,
  58% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

@keyframes badgePulse {
  0%,
  65% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes progressBreath {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
}

@keyframes packetTravel {
  from {
    left: -8%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    left: 104%;
    opacity: 0;
  }
}

@keyframes logIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes headScan {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

@keyframes plugArm {
  0%,
  100% {
    transform: rotate(-65deg) translateY(0);
  }
  50% {
    transform: rotate(-83deg) translateY(-0.16rem);
  }
}

@keyframes cablePlug {
  0%,
  100% {
    transform: translateX(-0.22rem);
    opacity: 0.72;
  }
  50% {
    transform: translateX(0.22rem);
    opacity: 1;
  }
}

@keyframes tabletGlow {
  0%,
  100% {
    box-shadow: 0 0 0.65rem rgba(85, 230, 255, 0.42);
  }
  50% {
    box-shadow: 0 0 1.4rem rgba(85, 255, 173, 0.54);
  }
}

@keyframes doorInspect {
  0%,
  100% {
    transform: perspective(8rem) rotateY(-21deg);
  }
  50% {
    transform: perspective(8rem) rotateY(-43deg);
  }
}

@keyframes doorArm {
  0%,
  100% {
    transform: rotate(-76deg);
  }
  50% {
    transform: rotate(-96deg);
  }
}

@keyframes carryWalk {
  0%,
  100% {
    translate: -0.45rem 0;
  }
  50% {
    translate: 0.45rem -0.08rem;
  }
}

@keyframes incidentHaze {
  from {
    opacity: 0.72;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes defectiveRackJitter {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0.05rem -0.03rem;
  }
}

@keyframes redAlarm {
  0%,
  100% {
    opacity: 0.35;
    filter: brightness(0.8);
  }
  50% {
    opacity: 1;
    filter: brightness(1.7);
  }
}

@keyframes failedBayPulse {
  0%,
  100% {
    box-shadow: inset 0 0 12px rgba(255, 42, 42, 0.18), 0 0 10px rgba(255, 42, 42, 0.16);
  }
  50% {
    box-shadow: inset 0 0 28px rgba(255, 42, 42, 0.46), 0 0 28px rgba(255, 42, 42, 0.44);
  }
}

@keyframes intakeDoorBreath {
  0%,
  100% {
    transform: perspective(10rem) rotateY(-44deg);
  }
  50% {
    transform: perspective(10rem) rotateY(-58deg);
  }
}

@keyframes sparkOne {
  0% {
    opacity: 0;
    transform: rotate(54deg) scaleY(0.1) translateY(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(54deg) scaleY(1) translateY(2.8rem);
  }
}

@keyframes sparkTwo {
  0% {
    opacity: 0;
    transform: rotate(96deg) scaleY(0.12) translateY(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(96deg) scaleY(0.88) translateY(2.4rem);
  }
}

@keyframes sparkThree {
  0% {
    opacity: 0;
    transform: rotate(18deg) scaleY(0.12) translateY(0);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(18deg) scaleY(1.1) translateY(3.2rem);
  }
}

@keyframes smokeRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.8rem, 0) scale(0.5);
  }
  20% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate3d(1.2rem, -4.2rem, 0) scale(1.7);
  }
}

@keyframes patchCableSwapA {
  0%,
  100% {
    transform: rotate(-7deg) translate(0, 0);
  }
  42% {
    transform: rotate(12deg) translate(0.34rem, -0.18rem);
  }
  62% {
    transform: rotate(6deg) translate(0.75rem, -0.28rem);
  }
}

@keyframes patchCableSwapB {
  0%,
  100% {
    transform: rotate(9deg) translate(0, 0);
  }
  46% {
    transform: rotate(-12deg) translate(0.42rem, 0.18rem);
  }
  64% {
    transform: rotate(-5deg) translate(0.8rem, 0.28rem);
  }
}

@keyframes patchCableSwapC {
  0%,
  100% {
    transform: rotate(2deg) translate(0, 0);
  }
  50% {
    transform: rotate(19deg) translate(0.4rem, 0.12rem);
  }
}

@keyframes patchPulse {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  to {
    transform: translateX(5.8rem);
    opacity: 0;
  }
}

@keyframes laptopLog {
  0% {
    transform: translateX(-35%);
    opacity: 0.25;
  }
  40%,
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(24%);
    opacity: 0.42;
  }
}

@keyframes techHeadCheck {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

@keyframes carryCrewRoute {
  0% {
    transform: translate3d(-4vw, 3vh, 0) scale(0.78) rotate(-2deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  26% {
    transform: translate3d(15vw, -4vh, 0) scale(0.78) rotate(2deg);
  }
  48% {
    transform: translate3d(39vw, -10vh, 0) scale(0.74) rotate(-1deg);
  }
  66% {
    transform: translate3d(60vw, -16vh, 0) scale(0.68) rotate(1deg);
  }
  80% {
    transform: translate3d(66vw, -18vh, 0) scale(0.64) rotate(0deg);
    opacity: 1;
  }
  88% {
    transform: translate3d(66vw, -18vh, 0) scale(0.64) rotate(0deg);
    opacity: 0.24;
  }
  100% {
    transform: translate3d(-4vw, 3vh, 0) scale(0.78) rotate(-2deg);
    opacity: 0;
  }
}

@keyframes carryBob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.1rem;
  }
}

@keyframes carryHoldArms {
  0%,
  100% {
    transform: rotate(-54deg);
  }
  50% {
    transform: rotate(-62deg) translateY(-0.08rem);
  }
}

@keyframes walkLegA {
  0%,
  100% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(-14deg);
  }
}

@keyframes walkLegB {
  0%,
  100% {
    transform: rotate(-16deg);
  }
  50% {
    transform: rotate(18deg);
  }
}

@keyframes bladeInsert {
  0%,
  64% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  77% {
    transform: translate3d(1.8rem, -0.2rem, 0) scaleX(0.72);
    opacity: 1;
  }
  86%,
  100% {
    transform: translate3d(2.6rem, -0.2rem, 0) scaleX(0.22);
    opacity: 0;
  }
}

@keyframes patchHand {
  0%,
  100% {
    transform: rotate(-74deg) translateY(0);
  }
  45% {
    transform: rotate(-96deg) translateY(-0.18rem);
  }
  68% {
    transform: rotate(-62deg) translateY(0.08rem);
  }
}

@keyframes handCablePlug {
  0%,
  100% {
    transform: translate3d(-0.18rem, 0, 0) rotate(-6deg);
  }
  50% {
    transform: translate3d(0.36rem, -0.1rem, 0) rotate(8deg);
  }
}

@keyframes documentRoute {
  0% {
    transform: translate3d(68vw, -10vh, 0) scale(0.66) rotate(-3deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  26% {
    transform: translate3d(48vw, -16vh, 0) scale(0.7) rotate(4deg);
  }
  54% {
    transform: translate3d(25vw, -22vh, 0) scale(0.76) rotate(-5deg);
  }
  76% {
    transform: translate3d(8vw, -18vh, 0) scale(0.78) rotate(5deg);
  }
  88% {
    transform: translate3d(6vw, -18vh, 0) scale(0.78) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(68vw, -10vh, 0) scale(0.66) rotate(-3deg);
    opacity: 0;
  }
}

@keyframes runBodyTilt {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes runLegA {
  0%,
  100% {
    transform: rotate(24deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

@keyframes runLegB {
  0%,
  100% {
    transform: rotate(-24deg);
  }
  50% {
    transform: rotate(20deg);
  }
}

@keyframes folderGrip {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(-5deg) translateY(-0.08rem);
  }
}

@keyframes typeLeft {
  0%,
  100% {
    transform: rotate(44deg) translateY(0);
  }
  50% {
    transform: rotate(62deg) translateY(0.12rem);
  }
}

@keyframes typeRight {
  0%,
  100% {
    transform: rotate(-44deg) translateY(0);
  }
  50% {
    transform: rotate(-62deg) translateY(0.12rem);
  }
}

@keyframes crateRoute {
  0% {
    transform: translate3d(-8vw, 0, 0) scale(0.72);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  35% {
    transform: translate3d(20vw, -7vh, 0) scale(0.74);
  }
  66% {
    transform: translate3d(43vw, -13vh, 0) scale(0.72);
  }
  82% {
    transform: translate3d(52vw, -14vh, 0) scale(0.7);
    opacity: 1;
  }
  100% {
    transform: translate3d(-8vw, 0, 0) scale(0.72);
    opacity: 0;
  }
}

@keyframes toolCartRoute {
  0% {
    transform: translate3d(8vw, 0, 0) scale(0.78);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  36% {
    transform: translate3d(-18vw, -6vh, 0) scale(0.76);
  }
  66% {
    transform: translate3d(-47vw, -17vh, 0) scale(0.72);
  }
  84% {
    transform: translate3d(-57vw, -19vh, 0) scale(0.7);
    opacity: 1;
  }
  100% {
    transform: translate3d(8vw, 0, 0) scale(0.78);
    opacity: 0;
  }
}

@keyframes pushArm {
  0%,
  100% {
    transform: rotate(-64deg);
  }
  50% {
    transform: rotate(-78deg) translateY(0.08rem);
  }
}

@keyframes cartWheel {
  to {
    transform: rotate(360deg);
  }
}

@keyframes panicArmLeft {
  0%,
  100% {
    transform: rotate(132deg);
  }
  50% {
    transform: rotate(102deg) translateY(-0.16rem);
  }
}

@keyframes panicArmRight {
  0%,
  100% {
    transform: rotate(-132deg);
  }
  50% {
    transform: rotate(-102deg) translateY(-0.16rem);
  }
}

@keyframes panicHead {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(18deg);
  }
}

@keyframes franticLegA {
  0%,
  100% {
    transform: rotate(32deg);
  }
  50% {
    transform: rotate(-28deg);
  }
}

@keyframes franticLegB {
  0%,
  100% {
    transform: rotate(-32deg);
  }
  50% {
    transform: rotate(28deg);
  }
}

@keyframes panicOrbitA {
  0% {
    transform: translate3d(3.2rem, 0.2rem, 0) scale(0.64) rotate(0deg);
  }
  25% {
    transform: translate3d(7.2rem, 1.4rem, 0) scale(0.68) rotate(18deg);
  }
  50% {
    transform: translate3d(5.2rem, 4.4rem, 0) scale(0.72) rotate(-10deg);
  }
  75% {
    transform: translate3d(0.6rem, 3.2rem, 0) scale(0.66) rotate(-22deg);
  }
  100% {
    transform: translate3d(3.2rem, 0.2rem, 0) scale(0.64) rotate(0deg);
  }
}

@keyframes panicOrbitB {
  0% {
    transform: translate3d(7rem, 1.1rem, 0) scale(0.66) rotate(8deg);
  }
  25% {
    transform: translate3d(4.8rem, 4.6rem, 0) scale(0.72) rotate(-12deg);
  }
  50% {
    transform: translate3d(0.8rem, 2.7rem, 0) scale(0.67) rotate(-18deg);
  }
  75% {
    transform: translate3d(3.3rem, 0.1rem, 0) scale(0.64) rotate(16deg);
  }
  100% {
    transform: translate3d(7rem, 1.1rem, 0) scale(0.66) rotate(8deg);
  }
}

@keyframes panicOrbitC {
  0% {
    transform: translate3d(4.8rem, 4.2rem, 0) scale(0.72) rotate(-6deg);
  }
  25% {
    transform: translate3d(0.7rem, 2.8rem, 0) scale(0.66) rotate(-22deg);
  }
  50% {
    transform: translate3d(3.4rem, 0.3rem, 0) scale(0.64) rotate(12deg);
  }
  75% {
    transform: translate3d(7.1rem, 1.2rem, 0) scale(0.68) rotate(18deg);
  }
  100% {
    transform: translate3d(4.8rem, 4.2rem, 0) scale(0.72) rotate(-6deg);
  }
}

@media (max-width: 900px) {
  .page-shell {
    padding: 1rem;
  }

  .hero {
    padding-top: 5.2rem;
  }

  .glass-card {
    width: min(100%, 720px);
  }

  .server-status-grid,
  .telemetry-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .terminal-panel {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 11;
    width: min(100%, 720px);
    margin: -2rem auto 2rem;
  }

  .technician-layer {
    opacity: 0.46;
  }

  .technician-cable {
    left: 0.4rem;
    top: 57vh;
  }

  .technician-tablet {
    right: 0.4rem;
    top: 39vh;
  }

  .technician-door,
  .technician-carry {
    display: none;
  }

  .maintenance-stage {
    opacity: 0.72;
    transform: scale(0.82);
    transform-origin: center top;
  }

  .scene-rack-defective {
    left: -0.8rem;
    top: 24vh;
  }

  .scene-rack-intake {
    right: -0.8rem;
    top: 24vh;
  }

  .patch-panel {
    left: 0.5rem;
    top: 56vh;
  }

  .terminal-station {
    right: 0.4rem;
    top: 60vh;
  }

  .laptop-station {
    right: 4.6rem;
    top: 74vh;
  }

  .panic-ring {
    left: 0.2rem;
    top: 43vh;
  }

  .tech-patch {
    left: 3rem;
    top: 62vh;
  }

  .carry-crew {
    top: 72vh;
  }
}

@media (max-width: 620px) {
  h1 {
    font-size: clamp(1.8rem, 8.6vw, 2.65rem);
    line-height: 1.04;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .brand-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .brand-status {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .status-badges span {
    width: 100%;
  }

  .server-status-grid,
  .telemetry-band {
    grid-template-columns: 1fr;
  }

  .terminal-output {
    height: 8rem;
  }

  .maintenance-stage {
    opacity: 0.54;
    transform: scale(0.66);
    transform-origin: center top;
  }

  .service-rail {
    width: 85vw;
  }

  .scene-rack-defective {
    left: -1.9rem;
    top: 25vh;
  }

  .scene-rack-intake {
    right: -2.1rem;
    top: 25vh;
  }

  .panic-ring {
    left: -1rem;
    top: 47vh;
  }

  .patch-panel {
    left: -1rem;
    top: 60vh;
  }

  .terminal-station {
    right: -1.2rem;
    top: 62vh;
  }

  .laptop-station {
    right: 3rem;
    top: 80vh;
  }

  .toolcart-runner,
  .crate-runner,
  .doc-runner {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}