body { font-family: 'Nunito Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Bebas Neue', sans-serif; }
html { scroll-behavior: smooth; }

.nav-bar {
    background: rgba(20, 25, 33, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-bar.scrolled { background: rgba(12, 15, 20, 0.95); box-shadow: 0 4px 30px rgba(0,0,0,0.3); }

.hero-crosshatch {
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 21px);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0C0F14; }
::-webkit-scrollbar-thumb { background: #1C2230; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #E87B35; }
::selection { background: rgba(232, 123, 53, 0.3); color: white; }