/* ============================================================================
   ARTMUHA — общая обвязка всех страниц.

   ЗАЧЕМ ЭТОТ ФАЙЛ.
   Раньше стили жили внутри каждой страницы: 217 строк в index, 550 в sites,
   611 в planfix, по 92 в terms и privacy. Одно и то же копировалось шесть раз
   и расходилось. Реальные последствия: переключатель языка выглядел
   по-разному на четырёх страницах, CSS куки-баннера был продублирован
   побайтово пять раз, ссылка «телефон» пряталась на 680px на одной странице
   и на 640px на другой — из-за чего шапка ломалась на разных диапазонах.

   ПРАВИЛО.
   Здесь лежит только то, что ОБЯЗАНО выглядеть одинаково на всех страницах:
   токены, сброс, логотип, переключатель языка, фокус, зоны нажатия,
   куки-баннер. Всё, что относится к содержимому конкретной страницы,
   остаётся в её собственном <style>.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ.
   <link> на этот файл идёт ПЕРЕД <style> страницы. Поэтому страница может
   переопределить любое правило отсюда — но только осознанно и с комментарием,
   почему именно ей нужно иначе.
   ============================================================================ */


/* --- 1. ТОКЕНЫ ------------------------------------------------------------
   Значения по умолчанию. Страница переопределяет только то, что у неё
   действительно другое: sites.html делает акцент синим, index и 404 —
   чуть светлее фон. Всё остальное берётся отсюда.                          */
:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --surface:#f1f3f6;
  --line:#e3e7ed;
  --ink:#171c24;
  --mut:#5c6675;

  /* акцент страницы; по умолчанию зелёный, sites.html делает его синим */
  --amber:#17966a;
  --amber-bright:#1fae7c;

  --blue:#3d7fbf;
  --blue-bright:#5093cf;
  --green:#2f9e5f;
  --red:#d05c49;

  --sh-soft:0 2px 8px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08);
  --sh-lift:0 4px 14px rgba(0,0,0,.08),0 24px 56px rgba(0,0,0,.12);

  /* куки-баннер держит свой зелёный на всех страницах, включая синюю sites:
     это одна и та же плашка на всём сайте, ей незачем менять цвет */
  --ck-accent:#17966a;
  --ck-accent-bright:#1fae7c;
}


/* --- 2. БАЗА -------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
a{color:inherit}
/* height:auto обязателен рядом с max-width. У картинок проставлены атрибуты
   width/height (чтобы браузер знал место заранее и вёрстка не прыгала), и если
   ширину ужимает max-width, а высота остаётся из атрибута — картинка растягивается.
   Так фото в блоке «Кто это делает» стало 388×1015 вместо 388×308. */
img{max-width:100%;height:auto}
::selection{background:var(--amber);color:#fff}


/* --- 3. ПЕРЕКЛЮЧЕНИЕ ЯЗЫКА ------------------------------------------------
   Весь текст на странице лежит в трёх экземплярах, лишние скрываются
   по атрибуту data-lang на <html>.                                          */
[data-lang="ru"] .l-ro,[data-lang="ru"] .l-en{display:none!important}
[data-lang="ro"] .l-ru,[data-lang="ro"] .l-en{display:none!important}
[data-lang="en"] .l-ru,[data-lang="en"] .l-ro{display:none!important}


/* --- 4. ЛОГОТИП -----------------------------------------------------------
   flex-shrink:0 обязателен. Без него флекс сжимал блок логотипа, когда
   справа переставало хватать места, а картинка внутри сохраняла свою ширину
   и наезжала на переключатель языка — при 320px на 105px.                   */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-img{height:34px;width:auto;display:block}
.logo-sub{font-style:normal;color:var(--mut);font-weight:400;font-size:13.5px;letter-spacing:0}
@media(max-width:600px){ .logo-img{height:28px} .logo-sub{display:none} }
@media(max-width:360px){ .logo-img{height:24px} }


/* --- 5. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ----------------------------------------------
   Был четырьмя разными: где-то градиентная активная кнопка, где-то синяя,
   где-то тёмная, с разными скруглениями и отступами. Оставлен один вид.
   Активная кнопка тёмная, а не акцентная: акцент у страниц разный
   (зелёный / синий), а элемент управления должен читаться одинаково.        */
.lang{display:flex;gap:2px;padding:2px;background:var(--surface);
      border:1px solid var(--line);border-radius:11px}
.lang button{background:none;border:none;border-radius:9px;color:var(--mut);
      font-family:'Onest',sans-serif;font-weight:600;font-size:13px;
      letter-spacing:.04em;padding:7px 10px;cursor:pointer;transition:.18s}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--ink);color:#fff}


/* --- 6. ФОКУС С КЛАВИАТУРЫ -----------------------------------------------
   Видимая рамка обязательна: без неё сайт непроходим с клавиатуры.
   :focus-visible, а не :focus — мышью рамка не мешает.                      */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:10px}


/* --- 7. ЗОНЫ НАЖАТИЯ НА ТЕЛЕФОНЕ -----------------------------------------
   Замер показывал 29–37px по высоте при рекомендованных 44. Отступ по
   горизонтали намеренно скромный: при 320px шапке и так тесно, а лишние
   6px на кнопку ломают её раскладку.                                        */
@media(max-width:820px){
  .lang button{padding:14px 12px}
  .foot a,.foot button,.ck-link{display:inline-block;padding:11px 5px}
  .foot{line-height:2.2}
}


/* --- 8. МЕНЬШЕ ДВИЖЕНИЯ ---------------------------------------------------
   Системная настройка «уменьшить анимацию» — не пожелание, а требование
   доступности.                                                              */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}


/* --- 9. КУКИ-БАННЕР -------------------------------------------------------
   Этот блок был скопирован побайтово на пять страниц. Правился бы в пяти
   местах — значит рано или поздно разошёлся бы, как всё остальное.          */
.ck-wrap{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ck-txt{flex:1;min-width:260px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.ck-txt b{color:var(--ink);font-weight:600;display:block;margin-bottom:3px;font-size:15.5px}
.ck-txt a{color:var(--ck-accent);text-decoration:underline;text-underline-offset:3px}
.ck-btns{display:flex;gap:9px;flex-wrap:wrap}
.ck-btn{font-family:'Onest',sans-serif;font-size:14px;font-weight:600;padding:11px 18px;
        border-radius:11px;border:1px solid var(--line);background:var(--card);
        color:var(--ink);cursor:pointer;transition:.15s}
.ck-btn:hover{border-color:#c3cad4}
.ck-btn.pri{background:var(--ck-accent);border-color:var(--ck-accent);color:#fff}
.ck-btn.pri:hover{background:var(--ck-accent-bright);border-color:var(--ck-accent-bright)}
.ck-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--surface)}
.ck-row:last-child{border-bottom:none}
.ck-row .ck-i{flex:1;font-size:13.5px;color:var(--mut);line-height:1.5}
.ck-row .ck-i b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;margin-bottom:2px}
.ck-row input{width:19px;height:19px;margin-top:3px;accent-color:var(--ck-accent);cursor:pointer;flex-shrink:0}
.ck-row input:disabled{opacity:.45;cursor:default}
.ck-link{background:none;border:none;padding:0;font:inherit;font-size:13.5px;color:var(--mut);
         text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ck-link:hover{color:var(--ck-accent)}
@media(max-width:720px){
  .ck-wrap{gap:14px}
  .ck-btns{width:100%}
  .ck-btn{flex:1;text-align:center;padding:12px 10px}
}
