/* Дизайн-система ENERGY — один файл на весь сайт.

   Подключается ПОСЛЕ style.css везде: и на главной, и в общей обёртке
   page() (блог, детальный расчёт, города, чек-лист, документы). Такой
   порядок выбран сознательно: style.css давно описывает компоненты
   правильно, расходилась только палитра и форма. Переопределяя токены
   в :root, мы перекрашиваем весь сайт одним местом, не трогая вёрстку
   каждой страницы по отдельности и ничего не ломая в калькуляторе.

   Палитра: графит #202020, оранжевый #F07816 на действиях, светло-серое
   поле #F3F3F3, белые карточки. Оранжевый не разливается по странице —
   он только там, где человек должен нажать или где показан прогресс.

   Шрифт один — Manrope, он уже лежит на своём сервере (CSP не пускает
   внешние CDN, и это правильно). Третье начертание Unbounded из прежней
   тёмной темы больше не грузится: одна гарнитура, как просит бриф. */

:root{
  /* поверхности */
  --bg:#f3f3f3;
  --card:#ffffff;
  --ink:#202020;
  --ink-2:#383838;
  --muted:#6b6b6b;
  /* Абзацы внутри карточек: #777 на сером поле даёт ровно 4:1 и читается
     тяжело, поэтому у основного текста свой, более тёмный серый. */
  --ink-soft:#4a4a4a;
  --line:#e5e5e5;

  /* действие */
  --accent:#f07816;
  --accent-dark:#d2650c;
  --accent-soft:#fdeedf;
  /* Подпись на оранжевой заливке: графит, а не белый. Белый по #F07816 —
     2,8:1, ниже нормы для текста; графит по нему 7,4:1. */
  --accent-ink:#1f1f1f;
  /* Оранжевый, которым набирают текст по светлому фону. Тот же цвет,
     затемнённый до читаемого: 4,6:1 по белому. */
  --accent-text:#b05600;

  /* служебные состояния */
  --ok:#202020;
  --danger:#c62828;

  /* форма */
  --r-card:14px;
  --r-btn:9px;
  --r-field:9px;
  --shadow:0 1px 2px rgba(32,32,32,.04), 0 8px 24px rgba(32,32,32,.06);
  --shadow-lift:0 2px 6px rgba(32,32,32,.06), 0 16px 36px rgba(32,32,32,.10);
}

/* Контентная область 1240px — середина рекомендованного диапазона.
   Поля по 24px, одинаковые с обеих сторон на всех ширинах. */
.wrap{max-width:1240px;padding:0 24px}
.narrow{max-width:760px}
@media (max-width:480px){.wrap{padding:0 16px}}

body{font-size:16px;line-height:1.55}

/* ─────────────────────────── типографика ─────────────────────────── */
h1,h2,h3,h4{letter-spacing:-0.02em;line-height:1.1;font-weight:800}
h1{letter-spacing:-0.03em}

/* ───────────────────────────── кнопки ───────────────────────────── */
/* Одна форма на весь сайт: скругление 9px, вес 700, высота от 48px —
   палец попадает без прицеливания. Главное действие оранжевое, второе
   белое с границей, третье — текстовое. */
