.site-header {
    position: fixed;
    z-index: 1000;
    top: 18px;
    inset-inline: 0;
    width: min(100% - 36px, 1240px);
    margin-inline: auto;
}
.site-header .header-shell {
    min-height: 58px;
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.brand { width: max-content; display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.site-header .brand { filter: drop-shadow(0 2px 8px #07070c); }
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
.brand-name { margin-left: -7px; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 23px; font-weight: 850; letter-spacing: -.055em; }
.site-header .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    gap: 4px;
    padding: 5px;
    position: relative;
    border: 1px solid #a18aff24;
    border-radius: 999px;
    background: #10101beF;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.site-header .desktop-nav a {
    position: relative;
    z-index: 1;
    padding: 8px 13px;
    border-radius: 999px;
    color: #9290a6;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.site-header .desktop-nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
.site-header .desktop-nav a.is-current {
    background: transparent;
    color: #fff;
    box-shadow: none;
}
.site-header .desktop-nav a.is-current::after { display: none; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid #aa9bff; outline-offset: 4px; }
.header-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 14px; background: #fff; color: #111019; font-size: 14px; font-weight: 800; text-decoration: none; }
.site-header .header-action, .site-header .market-identity { justify-self: end; }
.site-header .menu-button { display: none; width: 44px; height: 44px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(25,24,35,.94); cursor: pointer; }
.site-header .menu-button { flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.site-header .menu-button span { display: block; flex: 0 0 2px; width: 20px; height: 2px; margin: 0; border-radius: 2px; background: #fff; }
.segment-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: #332e58; box-shadow: 0 3px 14px #a18aff12; pointer-events: none; transition: transform .28s cubic-bezier(.32,.72,0,1), width .28s cubic-bezier(.32,.72,0,1); }
.segment-thumb.no-animation { transition: none; }
.site-header .mobile-nav { display: none; }
@keyframes site-nav-in { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1000px) {
    .site-header .desktop-nav { display: none; }
    .site-header .header-shell { grid-template-columns: 1fr auto auto; gap: 12px; }
    .site-header .header-action, .site-header .market-identity { grid-column: 2; }
    .site-header .menu-button { display: flex; grid-column: 3; }
    .site-header .mobile-nav.is-open { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: #191823; box-shadow: 0 16px 44px #0005; }
    .site-header .mobile-nav a { display: block; padding: 12px 14px; border-radius: 10px; color: #bac2d0; font-size: 14px; text-decoration: none; }
    .site-header .mobile-nav a:hover, .site-header .mobile-nav a.is-current { color: #fff; background: linear-gradient(135deg, #6c5ce7, #5a4bd1); }
}
@media (max-width: 600px) {
    .site-header { top: 10px; width: calc(100% - 24px); }
    .site-header .header-shell { gap: 8px; min-height: 48px; }
    .site-header .brand-mark { width: 30px; height: 30px; }
    .site-header .brand-name { font-size: 21px; }
    .site-header .header-action { display: inline-flex; min-height: 40px; padding: 0 12px; font-size: 13px; }
    .site-header .header-action i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .segment-thumb { transition: none; }
    .site-header .desktop-nav a { transition: none; animation: none; }
}

/* Primary header action follows the landing action system; navigation stays intact. */
.site-header .header-action {
    min-width: 112px;
    border: 0;
    border-radius: 14px;
    background-color: #7b5ce1;
    background-image: linear-gradient(110deg, #7b5ce1 0%, #9f4fc7 45%, #936cff 55%, #d15abf 100%);
    background-position: 0 50%;
    background-size: 220% 100%;
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 850;
    letter-spacing: -.025em;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(25, 10, 50, .22);
    outline: 5px solid transparent;
    outline-offset: 0;
    box-shadow: 0 10px 26px rgba(78, 45, 160, .24), inset 0 1px rgba(255, 255, 255, .18);
    transition: background-position .22s ease, box-shadow .22s ease, outline-color .22s ease, outline-offset .22s ease, transform .22s ease;
}
.site-header .header-action:hover,
.site-header .header-action:focus-visible,
.site-header .header-action:active {
    background-color: #936cff;
    background-image: linear-gradient(110deg, #7b5ce1 0%, #9f4fc7 45%, #936cff 55%, #d15abf 100%);
    background-position: 100% 50%;
    background-size: 220% 100%;
    color: #fff;
    outline: 5px solid rgba(196, 174, 255, .72);
    outline-offset: 5px;
    box-shadow: 0 14px 34px rgba(108, 71, 210, .38), inset 0 1px rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}
.site-header .header-action:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }
@media (hover: none) {
    .site-header .header-action:hover:not(:active) { outline-color: transparent; outline-offset: 0; transform: none; }
}

/* Stable header action animation with a fixed hover hit area. */
.site-header .header-action {
    z-index: 0;
    isolation: isolate;
    overflow: visible;
    position: relative;
    background: linear-gradient(135deg, #7b5ce1, #9f4fc7);
    outline: 0;
    transform: none;
    transition: box-shadow .22s ease, transform 100ms ease;
}
.site-header .header-action::before,
.site-header .header-action::after {
    position: absolute;
    pointer-events: none;
    content: '';
}
.site-header .header-action::before {
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #936cff, #d15abf);
    opacity: 0;
    transition: opacity .22s ease;
}
.site-header .header-action::after {
    z-index: 3;
    inset: -11px;
    border: 5px solid rgba(196, 174, 255, .72);
    border-radius: 23px;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .22s ease, transform .22s ease;
}
.site-header .header-action:hover,
.site-header .header-action:focus-visible,
.site-header .header-action:active {
    background: linear-gradient(135deg, #7b5ce1, #9f4fc7);
    outline: 0;
    transform: none;
}
.site-header .header-action:hover::before,
.site-header .header-action:focus-visible::before,
.site-header .header-action:active::before,
.site-header .header-action:hover::after,
.site-header .header-action:focus-visible::after,
.site-header .header-action:active::after {
    opacity: 1;
    transform: scale(1);
}
.site-header .header-action:active { transform: scale(.985); }

.site-header .brand-controls { display: flex; align-items: center; gap: 9px; min-width: 0; }
@media (max-width: 600px) {
    .site-header .brand-controls { gap: 5px; }
}