.header-scroll-progress { position: fixed; z-index: 10; top: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #38cf5d, #8bffab); box-shadow: 0 0 14px #71ff91; }
.site-header { position: sticky; z-index: 5; top: 0; min-height: 80px; padding: 10px 0; transition: padding .25s ease; }.site-header.is-scrolled { padding: 6px 0; }
.header-container { display: flex; align-items: center; gap: 36px; width: min(988px, calc(100% - 40px)); min-height: 60px; padding: 0 24px; margin: auto; border: 1px solid var(--line); border-radius: 999px; background: rgba(3, 16, 8, .57); box-shadow: 0 12px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(211, 255, 220, .05); backdrop-filter: blur(18px) saturate(130%); }
.site-brand { color: var(--text); text-decoration: none; font: 800 20px/1 Unbounded, sans-serif; letter-spacing: -1.1px; text-shadow: 0 0 24px rgba(118, 255, 153, .18); }
.header-navigation { position: relative; display: flex; align-items: center; gap: 34px; margin-left: auto; }.header-navigation a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .2s ease; }.header-navigation a:hover, .header-navigation a.active { color: var(--green); }
.navigation-indicator { position: absolute; bottom: -12px; height: 2px; border-radius: 2px; background: var(--green); box-shadow: 0 0 10px var(--green); transition: left .25s ease, width .25s ease, opacity .2s ease; }
.mobile-menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; margin-left: auto; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03); cursor: pointer; }.mobile-menu-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--green); transition: transform .2s ease, opacity .2s ease; }.mobile-menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }.mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 780px) { .site-header { min-height: 70px; padding: 6px 0; }.header-container { width: min(100% - 28px, 988px); min-height: 58px; padding: 0 19px; }.mobile-menu-toggle { display: block; }.header-navigation { position: absolute; z-index: 2; top: 67px; right: 14px; left: 14px; display: none; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4, 27, 11, .9); box-shadow: 0 18px 40px rgba(0,0,0,.3); backdrop-filter: blur(18px); }.header-navigation.open { display: flex; flex-direction: column; }.navigation-indicator { display: none; }.header-navigation a { padding: 12px; } }