@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-['Plus_Jakarta_Sans'] text-slate-600 bg-white antialiased selection:bg-indigo-500 selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply text-slate-900 font-bold tracking-tight;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-[0_4px_14px_0_rgb(79,70,229,0.39)] hover:bg-indigo-700 hover:shadow-[0_6px_20px_rgba(79,70,229,0.23)] transition-all duration-300;
  }
  
  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-white text-indigo-600 font-semibold rounded-lg shadow-sm border border-slate-200 hover:border-indigo-200 hover:bg-indigo-50 transition-all duration-300;
  }
}

.text-gradient {
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-scrolled {
  @apply bg-white/80 backdrop-blur-lg shadow-sm border-b border-slate-200/50 py-3;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  border-radius: 1rem;
}

.feature-card {
  transition: all 0.3s ease;
  border-radius: 1rem;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

.blob-shape {
  position: absolute;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.5;
}