/* ==========================================================================
   D.A.M — моушн-система. Базовый слой «Каркас».
   Три кривые и шесть длительностей из бренд-бука. Ничего вне этого набора:
   иначе движение расползается и сайт выглядит собранным из кусков.
   ========================================================================== */
:root{
  /* кривые */
  --dam-main: cubic-bezier(.22,1,.36,1);   /* проявления, подъёмы — резкий старт, долгое торможение */
  --dam-swap: cubic-bezier(.65,0,.35,1);   /* обмен: вкладки, панели, шаги */
  --dam-tap:  cubic-bezier(.33,1,.68,1);   /* отклик: наведение, нажатие, магнит */
  /* длительности */
  --dam-t-tap:    120ms;
  --dam-t-hover:  250ms;
  --dam-t-swap:   380ms;
  --dam-t-reveal: 700ms;
  --dam-t-scene:  900ms;
  --dam-step:      70ms;
}

/* --- 08. Полоса прогресса: масштаб вместо ширины, чтобы браузер не пересобирал раскладку --- */
html[data-motion] [data-progress]{
  width:100% !important;
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
}

/* --- 05. Кнопки: подъём и тёплая тень. В шаблоне это было, но React выбрасывал --- */
html[data-motion] [data-magnetic]{
  transition:transform var(--dam-t-hover) var(--dam-tap),
             box-shadow var(--dam-t-hover) var(--dam-tap),
             background var(--dam-t-hover) var(--dam-tap),
             border-color var(--dam-t-hover) var(--dam-tap);
  will-change:transform;
}
html[data-motion] [data-magnetic]:hover{ box-shadow:0 20px 44px rgba(232,71,42,.28); }

/* --- 04. Наклон карточки: перспектива и блик --- */
html[data-motion] [data-tilt]{
  transition:transform var(--dam-t-hover) var(--dam-tap);
  transform-style:preserve-3d;
  will-change:transform;
}

/* --- 12. Навигация: подчёркивание растёт от курсора и уходит в обратную сторону --- */
html[data-motion] [data-nav] a{ position:relative; }
html[data-motion] [data-nav] a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition:transform var(--dam-t-hover) var(--dam-main);
}
html[data-motion] [data-nav] a:hover::after,
html[data-motion] [data-nav] a:focus-visible::after{
  transform:scaleX(1); transform-origin:left center;
}

/* --- 12. Бургер перетекает в крестик, а не подменяется иконкой --- */
html[data-motion] [data-burger] [data-bl]{
  transition:transform 400ms var(--dam-main), opacity 200ms var(--dam-main);
}

/* --- 06. Обмен панелей: вкладки и шаги --- */
html[data-motion] [data-svc-panel],
html[data-motion] [data-rm-panel],
html[data-motion] [data-panel-swap]{
  animation:damSwapIn var(--dam-t-swap) var(--dam-swap) both;
}
@keyframes damSwapIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* --- 11. Счётчики: ширина цифр не прыгает --- */
html[data-motion] [data-count],
html[data-motion] [data-kpi],
html[data-motion] [data-score]{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* --- фокус с клавиатуры виден всегда, настройкой движения не выключается --- */
html[data-motion] a:focus-visible,
html[data-motion] button:focus-visible,
html[data-motion] input:focus-visible,
html[data-motion] textarea:focus-visible{
  outline:2px solid #E8472A; outline-offset:3px;
}

/* --- фоновый холст первого экрана --- */
html[data-motion] [data-bg-canvas]{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none; z-index:0;
}

/* ==========================================================================
   Если человек попросил меньше движения — слушаемся.
   Выключается: фон, наклон, магнит, кинетика, бегущая строка, счётчики.
   Остаётся: цвет при наведении, фокус, полоса прогресса, смена вкладок.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html[data-motion] [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important }
  html[data-motion] [data-tilt]{ transform:none !important }
  html[data-motion] [data-magnetic]{ transform:none !important }
  html[data-motion] [data-marquee],
  html[data-motion] [style*="marquee"]{ animation:none !important }
  /* фон не прячем: бренд-бук требует неподвижную картинку, а не пустоту —
     статичный кадр рисует сам скрипт фона */
  html[data-motion] [data-svc-panel],
  html[data-motion] [data-rm-panel],
  html[data-motion] [data-panel-swap]{ animation:none }
  html[data-motion] [data-nav] a::after{ transition:none }
}

/* --- Визуальная доводка по замечаниям (21 августа) --- */

