/* Fix the glass navigation above the hero while preserving readable contrast. */
.site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(to bottom, rgba(0, 3, 8, .87), rgba(0, 3, 8, .2)); transition: background-color .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { position: fixed; background: rgba(3, 7, 13, .94); box-shadow: 0 4px 24px rgba(0, 0, 0, .36); backdrop-filter: blur(12px); }
/* Drop the slim utility bar once the visitor scrolls, so only the nav stays pinned. */
.site-header.is-scrolled .topbar { display: none; }
.navigation { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 34px; width: var(--container); min-height: 82px; margin-inline: auto; }

/* Space 360° logo image. */
.brand { position: relative; display: flex; align-items: center; width: max-content; color: #fff; }
.brand__logo { display: block; width: 150px; height: auto; }
.brand--footer { transform: scale(1.32); transform-origin: left center; }

/* Distribute desktop links and action buttons in their own flexible area. */
.navigation__panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.navigation__links, .navigation__actions { display: flex; align-items: center; gap: 21px; }
.navigation__actions { gap: 10px; }
.navigation__link { position: relative; color: rgba(255, 255, 255, .86); font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: -.02em; text-transform: uppercase; transition: color .2s ease; }
.navigation__link::after { position: absolute; content: ''; right: 50%; bottom: -12px; width: 0; height: 4px; background: var(--color-cyan); border-radius: 10px; box-shadow: 0 0 9px var(--color-cyan); transition: width .2s ease, right .2s ease; }
.navigation__link:hover, .navigation__link.is-active { color: #fff; }
.navigation__link:hover::after, .navigation__link.is-active::after { right: calc(50% - 2px); width: 4px; }
.navigation__toggle { display: none; }

/* Transform the desktop nav into an accessible, animated panel at tablet width. */
@media (max-width: 980px) {
    .navigation { grid-template-columns: 1fr auto; min-height: 74px; }
    .navigation__toggle { display: grid; gap: 5px; width: 44px; height: 42px; padding: 10px; color: #fff; background: transparent; border: 1px solid rgba(125, 203, 255, .5); border-radius: 4px; }
    .navigation__bar { display: block; width: 100%; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
    .navigation__toggle[aria-expanded='true'] .navigation__bar:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
    .navigation__toggle[aria-expanded='true'] .navigation__bar:nth-of-type(3) { opacity: 0; }
    .navigation__toggle[aria-expanded='true'] .navigation__bar:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }
    .navigation__panel { position: absolute; top: 100%; right: 0; display: grid; grid-template-columns: 1fr; width: min(370px, 100vw); padding: 20px 24px 25px; background: rgba(3, 8, 15, .98); border: 1px solid rgba(91, 194, 255, .28); border-top: 0; box-shadow: -12px 20px 34px rgba(0, 0, 0, .32); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
    .navigation__panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
    .navigation__links, .navigation__actions { display: grid; justify-items: stretch; gap: 0; }
    .navigation__links { border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .navigation__link { display: block; padding: 13px 0; font-size: 11px; }
    .navigation__link::after { bottom: 7px; right: auto; left: 0; }
    .navigation__link:hover::after, .navigation__link.is-active::after { right: auto; left: 0; }
    .navigation__actions { grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; }
}

@media (max-width: 420px) {
    .navigation { min-height: 68px; }
    .brand__logo { width: 120px; }
}