body {
  background-color: #0d1321;
  color: #dde2f6;
  scroll-behavior: smooth;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.glass-card {
  background: rgba(28, 37, 51, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(143, 144, 158, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: #bac3ff;
  transform: translateY(-4px);
}

.glass-morphism {
  background: rgba(28, 37, 51, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(143, 144, 158, 0.15);
}

.glass-panel {
  background: rgba(28, 37, 51, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(69, 70, 82, 0.4);
}

.text-gradient {
  background: linear-gradient(135deg, #bac3ff 0%, #44d8f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-btn-primary {
  background: linear-gradient(to bottom, #3f51b5, #303f9f);
}

.hero-btn-secondary {
  border: 2px solid #1e95f2;
}

.arcade-gradient {
  background: linear-gradient(135deg, #3f51b5 0%, #303f9f 100%);
}

.glow-text {
  text-shadow: 0 0 20px rgba(68, 216, 241, 0.4);
}

.glow-cyan {
  filter: drop-shadow(0 0 12px rgba(68, 216, 241, 0.35));
}

.indigo-glow {
  box-shadow: 0 0 40px rgba(63, 81, 181, 0.15);
}

.hero-gradient {
  background: radial-gradient(ellipse at top, rgba(63, 81, 181, 0.2) 0%, transparent 60%);
}

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

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.nav-link-active {
  color: #bac3ff !important;
  font-weight: 700;
  border-bottom: 2px solid #bac3ff;
  padding-bottom: 0.25rem;
}

#mobile-nav-menu {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}