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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-const-primary { background-color: #F8FAFC; } /* Light gray bg */
    .bg-const-dark { background-color: #0F172A; } /* Deep navy/slate */
    .bg-const-accent { background-color: #F59E0B; } /* Industrial Orange/Yellow */
    .bg-const-gray { background-color: #1E293B; }
    
    .text-const-dark { color: #0F172A; }
    .text-const-accent { color: #F59E0B; }
    .text-const-muted { color: #64748B; }
    
    .border-const-accent { border-color: #F59E0B; }
    .border-const-gray { border-color: #334155; }
    
    .font-oswald { font-family: 'Oswald', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
    
    .btn-const {
        @apply inline-flex items-center justify-center bg-[#F59E0B] text-[#0F172A] font-oswald text-sm uppercase tracking-widest font-bold py-4 px-8 hover:bg-white transition-all duration-300 transform hover:-translate-y-1 shadow-lg;
    }
    
    .btn-const-dark {
        @apply inline-flex items-center justify-center bg-[#0F172A] text-white font-oswald text-sm uppercase tracking-widest font-bold py-4 px-8 hover:bg-[#F59E0B] hover:text-[#0F172A] transition-all duration-300 transform hover:-translate-y-1 shadow-lg;
    }
    
    .nav-link {
        @apply text-white hover:text-[#F59E0B] font-oswald text-sm uppercase tracking-widest font-medium transition-colors duration-300;
    }
    
    .nav-link.active {
        @apply text-[#F59E0B];
    }
}

.diagonal-bg {
    position: relative;
    overflow: hidden;
}

.diagonal-bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: #F59E0B;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 0;
}

.pattern-bg {
    background-image: radial-gradient(#334155 1px, transparent 1px);
    background-size: 20px 20px;
}

.stat-card {
    @apply relative p-8 bg-[#1E293B] border-l-4 border-[#F59E0B] transition-transform duration-300 hover:-translate-y-2;
}

.project-card {
    @apply relative overflow-hidden group;
}

.project-card img {
    @apply w-full h-[400px] object-cover transition-transform duration-700 group-hover:scale-110;
}

.project-card-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-[#0F172A] via-[#0F172A]/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8;
}

.project-card-content {
    @apply transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0F172A;
}
::-webkit-scrollbar-thumb {
    background: #F59E0B;
}
::-webkit-scrollbar-thumb:hover {
    background: #D97706;
}