.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;background:rgba(22,22,23,.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(22,22,23,.82)}
.nav-inner{max-width:1200px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.02em;font-size:17px}
.logo-dot{width:14px;height:14px;border-radius:50%;background:conic-gradient(#fa2d48,#ff8fa3,#ffd1dc,#fa2d48);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-links{display:flex;gap:28px;list-style:none;font-size:13px}
.nav-links a{color:#d2d2d7;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
@media(max-width:720px){.nav-links{display:none}}