:root {
    --kit-bg: #05070b;
    --kit-bg-2: #080d14;
    --kit-panel: #0e131d;
    --kit-panel-2: #121a26;
    --kit-line: rgb(255 255 255 / 10%);
    --kit-line-gold: rgb(212 175 55 / 28%);
    --kit-text: #f5f7fb;
    --kit-muted: #a8b2c3;
    --kit-gold: #d4af37;
    --kit-gold-2: #e7ca6a;
    --kit-max: 1180px;
    --kit-radius: 22px;
    --kit-shadow: 0 24px 70px rgb(0 0 0 / 38%);
}

.skip-link {
    position: fixed;
    z-index: 999;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--kit-bg);
    background: var(--kit-gold-2);
    border-radius: 0.65rem;
    font-weight: 800;
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    background: rgb(5 7 11 / 88%);
    backdrop-filter: blur(16px);
}

.site-header .nav {
    display: grid;
    width: min(calc(100% - 2rem), var(--kit-max));
    min-height: 5.5rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0;
    margin-inline: auto;
}

.site-header .brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    color: var(--kit-text);
    text-decoration: none;
}

.site-header .brand img {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.site-header .brand small,
.site-header .brand span {
    display: block;
}

.site-header .brand small {
    color: var(--kit-gold-2);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-header .brand span {
    color: var(--kit-text);
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
}

.site-header .brand-nav {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
}

.site-header .brand-nav a {
    padding: 0.55rem 0.62rem;
    color: var(--kit-muted);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.site-header .brand-nav a:hover,
.site-header .brand-nav a.active {
    color: var(--kit-text);
    background: rgb(255 255 255 / 7%);
}

.site-header .brand-nav a.active {
    box-shadow: inset 0 0 0 1px var(--kit-line-gold);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.portal-utility {
    color: var(--kit-muted);
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.portal-utility:hover {
    color: var(--kit-gold-2);
}

.site-header .nav-cta {
    min-height: 2.65rem;
    padding: 0.62rem 0.9rem;
    color: var(--kit-bg);
    background: linear-gradient(135deg, var(--kit-gold-2), #b98f1c);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    box-shadow: 0 10px 25px rgb(0 0 0 / 20%);
    font-size: 0.76rem;
    font-weight: 850;
}

.site-header .nav-cta:hover {
    color: var(--kit-bg);
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.mobile-nav {
    display: none;
}

.footer {
    color: var(--kit-muted);
    background: linear-gradient(180deg, var(--kit-bg-2), var(--kit-bg));
    border-top: 1px solid var(--kit-line);
}

.footer .footer-grid {
    display: grid;
    width: min(calc(100% - 2rem), var(--kit-max));
    grid-template-columns: minmax(14rem, 1fr) auto;
    align-items: start;
    gap: 1.25rem 2rem;
    padding: 2.2rem 0;
    margin-inline: auto;
}

.footer strong {
    color: var(--kit-text);
}

.footer-brand p {
    margin: 0.4rem 0 0;
    color: var(--kit-gold-2);
    font-size: 0.76rem;
    font-weight: 700;
}

.footer-network {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem 1rem;
}

.footer-network a {
    color: var(--kit-muted);
    font-size: 0.76rem;
    text-decoration: none;
}

.footer-network a:hover {
    color: var(--kit-gold-2);
}

.footer-copyright {
    grid-column: 1 / -1;
    padding-top: 1rem;
    border-top: 1px solid var(--kit-line);
}

@media (max-width: 75rem) {
    .site-header .nav {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .brand-nav,
    .nav-actions {
        display: none !important;
    }

    .mobile-nav {
        position: relative;
        display: block;
    }

    .mobile-nav summary {
        min-width: 5rem;
        padding: 0.65rem 0.85rem;
        color: var(--kit-bg);
        background: var(--kit-gold-2);
        border-radius: 999px;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 850;
        list-style: none;
        text-align: center;
    }

    .mobile-nav summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav nav {
        position: absolute;
        top: calc(100% + 0.65rem);
        right: 0;
        display: grid;
        width: min(19rem, calc(100vw - 2rem));
        padding: 0.65rem;
        background: var(--kit-panel);
        border: 1px solid var(--kit-line);
        border-radius: 1rem;
        box-shadow: var(--kit-shadow);
    }

    .mobile-nav nav a {
        padding: 0.75rem;
        color: var(--kit-muted);
        border-radius: 0.65rem;
        font-size: 0.84rem;
        font-weight: 720;
        text-decoration: none;
    }

    .mobile-nav nav a:hover,
    .mobile-nav nav a.active {
        color: var(--kit-text);
        background: rgb(255 255 255 / 7%);
    }
}

@media (max-width: 38rem) {
    .site-header .nav {
        width: min(calc(100% - 1.25rem), var(--kit-max));
        min-height: 4.85rem;
    }

    .site-header .brand img {
        width: 3rem;
        height: 3rem;
    }

    .site-header .brand small {
        font-size: 0.56rem;
    }

    .site-header .brand span {
        font-size: 0.84rem;
    }

    .footer .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-network {
        justify-content: flex-start;
    }

    .footer-copyright {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .nav-cta {
        transition: none;
    }
}