:root {
  --accent: #fcd34d;
  --glass: rgba(15, 23, 42, 0.65);
}

body {
  background-color: #020617;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  letter-spacing: 0.01em;
}

.animated-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: radial-gradient(
      circle at top,
      rgba(255, 255, 255, 0.08),
      transparent 50%
    ),
    radial-gradient(circle at 20% 20%, rgba(76, 29, 149, 0.5), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(236, 72, 153, 0.35), transparent 50%),
    #020617;
}

.bg-gradient-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.85),
    rgba(2, 6, 23, 0.9)
  );
}

.light-wave {
  position: absolute;
  inset: 20% auto auto -10%;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25),
    transparent 70%
  );
  filter: blur(10px);
  animation: slow-rotate 12s linear infinite;
}

.floating-shape {
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.4),
    rgba(12, 74, 110, 0.15)
  );
  border-radius: 2rem;
  animation: float 9s ease-in-out infinite;
  filter: blur(0.5px);
}

.floating-shape.spot-one {
  left: 8%;
  top: 25%;
  animation-duration: 9s;
}
.floating-shape.spot-two {
  right: 5%;
  top: 18%;
  animation-duration: 11s;
}
.floating-shape.spot-three {
  left: 15%;
  bottom: 20%;
  animation-duration: 8s;
}
.floating-shape.spot-four {
  right: 15%;
  bottom: 18%;
  animation-duration: 10s;
}
.floating-shape.spot-five {
  left: 50%;
  top: 5%;
  animation-duration: 12s;
}
.floating-shape.spot-six {
  left: 30%;
  bottom: 10%;
  animation-duration: 13s;
}

.particle {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(0.5px);
  animation: drift 18s linear infinite;
}

.particle.dot-one {
  left: 20%;
  top: 35%;
}
.particle.dot-two {
  left: 70%;
  top: 60%;
  animation-duration: 22s;
}
.particle.dot-three {
  left: 40%;
  top: 10%;
  animation-duration: 14s;
}
.particle.dot-four {
  left: 85%;
  top: 30%;
  animation-duration: 16s;
}

.glass {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
}

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
}

.hover-scale {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hover-scale:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.6);
}

.pulse-glow {
  animation: pulse 3s ease infinite;
}

.gradient-text {
  background: linear-gradient(120deg, #faf089, #f97316, #fb7185);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes slow-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.2;
  }
  50% {
    transform: translate3d(0, -80px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.2;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.25);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(252, 211, 77, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(252, 211, 77, 0);
  }
}