/* ============================================================
   Главная страница — Усть-Джегутинский гипсовый комбинат
   Все значения берутся из tokens.css. Хардкод запрещён.
   ============================================================ */

/* ---------- 1. Сброс и база ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input { font: inherit; color: inherit; }

/* ---------- 2. Фокус — единое правило ---------- */
:focus-visible {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.on-media :focus-visible,
.hero :focus-visible,
.site-header :focus-visible,
.why :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--action-bg); color: var(--action-fg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  transition: transform var(--duration-fast) var(--easing-standard);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 3. Сетка ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section { padding-block: var(--section-padding-y); }
.section--muted { background: var(--surface-muted); }

.section__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  margin-bottom: var(--section-gap-heading);
}

/* ---------- 4. Кнопки ---------- */
.btn {
  --btn-h: var(--control-height-md);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h);
  padding-inline: var(--control-padding-x);
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}
.btn--sm { --btn-h: var(--control-height-sm); padding-inline: var(--space-4); font-weight: var(--font-weight-medium); }
.btn--block { width: 100%; }

.btn--primary { background: var(--action-bg); color: var(--action-fg); }
.btn--primary:hover { background: var(--action-bg-hover); }
.btn--primary:active { background: var(--action-bg-active); }
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: var(--action-bg-disabled); color: var(--action-fg-disabled); cursor: not-allowed;
}

.btn--secondary { background: transparent; color: var(--text-link); border-color: var(--color-brand-600); }
.btn--secondary:hover { background: var(--color-brand-50); color: var(--text-link-hover); border-color: var(--color-brand-700); }
.btn--secondary:active { background: var(--color-brand-100); }

.btn--ghost { background: transparent; color: var(--text-on-media); border-color: var(--border-on-media); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: var(--color-neutral-0); }
.btn--ghost:active { background: rgba(255,255,255,.22); }

/* ---------- 5. Шапка ---------- */
.site-header {
  position: absolute; inset-inline: 0; top: 0;
  z-index: var(--z-sticky-header);
  color: var(--text-on-media);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.brand__mark { color: currentColor; }
.brand__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  max-width: 190px;
}

.site-nav { margin-inline: auto; }
.site-nav__list { display: flex; gap: var(--space-2); }
.site-nav__list a {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  border-bottom: var(--border-width-thick) solid transparent;
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--color-neutral-0); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-6); flex-shrink: 0; }
.site-header__phone {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  color: inherit;
}
.nav-toggle__box { position: relative; display: block; width: 24px; height: 2px; margin-inline: auto; }
.nav-toggle__bar, .nav-toggle__box::before, .nav-toggle__box::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px;
  background: currentColor; transition: transform var(--duration-base) var(--easing-standard), opacity var(--duration-fast);
}
.nav-toggle__bar { top: 0; }
.nav-toggle__box::before { top: -8px; }
.nav-toggle__box::after  { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after  { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: 743px;
  padding-block: var(--space-30) var(--space-20);
  color: var(--text-on-media);
  background: var(--color-neutral-900);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Контраст: плоская подложка макета давала 3.25 при норме 4.5.
   Оверлей усилен до 0.62 + верхний градиент под шапку. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 200px),
    rgba(47, 42, 42, .66);
}
.hero__inner { position: relative; z-index: 1; }

.hero__headline {
  border-block: var(--border-width-hairline) solid var(--border-on-media);
  padding-block: var(--space-5);
  margin-bottom: var(--space-16);
  max-width: 900px;
  margin-inline: auto;
}
.hero__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-regular); /* было Light 300 — на фото читалось плохо */
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  text-align: center;
}

.hero__cta { text-align: center; margin-bottom: var(--space-24); }

.hero__stats { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--space-12); }
.stat { display: flex; flex-direction: column; gap: var(--space-2); max-width: 180px; }
.stat__medal { width: 76px; height: auto; }
.stat__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
}
.stat__caption {
  border-top: var(--border-width-hairline) solid var(--border-on-media);
  padding-top: var(--space-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

/* ---------- 7. Карточки направлений ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--block-gap) var(--grid-gutter);
}
.card {
  position: relative;
  display: block;
  aspect-ratio: 448 / 272;
  background: var(--surface-card-media);
  overflow: hidden;
  isolation: isolate;
}
.card__media { position: absolute; inset: 0; }
.card__media img {
  position: absolute; right: 0; bottom: 0;
  width: 64%; height: 100%;
  object-fit: contain; object-position: right bottom;
  transform-origin: right bottom;
  transition: transform var(--duration-slow) var(--easing-standard);
}
/* Скрим слева: гарантирует читаемость заголовка независимо от картинки */
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(239, 239, 239, .92) 0,
    rgba(239, 239, 239, .55) 18%,
    rgba(239, 239, 239, 0) 40%
  );
}
.card__media--pair img:first-child { right: 34%; width: 48%; height: 68%; bottom: 16%; }
.card__media--pair img:last-child  { right: 0; width: 52%; height: 58%; }

