.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgb(21 55 140 / 62%);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar{
  max-width:1300px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:18px;
}

.logo img{height:34px;width:auto;display:block}

.main-nav{
  display:flex;
  gap:18px;
}
.main-nav a{
  font-weight:800;
  font-size:14px;
  opacity:.82;
  padding:10px 10px;
  border-radius:999px;
  transition:.18s;
}
.main-nav a:hover{opacity:1; background:rgba(255,255,255,.06)}
.main-nav a.active{
  opacity:1;
  background:rgba(255,60,56,.14);
  border:1px solid rgba(255,60,56,.28);
}

.header-search{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.10);
  padding:10px 14px;
  border-radius:4px;
  width:340px;
  transition:.25s;
}
.header-search:focus-within{
  width:440px;
  border-color:rgba(255,60,56,.40);
  box-shadow:0 0 0 4px rgba(255,60,56,.15);
}
.search-icon{opacity:.75}
.header-search input{
  width:100%;
  border:0;
  outline:none;
  background:none;
  color:#000000;
  font-size:14px;
}

.nav-actions{
  display:none;
  margin-left:auto;
  gap:10px;
}
.nav-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:18px;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
}

/* MOBILE */
@media (max-width:900px){
  .main-nav{display:none}
  .header-search{display:none}
  .nav-actions{display:flex}
}


@media (max-width:768px){
  .navbar{padding:12px 14px}

  .main-nav{
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:62px;
    bottom:0;
    flex-direction:column;
    background:#0b0d12;
    padding:10px 0;
    overflow-y:auto;
    border-top:1px solid rgba(255,255,255,.06);

    z-index:1001; /* 🔥 THIS IS THE FIX */
  }

  .main-nav.show{display:flex}

  .main-nav a{
    border-radius:0;
    padding:18px 18px;
    border-bottom:1px solid rgba(255,255,255,.06);
    font-size:16px;
  }

  .header-search{
    display:none;
    position:absolute;
    left:14px;
    right:14px;
    top:calc(100% + 10px);
    width:auto;
    border-radius:16px;
    z-index:1002;
  }

  .header-search.show{display:flex}

  body.nav-open{overflow:hidden}
}
@media (max-width: 768px){
  .site-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(11,13,18,.95);
  }
}