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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-sec-dark { background-color: #0A0A0B; }
    .bg-sec-darker { background-color: #050505; }
    .bg-sec-red { background-color: #E62E2D; }
    .bg-sec-gray { background-color: #1A1A1C; }
    
    .text-sec-red { color: #E62E2D; }
    .text-sec-gray { color: #8A8A93; }
    .text-sec-light { color: #E0E0E0; }
    
    .border-sec-red { border-color: #E62E2D; }
    .border-sec-gray { border-color: #1A1A1C; }
    
    .font-chakra { font-family: 'Chakra Petch', sans-serif; }
    .font-oxanium { font-family: 'Oxanium', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
    
    .btn-sec {
        @apply inline-flex items-center justify-center bg-[#E62E2D] text-white font-chakra text-lg uppercase font-bold tracking-wider py-4 px-8 border border-[#E62E2D] hover:bg-transparent hover:text-[#E62E2D] transition-all duration-300;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    
    .btn-sec-outline {
        @apply inline-flex items-center justify-center bg-transparent border border-[#E62E2D] text-[#E62E2D] font-chakra text-lg uppercase font-bold tracking-wider py-4 px-8 hover:bg-[#E62E2D] hover:text-white transition-all duration-300;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    
    .nav-link {
        @apply text-sec-light hover:text-[#E62E2D] font-chakra text-sm uppercase tracking-widest font-semibold transition-colors duration-300;
    }
    
    .nav-link.active {
        @apply text-[#E62E2D];
    }
}

/* Tech Grid Background */
.bg-tech-grid {
    background-image: 
        linear-gradient(rgba(230, 46, 45, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230, 46, 45, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.clip-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}