/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  background: var(--y);
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; flex-wrap: wrap;
  padding: .38rem 2rem;
  font-size: .78rem; font-weight: 700; color: var(--bg);
  line-height: 1.3;
}
.topbar a { color: var(--bg); text-decoration: none; }
.topbar-sep { opacity: .4; }

/* ── NAV ─────────────────────────────────────────────────── */
nav {
  position: fixed; top: 32px; left: 0; right: 0; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* равные стороны → ссылки строго по центру */
  align-items: center;
  gap: 1rem;
  padding: .75rem 2.5rem;
  background: rgba(10,10,10,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245,197,24,.08);
}

.nav-logo { font-size: 1.3rem; font-weight: 900; color: var(--y); letter-spacing: -.5px; }
.nav-logo span { color: var(--wh); }

.nav-links {
  display: flex; justify-content: center;
  gap: 1.8rem; list-style: none;
}
.nav-links a {
  color: var(--gl); text-decoration: none;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  transition: color .2s;
}
.nav-links a:hover { color: var(--y); }

.nav-right { display: flex; align-items: center; gap: .8rem; justify-self: end; }

/* Телефон в шапке */
.nav-phone {
  display: flex; align-items: center; gap: .4rem;
  color: var(--wh); text-decoration: none;
  font-size: .88rem; font-weight: 700;
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 6px; padding: .35rem .8rem;
  transition: all .2s; white-space: nowrap;
}
.nav-phone:hover { border-color: var(--y); color: var(--y); }
.nav-phone-icon { color: var(--y); }

.langs { display: flex; gap: .3rem; }
.lb {
  padding: .28rem .65rem;
  border: 1px solid rgba(245,197,24,.25); border-radius: 4px;
  background: transparent; color: var(--gr);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  cursor: pointer; transition: all .18s;
}
.lb:hover, .lb.on { background: var(--y); color: var(--bg); border-color: var(--y); }

.ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.ham span { display: block; width: 22px; height: 2px; background: var(--wh); transition: .3s; }

/* ── МОБИЛЬНАЯ НИЖНЯЯ ПАНЕЛЬ ─────────────────────────────── */
.mob-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  height: 58px;
}
.mob-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: .5rem; font-size: .95rem; font-weight: 800;
  text-decoration: none; letter-spacing: .03em;
}
.mob-call { background: var(--y); color: var(--bg); }
.mob-tg   { background: #229ED9; color: #fff; max-width: 110px; }

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 780px) {
  .topbar {
    font-size: .7rem; gap: .5rem 1rem;
    padding: .4rem 1rem; top: 0;
  }
  .topbar-sep { display: none; }

  nav {
    top: 42px; /* высота topbar на мобайле */
    padding: .6rem 1rem;
    grid-template-columns: auto auto auto;
  }

  .nav-links {
    display: none;
    position: fixed; top: 94px; left: 0; right: 0;
    background: rgba(10,10,10,.99);
    flex-direction: column; justify-content: flex-start;
    padding: 1.5rem; gap: 1.2rem;
    border-bottom: 1px solid rgba(245,197,24,.1);
    z-index: 99;
  }
  .nav-links.open { display: flex; }

  .ham { display: flex; }
  .nav-phone { display: none; }

  .mob-bar { display: flex; }
  body { padding-bottom: 58px; }
}