:root {
  --nav-top: 22px;
  --nav-height: 92px;
  --nav-width: min(1280px, calc(100% - 80px));
  --nav-radius: 26px;
  --nav-padding: 28px;
  --nav-duration: 660ms;
  --nav-ease: cubic-bezier(.22, 1, .36, 1);
}
html { scroll-padding-top: 112px; }
.nav-is-compact {
  --nav-top: 16px;
  --nav-height: 72px;
  --nav-width: min(1080px, calc(100% - 80px));
  --nav-radius: 42px;
}
.site-header {
  position: fixed;
  z-index: 60;
  isolation: isolate;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--nav-width);
  max-width: none;
  height: var(--nav-height);
  margin: 0;
  padding-inline: var(--nav-padding);
  gap: 24px;
  border: 0;
  border-radius: var(--nav-radius);
  background: transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border: 1px solid #c8e6ed36;
  border-radius: inherit;
  background: linear-gradient(115deg, #1b344885, #0a1c2d8c 55%, #19384c7a);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 10px 34px #010b1b2e, inset 0 1px 0 #ebffff1c;
  transform-origin: center;
}
.site-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px 12% auto;
  height: 1px;
  pointer-events: none;
  opacity: .64;
  background: linear-gradient(90deg, transparent, #e0ffff91, transparent);
}
.nav-is-compact .site-header::before {
  background: linear-gradient(115deg, #193044e3, #091c2ce3 55%, #183447dc);
  border-color: #c8e6ed40;
  box-shadow: 0 12px 42px #01081445, inset 0 1px 0 #ebffff20;
}
.nav-motion-ready .site-header {
  transition: width var(--nav-duration) var(--nav-ease), height var(--nav-duration) var(--nav-ease), top var(--nav-duration) var(--nav-ease), border-radius var(--nav-duration) var(--nav-ease), padding var(--nav-duration) var(--nav-ease);
}
.nav-motion-ready .site-header::before {
  transition: border-color 300ms ease, box-shadow 400ms ease;
}
.nav-is-settling .site-header::before {
  animation: nav-droplet 780ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes nav-droplet {
  0% { transform: scale(1); }
  25% { transform: scale(1.018, .94); }
  52% { transform: scale(.995, 1.025); }
  76% { transform: scale(1.002, .993); }
  100% { transform: scale(1); }
}
.site-header .brand { flex-shrink: 0; gap: 11px; }
.site-header .brand-symbol { width: 40px; height: 40px; border-radius: 12px; }
.site-header .brand-name { font-size: 24px; letter-spacing: .09em; }
.site-header .brand-name > span { font-size: 8px; letter-spacing: .3em; margin-top: 7px; color: #d8e9f1; }
.site-header .desktop-nav { gap: 32px; font-size: 14px; line-height: 1.5; letter-spacing: .055em; white-space: nowrap; color: #f0f7fb; }
.site-header .desktop-nav a { padding: 13px 0; }
.site-header .desktop-nav > a {
  transform-origin: center;
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1), color 150ms ease;
}
.site-header .desktop-nav > a:focus-visible {
  transform: scale(1.07);
  transition: transform 480ms cubic-bezier(.22, 1.5, .36, 1), color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .desktop-nav > a:hover {
    transform: scale(1.07);
    transition: transform 480ms cubic-bezier(.22, 1.5, .36, 1), color 150ms ease;
  }
}
.site-header .desktop-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--accent); }
.site-header .header-cta { min-height: 42px; padding: 10px 18px; border-color: #d7effa40; border-radius: 23px; gap: 22px; color: #f8fcff; background: #ecfaff0a; font-size: 13px; line-height: 1.5; letter-spacing: .04em; flex-shrink: 0; }
.site-header .header-cta:hover { background: #d3f4ff17; transform: none; }
.site-header .menu-toggle { flex-shrink: 0; border-radius: 50%; width: 42px; height: 42px; padding: 10px; }
.site-header .menu-toggle span { width: 22px; background: #eefaff; }
.mobile-nav {
  position: fixed;
  z-index: 59;
  inset: auto;
  top: calc(var(--nav-top) + var(--nav-height) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--nav-width);
  max-height: calc(100svh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 26px;
  gap: 5px;
  border: 1px solid #bedee732;
  border-radius: 24px;
  background: #0a1e2ff2;
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 18px 40px #0005;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .055em;
}
.mobile-nav a { padding: 12px 4px; }
.nav-motion-ready .mobile-nav { transition: top var(--nav-duration) var(--nav-ease), width var(--nav-duration) var(--nav-ease); }
@media (min-width: 981px) { .mobile-nav { display: none; } }
@media (max-width: 1100px) and (min-width: 981px) {
  :root { --nav-width: calc(100% - 48px); --nav-padding: 25px; }
  .nav-is-compact { --nav-width: calc(100% - 76px); }
  .site-header { gap: 20px; }
  .site-header .desktop-nav { gap: 24px; font-size: 13px; }
  .site-header .header-cta { padding-inline: 16px; gap: 16px; }
}
@media (max-width: 980px) {
  :root { --nav-top: 18px; --nav-height: 82px; --nav-width: calc(100% - 48px); --nav-padding: 22px; --nav-radius: 24px; }
  .nav-is-compact { --nav-top: 14px; --nav-height: 68px; --nav-width: calc(100% - 64px); --nav-radius: 38px; }
  .site-header { gap: 16px; }
  .site-header .desktop-nav { display: none; }
  .site-header .header-cta { margin-left: auto; }
  .site-header .menu-toggle { display: block; }
}
@media (max-width: 480px) {
  :root { --nav-top: 14px; --nav-height: 76px; --nav-width: calc(100% - 28px); --nav-padding: 14px; --nav-radius: 23px; }
  .nav-is-compact { --nav-top: 12px; --nav-height: 64px; --nav-width: calc(100% - 36px); --nav-radius: 35px; }
  .site-header { gap: 10px; }
  .site-header .brand { gap: 9px; }
  .site-header .brand-symbol { width: 34px; height: 34px; border-radius: 10px; }
  .site-header .brand-name { font-size: 21px; letter-spacing: .07em; }
  .site-header .brand-name > span { font-size: 7px; letter-spacing: .26em; margin-top: 6px; }
  .site-header .header-cta { padding: 8px 12px; min-height: 40px; font-size: 12px; gap: 10px; letter-spacing: .025em; }
  .site-header .header-cta > span { font-size: 17px; }
  .site-header .menu-toggle { width: 38px; height: 40px; padding: 9px; }
  .site-header .menu-toggle span { width: 20px; }
  .mobile-nav { padding: 18px 22px; border-radius: 23px; font-size: 15px; }
}
@media (max-width: 360px) {
  :root { --nav-padding: 12px; }
  .site-header { gap: 7px; }
  .site-header .brand { gap: 8px; }
  .site-header .header-cta { gap: 7px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-motion-ready .site-header, .nav-motion-ready .site-header::before, .nav-motion-ready .mobile-nav { transition: none; }
  .nav-is-settling .site-header::before { animation: none; }
  .site-header .desktop-nav > a,
  .site-header .desktop-nav > a:hover,
  .site-header .desktop-nav > a:focus-visible { transform: none; transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: #102638f5; }
  .nav-is-compact .site-header::before { background: #102638fa; }
}