header.top{position:fixed;top:0;inset-inline:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--pad);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent;
  animation:fadeDown .8s cubic-bezier(.22,1,.36,1) both}
header.top.solid{background:rgba(242,242,242,.88);backdrop-filter:blur(14px);border-bottom-color:var(--white-a-10)}
.logo-solid{opacity:0}
header.top.solid .logo-default{opacity:0}
header.top.solid .logo-solid{opacity:1}
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:11px;user-select:none;position:relative;height:28px}
.logo-default,.logo-solid{position:absolute;left:0;top:0;transition:opacity .3s}
header.top{gap:30px}
.nav-right{margin-left:auto}
.nav-c{display:none;gap:30px;font-size:15px}
.nav-c a{position:relative;color:rgba(255,255,255,.85);transition:color .3s}
header.top.solid .nav-c a{color:rgba(19,20,24,.78)}
.nav-c a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1.5px;background: linear-gradient(90deg, var(--main-color), var(--sec-color));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-c a:hover::after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:22px}

/* EN button - top bar (desktop only) */
.lang-btn{display:none;color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1;
  padding:7px 13px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.5);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:background .3s,border-color .3s,color .3s}
.lang-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.7);color:#fff}
header.top.solid .lang-btn{color:var(--dark-gray);background:transparent;border-color:rgba(19,20,24,.32);box-shadow:none}
header.top.solid .lang-btn:hover{background:transparent;border-color:var(--dark-gray);color:var(--dark-gray)}
@media(min-width:940px){.lang-btn{display:inline-flex}}

.burger{display:flex;flex-direction:column;gap:6px;width:26px;background:none;border:0;cursor:pointer;padding:4px 0}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s,background .3s}
header.top.solid .burger span{background:var(--dark-gray)}
.burger.x span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(min-width:940px){.nav-c{display:flex}.burger{display:none}}
.m-overlay{position:fixed;inset:0;width:100vw;height:100vh;z-index:55;background:rgba(242,242,242,.97);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);
  overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .35s}
.m-overlay.open{opacity:1;pointer-events:auto}
.m-overlay a{font-family:var(--fd);font-weight:600;font-size:clamp(22px,6vmin,44px);color:var(--dark-gray);padding:9px 0}

@media(min-width:940px){.m-overlay{display:none}}
@media(orientation:landscape) and (max-height:500px){
  .m-overlay{justify-content:flex-start;gap:0;padding-top:96px}
  .m-overlay a{font-size:clamp(20px,5vmin,32px);padding:6px 0}
}
header.top:has(.burger.x) .logo-default{opacity:0}
header.top:has(.burger.x) .logo-solid{opacity:1}