/* ============================================
   HEADER.CSS — Landing page header & navigation
   ============================================ */

.l-header { position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; backdrop-filter:none; border-bottom:1px solid transparent; height:var(--header-h); display:flex; align-items:center; padding:0 32px; transition:background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; }
.l-header.scrolled { background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-bottom-color:var(--gray-200); }
.l-header-inner { max-width:1280px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; }
.l-logo { font-weight:800; font-size:1.125rem; color:#ffffff; display:flex; align-items:center; gap:8px; transition:color 0.3s ease; }
.scrolled .l-logo { color:var(--gray-900); }
.l-logo-sub { font-weight:500; opacity:0.75; }
.l-logo-mark { width:32px; height:32px; border-radius:var(--radius-sm); overflow:hidden; display:flex; align-items:center; justify-content:center; background:#111111; }
.l-logo-mark img { width:100%; height:100%; object-fit:cover; display:block; }
.l-logo-mark svg { width:18px; height:18px; }
.l-nav { display:flex; gap:32px; }
.l-nav a { font-size:0.8125rem; font-weight:600; color:rgba(255,255,255,0.7); letter-spacing:1px; text-transform:uppercase; transition:color 0.3s ease; position:relative; padding:4px 0; }
.l-nav a:hover { color:#ffffff; }
.l-nav a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:#ffffff; transition:var(--transition); }
.l-nav a:hover::after { width:100%; }
.scrolled .l-nav a { color:var(--gray-500); }
.scrolled .l-nav a:hover { color:var(--gray-900); }
.scrolled .l-nav a::after { background:var(--gray-900); }
.l-header-actions { display:flex; align-items:center; gap:12px; }
.btn-login { padding:10px 24px; background:var(--gold); color:#0a0a0a; font-weight:700; font-size:0.8125rem; border-radius:var(--radius); transition:var(--transition); letter-spacing:0.5px; }
.btn-login:hover { background:var(--gold-hover); transform:translateY(-1px); box-shadow:0 4px 12px rgba(249,215,28,0.3); }
.scrolled .btn-login { background:var(--gray-900); color:var(--white); }
.scrolled .btn-login:hover { background:var(--gray-800); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.btn-login:active { transform:translateY(0) scale(0.98); }
.mobile-toggle { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; }
.mobile-toggle span { width:20px; height:2px; background:#ffffff; border-radius:2px; transition:var(--transition); }
.scrolled .mobile-toggle span { background:var(--gray-700); }

@media(max-width:768px) {
    .l-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--white); flex-direction:column; padding:16px 24px; border-bottom:1px solid var(--gray-200); box-shadow:var(--shadow-md); }
    .l-nav.show { display:flex; }
    .mobile-toggle { display:flex; }
}