/* PromPol: основа сайта Industrial Power (DESIGN.md). Подключать после tokens.css и перед industrial.css.
   Здесь общее для всех страниц: сброс, текст, кнопки, ссылки, шапка, переключатель языка, нижняя панель на телефоне,
   калькулятор, поля формы, вопросы-ответы, появление блоков. Блоки страниц стоят в industrial.css.
   Все цвета, шрифты и размеры из tokens.css. */

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

html { scroll-behavior: smooth; background: var(--ip-graphite); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ip-ink-2);
  background: var(--ip-graphite);
  -webkit-font-smoothing: antialiased;
}
/* На телефоне внизу закреплена панель «Позвонить / WhatsApp»: место под неё */
body.has-bar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { body.has-bar { padding-bottom: 0; } }

img, svg { display: block; max-width: 100%; }
/* Скрытое скриптом (состояния формы, подсказки) скрыто всегда, даже если у блока свой display */
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--ip-ink); }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
a { color: var(--ip-ink); }
::selection { background: var(--color-orange); color: var(--color-navy); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.on-dark :focus-visible { outline: var(--focus-ring-on-dark); }
main [tabindex="-1"]:focus { outline: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-orange);
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
}
.skip-link:focus { top: var(--space-4); }

/* Полоса прогресса прокрутки вверху экрана: только где есть scroll-driven animations */
@supports (animation-timeline: scroll()) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 3px;
    background: var(--color-orange);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: ip-progress linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
  @keyframes ip-progress { to { transform: scaleX(1); } }
}

/* Появление блоков при прокрутке (скрипт страницы ставит is-in). Без JS и при reduced motion всё видно сразу */
html.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out); }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* Ссылка с подчёркиванием: оранжевая линия 2 px */
.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--fw-bold);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link:hover { text-decoration-color: currentColor; }

/* ---------- Кнопки: строгие углы, оранжевая главная (текст на ней только Navy) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: var(--ip-radius);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn svg { flex: none; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-navy); }
.btn--primary:hover { background: var(--color-orange-hover); border-color: var(--color-orange-hover); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(242, 107, 33, 0.35); }
.btn--secondary { background: transparent; border-color: var(--ip-ink); color: var(--ip-ink); }
.btn--secondary:hover { background: var(--ip-ink); border-color: var(--ip-ink); color: var(--ip-text); transform: translateY(-1px); }
.on-dark .btn--secondary { border-color: rgba(255, 255, 255, 0.6); color: var(--ip-text); }
.on-dark .btn--secondary:hover { background: var(--ip-text); border-color: var(--ip-text); color: var(--ip-ink); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: var(--fs-small); }
@media (min-width: 960px) { .btn--sm { min-height: 46px; padding: 0 24px; } }
/* Телефон: кнопки чуть ниже и мельче */
@media (max-width: 639px) { .btn { min-height: 46px; padding: 0 22px; font-size: 0.9375rem; } }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn--primary:hover, .btn--secondary:hover { transform: none; }
}

