/* ═══════════════════════════════════════════════════════════════════════════
   ДИЗАЙН 1 · ТОКЕНЫ — переменные, шрифт, кнопки, базовая типографика.
   Источник: движок _demo-main/main_engine.py (:root + .btn + секции) и
   _demo-main/palettes.json. Здесь — то же самое, но переносимо: подключил файл,
   поставил нише класс, и цвет/кнопки/отступы уже канонические.

   КУДА ВСТАВЛЯТЬ
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/tokens.css">
     <link rel="stylesheet" href="css/hero-split.css">   ← только если первый экран сплитом
     <html lang="ru" class="n-shtukaturka">              ← ниша задаёт палитру

   ЧТО НЕЛЬЗЯ МЕНЯТЬ
     · --gray (#3F4655) — светлее нельзя: контраст мелкого текста упадёт ниже 4.5.
     · --on-accent и --btn-bg у ниши — они ПОСЧИТАНЫ под контраст ≥4.5 на кнопке,
       а не подобраны на глаз (жёлтая электрика белым текстом даёт 2.15 — нечитаемо).
       Меняешь --accent на цвет клиента — пересчитай пару, формула ниже.
     · геометрию .btn (52px / радиус 14 / иконка у каждой) — разнобой мелких серых
       кнопок Denis браковал трижды.

   ЦВЕТ КЛИЕНТА ВМЕСТО НИШЕВОГО
     Логотип и цвет — клиента (ДИЗАЙН 1, п.5). Ставим инлайном на <html>:
       style="--accent:#123456;--accent-dk:#0E2A44;--accent-bg:#EAF1F8;
              --on-accent:#fff;--btn-bg:#123456"
     Как выбрать --on-accent и --btn-bg: считаем контраст белого и #141E30 к --accent,
     берём тот, что больше; если он всё равно < 4.5 — тот же счёт к --accent-dk и
     --btn-bg:var(--accent-dk). Палитру при этом НЕ меняем, меняем только кнопку.
     Готовый счётчик — _demo-main/main_engine.py, функция _pick().
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* палитра по умолчанию — химчистка */
  --accent:#0EA5C6; --accent-dk:#0B87A3; --accent-bg:#E8F7FB;
  --on-accent:#141E30; --btn-bg:#0EA5C6;
  /* нейтральные — одни на все ниши */
  --ink:#141E30;      /* заголовки, основной текст */
  --ink-2:#2E323D;    /* текст поверх фото: на мобиле подложки нет, серый не тянет */
  --gray:#3F4655;     /* мелкий текст. Светлее — брак по контрасту */
  --tile:#F6F7F9;     /* фон секции-плитки */
  --page:#FEFEFE;     /* фон страницы. Он же левый край маски героя */
  --card:#FFF;
  --divider:#EDEDEE;
  --ok:#1E9E5A;
  --pad:22px;         /* боковой отступ .wrap. Обнулишь — шапка упрётся в край, гейт qa.js поймает */
}

/* ── ПАЛИТРЫ НИШ. Значения --on-accent/--btn-bg посчитаны, не выбраны ────────
   ниша          акцент     тёмный    фон-подложка  текст на кнопке  контраст
   himchistka    #0EA5C6    #0B87A3   #E8F7FB       #141E30          5.74
   kli           #12A150    #0C7C3C   #E9F8EF       #141E30          4.96
   potolki       #E4121A    #B60E15   #FFF2F2       #fff             4.77
   poly          #4B6BFB    #3450D4   #EEF1FF       #fff (на dk)     6.47
   shtukaturka   #E4551A    #BF4412   #FFF3EC       #fff (на dk)     5.18
   remont        #F2951E    #CE7810   #FFF6E8       #141E30          7.23
   elektro       #F0B310    #C9930A   #FFF8E1       #141E30          8.87
   zabory        #2E7D5B    #22603F   #EAF6F0       #fff             5.00
   gruz          #1F6FEB    #1858C4   #EAF1FF       #fff             4.63
   okna          #0F7BD1    #0B5FA3   #E8F3FC       #fff (на dk)     6.60
   burenie       #0F8FA8    #0B7086   #E7F6F9       #fff (на dk)     5.71
   ──────────────────────────────────────────────────────────────────────── */
