/* Base Styles */
:root {
  --color-neon: #00FF9D;
  --color-black: #000000;
  --color-dark-gray: #111111;
  --color-iq: #ff5a00;
}

body {
  background-color: var(--color-black);
  color: white;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Custom Utility Classes */
.text-neon {
  color: var(--color-neon);
}

.text-iq {
  color: var(--color-iq);
}

.bg-neon {
  background-color: var(--color-neon);
}

.bg-iq {
  background-color: var(--color-iq);
}

.border-neon {
  border-color: var(--color-neon);
}

.glow-neon {
  box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
}

.glow-neon-strong {
  box-shadow: 0 0 25px rgba(0, 255, 157, 0.7), 0 0 50px rgba(0, 255, 157, 0.3);
}

.text-gradient-neon {
  background: linear-gradient(to right, #ffffff, #00FF9D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scroll Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Button Hover Effects */
.btn-neon {
  transition: all 0.3s ease;
}

.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}