.infra-scene {
  perspective: 1300px;
  perspective-origin: center;
}
.infra-world {
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-8deg) rotateZ(0deg);
  transition: transform .15s ease-out;
  animation: worldFloat 7s ease-in-out infinite;
}
@keyframes worldFloat {
  0%, 100% {
    transform: translateY(0) rotateX(7deg) rotateY(-8deg);
  }
  50% {
    transform: translateY(-10px) rotateX(5deg) rotateY(-4deg);
  }
}
.world-grid {
  position: absolute;
  inset: 70px 10px 0;
  transform: rotateX(68deg) translateZ(-80px);
  transform-origin: bottom;
  background-image: linear-gradient(rgba(34,211,238,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle, black 25%, transparent 72%);
  opacity: .65;
}
.world-platform {
  position: absolute;
  width: 340px;
  height: 240px;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotateX(65deg) translateZ(-65px);
  border: 1px solid rgba(56,189,248,.13);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(15,23,42,.8), rgba(3,7,18,.6));
  box-shadow: 0 0 80px rgba(37,99,235,.08), inset 0 0 60px rgba(34,211,238,.025);
}
.server-cluster {
  position: absolute;
  width: 280px;
  height: 250px;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) translateZ(45px);
  transform-style: preserve-3d;
}
.server-tower {
  position: absolute;
  transform-style: preserve-3d;
}
.tower-main {
  width: 126px;
  height: 205px;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%) translateZ(60px);
}
.tower-left {
  width: 83px;
  height: 150px;
  left: 3px;
  top: 68px;
  transform: rotateY(7deg) translateZ(8px);
  opacity: .8;
}
.tower-right {
  width: 83px;
  height: 150px;
  right: 0;
  top: 68px;
  transform: rotateY(-9deg) translateZ(6px);
  opacity: .85;
}
.server-front {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(18,29,50,.98), rgba(5,9,18,.99));
  border: 1px solid rgba(71,85,105,.62);
  transform: translateZ(19px);
  box-shadow: 0 25px 45px rgba(0,0,0,.5), 0 0 40px rgba(37,99,235,.10), inset 0 1px rgba(255,255,255,.04);
}
.server-side {
  position: absolute;
  top: 1px;
  right: -18px;
  width: 38px;
  height: calc(100% - 2px);
  transform: rotateY(90deg);
  transform-origin: left center;
  background: linear-gradient(180deg, #0e1728, #040711);
  border: 1px solid rgba(51,65,85,.55);
}
.server-top {
  position: absolute;
  width: 100%;
  height: 38px;
  left: 0;
  top: -18px;
  transform: rotateX(90deg);
  transform-origin: bottom;
  background: linear-gradient(135deg, #182640, #080d17);
  border: 1px solid rgba(71,85,105,.5);
  border-radius: 7px;
}
.rack-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 10px;
  border-bottom: 1px solid rgba(51,65,85,.55);
}
.main-live-dot {
  width: 6px;
  height: 6px;
  background: #34d399;
  border-radius: 100%;
  box-shadow: 0 0 10px #34d399;
  animation: ledBlink 1.5s infinite;
}
.rack-title {
  height: 28px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 7px;
  letter-spacing: .2em;
  color: #64748b;
  border-bottom: 1px solid rgba(51,65,85,.45);
}
.rack-unit {
  min-height: 20px;
  margin: 5px 5px 0;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(17,27,45,.9), rgba(9,15,27,.92));
  border: 1px solid rgba(51,65,85,.45);
  border-radius: 4px;
}
.main-unit {
  min-height: 21px;
}
.rack-led {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #22d3ee;
  box-shadow: 0 0 7px rgba(34,211,238,.9);
  animation: randomBlink 2s ease-in-out infinite;
}
.blue-led {
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96,165,250,.9);
}
.rack-unit:nth-child(odd) .rack-led {
  animation-delay: -.8s;
}
.rack-unit:nth-child(even) .rack-led {
  animation-delay: -1.4s;
}
.rack-slots {
  display: flex;
  gap: 2px;
}
.rack-slots span {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 1px;
  background: rgba(100,116,139,.38);
}
@keyframes randomBlink {
  0%, 45%, 100% {
    opacity: 1;
  }
  50%, 65% {
    opacity: .18;
  }
}
@keyframes ledBlink {
  50% {
    opacity: .2;
  }
}
.floating-card {
  position: absolute;
  padding: 12px 14px;
  min-width: 132px;
  z-index: 30;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(15,23,42,.90), rgba(7,12,24,.80));
  border: 1px solid rgba(56,189,248,.18);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.035);
  transform-style: preserve-3d;
  animation: floatingPanel 5s ease-in-out infinite;
}
@keyframes floatingPanel {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -7px;
  }
}
.cdn-card {
  top: 50px;
  right: -14px;
  transform: rotateY(-8deg) translateZ(70px);
}
.security-card {
  top: 155px;
  right: -20px;
  transform: rotateY(-7deg) translateZ(75px);
  animation-delay: -1.4s;
}
.kubernetes-card {
  top: 85px;
  left: -25px;
  transform: rotateY(8deg) translateZ(60px);
  animation-delay: -2.1s;
}
.deploy-card {
  width: 158px;
  bottom: 28px;
  right: 5px;
  transform: rotateY(-5deg) translateZ(95px);
  animation-delay: -2.7s;
}
.icon-box {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #67e8f9;
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.18);
  box-shadow: inset 0 0 18px rgba(34,211,238,.04);
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: ledBlink 1.4s infinite;
}
.mini-pod {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  border-radius: 4px;
  border: 1px solid rgba(34,211,238,.4);
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(59,130,246,.08));
  box-shadow: 0 0 10px rgba(34,211,238,.05);
}
.deploy-chart {
  position: relative;
  width: 100%;
  height: 34px;
  overflow: hidden;
  border-bottom: 1px solid rgba(34,211,238,.12);
  background: repeating-linear-gradient(to right, transparent, transparent 15px, rgba(51,65,85,.12) 16px);
}
.deploy-chart span {
  position: absolute;
  left: 0;
  top: 17px;
  width: 170%;
  height: 1px;
  background: #22d3ee;
  box-shadow: 0 0 9px rgba(34,211,238,.8);
  transform: rotate(-4deg);
  animation: chartMove 3s linear infinite;
}
.deploy-chart span::before,
.deploy-chart span::after {
  content: "";
  position: absolute;
  width: 35px;
  height: 1px;
  background: #34d399;
  transform: rotate(24deg);
}
.deploy-chart span::before {
  left: 30px;
}
.deploy-chart span::after {
  left: 90px;
  transform: rotate(-23deg);
}
@keyframes chartMove {
  from {
    translate: -30px 0;
  }
  to {
    translate: 20px 0;
  }
}
.cloud-module {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%) translateZ(120px);
  z-index: 25;
}
.cloud-icon {
  width: 78px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  color: #bfdbfe;
  font-size: 39px;
  background: linear-gradient(145deg, rgba(59,130,246,.40), rgba(34,211,238,.10));
  border: 1px solid rgba(96,165,250,.38);
  box-shadow: 0 18px 40px rgba(37,99,235,.20), 0 0 45px rgba(34,211,238,.13), inset 0 2px rgba(255,255,255,.10);
  animation: cloudFloat 4s ease-in-out infinite;
}
@keyframes cloudFloat {
  50% {
    transform: translateY(-9px);
  }
}
.cloud-rays {
  position: absolute;
  left: 50%;
  top: 53px;
  transform: translateX(-50%);
  width: 55px;
  display: flex;
  justify-content: space-around;
}
.cloud-rays span {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, #22d3ee, transparent);
  opacity: .25;
  animation: cloudRay 1.8s ease-in-out infinite;
}
.cloud-rays span:nth-child(2) {
  animation-delay: -.4s;
}
.cloud-rays span:nth-child(3) {
  animation-delay: -.8s;
}
.cloud-rays span:nth-child(4) {
  animation-delay: -1.1s;
}
@keyframes cloudRay {
  0%, 100% {
    transform: scaleY(.3);
    opacity: .15;
  }
  50% {
    transform: scaleY(1);
    opacity: .55;
  }
}
.globe-wrap {
  position: absolute;
  right: 30px;
  top: 15px;
  width: 92px;
  height: 92px;
  z-index: 20;
  transform: translateZ(85px);
}
.globe {
  position: absolute;
  inset: 8px;
  border-radius: 100%;
  border: 1px solid rgba(34,211,238,.5);
  background: radial-gradient(circle at 35% 30%, rgba(96,165,250,.22), rgba(6,12,25,.6) 58%);
  box-shadow: inset 0 0 22px rgba(34,211,238,.2), 0 0 28px rgba(34,211,238,.12);
  animation: globeSpin 9s linear infinite;
}
.globe-line {
  position: absolute;
  inset: 7px;
  border-radius: 100%;
  border: 1px solid rgba(34,211,238,.22);
}
.globe-line-1 {
  transform: scaleX(.35);
}
.globe-line-2 {
  transform: scaleY(.35);
}
.globe-line-3 {
  transform: rotate(45deg) scaleX(.45);
}
.globe-core {
  position: absolute;
  inset: 29px;
  background: #38bdf8;
  border-radius: 100%;
  filter: blur(5px);
  opacity: .45;
}
@keyframes globeSpin {
  to {
    transform: rotate(360deg);
  }
}
.globe-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.22);
  animation: ringRotate 5s linear infinite;
}
.ring-one {
  transform: rotateX(72deg) rotateZ(15deg);
}
.ring-two {
  transform: rotateY(65deg) rotateZ(40deg);
  animation-direction: reverse;
}
@keyframes ringRotate {
  to {
    rotate: 360deg;
  }
}
.globe-point {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #f97316;
  box-shadow: 0 0 8px #f97316;
}
.point-a {
  top: 18px;
  left: 24px;
}
.point-b {
  right: 20px;
  top: 31px;
}
.point-c {
  bottom: 17px;
  left: 35px;
}
.database-node {
  position: absolute;
  left: 20px;
  bottom: 35px;
  width: 75px;
  height: 92px;
  z-index: 22;
  transform: translateZ(80px);
}
.database-body {
  position: absolute;
  left: 10px;
  top: 15px;
  width: 55px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #67e8f9;
  font-size: 24px;
  background: linear-gradient(145deg, rgba(17,28,48,.98), rgba(4,8,17,.98));
  border: 1px solid rgba(34,211,238,.25);
  box-shadow: 0 0 25px rgba(34,211,238,.08);
}
.database-top {
  position: absolute;
  left: 15px;
  top: 8px;
  width: 45px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.35);
  background: rgba(34,211,238,.10);
  z-index: 2;
}
.database-ring {
  position: absolute;
  left: 3px;
  bottom: 5px;
  width: 68px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.18);
  animation: dbPulse 2s ease-out infinite;
}
.db-ring-2 {
  animation-delay: -1s;
}
@keyframes dbPulse {
  from {
    transform: scale(.7);
    opacity: 1;
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}
.db-label {
  position: absolute;
  left: 70px;
  top: 29px;
  white-space: nowrap;
  font-size: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(34,211,238,.15);
  border-radius: 7px;
  background: rgba(7,12,23,.88);
  backdrop-filter: blur(10px);
}
.db-label span {
  color: #64748b;
}
.db-label strong {
  display: block;
  margin-top: 2px;
  color: #34d399;
}
.pipeline {
  position: absolute;
  left: 78px;
  bottom: 90px;
  width: 300px;
  height: 130px;
  z-index: 10;
  transform: rotateX(58deg) translateZ(5px);
  pointer-events: none;
}
.pipeline-track {
  position: absolute;
  left: 0;
  top: 70px;
  width: 100%;
  height: 5px;
  border-radius: 30px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.7), rgba(59,130,246,.9), transparent);
  box-shadow: 0 0 15px rgba(34,211,238,.5);
  transform: rotate(-7deg);
}
.pipeline-track-two {
  top: 93px;
  background: linear-gradient(90deg, transparent, rgba(249,115,22,.4), rgba(139,92,246,.8), transparent);
  box-shadow: 0 0 15px rgba(139,92,246,.4);
  transform: rotate(9deg);
}
.pipeline-packet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #67e8f9;
  box-shadow: 0 0 12px #22d3ee;
  animation: packetFlow 3s linear infinite;
}
.packet-one {
  top: 66px;
  left: 0;
}
.packet-two {
  top: 90px;
  left: 0;
  background: #a78bfa;
  box-shadow: 0 0 12px #8b5cf6;
  animation-delay: -1.2s;
}
.packet-three {
  top: 67px;
  left: 0;
  animation-delay: -2.1s;
}
@keyframes packetFlow {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(290px) rotate(360deg);
    opacity: 0;
  }
}
@media (max-width: 1100px) {
  .infra-world {
    transform: scale(.90) rotateX(7deg) rotateY(-6deg);
  }
}
@media (max-width: 640px) {
  .infra-scene {
    min-height: 470px;
  }
  .infra-world {
    transform: scale(.68) rotateX(6deg) rotateY(-5deg);
    animation: none;
  }
}