/* ==========================================================================
   MOSEPDM — базовые стили: сброс, сетка, типографика, общие компоненты
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Шапка закреплена сверху, поэтому переход по якорю уводил заголовок секции
   под неё. Отступ прокрутки останавливает страницу чуть выше. */
:target,
#hero, #colors, #constructor, #about, #quality, #projects,
#uses, #install, #tender, #request, #contacts {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-base);
  font-weight: var(--fw);
  font-size: var(--fs-b2);
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  color: var(--c-ink);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; }
h1, h2, h3, h4 { font-weight: var(--fw); }
dl, dd, dt { margin: 0; }

:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

/* ---------- Сетка --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Расстояние между секциями в макете — ровно 140px (Figma 213:4) */
main > * + * { margin-top: 140px; }
main > .hero { margin-top: 0; }
main > .flush { margin-top: 0; }   /* блоки, идущие в макете встык */
@media (max-width: 1023px) { main > * + * { margin-top: 96px; } }
@media (max-width: 599px)  { main > * + * { margin-top: 88px; } }

.skip-link {
  position: fixed;
  left: 16px; top: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-white);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Заголовок секции — Figma 213:52 ------------------------------ */
/* Заголовок 52px → 47px → линия → 32px → строка: подпись слева, текст 36px
   и кнопка в правой колонке (начинается на 501px, как сетка карточек)     */

.head__title {
  font-size: var(--fs-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--ls);
  color: var(--c-ink);
}
.head__title .accent { color: var(--c-blue); }
.head__title .dim    { color: var(--c-muted); }

.head__row {
  margin-top: 47px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px) {
  .head__row { grid-template-columns: var(--col-left) minmax(0, 1fr); }
}
.head__row > div { display: grid; gap: 29px; justify-items: start; }

.head__lead {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls);
  color: var(--c-ink);
}
.head__note {
  font-size: var(--fs-b1);
  line-height: 1.38;
  letter-spacing: -.03em;
  color: var(--c-muted);
}

/* Подпись раздела: квадрат 15px #AEAEAE + 16px #848696 */
.tag {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 12px;
  font-size: var(--fs-b2);
  line-height: var(--lh-snug);
  letter-spacing: -.03em;
  color: var(--c-muted);
}
.tag::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--c-chip); }

/* ---------- Кнопка — Figma 213:62 (синяя, h56, px24, gap12) --------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--btn-h);
  padding: 14px var(--btn-px);
  background: var(--c-blue);
  color: var(--c-white);
  font-size: var(--fs-b2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls);
  text-align: center;
  transition: background-color var(--dur-base) var(--ease);
}
.btn:hover { background: #2342c0; }
.btn:active { background: #1d39a8; }
.btn--block { width: 100%; }
.btn__arrow { flex: none; width: 5px; height: 10px; }

/* ---------- Появление при скролле ---------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}