.site-header { position: sticky; z-index: 100; top: 0; height: var(--header-h); border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); transition: border .2s, box-shadow .2s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: block; width: 255px; color: var(--text); }
.brand img { width: 100%; height: auto; }
.brand-logo--dark { display: none; }
html[data-theme="dark"] .brand-logo--light { display: none; }
html[data-theme="dark"] .brand-logo--dark { display: block; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 2.3vw, 40px); margin-left: auto; }
.desktop-nav a { position: relative; padding-block: 10px; color: var(--text-soft); font-size: 14px; font-weight: 550; }
.desktop-nav a::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; transform: scaleX(0); background: var(--blue); content: ""; transition: transform .2s; }
.desktop-nav a:hover { color: var(--text); }
.desktop-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle, .menu-toggle { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.theme-toggle .icon--moon, html[data-theme="dark"] .theme-toggle .icon--sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon--moon { display: block; }
.menu-toggle { display: none; }
.mobile-menu { position: fixed; z-index: -1; inset: var(--header-h) 0 auto; height: calc(100dvh - var(--header-h)); overflow-y: auto; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-md); }
.mobile-menu nav { display: grid; padding-block: 20px 28px; }
.mobile-menu nav > a:not(.button) { display: flex; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 600; }
.mobile-menu .button { margin-top: 24px; }