.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-inner{
  max-width: 1120px;
  margin-inline: auto;
}
.nav-brand-wrapper{
  display: flex;
  align-items: center;
}
.nav-brand{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-logo-bubble{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffffff, #ff7ad6 35%, #7ef2ff 70%, #1a0630 100%);
  box-shadow: 0 0 18px rgba(255, 122, 214, 0.85);
}
.nav-brand-text{
  display: flex;
  flex-direction: column;
}
.nav-brand-title{
  font-family: var(--font-accent);
  font-size: var(--font-size-lg);
  letter-spacing: 0.04em;
}
.nav-brand-tagline{
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.nav-menu{
  display: none;
}
.nav-menu a{
  font-family: var(--font-sans);
  font-weight: 500;
}
.nav-toggle{
  margin-left: var(--space-3);
}
@media (min-width: 768px){
  .nav-inner{
    padding-block: var(--space-2);
  }
  .nav-menu{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
}
@media (max-width: 767.98px){
  .nav-inner{
    padding-block: var(--space-2);
    display: contents;
  }
  .nav-menu{
    margin-top: var(--space-3);
    border-radius: var(--radius-lg);
    background: rgba(10, 0, 35, 0.96);
    box-shadow: var(--shadow-subtle);
  }
}
.nav-open .nav-menu{
  display: flex;
}
.nav-open .site-header{
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.nav-menu a[aria-current="page"]{
  color: var(--color-text);
  background: rgba(126, 242, 255, 0.18);
}
.nav-menu a{
  position: relative;
  padding-inline: 0.75rem;
  padding-block: 0.4rem;
  border-radius: 999px;
}
.nav-menu a::after{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 242, 255, 0), rgba(126, 242, 255, 0.9), rgba(255, 122, 214, 0));
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.nav-menu a:hover::after,
.nav-menu a[aria-current="page"]::after{
  opacity: 1;
  transform: scaleX(1);
}
body.nav-open{
  overflow-y: hidden;
}
@media (min-width: 768px){
  body.nav-open{
    overflow-y: auto;
  }
}