/* Швы. Линия сверху стояла почти у каждой секции и дробила страницу на полосы.
   Оставляем единственный шов — перед подвалом, он там и был. */
html[data-motion] section{ border-top:0 !important }

/* Подвал собран одним блоком ближе к концу файла — «Подвал: один на все
   страницы (17 сентября)». Прежние правила строки data-foot-row, светлого
   подвала и его ссылок сняты вместе с разметкой, под которую писались. */

/* Бегущая строка. Разделительные линии заданы инлайном светлым цветом:
   на светлых страницах их не видно, на тёмных они резали макет. Снимаем везде. */
html [data-marquee-wrap]{ border-top:0 !important; border-bottom:0 !important }

/* Секция «Путь от идеи до запуска» шла третьим тоном rgb(231,223,208)
   и сбивала чередование тёмный/светлый. Делаем её тёмной, а карточки внутри
   оставляем светлыми — как в оригинале. Разметку не трогаем, только
   переопределяем inline-стили. */
html[data-motion] section[style*="rgb(231, 223, 208)"]{ background:#16130F !important }

/* заголовок и подзаголовок */
html[data-motion] section[style*="rgb(231, 223, 208)"] > div > div > div,
html[data-motion] section[style*="rgb(231, 223, 208)"] h2,
html[data-motion] section[style*="rgb(231, 223, 208)"] h3{ color:#F2EDE3 !important }
html[data-motion] section[style*="rgb(231, 223, 208)"] p{ color:#B7AEA2 !important }

/* шаги слева и подсказки справа — светлые карточки на тёмном */
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-step],
html[data-motion] section[style*="rgb(231, 223, 208)"] [style*="background: rgb(255, 255, 255)"]{
  background:#F2EDE3 !important;
  border-color:rgba(22,19,16,.12) !important;
  color:#16130F !important;
}
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-step] *,
html[data-motion] section[style*="rgb(231, 223, 208)"] [style*="background: rgb(255, 255, 255)"] *{
  color:#16130F !important;
}

/* текущий шаг — акцентом, так он читается сразу */
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-step][style*="background: rgb(22, 19, 15)"],
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-step][aria-pressed="true"]{
  background:#E8472A !important;
  border-color:#E8472A !important;
  color:#16130F !important;
}
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-step][aria-pressed="true"] *{
  color:#16130F !important;
}

