.site-header {
  position: fixed;
  top: calc(20 * var(--vmin));
  left: calc(20 * var(--vmin));
  right: calc(20 * var(--vmin));
  z-index: 100;
  height: var(--header-h);
  border-radius: calc(20 * var(--vmin));
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(calc(18 * var(--vmin))) saturate(160%);
  -webkit-backdrop-filter: blur(calc(18 * var(--vmin))) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 calc(8 * var(--vmin)) calc(32 * var(--vmin)) rgba(0, 0, 0, 0.08);
  transition: top 0.35s ease, left 0.35s ease, right 0.35s ease,
    border-radius 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  border-color: transparent;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 calc(2 * var(--vmin)) calc(16 * var(--vmin)) rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo {
  font-size: calc(28 * var(--vmin));
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.5px;
  color: var(--c-blue);
  line-height: 1;
  margin: 0;
}

.logo img {
  height: calc(24 * var(--vmin));
}

.main-nav {
  margin-left: auto;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: calc(38 * var(--vmin));
}

.main-nav__link {
  position: relative;
  font-size: calc(15 * var(--vmin));
  color: var(--c-text);
  padding: calc(8 * var(--vmin)) 0;
  transition: color 0.25s, background-size 0.4s ease;
  background-image: linear-gradient(var(--c-blue-bright), var(--c-blue-bright));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% calc(2 * var(--vmin));
}

.main-nav__link:hover {
  color: var(--c-blue-bright);
  background-size: 100% calc(2 * var(--vmin));
}

.main-nav__link.is-active {
  color: var(--c-blue-bright);
  background-size: 100% calc(2 * var(--vmin));
}

.header-tools {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--vmin));
  margin-left: calc(44 * var(--vmin));
}

.header-tools__icon-btn {
  display: flex;
  align-items: center;
  color: var(--c-text);
  transition: color 0.25s;
}

.header-tools__icon-btn:hover {
  color: var(--c-blue-bright);
}

.lang-switch {
  position: relative;
}

.lang-switch__btn {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--vmin));
  font-size: calc(14 * var(--vmin));
  color: var(--c-text);
}

.lang-switch__btn:hover {
  color: var(--c-blue-bright);
}

.lang-switch__dropdown {
  position: absolute;
  top: calc(100% + calc(10 * var(--vmin)));
  right: 0;
  min-width: calc(130 * var(--vmin));
  padding: calc(6 * var(--vmin)) 0;
  background: var(--c-white);
  border-radius: calc(8 * var(--vmin));
  box-shadow: 0 calc(6 * var(--vmin)) calc(24 * var(--vmin)) rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(6 * var(--vmin)));
  transition: all 0.25s;
}

.lang-switch.is-open .lang-switch__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switch__dropdown li {
  padding: calc(9 * var(--vmin)) calc(18 * var(--vmin));
  font-size: calc(13 * var(--vmin));
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lang-switch__dropdown li:hover {
  background: #f5f7fa;
}

.lang-switch__dropdown li.is-active {
  color: var(--c-green);
}

.drawer-nav {
  display: none;
}

main [id] {
  scroll-margin-top: calc(var(--header-h) + calc(20 * var(--vmin)));
}

@media (max-width: 1400px) {
  .main-nav__list {
    gap: calc(24 * var(--vmin));
  }
}

@media (max-width: 1200px) {
  .main-nav {
    display: none;
  }

  .header-tools {
    margin-left: auto;
  }

  .drawer-nav {
    display: block;
    position: fixed;
    top: calc(var(--header-h) + calc(20 * var(--vmin)));
    width: 60%;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: var(--c-white);
    opacity: 0.94;
    padding: calc(20 * var(--vmin)) var(--container-pad);
    transform: translateX(100%);
    transition: transform 0.3s ease, top 0.35s ease;
}

  .site-header.is-scrolled + .drawer-nav {
    top: var(--header-h);
  }

  .drawer-nav.is-open {
    transform: translateX(0);
  }

  .drawer-nav a {
    display: block;
    padding: calc(15 * var(--vmin)) 0;
    font-size: calc(16 * var(--vmin));
    border-bottom: 1px solid var(--c-border);
  }

  .drawer-nav a.is-active {
    color: var(--c-blue-bright);
  }
}

@media (max-width: 768px) {
  .logo {
    font-size: calc(16 * var(--vmin));
  }

  .logo img {
    height: calc(12 * var(--vmin));
  }

  .header-tools__icon-btn:not(#navToggle) {
    display: none;
  }
}

@media (max-width: 449px) {
  #navToggle svg {
    width: 16px;
    height: 16px;
  }
}