.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:var(--blur-glass);
  background:rgba(3,7,18,0.6);
  border-bottom:1px solid var(--color-border);
}

.header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0.75rem var(--container-pad);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.5rem;
  justify-content:center;
}

.brand-mark{
  height:42px;
  width:auto;
}

.brand-text{
  font-family:var(--font-heading);
  letter-spacing:0.12em;
  font-size:1rem;
}

.nav-left,.nav-right{
  display:flex;
  gap:1rem;
  align-items:center;
}

.nav-left{justify-content:flex-end;}
.nav-right{justify-content:flex-start;}

.nav-link{
  font-weight:500;
  font-size:0.9rem;
  color:var(--color-text-secondary);
  transition:0.2s;
}

.nav-link:hover{
  color:var(--color-text-primary);
}

.nav-cta{
  margin-left:0.5rem;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--color-text-primary);
}

.mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(3,7,18,0.95);
  backdrop-filter:var(--blur-glass);
  z-index:999;
  display:flex;
  justify-content:center;
  padding:2rem 1rem;
}

.mobile-menu-inner{
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.mobile-menu a{
  font-size:1.1rem;
}

@media (max-width:900px){
  .header-inner{
    grid-template-columns:auto 1fr auto;
  }

  .nav-left,.nav-right{
    display:none;
  }

  .brand{
    justify-content:flex-start;
  }

  .brand-text{
    display:none;
  }

  .brand-mark{
    height:32px;
  }

  .nav-toggle{
    display:flex;
  }
}

html.menu-open,
body.menu-open,
html.modal-open,
body.modal-open {
  overflow: hidden;
}

.site-header {
  z-index: 10000;
}

.header-inner {
  position: relative;
  z-index: 10002;
}

.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 10001;
  padding: 6rem 1.5rem 2rem;
  overflow-y: auto;
  background: #030712;
  backdrop-filter: none;
}

.mobile-menu-inner {
  margin: 0 auto;
  padding-bottom: 2rem;
}

.mobile-menu a {
  display: block;
  padding: 0.35rem 0;
  color: var(--color-text-primary);
}

@media (max-width: 900px) {
  .nav-toggle {
    position: relative;
    z-index: 10003;
  }
}


.site-header {
  position: sticky;
  top: 0;
  z-index: 99990;
}

.header-inner {
  position: relative;
  z-index: 99992;
}

.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99991 !important;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  width: 100vw;
  min-height: 100dvh;
  padding: 6.5rem 1.5rem 2rem;

  overflow-y: auto;
  overscroll-behavior: contain;

  background: #030712 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

.mobile-menu-inner {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding-bottom: 2rem;

  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mobile-menu a {
  display: block;
  width: 100%;
  padding: 0.85rem 0;

  color: #f3f4f6;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
}

.mobile-menu .button {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  text-align: center;
}

.nav-toggle {
  position: relative;
  z-index: 99993;
}

html.menu-open,
body.menu-open {
  overflow: hidden !important;
}