nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  transition:background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
nav.solid{
  background:rgba(5,5,7,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.nav-in{
  max-width:1180px;margin:0 auto;padding:0 28px;
  height:70px;display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.5px;color:var(--text);text-decoration:none;
}
.logo-mark{
  width:26px;height:26px;border-radius:7px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  display:grid;place-items:center;color:#050507;
  font-size:11px;font-weight:800;
  box-shadow:0 0 22px -4px rgba(0,245,196,.6);
}
.nav-links{display:flex;align-items:center;gap:30px;font-family:var(--mono);font-size:12.5px}
.nav-links a{
  color:var(--muted);text-decoration:none;letter-spacing:.4px;
  transition:color .25s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;
  height:1px;width:0;background:var(--cyan);
  transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-badge{
  font-family:var(--mono);font-size:11px;color:var(--cyan);
  border:1px solid rgba(0,245,196,.3);border-radius:999px;
  padding:5px 13px;display:flex;align-items:center;gap:7px;
  background:rgba(0,245,196,.05);
}
.live{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:blink 2s infinite}
@keyframes blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,245,196,.5)}
  50%{opacity:.3;box-shadow:0 0 0 5px rgba(0,245,196,0)}
}
@media(max-width:980px){.nav-links{display:none}}