.hero {
  aspect-ratio: 2.46 / 1;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}
.hero-services span {
  position: absolute;
  z-index: 4;
  top: 65.5%;
  width: 18.7%;
  height: 31%;
  cursor: default;
  background-image: url('../images/neon-nights-master.png');
  background-size: 535% auto;
  background-position-y: 49.2%;
  background-repeat: no-repeat;
  border: 1px solid #00eaff55;
  box-shadow: inset 0 0 18px #00eaff18, 0 0 7px #00eaff38;
  overflow: hidden;
  isolation: isolate;
  animation: servicePulse 3.6s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2,.75,.25,1.2), box-shadow .35s ease, border-color .35s ease, filter .35s ease;
}
.hero-services span::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -30% auto -30% -55%;
  width: 34%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-16deg);
  background: linear-gradient(90deg,transparent,#00eaff22 25%,#fff9 50%,#ff34d244 72%,transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: serviceSweep 4.8s ease-in-out infinite;
}
.hero-services span::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  border: 1px solid #00eaffaa;
  box-shadow: inset 0 0 10px #00eaff55, inset 0 0 20px #ff34d222;
  animation: edgeGlow 2.8s ease-in-out infinite;
}
.hero-services span:nth-child(1) {left:2%;background-position-x:2.46%;animation-delay:0s}
.hero-services span:nth-child(2) {left:21.6%;background-position-x:26.57%;animation-delay:.35s}
.hero-services span:nth-child(3) {left:41.1%;background-position-x:50.55%;animation-delay:.7s}
.hero-services span:nth-child(4) {left:60%;background-position-x:73.8%;animation-delay:1.05s}
.hero-services span:nth-child(5) {left:79.2%;background-position-x:97.4%;animation-delay:1.4s}
.hero-services span:nth-child(2)::before {animation-delay:.65s}
.hero-services span:nth-child(3)::before {animation-delay:1.3s}
.hero-services span:nth-child(4)::before {animation-delay:1.95s}
.hero-services span:nth-child(5)::before {animation-delay:2.6s}
.hero-services span:nth-child(2)::after {animation-delay:.35s}
.hero-services span:nth-child(3)::after {animation-delay:.7s}
.hero-services span:nth-child(4)::after {animation-delay:1.05s}
.hero-services span:nth-child(5)::after {animation-delay:1.4s}
.hero-services span:hover {
  z-index: 6;
  transform: translateY(-9px) scale(1.045);
  border-color: #c9fbff;
  filter: brightness(1.18) saturate(1.18);
  box-shadow: 0 0 22px #00eaffcc, 0 0 44px #ff34d288, inset 0 0 22px #00eaff44;
  animation-play-state: paused;
}
.hero-services span:hover::after {border-color:#fff;box-shadow:inset 0 0 16px #00eaffaa,0 0 12px #ff34d2aa}
@keyframes servicePulse {
  0%,100% {box-shadow:inset 0 0 16px #00eaff16,0 0 5px #00eaff30}
  50% {box-shadow:inset 0 0 23px #ff34d22b,0 0 13px #00eaff72,0 0 21px #ff34d238}
}
@keyframes serviceSweep {
  0%,18% {left:-55%;opacity:0}
  28% {opacity:.82}
  55% {left:125%;opacity:.42}
  66%,100% {left:125%;opacity:0}
}
@keyframes edgeGlow {
  0%,100% {opacity:.48;border-color:#00eaff9c}
  50% {opacity:1;border-color:#ff34d2d6}
}
.planning-display {
  position: absolute;
  z-index: 2;
  left: 5%;
  top: 8%;
  width: 47%;
  height: 48%;
  padding: 6% 5%;
  overflow: hidden;
  pointer-events: none;
  color: #bffcff;
  font: 600 clamp(8px,.72vw,12px)/1.75 "Courier New",monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 7px #00eaff;
  background:
    linear-gradient(#00eaff0b 1px,transparent 1px),
    linear-gradient(90deg,#00eaff0b 1px,transparent 1px),
    radial-gradient(circle at 45% 50%,#00eaff15,transparent 65%);
  background-size: 18px 18px,18px 18px,100% 100%;
  border: 1px solid #00eaff2b;
  box-shadow: inset 0 0 24px #00eaff12,0 0 12px #00eaff0d;
  mix-blend-mode: screen;
  opacity: .52;
  animation: planningFlicker 5.5s ease-in-out infinite;
}
.planning-display span {display:block;white-space:nowrap;animation:dataBlink 4s steps(1,end) infinite}
.planning-display span:nth-child(2){animation-delay:.6s}.planning-display span:nth-child(3){animation-delay:1.2s}.planning-display span:nth-child(4){animation-delay:1.8s}.planning-display span:nth-child(5){animation-delay:2.4s}
.planning-display .plan-label {margin-bottom:5%;padding-bottom:3%;color:#ffb9ef;border-bottom:1px solid #ff34d255;font-weight:900;letter-spacing:.12em}
.planning-display::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-18%;
  height:16%;
  background:linear-gradient(180deg,transparent,#bffcff38,transparent);
  filter:blur(3px);
  animation:planningScan 4.2s linear infinite;
}
.planning-display i {
  position:absolute;
  right:8%;
  bottom:10%;
  width:30%;
  height:22%;
  border-left:1px solid #00eaff66;
  border-bottom:1px solid #00eaff66;
  background:linear-gradient(145deg,transparent 0 20%,#00eaff88 21% 23%,transparent 24% 42%,#ff34d288 43% 46%,transparent 47% 63%,#00eaffaa 64% 67%,transparent 68%);
  animation:graphPulse 2.7s ease-in-out infinite;
}
@keyframes planningScan {to{top:108%}}
@keyframes planningFlicker {0%,100%{opacity:.43}45%{opacity:.58}48%{opacity:.38}52%{opacity:.57}}
@keyframes dataBlink {0%,92%,100%{opacity:.9}94%{opacity:.35}96%{opacity:1}}
@keyframes graphPulse {0%,100%{opacity:.45;filter:brightness(.85)}50%{opacity:.9;filter:brightness(1.35)}}
.stage-light-motion {
  position: absolute;
  z-index: 2;
  left: 34%;
  top: 7%;
  width: 45%;
  height: 46%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(.4px);
}
.stage-light-motion span {
  position: absolute;
  top: -8%;
  width: 9%;
  height: 125%;
  opacity: .18;
  transform-origin: 50% 0;
  background: linear-gradient(180deg,#bffcffcc 0,#00d9ff55 28%,#00d9ff0a 78%,transparent);
  clip-path: polygon(42% 0,58% 0,100% 100%,0 100%);
  animation: beamSweep 7s ease-in-out infinite;
}
.stage-light-motion span:nth-child(1) {left:8%;background:linear-gradient(180deg,#fff 0,#00eaff66 30%,transparent 85%);animation-delay:-1.4s}
.stage-light-motion span:nth-child(2) {left:34%;background:linear-gradient(180deg,#ffd6f8 0,#ff34d266 32%,transparent 82%);animation-duration:8.5s;animation-delay:-4.2s}
.stage-light-motion span:nth-child(3) {left:62%;background:linear-gradient(180deg,#fff 0,#786cff66 32%,transparent 84%);animation-duration:6.3s;animation-delay:-2.7s}
.stage-light-motion span:nth-child(4) {left:86%;background:linear-gradient(180deg,#fff3c9 0,#ffb30055 30%,transparent 82%);animation-duration:9.2s;animation-delay:-6s}
@keyframes beamSweep {
  0%,100% {transform:rotate(-12deg) scaleX(.7);opacity:.1}
  45% {transform:rotate(13deg) scaleX(1.15);opacity:.28}
  70% {transform:rotate(-4deg) scaleX(.9);opacity:.18}
}
@media (max-width:800px) {.hero{aspect-ratio:auto;min-height:650px}.hero>img{position:absolute;width:285%;max-width:none;height:100%;object-fit:cover;object-position:52% top;opacity:.72}.stage-light-motion{left:16%;top:7%;width:78%;height:48%;opacity:.8}.hero-services{display:none}.planning-display{font-size:7px;width:50%;height:45%}}
@media (prefers-reduced-motion:reduce) {.stage-light-motion span,.hero-services span,.hero-services span::before,.hero-services span::after,.planning-display,.planning-display span,.planning-display::after,.planning-display i{animation:none}}