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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-dental-gradient {
        background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
    }
    .text-dental-gradient {
        background: linear-gradient(to right, #0D9488, #3B82F6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .btn-dental {
        @apply bg-[#0D9488] hover:bg-[#0F766E] text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 shadow-[0_4px_14px_0_rgba(13,148,136,0.39)] hover:shadow-[0_6px_20px_rgba(13,148,136,0.23)] hover:-translate-y-0.5;
    }
    .btn-dental-outline {
        @apply border-2 border-[#0D9488] text-[#0D9488] hover:bg-[#0D9488] hover:text-white font-semibold py-2.5 px-8 rounded-full transition-all duration-300;
    }
    .pattern-bg {
        background-color: #F8FAFC;
        background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
        background-size: 24px 24px;
    }
}