.card__arrow {
  position: absolute; z-index: 1; top: var(--space-5); left: var(--space-5);
  width: var(--icon-lg); height: var(--icon-lg);
  color: var(--color-brand-600);
  transition: color var(--duration-fast) var(--easing-standard);
}
.card__body {
  position: absolute; z-index: 1; left: var(--space-5); right: 40%; bottom: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--text-primary);
}
.card__subtitle {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--text-secondary);
}
.card:hover .card__media img { transform: scale(1.04); }
.card:hover .card__arrow { color: var(--color-brand-700); }

/* ---------- 8. Полоса преимуществ ---------- */
.featurebar__list { display: grid; grid-template-columns: repeat(3, 1fr); }
.featurebar__item { background: var(--surface-muted); }
.featurebar__item--active { background: var(--surface-inverse); color: var(--text-on-brand); }
.featurebar__link {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 155px;
  padding: var(--space-6);
  justify-content: center;
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.featurebar__item:not(.featurebar__item--active) .featurebar__link:hover { background: var(--color-neutral-200); }
.featurebar__item--active .featurebar__link:hover { background: var(--color-brand-700); }
.featurebar__icon { flex-shrink: 0; }
.featurebar__text { display: flex; flex-direction: column; gap: var(--space-2); }
.featurebar__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); }
.featurebar__caption {
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
}

/* ---------- 9. О комбинате ---------- */
.about__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-16); align-items: stretch;
}
.about__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-10);
}
.bullets { display: flex; flex-direction: column; gap: var(--space-6); }
.bullets li {
  position: relative;
  padding-inline-start: var(--space-4);
  font-size: var(--font-size-sm);
}
.bullets li::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--border-width-thick); background: var(--color-brand-600);
}
.bullets b { font-weight: var(--font-weight-medium); color: var(--color-brand-600); }

.geo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.geo__canvas {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1267 / 629;
  min-height: 360px;
  overflow: hidden;
  background: var(--color-neutral-150);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.geo__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.geo__badge,
.geo__open {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--border-width-hairline) solid rgba(255,255,255,.76);
  border-radius: var(--radius-full);
  box-shadow: var(--elevation-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.geo__badge {
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  color: var(--color-brand-900);
  background: rgba(255,255,255,.92);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}
.geo__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--color-accent-600);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 4px rgba(217,147,50,.18);
}
.geo__open {
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--text-on-brand);
  background: rgba(13,36,66,.92);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  transition: background-color var(--duration-fast) var(--easing-standard),
              transform var(--duration-fast) var(--easing-standard);
}
.geo__open:hover {
  color: var(--text-on-brand);
  background: var(--color-brand-700);
  transform: translateY(-2px);
}
.geo__open:focus-visible { outline-color: var(--color-accent-400); }
.geo__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.geo__caption strong { color: var(--text-primary); }

/* ---------- 10. Почему выбирают нас ---------- */
.why {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 120vh;
  padding-block: var(--section-padding-y-lg) var(--space-12);
  color: var(--text-on-media);
  background: var(--color-neutral-900);
  overflow: hidden;
}
.why__media { position: absolute; inset: 0; }
.why__media img { width: 100%; height: 100%; object-fit: cover; }
.why::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26,27,29,.72), rgba(26,27,29,.5));
}
.why__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  width: 100%;
  gap: var(--space-16);
}
.why__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-6);
}
.why__lead { font-size: var(--font-size-sm); }

.why__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-12); }
.why__features h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2);
}
.why__features p { font-size: var(--font-size-sm); }

/* ---------- 11. Контакты ---------- */
.contacts { position: relative; padding-block: var(--section-padding-y); overflow: hidden; }
.contacts__media { position: absolute; inset: 0; }
.contacts__media img { width: 100%; height: 100%; object-fit: cover; }
.contacts .container { position: relative; z-index: 1; }
.contacts__card {
  max-width: 575px;
  background: var(--surface-card);
  padding: var(--space-10);
  box-shadow: var(--elevation-3);
}
.contacts__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-8);
}
.contacts__list { font-size: var(--font-size-md); }
.contacts__list dt { color: var(--color-brand-600); }
.contacts__list dd { margin: 0 0 var(--space-3); }
.contacts__list a { text-decoration: underline; text-underline-offset: 2px; }
.contacts__list a:hover { color: var(--text-link-hover); }
.contacts__address { font-size: var(--font-size-md); margin-bottom: var(--space-8); }

