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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-port-dark { background-color: #0F0F11; }
    .bg-port-neon { background-color: #CCFF00; }
    .text-port-dark { color: #0F0F11; }
    .text-port-neon { color: #CCFF00; }
    .text-port-gray { color: #8A8A93; }
    .border-port-neon { border-color: #CCFF00; }
    .border-port-gray { border-color: #2A2A2E; }
    
    .btn-neon {
        @apply relative inline-flex items-center justify-center bg-[#CCFF00] text-[#0F0F11] font-sans uppercase tracking-[0.1em] font-bold text-sm py-4 px-8 rounded-full overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_rgba(204,255,0,0.4)];
    }
    
    .btn-outline {
        @apply relative inline-flex items-center justify-center border border-white/20 hover:border-white text-white font-sans uppercase tracking-[0.1em] font-bold text-sm py-4 px-8 rounded-full overflow-hidden transition-all duration-300;
    }
    
    .nav-link {
        @apply text-white/70 hover:text-white font-sans uppercase tracking-[0.1em] text-xs font-semibold transition-colors duration-300;
    }
    .nav-link.active {
        @apply text-[#CCFF00];
    }
    
    .project-card {
        @apply relative overflow-hidden rounded-3xl group block;
    }
    .project-card img {
        @apply w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110;
    }
    
    .marquee-container {
        @apply overflow-hidden whitespace-nowrap flex items-center bg-[#CCFF00] text-[#0F0F11] py-4;
    }
    .marquee-content {
        @apply flex animate-[marquee_20s_linear_infinite];
    }
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
}