#site-navbar{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:900;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:rgba(3,20,61,.35);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;
  transform:translateZ(0);
}
#site-navbar.scrolled{
  background:rgba(3,20,61,.82);
  border-color:rgba(184,199,230,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.30);
}

.nav-inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.nav-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-brand img{
  height:44px;
  width:44px;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(25,217,255,.35));
}
.nav-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.nav-brand-ar{
  font-family:var(--font-ar-display);
  font-size:20px;
  color:var(--heading);
}
.nav-brand-en{
  font-family:var(--font-en-display);
  font-size:10.5px;
  letter-spacing:.28em;
  color:var(--cyan);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a{
  position:relative;
  font-size:15.5px;
  color:var(--body-text);
  font-weight:600;
  padding:6px 2px;
  transition:color .25s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  right:0; bottom:-2px;
  width:0%; height:2px;
  background:var(--gradient-brand);
  transition:width .3s ease;
  border-radius:2px;
}
.nav-links a:hover,
.nav-links a.active{ color:var(--heading); }
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ padding:11px 22px; font-size:14.5px; }
.nav-cta-mobile{ display:none; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  margin-inline:auto;
  background:var(--heading);
  border-radius:2px;
  transition:transform .35s ease, opacity .35s ease, background .35s ease;
}
.nav-toggle.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); background:var(--cyan); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); background:var(--cyan); }

@media (max-width:960px){
  .nav-links{
    position:fixed;
    top:var(--nav-h);
    inset-inline:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(3,20,61,.97);
    backdrop-filter:blur(18px);
    max-height:0;
    overflow:hidden;
    transition:max-height .45s cubic-bezier(.2,.8,.2,1);
    border-bottom:1px solid var(--glass-border);
  }
  .nav-links.open{ max-height:520px; }
  .nav-links a{
    padding:16px 24px;
    border-bottom:1px solid rgba(184,199,230,.06);
    font-size:16.5px;
  }
  .nav-links a::after{ display:none; }
  .nav-cta{ display:none; }
  .nav-links .nav-cta-mobile{
    display:flex;
    padding:20px 24px 26px;
  }
  .nav-toggle{ display:flex; }
}