/* ---------- 12. Формы ---------- */
.field { margin-bottom: var(--space-4); }
.field__label { display: block; font-size: var(--font-size-xs); margin-bottom: var(--space-2); }
.field__input {
  width: 100%;
  min-height: var(--control-height-md);
  padding-inline: var(--space-4);
  background: var(--surface-page);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.field__input::placeholder { color: var(--text-placeholder); }
.field__input:hover { border-color: var(--border-strong); }
.field__input:focus { border-color: var(--color-brand-600); outline-offset: 1px; }
.field__input[aria-invalid="true"] { border-color: var(--color-danger-600); }
.field__input:disabled { background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed; }
.field__error { margin-top: var(--space-2); font-size: var(--font-size-2xs); color: var(--color-danger-600); }

.field--check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: start; }
.check__input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-brand-600); }
.check__label { font-size: var(--font-size-2xs); line-height: var(--line-height-snug); color: var(--text-secondary); }
.check__label a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.field--check .field__error { grid-column: 1 / -1; }

/* Pop-up заявки */
.modal-open { overflow: hidden; }
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  color: var(--text-primary);
  background: var(--color-overlay-hero);
  overflow-y: auto;
  backdrop-filter: blur(var(--space-1));
  -webkit-backdrop-filter: blur(var(--space-1));
}
.lead-modal[hidden] { display: none; }
.lead-modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100dvh - var(--space-8));
  padding: var(--space-10);
  overflow-y: auto;
  background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-3);
}
.lead-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.lead-modal__close:hover { color: var(--text-primary); background: var(--color-neutral-150); }
.lead-modal__eyebrow {
  margin: 0 52px var(--space-2) 0;
  color: var(--color-accent-700);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}
.lead-modal__title {
  margin: 0 52px var(--space-3) 0;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
}
.lead-modal__lead { margin: 0 0 var(--space-6); color: var(--text-secondary); font-size: var(--font-size-sm); }
.lead-modal__product {
  margin: calc(0px - var(--space-2)) 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  color: var(--color-brand-800);
  background: var(--color-brand-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.lead-modal__form .field-row { grid-template-columns: 1fr 1fr; }
.lead-modal__form .field__label span { color: var(--text-muted); font-weight: var(--font-weight-regular); }
.lead-modal__phone { margin: var(--space-5) 0 0; color: var(--text-secondary); text-align: center; font-size: var(--font-size-xs); }
.lead-modal__phone a { color: var(--text-link); font-weight: var(--font-weight-bold); }

/* ---------- 13. Футер ---------- */
.site-footer { padding-block: var(--space-16) var(--space-10); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: var(--space-10);
}
.footer-col__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-5);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-col a { font-weight: var(--font-weight-regular); }
.footer-col a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  align-items: baseline; justify-content: space-between;
  margin-top: var(--space-16); padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  font-size: var(--font-size-xs);
}
.site-footer__policies { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
/* В макете тут был #bababa с контрастом 1.94 — заменено на --text-muted (5.33). */
.site-footer__policies a { color: var(--text-muted); }
.site-footer__policies a:hover { color: var(--text-primary); text-decoration: underline; }
.site-footer__credits a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   14. Адаптив
   ============================================================ */
@media (max-width: 1279px) {
  .hero__title { font-size: var(--font-size-3xl); }
  .site-header__phone { font-size: var(--font-size-lg); }
  .site-nav__list { gap: 0; }
}

@media (max-width: 1023px) {
  :root { --section-padding-y: var(--space-16); --section-padding-y-lg: var(--space-20); }

  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; inset-inline: 0; top: 100%;
    display: none;
    background: var(--color-brand-600);
    padding: var(--space-4) var(--container-padding) var(--space-6);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { padding: var(--space-4) 0; border-bottom: none; }
  .site-header__inner { flex-wrap: wrap; position: relative; }
  .site-header__actions { width: 100%; justify-content: space-between; padding-bottom: var(--space-4); }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .section__title, .about__title, .contacts__title { font-size: var(--font-size-3xl); }
  .about__grid, .why__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero { min-height: 560px; }
  .hero__stats { justify-content: flex-start; }
  .featurebar__link { flex-direction: column; text-align: center; gap: var(--space-3); min-height: 0; padding-block: var(--space-8); }
}

@media (max-width: 767px) {
  :root { --container-padding: var(--space-6); }

  /* Тач-цели ≥24px (WCAG 2.5.8) */
  .footer-col ul { gap: var(--space-1); }
  .footer-col a,
  .site-footer__policies a,
  .site-footer__credits a,
  .contacts__list dd a,
  .check__label a { display: inline-block; padding-block: var(--space-1); }
  .contacts__list dd { margin-bottom: var(--space-2); }
  .check__input { width: 24px; height: 24px; }
  .field__label { min-height: 24px; }

  .featurebar__list { grid-template-columns: 1fr; }
  .lead-modal { padding: var(--space-2); }
  .lead-modal__panel { max-height: calc(100dvh - var(--space-4)); padding: var(--space-6); border-radius: var(--radius-lg); }
  .lead-modal__title { font-size: var(--font-size-2xl); }
  .lead-modal__form .field-row { grid-template-columns: 1fr; gap: 0; }
  .geo__canvas { min-height: 420px; aspect-ratio: auto; }
  .geo__open { right: var(--space-3); bottom: var(--space-3); }
  .why__features { grid-template-columns: 1fr; gap: var(--space-8); }
  .contacts__card { padding: var(--space-6); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col--subscribe { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; }
}

@media (max-width: 479px) {
  :root { --container-padding: var(--space-4); --section-padding-y: var(--space-12); }

  .cards { grid-template-columns: 1fr; }
  .card__media img { width: 50%; }
  .card__body { right: 46%; }
  .hero { min-height: 0; padding-block: var(--space-30) var(--space-12); }
  .hero__title { font-size: var(--font-size-2xl); }
  .hero__headline { margin-bottom: var(--space-10); }
  .hero__cta { margin-bottom: var(--space-12); }
  .hero__stats { flex-direction: column; gap: var(--space-6); }
  .section__title, .about__title, .contacts__title { font-size: var(--font-size-2xl); }
  .site-header__phone { font-size: var(--font-size-md); }
  .site-footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .site-header__actions .btn,
  .hero__cta .btn { width: auto; }
}

/* ---------- 15. Уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .hero__media, .why__media, .contacts__media, .nav-toggle, .skip-link { display: none !important; }
  .hero, .why { color: var(--text-primary); background: none; }
  .hero::after, .why::after { display: none; }
}

/* ============================================================
   16. Внутренние страницы
   ============================================================ */

/* ---------- 16.1 Обложка раздела ---------- */
.page-hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 600px;
  padding-block: var(--space-40) var(--space-16);
  color: var(--text-on-media);
  background: var(--color-neutral-900);
  overflow: hidden;
}
.page-hero--compact { min-height: 420px; padding-block: var(--space-30) var(--space-12); }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Контраст: в макете белый текст лежал на светлом небе (1.35–2.13). Добавлен скрим. */
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0, rgba(0,0,0,.1) 220px),
    linear-gradient(0deg, rgba(26,27,29,.78) 0, rgba(26,27,29,.4) 65%);
}
.page-hero__inner { position: relative; z-index: 1; text-align: center; }
.page-hero__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
}
.page-hero__lead {
  margin-top: var(--space-4);
  font-size: var(--font-size-md);
}

