/* ========== ХЕДЕР, ФУТЕР, НАВИГАЦИЯ ========== */

/* Header */
header { 
    position: sticky; 
    top: 0; 
    z-index: 40; 
    backdrop-filter: blur(18px);
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.78), transparent);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.header-inner { 
    max-width: 1120px; 
    margin: 0 auto; 
    padding: 9px 16px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
}

.brand { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.brand-logo img { 
    height: 34px; 
    width: auto; 
}

.brand-title { 
    font-size: 11px; 
    font-weight: 600; 
    letter-spacing: 0.22em; 
    text-transform: uppercase; 
}

.brand-subtitle { 
    font-size: 10px; 
    text-transform: uppercase; 
    letter-spacing: 0.16em; 
    color: var(--text-muted); 
}

nav { 
    display: flex; 
    gap: 14px; 
    font-size: 12px; 
}

nav a { 
    text-transform: uppercase; 
    letter-spacing: 0.18em; 
    color: var(--text-muted); 
    padding-bottom: 3px; 
    transition: color var(--transition-fast); 
    position: relative; 
}

nav a::after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 1px; 
    width: 0; 
    background: linear-gradient(to right, var(--accent), var(--accent-alt)); 
    transition: width var(--transition-fast); 
}

nav a:hover { 
    color: var(--accent); 
}

nav a:hover::after { 
    width: 100%; 
}

/* Footer */
footer { 
    background: radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.14), #020617 60%);
    border-top: 1px solid rgba(148, 163, 184, 0.4); 
    color: var(--text-muted);
    font-size: 11px; 
    padding: 14px 16px 16px; 
    text-align: center; 
    margin-top: 20px; 
}

footer span { 
    text-transform: uppercase; 
    letter-spacing: 0.22em; 
}

/* Mobile adaptations */
@media (max-width: 1024px) {
    nav { 
        display: none; 
    }
}

@media (max-width: 640px) {
    .brand-logo img {
        height: 28px;
    }
    
    .brand-title {
        font-size: 10px;
        letter-spacing: 0.18em;
    }
    
    .brand-subtitle {
        font-size: 9px;
    }
    
    footer {
        font-size: 10px;
        padding: 12px;
    }
    
    footer span {
        letter-spacing: 0.15em;
    }
}