/* Site shell styles — extracted from the inline <style> block in index.html.
   Vite's html-inline-proxy fails to resolve the inline CSS proxy module during
   `vite build` ("No matching HTML proxy module found ... inline-css&index=0.css"),
   which broke production builds. Serving this through the normal CSS pipeline
   (link rel="stylesheet") avoids the inline-CSS extraction path entirely. */

body {
  font-family: 'Outfit', sans-serif;
  background-color: #030508;
  color: #e0e0e0;
  cursor: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}
.interactive, a, button, input, textarea {
  cursor: none;
}
.glow-effect {
  box-shadow: 0 0 5px #ff2a5f, 0 0 10px #ff2a5f, 0 0 15px #a824e8;
}
.text-glow {
  text-shadow: 0 0 8px #ff2a5f;
}
.text-glow-modern {
  filter: drop-shadow(0px 0px 20px rgba(255, 42, 95, 0.6));
}
.hero-bg {
  background: radial-gradient(ellipse at bottom, #0d0f14 0%, #030508 100%);
}
.card-container {
  perspective: 1000px;
}
@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in-up {
  animation: slide-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.glass {
  background: oklch(1 0 0 / 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid oklch(1 0 0 / 0.08);
}

.hero-mesh {
  background-image:
    radial-gradient(at 20% 10%, rgba(255, 42, 95, 0.18) 0px, transparent 50%),
    radial-gradient(at 80% 30%, rgba(255, 90, 100, 0.15) 0px, transparent 50%),
    radial-gradient(at 60% 90%, rgba(190, 30, 45, 0.1) 0px, transparent 50%);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

@keyframes hero-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes hero-spin-reverse {
  to { transform: rotate(-360deg); }
}
@keyframes hero-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-14px); }
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

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

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

@keyframes hero-ai-dash {
  to { stroke-dashoffset: -32; }
}
@keyframes hero-ai-node-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes hero-ai-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes hero-ai-orbit-spin {
  to { transform: rotate(360deg); }
}

.hero-ai-flow {
  animation: hero-ai-dash 2.5s linear infinite;
}
.hero-ai-flow-delay {
  animation-delay: 1.2s;
}
.hero-ai-node-pulse {
  animation: hero-ai-node-pulse 3s ease-in-out infinite;
}
.hero-ai-node-pulse circle:first-of-type {
  animation: hero-ai-node-pulse 3s ease-in-out infinite;
}
.hero-ai-glow-pulse {
  transform-origin: 240px 240px;
  animation: hero-ai-glow 4s ease-in-out infinite;
}
.hero-ai-orbit {
  transform-origin: 240px 240px;
  animation: hero-ai-orbit-spin 48s linear infinite;
}
.hero-ai-orbit-reverse {
  transform-origin: 240px 240px;
  animation: hero-ai-orbit-spin 72s linear infinite reverse;
}
.hero-ai-dot {
  animation: hero-ai-node-pulse 2s ease-in-out infinite;
}