@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

body {
  background: #030303;
  font-family: 'Inter', sans-serif;
}

@keyframes border-spin {
  to { --gradient-angle: 360deg; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slow-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.8);
  }
}

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

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease forwards;
}

.animate-fade-in-up-delay-1 {
  animation: fade-in-up 0.8s ease 0.15s forwards;
  opacity: 0;
}

.animate-fade-in-up-delay-2 {
  animation: fade-in-up 0.8s ease 0.3s forwards;
  opacity: 0;
}

.animate-fade-in-up-delay-3 {
  animation: fade-in-up 0.8s ease 0.45s forwards;
  opacity: 0;
}

.animate-fade-in-up-delay-4 {
  animation: fade-in-up 0.8s ease 0.6s forwards;
  opacity: 0;
}

.cta-border-anim {
  background: conic-gradient(from var(--gradient-angle), transparent 0%, #0ea5e9 5%, #38BDF8 15%, #0ea5e9 30%, transparent 40%);
  animation: border-spin 2.5s linear infinite;
}

.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 100px 200px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

.spotlight-card {
  position: relative;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(56,189,248,0.06), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

.spotlight-card:hover::before {
  opacity: 1;
}

.text-glow {
  text-shadow: 0 0 25px rgba(56,189,248,0.4);
}

.feature-icon-ring {
  background: radial-gradient(circle, rgba(56,189,248,0.15) 0%, transparent 70%);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #030303; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

html { scroll-behavior: smooth; }