.n-himchistka { --accent:#0EA5C6; --accent-dk:#0B87A3; --accent-bg:#E8F7FB; --on-accent:#141E30; --btn-bg:#0EA5C6 }
.n-kli        { --accent:#12A150; --accent-dk:#0C7C3C; --accent-bg:#E9F8EF; --on-accent:#141E30; --btn-bg:#12A150 }
.n-potolki    { --accent:#E4121A; --accent-dk:#B60E15; --accent-bg:#FFF2F2; --on-accent:#fff;    --btn-bg:#E4121A }
.n-poly       { --accent:#4B6BFB; --accent-dk:#3450D4; --accent-bg:#EEF1FF; --on-accent:#fff;    --btn-bg:#3450D4 }
.n-shtukaturka{ --accent:#E4551A; --accent-dk:#BF4412; --accent-bg:#FFF3EC; --on-accent:#fff;    --btn-bg:#BF4412 }
.n-remont     { --accent:#F2951E; --accent-dk:#CE7810; --accent-bg:#FFF6E8; --on-accent:#141E30; --btn-bg:#F2951E }
.n-elektro    { --accent:#F0B310; --accent-dk:#C9930A; --accent-bg:#FFF8E1; --on-accent:#141E30; --btn-bg:#F0B310 }
.n-zabory     { --accent:#2E7D5B; --accent-dk:#22603F; --accent-bg:#EAF6F0; --on-accent:#fff;    --btn-bg:#2E7D5B }
.n-gruz       { --accent:#1F6FEB; --accent-dk:#1858C4; --accent-bg:#EAF1FF; --on-accent:#fff;    --btn-bg:#1F6FEB }
.n-okna       { --accent:#0F7BD1; --accent-dk:#0B5FA3; --accent-bg:#E8F3FC; --on-accent:#fff;    --btn-bg:#0B5FA3 }
.n-burenie    { --accent:#0F8FA8; --accent-dk:#0B7086; --accent-bg:#E7F6F9; --on-accent:#fff;    --btn-bg:#0B7086 }

/* ── БАЗА ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--page);line-height:1.45;-webkit-font-smoothing:antialiased;
  padding-bottom:84px}   /* место под липкий бар: без него бар накрывает подвал */
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{padding:0 var(--pad);max-width:720px;margin:0 auto}
.wrap svg{width:18px;height:18px;flex:0 0 auto}

/* ── ТИПОГРАФИКА СЕКЦИЙ ─────────────────────────────────────────────────── */
section{padding:32px 0}
section.tile{background:var(--tile)}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:8px}
.sec-h{font-size:23px;line-height:1.18;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.sec-p{color:var(--ink-2);font-size:15px;margin-bottom:16px}

/* ── КНОПКИ: одна геометрия на весь сайт ────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  padding:0 16px;border:0;border-radius:14px;font:800 15px/1.15 Manrope,sans-serif;cursor:pointer;
  text-align:center;white-space:nowrap;text-decoration:none;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px;height:19px;flex:none;stroke-width:2.2}
.btn img{width:21px;height:21px;flex:none;border-radius:6px}
.btn-full{width:100%}
.btn-accent{background:var(--btn-bg,var(--accent));color:var(--on-accent,#fff);box-shadow:0 10px 22px -10px var(--accent-dk)}
.btn-accent svg{color:currentColor}
.btn-dark{background:var(--ink);color:#fff} .btn-dark svg{color:#fff}
.btn-line{background:var(--card);border:1.5px solid var(--divider);color:var(--ink)}
.btn-line svg{color:var(--accent)}
.btn-wa{background:var(--card);border:1.5px solid var(--divider);color:var(--ink)}
.btn-wa svg{color:#25D366}
.btn-max{background:var(--card);border:1.5px solid var(--divider);color:var(--ink)}

/* ── ШАПКА ──────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(254,254,254,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--divider)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:10px}
.logo{display:flex;align-items:center;gap:9px;max-width:60vw;min-width:0}
.logo-ic{flex:0 0 34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;line-height:1}
.logo-im{flex:0 0 34px;width:34px;height:34px;border-radius:10px;object-fit:contain;background:#FFF8E3;padding:2px}
.logo-tx{font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.05;min-width:0}
.logo-tx>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.logo-tx small{display:block;font-size:9.5px;letter-spacing:.09em;font-weight:600;color:var(--gray);margin-top:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-r{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.hdr-tel{font-weight:700;font-size:14px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.hdr-tel-ic{display:none;width:36px;height:36px;border-radius:50%;background:var(--accent-bg);color:var(--accent);align-items:center;justify-content:center}
.hdr-tel-ic svg{width:17px;height:17px}
/* на узком телефон становится кружком-иконкой, иначе логотип и номер не помещаются */
@media (max-width:430px){
  .hdr-tel-tx{display:none}
  .hdr-tel-ic{display:flex}
  .logo{max-width:calc(100vw - 128px)}
}
.burger{width:36px;height:36px;flex:none;border:1px solid var(--divider);border-radius:50%;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.4px;cursor:pointer;padding:0}
.burger span{display:block;width:14px;height:1.6px;border-radius:2px;background:var(--ink)}

/* ── ЛИПКИЙ НИЖНИЙ БАР ──────────────────────────────────────────────────── */
.tz-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid #e5e9ef}
.tz-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;padding:7px 4px;border-radius:13px;text-decoration:none;
  font:700 11.5px/1 Manrope,sans-serif;background:var(--tile);color:var(--ink);
  border:1.5px solid transparent;transition:transform .12s ease, border-color .18s}
.tz-bar a:active{transform:translateY(1px)}
.tz-bar a svg{width:19px;height:19px;stroke-width:2.1}
.tz-bar a img{width:19px;height:19px;border-radius:5px}
.tz-bar .tz-calc{background:var(--accent);color:var(--on-accent)} .tz-bar .tz-calc svg{color:currentColor}
.tz-bar .tz-max{background:var(--card);border-color:var(--divider)}

/* ── ИКОНКИ. Вес линии 2 — канон склада. Вставляя SVG из icons/, приводи вес
      к 2 в самой вставке: в кит пишут несколько чатов, файл может приехать
      с другим весом (инцидент 07.09 — 15 иконок 1.75 против 14 весом 2). ── */
.ic-24{width:24px;height:24px;stroke-width:2;fill:none;stroke:currentColor}