.btn{
  border-radius:var(--r-btn);
  background:var(--accent);color:var(--accent-ink);border:0;
  font-weight:700;min-height:48px;
  transition:background-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.btn:hover:not(:disabled){background:var(--accent-dark)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn--back,.btn--ghost{
  background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn--back:hover,.btn--ghost:hover{background:#ececec;border-color:#d8d8d8}
.btn--outline{background:var(--ink);color:#fff;border:0}
.btn--outline:hover{background:var(--ink-2)}

/* ───────────────────────────── карточки ───────────────────────────── */
.card,.post,.chk__card,.cmp-box,.offer,.about__block{
  border-radius:var(--r-card);background:var(--card);
  border:1px solid var(--line);box-shadow:none}
.post{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.post:hover{transform:translateY(-2px);box-shadow:var(--shadow);
  border-color:#dadada}

/* ─────────────────────────── поля ввода ─────────────────────────── */
input[type=text],input[type=tel],input[type=email],input[type=number],
select,textarea{
  border-radius:var(--r-field);border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;min-height:48px}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(240,120,22,.16)}
textarea{min-height:96px}

/* Видимый фокус с клавиатуры — отдельно от :focus, чтобы мышь не рисовала
   рамку там, где её не ждут. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ──────────────────────── шапка внутренних страниц ──────────────────── */
.bloghead{background:var(--card);border-bottom:1px solid var(--line)}
.bloghead__nav a{color:var(--ink);font-weight:600}
.bloghead__nav a:hover{color:var(--accent-text)}
.bloghead__cta{
  background:var(--accent);color:var(--accent-ink)!important;
  border-radius:var(--r-btn);padding:11px 18px;font-weight:700}
.bloghead__cta:hover{background:var(--accent-dark)}
.logo span{color:var(--accent-text)}

/* ──────────────────────────── подвал ──────────────────────────── */
.foot{background:var(--ink);color:#fff}
.foot a{color:#fff}
.foot a:hover{color:#ffb366}

/* ───────────────────── мелочи прежней палитры ───────────────────── */
/* В style.css остались зашитые числами кирпичный и зелёный — следы
   прошлой темы. Приводим к системе: ошибка красная одна на сайт,
   «входит в стоимость» больше не зелёное, галочка набирается графитом. */
.lead__err,.fbw__err,.chk__cross{color:var(--danger)}
.details__h--ok,.list--ok li:before{color:var(--accent-text)}
.done__ico{background:var(--accent);color:var(--accent-ink)}
.cmp__yes{color:var(--accent-text);font-weight:700}
.cmp__no{color:var(--muted)}
.fbw--unread .fbw__bubble::after{background:var(--accent)}
.done .btn:not(.btn--outline),
.done .btn:not(.btn--outline):hover{background:var(--accent)}
.fbw__send:hover,.fbw__again:hover{background:var(--accent-dark)}
.result__term{background:var(--accent-soft);color:var(--ink);
  border-radius:var(--r-btn)}

/* Таблицы на узких экранах: прокрутка внутри блока, а не всей страницы. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ───────────── остатки прежнего оформления ─────────────
   Эти правила переживают style.css: мелкий капслок с разрядкой,
   градиенты-заглушки под фотографиями и тени на кнопках — приметы
   прежней темы, которые к ENERGY отношения не имеют. */
.post__meta,.more__cat,.cmp th{font-size:14px;text-transform:none;
  letter-spacing:0;color:var(--muted)}
.stbl th{font-size:14px;text-transform:none;letter-spacing:0}
.btn,.fbw__bubble{box-shadow:none}

/* Под фотографией работ лежал градиент на случай отсутствующего файла.
   Файлы есть, а градиент даёт лишний цветной слой по краям кадра. */
.work--1{background-image:url(/photos/work1.jpg)}
.work--2{background-image:url(/photos/work2.jpg)}
.work--3{background-image:url(/photos/work3.jpg)}
.work--4{background-image:url(/photos/work4.jpg)}
.work{background-color:#e4e4e4}

/* Секции разделяются ступенью тона, а не линейкой: линейки остались
   от прежней темы, где фон всех секций был одинаковый. */
.origin,.home-blog{border-top:0}
.home-blog{background:var(--bg)}

/* Второстепенная кнопка — заливкой, а не рамкой. */
.btn--back,.btn--ghost{background:#eaeaea;border:0;color:var(--ink)}
.btn--back:hover,.btn--ghost:hover{background:#e0e0e0;color:var(--ink)}

/* Ключ сессии был обведён пунктиром — приём из оформления «черновика».
   Кнопка-ключ остаётся кнопкой: заливка и моноширинных рамок не нужно. */
.otp__keyval{border:0;background:#ebebeb;border-radius:var(--r-btn);
  color:var(--ink);font-weight:700}
.otp__keyval:hover{background:var(--accent-soft);color:var(--accent-text)}