:root {
    --primary-blue: 9, 69, 196;
    --dark-blue: 7, 54, 161;
    --navy: 12, 41, 106;
    --gold: 230, 167, 47;
    --light-gold: 243, 209, 124;
    --white: 255, 255, 255;
    --border-grey: 220, 228, 240;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding-top: 90px; font-family: "Poppins", Arial, sans-serif; }

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-height: 90px;
    margin-top: -90px;
    padding: 13px clamp(20px, 4vw, 48px);
    background: rgba(var(--white), 0.97);
    border-bottom: 1px solid rgba(var(--border-grey), 0.8);
    box-shadow: 0 3px 20px rgba(12, 41, 106, 0.035);
    backdrop-filter: blur(12px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; color: rgb(var(--navy)); text-decoration: none; }
.brand > img { display: block; width: 64px; height: 45px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-text strong { color: rgb(var(--navy)); font-size: clamp(1rem, 1.6vw, 1.32rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.brand-text strong span { color: rgb(var(--primary-blue)); }
.brand-text small { color: rgb(var(--navy)); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.2em; white-space: nowrap; }

header nav ul { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 35px); margin: 0; padding: 0; }
header nav ul li { list-style: none; }
header nav ul li a { position: relative; display: inline-flex; align-items: center; padding: 12px 0; color: rgb(var(--navy)); font-size: 0.74rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; }
header nav ul li a::after { position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; content: ""; background: rgb(var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
header nav ul li a:hover, header nav ul li a.active { color: rgb(var(--primary-blue)); }
header nav ul li a:hover::after, header nav ul li a.active::after { transform: scaleX(1); }
.header-cta { display: flex; align-items: center; }

@media (max-width: 950px) {
    header { gap: 14px; padding-inline: 20px; }
    .brand { gap: 8px; }
    .brand > img { width: 48px; height: 38px; }
    header nav ul { gap: clamp(8px, 1.15vw, 13px); }
    header nav ul li a { font-size: 0.63rem; }
    header .button { min-height: 42px; padding: 10px 14px; font-size: 0.7rem; gap: 9px; }
}

@media (max-width: 700px) {
    body { padding-top: 0; }
    header { position: relative; top: auto; flex-wrap: wrap; justify-content: space-between; min-height: 0; margin-top: 0; gap: 12px; padding: 15px 18px 10px; }
    .brand > img { width: 44px; height: 34px; }
    .brand-text strong { font-size: 1rem; }
    .brand-text small { font-size: 0.48rem; letter-spacing: 0.16em; }
    .header-cta { margin-left: auto; }
    header nav { order: 3; width: 100%; overflow-x: auto; }
    header nav ul { justify-content: space-between; width: max-content; min-width: 100%; gap: 22px; }
    header nav ul li a { padding: 12px 0 10px; font-size: 0.69rem; }
    header nav ul li a::after { bottom: 3px; }
}

@media (max-width: 390px) {
    header { padding-inline: 12px; }
    .brand { gap: 5px; }
    .brand > img { width: 34px; }
    .brand-text strong { font-size: 0.86rem; }
    .brand-text small { font-size: 0.4rem; }
    header .button { min-width: 0; padding: 9px 10px; font-size: 0.62rem; }
}