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

@layer components {
  /* Hero Section */
  .hero-section {
    @apply relative overflow-hidden py-24 text-white text-center;
  }

  .hero-section-gradient {
    @apply hero-section bg-gradient-to-r;
  }

  .hero-section-slate {
    @apply hero-section bg-slate-900;
  }

  .hero-container {
    @apply relative max-w-5xl mx-auto px-4 z-10;
  }

  .hero-badge {
    @apply inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm;
  }

  .hero-title {
    @apply text-5xl md:text-6xl font-extrabold tracking-tight mb-6;
  }

  .hero-subtitle {
    @apply text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed;
  }

  /* Buttons */
  .btn-hero {
    @apply inline-flex items-center gap-3 bg-white px-8 py-4 rounded-xl transition-all font-bold shadow-xl hover:scale-105 active:scale-95;
  }

  .btn-hero-teal {
    @apply btn-hero text-teal-700 hover:bg-teal-50;
  }

  .btn-hero-indigo {
    @apply btn-hero text-indigo-900 hover:bg-indigo-50;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center font-bold py-3 px-8 rounded-xl transition-all shadow-lg;
  }

  /* Grid and Containers */
  .main-container {
    @apply max-w-7xl mx-auto px-4 -mt-12 relative z-10;
  }

  .card-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  /* Cards */
  .card-base {
    @apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm;
  }

  .card-interactive {
    @apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:shadow-xl transition-all duration-300 ease-out hover:-translate-y-1;
  }

  /* Decorative Background Elements */
  .hero-decor-blob {
    @apply absolute rounded-full blur-3xl opacity-30;
  }
}
