.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(1.2) blur(8px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:16px; padding:14px 20px
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px}
.brand .logo{width:auto; height:30px; display:inline-block}

.nav-primary{display:flex; align-items:center; gap:4px}
.nav-list{display:flex; align-items:center; list-style:none; padding:0; margin:0}
.nav-item{position:relative}
.nav-link,.dropdown-trigger{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--text); font-family:'Poppins',sans-serif; font-size:.8rem; font-weight:500; line-height:1;
  border:1px solid transparent; background:transparent
}
.nav-link:focus-visible,.dropdown-trigger:focus-visible,.cta:focus-visible,.nav-toggle:focus-visible{
  outline:none; box-shadow:0 0 0 4px var(--ring)
}

.dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:260px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:transform .18s ease, opacity .18s ease, visibility .18s linear;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  padding:4px
}
.dropdown.open{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown ul{list-style:none; margin:0; padding:0}
.dropdown li a{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--text); font-family:'Poppins',sans-serif; font-size:.8rem; font-weight:500
}
.dropdown li a small{margin-left:auto; color:var(--muted); font-weight:400; white-space:nowrap; font-size:.7rem}

.cta{
  display:inline-flex; align-items:center; padding:10px 12px; margin-left:10px;
  background:linear-gradient(135deg, var(--accent), #7cc3ff); color:#0a0f1a;
  border:none; border-radius:12px; font-weight:500; font-size:.8rem; cursor:pointer; text-decoration:none
}
.cta:hover{filter:brightness(1.25)}

.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:12px 16px;
  border-radius:12px;
  font-size:1rem;
  line-height:1;
  cursor:pointer
}

.dropdown-trigger{background:transparent !important; border:none !important; -webkit-appearance:none; appearance:none; box-shadow:none}

.nav-link,.dropdown-trigger,.dropdown li a,.grad-text{
  color:var(--text);
  -webkit-text-fill-color:var(--text);
  background-image:none
}
.nav-link:hover,.dropdown li a:hover{
  background-image:linear-gradient(90deg,#0000ff,#0066cc,#8a2be2);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  cursor:pointer
}
.dropdown-trigger:hover .grad-text,.dropdown-trigger[aria-expanded="true"] .grad-text{
  background-image:linear-gradient(90deg,#0000ff,#0066cc,#8a2be2);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent
}

@media (max-width:900px){
  .nav{padding:12px 16px}
  .nav-toggle{display:inline-flex; align-items:center; gap:8px; margin-left:auto}
  html.no-scroll,body.no-scroll{overflow:hidden}

  .nav-list{
    position:fixed; inset:0 0 auto 0; top:64px;
    display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:12px;
    background:color-mix(in srgb, var(--bg) 96%, #000);
    border-top:1px solid rgba(255,255,255,.06);
    max-height:calc(100vh - 64px);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:transform .2s ease, opacity .2s ease, visibility .2s linear
  }
  .nav-list.open{transform:none; opacity:1; visibility:visible}

  .nav-link,.dropdown-trigger{padding:14px 12px; font-size:1.05rem}

  .dropdown{
    display:none !important;
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    background:#fff;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    padding:4px;
    margin:4px 0 8px 0
  }
  .nav-item.open > .dropdown{display:block !important}
  .dropdown ul{padding:0; margin:0}
  .dropdown li a{padding:10px 8px}
}

@media (max-width:900px){
  .nav-list::-webkit-scrollbar{width:10px}
  .nav-list::-webkit-scrollbar-track{background:rgba(255,255,255,.04); border-radius:8px}
  .nav-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25); border-radius:8px}
}