/* Header — sticky, на тёмном фоне body. Тонкая lime-граница снизу.
   Tabs — underline-стиль, активный таб = lime цвет + lime подчёркивание */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) 0 0;
}

.logo-container {
    text-align: center;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    position: relative;
    z-index: 1;
    max-width: 980px;     /* как .content — лого не растягивается шире контентной ширины */
    margin: 0 auto;
}

.logo {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: opacity var(--transition-fast);
}

.logo:hover { opacity: 0.85; }

.tabs {
    display: flex;
    gap: 0;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    border-top: 1px solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.header .tabs .tab-button {
    flex: 1 1 auto;
    position: relative;
    background: transparent;
    border: 0;
    color: var(--color-text-3);
    padding: var(--space-md) var(--space-sm);
    font-family: var(--font-headline);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    user-select: none;
}

/* Активная вкладка: lime цвет + lime подчёркивание */
.header .tabs .tab-button::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transform: translateX(-50%);
    transition: width var(--transition-base);
}

.header .tabs .tab-button:hover { color: var(--color-text); }
.header .tabs .tab-button.active { color: var(--color-accent); }
.header .tabs .tab-button.active::after { width: 60%; }

.header .tabs .tab-button:focus,
.header .tabs .tab-button:active {
    outline: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .header { padding: var(--space-sm) 0 0; }
    .logo-container { padding: var(--space-xs) var(--space-md) var(--space-sm); }
    .header .tabs .tab-button {
        padding: var(--space-sm) var(--space-xs);
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .header .tabs .tab-button {
        padding: var(--space-sm) 6px;
        font-size: 0.6875rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .header .tabs .tab-button:hover { color: var(--color-text-3); }
    .header .tabs .tab-button.active:hover { color: var(--color-accent); }
}