:root { --qh-cyan: #42d9e8; }
.qh-topbar {
  width: min(1260px, calc(100% - 96px));
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 auto;
}
.qh-topbar .brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.qh-topbar .brand strong { letter-spacing: 0.04em; color: #f2f7fa; }
.qh-topbar .brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center; flex: none;
  border: 2px solid var(--qh-cyan);
  border-radius: 50%;
  color: var(--qh-cyan);
  font-size: 1.35rem; font-weight: 900;
  box-shadow: 0 0 28px rgba(66, 217, 232, 0.13);
}
.qh-topbar .nav-links { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: flex-end; }
.qh-topbar .nav-links a {
  position: relative;
  padding: 25px 13px 22px;
  color: #c1ced6;
  font-size: 0.88rem;
  text-decoration: none;
}
.qh-topbar .nav-links a:hover, .qh-topbar .nav-links a:focus-visible, .qh-topbar .nav-links a.active { color: var(--qh-cyan); }
.qh-topbar .nav-links a.active::after {
  position: absolute; right: 13px; bottom: 12px; left: 13px; height: 2px;
  content: ""; background: var(--qh-cyan);
  box-shadow: 0 0 12px rgba(66, 217, 232, 0.5);
}
@media (max-width: 900px) {
  .qh-topbar { width: min(100% - 28px, 1260px); align-items: flex-start; flex-direction: column; padding: 16px 0; }
  .qh-topbar .nav-links { justify-content: flex-start; }
  .qh-topbar .nav-links a { padding: 8px 11px 12px; }
  .qh-topbar .nav-links a.active::after { right: 11px; bottom: 5px; left: 11px; }
}