/* ---------- 16.2 Подменю раздела ---------- */
.subnav { margin-top: var(--space-8); }
.subnav__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3) var(--space-8);
}
.subnav__list a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--font-size-lg);
  border-bottom: var(--border-width-hairline) solid var(--border-on-media);
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.subnav__list a:hover { border-bottom-color: var(--color-neutral-0); }

/* ---------- 16.3 Хлебные крошки ---------- */
.breadcrumbs { padding-block: var(--space-6) 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-2xs); }
.breadcrumbs li { color: var(--text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--border-default); }
.breadcrumbs a:hover { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 16.4 Таблица характеристик ---------- */
.spec-table { --spec-cols: minmax(300px, 3.4fr) repeat(8, minmax(0, 1fr)); }
.spec-table__head,
.spec-table__row {
  display: grid;
  grid-template-columns: var(--spec-cols);
  gap: var(--space-4);
  align-items: start;
}
.spec-table__head {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
}
.spec-table__row {
  padding-block: var(--space-6);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.spec-table__row:last-child { border-bottom: 0; }
.spec-table__product { display: flex; gap: var(--space-5); align-items: flex-start; }
.spec-table__img { width: 82px; height: auto; flex-shrink: 0; object-fit: contain; }
.spec-table__name {
  display: inline-block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spec-table__name:hover { color: var(--text-link-hover); }
.spec-table__desc { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--text-secondary); }
.spec-table__label { display: none; }

/* ---------- 16.5 Карточки товара ---------- */
.product-cards, .way-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--grid-gutter);
}
.product-card__media, .way-card__media {
  display: block; aspect-ratio: 4 / 3;
  background: var(--surface-card-media);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.product-card__media img, .way-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--duration-slow) var(--easing-standard);
}
.product-card:hover .product-card__media img,
.way-card:hover .way-card__media img { transform: scale(1.04); }
.product-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  margin-bottom: var(--space-2);
}
.product-card__title a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.product-card__title a:hover { color: var(--text-link-hover); }
.product-card__desc { font-size: var(--font-size-xs); color: var(--text-secondary); }

.way-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2);
}
.way-card p { font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ---------- 16.6 Двухколоночный блок и текст ---------- */
.two-col {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16); align-items: start;
}
.two-col--form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.prose p + p { margin-top: var(--space-4); }
.prose__note { font-size: var(--font-size-xs); color: var(--text-secondary); }
.prose a, .prose__note a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--text-link-hover); }

