:root {
--bg:        #080808;
--surface:   #0f0f0f;
--surface2:  #131313;
--red:       #c0392b;
--red-hot:   #ff2a1a;
--amber:     #e67e00;
--steel:     #2c2c2c;
--muted:     #5a5a5a;
--off-white: #d4cfc9;
--font-display: 'Black Ops One', cursive;
--font-heading: 'Bebas Neue', cursive;
--font-mono:    'Share Tech Mono', monospace;
--font-body:    'Barlow Condensed', sans-serif;
}
nav {
font-family: var(--font-display);
font-size: 16px;
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
display: flex; align-items: center; justify-content: space-between;
padding: 0 2.5rem; height: 64px;
background: rgba(8,8,8,0.96);
border-bottom: 1px solid rgba(192,57,43,0.2);
backdrop-filter: blur(10px); transition: border-color 0.3s;
}
.nav-logo {
font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.05em;
color: var(--off-white); text-decoration: none; display: flex; align-items: center; gap: 9px;
}
.nav-logo .logo-icon { width: 26px; height: 26px; }
.nav-logo .logo-icon svg { width: 100%; height: 100%; }
.nav-logo .rage { color: var(--red-hot); }
.nav-links { display: flex; gap: 0; list-style: none; }
.nav-links li { position: relative; }
.nav-links > li > a {
font-family: var(--font-heading); font-size: 1rem; letter-spacing: 0.12em;
color: var(--off-white); text-decoration: none; padding: 0 1rem; height: 64px;
display: flex; align-items: center; gap: 4px; transition: color 0.25s; position: relative;
}
.nav-links > li > a::after {
content: ''; position: absolute; bottom: 0; left: 1rem; right: 1rem; height: 2px;
background: var(--red); transform: scaleX(0); transform-origin: left;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-links > li > a:hover { color: var(--off-white); }
.nav-links > li > a:hover::after { transform: scaleX(1); }
.nav-links > li > a .caret { font-size: 0.55rem; transition: transform 0.25s; }
.nav-links > li:hover > a .caret { transform: rotate(180deg); }
.nav-dropdown {
position: absolute; top: 64px; right: 0; background: rgba(10,10,10,0.99);
border: 1px solid var(--steel); border-top: 2px solid var(--red); min-width: 210px;
opacity: 0; pointer-events: none; transform: translateY(-8px);
transition: opacity 0.25s, transform 0.25s; z-index: 300;
}
.nav-links li:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
.nav-dropdown a {
display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
font-size: 0.7rem; letter-spacing: 0.15em; color: var(--muted); text-decoration: none;
padding: 0.85rem 1.2rem; border-bottom: 1px solid rgba(44,44,44,0.5);
transition: color 0.2s, background 0.2s;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { color: var(--off-white); background: rgba(192,57,43,0.08); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav-hamburger span { display: block; width: 26px; height: 2px; background: var(--off-white); transition: 0.3s; }