.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid #2a3a42; background: rgb(14 26 32 / 95%); color: #fff; box-shadow: 0 5px 18px rgb(0 0 0 / 15%); backdrop-filter: blur(12px); }
.site-nav { display: flex; align-items: center; justify-content: space-between; width: min(100% - 48px, 1140px); min-height: 76px; margin: 0 auto; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 700 var(--type-brand) / 1 var(--font-display); letter-spacing: -.03em; text-decoration: none; }
.site-brand__mark { display: grid; width: 30px; height: 34px; place-items: center; }
.site-brand__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-nav__links { display: flex; gap: 30px; color: #d5dddd; font-size: var(--type-nav); }
.site-nav__links a, .site-mobile-menu__panel a { color: inherit; text-decoration: none; }
.site-nav__links a:hover { color: #fff; }
.site-mobile-menu { display: none; position: relative; }
.site-mobile-menu summary { display: grid; width: 42px; height: 42px; padding: 10px; cursor: pointer; place-content: center; gap: 5px; border: 1px solid #40555d; list-style: none; }
.site-mobile-menu summary::-webkit-details-marker { display: none; }
.site-mobile-menu summary span { display: block; width: 20px; height: 1px; background: #f4f5f2; transform-origin: center; transition: transform .18s ease, opacity .18s ease; }
.site-mobile-menu[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-mobile-menu[open] summary span:nth-child(2) { opacity: 0; }
.site-mobile-menu[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-mobile-menu__panel { position: absolute; top: calc(100% + 12px); right: 0; display: grid; width: min(320px, calc(100vw - 48px)); padding: 12px; border: 1px solid #40555d; background: #0e1a20; box-shadow: 0 18px 34px #00000045; }
.site-mobile-menu__label { padding: 5px 8px 10px; color: #8f9a9d; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.site-mobile-menu__panel a { padding: 13px 8px; color: #f4f5f2; font-size: var(--type-nav); }
.site-mobile-menu__panel a + a { border-top: 1px solid #2a3a42; }
.site-mobile-menu__panel a:hover { color: #d4f76a; }
@media (max-width: 900px) { .site-nav__links { display: none; }.site-mobile-menu { display: block; } }
@media (max-width: 580px) { .site-nav { width: min(100% - 36px, 1140px); min-height: 70px; }.site-mobile-menu__panel { width: min(320px, calc(100vw - 36px)); } }