@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
    font-family: 'Inter', sans-serif;
}
/* Custom scrollbar for a sleek look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #2a3040; /* Darker track */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #4a5568; /* Grayish thumb */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6b7280; /* Lighter gray on hover */
}
/* Basic animations for elements */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; } 

/* Vibrant glassy panel effect */
.bg-gray-800.rounded-xl {
  position: relative;
  background: linear-gradient(145deg, rgba(31,41,55,0.9) 0%, rgba(17,24,39,0.9) 100%);
  border: 1px solid rgba(99,102,241,0.25); /* indigo border */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bg-gray-800.rounded-xl::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, rgba(34,211,238,0.5), rgba(139,92,246,0.4), rgba(99,102,241,0.5));
  filter: blur(22px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.bg-gray-800.rounded-xl:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 28px rgba(34,211,238,0.25), 0 6px 12px rgba(17,24,39,0.5);
  border-color: rgba(34,211,238,0.55);
}

.bg-gray-800.rounded-xl:hover::before {
  opacity: 1;
} 

/* Particle Network Animation Styles */
.particle-network-animation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* optional background image; disable to let hero gradient show */
.particle-network-animation::before {
  z-index: -2;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background-image optional */
  opacity: 0;
}
.glow {
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
}
.glow-1 {
  width: 150vw;
  height: 150vh;
  margin-top: -75vh;
  margin-left: -75vw;
  animation: glow-1-move 25s linear infinite both;
}
@keyframes glow-1-move {
  from {
    transform: translate(-100%, 100%);
  }
  to {
    transform: translate(100%, -100%);
  }
}
.glow-2 {
  width: 100vw;
  height: 100vh;
  margin-top: -50vh;
  margin-left: -50vw;
  animation: glow-2-move 25s linear 8.333s infinite both;
}
@keyframes glow-2-move {
  from {
    transform: translate(-100%, 0%);
  }
  to {
    transform: translate(100%, 100%);
  }
}
.glow-3 {
  width: 120vw;
  height: 120vh;
  margin-top: -60vh;
  margin-left: -60vw;
  animation: glow-3-move 25s linear 16.666s infinite both;
}
@keyframes glow-3-move {
  from {
    transform: translate(100%, 100%);
  }
  to {
    transform: translate(0%, -100%);
  }
}