.site-header{
  position: relative;
  z-index: 50;
}

.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navH);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 60;
}

.nav__inner{
  width: min(1100px, calc(100% - 28px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.nav__group{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  flex: 1;
}
.nav__group--left{ justify-content: flex-end; }
.nav__group--right{ justify-content: flex-start; }

.nav__link{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255,255,255,0.88);
  font-weight: 750;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease;
  outline: none;
}
.nav__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.nav__link:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,204,0,0.35);
  background: rgba(255,255,255,0.08);
}

.nav__logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 0;
  height: var(--navLogoSize);
  margin: 0;
  overflow: hidden;

  border-radius: 999px;
  text-decoration: none;

  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;

  background: transparent;
  border: 0;
  box-shadow: none;

  transition:
    width 320ms cubic-bezier(.2,.9,.2,1),
    margin 320ms cubic-bezier(.2,.9,.2,1),
    opacity 220ms ease,
    transform 220ms ease;
}


.nav.is-logo .nav__logo{
  width: var(--navLogoSize);
  margin: 0 14px;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.nav.is-logo .nav__logo:hover{
  transform: translateY(-1px);
}






@media (max-width: 820px){
  .nav__logo{
    display: none !important;
  }

  .nav__inner{
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .nav__group{
    display: flex;
    align-items: center;
    flex: 0;
    justify-content: center;
    gap: 18px;
  }

  .nav__group--left,
  .nav__group--right{
    justify-content: center;
  }

  .nav__link{
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 10px 12px;   
    font-size: 14px;      
  }
}