/* панель с описанием шага остаётся тёмной — это фокус блока, ей нужна рамка */
/* панель шага — сероватая, чтобы читалась как блок, а не как провал */
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-panel]{
  background:transparent !important;
  border:0 !important;
}
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-main]{
  background:rgba(242,237,227,.06) !important;
  border:1px solid rgba(242,237,227,.12) !important;
  border-radius:4px;
}
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-panel] h3{ color:#F2EDE3 !important }
html[data-motion] section[style*="rgb(231, 223, 208)"] [data-rm-panel] p{ color:#B7AEA2 !important }


/* ==========================================================================
   Чередование фонов на главной. Три секции переворачиваем, чтобы шло ровно:
   тёмный · светлый · тёмный · светлый. Метки расставляет motion.js,
   здесь — сама инверсия. Разметку страниц не трогаем.
   ========================================================================== */

/* ---- была тёмной, становится светлой ---- */
html[data-motion] [data-flip="light"]{ background:#F2EDE3 !important }
html[data-motion] [data-flip="light"] h2,
html[data-motion] [data-flip="light"] h3,
html[data-motion] [data-flip="light"] [style*="color: rgb(242, 237, 227)"]{ color:#16130F !important }
html[data-motion] [data-flip="light"] p,
html[data-motion] [data-flip="light"] [style*="color: rgb(183, 174, 162)"],
html[data-motion] [data-flip="light"] [style*="color: rgb(140, 131, 120)"]{ color:#6E665A !important }
/* Полупрозрачная кремовая подложка на светлой странице.
   Карточку (у неё есть рамка) делаем белой — так она приподнимается над
   бумагой. А мелкие метки без рамки — столбики графика активности, например —
   белыми делать нельзя: сплошная белая плашка вместо сетки штрихов.
   Им даём ту же прозрачность, только тёмную. */
html[data-motion] [data-flip="light"] [style*="background: rgba(242, 237, 227"],
html[data-motion] [data-flip="light"] [style*="background:rgba(242,237,227"]{
  background:rgba(22,19,16,.10) !important;
  border-color:rgba(22,19,16,.12) !important;
}
html[data-motion] [data-flip="light"] [style*="background: rgba(242, 237, 227"][style*="border: 1px solid rgba(242, 237, 227"],
html[data-motion] [data-flip="light"] [style*="background:rgba(242,237,227"][style*="border:1px solid rgba(242,237,227"]{
  background:#FFFFFF !important;
  border-color:rgba(22,19,16,.12) !important;
}
html[data-motion] [data-flip="light"] [style*="border: 1px solid rgba(242, 237, 227"]{
  border-color:rgba(22,19,16,.12) !important;
}
/* Поле чата исключаем: оно вписано в тёмную панель и должно остаться
   прозрачным. Без этого правило успевало покрасить его в белый ещё до
   подбора контраста, а тот, увидев белый фон, красил поле в чёрный. */
html[data-motion] [data-flip="light"] input:not([data-bot-input]),
html[data-motion] [data-flip="light"] textarea{
  background:#FFFFFF !important;
  border-color:rgba(22,19,16,.16) !important;
  color:#16130F !important;
}
html[data-motion] [data-flip="light"] input::placeholder,
html[data-motion] [data-flip="light"] textarea::placeholder{ color:#8C8378 !important }
/* поле внутри тёмной панели (чат на странице ботов) живёт по тёмным правилам */
html[data-motion] [data-field="dark"]::placeholder{ color:#8C8378 !important }

/* Панель чата на светлой странице читалась как чёрная дыра посреди бумаги.
   Уводим её в тёплый серый, полосу ввода — на тон темнее, чтобы разделение
   между лентой и вводом сохранилось. */
html[data-light] [style*="background: rgb(20, 16, 25)"]{ background:#454039 !important }
/* Шапка панели («D.A.M Assistant») оставалась чёрной — уводим и её в серый,
   на тон темнее тела панели, чтобы разделение читалось. */
html[data-light] [style*="background: rgb(23, 19, 15)"]{ background:#3B362F !important }
/* Полоса ввода темнее панели читалась как дыра — делаем её на тон светлее,
   как обычное поле, и подсвечиваем рамкой. */
html[data-light] [style*="background: rgb(14, 12, 9)"]{
  background:#524C43 !important;
  border-color:rgba(242,237,227,.20) !important;
}
/* То же правило, но по структуре, а не по строке инлайн-стиля: подстрока
   в атрибуте — хрупкая привязка, и в Safari полоса оставалась чёрной. */
html[data-light] div:has(> [data-bot-input]){
  background:#524C43 !important;
  border-color:rgba(242,237,227,.20) !important;
}
html[data-light] [data-bot-input]{
  background:transparent !important;
  color:#F2EDE3 !important;
  border:0 !important;
}
html[data-motion] [data-flip="light"] a{ color:#16130F }

/* Ссылки-кнопки с акцентной подложкой (Telegram, WhatsApp): на тёмном это
   был лёгкий отсвет, на светлом — розовая заливка. Оставляем только рамку. */
html[data-motion] [data-flip="light"] [style*="background:rgba(232,71,42,0.08)"],
html[data-motion] [data-flip="light"] [style*="background: rgba(232, 71, 42, 0.08)"]{
  background:transparent !important;
  border-color:rgba(232,71,42,.45) !important;
}

/* ---- была светлой, становится тёмной ---- */
html[data-motion] [data-flip="dark"]{ background:#16130F !important }
html[data-motion] [data-flip="dark"] h2,
html[data-motion] [data-flip="dark"] h3,
html[data-motion] [data-flip="dark"] [style*="color: rgb(22, 19, 16)"]{ color:#F2EDE3 !important }
html[data-motion] [data-flip="dark"] p,
html[data-motion] [data-flip="dark"] [style*="color: rgb(110, 102, 90)"]{ color:#B7AEA2 !important }
html[data-motion] [data-flip="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-motion] [data-flip="dark"] [style*="background: rgb(242, 237, 227)"]{
  background:rgba(242,237,227,.05) !important;
  border-color:rgba(242,237,227,.12) !important;
}
html[data-motion] [data-flip="dark"] [style*="border: 1px solid rgba(22, 19, 16"]{
  border-color:rgba(242,237,227,.12) !important;
}
html[data-motion] [data-flip="dark"] [style*="background: rgb(255, 255, 255)"] *,
html[data-motion] [data-flip="dark"] [style*="background: rgb(242, 237, 227)"] *{ color:#F2EDE3 !important }


/* Подсветка курсором убрана со всех страниц по просьбе Дмитрия (21.08).
   Слои [data-spot] остались в разметке от исходной сборки — прячем их,
   какой бы скрипт их ни создал. */
[data-spot]{ display:none !important }
/* Модалка заявки закрыта атрибутом hidden, но у неё инлайновый display:flex —
   сам по себе атрибут его не перебивает. Раньше это выручал постраничный css,
   теперь правило общее для всех страниц. */
[hidden]{ display:none !important }


/* ==========================================================================
   Страницы целиком на светлом: веб-системы, боты и AI, контакты.
   Метка data-light на <html>, дальше работают те же правила инверсии.
   ========================================================================== */
/* Светлая страница обязана быть светлой ещё до того, как отработает скрипт.
   Разметку data-flip ставит JS, и пока он не выполнился, шапка и секции
   держали свой тёмный инлайновый фон — на медленной загрузке или
   из кеша страница открывалась тёмной. Задаём базу прямо в CSS.
   Подвал сюда не входит: цвет по теме страницы он берёт в своём блоке. */
html[data-light] header,
html[data-light] main,
html[data-light] section{ background:#F2EDE3 !important }
html[data-light] main h1,
html[data-light] main h2,
html[data-light] main h3,
html[data-light] main h4,
html[data-light] main p,
html[data-light] main li,
html[data-light] main td,
html[data-light] main th,
html[data-light] main strong{ color:#16130F }

html[data-light]{ background:#F2EDE3 }
html[data-light] body{ background:#F2EDE3 }

html[data-light] header[data-flip="light"]{
  background:rgba(242,237,227,.86) !important;
  border-bottom:1px solid rgba(22,19,16,.12) !important;
}
html[data-light] header a,
html[data-light] header [style*="color: rgb(242, 237, 227)"],
html[data-light] header [style*="color: rgb(183, 174, 162)"]{ color:#16130F !important }
html[data-light] header a[href="#contact"],
html[data-light] header a[href="/#contact"]{ color:#F2EDE3 !important }

/* Корневая обёртка страницы и полоса бегущей строки живут вне секций,
   поэтому их фон переворачиваем отдельно. */
/* :not([data-mobnav]) обязателен: полноэкранное меню тоже тёмный div прямо
   в body, и без исключения оно перекрашивалось в кремовое вместе со своими
   кремовыми ссылками. */
html[data-light] body > div[style*="rgb(22, 19, 15)"]:not([data-mobnav]),
html[data-light] body > div[style*="#16130F"]:not([data-mobnav]),
html[data-light] body > div[style*="#16130f"]:not([data-mobnav]),
html[data-light] #page-root,
html[data-light] [data-marquee-wrap]{ background:#F2EDE3 !important }
html[data-light] #page-root{ color:#16130F !important }
html[data-light] [data-marquee],
html[data-light] [data-marquee] span{ color:#6E665A !important }

/* вертикальная подпись сбоку */
html[data-light] [data-parallax]{ color:#8C8378 !important }

/* полоса прогресса и кнопка наверх остаются акцентными */
html[data-light] [data-totop]{ border-color:rgba(22,19,16,.2) !important }


/* Блок «Готовы начать» на внутренних страницах шёл с очень большими
   отступами — между списком и призывом получалось полэкрана пустоты.
   Поджимаем сверху и снизу. */
html[data-page-motion] #cta{
  padding-top:clamp(40px,5vh,72px) !important;
  padding-bottom:clamp(44px,6vh,80px) !important;
}

/* --- Мобильное меню на светлых страницах ------------------------------- */
/* Полноэкранное меню остаётся тёмным на любой странице: его ссылки светлые.
   На «Политике» общее правило перекраски фона делало меню кремовым, и оно
   становилось кремовым по кремовому — не читалось вообще. */
html[data-light] [data-mobnav]{ background:#16130F !important }
/* Полоски бургера заданы фоном, а не svg, поэтому подбор контраста их
   не трогал: на светлой шапке кремовая кнопка была не видна. */
html[data-light] [data-burger] [data-bl]{ background:#16130F !important }
/* Крестик остаётся тёмным и с открытым меню: шапка на светлых страницах
   светлая и полупрозрачная, она лежит поверх меню — на ней светлый крестик
   почти не читался. */

/* --- Светлая тема без скриптов ----------------------------------------- */
/* Компактная запись цвета (без пробелов) — так написаны инлайн-стили на
   «Контактах»: без этих вариантов заголовок оставался кремовым на кремовом,
   пока не отработает скрипт. */
html[data-motion] [data-flip="light"] [style*="color:#F2EDE3"],
html[data-motion] [data-flip="light"] [style*="color:#f2ede3"],
html[data-motion] [data-flip="light"] [style*="color:rgb(242, 237, 227)"]{ color:#16130F !important }



/* ОСТРОВКИ-НАЧАЛО (собирается tools/gen_islands.js, руками не править) */
html[data-motion] [data-flip="light"] :is(
  [style*="background: #16130F"],
  [style*="background: #1C1813"],
  [style*="background: #1E1A15"],
  [style*="background: #E8472A"],
  [style*="background: linear-gradient(150deg, rgb(232, 71, 42), rgb(181, 51, 29))"],
  [style*="background: linear-gradient(rgb(232, 71, 42), rgba(232, 71, 42, 0.22))"],
  [style*="background: rgb(14, 12, 9)"],
  [style*="background: rgb(20, 16, 25)"],
  [style*="background: rgb(22, 19, 15)"],
  [style*="background: rgb(23, 19, 15)"],
  [style*="background: rgb(232, 71, 42)"],
  [style*="background: rgb(27, 23, 18)"],
  [style*="background: rgb(30, 26, 21)"],
  [style*="background: rgba(10, 8, 6, 0.74)"],
  [style*="background: rgba(10,8,6,0.74)"],
  [style*="background: rgba(22, 19, 15, 0.82)"],
  [style*="background: rgba(22,19,15,0.82)"],
  [style*="background: rgba(22,19,15,0.85)"],
  [style*="background: rgba(232, 71, 42, 0.1)"],
  [style*="background: rgba(232,71,42,0.08)"],
  [style*="background:#16130F"],
  [style*="background:#1C1813"],
  [style*="background:#1E1A15"],
  [style*="background:#E8472A"],
  [style*="background:linear-gradient(150deg,rgb(232,71,42),rgb(181,51,29))"],
  [style*="background:linear-gradient(rgb(232,71,42),rgba(232,71,42,0.22))"],
  [style*="background:rgb(14,12,9)"],
  [style*="background:rgb(20,16,25)"],
  [style*="background:rgb(22,19,15)"],
  [style*="background:rgb(23,19,15)"],
  [style*="background:rgb(232,71,42)"],
  [style*="background:rgb(27,23,18)"],
  [style*="background:rgb(30,26,21)"],
  [style*="background:rgba(10,8,6,0.74)"],
  [style*="background:rgba(22,19,15,0.82)"],
  [style*="background:rgba(22,19,15,0.85)"],
  [style*="background:rgba(232,71,42,0.08)"],
  [style*="background:rgba(232,71,42,0.1)"]
) :is([style*="color: rgb(242, 237, 227)"], [style*="color:rgb(242, 237, 227)"], [style*="color:#F2EDE3"]){ color:#F2EDE3 !important }

html[data-motion] [data-flip="light"] :is(
  [style*="background: #16130F"],
  [style*="background: #1C1813"],
  [style*="background: #1E1A15"],
  [style*="background: #E8472A"],
  [style*="background: linear-gradient(150deg, rgb(232, 71, 42), rgb(181, 51, 29))"],
  [style*="background: linear-gradient(rgb(232, 71, 42), rgba(232, 71, 42, 0.22))"],
  [style*="background: rgb(14, 12, 9)"],
  [style*="background: rgb(20, 16, 25)"],
  [style*="background: rgb(22, 19, 15)"],
  [style*="background: rgb(23, 19, 15)"],
  [style*="background: rgb(232, 71, 42)"],
  [style*="background: rgb(27, 23, 18)"],
  [style*="background: rgb(30, 26, 21)"],
  [style*="background: rgba(10, 8, 6, 0.74)"],
  [style*="background: rgba(10,8,6,0.74)"],
  [style*="background: rgba(22, 19, 15, 0.82)"],
  [style*="background: rgba(22,19,15,0.82)"],
  [style*="background: rgba(22,19,15,0.85)"],
  [style*="background: rgba(232, 71, 42, 0.1)"],
  [style*="background: rgba(232,71,42,0.08)"],
  [style*="background:#16130F"],
  [style*="background:#1C1813"],
  [style*="background:#1E1A15"],
  [style*="background:#E8472A"],
  [style*="background:linear-gradient(150deg,rgb(232,71,42),rgb(181,51,29))"],
  [style*="background:linear-gradient(rgb(232,71,42),rgba(232,71,42,0.22))"],
  [style*="background:rgb(14,12,9)"],
  [style*="background:rgb(20,16,25)"],
  [style*="background:rgb(22,19,15)"],
  [style*="background:rgb(23,19,15)"],
  [style*="background:rgb(232,71,42)"],
  [style*="background:rgb(27,23,18)"],
  [style*="background:rgb(30,26,21)"],
  [style*="background:rgba(10,8,6,0.74)"],
  [style*="background:rgba(22,19,15,0.82)"],
  [style*="background:rgba(22,19,15,0.85)"],
  [style*="background:rgba(232,71,42,0.08)"],
  [style*="background:rgba(232,71,42,0.1)"]
) :is([style*="color: rgb(183, 174, 162)"], [style*="color:rgb(183, 174, 162)"], [style*="color: rgb(140, 131, 120)"], [style*="color:rgb(140, 131, 120)"]){ color:#B7AEA2 !important }

html[data-motion] [data-flip="light"] :is(
  [style*="background: #16130F"],
  [style*="background: #1C1813"],
  [style*="background: #1E1A15"],
  [style*="background: #E8472A"],
  [style*="background: linear-gradient(150deg, rgb(232, 71, 42), rgb(181, 51, 29))"],
  [style*="background: linear-gradient(rgb(232, 71, 42), rgba(232, 71, 42, 0.22))"],
  [style*="background: rgb(14, 12, 9)"],
  [style*="background: rgb(20, 16, 25)"],
  [style*="background: rgb(22, 19, 15)"],
  [style*="background: rgb(23, 19, 15)"],
  [style*="background: rgb(232, 71, 42)"],
  [style*="background: rgb(27, 23, 18)"],
  [style*="background: rgb(30, 26, 21)"],
  [style*="background: rgba(10, 8, 6, 0.74)"],
  [style*="background: rgba(10,8,6,0.74)"],
  [style*="background: rgba(22, 19, 15, 0.82)"],
  [style*="background: rgba(22,19,15,0.82)"],
  [style*="background: rgba(22,19,15,0.85)"],
  [style*="background: rgba(232, 71, 42, 0.1)"],
  [style*="background: rgba(232,71,42,0.08)"],
  [style*="background:#16130F"],
  [style*="background:#1C1813"],
  [style*="background:#1E1A15"],
  [style*="background:#E8472A"],
  [style*="background:linear-gradient(150deg,rgb(232,71,42),rgb(181,51,29))"],
  [style*="background:linear-gradient(rgb(232,71,42),rgba(232,71,42,0.22))"],
  [style*="background:rgb(14,12,9)"],
  [style*="background:rgb(20,16,25)"],
  [style*="background:rgb(22,19,15)"],
  [style*="background:rgb(23,19,15)"],
  [style*="background:rgb(232,71,42)"],
  [style*="background:rgb(27,23,18)"],
  [style*="background:rgb(30,26,21)"],
  [style*="background:rgba(10,8,6,0.74)"],
  [style*="background:rgba(22,19,15,0.82)"],
  [style*="background:rgba(22,19,15,0.85)"],
  [style*="background:rgba(232,71,42,0.08)"],
  [style*="background:rgba(232,71,42,0.1)"]
) :is([style*="background: rgba(242, 237, 227"], [style*="background:rgba(242,237,227"]){
  background:rgba(242,237,227,.08) !important;
  border-color:rgba(242,237,227,.16) !important;
}
/* ОСТРОВКИ-КОНЕЦ */

/* --- Поля ввода в Safari ----------------------------------------------- */
/* Когда в системе включена тёмная тема, Safari рисует полю ввода собственный
   тёмный фон — он ложится поверх заданного в стилях, и строка чата выглядела
   чёрной, хотя фон у неё прозрачный. Отключаем родное оформление поля
   и просим браузер считать оформление интерфейса светлым.
   Флажки не трогаем — им родной вид нужен. */
html{ color-scheme: light }
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select{
  -webkit-appearance:none;
  appearance:none;
}
/* Строка чата на странице «Боты и AI»: фон рисует полоса вокруг поля,
   само поле должно оставаться прозрачным на любой теме. */
html[data-motion] input[data-bot-input],
html input[data-bot-input]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#F2EDE3 !important;
}
html input[data-bot-input]::placeholder{ color:#8C8378 !important; opacity:1 }

/* --- Подвал: один на все страницы (17 сентября) --------------------------- */
/* Разметка у подвала везде была одна, а выглядел он по-разному. На светлых
   страницах скрипт перекрашивал его и давал первой строке отступ с полосой —
   подвал выходил на 19px выше. На главной и в кейсах ссылки получали поля
   по 4px, на политике и согласии строки брали интерлиньяж и поля из
   встроенных стилей страницы, на контактах оставались логотип и подпись
   по центру.
   Теперь размеры и раскладка везде по образцу «Сайтов» и «Приложений»:
   разметка на классах dam-site-footer одна на все страницы, стили только
   здесь, скрипты подвал не трогают. Префикс html:root body перебивает
   старые правила подвала в постраничных css и встроенных стилях — часть
   из них с !important.
   Цвет подвала идёт за страницей: на тёмной он тёмный, на светлой
   (data-light на <html>) — светлый. Главная заканчивается светлыми
   «Контактами», поэтому её подвал помечен классом dam-site-footer--light.
   Светлая пара — зеркало тёмной с тем же контрастом: ссылки и подпись
   читаются ярче реквизитов, полоса как у шапки светлых страниц. */
html:root body footer.dam-site-footer{
  --foot-bg:#16130F;
  --foot-ink:#8C8378;
  --foot-dim:#6E665A;
  --foot-line:rgba(242,237,227,.08);
  --foot-hover:#F2EDE3;
  padding:26px 0 30px !important;
  border:0 !important;
  background:var(--foot-bg) !important;
  color:var(--foot-ink) !important;
  /* На главной и политике у body стоит antialiased: на маке шрифт от этого
     тоньше и бледнее, и подвал там выглядел светлее, чем на остальных. */
  -webkit-font-smoothing:auto !important;
  -moz-osx-font-smoothing:auto !important;
  text-rendering:auto !important;
}
html:root[data-light] body footer.dam-site-footer,
html:root body footer.dam-site-footer.dam-site-footer--light{
  --foot-bg:#F2EDE3;
  --foot-ink:#6E665A;
  --foot-dim:#8C8378;
  --foot-line:rgba(22,19,16,.12);
  --foot-hover:#16130F;
}
html:root body footer.dam-site-footer > .dam-site-footer__row{
  display:grid !important;
  align-items:center !important;
  justify-content:normal !important;
  width:min(1240px, 100% - 48px) !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  font-family:'JetBrains Mono', monospace !important;
  font-weight:400 !important;
  line-height:normal !important;
  letter-spacing:.04em !important;
  text-align:left !important;
  text-transform:none !important;
}
html:root body footer.dam-site-footer > .dam-site-footer__row--main{
  grid-template-columns:auto 1fr !important;
  gap:18px !important;
  font-size:13px !important;
  color:var(--foot-ink) !important;
}
html:root body footer.dam-site-footer > .dam-site-footer__row--legal{
  grid-template-columns:1fr auto 1fr !important;
  gap:14px !important;
  margin-top:16px !important;
  padding-top:16px !important;
  border-top:1px solid var(--foot-line) !important;
  font-size:12px !important;
  color:var(--foot-dim) !important;
}
html:root body footer.dam-site-footer > .dam-site-footer__row > *{
  display:block !important;
  grid-column:auto !important;
  order:0 !important;
  justify-self:start !important;
  margin:0 !important;
  padding:0 !important;
  font:inherit !important;
  letter-spacing:inherit !important;
  text-align:left !important;
  color:inherit !important;
  text-decoration:none !important;
}
html:root body footer.dam-site-footer > .dam-site-footer__row > .dam-site-footer__end,
html:root body footer.dam-site-footer > .dam-site-footer__row > .dam-site-footer__consent{ justify-self:end !important }
html:root body footer.dam-site-footer > .dam-site-footer__row > .dam-site-footer__id{
  justify-self:center !important; text-align:center !important;
}
html:root body footer.dam-site-footer > .dam-site-footer__row > a{
  color:var(--foot-ink) !important;
  transition:color .25s cubic-bezier(.22,1,.36,1);
}
html:root body footer.dam-site-footer > .dam-site-footer__row > a:hover,
html:root body footer.dam-site-footer > .dam-site-footer__row > a:focus-visible{ color:var(--foot-hover) !important }

/* Уже 1000px (17 сентября). Правовая строка в три колонки умещается в одну
   линию только от 975px: реквизиты занимают 468px, ссылки — по 215px. На
   планшете и в узком окне «Политика» и «Согласие» ломались на две-четыре
   строки, а у 700px переносились и реквизиты. Разводим ссылки влево и вправо
   на одну линию, реквизиты ставим под ними по центру — как на телефоне, но
   кегль и разрядка остаются от компьютера. Граница взята с запасом в 25px:
   до загрузки шрифта и при масштабе браузера строка бывает чуть шире.
   Порядок нужен автоматической раскладке сетки: реквизиты на всю ширину идут
   последними, иначе «Согласие» уезжает на третью строку. */
@media (max-width: 999.98px){
  html:root body footer.dam-site-footer > .dam-site-footer__row--legal{
    grid-template-columns:1fr 1fr !important;
    gap:10px 14px !important;
  }
  html:root body footer.dam-site-footer > .dam-site-footer__row > .dam-site-footer__policy{
    grid-column:1 !important; order:1 !important;
  }
  html:root body footer.dam-site-footer > .dam-site-footer__row > .dam-site-footer__consent{
    grid-column:2 !important; order:2 !important; text-align:right !important;
  }
  html:root body footer.dam-site-footer > .dam-site-footer__row > .dam-site-footer__id{
    grid-column:1 / -1 !important; order:3 !important;
  }
}

/* Телефон (22 августа). Раскладка правовой строки та же, что выше; здесь
   только поля и кегль. Кегль считаем от ширины экрана: шрифт моноширинный,
   поэтому длина строки предсказуема — 2.62vw минус отступы полей как раз
   укладывают самую длинную строку (реквизиты) в одну на любом телефоне, а на
   планшете упирается в прежние 12px. Разрядку снимаем — она добавляет к
   строке лишние четыре процента ширины. */
@media (max-width: 680px){
  html:root body footer.dam-site-footer{ padding:14px 0 16px !important }
  /* Первая строка: на главной справа девиз «Define. Assemble. Move.», самый
     длинный из вариантов — вместе с подписью 37 знаков по 0.64em (моноширинный
     шрифт плюс разрядка) и зазор 10px. Кегль 13px держится, пока строка
     влезает (экран от 375px), на телефонах уже он уменьшается так, чтобы
     строка не переносилась. Правило общее для всех страниц — подвалы
     остаются одинаковыми. */
  html:root body footer.dam-site-footer > .dam-site-footer__row--main{
    grid-template-columns:auto auto !important;
    justify-content:space-between !important;
    gap:10px !important;
    font-size:min(13px, calc((100vw - 58px) / 24)) !important;
  }
  html:root body footer.dam-site-footer > .dam-site-footer__row > .dam-site-footer__end{ text-align:right !important }
  html:root body footer.dam-site-footer > .dam-site-footer__row--legal{
    gap:8px 10px !important;
    margin-top:10px !important;
    padding-top:12px !important;
    font-size:min(12px, calc(2.62vw - 1.2px)) !important;
    letter-spacing:0 !important;
  }
}

/* Экраны уже 340 точек (iPhone SE первого поколения, старые Android):
   в шапке логотип, кнопка заявки и бургер вместе шире строки, и страницу
   можно было утянуть вбок. Ужимаем разрядку слова STUDIO и зазоры —
   всё встаёт в строку, ничего не пропадает. */
@media (max-width: 340px){
  html body header > div{ gap:8px !important }
  html body header > div > a:first-child{ gap:6px !important }
  html body header > div > a:first-child > span{
    font-size:9px !important; letter-spacing:0.16em !important;
  }
}

/* Первый экран внутренних страниц был рассчитан на объёмную вставку: под
   текстом оставалось место под рисунок. На телефоне вставку мы больше не
   показываем, и это место превращалось в пустое поле высотой в треть экрана.
   Снимаем запас высоты — экран собирается по содержимому.
   Контакты, политика и согласие сюда не попадают: там первый экран и так
   короткий, метки data-page-motion у них нет. */
@media (max-width: 860px){
  html[data-page-motion] body section[data-hero]{
    min-height:0 !important;
    padding-bottom:56px !important;
  }
}

/* Пока открыта заявка, cookie-баннер не перекрывает поля и кнопку отправки. */
html.dam-modal-open #dam-cookie,
body.modal-open #dam-cookie{
  display:none !important;
}