<div class="gm-nav-bg">
  <nav class="gm-nav">
    <span class="gm-nav__logo">✦ Brand</span>
    <a class="gm-nav__link gm-nav__link--active" href="#">Home</a>
    <a class="gm-nav__link" href="#">Features</a>
    <a class="gm-nav__link" href="#">Pricing</a>
    <button class="gm-nav__cta">Sign in</button>
  </nav>
</div>

.gm-nav-bg {
  position: relative; padding: 8px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 25% 50%, #6366f1 0%, transparent 50%),
    radial-gradient(circle at 75% 50%, #ec4899 0%, transparent 50%),
    #1a1426;
}
.gm-nav {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 6px 10px;
}
.gm-nav__logo {
  font: 700 13px system-ui, sans-serif;
  color: #fff; margin-right: 12px;
}
.gm-nav__link {
  font: 500 12px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 6px 12px; border-radius: 7px;
  transition: background 0.2s, color 0.2s;
}
.gm-nav__link:hover {
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.gm-nav__link--active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.gm-nav__cta {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 6px 14px; border-radius: 7px;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-nav__cta:hover { background: rgba(255, 255, 255, 0.32); }