:root{
  --glass-bg: rgba(16,20,24,.58);
  --nav-menu: black;
  --glass-border: rgba(255,255,255,.08);
  --link: #eaf6ff;
  --link-dim: #cfe2f1;
}

/* Контейнер-шапка */
.site-header{
  /* По умолчанию шапка находится в потоке страницы */
  position: relative;
  inset-inline: 0;
  top: auto;
  z-index: 100;
  padding: 10px 16px;
}
.site-header.sticky{
  /* Когда "приклеена" — становится фиксированной */
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
}
.site-header-spacer{ display:block; width:100%; height:0; }

.nav{
  max-width: 1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:16px; padding:10px 14px;
  backdrop-filter: blur(10px);
}

/* Бренд */
.brand{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:12px; color:var(--link); text-decoration:none;
  font-weight:800; letter-spacing:.2px;
}
.logo-diamond{
  inline-size:18px; block-size:18px; border-radius:4px;
  background: conic-gradient(from 200deg, #9be7ff, #7ad7ff, #3b82f6, #4ade80, #9be7ff);
  box-shadow:0 0 12px rgba(59,130,246,.45);
}

/* Меню — те самые «пилюли» */
.menu{ list-style:none; margin:0; padding:0; display:flex; gap:14px; }
.menu li{ margin:0; padding:0; }
.menu a{
  display:inline-flex; align-items:center; height:40px;
  padding:0 16px; border-radius:12px;
  color:var(--link); text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.menu a:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* Активный раздел */
.menu a.is-active,
.menu a[aria-current="page"]{
  color:#fff;
  background: rgba(59, 204, 209, 0.247);
  border-color: rgb(15, 238, 219);
  box-shadow:0 6px 18px rgba(50, 180, 197, 0.25);
}

/* Правая кнопка */
.nav-cta .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:9999px; text-decoration:none; font-weight:700;
  border:1px solid var(--glass-border); color:var(--link); background:transparent;
  transition:all .2s ease;
}
.nav-cta .pill:hover{ border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06); }

/* Мобилка: при желании спрячем меню (бургер можно добавить позже) */
@media (max-width:1100px){
  .menu{ display:none; }
}

/* Остальные стили оставляем прежними... */

/* Кнопка-гамбургер */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.menu-toggle__icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--link);
  position: relative;
}

/* Скрываем меню по умолчанию на мобильных устройствах */
@media (max-width: 1100px) {
  .menu {
    display: none;
  }

  /* Показываем меню при нажатии на кнопку (.is-active) */
  .menu.is-active {
    display: block;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 10px); /* отступ от логотипа */
    left: 0;
    right: 0;
    background: var(--nav-menu);
    border-radius: 0 0 16px 16px;
    padding: 10px 14px;
  }

  .menu.is-active a {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  /* показываем кнопку-гамбургер на маленьких экранах */
  .menu-toggle {
    display: block;
  }
}