body {
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(to right, #e9ecf5, #f4f6fa);
  color: #1b1f31;
  transition: background 0.3s ease, color 0.3s ease;
}

.navbar {
  background-color: #ffffffcc;
  backdrop-filter: blur(8px);
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link:focus {
  color: #bf5aff !important;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #bf5aff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
  box-shadow: 0 0 12px #bf5aff, 0 0 18px #bf5aff;
}

.hero {
  background: linear-gradient(135deg, #d2d9f7, #ffffff);
  padding: 100px 0;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 600;
}

.section {
  padding: 60px 0;
}

.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
} 

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 20px rgba(191, 90, 255, 0.4);
}

footer {
  background: #f0f2f8;
  padding: 30px 0;
  text-align: center;
}

/* Dark Mode Styles */
body.dark {
  background: #1e1f25;
  color: #e0e0e0;
}
body.dark .navbar {
  background-color: #2a2b30cc;
  color: #e0e0e0;
}
body.dark .hero {
  background: linear-gradient(135deg, #292c34, #1e1f25);
}
body.dark .card {
  background-color: #2a2b30;
  color: #f0f0f0;
}
body.dark footer {
  background: #2a2b30;
}
body.dark .changelog-section {
  background-color: #2a2b30 !important;
}
body.dark .contact-section {
  background-color: #1e1f25 !important;
}
body.dark .form-section {
  background-color: #2a2b30 !important;
}