.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(120%) blur(6px);
}
.header-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img{height:36px}
.nav{
  display:flex;
  align-items:center;
  gap:26px;
}
.nav a{
  color:#fff;
  opacity:.9;
}
.nav a:hover,
.nav a.active{
  opacity:1;
}
.burger{
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  place-items:center;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.burger svg{
  display:block;
}
@media (max-width:980px){
  .burger{
    display:grid;
  }

  .nav{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    width:100%;
    background:var(--blue);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    box-shadow:0 16px 40px rgba(0,0,0,.22);
    padding:18px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  }

  .nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav a{
    width:100%;
    padding:12px 4px;
  }

  .nav .cta{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}