.header { position: sticky; z-index: 100; top: 0; height: var(--header-height); border-bottom: 1px solid rgba(215,220,228,.8); background: rgba(255,253,247,.94); backdrop-filter: blur(14px); }
.navigation { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.navigation__brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-primary-900); font-weight: 850; line-height: 1.15; text-decoration: none; }
.navigation__mark { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-primary-800); color: white; }
.navigation__mark strong { color: var(--color-accent-500); font-size: 1.2rem; }
.navigation__links { display: flex; align-items: center; gap: clamp(.85rem,2vw,1.75rem); list-style: none; }
.navigation__link { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 700; text-decoration: none; }
.navigation__link:hover { color: var(--color-accent-700); }
.navigation__toggle { display: none; width: 3rem; height: 3rem; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: white; color: var(--color-primary-900); }
@media (max-width: 980px) { .navigation__toggle { display: grid; } .navigation__links { position: fixed; inset: var(--header-height) 0 auto; max-height: calc(100svh - var(--header-height)); display: none; align-items: stretch; gap: 0; overflow-y: auto; padding: var(--space-4) 1rem var(--space-8); border-bottom: 1px solid var(--color-border); background: var(--color-background); box-shadow: var(--shadow-float); } .navigation__links.is-open { display: grid; } .navigation__link { min-height: 3.25rem; border-bottom: 1px solid var(--color-border); } .navigation__cta { margin-top: var(--space-4); } }
@media (max-width: 420px) { .navigation__brand span { max-width: 12rem; font-size: .86rem; } }