header { position: sticky; top: 0; z-index: 1000; background: var(--header); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { max-width: 1120px; min-height: 80px; margin: auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; text-decoration: none; letter-spacing: -.6px; white-space: nowrap; }
.wordmark span { color: var(--accent); }
nav { display: flex; align-items: center; gap: 22px; }
nav a { position: relative; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 550; padding: 28px 0; transition: color .2s; }
nav a:hover, nav a.active { color: var(--accent); }
nav a.active::after { content: ''; position: absolute; bottom: 18px; left: 0; right: 0; height: 2px; background: var(--accent); }
@media (max-width: 760px) { .header-inner { flex-direction: column; gap: 0; padding: 14px 24px 0; } nav { width: 100%; justify-content: center; gap: clamp(12px, 3vw, 24px); } nav a { padding: 12px 0 16px; font-size: 12px; } nav a.active::after { bottom: 7px; } }

.theme-toggle { flex-shrink: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; transition: background .2s, border-color .2s; }
.theme-toggle:hover { background: var(--soft); border-color: var(--accent); }
@media (max-width: 760px) {
    .header-inner { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; }
    .theme-toggle { grid-column: 2; grid-row: 1; }
    nav { grid-column: 1 / -1; grid-row: 2; }
}