/* Тепло3000 — лендинг «Расчёт отопления дома»
 *
 * Палитра взята с логотипа компании, а не выбрана «на вкус»:
 *   тёмно-зелёный #126162  — фирменный, основной цвет действий и ссылок
 *   красный       #C8181C  — второй фирменный, только акцент: главная кнопка,
 *                            «термальная линейка», сроки поставки
 *   тёмный        #12262A  — текст, шапка, подвал (близкий к чёрному с зеленью)
 *   бумага        #EDF1EF  — фон, цвет технического листа
 *   линейка       #C6D3D2  — границы таблиц и полей
 *
 * Контрасты проверены по WCAG: белое на зелёном 7,2; белое на красном 5,8;
 * основной текст 15,7 — весь текст проходит норму 4,5.
 * Шрифт один на всю страницу — Golos Text: русская гарнитура с настоящей кириллицей.
 */

:root {
  --ink: #12262A;
  --ink-soft: #4C6161;
  --steel: #126162;              /* фирменный зелёный (название оставлено: правится в одном месте) */
  --steel-dark: #0E4A4B;
  --copper: #C8181C;             /* фирменный красный, акцент */
  --paper: #EDF1EF;
  --paper-2: #F7F9F8;
  --line: #C6D3D2;
  --white: #fff;
  --accent-soft: #F0A9A3;        /* красный для тёмных секций */

  --wrap: 1160px;
  --rad: 2px;                /* радиус один и маленький: это техника, а не соцсеть */

  --t-xs: 13px;
  --t-s: 15px;
  --t-m: 17px;
  --t-l: 20px;
  --t-h3: 25px;
  --t-h2: 33px;
  --t-h1: 44px;
  --t-num: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-m)/1.65 "Golos Text", -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--steel); }

b, strong { font-weight: 600; }

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

.lead {
  margin: 14px 0 0;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: var(--t-l);
  line-height: 1.55;
}

/* ============================================================== шапка
 * Шапка белая, как на основном сайте: логотип тёмно-зелёный с красным, на тёмном
 * фоне он не читается (контраст зелёного к почти чёрному — всего 2,2). */
.top {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* логотип в шапке: широкая надпись со знаком, поэтому ограничиваем по высоте,
   а ширину даём считать пропорции — иначе на телефоне он съест всю шапку */
.brand__logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: 60vw;
}

.top__right {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-size: var(--t-s);
}

.top__hours { color: var(--ink-soft); }

.top__phone {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-l);
  white-space: nowrap;
}

.top__phone:hover { color: var(--copper); }

/* ========================================================= первый экран */
.hero {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 54px 0 60px;
}

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 56px;
  align-items: start;
}

.hero__sub {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: var(--t-l);
  line-height: 1.6;
  max-width: 46ch;
}

.hero__facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.hero__facts li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-s);
  color: var(--ink-soft);
}

.hero__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  background: var(--copper);
}

.hero__facts b {
  color: var(--ink);
  font-weight: 600;
}

.hero__note {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-s);
  color: var(--ink-soft);
  max-width: 44ch;
}

.hero__calc-note {
  margin: 14px 0 0;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-soft);
}

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--steel);
  padding: 26px 28px 28px;
  border-radius: var(--rad);
}

/* ====================================================== выдержка сметы */
.spec { padding: 64px 0; }

.sheet {
  margin: 32px 0 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}

.sheet__cap {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

.sheet__scroll { overflow-x: auto; }

.sheet__t {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 720px;
}

.sheet__t th {
  text-align: left;
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.sheet__t td {
  padding: 11px 14px;
  border-bottom: 1px solid #E2EAE8;
  vertical-align: top;
}

.sheet__t tbody tr:last-child td { border-bottom: 0; }

.sheet__t .grp td {
  background: var(--paper);
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--steel);
  padding: 8px 14px;
}

.sheet__t .n { width: 42px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sheet__t .art { width: 150px; color: var(--ink-soft); white-space: nowrap; font-size: 13.5px; }
.sheet__t .qty { width: 80px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sheet__t .money { width: 110px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sheet__t .ok { color: #2E6B45; white-space: nowrap; }
.sheet__t .wait { color: var(--copper); white-space: nowrap; }

.sheet__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--t-s);
  color: var(--ink-soft);
}

.sheet__sum {
  font-size: var(--t-l);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.spec__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 40px;
}

.spec__cols h3 {
  font-size: var(--t-l);
  color: var(--steel);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.spec__cols p {
  margin: 12px 0 0;
  font-size: var(--t-s);
  color: var(--ink-soft);
}

/* ======================================================= как мы считаем */
.how {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 64px 0 68px;
}

/* «термальная линейка»: градиент от стали к меди, слева от шагов.
   Единственная намеренная смелость страницы — и она осмысленная:
   последовательность идёт от теплопотерь к теплу. */
.steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0 0 0 34px;
  position: relative;
  display: grid;
  gap: 34px;
  counter-reset: step;
}

.steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: linear-gradient(180deg, var(--steel) 0%, #126162 45%, var(--copper) 100%);
}

.steps__i {
  position: relative;
  counter-increment: step;
}

.steps__i::before {
  content: counter(step);
  position: absolute;
  left: -34px;
  top: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--steel);
  color: transparent;
  font-size: 0;
}

.steps__i:nth-child(2)::before { border-color: #17807F; }
.steps__i:nth-child(3)::before { border-color: #8A4A46; }
.steps__i:nth-child(4)::before { border-color: var(--copper); }

.steps__body h3 {
  font-size: var(--t-l);
  max-width: 44ch;
}

.steps__body p {
  margin: 10px 0 0;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: var(--t-s);
}

.steps__body b { color: var(--ink); }

.how__more {
  margin: 40px 0 0;
  padding: 22px 26px;
  border-left: 3px solid var(--steel);
  background: var(--paper);
  max-width: 78ch;
  font-size: var(--t-s);
  color: var(--ink-soft);
}

/* ========================================================== монтажникам */
.pro {
  padding: 64px 0;
  background: var(--ink);
  color: var(--white);
}

.pro__in {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: 52px;
  align-items: start;
}

.pro h2 { color: var(--white); }

.pro__sub {
  margin: 16px 0 0;
  font-size: var(--t-l);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
}

.pro__list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.pro__list li {
  position: relative;
  padding-left: 24px;
  font-size: var(--t-s);
  color: rgba(255, 255, 255, 0.86);
}

.pro__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  background: var(--copper);
}

.pro__list b { color: var(--white); }

.pro__price {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--t-s);
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
}

.pro__card {
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 24px 26px;
  border-radius: var(--rad);
}

.pro__card h3 { font-size: var(--t-l); }

.pro__card p {
  margin: 12px 0 0;
  font-size: var(--t-s);
  color: rgba(255, 255, 255, 0.78);
}

.pro__hint {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--accent-soft) !important;
}

/* ============================================================== вопросы */
.faq { padding: 64px 0; }

.faq__wrap { max-width: 860px; }

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  margin-top: 12px;
}

.faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 500;
  font-size: var(--t-m);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--copper);
  font-weight: 600;
  font-size: var(--t-l);
  line-height: 1;
}

.faq details[open] summary::after { content: "–"; }

.faq details[open] summary { border-bottom: 1px solid var(--line); }

.faq details p {
  margin: 0;
  padding: 16px 22px 20px;
  font-size: var(--t-s);
  color: var(--ink-soft);
  max-width: 70ch;
}

/* ============================================================ финальный */
.final {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 64px 0 72px;
}

.final__in {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 56px;
  align-items: start;
}

.final__text > p {
  margin: 18px 0 0;
  font-size: var(--t-l);
  color: var(--ink-soft);
  max-width: 40ch;
}

.final__note {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-s) !important;
}

/* =============================================== текст документа (политика) */
.doc {
  background: var(--white);
  padding: 44px 0 64px;
}

.doc__wrap { max-width: 800px; }

.doc h1 {
  font-size: var(--t-h2);
  margin-bottom: 14px;
}

.doc__lead {
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--t-s);
}

.doc h2 {
  font-size: var(--t-h3);
  color: var(--steel);
  margin: 34px 0 12px;
}

.doc p {
  margin: 0 0 12px;
  font-size: var(--t-s);
  line-height: 1.7;
  color: var(--ink);
  max-width: 76ch;
}

.doc ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.doc li {
  font-size: var(--t-s);
  line-height: 1.7;
  margin-bottom: 6px;
  max-width: 74ch;
}

/* =============================================================== подвал */
.foot {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 34px 0;
  font-size: var(--t-xs);
}

.foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.foot__col {
  display: grid;
  gap: 6px;
  align-content: start;
}

.foot__name {
  color: var(--white);
  font-size: var(--t-m);
  font-weight: 600;
}

/* логотип тёмно-зелёный — на тёмном подвале его не видно, поэтому кладём на плашку */
.foot__logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  background: var(--white);
  padding: 8px 10px;
  border-radius: var(--rad);
}

.foot__hours { color: rgba(255, 255, 255, 0.55); }

.foot__place .foot__label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.foot__phone {
  color: var(--white);
  font-size: var(--t-l);
  font-weight: 600;
  text-decoration: none;
  margin-top: 2px;
}

.foot__phone:hover { color: var(--accent-soft); }

.foot__col--law { text-align: right; }

.foot a { color: rgba(255, 255, 255, 0.8); }
.foot a:hover { color: var(--white); }

/* ========================================================= адаптив */
@media (max-width: 1020px) {
  :root {
    --t-h1: 36px;
    --t-h2: 28px;
    --t-h3: 22px;
  }

  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .foot__col--law { text-align: left; }

  .hero { padding: 40px 0 46px; }

  .hero__in,
  .pro__in,
  .final__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .spec__cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .hero__sub,
  .hero__note,
  .pro__sub,
  .final__text > p { max-width: none; }
}

@media (max-width: 700px) {
  :root {
    --t-h1: 30px;
    --t-h2: 24px;
    --t-l: 18px;
  }

  body { font-size: 16px; }

  .wrap { padding: 0 18px; }

  .top__hours { display: none; }

  .card { padding: 20px 18px 22px; }

  .spec, .how, .pro, .faq, .final { padding: 44px 0; }

  .steps { padding-left: 26px; gap: 26px; }
  .steps__i::before { left: -26px; width: 11px; height: 11px; border-width: 2px; }

  .foot__in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .foot__col--law { text-align: left; }

  .sheet__t { font-size: 13.5px; }
  .sheet__t th, .sheet__t td { padding: 9px 11px; }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}