/* ═══ Шапка-планка ══════════════════════════════════════════
   Меню блоком по центру верха: ячейки в рамках, активная залита
   сигнальным цветом. Логотипа в шапке нет — знак живёт крупно
   в самом полотне первого экрана.
   ═══════════════════════════════════════════════════════════ */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; justify-content: center;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border: 0;
  pointer-events: none;      /* кликается только сама планка */
}
.hdr.stuck { border: 0; }

.bar {
  pointer-events: auto;
  display: flex;
  border: 1px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 .6rem .6rem;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 1.4rem 3rem -2rem rgba(18, 19, 15, .4);
}

.bar__i {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.5rem 2.4rem;
  border: 0; border-left: 1px solid var(--ink);
  background: none;
  /* Тот же гротеск, что в заголовках: в планке Manrope выглядел
     как стандартный шаблон. */
  font: 600 1.45rem/1 "Unbounded", sans-serif;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.bar__i:first-child { border-left: 0; }
.bar__i:hover { background: var(--ink); color: var(--on-brand); }

/* Активный пункт залит сигналом — приём Л-Пак: ярким помечен
   раздел, в который ведём. */
.bar__i--on { background: var(--brand); color: var(--on-brand); }
.bar__i--on:hover { background: var(--ink); color: var(--on-brand); }

.bar__car { font-size: .72em; transition: transform var(--fast); }
.bar__i--drop[aria-expanded="true"] .bar__car { transform: rotate(180deg); }

/* Кнопка заявки — единственная залитая ячейка планки: целевое
   действие видно сразу, остальные пункты равные. Заливка хаки,
   а не лайм: кислотный цвет в шапке спорил с моделями. */
.bar__i--cta { background: var(--brand); color: var(--on-brand); }
.bar__i--cta:hover { background: var(--ink); color: var(--on-brand); }

/* Знак в планке: на внутренних страницах нет полотна с крупным
   логотипом, поэтому он живёт здесь. На главной он уже есть
   в полотне — там прячем, чтобы не было дубля. */
body[data-page="home"] .bar__i--logo { display: none; }

.bar__i--logo { gap: 1rem; padding-inline: 2rem; }
.bar__i--logo:hover { background: var(--ink); }

.bar__i--logo .logo__cell {
  width: 1.7rem; height: 2.4rem;
  border-width: 2px; border-radius: .5rem;
  gap: .2rem; padding: 0 .3rem;
}
.bar__i--logo .logo__cell::before {
  top: -.46rem; width: .7rem; height: .36rem;
}
.bar__i--logo .logo__cell i { height: .26rem; }

.bar__m {
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.05em;
}
.bar__m sup { font-size: .55em; vertical-align: super; }
.bar__m b { font-weight: inherit; color: var(--acc-deep); }
.bar__i--logo:hover .bar__m b { color: var(--on-brand); }

/* на узком экране оставляем только значок */
@media (max-width: 1200px) {
  .bar__m { display: none; }
  .bar__i--logo { padding-inline: 1.5rem; }
}

/* ── модалка заявки ────────────────────────────────────────── */

/* display:flex перебивает атрибут hidden — окно было видно сразу
   после загрузки. Прячем явно. */
.omodal[hidden] { display: none; }

.omodal {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background: rgba(10, 11, 8, .72);
  backdrop-filter: blur(6px);
}
body.omodal-open { overflow: hidden; }

.omodal__box {
  position: relative;
  width: min(52rem, 100%);
  max-height: 90svh; overflow-y: auto;
  padding: clamp(2.8rem, 4vw, 4.4rem);
  border-radius: var(--r);
  background: var(--paper);
}

.omodal__x {
  position: absolute; top: 1.6rem; right: 1.6rem;
  width: 4rem; height: 4rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: none; color: var(--ink);
  font-size: 1.5rem; cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.omodal__x:hover { background: var(--ink); color: var(--on-brand); }

/* Заголовок в модалке прижимался к тексту: у .h-2 нет своего
   нижнего отступа, а сверху его было с избытком. */
.omodal__box .h-2 {
  margin: 0 0 1.6rem;
  line-height: 1.04;
}

.omodal__tag {
  margin: 0 0 1rem;
  font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc-deep);
}
.omodal__d {
  margin: 0 0 2.8rem;
  max-width: 42ch;
  font-size: 1.55rem; line-height: 1.55; color: var(--gray);
}

.omodal__f { display: grid; gap: 1.4rem; }
.omodal__f label {
  display: grid; gap: .7rem;
  font-size: 1.3rem; color: var(--gray);
}
.omodal__f input,
.omodal__f textarea {
  padding: 1.4rem 1.7rem;
  border: 1px solid var(--line); border-radius: 1rem;
  background: var(--paper-2);
  font: 400 1.55rem "Manrope", sans-serif; color: var(--ink);
  resize: vertical;
}
.omodal__f input:focus,
.omodal__f textarea:focus { outline: none; border-color: var(--acc); }
.omodal__f .btn { justify-content: center; margin-top: .6rem; }

.omodal__n {
  margin: .4rem 0 0;
  font-size: 1.3rem; color: var(--gray-2); text-align: center;
}
.omodal__n a { color: var(--acc-deep); }

.omodal__ok {
  margin: 3rem 0 0;
  padding: 2.4rem;
  border-radius: 1.2rem;
  background: var(--acc-lite);
  font-size: 1.6rem; text-align: center; color: var(--acc-deep);
}

/* Пока открыто полотно, планка остаётся светлой и на виду:
   перекрашенная в хаки она сливалась с полотном и пропадала. */
body.menu-open .bar {
  box-shadow: 0 1.4rem 3rem -1rem rgba(10, 11, 8, .55);
}

/* ── мобильная шапка ───────────────────────────────────────── */

@media (max-width: 860px) {
  /* Планка из шести ячеек в 390 px не влезает — прячем её
     и показываем бургер с полноэкранным меню. */
  .bar { display: none; }

  .bar.is-mob {
    position: fixed; inset: 0; z-index: 110;
    display: flex; flex-direction: column;
    border: 0; border-radius: 0;
    padding: 9rem 2rem 4rem;
    gap: 1px;
    background: var(--brand);
    overflow-y: auto;
  }
  .bar.is-mob .bar__i {
    justify-content: flex-start;
    padding: 2rem 0;
    border: 0;
    border-bottom: 1px solid
      color-mix(in srgb, var(--on-brand) 22%, transparent);
    font-size: 2.2rem;
    color: var(--on-brand);
  }
  .bar.is-mob .bar__i:hover { background: none; color: var(--paper); }
  .bar.is-mob .bar__i--on { background: none; color: var(--paper); }
  .bar.is-mob .bar__i--cta {
    margin-top: 2.4rem;
    justify-content: center;
    border-radius: 10rem;
    background: var(--paper); color: var(--ink);
    border-bottom: 0;
  }
  /* Логотип в мобильном меню виден всегда, в том числе на
     главной: крупный знак в полотне за раскрытым меню не видно,
     и шапка оставалась безымянной. */
  .bar.is-mob .bar__i--logo,
  body[data-page="home"] .bar.is-mob .bar__i--logo {
    display: flex;
    justify-content: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
    padding: 0 0 2rem;
    border-bottom: 1px solid
      color-mix(in srgb, var(--on-brand) 22%, transparent);
  }
  .bar.is-mob .bar__i--logo:hover { background: none; }

  /* Название рядом со знаком: в планке его прячут при нехватке
     места, а в меню места вдоволь. */
  .bar.is-mob .bar__m {
    display: block;
    font-size: 2.2rem;
    color: var(--on-brand);
  }
  /* «LAB» и надстрочная четвёрка красятся в --acc-deep: на светлой
     планке это читается, а здесь фон хаки того же тона, и текст
     пропадает. Ставим белый, как у остальной надписи. */
  .bar.is-mob .bar__m b,
  .bar.is-mob .bar__m sup { color: var(--on-brand); }

  /* Фон меню — хаки: тёмный заряд на нём пропадает. */
  .bar.is-mob .logo__cell {
    --chg:     #c6f24e;
    --chg-mid: #fbbf24;
    --chg-low: #f87171;
  }
  .bar.is-mob .bar__i--logo .logo__cell {
    width: 2.4rem; height: 3.4rem;
    border-width: 2.5px; border-radius: .7rem;
    gap: .3rem; padding: 0 .45rem;
  }
  .bar.is-mob .bar__i--logo .logo__cell::before {
    top: -.65rem; width: 1rem; height: .5rem;
  }
  .bar.is-mob .bar__i--logo .logo__cell i { height: .36rem; }

  /* Бургер поверх меню, чтобы им же и закрыть. pointer-events
     возвращаем явно: у шапки они выключены, чтобы не перехватывать
     клики мимо планки. */
  .burger {
    display: block;
    pointer-events: auto;
    /* right в rem, а не var(--gut): переменная считается от
       родителя, и кнопка уезжала за правый край экрана */
    position: fixed; top: 1.2rem; right: 1.6rem; z-index: 120;
    width: 4.8rem; height: 4.8rem;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 .6rem 2rem -.6rem rgba(18, 19, 15, .4);
  }
  body.mob-open .burger { background: var(--ink); }
  body.mob-open .burger span { background: var(--paper); }
  body.mob-open { overflow: hidden; }
}

/* ── знак в полотне ────────────────────────────────────────── */

.wordmark {
  display: inline-flex; align-items: center; gap: 1.6rem;
  margin-bottom: clamp(2rem, 3vw, 3.6rem);
  text-decoration: none;
  color: var(--ink);
}

/* Ячейка с клеммой — знак из шапки, увеличенный под полотно.
   Размеры наследуются от .logo__cell, здесь только масштаб. */
.wordmark__cell {
  width: clamp(3rem, 3.6vw, 4.2rem);
  height: clamp(4.4rem, 5.2vw, 6.2rem);
  border-width: 3.5px;
  border-radius: 1rem;
  gap: .45rem;
  padding: 0 .6rem;
}
.wordmark__cell::before {
  top: -.9rem;
  width: 1.3rem; height: .7rem;
}
.wordmark__cell i { height: .5rem; }
.wordmark__cell i:last-child { background: var(--acc); }

.wordmark__t {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(3.2rem, 5vw, 5.6rem);
  letter-spacing: -.05em;
  line-height: .9;
}
.wordmark__t sup { font-size: .5em; vertical-align: super; }
.wordmark__t--acc { color: var(--acc); }

/* ── бегущая строка ────────────────────────────────────────── */

.tick {
  position: relative; z-index: 1;
  overflow: hidden;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.tick__row {
  display: flex; width: max-content;
  animation: tick 38s linear infinite;
}
.tick__set {
  display: flex; align-items: center; gap: 2.4rem;
  padding-right: 2.4rem;
}
.tick__set b {
  font: 600 1.4rem "Manrope", sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tick__set i { color: var(--acc); font-style: normal; }

@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tick__row { animation: none; }
}