/* ---------- 16.7 Цифры ---------- */
.figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.figure { display: flex; flex-direction: column; gap: var(--space-2); padding-inline-start: var(--space-4); position: relative; }
.figure::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--border-width-thick); background: var(--color-brand-600);
}
.figure__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
}
.figure__caption { font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ---------- 16.8 Сетка преимуществ ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--grid-gutter); }
.info-grid h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2);
}
.info-grid p { font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ---------- 16.9 Награда ---------- */
.award { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.award img { width: 120px; height: auto; }
.award figcaption { font-size: var(--font-size-xs); color: var(--text-secondary); max-width: 260px; }

/* ---------- 16.10 Документы ---------- */
.doc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.doc {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-6);
  background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.doc__icon { color: var(--color-brand-600); flex-shrink: 0; }
.doc__body { display: flex; flex-direction: column; gap: var(--space-1); }
.doc__name { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.doc__meta { font-size: var(--font-size-2xs); color: var(--text-muted); }

/* ---------- 16.11 Реквизиты ---------- */
.req-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-16); }
.req-list > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.req-list dt { font-size: var(--font-size-xs); color: var(--text-muted); }
.req-list dd { margin: 0; font-size: var(--font-size-xs); }
.req-list dd a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.req-list__empty { color: var(--text-muted); }

/* ---------- 16.12 Обычная таблица ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); }
.data-table th, .data-table td {
  text-align: start; padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.data-table thead th { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--text-muted); }
.data-table tbody th { font-weight: var(--font-weight-medium); color: var(--text-primary); }
.data-table td { color: var(--text-secondary); }

/* ---------- 16.13 Шаги ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); counter-reset: step; }
.step { display: flex; flex-direction: column; gap: var(--space-3); }
.step__num {
  display: flex; align-items: center; justify-content: center;
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: var(--radius-full);
  background: var(--action-bg); color: var(--action-fg);
  font-size: var(--font-size-md); font-weight: var(--font-weight-bold);
}
.step h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.step p { font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ---------- 16.14 Призыв к действию ---------- */
.cta { background: var(--surface-inverse); color: var(--text-on-brand); padding-block: var(--space-16); }
.cta__inner { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: space-between; }
.cta__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); }
.cta__text { margin-top: var(--space-2); font-size: var(--font-size-sm); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cta .btn--primary { background: var(--color-neutral-0); color: var(--color-brand-600); }
.cta .btn--primary:hover { background: var(--color-brand-50); }
.cta .btn--primary:active { background: var(--color-brand-100); }
.cta .btn--secondary { color: var(--text-on-brand); border-color: var(--border-on-media); }
.cta .btn--secondary:hover { background: rgba(255,255,255,.14); border-color: var(--color-neutral-0); color: var(--text-on-brand); }
.cta :focus-visible { outline-color: var(--focus-ring-on-dark); }

/* ---------- 16.15 Пустое состояние ---------- */
.empty-state {
  max-width: 560px; margin-inline: auto; text-align: center;
  padding: var(--space-16) var(--space-6);
}
.empty-state__icon { display: inline-flex; color: var(--text-muted); margin-bottom: var(--space-5); }
.empty-state__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); margin-bottom: var(--space-3); }
.empty-state__text { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-8); }
.empty-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

