:root{--bg:#121212;--panel:#1a1a1a;--steel:#b3b3b3;--accent:#ff7b00}
html{scroll-behavior:smooth}
.hero-pattern{background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),linear-gradient(45deg, rgba(255,123,0,0.08), rgba(0,0,0,0));background-size:20px 20px,100% 100%}
.hover-glow:hover{box-shadow:0 0 0 2px rgba(255,123,0,0.4) inset,0 10px 30px rgba(255,123,0,0.35);transform:translateY(-2px) scale(1.01)}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(2px)}
.nav-blur{backdrop-filter:blur(6px);background:rgba(18,18,18,0.7);border-bottom:1px solid rgba(255,255,255,0.06)}
#lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:80}
#lightbox img{max-width:92vw;max-height:86vh;border-radius:.75rem}
#lightbox.show{display:flex}
.prose p{margin-bottom:1rem;line-height:1.8}
.footer-grad{background:linear-gradient(180deg, rgba(255,123,0,0.15), rgba(0,0,0,0))}
#preloader{position:fixed;inset:0;background:#121212;display:flex;align-items:center;justify-content:center;z-index:90}
.loader{width:54px;height:54px;border-radius:50%;border:4px solid rgba(255,255,255,0.1);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reveal{opacity:0; transform:translateY(16px); transition:all .6s ease}
.reveal.show{opacity:1; transform:none}
.carousel{display:flex;gap:2.5rem;overflow:hidden}
.carousel-track{display:flex;gap:2.5rem;animation:scroll 18s linear infinite}
.carousel img{height:48px;opacity:.9}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:100}
.modal.show{display:flex}
.modal .panel{background:#1a1a1a;border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1.25rem;max-width:32rem;width:92%}