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

@layer utilities {
  .hero-gradient { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); }
  .primary-btn { @apply bg-blue-600 transition rounded-lg; }
  .primary-btn:hover { @apply bg-blue-500 -translate-y-0.5 shadow-xl; }
  .secondary-btn { @apply border-2 border-slate-600/50 transition rounded-lg; }
  .secondary-btn:hover { @apply bg-slate-100 -translate-y-0.5; }
  .fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
  .visible { opacity: 1 !important; transform: translateY(0) !important; }
}

html { scroll-behavior: smooth; }