@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap");

:root {
  --primary: #5d00ff;
  --primary-dark: #4a00cc;
  --primary-light: #efebff;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 80px;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

.border-glow-purple:hover {
  border-color: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
.border-glow-teal:hover {
  border-color: #14b8a6;
  box-shadow: 0 0 20px rgba(20, 184, 166, 0.2);
}

.gradient-text {
  background: linear-gradient(90deg, var(--primary), #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-bg {
  background:
    radial-gradient(circle at top right, rgba(93, 0, 255, 0.05), transparent),
    radial-gradient(
      circle at bottom left,
      rgba(168, 85, 247, 0.03),
      transparent
    );
}

.bg-primary {
  background-color: var(--primary);
}
.text-primary {
  color: var(--primary);
}
.border-primary {
  border-color: var(--primary);
}
.hover-bg-primary:hover {
  background-color: var(--primary-dark);
}

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

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-gradient {
  background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #f1f5f9 100%);
}
.glow-effect {
  box-shadow: 0 0 40px -10px rgba(79, 70, 229, 0.3);
}
.text-gradient {
  background: linear-gradient(135deg, #1e293b 0%, #4f46e5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes bounce-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}