@import "tailwindcss";
@theme {
  --color-primary: #f0f9ff;
  --color-secondary: #334155;
  --color-accent: #dbeafe;

  --radius-xl: 12px;
  --radius-2xl: 16px;
}
html{
  scroll-behavior: smooth;
}

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            color: #334155;
        }
        .hero-bg {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
                .tribute-card {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        }
 .pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .popular-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
  }