/* Verhnyaya panel lendinga */
.l-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7,19,22,.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s;
}
.l-nav.is-scrolled { border-bottom-color: var(--l-line); background: rgba(7,19,22,.92); }
.l-nav .wrap { display: flex; align-items: center; gap: 16px; height: 66px; }

.l-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.l-logo-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(150deg, var(--l-teal3), var(--l-teal));
  display: grid; place-items: center; color: #04222a; font-size: 17px;
}
.l-nav nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14.5px; color: var(--l-dim); }
.l-nav nav a.link:hover { color: var(--l-text); }
.l-cta { padding: 9px 18px; border-radius: 10px; background: var(--l-teal); color: #04222a; font-weight: 600; font-size: 14px; }
.l-cta:hover { background: var(--l-teal2); }

/* Vybor yazyka */
.l-lang { position: relative; }
.l-lang > select {
  appearance: none; background: var(--l-bg2); color: var(--l-text);
  border: 1px solid var(--l-line); border-radius: 9px;
  padding: 7px 28px 7px 11px; font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.l-lang > select:hover { border-color: var(--l-teal); }
.l-lang::after {
  content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--l-mute); font-size: 11px;
}
@media (max-width: 860px) { .l-nav nav a.link { display: none; } }

/* ЗНАЧОК ПРОГРАММЫ вместо смайлика: владелец не видел его нигде на сайте.
   Тот же файл, что у приложения (`app/assets/icon/app-icon.png`), — узнаётся
   на всех платформах одинаково. */
.l-logo-img {
  width: 34px; height: 34px; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(13, 148, 136, .35);
}

/* ВОЙТИ — отдельной кнопкой. Раньше на сайте не было ни слова про вход, и
   человек не понимал, где его учётная запись: «не вижу, как авторизоваться». */
.l-signin {
  padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--l-text); border: 1px solid var(--l-line); background: transparent;
  transition: border-color .2s, color .2s;
}
.l-signin:hover { border-color: var(--l-teal); color: var(--l-teal); }

@media (max-width: 620px) { .l-signin { display: none; } }