/* ---------- 16.16 Новости ---------- */
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--grid-gutter); }
.news-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-muted); margin-bottom: var(--space-5); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--easing-standard); }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__date { font-size: var(--font-size-2xs); color: var(--text-muted); }
.news-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); margin-block: var(--space-2); }
.news-card__title a:hover { color: var(--text-link-hover); }
.news-card__excerpt { font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ---------- 16.17 Дополнения к формам ---------- */
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.field__select { appearance: none; padding-inline-end: var(--space-10); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field__textarea { min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; line-height: var(--line-height-body); }
.partner-form { padding: var(--space-8); background: var(--surface-card); border: var(--border-width-hairline) solid var(--border-subtle); border-radius: var(--radius-sm); }
.section--muted .partner-form { background: var(--surface-page); }

/* ============================================================
   17. Адаптив внутренних страниц
   ============================================================ */
@media (max-width: 1279px) {
  .spec-table { --spec-cols: minmax(240px, 2.8fr) repeat(8, minmax(0, 1fr)); }
  .page-hero__title { font-size: var(--font-size-3xl); }
}

@media (max-width: 1023px) {
  .page-hero { min-height: 440px; }
  .page-hero--compact { min-height: 340px; }
  .two-col, .two-col--form { grid-template-columns: 1fr; gap: var(--space-12); }
  .product-cards, .way-cards, .info-grid, .doc-list, .news-list { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .req-list { grid-template-columns: 1fr; gap: var(--space-4); }
  .subnav__list { gap: var(--space-3) var(--space-6); }
  .subnav__list a { font-size: var(--font-size-sm); }

  /* Таблица превращается в карточки: заголовки колонок уходят в подписи */
  .spec-table__head { display: none; }
  .spec-table__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding-block: var(--space-8);
  }
  .spec-table__product { grid-column: 1 / -1; }
  .spec-table__label {
    display: block;
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
  }
}

@media (max-width: 767px) {
  .page-hero { padding-block: var(--space-30) var(--space-10); }

  /* Тач-цели ≥24px (WCAG 2.5.8) */
  .breadcrumbs a,
  .prose a,
  .prose__note a,
  .legal a,
  .req-list dd a { display: inline-block; padding-block: var(--space-1); }
  .breadcrumbs ol { align-items: center; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .cta__title { font-size: var(--font-size-2xl); }
  .data-table th, .data-table td { padding-inline: var(--space-2); }
}

@media (max-width: 479px) {
  .page-hero__title { font-size: var(--font-size-2xl); }
  .product-cards, .way-cards, .info-grid, .doc-list, .news-list, .steps, .figures { grid-template-columns: 1fr; }
  .spec-table__row { grid-template-columns: 1fr; gap: var(--space-3); }
  .spec-table__product { flex-direction: column; }
  .field-row { grid-template-columns: 1fr; }
  .partner-form { padding: var(--space-5); }
  .empty-state { padding-inline: 0; }
  .cta__actions { width: 100%; }
}

/* ---------- 16.18 Юридические документы ---------- */
.page-hero--plain {
  min-height: 0;
  padding-block: var(--space-30) var(--space-12);
  background: var(--surface-inverse);
}
.page-hero--plain::after { display: none; }
.page-hero--plain .page-hero__inner { text-align: start; }

.legal { max-width: 780px; }
.legal h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-top: var(--space-10); margin-bottom: var(--space-3);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: var(--font-size-xs); color: var(--text-secondary); }
.legal p + p { margin-top: var(--space-3); }
.legal a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.legal .data-table { margin-top: var(--space-5); }
.legal__notice {
  padding: var(--space-5);
  margin-bottom: var(--space-10);
  background: var(--color-warning-50);
  border-inline-start: var(--space-1) solid var(--color-warning-700);
  border-radius: var(--radius-sm);
  color: var(--text-primary) !important;
}
.legal__todo { color: var(--text-muted) !important; font-style: italic; }

/* ============================================================
   18. Карточка товара и контакты
   ============================================================ */

/* ---------- 18.1 Непрозрачная шапка (страницы без обложки) ---------- */
.site-header--solid { position: static; background: var(--surface-inverse); }

.breadcrumbs--top { padding-block: var(--space-8) 0; }

/* ---------- 18.2 Шапка товара ---------- */
.product__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-16); align-items: start;
}
.product__figure {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--space-10);
  background: var(--surface-card-media);
}
.product__figure img { width: auto; max-height: 100%; object-fit: contain; }

.product__eyebrow {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.product__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}
.product__subtitle {
  margin-top: var(--space-2);
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

.product__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.badge {
  display: inline-flex; align-items: center;
  min-height: var(--control-height-sm);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
}
.badge--muted { background: var(--surface-muted); color: var(--text-secondary); }

.product__desc { margin-top: var(--space-6); font-size: var(--font-size-sm); }

.product__key {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
}
.product__key > div {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.product__key dt { font-size: var(--font-size-xs); color: var(--text-muted); }
.product__key dd { margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }

/* ---------- 18.3 Блок заказа ---------- */
.order-box {
  margin-top: var(--space-10);
  padding: var(--space-8);
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
}
.order-box__price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
}
.order-box__note { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--text-secondary); }
.order-box__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.order-box__facts {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.order-box__facts li {
  position: relative; padding-inline-start: var(--space-6);
  font-size: var(--font-size-xs); color: var(--text-secondary);
}
.order-box__facts li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 6px;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-brand-600);
}

.bullets--plain li::before { display: none; }
.bullets--plain li { padding-inline-start: var(--space-6); }
.bullets--plain li { position: relative; }
.bullets + .prose { margin-top: var(--space-6); }
.bullets--plain li::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-brand-600);
}

/* ---------- 18.4 Контакты ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gutter); }
.contact-card {
  height: 100%;
  padding: var(--space-8);
  background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.contact-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.contact-card__hint { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--text-secondary); }
.contact-card__value {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-link);
}
.contact-card__value--email { font-size: var(--font-size-lg); text-decoration: underline; text-underline-offset: 3px; }
.contact-card__value:hover { color: var(--text-link-hover); }

.contacts__more { margin-top: var(--space-5); font-size: var(--font-size-xs); }
.contacts__more a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.contacts__more a:hover { color: var(--text-link-hover); }

.hours { margin-top: var(--space-6); }

/* ---------- 18.5 Форма в рамке ---------- */
.callback-form--boxed {
  padding: var(--space-8);
  background: var(--surface-page);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.form-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}
