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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-tech-gradient {
        background: linear-gradient(135deg, #334155 0%, #0F172A 100%);
    }
    .text-tech-gradient {
        background: linear-gradient(to right, #4F46E5, #38BDF8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .btn-tech {
        @apply bg-[#4F46E5] hover:bg-[#4338CA] text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 shadow-[0_4px_14px_0_rgba(79,70,229,0.39)] hover:shadow-[0_6px_20px_rgba(79,70,229,0.23)] hover:-translate-y-1 active:scale-95;
    }
    .btn-tech-outline {
        @apply border-2 border-[#334155] text-[#334155] hover:bg-[#334155] hover:text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 active:scale-95;
    }
    .glass-nav {
        @apply bg-white/80 backdrop-blur-lg border-b border-gray-100;
    }
    .product-card {
        @apply bg-white rounded-3xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-50 hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 hover:-translate-y-2;
    }
}