/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom base styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-body text-base leading-relaxed text-text bg-background antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-header font-semibold leading-tight mb-4;
  }
  
  h1 {
    @apply text-4xl lg:text-5xl font-bold;
  }
  
  h2 {
    @apply text-3xl lg:text-4xl font-semibold;
  }
  
  h3 {
    @apply text-2xl lg:text-3xl font-semibold;
  }
  
  h4 {
    @apply text-xl lg:text-2xl font-medium;
  }
  
  h5 {
    @apply text-lg lg:text-xl font-medium;
  }
  
  h6 {
    @apply text-base lg:text-lg font-medium;
  }
  
  p {
    @apply mb-4 text-neutral;
  }
  
  a {
    @apply text-primary hover:text-secondary transition-colors duration-300;
  }
  
  ul, ol {
    @apply pl-6 mb-4;
  }
  
  li {
    @apply mb-2;
  }
  
  img {
    @apply max-w-full h-auto block;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-neutral-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-400;
  }
  
  /* Selection styles */
  ::selection {
    @apply bg-primary/20 text-primary;
  }
  
  /* Focus styles */
  *:focus {
    @apply outline-none;
  }
  
  .focus-ring {
    @apply focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
  }
}

/* Custom components */
@layer components {
  /* Container */
  .container {
    @apply w-full max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed relative overflow-hidden;
  }
  
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-600 focus:ring-primary/50 shadow-lg hover:shadow-xl;
  }
  
  .btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary-600 focus:ring-secondary/50 shadow-lg hover:shadow-xl;
  }
  
  .btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary/50;
  }
  
  .btn-ghost {
    @apply text-primary hover:bg-primary/10 focus:ring-primary/50;
  }
  
  .btn-sm {
    @apply px-4 py-2 text-sm;
  }
  
  .btn-lg {
    @apply px-8 py-4 text-lg;
  }
  
  /* Form elements */
  .form-group {
    @apply mb-6;
  }
  
  .form-label {
    @apply block text-sm font-medium text-text mb-2;
  }
  
  .form-input,
  .form-textarea {
    @apply w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
  }
  
  .form-textarea {
    @apply resize-vertical;
  }
  
  .form-error {
    @apply text-sm text-error mt-1;
  }
  
  .form-success {
    @apply text-sm text-success mt-1;
  }
  
  .form-input.error {
    @apply border-error focus:ring-error/50 focus:border-error;
  }
  
  .form-input.success {
    @apply border-success focus:ring-success/50 focus:border-success;
  }
  
  /* Cards */
  .card {
    @apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl;
  }
  
  .card-header {
    @apply pb-4 border-b border-neutral-200 mb-4;
  }
  
  .card-body {
    @apply space-y-4;
  }
  
  .card-footer {
    @apply pt-4 border-t border-neutral-200 mt-4;
  }
  
  .card-title {
    @apply text-xl font-semibold text-text;
  }
  
  .card-text {
    @apply text-neutral;
  }
  
  /* Sections */
  .section {
    @apply py-16 lg:py-24;
  }
  
  .section-header {
    @apply text-center mb-12 lg:mb-16;
  }
  
  .section-title {
    @apply text-3xl lg:text-4xl font-bold text-text mb-4;
  }
  
  .section-subtitle {
    @apply text-lg lg:text-xl text-neutral max-w-3xl mx-auto;
  }
  
  /* Hero */
  .hero {
    @apply relative py-24 lg:py-32 overflow-hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }
  
  .hero::before {
    content: '';
    @apply absolute inset-0 opacity-10;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float 6s ease-in-out infinite;
  }
  
  .hero-content {
    @apply relative z-10 text-center max-w-4xl mx-auto;
  }
  
  .hero-title {
    @apply text-4xl lg:text-6xl font-bold text-text mb-6;
  }
  
  .hero-subtitle {
    @apply text-xl lg:text-2xl text-neutral mb-8 max-w-2xl mx-auto;
  }
  
  .hero-cta {
    @apply flex flex-col sm:flex-row items-center justify-center gap-4;
  }
  
  /* Features */
  .features-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
  }
  
  .feature-card {
    @apply text-center p-6 rounded-xl hover:shadow-lg transition-all duration-300;
  }
  
  .feature-icon {
    @apply text-4xl mb-4 inline-block;
  }
  
  .feature-title {
    @apply text-xl font-semibold text-text mb-3;
  }
  
  .feature-description {
    @apply text-neutral;
  }
  
  /* Stats */
  .stats {
    @apply py-16 bg-white;
  }
  
  .stats-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8;
  }
  
  .stat-item {
    @apply text-center;
  }
  
  .stat-number {
    @apply text-4xl lg:text-5xl font-bold text-primary mb-2;
  }
  
  .stat-label {
    @apply text-neutral font-medium;
  }
  
  /* Testimonials */
  .testimonials {
    @apply py-16 bg-neutral-50;
  }
  
  .testimonial-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
  }
  
  .testimonial-card {
    @apply bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300;
  }
  
  .testimonial-text {
    @apply text-neutral mb-6 italic;
  }
  
  .testimonial-author {
    @apply flex items-center gap-4;
  }
  
  .testimonial-avatar {
    @apply w-12 h-12 rounded-full object-cover;
  }
  
  .testimonial-info h4 {
    @apply font-semibold text-text mb-0;
  }
  
  .testimonial-info p {
    @apply text-sm text-neutral mb-0;
  }
  
  /* Pricing */
  .pricing {
    @apply py-16 bg-white;
  }
  
  .pricing-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
  }
  
  .pricing-card {
    @apply bg-white border-2 border-neutral-200 rounded-xl p-8 text-center hover:shadow-xl transition-all duration-300 relative;
  }
  
  .pricing-card.featured {
    @apply border-primary transform lg:scale-105 shadow-xl;
  }
  
  .pricing-card.featured::before {
    content: 'Most Popular';
    @apply absolute -top-4 left-1/2 transform -translate-x-1/2 bg-primary text-white px-4 py-2 rounded-full text-sm font-medium;
  }
  
  .pricing-title {
    @apply text-2xl font-bold text-text mb-4;
  }
  
  .pricing-price {
    @apply text-4xl font-bold text-primary mb-2;
  }
  
  .pricing-period {
    @apply text-neutral mb-6;
  }
  
  .pricing-features {
    @apply list-none pl-0 mb-8 space-y-3;
  }
  
  .pricing-features li {
    @apply flex items-center justify-center gap-2 text-neutral;
  }
  
  .pricing-features li::before {
    content: '✓';
    @apply text-secondary font-bold;
  }
  
  /* Modal */
  .modal {
    @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300;
  }
  
  .modal.active {
    @apply opacity-100 visible;
  }
  
  .modal-content {
    @apply bg-white rounded-xl p-6 max-w-md w-full mx-4 transform scale-95 transition-all duration-300;
  }
  
  .modal.active .modal-content {
    @apply scale-100;
  }
  
  .modal-close {
    @apply absolute top-4 right-4 text-neutral hover:text-text text-2xl cursor-pointer;
  }
  
  .modal-title {
    @apply text-2xl font-bold text-text mb-4;
  }
  
  /* Alerts */
  .alert {
    @apply p-4 rounded-lg mb-4 border-l-4;
  }
  
  .alert-success {
    @apply bg-success/10 border-success text-success;
  }
  
  .alert-error {
    @apply bg-error/10 border-error text-error;
  }
  
  .alert-warning {
    @apply bg-warning/10 border-warning text-warning;
  }
  
  .alert-info {
    @apply bg-info/10 border-info text-info;
  }
  
  /* Loading */
  .loading {
    @apply inline-block w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin;
  }
  
  /* Breadcrumb */
  .breadcrumb {
    @apply flex items-center space-x-2 text-sm;
  }
  
  .breadcrumb-item {
    @apply text-neutral;
  }
  
  .breadcrumb-item.active {
    @apply text-text font-medium;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    @apply text-neutral mx-2;
  }
  
  .breadcrumb-item a {
    @apply text-primary hover:text-secondary;
  }
}

/* Utilities */
@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .hover-lift {
    @apply transition-transform duration-300;
  }
  
  .hover-lift:hover {
    @apply transform -translate-y-2;
  }
  
  .hover-scale {
    @apply transition-transform duration-300;
  }
  
  .hover-scale:hover {
    @apply transform scale-105;
  }
  
  .sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
  }
}