body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #000;
  overflow-x: hidden;
}

/* Video Background */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.4) 0%, transparent 50%),
              radial-gradient(circle at 75% 75%, rgba(52, 211, 153, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(6, 95, 70, 0.5) 0%, transparent 70%),
              linear-gradient(135deg, #0a4d3a 0%, #065f46 25%, #047857 50%, #059669 75%, #10b981 100%);
  background-size: 200% 200%, 150% 150%, 300% 300%, 100% 100%;
  animation: gradientShift 12s ease infinite;
}

.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.8) 0%, 
    rgba(6, 95, 70, 0.7) 25%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(6, 95, 70, 0.7) 75%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: -1;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glass Effects */
.glass-navbar {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.glass-card {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-button {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(16, 185, 129, 0.8);
  color: #10b981;
}

.neon-card {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
}

/* Animations */
.animate-fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

.animate-slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 0.8s ease forwards;
}

.animate-slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  animation: slideInRight 0.8s ease forwards;
}

.animate-bounce-slow {
  animation: bounceSlow 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-10px);
}

/* Animation Delays */
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-1000 { animation-delay: 1s; }

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

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
  0%, 100% { 
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
    transform: scale(1);
  }
  50% { 
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
    transform: scale(1.05);
  }
}

/* Holographic Text */
.holographic-text {
  background: linear-gradient(45deg, #10b981, #34d399, #6ee7b7, #10b981);
  background-size: 300% 300%;
  animation: hologram 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
}

/* Text Shadows for Better Visibility */
.drop-shadow-2xl {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);
}

.drop-shadow-lg {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes hologram {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Neon Buttons */
.neon-button {
  background: transparent;
  border: 2px solid #10b981;
  color: #10b981;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.neon-button:hover {
  color: #000;
  background: #10b981;
  box-shadow: 0 0 30px #10b981;
  transform: scale(1.05);
}

/* Particles */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  background: rgba(16, 185, 129, 0.6);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* Progress Bar Animation */
.animate-progress-fill {
  width: 0;
  animation: progressFill 3s ease-out forwards;
}

@keyframes progressFill {
  0% { width: 0%; }
  100% { width: 85%; }
}