.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(2, 3, 16, 0.97) 0%,
    rgba(7, 11, 40, 0.95) 50%,
    rgba(2, 3, 16, 0.98) 100%
  );
}

.cyber-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(90deg, var(--accent-glow) 1px, transparent 1px),
    linear-gradient(var(--accent-glow) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.07;
  animation: gridMove 15s linear infinite;
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

@keyframes gridMove {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(25px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Add these variables to your root CSS */
:root {
  --primary-bg: #020310;
  --secondary-bg: #070b28;
  --accent-color: #00e5ff;
  --accent-glow: rgba(0, 229, 255, 0.15);
  --text-color: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
}