/* ---------- Шапка: основа (графитовый вид и раскладка по ширинам в industrial.css, блок «Шапка») ---------- */
.header { position: sticky; top: 0; z-index: 50; }
.header__bar { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; }
.header__logo { display: block; margin-right: auto; }
.header__logo img { width: auto; height: 28px; }
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-2) var(--gutter) var(--space-4); }
.nav.is-open { display: block; }
.nav a { display: flex; align-items: center; min-height: 48px; font-size: 0.8125rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-decoration: none; }
.nav .nav__phone { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.burger { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; cursor: pointer; }
.v4-phone { display: none; line-height: 1.35; }
.v4-phone a { display: block; text-decoration: none; }
.v4-phone__num { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-phone a:hover { text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 960px) {
  :root { --header-h: 80px; }
  .header__bar { min-height: 80px; gap: var(--space-5); }
  .nav { display: flex; position: static; gap: var(--space-4); margin-left: auto; padding: 0; border: 0; background: transparent; }
  .nav a { min-height: 44px; border: 0; white-space: nowrap; }
  .nav .nav__phone { display: none; }
  .burger { display: none; }
  .header__logo { margin-right: 0; }
}

/* ---------- Переключатель языка RU / KG ----------
   Лунка с кнопкой под текущим языком; кнопка при загрузке сдвигается с места другого языка. Цвета для графита в industrial.css */
.lang { display: inline-flex; align-items: center; padding: 4px; border-radius: var(--radius-pill); }
.lang li { display: flex; }
.lang a {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.2s;
}
.lang a:hover { opacity: 1; text-decoration: none; }
.lang a[aria-current] { opacity: 1; }
.lang a[aria-current]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  --lang-from: -44px;
  animation: lang-knob 0.5s var(--ease-out) both;
}
.lang li:first-child a[aria-current]::before { --lang-from: 44px; }
@keyframes lang-knob { from { transform: translateX(var(--lang-from)); } }
@media (prefers-reduced-motion: reduce) { .lang a[aria-current]::before { animation: none; } }
.nav .lang { margin-top: var(--space-3); }
.nav .lang a { min-height: 32px; border-bottom: 0; padding: 0; font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; }
@media (min-width: 960px) { .nav .lang { margin-top: 0; } }

/* ---------- Нижняя панель на телефоне: «Позвонить» и WhatsApp, графит в тон шапке ---------- */
.v4-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: rgba(var(--ip-shade-rgb), 0.9);
  border-top: 1px solid var(--ip-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}
.v4-bar.is-hidden { transform: translateY(100%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
html:not(.js) .v4-bar.is-hidden { transform: none; visibility: visible; }
.v4-bar .btn { gap: var(--space-2); padding-inline: var(--space-3); }
.v4-bar .btn--secondary { border-color: rgba(255, 255, 255, 0.6); color: var(--ip-text); }
.v4-bar .btn--secondary:hover { background: var(--ip-text); border-color: var(--ip-text); color: var(--ip-ink); }
.v4-bar :focus-visible { outline: var(--focus-ring-on-dark); }
@media (min-width: 960px) { .v4-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .v4-bar, .v4-bar.is-hidden { transition: none; } }

/* ---------- Калькулятор: поля и результат (полоса калькулятора в industrial.css, блок «Работы и цены») ---------- */
.v4-calc { color: var(--ip-text-muted); }
.v4-calc h3 { color: var(--ip-text); }
.v4-calc__field { display: grid; gap: var(--space-2); }
.v4-calc__field label { font-size: 0.72rem; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-text-dim); }
.v4-calc__field input,
.v4-calc__field select {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1.5px solid var(--ip-line);
  border-radius: var(--ip-radius);
  background-color: var(--ip-graphite-2);
  font: inherit;
  color: var(--ip-text);
}
.v4-calc__field select { cursor: pointer; }
.v4-calc__field input:focus, .v4-calc__field select:focus { outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(242, 107, 33, 0.3); }
.v4-calc__result { display: grid; gap: var(--space-1); }
.v4-calc__result[hidden], .v4-calc__small[hidden] { display: none; }
.v4-calc__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.v4-calc__sum { font-weight: var(--fw-extrabold); line-height: 1.1; letter-spacing: var(--tracking-heading); font-variant-numeric: tabular-nums; color: var(--color-orange); }
.v4-calc__sum.is-empty { font-weight: var(--fw-semibold); color: var(--ip-text-muted); }
.v4-calc__small { font-weight: var(--fw-semibold); line-height: 1.45; color: var(--ip-text); }
.v4-calc__small a { color: var(--ip-text); text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.v4-calc__note { line-height: 1.5; }

/* ---------- Поля формы заявки (светлая панель) ---------- */
.field { display: grid; gap: var(--space-2); }
.field label { font-size: 0.8125rem; font-weight: var(--fw-semibold); color: var(--ip-ink); }
.field__req { font-weight: var(--fw-regular); color: var(--ip-ink-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1.5px solid var(--ip-hair);
  border-radius: var(--ip-radius);
  background: var(--ip-text);
  font: inherit;
  color: var(--ip-ink);
}
.field textarea { min-height: 112px; padding-block: var(--space-3); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ip-ink-muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(242, 107, 33, 0.25); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__hint { font-size: 0.8125rem; line-height: 1.45; color: var(--ip-ink-muted); }
.field__error { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-error); }
.field__error[hidden], .field__hint[hidden] { display: none; }

/* ---------- Вопросы и ответы (details): общий вид для главной и страниц групп ---------- */
.faq { border-top: 1px solid var(--faq-line, var(--ip-hair)); }
.faq details { border-bottom: 1px solid var(--faq-line, var(--ip-hair)); }
.faq summary {
  position: relative;
  display: block;
  padding: 22px 48px 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: linear-gradient(var(--color-orange), var(--color-orange)) center / 14px 2px no-repeat, linear-gradient(var(--color-orange), var(--color-orange)) center / 2px 14px no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-orange); }
.faq details p { max-width: 70ch; padding: 0 48px 24px 0; font-size: 1rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .faq summary, .faq summary::after { transition: none; } }