:root {
  --cyber-black: #030509;
  --cyber-dark: #060a12;
  --cyber-panel: #0c1322;
  --cyber-border: #18253f;
  --cyber-cyan: #00F0FF;
  --cyber-blue: #0055FF;
  --cyber-purple: #8A2BE2;
  --cyber-green: #00FF66;
  --cyber-amber: #FFB800;
  --cyber-red: #FF003C;
  --glow-cyan-soft: rgba(0, 240, 255, 0.06);
  --glow-cyan-medium: rgba(0, 240, 255, 0.18);
  --glow-cyan-strong: rgba(0, 240, 255, 0.40);
  --glow-purple-soft: rgba(138, 43, 226, 0.10);
  --glow-green-soft: rgba(0, 255, 102, 0.10);
  --glow-amber-soft: rgba(255, 184, 0, 0.10);
  --glow-red-soft: rgba(255, 0, 60, 0.10);
  --panel-border-soft: rgba(24, 37, 63, 0.6);
}
body {
  background-color: var(--cyber-black);
}
.cyber-glass-red {
  background: rgba(18, 12, 16, 0.45);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 0, 60, 0.4);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 
              inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 -1px 0 rgba(255, 0, 60, 0.2),
              0 0 50px rgba(255, 0, 60, 0.25);
}
.btn-glow {
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.04), inset -1px -1px 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 0 24px var(--glow-cyan-medium);
}
.btn-glow:hover {
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.04), inset -1px -1px 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 0 32px var(--glow-cyan-strong);
}
.btn-glow-red {
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.04), inset -1px -1px 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 0 24px rgba(255, 0, 60, 0.25);
}
.btn-glow-red:hover {
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.04), inset -1px -1px 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 0 32px rgba(255, 0, 60, 0.45);
}
.connector-flow-cyan {
  animation: march 1.5s linear infinite;
}
.connector-flow-purple {
  animation: march 1.5s linear infinite;
}
@keyframes march {
  0% { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}
@keyframes flow-packet {
  0% { transform: translate(20px, 0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(300px, 0); opacity: 0; }
}
.packet-p1, .packet-text-p1 { animation: flow-packet 4s infinite linear; }
.packet-p2, .packet-text-p2 { animation: flow-packet 4s infinite linear; animation-delay: 1.33s; }
.packet-p3, .packet-text-p3 { animation: flow-packet 4s infinite linear; animation-delay: 2.66s; }
.svg-line-glow {
  animation: stroke-glow 4s infinite linear;
}
@keyframes stroke-glow {
  0% { stroke-dashoffset: 120; }
  100% { stroke-dashoffset: -120; }
}
@keyframes topology-flow1 {
  0% { cx: 200; cy: 100; opacity: 1; }
  100% { cx: 80; cy: 40; opacity: 0.2; }
}
@keyframes topology-flow2 {
  0% { cx: 200; cy: 100; opacity: 1; }
  100% { cx: 300; cy: 70; opacity: 0.2; }
}
.topology-flow-dot1 { animation: topology-flow1 2s infinite linear; }
.topology-flow-dot2 { animation: topology-flow2 2.5s infinite linear; }
@keyframes red-pulse {
  0% { r: 11; fill-opacity: 0.2; }
  50% { r: 15; fill-opacity: 0.6; }
  100% { r: 11; fill-opacity: 0.2; }
}
.pulse-red-node { animation: red-pulse 2s infinite ease-in-out; }
@keyframes radar-pulse {
  0% { r: 10; opacity: 0.8; }
  100% { r: 45; opacity: 0; }
}
.radar-circle-1 { animation: radar-pulse 3s infinite linear; }
.radar-circle-2 { animation: radar-pulse 3s infinite linear; animation-delay: 1.5s; }
@keyframes radar-sweep {
  0% { transform: rotate(0deg); transform-origin: 50px 50px; }
  100% { transform: rotate(360deg); transform-origin: 50px 50px; }
}
.radar-sweeper { animation: radar-sweep 4s infinite linear; }
@keyframes alert-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}
.radar-dot-pulse {
  animation: alert-pulse 1.5s infinite ease-in-out;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--cyber-cyan);
  transition: width 250ms ease, left 250ms ease;
}
.nav-link:hover::after {
  width: 100%;
  left: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .packet-p1, .packet-p2, .packet-p3, .packet-text-p1, .packet-text-p2, .packet-text-p3,
  .svg-line-glow, .topology-flow-dot1, .topology-flow-dot2, .pulse-red-node,
  .radar-circle-1, .radar-circle-2, .radar-sweeper, .radar-dot-pulse {
    animation: none !important;
    opacity: 1 !important;
  }
}