.form-lead { margin-top: var(--space-2); margin-bottom: var(--space-6); font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ---------- 18.6 Адаптив ---------- */
@media (max-width: 1023px) {
  .product__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .product__figure { aspect-ratio: 4 / 3; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .product__title { font-size: var(--font-size-3xl); }
  .order-box { padding: var(--space-6); }
  .callback-form--boxed { padding: var(--space-6); }
}

@media (max-width: 479px) {
  .product__key { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .product__title { font-size: var(--font-size-2xl); }
  .order-box__actions { flex-direction: column; }
  .contact-card { padding: var(--space-6); }
}

.prose__note--spaced { margin-top: var(--space-8); }

/* ============================================================
   19. Современное визуальное обновление
   Минеральная палитра, собранная сетка, объёмные поверхности.
   ============================================================ */

body {
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
}

.section--muted { background: var(--surface-muted); }

.section__title {
  max-width: 920px;
  margin-bottom: var(--space-16);
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
}

.btn {
  gap: var(--space-2);
  border-radius: var(--radius-full);
  letter-spacing: var(--letter-spacing-normal);
  transition:
    transform var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { box-shadow: var(--elevation-accent); }
.btn--secondary { border-color: var(--color-brand-600); }

/* Шапка как отдельная навигационная панель */
.site-header { padding-top: var(--space-4); }
.site-header__inner {
  min-height: 76px;
  padding-inline: var(--space-5);
  background: var(--surface-glass);
  border: var(--border-width-hairline) solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.brand__name { font-weight: var(--font-weight-bold); }
.site-nav__list { gap: var(--space-1); }
.site-nav__list a {
  padding: var(--space-3);
  border-bottom: 0;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  transition:
    color var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-accent-300);
  background: var(--surface-glass-soft);
}
.site-header__actions { gap: var(--space-4); }
.site-header__phone {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-normal);
}
.site-header--solid {
  padding-block: var(--space-4);
  background: var(--surface-inverse);
}

/* Hero: сильная типографическая иерархия и компактные факты */
.hero {
  min-height: 820px;
  padding-block: var(--space-40) var(--space-16);
}
.hero__media img { object-position: center; }
.hero::after { background: var(--gradient-hero); }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.hero__headline {
  max-width: 980px;
  margin: 0 0 var(--space-10);
  padding: 0;
  border: 0;
}
.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-align: start;
}
.hero__cta {
  margin-bottom: var(--space-20);
  text-align: start;
}
.hero__cta .btn--ghost {
  color: var(--text-on-accent);
  background: var(--surface-accent);
  border-color: var(--surface-accent);
  box-shadow: var(--elevation-accent);
}
.hero__cta .btn--ghost:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
}
.hero__stats {
  justify-content: flex-start;
  gap: var(--space-4);
}
.stat {
  min-width: 190px;
  min-height: 132px;
  justify-content: flex-end;
  padding: var(--space-5);
  background: var(--surface-glass-soft);
  border: var(--border-width-hairline) solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.stat__medal { width: var(--icon-xl); }
.stat__value { font-weight: var(--font-weight-bold); }
.stat__caption {
  border-top-color: var(--border-glass);
  font-weight: var(--font-weight-medium);
}

/* Направления деятельности */
.cards { gap: var(--space-6); }
.card {
  aspect-ratio: 1.45 / 1;
  background: var(--surface-card-media);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
  transition:
    transform var(--duration-base) var(--easing-standard),
    box-shadow var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard);
}
.card::after {
  background: linear-gradient(90deg, var(--color-neutral-0) 0%, var(--color-overlay-card) 48%, transparent 80%);
}
.card__arrow {
  top: var(--space-5);
  right: var(--space-5);
  left: auto;
  width: 44px;
  height: 44px;
  color: var(--color-brand-900);
}
.card__body { left: var(--space-6); bottom: var(--space-6); }
.card__title {
  font-weight: var(--font-weight-bold);
  text-transform: none;
  letter-spacing: var(--letter-spacing-tight);
}
.card__subtitle { text-transform: none; }
.card:hover {
  z-index: 1;
  transform: translateY(-6px);
  border-color: var(--color-brand-200);
  box-shadow: var(--elevation-3);
}
.card:hover .card__media img { transform: scale(1.07); }
.card:hover .card__arrow { color: var(--color-accent-600); }

/* Быстрые преимущества */
.featurebar {
  padding-block: var(--space-6);
  background: var(--surface-page);
}
.featurebar__list {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  gap: var(--space-4);
}
.featurebar__item {
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}
.featurebar__item--active {
  background: var(--surface-inverse);
  border-color: var(--color-brand-800);
}
.featurebar__link {
  min-height: 136px;
  justify-content: flex-start;
  padding: var(--space-6);
}
.featurebar__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.featurebar__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }

/* О комбинате */
.about__grid { gap: var(--space-8); }
.about__content {
  height: 100%;
  padding: var(--space-10);
  background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
}
.about__title {
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
}
.bullets { gap: var(--space-4); }
.bullets li {
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
}
.bullets li::before {
  inset-block: var(--space-4);
  inset-inline-start: var(--space-3);
  width: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-accent-500);
}
.bullets b { font-weight: var(--font-weight-bold); color: var(--color-brand-700); }
.geo__canvas {
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
}

