/* =========================================================
   ВАРИАНТ 03 · ALTITUDE — база: сброс, типографика, каркас, кнопки,
   шапка/футер, hairline-структура, бейджи, состояния анимаций.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  font-weight: var(--w-regular);
  color: var(--bone);
  background: var(--carbon-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--voltage-blue); color: var(--pure-white); }
:focus-visible { outline: 2px solid var(--voltage-blue); outline-offset: 2px; }

/* ---------- Типографика ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);   /* образец: serif всегда 400/500, никогда bold */
  color: var(--bone);
  line-height: var(--lead-heading);
  letter-spacing: var(--track-serif);
}
h1 { font-size: var(--text-display); line-height: var(--lead-display); overflow-wrap: break-word; }
h2 { font-size: var(--text-heading-lg); }
h3 { font-size: var(--text-heading-sm); font-family: var(--font-ui); font-weight: var(--w-semibold); letter-spacing: -0.01em; }

p { max-width: 70ch; }
b, strong { font-weight: var(--w-semibold); color: var(--bone); }

/* Функциональная ссылка — единственное место синего акцента */
.link {
  color: var(--voltage-blue);
  font-weight: var(--w-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .link:hover { border-color: var(--voltage-blue); } }

/* Капс-лейбл (кикер в духе финансовой прессы) */
.kicker {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fog);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kicker::before { content: ""; width: 18px; height: 1px; background: var(--pewter); }
.kicker.is-center::before { display: none; }

.lead {
  font-size: var(--text-body-lg);
  color: var(--fog);
  max-width: 60ch;
  line-height: var(--lead-body);
}

/* Бейдж / статус-пилюля (без цветной заливки — статус через границу/текст) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bone);
  background: var(--slate-elevated);
  border: 1px solid var(--iron-peak);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
}
.badge--ghost { background: transparent; color: var(--fog); }

/* ---------- Каркас ---------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

main { position: relative; z-index: 1; }
.section { padding-block: var(--section-gap); position: relative; }

.section-head { max-width: 62ch; margin-bottom: var(--space-48); }
.section-head.is-center { max-width: none; margin-inline: auto; text-align: center; }
.section-head.is-center .kicker { justify-content: center; }
.section-head.is-center .lead { margin-inline: auto; }
.section-head .kicker { margin-bottom: var(--space-16); }
.section-head h2 + .lead { margin-top: var(--space-16); }

/* Тонкая горизонтальная линия-хребет (hairline) как структурный приём */
.hairline { border: 0; border-top: 1px solid var(--slate-elevated); }

/* ---------- Кнопки ---------- */
/* Ghost-кнопка — основной голос (по образцу): прозрачный фон, 1px bone-граница */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--bone);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.btn .btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .btn:hover { background: var(--slate-elevated); transform: translateY(-2px); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}
.btn:active { transform: translateY(0); }
.btn--lg { padding: 14px 24px; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* Текст-ссылка-CTA («Подробнее →») — синий функциональный акцент */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  color: var(--voltage-blue);
}
.textlink .btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .textlink:hover .btn__arrow { transform: translateX(3px); } }

/* ---------- Шапка (64px бар) ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 64px;
}
.site-header.is-scrolled {
  background: rgba(17, 17, 17, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--slate-elevated);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: var(--track-serif);
  color: var(--bone);
  white-space: nowrap;
}
.brand .amp { color: var(--fog); padding-inline: 1px; }
.nav { display: flex; align-items: center; gap: var(--space-32); }
.nav__links { display: flex; gap: var(--space-24); }
.nav__links a {
  font-size: var(--text-body);
  color: var(--fog);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .nav__links a:hover { color: var(--bone); border-bottom-color: var(--pewter); } }
.nav-toggle { display: none; }
/* Быстрый звонок в шапке на мобильном (PRD-01 п.5 — контакт доступен без скролла в форму) */
.header-tel { display: none; color: var(--bone); }
@media (max-width: 920px) {
  .header-tel { display: inline-flex; align-items: center; padding-block: 4px; font-size: var(--text-body); }
}

/* ---------- Шапка на узких экранах ----------
   Три элемента (логотип, телефон, «Заявка») в 64px-баре перестают помещаться в строку
   примерно с 475px и ниже: телефон сжимался и переносился на вторую строку.
   Лечим в два яруса, не трогая десктоп.

   Ярус 1 (≤560px) — компактная типографика: логотип и телефон мельче, кнопка уже,
   промежутки меньше. Номер остаётся цифрами и не переносится (nowrap). */
@media (max-width: 560px) {
  .site-header .container { gap: var(--space-12); min-height: 60px; }
  .brand { font-size: 1.0625rem; flex: none; }
  .nav { gap: 10px; }
  .header-tel {
    font-size: var(--text-small);
    white-space: nowrap;
    flex: none;
  }
  .nav-toggle {
    font-size: var(--text-small);
    padding: 9px 13px;
    white-space: nowrap;
    flex: none;
  }
}

/* Ярус 2 (≤430px) — телефон становится иконкой-кнопкой.
   Ссылка остаётся той же tel:-ссылкой с тем же aria-label («Позвонить: …»), меняется
   только её вид: цифры на 360px в строку уже не влезают ни при каком кегле, а прятать
   прямой контакт с первого экрана нельзя (требование A).
   Иконка — маска из data-URI SVG: 'img-src self data:' её разрешает, внешних запросов нет.
   Размер 40×40 — палец попадает (с учётом padding-баров бара это ≥44px по высоте). */
@media (max-width: 430px) {
  .header-tel {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    font-size: 0;            /* цифры скрыты визуально; скринридер читает aria-label */
    border: 1px solid var(--iron-peak);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-base) var(--ease-out);
  }
  .header-tel::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: var(--icon-phone) center / contain no-repeat;
    mask: var(--icon-phone) center / contain no-repeat;
  }
  @media (hover: hover) {
    .header-tel:hover { border-color: var(--fog); }
  }
}

/* ---------- Футер ---------- */
.site-footer {
  background: var(--obsidian);
  border-top: 1px solid var(--graphite-card);
  padding-block: var(--space-64);
  position: relative;
  z-index: 1;
}
.site-footer .container { display: grid; gap: var(--space-32); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-24); align-items: start; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.footer__links a { font-size: var(--text-small); color: var(--fog); transition: color var(--dur-base) var(--ease-out); }
@media (hover: hover) { .footer__links a:hover { color: var(--bone); } }
.footer__copy { font-size: var(--text-small); color: var(--smoke); }

/* ---------- Служебная метка варианта ---------- */
/* DEV-LABEL: убрать перед финалом */
.dev-label {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 90;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  border: 1px solid var(--slate-elevated);
  background: rgba(17, 17, 17, 0.7);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* =========================================================
   СОСТОЯНИЯ ДВИЖЕНИЯ — сдержанное проявление (fade + лёгкий подъём).
   Скрытые стартовые состояния включаются только при активном JS (.js на <html>).
   ========================================================= */
.reveal {
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- prefers-reduced-motion: гасим движение ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}