/* ================== HEADER ================== */
.topbar{
  background:linear-gradient(180deg, #1a0829 0%, #13071f 100%);
  border-bottom:1px solid #2a1a3b;
  position:sticky; top:0; z-index:10;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
}

.topbar .wrap{
  display:flex;
  justify-content: center;
  align-items: center; 
  gap:24px; 
  text-align: center;
  padding: 2px 0 14px 0;
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none
}

.brand img{
    height:100px;
    width:auto;
    display:block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

.tagline{
    font-size:.72rem;
    color:var(--muted);
    margin-top:2px
}

.menu{
    margin-left:auto;
    display:flex;
    gap:26px;
    align-items:center
}

.menu a{
  color:#f3eaff;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.2px;
  opacity:.9;
  position:relative;
  padding:6px 2px;
}

.menu a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg, transparent, #8b44ff, transparent);
  transform:scaleX(0);
  transition:.25s ease;
}

.menu a:hover{
    opacity:1
}

.menu a:hover::after{
    transform:scaleX(1)
}

.lang{
    margin-left:10px;
    font-size:18px;
    opacity:.85
}