/* Доверие и преимущества */
.why::after { background: var(--gradient-why); }
.why__grid { gap: var(--space-10); }
.why__title {
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
}
.why__lead { color: var(--color-brand-100); }
.why__features { gap: var(--space-4); }
.why__features li {
  padding: var(--space-6);
  background: var(--surface-glass-soft);
  border: var(--border-width-hairline) solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.why__features h3 { color: var(--color-accent-300); }

/* Контакты, формы и футер */
.contacts__card {
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
}
.contacts__title {
  font-size: var(--font-size-section);
  letter-spacing: var(--letter-spacing-display);
}
.field__input,
.field__select,
.field__textarea { border-radius: var(--radius-md); }
.site-footer {
  color: var(--text-on-brand);
  background: var(--surface-inverse);
}
.site-footer .footer-col a:hover,
.site-footer__credits a:hover { color: var(--color-accent-300); }
.site-footer__bottom { border-top-color: var(--border-glass); }
.site-footer__policies a { color: var(--color-brand-200); }
.site-footer__policies a:hover { color: var(--text-on-brand); }
.site-footer .field__label,
.site-footer .check__label { color: var(--color-brand-100); }
.site-footer .check__label a { color: var(--color-accent-300); }

/* Внутренние страницы и контентные карточки */
.page-hero { min-height: 540px; }
.page-hero--compact { min-height: 420px; }
.page-hero::after { background: var(--gradient-page-hero); }
.page-hero__inner {
  max-width: var(--container-max);
  text-align: start;
}
.page-hero__title {
  max-width: 920px;
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-display);
}
.subnav__list { justify-content: flex-start; }
.subnav__list a {
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-glass);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}
.product-card__media,
.way-card__media,
.product__figure {
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
}
.doc,
.partner-form,
.contact-card,
.callback-form--boxed,
.order-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}
.order-box { background: var(--color-brand-50); }
.badge { background: var(--color-accent-50); color: var(--color-accent-700); }
.step__num { background: var(--surface-accent); color: var(--text-on-accent); }
.cta { background: var(--surface-inverse); }

@media (max-width: 1023px) {
  .site-header { padding-top: var(--space-3); }
  .site-header__inner { border-radius: var(--radius-lg); }
  .site-nav {
    top: calc(100% + var(--space-2));
    margin-inline: var(--container-padding);
    padding: var(--space-4);
    background: var(--surface-inverse);
    border: var(--border-width-hairline) solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
  }
  .site-nav__list a { padding-inline: var(--space-4); }
  .hero { min-height: 720px; }
  .hero__headline { max-width: 760px; }
  .about__content { padding: var(--space-8); }
}

@media (max-width: 767px) {
  :root { --container-padding: var(--space-5); }
  .site-header__actions { gap: var(--space-3); }
  .site-header__actions .btn { display: none; }
  .hero { min-height: 700px; padding-block: var(--space-40) var(--space-12); }
  .hero__cta { margin-bottom: var(--space-12); }
  .stat { min-width: 0; width: 100%; }
  .hero__stats { width: 100%; }
  .featurebar__list { gap: var(--space-3); }
  .featurebar__link { min-height: 112px; }
  .about__content { padding: var(--space-6); }
  .why__features li { padding: var(--space-5); }
  .page-hero { min-height: 460px; }
}

@media (max-width: 479px) {
  :root { --container-padding: var(--space-4); }
  .site-header__inner { min-height: 68px; padding-inline: var(--space-4); }
  .brand__mark svg { width: 34px; height: 36px; }
  .brand__name { max-width: 150px; font-size: var(--font-size-2xs); }
  .site-header__actions { padding-bottom: var(--space-3); }
  .site-header__phone { font-size: var(--font-size-xs); }
  .hero { min-height: 720px; padding-block: var(--space-40) var(--space-10); }
  .hero__title { font-size: var(--font-size-display); }
  .hero__stats { flex-direction: row; gap: var(--space-3); }
  .stat { min-height: 120px; padding: var(--space-4); }
  .cards { gap: var(--space-4); }
  .card { aspect-ratio: 1.25 / 1; }
  .card__body { right: 42%; }
  .featurebar__list { grid-template-columns: 1fr; }
  .featurebar__link { flex-direction: row; text-align: start; }
  .section__title { margin-bottom: var(--space-10); }
  .site-footer { padding-block: var(--space-12) var(--space-8); }
}

/* Флеш-сообщения после отправки форм */
.flash { padding-block: var(--space-4); }
.flash__item { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); font-size: var(--font-size-xs); }
.flash__item--success { background: var(--color-success-50); border-inline-start: var(--space-1) solid var(--color-success-600); }
.flash__item--error { background: var(--color-danger-50); border-inline-start: var(--space-1) solid var(--color-danger-600); }
.flash__item + .flash__item { margin-top: var(--space-2); }