.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  background:rgba(2,2,2,.78);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:.25s
}
.site-header.scrolled{
  border-color:var(--line);
  background:rgba(2,2,2,.95)
}
.header-inner{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand img{
  width:108px;
  height:auto
}
.nav{
  display:flex;
  align-items:center;
  gap:28px
}
.nav a{
  font-size:12px;
  color:var(--text)
}
.nav a:hover,.nav a.active{
  color:var(--light)
}
.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:var(--light);
  width:42px;
  height:42px;
  border-radius:4px
}
.menu-toggle{
  position:relative;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  transition:border-color .3s,background .3s
}
.menu-toggle span{
  display:block;
  width:19px;
  height:1px;
  background:var(--light);
  transition:transform .3s,opacity .3s
}
.menu-toggle:hover{
  border-color:var(--accent);
  background:#101010
}
.menu-toggle.open span:nth-child(1){
  transform:translateY(6px) rotate(45deg)
}
.menu-toggle.open span:nth-child(2){
  opacity:0
}
.menu-toggle.open span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg)
}
@media(max-width:768px){
  .menu-toggle{
    display:flex
  }
  .nav{
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    display:flex!important;
    visibility:hidden;
    transition:opacity .25s ease,transform .25s ease,visibility .25s
  }
  .nav.open{
    transform:none;
    opacity:1;
    pointer-events:auto;
    visibility:visible
  }
  .nav a{
    padding:9px 4px
  }
  .nav .btn{
    padding:12px 14px
  }
}