/* The site header, shared by every redesigned page and by the older manifesto,
   bots and testimonials pages. It is scoped to .site-header, with its own tokens and class names, so
   it needs nothing from home.css and cannot clash with a page's own .nav or .btn.
   Values come from the "header / navigation" layer of the Final Website frames. */

@font-face { font-family: 'Satoshi'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/satoshi-400.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/satoshi-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

body.is-locked { overflow: hidden; }

.site-header {
  --sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --logo: #efefeb;
  --mint: #aef0d9;
  --w-72: rgba(255, 255, 255, .72);
  --w-64: rgba(255, 255, 255, .64);
  --w-24: rgba(255, 255, 255, .24);
  --w-16: rgba(255, 255, 255, .16);
  --w-12: rgba(255, 255, 255, .12);
  --w-06: rgba(255, 255, 255, .06);
  --gutter: clamp(20px, 5.5556vw, 80px);
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  color: #fff;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 400 14px/20px var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header [hidden] { display: none !important; }
.site-header a { color: inherit; text-decoration: none; }
.site-header svg { display: block; }
.site-header button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.site-header .icon { position: static; width: 16px; height: 16px; flex: none; fill: currentColor; stroke: none; transform: none; }
.site-header :focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.site-header__inner { position: relative; display: flex; align-items: center; width: min(100% - 2 * var(--gutter), 1280px); height: 64px; margin-inline: auto; gap: 40px; }
.site-header__brand { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--logo); }
.site-header__brand svg { width: 22px; height: 19px; fill: currentColor; }
.site-header__cta { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-left: auto; padding: 8px 8px 8px 12px; font: 400 14px/16px var(--mono); text-transform: uppercase; white-space: nowrap; background: var(--w-16); transition: background-color .15s ease; }
.site-header__cta:hover { background: var(--w-24); }

.site-nav { display: flex; align-items: center; gap: 24px; font: 400 14px/16px var(--mono); text-transform: uppercase; }
.site-header .site-nav > a, .site-header .nav__trigger { display: inline-flex; align-items: center; gap: 4px; height: 32px; color: var(--w-64); text-transform: uppercase; font: inherit; transition: color .15s ease; }
.site-header .site-nav > a:hover, .site-header .site-nav > a[aria-current="page"], .site-header .nav__trigger:hover, .site-header .nav__trigger[aria-expanded="true"] { color: #fff; }
.site-header .nav__trigger .icon { width: 12px; height: 12px; transition: transform .15s ease; }
.site-header .nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav__group { position: relative; }
.nav__menu { position: absolute; top: calc(100% + 8px); left: -12px; min-width: 288px; padding: 6px; background: #0a0a0a; border: 1px solid var(--w-12); text-transform: none; font: 500 14px/20px var(--sans); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.site-header .nav__menu a { display: block; padding: 8px 10px; color: var(--w-72); }
.site-header .nav__menu a:hover, .site-header .nav__menu a:focus-visible, .site-header .nav__menu a[aria-current="page"] { color: #fff; background: var(--w-06); }

.site-header .burger { display: none; width: 40px; height: 40px; margin-left: 8px; align-items: center; justify-content: center; color: #fff; }
.site-header .burger .icon { width: 20px; height: 20px; }

@media (max-width: 1100px) {
  .site-nav { display: none; }
  .site-header .burger { display: inline-flex; }
  .site-header__inner { gap: 16px; }
  .site-header.is-open { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-open .site-nav { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 64px; display: flex; flex-direction: column; align-items: stretch; gap: 0; height: calc(100dvh - 64px); padding: 12px var(--gutter) 24px; overflow-y: auto; background: #000; border-block: 1px solid var(--w-12); }
  .site-header.is-open .site-nav > a, .site-header.is-open .nav__trigger { width: 100%; height: 44px; justify-content: space-between; }
  .nav__menu { position: static; min-width: 0; padding: 0 0 8px; background: none; border: 0; box-shadow: none; }
  .site-header .nav__menu a { padding: 8px 0; }
}

@media (max-width: 720px) {
  .site-header__cta { display: none; }
  .site-header .burger { margin-left: auto; }
  .site-header.is-open .site-header__cta { display: inline-flex; position: absolute; right: 48px; top: 16px; }
}