:root {
  --controls-light-ink: #ffffff;
  --controls-bg: rgba(5, 15, 30, .48);
  --controls-border: rgba(255, 255, 255, .28);
  --controls-ink: #ffffff;
  --controls-hover: rgba(255, 255, 255, .12);
  --controls-shadow: 0 4px 18px rgba(5, 15, 30, .12);
}
#nav.scrolled {
  --controls-bg: var(--sky2);
  --controls-border: var(--border);
  --controls-ink: var(--navy);
  --controls-hover: var(--sky);
}
html[data-theme="dark"] #nav.scrolled,
#nav.menu-open {
  --controls-bg: var(--navy2);
  --controls-border: var(--navy3);
  --controls-ink: var(--controls-light-ink);
  --controls-hover: var(--navy3);
}
#nav .nav-inner { gap: 12px; }
#nav .nav-links { flex: 1 1 0; min-width: 0; justify-content: center; }
.nav-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
#nav .nav-controls .nav-cta { width: 150px; padding-left: 0; padding-right: 0; text-align: center; margin-left: 8px; }
.language-switch {
  position: relative; isolation: isolate; display: flex; flex: 0 0 132px;
  width: 132px; height: 44px; padding: 4px;
  border: 1px solid var(--controls-border); border-radius: 999px;
  background: var(--controls-bg); box-shadow: var(--controls-shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.language-switch::before {
  content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--blue);
  transition: transform .25s var(--ease);
}
.language-switch:has([data-language="kk"][aria-pressed="true"])::before { transform: translateX(100%); }
.language-switch:has([data-language="en"][aria-pressed="true"])::before { transform: translateX(200%); }
.language-switch__button {
  flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--controls-ink); font: 600 11px var(--font);
  letter-spacing: .03em; cursor: pointer; transition: color .2s, background .2s;
}
.language-switch__button:hover { background: var(--controls-hover); }
.language-switch__button[aria-pressed="true"] { color: var(--controls-light-ink); }
#nav .nav-theme-btn {
  display: flex; align-items: center; justify-content: center; flex: 0 0 44px;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--controls-border); background: var(--controls-bg);
  color: var(--controls-ink); box-shadow: var(--controls-shadow); cursor: pointer;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .2s, border-color .2s;
}
#nav .nav-theme-btn:hover { background: var(--controls-hover); border-color: var(--accent); }
#nav .nav-theme-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
.language-switch__button:focus-visible,
#nav .nav-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
@media (min-width: 769px) and (max-width: 1200px) {
  #nav .nav-links { gap: 12px; }
  #nav .nav-links a { font-size: 10px; letter-spacing: .03em; }
  #nav .nav-controls .nav-cta { width: 116px; margin-left: 0; }
}
@media (max-width: 768px) {
  #nav .nav-logo { margin-right: auto; }
  #nav .nav-inner { gap: 8px; }
  .language-switch { width: 120px; flex-basis: 120px; }
}
@media (max-width: 380px) {
  #nav .nav-inner { gap: 5px; padding: 0 10px; }
  #nav .nav-logo img { max-width: 105px; height: auto; }
  .nav-controls { gap: 5px; }
  .language-switch { width: 108px; flex-basis: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .language-switch::before, .language-switch__button, #nav .nav-theme-btn { transition: none; }
}