.hp-site-nav{
  position:sticky;
  top:0;
  z-index:120;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px max(18px,calc((100vw - 1180px)/2));
  background:rgba(5,6,9,.91);
  border-bottom:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(18px);
}

.hp-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  color:#f7f8fb;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:30px;
  line-height:1;
  letter-spacing:.08em;
  text-decoration:none;
}

.hp-brand img{width:30px;height:30px;display:block}
.hp-brand mark{background:transparent;color:#b7ff09}

.hp-nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
}

.hp-nav-links a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:8px;
  color:#b5bdc9;
  font-family:"IBM Plex Mono",Consolas,monospace;
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}

.hp-nav-links a:hover,
.hp-nav-links a[aria-current="page"]{
  color:#f7f8fb;
  border-color:rgba(183,255,9,.32);
  background:rgba(183,255,9,.08);
}

@media(max-width:900px){
  .hp-site-nav{flex-wrap:wrap}
  .hp-nav-links{order:3;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
}

@media(max-width:620px){
  .hp-site-nav{padding:12px 16px;gap:12px}
  .hp-brand{font-size:26px}
  .hp-nav-links{flex-wrap:wrap;overflow-x:visible;gap:5px}
  .hp-nav-links a{font-size:10px;padding:0 9px}
}