/* Отдельная палитра: реальные продуктовые фотографии не фильтруются. */
.vt-theme-toggle{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + var(--theme-obstacle,0px));z-index:10000;display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid #b78b53;border-radius:50%;background:#f5f2ec;color:#53391a;box-shadow:0 5px 24px #0003;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;isolation:isolate}
.vt-theme-toggle[hidden]{display:none}.vt-theme-toggle svg{grid-area:1/1;transition:opacity .25s,transform .35s}.vt-theme-sun{opacity:0;transform:rotate(-60deg) scale(.6)}
html[data-theme="dark"] .vt-theme-toggle{background:#242526;color:#ba9137;border-color:#b78b53}
html[data-theme="dark"] .vt-theme-sun{opacity:1;transform:none}html[data-theme="dark"] .vt-theme-moon{opacity:0;transform:rotate(60deg) scale(.6)}
.vt-theme-toggle:focus-visible{outline:3px solid #ba9137;outline-offset:4px}
@media(hover:hover){.vt-theme-toggle:hover{box-shadow:0 6px 28px #0005,0 0 0 4px #ba913726}}
html[data-theme="dark"] body.fg-preview{--paper:#171819;--paper-2:#222324;--paper-3:#202122;--on-paper:#f1e9dc;--on-paper-2:#c4baaa;--line-p:#484640;--amber-sm-p:#ba9137;--ink:#101113;--steel:#b6bcc5;background:#171819;color:#f1e9dc}
html[data-theme="dark"] .fg-preview .nav{background:rgba(23,24,25,.96)!important;color:#f1e9dc!important;border-color:#484640}
html[data-theme="dark"] .fg-preview .nav :is(.logo,.logo span,.nav-links a,.nav-tel,.nav-cta){color:#f1e9dc!important}
html[data-theme="dark"] .fg-preview :is(.burger,.mobile-menu,.mobile-menu a){color:#f1e9dc}
html[data-theme="dark"] .fg-preview .burger span{background:#f1e9dc}
html[data-theme="dark"] .fg-preview :is(.mobile-menu,.fg-hero,.fg-collection,.fg-statement,.fg-final,.cta-band,.fg-lightbox){background:#202122;color:#f1e9dc}
html[data-theme="dark"] .fg-preview :is(.fg-hero-base,.fg-collection-base,.fg-statement-base){opacity:.08}
html[data-theme="dark"] .fg-preview .fg-panel{filter:brightness(.35)}
html[data-theme="dark"] .fg-preview .fg-fact{background:linear-gradient(148deg,#303132,#202122);color:#f1e9dc}
html[data-theme="dark"] .fg-preview :is(.fg-hero-note,.fg-collection-note,.fg-door-caption p,.fg-statement>p,.fg-final small,.crumbs,.ph-lead,.ph-facts,.c-desc,.pcard p,.prj-note,.f-count,.contact-details dt,.lead-field>span,.lead-agree,.lead-alt,.lead-message,.tp-body p,.tp-body li,.door-lede,.door-cities,.door-cities a,.partner-request p,.partner-section--paper .info-card p){color:#c4baaa}
html[data-theme="dark"] .fg-preview :is(.page-head h1,.ph-facts b,.card,.card h2,.c-spec li,.c-actions .link-arrow,.pcard h2,.cta-band h2,.fg-button,.btn-ghost,.fg-lightbox-close,.door-cities a.is-here){color:#f1e9dc}
html[data-theme="dark"] .fg-preview :is(.c-tag,.pcard .tags span){color:#ba9137}
html[data-theme="dark"] .fg-preview :is(.fg-statement h2 span,.fg-star){color:#b4aa9b}
html[data-theme="dark"] .fg-preview .chip{color:#f1e9dc;border-color:#686157;background:transparent}
html[data-theme="dark"] .fg-preview .chip.on{color:#171819;background:#ba9137;border-color:#ba9137}
html[data-theme="dark"] .fg-preview .card-note:before{background:#242526}
html[data-theme="dark"] .fg-preview :is(.fg-button-filled,.cta-band .btn-amber){background:#ba9137;color:#171819!important}
html[data-theme="dark"] .fg-preview .cta-band .btn-ghost{color:#f1e9dc}
html[data-theme="dark"] .fg-preview :is(.lead-panel,.door-params__list li){background:#292a2b}
html[data-theme="dark"] .fg-preview :is(.lead-field input,.lead-field textarea){background:#171819;color:#f1e9dc;border-color:#756d61}
html[data-theme="dark"] .fg-preview :is(input,textarea)::placeholder{color:#a69f94;opacity:1}
html[data-theme="dark"] .fg-preview .lead-message.is-err{color:#ffac99}html[data-theme="dark"] .fg-preview .lead-message.is-ok{color:#b9d895}
html[data-theme="dark"] .fg-preview :is(.door-section,.door-chars li,.door-feat li,.pcard .tags span,.fg-lightbox){border-color:#484640}
html[data-theme="dark"] .fg-preview .lead-agree a:hover{color:#ba9137}
html[data-theme="dark"] .fg-preview .fg-live-map .leaflet-container{background:#242526}
html[data-theme="dark"] .fg-preview .fg-live-map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.25);opacity:.7}
html[data-theme="dark"] .fg-preview.quiz-page{color:#ece7de;--paper:#ece7de}
html[data-theme="dark"] .fg-preview :is(.partner-section:not(.partner-section--paper),footer.site){color:#ece7de;--paper:#ece7de}
html[data-theme="dark"] .vt-overlay{background:#ba9137;color:#53391a}
@media(max-width:600px){.vt-theme-toggle{width:48px;height:48px;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + var(--theme-obstacle,0px))}}
@media(prefers-reduced-motion:reduce){.vt-theme-toggle,.vt-theme-toggle svg{transition:none}}
@media print{.vt-theme-toggle{display:none!important}}

/* Матированное стекло: прозрачность только у подложки, не у текста.
   Без поддержки blur сохраняются прежние плотные фоны для читаемости. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .fg-preview .nav{
  background:rgba(245,242,236,.76)!important;
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);
  border-bottom-color:rgba(83,57,26,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 24px rgba(0,0,0,.04);
 }
 html[data-theme="dark"] .fg-preview .nav{
  background:rgba(23,24,25,.72)!important;
  border-bottom-color:rgba(241,233,220,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 24px rgba(0,0,0,.12);
 }
 .fg-preview .fg-fact{
  background:linear-gradient(148deg,rgba(245,242,236,.82),rgba(236,231,222,.68));
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.32),0 8px 32px rgba(0,0,0,.12);
 }
 html[data-theme="dark"] .fg-preview .fg-fact{
  background:linear-gradient(148deg,rgba(48,49,50,.74),rgba(24,25,26,.64));
  box-shadow:inset 0 0 0 1px rgba(241,233,220,.22),inset 0 1px 0 rgba(255,255,255,.12),0 8px 32px rgba(0,0,0,.18);
 }
}

/* Карта в темной теме: копирайт остается со светлым фоном от базовой темы,
   поэтому фон и текст переопределяются целиком. */
html[data-theme="dark"] .fg-preview .geo-map .leaflet-control-attribution{background:rgba(12,13,16,.78);color:#d6d0c5}
html[data-theme="dark"] .fg-preview .geo-map .leaflet-control-attribution a{color:#ba9137}
html[data-theme="dark"] .fg-preview .geo-pop .leaflet-popup-content-wrapper{background:#202122;color:#f1e9dc}
html[data-theme="dark"] .fg-preview .geo-pop .leaflet-popup-tip{background:#202122}
html[data-theme="dark"] .fg-preview .leaflet-control-zoom a{background:#202122;color:#f1e9dc;border-color:rgba(241,233,220,.18)}

/* Текст отзыва светлый в любой ветке темы. Базовое правило в site.css задает
   color:var(--paper), а этот токен в темной теме переворачивается в #171819 —
   та же ловушка, из-за которой пропадала подпись метки на карте. */
html[data-theme="dark"] .fg-preview .geo-revcard blockquote{color:#f1e9dc}
html[data-theme="dark"] .fg-preview .geo-revcard figcaption{color:#ba9137}
html[data-theme="dark"] .fg-preview .geo-revcard .geo-rev-src{color:#a9a294}
@media(prefers-color-scheme:dark){
 html:not([data-theme="light"]) .fg-preview .geo-revcard blockquote{color:#f1e9dc}
 html:not([data-theme="light"]) .fg-preview .geo-revcard figcaption{color:#ba9137}
}

/* ── Светлые блоки для длинного чтения (запрос заказчика 21.09.2026) ──────
   Фидбек 19.08.2026 требует «больше светлых и теплых секций», «сократить
   длинные последовательности полностью темных блоков» и контрастный
   основной текст. Темная тема остается общей; на бумагу возвращаются
   только три места, где реально читают текст: «Почему выбирают нас»,
   «Отзывы клиентов» и страница проекта.

   Перекрашиваются не отдельные элементы, а сами токены палитры внутри
   блока. Базовая (светлая) таблица site.css уже описывает эти блоки на
   бумаге — темными их делает лишь переопределение токенов в
   html[data-theme="dark"]. Возврат токенов к исходным значениям
   согласованно чинит вложенные карточки, ссылки и мелкие подписи и не
   плодит точечных !important.
   Значения совпадают с :root в site.css. --steel переводится в бумажный
   аналог: на темном это светло-серый для мелкого текста, на бумаге он
   не проходит контраст. */
html[data-theme="dark"] .fg-preview .h2-why,
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews,
html[data-theme="dark"] .fg-preview.fg-project-page.single .page-head,
html[data-theme="dark"] .fg-preview.fg-project-page.single .blog-article{
  --paper:#ece7de; --paper-2:#e3ddd2; --paper-3:#f5f2ec;
  --on-paper:#16171b; --on-paper-2:#5c6068; --line-p:#d3cdc0;
  --amber-sm-p:#8a5a20; --steel:#5c6068;
  background:#ece7de; color:#16171b;
}

/* 1. «Почему выбирают нас»: секция лежит на темном фоне страницы и своего
      фона не имела. Полоса во всю ширину, вертикальные поля — как у
      соседних секций; горизонтальные (var(--h2-pad)) не трогаем. */
html[data-theme="dark"] .fg-preview .h2-why{padding-block:clamp(3.5rem,7vw,6rem)}
html[data-theme="dark"] .fg-preview .h2-why h2{color:#16171b}
html[data-theme="dark"] .fg-preview .h2-why h2 em,
html[data-theme="dark"] .fg-preview .h2-why h2 i{color:inherit}
/* карточки: угольный #181919 → бумага, текст и подписи инвертируются */
html[data-theme="dark"] .fg-preview .h2-why .h2-why__item{
  background:#f5f2ec; border-color:#d3cdc0;
}
html[data-theme="dark"] .fg-preview .h2-why .h2-why__item b{color:#16171b}
html[data-theme="dark"] .fg-preview .h2-why .h2-why__item p{color:#5c6068}

/* 2. «Отзывы клиентов»: лента внутри темной секции «География».
      Блок становится светлой панелью, лента и карточки едут за токенами. */
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews{
  padding:clamp(1.6rem,3vw,2.6rem);
  border-radius:var(--r-lg,14px);
}
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-lbl{color:#8a5a20}
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-rev-all,
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-rev-link{color:#16171b}
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-revcard blockquote,
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-rev-city{color:#16171b}
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-rev-date,
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-rev-src{color:#5c6068}
/* заголовок плитки-приглашения был жестко #f1e9dc — на бумаге исчезал */
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-revcard--cta .geo-cta-ttl{color:#16171b}
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews .geo-revcard--cta .geo-cta-txt{color:#5c6068}
/* сноска про монтаж партнерами стоит под лентой — тоже на бумаге */
html[data-theme="dark"] .fg-preview .fg-geography .geo-rev-note{color:#5c6068}

/* 3. Страница проекта (/projects/<slug>/): шапка с крошками и тело статьи —
      единая светлая область чтения. Навигация и футер остаются темными,
      их правила с !important не трогаются: высота и поведение шапки по
      требованию фидбека не меняются. */
html[data-theme="dark"] .fg-preview.fg-project-page.single .page-head h1{color:#16171b}
html[data-theme="dark"] .fg-preview.fg-project-page.single .page-head .crumbs,
html[data-theme="dark"] .fg-preview.fg-project-page.single .page-head .crumbs a,
html[data-theme="dark"] .fg-preview.fg-project-page.single .page-head .ph-lead{color:#5c6068}
html[data-theme="dark"] .fg-preview.fg-project-page.single .page-head .crumbs b{color:#16171b}
html[data-theme="dark"] .fg-preview.fg-project-page.single .blog-body{color:#16171b}
html[data-theme="dark"] .fg-preview.fg-project-page.single .blog-body blockquote{color:#5c6068}
html[data-theme="dark"] .fg-preview.fg-project-page.single .blog-body figcaption{color:#5c6068}
/* янтарь #ba9137 подобран под уголь; на бумаге берем бумажный акцент */
html[data-theme="dark"] .fg-preview.fg-project-page.single .blog-note{border-left-color:#8a5a20}
html[data-theme="dark"] .fg-preview.fg-project-page.single .blog-note b{color:#8a5a20}
html[data-theme="dark"] .fg-preview.fg-project-page.single .blog-body blockquote{border-left-color:#8a5a20}

/* ── Карта и отзывы рядом (запрос заказчика 21.09.2026) ──────────────────
   Было: карта + колонка карточек, а лента отзывов — отдельной полосой ниже.
   Стало: слева карта квадратом, справа отзывы; карточки производства и
   факты переехали под этот ряд во всю ширину (см. parts/geography.php).
   Правила вне html[data-theme="dark"]: это раскладка, а не палитра. */
.fg-preview .geo-grid.has-rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch}
.fg-preview .geo-grid.has-rev .geo-mapwrap{aspect-ratio:1/1}
.fg-preview .geo-grid.has-rev .geo-map{height:100%}

/* Лента отзывов рядом с картой идет колонкой и прокручивается по вертикали;
   высота приходит от ряда сетки, поэтому панель равна карте. min-height:0
   обязателен, иначе flex-элемент не дает ленте прокручиваться. */
.fg-preview .geo-reviews--side{display:flex; flex-direction:column; min-width:0; gap:clamp(.9rem,1.6vw,1.3rem)}
.fg-preview .geo-reviews--side .geo-rev-track{
  flex:1 1 auto; min-height:0; flex-direction:column;
  overflow-x:hidden; overflow-y:auto; scroll-snap-type:y proximity;
}
.fg-preview .geo-reviews--side .geo-revcard{flex:0 0 auto; scroll-snap-align:start}
.fg-preview .geo-reviews--side .geo-revcard-photo{aspect-ratio:16/9}

/* Карточки под рядом: две в строку, полоса фактов — во всю ширину. */
.fg-preview .geo-below{margin-top:clamp(1.25rem,2.6vw,2.4rem)}
.fg-preview .geo-below .geo-side{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2.4vw,1.8rem)}
.fg-preview .geo-below .geo-facts{grid-column:1 / -1}

/* Узкий экран: возвращаем прежнее поведение — все в одну колонку,
   лента отзывов снова строкой (стрелки это учитывают, см. map.js). */
@media(max-width:1000px){
  .fg-preview .geo-grid.has-rev{grid-template-columns:1fr}
  .fg-preview .geo-grid.has-rev .geo-mapwrap{aspect-ratio:auto}
  .fg-preview .geo-grid.has-rev .geo-map{height:clamp(20rem,58vw,26rem)}
  .fg-preview .geo-reviews--side .geo-rev-track{
    flex-direction:row; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  }
  .fg-preview .geo-reviews--side .geo-revcard-photo{aspect-ratio:4/3}
  .fg-preview .geo-below .geo-side{grid-template-columns:1fr}
}

/* ── Поправка к раскладке «карта + отзывы» (21.09.2026) ──────────────────
   На главной секция «География» лежит внутри .fg-live-map, где figma.css
   (стр. 109) принудительно ставит .geo-grid{display:block} и прячет
   .geo-side, а home-spacing.css задает .fg-live-map фиксированную высоту и
   .geo-mapwrap{height:100%}. Из-за этого сетка не включалась, а
   aspect-ratio:1/1 на фиксированной высоте 700px давал квадрат в 700px с
   пустотой справа. Здесь раскладка возвращается уже в этом контексте, с
   специфичностью выше исходных правил. */
.fg-preview .fg-home .fg-geography .fg-live-map{height:auto}
.fg-preview .fg-live-map .geo-grid.has-rev{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.25rem,2.6vw,2.4rem); align-items:stretch;
}
/* Высота ряда задается картой: при половине ширины это примерно квадрат.
   Вторая строка перебивает .fg-home .fg-live-map .geo-mapwrap{height:100%}. */
.fg-preview .fg-live-map .geo-grid.has-rev .geo-mapwrap,
.fg-preview .fg-home .fg-live-map .geo-grid.has-rev .geo-mapwrap{
  height:clamp(360px,34vw,640px); aspect-ratio:auto; min-height:0;
}
/* Панель отзывов тянется на высоту ряда; ленте возвращаем обычную ширину —
   в figma.css у нее width:max-content под горизонтальный вариант. */
.fg-preview .fg-live-map .geo-grid.has-rev .geo-reviews--side{margin:0; min-height:0}
.fg-preview .fg-live-map .geo-grid.has-rev .geo-rev-track{width:auto; max-width:none}
/* Карточки производства на главной были скрыты и раньше
   (.fg-live-map .geo-side{display:none}) — прячем и пустую обертку. */
.fg-preview .fg-live-map .geo-below{display:none}

@media(max-width:1000px){
  .fg-preview .fg-live-map .geo-grid.has-rev{display:block}
  .fg-preview .fg-live-map .geo-grid.has-rev .geo-mapwrap,
  .fg-preview .fg-home .fg-live-map .geo-grid.has-rev .geo-mapwrap{height:360px}
  .fg-preview .fg-live-map .geo-grid.has-rev .geo-reviews--side{margin-top:20px}
  .fg-preview .fg-live-map .geo-grid.has-rev .geo-rev-track{width:max-content}
}

/* ── Карта и отзывы одной высоты (21.09.2026) ────────────────────────────
   Высоту ряда раньше задавал самый высокий элемент — панель отзывов росла
   по контенту, карта оставалась ниже. Теперь высота задается сетке явно:
   оба столбца тянутся на нее, а лента отзывов прокручивается внутри. */
.fg-preview .fg-live-map .geo-grid.has-rev{grid-auto-rows:clamp(360px,34vw,640px)}
.fg-preview .fg-live-map .geo-grid.has-rev .geo-mapwrap,
.fg-preview .fg-home .fg-live-map .geo-grid.has-rev .geo-mapwrap{
  height:100%; aspect-ratio:auto; min-height:0;
}
.fg-preview .fg-live-map .geo-grid.has-rev .geo-reviews--side{
  height:100%; min-height:0; overflow:hidden;
}
@media(max-width:1000px){
  /* На узком экране раскладка снова блочная — жесткая высота не нужна. */
  .fg-preview .fg-live-map .geo-grid.has-rev{grid-auto-rows:auto}
  .fg-preview .fg-live-map .geo-grid.has-rev .geo-mapwrap,
  .fg-preview .fg-home .fg-live-map .geo-grid.has-rev .geo-mapwrap{height:360px}
  .fg-preview .fg-live-map .geo-grid.has-rev .geo-reviews--side{height:auto; overflow:visible}
}

/* ── Страница «О компании» (21.09.2026) ──────────────────────────────────
   Раскладка собрана на существующих классах внутренних страниц
   (.page-head, .sec-head, .info-card, .geo-revcard) — здесь только сетки
   самой страницы, чтобы не дублировать оформление. */
.about-page{padding-bottom:clamp(3rem,6vw,5rem)}
.about-sec{margin-top:clamp(3rem,6vw,5.5rem); scroll-margin-top:7rem}
.about-toc{display:flex; flex-wrap:wrap; gap:clamp(1rem,2.4vw,2.2rem); margin-top:clamp(1.5rem,3vw,2.4rem)}
.about-toc .link-arrow{font-size:.82rem}

.about-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
 margin-top:clamp(1.5rem,3vw,2.4rem); background:var(--line-p); border:1px solid var(--line-p)}
.about-fact{background:var(--paper-2); padding:clamp(1.1rem,2vw,1.6rem); display:flex; flex-direction:column; gap:.4rem}
.about-fact b{font-family:var(--f-dis); font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1; color:var(--amber-sm-p)}
.about-fact span{font-size:.86rem; line-height:1.5; color:var(--on-paper-2)}

.about-cards{display:grid; grid-template-columns:repeat(3,1fr);
 gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1.5rem,3vw,2.4rem)}
.about-cards .info-card{display:flex; flex-direction:column; gap:.55rem}

.about-reviews{display:grid; grid-template-columns:repeat(3,1fr);
 gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1.5rem,3vw,2.4rem)}
.about-reviews .geo-revcard{flex:none}

/* Подсказка редактору о незаполненных полях: гостям не показывается. */
.about-editor-note{margin-top:1.2rem; padding:.9rem 1.1rem; border-left:3px solid var(--amber-2);
 background:rgba(186, 145, 55,.1); font-size:.8rem; line-height:1.6; color:var(--on-paper-2)}
.about-editor-note code{font-family:var(--f-mono); font-size:.76rem}

@media(max-width:900px){
 .about-facts{grid-template-columns:repeat(2,1fr)}
 .about-cards,.about-reviews{grid-template-columns:1fr}
 .about-toc{gap:.8rem 1.4rem}
}

/* ── «О компании»: одна направляющая линия (21.09.2026) ──────────────────
   Шапка сайта выровнена по своей геометрии: .fg-preview .nav — max-width
   1920px по центру и поле calc(60 * var(--u)) (figma.css:7). Контент же шел
   по базовому .wrap — max-width 1440px и другое поле, поэтому крошки,
   заголовок и секции стояли по трем разным линиям.
   Повторяем геометрию шапки один в один, чтобы все легло по логотипу. */
.fg-preview.page-template-about-v2 .page-head .wrap,
.fg-preview.page-template-about-v2 .about-page > .wrap{
  max-width:1920px; margin-inline:auto; padding-inline:calc(60 * var(--u));
}

/* Крошки → заголовок: увеличенный зазор по просьбе заказчика.
   Сделано так же, как для контактов (spacing.css), — через margin-top у h1. */
.fg-preview.page-template-about-v2 .page-head h1{margin-top:calc(32 * var(--u))}

@media(max-width:900px){
  /* На узком экране у шапки поле 24px (figma.css:134) — повторяем его. */
  .fg-preview.page-template-about-v2 .page-head .wrap,
  .fg-preview.page-template-about-v2 .about-page > .wrap{
    max-width:none; padding-inline:24px;
  }
  .fg-preview.page-template-about-v2 .page-head h1{margin-top:24px}
}
@media(max-width:480px){
  /* И 20px на самых узких (figma.css:153). */
  .fg-preview.page-template-about-v2 .page-head .wrap,
  .fg-preview.page-template-about-v2 .about-page > .wrap{padding-inline:20px}
}

/* ── Кадр блока «Фабрика полного цикла» (21.09.2026) ─────────────────────
   Заменен на реальный кадр лазерного раскроя (assets/factory/fab-laser-sparks.jpg).
   Прежние проценты в figma.css:93 (width:110.44%, height:141.47%) были
   подогнаны под старый стоковый PNG и портретное фото растягивали.
   Обычный cover без искажений; точка кадрирования смещена вниз, чтобы в
   широкой полосе остались и лазерная голова, и сноп искр. */
.fg-preview .fg-factory-photo img{
  width:100%; height:100%; left:0; top:0; max-width:none;
  object-fit:cover; object-position:50% 58%;
}

/* Карта и отзывы — впритык, без зазора между столбцами (21.09.2026). */
.fg-preview .fg-live-map .geo-grid.has-rev{gap:0}

/* ── Раздел «Решения» (21.09.2026) ───────────────────────────────────────
   Хаб коммерческого раздела и посадочные по сегментам. Оформление берется
   от внутренних страниц, здесь только сетки. Выравнивание — по той же
   направляющей, что шапка сайта (см. блок «одна направляющая линия»). */
.fg-preview.page-template-solutions-v2 .page-head .wrap,
.fg-preview.page-template-solutions-v2 .solutions-page > .wrap,
.fg-preview.page-template-segment-v2 .page-head .wrap,
.fg-preview.page-template-segment-v2 .segment-page > .wrap{
  max-width:1920px; margin-inline:auto; padding-inline:calc(60 * var(--u));
}
.fg-preview.page-template-solutions-v2 .page-head h1,
.fg-preview.page-template-segment-v2 .page-head h1{margin-top:calc(32 * var(--u))}

.solutions-page,.segment-page{padding-bottom:clamp(3rem,6vw,5rem)}
.sol-sec{margin-top:clamp(3rem,6vw,5.5rem); scroll-margin-top:7rem}

.sol-grid{display:grid; grid-template-columns:repeat(3,1fr);
 gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1.5rem,3vw,2.4rem)}
.sol-card{display:flex; flex-direction:column; gap:.6rem; padding:clamp(1.2rem,2.2vw,1.8rem);
 border:1px solid var(--line-p); border-radius:var(--r-lg,14px); background:var(--paper-2);
 color:inherit; text-decoration:none; transition:background var(--t1) var(--e), border-color var(--t1) var(--e)}
a.sol-card:hover,a.sol-card:focus-visible{background:var(--paper-3); border-color:var(--amber-2)}
.sol-card__n{font-size:.68rem; letter-spacing:.14em; color:var(--amber-sm-p)}
.sol-card h3{margin:0; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.2}
.sol-card p{margin:0; font-size:.9rem; line-height:1.6; color:var(--on-paper-2)}
.sol-card .link-arrow{margin-top:auto; font-size:.78rem}

.sol-ai{margin-top:clamp(1.5rem,3vw,2.4rem); padding:clamp(1.4rem,2.6vw,2.2rem);
 border:1px solid var(--line-p); border-radius:var(--r-lg,14px); background:var(--paper-2)}
.sol-ai p{margin:0 0 1.2rem; max-width:60ch; font-size:1rem; line-height:1.65}
.sol-ai__act{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem}

.sol-prj{display:grid; grid-template-columns:repeat(3,1fr);
 gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1.5rem,3vw,2.4rem)}
.sol-prj__card{display:flex; flex-direction:column; gap:.7rem; color:inherit; text-decoration:none}
.sol-prj__ph{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-lg,14px); background:var(--paper-2)}
.sol-prj__ph img{width:100%; height:100%; object-fit:cover; display:block;
 transition:transform .8s cubic-bezier(.16,1,.3,1)}
.sol-prj__card:hover .sol-prj__ph img{transform:scale(1.03)}
.sol-prj__card h3{margin:0; font-size:1.05rem; line-height:1.25}

.sol-back{display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:clamp(2.5rem,5vw,4rem)}
.segment-page .lead-panel{margin-top:clamp(1.5rem,3vw,2.4rem)}

@media(max-width:900px){
  .fg-preview.page-template-solutions-v2 .page-head .wrap,
  .fg-preview.page-template-solutions-v2 .solutions-page > .wrap,
  .fg-preview.page-template-segment-v2 .page-head .wrap,
  .fg-preview.page-template-segment-v2 .segment-page > .wrap{max-width:none; padding-inline:24px}
  .fg-preview.page-template-solutions-v2 .page-head h1,
  .fg-preview.page-template-segment-v2 .page-head h1{margin-top:24px}
  .sol-grid,.sol-prj{grid-template-columns:1fr}
}
@media(max-width:480px){
  .fg-preview.page-template-solutions-v2 .page-head .wrap,
  .fg-preview.page-template-solutions-v2 .solutions-page > .wrap,
  .fg-preview.page-template-segment-v2 .page-head .wrap,
  .fg-preview.page-template-segment-v2 .segment-page > .wrap{padding-inline:20px}
}

/* ── Большие кнопки: «таблетка» с круглой стрелкой (21.09.2026) ──────────
   По референсу заказчика: светлая пилюля с темным текстом, справа желтый
   круг со стрелкой; на ховере желтой становится вся кнопка, а круг
   растворяется в ней. Кнопка в шапке (.nav-cta) сознательно не трогается —
   она остается простой. Скругление полное, как на референсе. */
.fg-preview :is(.btn, .fg-button):not(.nav-cta){
  border-radius:999px;
  gap:calc(20 * var(--u));
  padding:calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(28 * var(--u));
  min-height:calc(56 * var(--u));
  background:#f5f2ec;
  color:#16171b !important;
  border:1px solid transparent;
  transition:background .25s var(--e), color .25s var(--e), border-color .25s var(--e);
}
/* Стрелка внутри кнопки — кружок-бейдж. В разметке это либо <i>, либо
   декоративный <span aria-hidden>, поэтому берем оба варианта. */
.fg-preview :is(.btn, .fg-button):not(.nav-cta) > :is(i, span[aria-hidden="true"]){
  display:grid; place-items:center; flex:none;
  width:calc(40 * var(--u)); height:calc(40 * var(--u));
  border-radius:50%;
  background:#ba9137; color:#16171b;
  font-style:normal; line-height:1;
  transition:background .25s var(--e), color .25s var(--e);
}
/* Кнопка без стрелки в разметке: правое поле возвращаем, иначе текст
   прижимается к краю. */
.fg-preview :is(.btn, .fg-button):not(.nav-cta):not(:has(> i)):not(:has(> span[aria-hidden="true"])){
  padding-right:calc(28 * var(--u));
}

@media(hover:hover){
  .fg-preview :is(.btn, .fg-button):not(.nav-cta):hover{background:#ba9137; border-color:#ba9137}
  .fg-preview :is(.btn, .fg-button):not(.nav-cta):hover > :is(i, span[aria-hidden="true"]){background:transparent}
}
.fg-preview :is(.btn, .fg-button):not(.nav-cta):focus-visible{outline:3px solid #ba9137; outline-offset:3px}

/* Второстепенная кнопка (.btn-ghost, «Позвонить») остается контурной, но с
   тем же скруглением — иначе в паре с основной смотрится чужой. */
.fg-preview .btn-ghost:not(.nav-cta){
  background:transparent; border-color:rgba(236,231,222,.4); color:var(--paper) !important;
}
@media(hover:hover){
  .fg-preview .btn-ghost:not(.nav-cta):hover{background:#ba9137; border-color:#ba9137; color:#16171b !important}
}

/* ── Блог (21.09.2026) ───────────────────────────────────────────────────
   Лента — темная (класс page-light сюда не добавляется), сама статья —
   светлая область чтения, как на страницах проектов. Выравнивание по той
   же направляющей, что шапка сайта. */
.fg-preview.post-type-archive-article .page-head .wrap,
.fg-preview.post-type-archive-article .blog-index > .wrap,
.fg-preview.single-article .page-head .wrap,
.fg-preview.single-article .ba-body > .wrap{
  max-width:1920px; margin-inline:auto; padding-inline:calc(60 * var(--u));
}
.fg-preview.post-type-archive-article .page-head h1,
.fg-preview.single-article .page-head h1{margin-top:calc(32 * var(--u))}

/* ---------- лента ---------- */
.blog-index{padding-bottom:clamp(3rem,6vw,5rem)}
.bi-list{display:flex; flex-direction:column; gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1.5rem,3vw,2.4rem)}
.bi-card{display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr);
 gap:clamp(1.2rem,2.6vw,2.4rem); align-items:center;
 padding:clamp(1.1rem,2vw,1.6rem); border:1px solid rgba(128,128,128,.28); border-radius:var(--r-lg,16px)}
.bi-card:only-child,.bi-card{background:rgba(128,128,128,.06)}
.bi-card__ph{display:block; aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-md,12px); background:rgba(128,128,128,.12)}
.bi-card__ph img{width:100%; height:100%; object-fit:cover; display:block;
 transition:transform .8s cubic-bezier(.16,1,.3,1)}
.bi-card:hover .bi-card__ph img{transform:scale(1.03)}
.bi-card__body{display:flex; flex-direction:column; gap:.7rem; min-width:0}
.bi-card__meta{display:flex; flex-wrap:wrap; gap:.6rem; margin:0;
 font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#ba9137}
.bi-card h2{margin:0; font-size:clamp(1.4rem,2.4vw,2.1rem); line-height:1.15}
.bi-card h2 a{color:inherit; text-decoration:none}
.bi-card h2 a:hover{color:#ba9137}
.bi-card__ex{margin:0; font-size:.95rem; line-height:1.65; opacity:.8}
.bi-card .link-arrow{margin-top:.2rem; font-size:.78rem}
.bi-empty{margin-top:2rem; opacity:.7}

/* ---------- статья: светлая область чтения ---------- */
html[data-theme="dark"] .fg-preview.single-article .page-head,
html[data-theme="dark"] .fg-preview.single-article .ba-body{
  --paper:#ece7de; --paper-2:#e3ddd2; --paper-3:#f5f2ec;
  --on-paper:#16171b; --on-paper-2:#5c6068; --line-p:#d3cdc0;
  --amber-sm-p:#8a5a20; --steel:#5c6068;
  background:#ece7de; color:#16171b;
}
html[data-theme="dark"] .fg-preview.single-article .page-head h1{color:#16171b}
html[data-theme="dark"] .fg-preview.single-article .page-head .crumbs,
html[data-theme="dark"] .fg-preview.single-article .page-head .crumbs a,
html[data-theme="dark"] .fg-preview.single-article .ba-meta{color:#5c6068}
html[data-theme="dark"] .fg-preview.single-article .page-head .crumbs b{color:#16171b}
html[data-theme="dark"] .fg-preview.single-article .ba-text{color:#16171b}

.ba-page{position:relative}
.ba-meta{display:flex; flex-wrap:wrap; gap:.6rem; margin:0;
 font-size:.68rem; letter-spacing:.12em; text-transform:uppercase}
.ba-body{padding-bottom:clamp(3rem,7vw,6rem)}
.ba-cover{margin:0 auto; max-width:56rem}
.ba-cover img{width:100%; height:auto; display:block; border-radius:var(--r-lg,16px)}
.ba-text{margin:clamp(1.8rem,4vw,3rem) auto 0; max-width:44rem; font-size:1.02rem; line-height:1.75}
.ba-text p{margin:0 0 1.1rem}
.ba-text h2{margin:2rem 0 .8rem; font-size:1.45rem; line-height:1.25}
.ba-text h3{margin:1.6rem 0 .6rem; font-size:1.15rem}
.ba-text ul,.ba-text ol{margin:0 0 1.1rem; padding-left:1.3rem}
.ba-text li{margin-bottom:.4rem}
.ba-text blockquote{margin:1.4rem 0; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid #8a5a20; color:#5c6068}
.ba-text img{max-width:100%; height:auto; border-radius:var(--r-md,12px)}
.ba-back{margin:clamp(2rem,4vw,3rem) auto 0; max-width:44rem}

/* ---------- полоса прогресса чтения ---------- */
.ba-progress{position:fixed; inset:0 0 auto; z-index:120; height:3px;
 background:rgba(128,128,128,.22); pointer-events:none}
.ba-progress__bar{display:block; height:100%; width:100%;
 transform:scaleX(0); transform-origin:0 50%; background:#ba9137; will-change:transform}

@media(max-width:900px){
  .fg-preview.post-type-archive-article .page-head .wrap,
  .fg-preview.post-type-archive-article .blog-index > .wrap,
  .fg-preview.single-article .page-head .wrap,
  .fg-preview.single-article .ba-body > .wrap{max-width:none; padding-inline:24px}
  .fg-preview.post-type-archive-article .page-head h1,
  .fg-preview.single-article .page-head h1{margin-top:24px}
  .bi-card{grid-template-columns:1fr}
}
@media(max-width:480px){
  .fg-preview.post-type-archive-article .page-head .wrap,
  .fg-preview.post-type-archive-article .blog-index > .wrap,
  .fg-preview.single-article .page-head .wrap,
  .fg-preview.single-article .ba-body > .wrap{padding-inline:20px}
}
@media(prefers-reduced-motion:reduce){
  .ba-progress__bar{transition:none}
  .bi-card__ph img{transition:none}
}

/* ── Кнопки: поправка цветов по вариантам (21.09.2026) ───────────────────
   Предыдущий блок задавал всем кнопкам темный текст, и второстепенная
   кнопка на темном фоне («Оставить заявку») становилась нечитаемой, а
   .btn-dark на светлых страницах — темным по темному.
   Геометрия остается общей, чтобы кнопки были одного визуального веса:
   та же высота, то же скругление, тот же кружок со стрелкой. Различаются
   только заливка и цвет текста. */

/* Сбрасываем прежний безусловный темный текст. */
.fg-preview :is(.btn, .fg-button):not(.nav-cta){color:inherit !important}

/* Основная — светлая «таблетка» с желтым кружком (референс заказчика). */
.fg-preview :is(.btn-amber, .fg-button-filled):not(.nav-cta){
  background:#f5f2ec; color:#16171b !important; border-color:transparent;
}
.fg-preview :is(.btn-amber, .fg-button-filled):not(.nav-cta) > :is(i, span[aria-hidden="true"]){
  background:#ba9137; color:#16171b;
}

/* Второстепенная на темном — контурная «таблетка» со светлым текстом.
   Вес тот же: размер и кружок совпадают с основной. */
.fg-preview :is(.btn-ghost, .fg-button:not(.fg-button-filled)):not(.nav-cta){
  background:rgba(241,233,220,.10); border-color:rgba(241,233,220,.45);
  color:#f1e9dc !important;
}
.fg-preview :is(.btn-ghost, .fg-button:not(.fg-button-filled)):not(.nav-cta) > :is(i, span[aria-hidden="true"]){
  background:#ba9137; color:#16171b;
}

/* Темная кнопка на светлых страницах (шапка «Партнерам»). */
.fg-preview .btn-dark:not(.nav-cta){
  background:#16171b; color:#ece7de !important; border-color:#16171b;
}
.fg-preview .btn-dark:not(.nav-cta) > :is(i, span[aria-hidden="true"]){background:#ba9137; color:#16171b}

/* Ховер одинаковый у всех: вся кнопка желтая, кружок растворяется. */
@media(hover:hover){
  .fg-preview :is(.btn, .fg-button):not(.nav-cta):hover{
    background:#ba9137; border-color:#ba9137; color:#16171b !important;
  }
  .fg-preview :is(.btn, .fg-button):not(.nav-cta):hover > :is(i, span[aria-hidden="true"]){
    background:transparent; color:#16171b;
  }
}

/* ── Кнопки: читаемый ховер на первом экране (21.09.2026) ────────────────
   На главной второстепенную кнопку в hero перекрывало правило
   home-2026.css:36 — `.fg-home2 .h2-hero__act .fg-button:not(.fg-button-filled):hover`
   с темной заливкой. Его специфичность (0,5,0) выше общей кнопочной (0,4,0),
   поэтому фон оставался темным, а текст уже красился в темный — надпись
   пропадала. Перекрываем именно этот случай более точным селектором.
   Заливку и рамку помечаем !important: в проекте несколько слоев старых
   правил ховера, и читаемость надписи важнее их частных настроек. */
.fg-preview .fg-home2 .h2-hero__act .fg-button:not(.fg-button-filled):hover,
.fg-preview .h2-hero__act .fg-button:hover{
  background:#ba9137 !important;
  border-color:#ba9137 !important;
  color:#16171b !important;
}
.fg-preview .h2-hero__act .fg-button:hover > :is(i, span[aria-hidden="true"]){
  background:transparent; color:#16171b;
}

/* Та же страховка для остальных кнопок: на ховере фон всегда желтый,
   текст всегда темный — ни одно унаследованное правило не может оставить
   темную заливку под темной надписью. */
@media(hover:hover){
  .fg-preview :is(.btn, .fg-button):not(.nav-cta):hover{
    background:#ba9137 !important;
    border-color:#ba9137 !important;
    color:#16171b !important;
  }
}

/* ── Блог: карточка, полоса прогресса, темная полоса в статье (21.09.2026) ──

   1) Черная полоса между шапкой статьи и текстом — схлопывание отступов:
      светлый фон стоял отдельно на .page-head и .ba-body, а margin-top у
      .ba-text выходил наружу через .wrap и раздвигал блоки, показывая
      темный фон страницы. Красим всю статью целиком — щели не остается. */
html[data-theme="dark"] .fg-preview.single-article .ba-page{
  --paper:#ece7de; --paper-2:#e3ddd2; --paper-3:#f5f2ec;
  --on-paper:#16171b; --on-paper-2:#5c6068; --line-p:#d3cdc0;
  --amber-sm-p:#8a5a20; --steel:#5c6068;
  background:#ece7de; color:#16171b;
}

/* 2) Карточка в ленте: обложка по центру, заголовок и описание слева снизу,
      кнопка — справа снизу. Прежняя сетка в две колонки отменяется. */
.bi-card{
  display:flex; flex-direction:column; gap:clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:none;
  padding:clamp(1.2rem,2.4vw,2rem);
}
.bi-card__ph{
  margin:0 auto; width:min(100%,36rem); aspect-ratio:16/10;
  display:block; overflow:hidden; border-radius:var(--r-md,12px);
  background:rgba(128,128,128,.12);
}
.bi-card__ph img{width:100%; height:100%; object-fit:cover; display:block}
.bi-card__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap;
}
.bi-card__body{flex:1 1 22rem; min-width:0; display:flex; flex-direction:column; gap:.6rem}

/* Кнопка «Читать» убрана (21.09.2026): кликабельна вся карточка — ссылка
   заголовка растягивается на нее целиком, фото остается отдельной ссылкой
   под ней. Так у строки один очевидный клик вместо двух целей. */
.bi-card{position:relative; cursor:pointer; transition:background .3s, transform .5s cubic-bezier(.16,1,.3,1)}
.bi-card:hover{background:rgba(128,128,128,.12); transform:translateY(-2px)}
.bi-card__link::after{content:''; position:absolute; inset:0; z-index:2}
.bi-card__link:focus-visible::after{outline:2px solid #ba9137; outline-offset:-4px}
.bi-card:hover .bi-card__link{color:#ba9137}

/* 3) Полоса прогресса — снизу по центру, поверх статьи, с процентами.
      Была тонкой линией у верхней кромки и терялась на фоне шапки. */
.ba-progress{
  position:fixed; inset:auto auto clamp(16px,3vw,28px) 50%;
  transform:translateX(-50%);
  z-index:120; display:flex; align-items:center; gap:.75rem;
  width:auto; height:auto; padding:.6rem 1rem;
  border-radius:999px; background:rgba(22,23,27,.92); color:#f1e9dc;
  box-shadow:0 12px 32px rgba(0,0,0,.3); pointer-events:none;
}
.ba-progress__track{
  display:block; width:clamp(120px,22vw,220px); height:4px;
  border-radius:999px; background:rgba(241,233,220,.28); overflow:hidden;
}
.ba-progress__bar{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:#ba9137; will-change:transform;
}
.ba-progress__num{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  min-width:3.4em; text-align:right;
}

@media(max-width:900px){
  .bi-card__foot{flex-direction:column; align-items:stretch}
  .bi-card__btn{align-self:flex-start}
  .ba-progress{padding:.5rem .8rem; gap:.6rem}
  .ba-progress__track{width:min(42vw,160px)}
}

/* Кнопка «Читать» в ленте блога — тот же основной вариант, что на главной.
   Заодно страховка: .btn без модификатора получал светлую заливку из общего
   блока и наследованный светлый текст — надпись сливалась с кнопкой. */
.fg-preview .btn:not(.btn-amber):not(.btn-ghost):not(.btn-dark):not(.nav-cta){
  color:#16171b !important;
}
.fg-preview .bi-card__btn{align-self:flex-end}

/* Обложка в ленте блога — во всю ширину карточки, от края до края.
   Боковые поля у карточки снимаются, они остаются только у текстовой
   части; скругление обрезается самой карточкой (overflow:hidden). */
.bi-card{padding:0 0 clamp(1.2rem,2.4vw,2rem); overflow:hidden}
.bi-card__ph{
  width:100%; max-width:none; margin:0;
  aspect-ratio:16/7; border-radius:0;
}
.bi-card__foot{padding-inline:clamp(1.2rem,2.4vw,2rem)}
@media(max-width:900px){
  .bi-card__ph{aspect-ratio:16/10}
}

/* ── Типографика статьи блога (21.09.2026) ───────────────────────────────
   Заголовок статьи — по центру, вместе со строкой даты под ним: иначе
   центрованный заголовок повисает над прижатым влево текстом.
   Крошки остаются слева, они служебные. */
.fg-preview.single-article .page-head h1{text-align:center}
.fg-preview.single-article .ba-meta{justify-content:center}

/* Подзаголовки внутри текста — IBM Plex Mono, крупнее и жирнее.
   По умолчанию все заголовки берут узкий акцидентный --f-dis (Condens Bold),
   поэтому семейство переопределяем явно. */
.fg-preview .ba-text :is(h2, h3){
  font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  font-weight:700;
  letter-spacing:-.01em;
}
.fg-preview .ba-text h2{
  margin:2.4rem 0 1rem;
  font-size:clamp(1.45rem, 2.4vw, 1.9rem);
  line-height:1.3;
}
.fg-preview .ba-text h3{
  margin:1.9rem 0 .7rem;
  font-size:clamp(1.15rem, 1.8vw, 1.4rem);
  line-height:1.35;
}

/* ── Статья блога: крошки по центру + матовая шкала (21.09.2026) ──────────
   Крошки центруются вместе с заголовком и строкой даты — на этом сайте
   вся шапка статьи идет одной осью. */
.fg-preview.single-article .page-head .crumbs{justify-content:center}

/* Шкала прогресса — матовое стекло, как у шапки на главной. Повторяем прием
   из блока «Матированное стекло» в theme.css: прозрачность только у
   подложки, текст остается плотным. Статья светлая, поэтому берем светлый
   вариант. Значения ниже работают и без backdrop-filter: подложка тогда
   плотная, читаемость та же. */
.ba-progress{
  background:rgba(245,242,236,.94);
  color:#16171b;
  border:1px solid rgba(83,57,26,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px rgba(0,0,0,.12);
}
.ba-progress__track{background:rgba(22,23,27,.16)}
.ba-progress__bar{background:#b78b53}
.ba-progress__num{color:#53391a}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ba-progress{
    background:rgba(245,242,236,.76);
    -webkit-backdrop-filter:blur(20px) saturate(125%);
    backdrop-filter:blur(20px) saturate(125%);
  }
}

/* Карточка блога: поля слева и справа одной величины и поменьше прежних.
   Задаем одним свойством, чтобы они не могли разойтись, и убираем возможные
   собственные отступы у текстовой колонки. */
.bi-card__foot{padding-inline:clamp(1rem, 1.6vw, 1.5rem)}
.bi-card__body{padding:0; margin:0}
.bi-card__body :is(h2, p){margin-left:0; margin-right:0}

/* ── Кнопки: единый вид по референсу «Все проекты» (21.09.2026) ──────────
   Заказчик свёл все кнопки к одному виду: тёмная «таблетка» со светлым
   текстом, тонкой рамкой и жёлтым кружком-стрелкой справа. Этот же вид
   теперь и у кнопки в шапке. Заливка сплошная, а не полупрозрачная:
   кнопка встречается и на светлых секциях (CTA-полоса каталога и проектов),
   где полупрозрачная тёмная подложка выцветала бы.
   Правила идут после прежних блоков и перекрывают их целиком. */
.fg-preview :is(.btn, .fg-button, .nav-cta){
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  gap:calc(20 * var(--u));
  padding:calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(28 * var(--u));
  min-height:calc(56 * var(--u));
  background:#26272a !important;
  color:#f1e9dc !important;
  border:1px solid rgba(241,233,220,.28) !important;
  transition:background .25s var(--e), color .25s var(--e), border-color .25s var(--e);
}
.fg-preview :is(.btn, .fg-button, .nav-cta) > :is(i, span[aria-hidden="true"]){
  display:grid; place-items:center; flex:none;
  width:calc(40 * var(--u)); height:calc(40 * var(--u));
  border-radius:50%;
  background:#ba9137; color:#16171b;
  font-style:normal; line-height:1;
  transition:background .25s var(--e), color .25s var(--e);
}
/* Кнопка шапки мельче остальных — она в одной строке с меню. */
.fg-preview .nav-cta{
  min-height:calc(44 * var(--u));
  gap:calc(14 * var(--u));
  padding:calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u));
}
.fg-preview .nav-cta > i{width:calc(32 * var(--u)); height:calc(32 * var(--u))}

@media(hover:hover){
  .fg-preview :is(.btn, .fg-button, .nav-cta):hover{
    background:#ba9137 !important; color:#16171b !important; border-color:#ba9137 !important;
  }
  .fg-preview :is(.btn, .fg-button, .nav-cta):hover > :is(i, span[aria-hidden="true"]){
    background:#16171b; color:#ba9137;
  }
}
.fg-preview :is(.btn, .fg-button, .nav-cta):focus-visible{outline:3px solid #ba9137; outline-offset:3px}

/* ── CTA-полоса: воздух между заголовком и кнопками ──────────────────────
   Было calc(30 * var(--u)) на десктопе и 24px на мобильной — заголовок
   почти прилипал к кнопкам. */
.fg-preview .cta-band .cb-in{gap:clamp(2.2rem, 4.5vw, 3.6rem)}
.fg-preview .cta-band .cb-act{gap:clamp(.9rem, 1.8vw, 1.4rem)}
@media(max-width:900px){
  .fg-preview .cta-band .cb-in{gap:2.2rem}
  .fg-preview .cta-band .cb-act{gap:.9rem}
}

/* ── Иконки соцсетей в шапке ─────────────────────────────────────────── */
.nav-social{display:flex; align-items:center; gap:calc(10 * var(--u))}
.nav-soc{
  display:grid; place-items:center;
  width:calc(34 * var(--u)); height:calc(34 * var(--u));
  border-radius:50%; color:inherit;
  transition:background .2s var(--e), color .2s var(--e);
}
.nav-soc svg{display:block; width:calc(20 * var(--u)); height:calc(20 * var(--u))}
@media(hover:hover){
  .nav-soc:hover{background:#ba9137; color:#16171b}
}
.nav-soc:focus-visible{outline:2px solid #ba9137; outline-offset:2px}
.nav-social--mm{gap:1rem; margin-top:1rem}
.nav-social--mm .nav-soc{width:2.75rem; height:2.75rem}
.nav-social--mm .nav-soc svg{width:1.4rem; height:1.4rem}

@media(max-width:900px){
  /* В узкой шапке телефон и меню скрыты — иконки тоже, они остаются
     в мобильном меню. */
  .fg-preview .nav > .nav-right > .nav-social{display:none}
}

/* ── Кнопки: перебиваем правила, которые грузятся позже (21.09.2026) ─────
   Две причины, по которым прошлый блок не сработал целиком:
   1) radius.css и home-2026.css подключаются ПОСЛЕ theme.css, поэтому
      скругление 8u и отступы hero-кнопок побеждали при равной специфичности;
   2) в самом theme.css есть правило тёмной темы
      `html[data-theme="dark"] .fg-preview :is(.fg-button-filled, ...)`
      с color:#171819!important — его специфичность (0,3,1) выше, чем у
      селектора без префикса, поэтому текст оставался тёмным на тёмном.
   Поэтому здесь тот же префикс html[data-theme="dark"] и !important. */
html[data-theme="dark"] .fg-preview :is(.btn, .fg-button, .nav-cta),
.fg-preview :is(.btn, .fg-button, .nav-cta){
  border-radius:999px !important;
  background:#26272a !important;
  color:#f1e9dc !important;
  border:1px solid rgba(241,233,220,.28) !important;
}
html[data-theme="dark"] .fg-preview :is(.btn, .fg-button, .nav-cta) > :is(i, span[aria-hidden="true"]){
  background:#ba9137 !important; color:#16171b !important;
}

/* Hero: home-2026.css задаёт свои отступы, из-за них кнопки разной высоты
   и кружок не помещается. Приводим обе к общему размеру. */
html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero__act .fg-button,
html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero__act .fg-button:not(.fg-button-filled){
  padding:calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(28 * var(--u)) !important;
  min-height:calc(56 * var(--u)) !important;
  background:#26272a !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  justify-content:space-between !important;
}

@media(hover:hover){
  html[data-theme="dark"] .fg-preview :is(.btn, .fg-button, .nav-cta):hover,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero__act .fg-button:hover{
    background:#ba9137 !important; color:#16171b !important; border-color:#ba9137 !important;
  }
  html[data-theme="dark"] .fg-preview :is(.btn, .fg-button, .nav-cta):hover > :is(i, span[aria-hidden="true"]){
    background:#16171b !important; color:#ba9137 !important;
  }
}

/* ── Три правки (21.09.2026) ────────────────────────────────────────────

   1. Текст кнопок. figma.css:200 задаёт `.fg-preview .cta-band .btn{color:#53391a}`,
      а theme.css:24 — `color:#171819!important` для .cta-band .btn-amber.
      Берём максимальную специфичность и !important, чтобы надпись была
      светлой на тёмной таблетке при любом порядке подключения файлов. */
html[data-theme="dark"] .fg-preview .cta-band :is(.btn, .btn-amber, .btn-ghost, .btn-dark),
html[data-theme="dark"] .fg-preview :is(.btn, .btn-amber, .fg-button, .fg-button-filled, .nav-cta),
html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero__act :is(.fg-button, .fg-button-filled){
  color:#f1e9dc !important;
  background:#26272a !important;
  border:1px solid rgba(241,233,220,.28) !important;
  border-radius:999px !important;
}
html[data-theme="dark"] .fg-preview .cta-band :is(.btn, .btn-amber, .btn-ghost) > :is(i, span[aria-hidden="true"]){
  background:#ba9137 !important; color:#16171b !important;
}
@media(hover:hover){
  html[data-theme="dark"] .fg-preview .cta-band :is(.btn, .btn-amber, .btn-ghost, .btn-dark):hover,
  html[data-theme="dark"] .fg-preview :is(.btn, .btn-amber, .fg-button, .fg-button-filled, .nav-cta):hover{
    background:#ba9137 !important; color:#16171b !important; border-color:#ba9137 !important;
  }
}

/* 2. CTA-полоса: ровно 60 пикселей между текстом и кнопками. */
.fg-preview .cta-band .cb-in{gap:60px !important}
@media(max-width:900px){ .fg-preview .cta-band .cb-in{gap:60px !important} }

/* 3. Шапка: телефон наезжал на пункты меню. Пунктов стало пять, плюс
      иконки соцсетей — правая группа перестала помещаться. Даём шапке
      явный зазор, разрешаем меню сжиматься и убираем лишнее на узких
      экранах: сначала иконки, потом телефон. */
.fg-preview .nav{gap:calc(24 * var(--u))}
.fg-preview .nav-links{flex:0 1 auto; min-width:0; gap:clamp(.9rem, 1.7vw, 2.2rem); white-space:nowrap}
.fg-preview .nav-right{flex:none; gap:calc(14 * var(--u))}
.fg-preview .nav-tel{white-space:nowrap}
@media(max-width:1500px){ .fg-preview .nav > .nav-right > .nav-social{display:none} }
@media(max-width:1280px){ .fg-preview .nav-tel{display:none} }

/* ── Чёрное на чёрном: добиваем специфичность (21.09.2026) ───────────────
   theme.css:24 — `html[data-theme="dark"] .fg-preview :is(.fg-button-filled,
   .cta-band .btn-amber){color:#171819!important}`. Внутри :is() специфичность
   считается по самому «тяжёлому» аргументу, а это `.cta-band .btn-amber` —
   два класса. Итог (0,4,1), выше моих прежних (0,3,1), поэтому заполненные
   кнопки оставались с тёмной надписью.
   Дублируем класс в селекторе: это не меняет, что именно выбирается, но
   поднимает вес до (0,5,1) и снимает спор окончательно. */
html[data-theme="dark"] .fg-preview .fg-button-filled.fg-button-filled.fg-button-filled,
html[data-theme="dark"] .fg-preview .btn-amber.btn-amber.btn-amber,
html[data-theme="dark"] .fg-preview .btn.btn.btn,
html[data-theme="dark"] .fg-preview .fg-button.fg-button.fg-button,
html[data-theme="dark"] .fg-preview .nav-cta.nav-cta.nav-cta{
  background:#26272a !important;
  color:#f1e9dc !important;
  border:1px solid rgba(241,233,220,.28) !important;
  border-radius:999px !important;
}
html[data-theme="dark"] .fg-preview .fg-button-filled.fg-button-filled.fg-button-filled > :is(i, span[aria-hidden="true"]),
html[data-theme="dark"] .fg-preview .btn-amber.btn-amber.btn-amber > :is(i, span[aria-hidden="true"]),
html[data-theme="dark"] .fg-preview .btn.btn.btn > :is(i, span[aria-hidden="true"]),
html[data-theme="dark"] .fg-preview .fg-button.fg-button.fg-button > :is(i, span[aria-hidden="true"]),
html[data-theme="dark"] .fg-preview .nav-cta.nav-cta.nav-cta > i{
  background:#ba9137 !important; color:#16171b !important;
}
@media(hover:hover){
  html[data-theme="dark"] .fg-preview .fg-button-filled.fg-button-filled.fg-button-filled:hover,
  html[data-theme="dark"] .fg-preview .btn-amber.btn-amber.btn-amber:hover,
  html[data-theme="dark"] .fg-preview .btn.btn.btn:hover,
  html[data-theme="dark"] .fg-preview .fg-button.fg-button.fg-button:hover,
  html[data-theme="dark"] .fg-preview .nav-cta.nav-cta.nav-cta:hover{
    background:#ba9137 !important; color:#16171b !important; border-color:#ba9137 !important;
  }
}

/* Лента блога: 120px от нижней кромки шапки до заголовка.
   Шапка фиксированная, поэтому её высоту (calc(73 * var(--u)), figma.css:7)
   прибавляем к отступу — иначе 120px отсчитывались бы от верха окна. */
.fg-preview.post-type-archive-article .page-head{
  padding-top:calc(73 * var(--u) + 120px);
}
@media(max-width:900px){
  /* На узком экране шапка 68px (figma.css:134). */
  .fg-preview.post-type-archive-article .page-head{padding-top:calc(68px + 120px)}
}

/* Карточка блога: картинка слева, текст справа (21.09.2026).
   Отменяет прежнюю раскладку «обложка сверху во всю ширину». */
.bi-card{
  display:grid;
  grid-template-columns:minmax(0, clamp(18rem, 36%, 28rem)) minmax(0, 1fr);
  align-items:stretch;
  gap:0;
  padding:0;
  overflow:hidden;
}
.bi-card__ph{
  width:100%; height:100%; margin:0;
  aspect-ratio:auto; min-height:clamp(15rem, 24vw, 22rem);
  border-radius:0;
}
.bi-card__ph img{width:100%; height:100%; object-fit:cover; display:block}
.bi-card__foot{
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  gap:clamp(1rem, 2vw, 1.6rem);
  padding:clamp(1.4rem, 2.6vw, 2.2rem);
}
.bi-card__body{flex:0 1 auto}
.bi-card__btn{align-self:flex-end}

@media(max-width:900px){
  /* Узкий экран: картинка сверху, текст под ней. */
  .bi-card{grid-template-columns:1fr}
  .bi-card__ph{min-height:0; aspect-ratio:16/10}
  .bi-card__btn{align-self:flex-start}
}

/* ── Шапка: телефон не должен наезжать на меню ни на одной ширине ────────
   Пунктов пять, плюс телефон, три иконки и кнопка — на 1440 это уже впритык.
   Раньше я разрешил меню сжиматься (min-width:0), но пункты стоят nowrap:
   контейнер ужимался, а текст вылезал за его границы — отсюда наложение.
   Теперь меню не сжимается, а лишнее убирается по ступеням, с запасом. */
.fg-preview .nav{gap:calc(24 * var(--u)); flex-wrap:nowrap}
.fg-preview .nav-links{flex:0 0 auto; min-width:auto; gap:clamp(1rem, 1.7vw, 2.2rem); white-space:nowrap}
.fg-preview .nav-right{flex:0 0 auto; gap:calc(14 * var(--u))}
.fg-preview .nav-tel{white-space:nowrap}
.fg-preview .logo{flex:0 0 auto}

@media(max-width:1600px){
  /* первыми уходят иконки — они продублированы в мобильном меню */
  .fg-preview .nav > .nav-right > .nav-social{display:none}
}
@media(max-width:1400px){
  /* затем телефон — он есть в мобильном меню и в подвале */
  .fg-preview .nav-tel{display:none}
}
@media(max-width:1200px){
  .fg-preview .nav-links{gap:1rem; font-size:calc(12 * var(--u))}
}

/* ── Карточки сегментов в «Решениях»: заголовки IBM Plex Mono ───────────
   По умолчанию все заголовки берут узкий акцидентный Condens Bold —
   задаём семейство явно, крупнее и жирнее. */
.fg-preview .sol-card h3{
  font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  font-weight:700;
  font-size:clamp(1.15rem, 1.7vw, 1.45rem);
  line-height:1.3;
  letter-spacing:-.01em;
}

/* Подписи карточек проектов — IBM Plex Mono, крупнее и жирнее.
   По умолчанию заголовки берут узкий Condens Bold. */
.fg-preview .sol-prj__card h3{
  font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  font-weight:700;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.35;
  letter-spacing:-.01em;
}

/* Кнопка «Все проекты»: прижата вправо, по правому краю крайней карточки
   (у шапки секции и у сетки один контейнер, поэтому края совпадают). */
.fg-preview .sol-all-btn{margin-left:auto; align-self:center}
.fg-preview #sol-projects .sec-head{align-items:center}
@media(max-width:900px){
  .fg-preview .sol-all-btn{margin-left:0; align-self:flex-start}
}

/* Подписи карточек проектов — IBM Plex Mono, крупнее и жирнее.
   По умолчанию заголовки берут узкий Condens Bold. */
.fg-preview .sol-prj__card h3{
  font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  font-weight:700;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.35;
  letter-spacing:-.01em;
}

/* Кнопка «Все проекты»: прижата вправо, по правому краю крайней карточки
   (у шапки секции и у сетки один контейнер, поэтому края совпадают). */
.fg-preview .sol-all-btn{margin-left:auto; align-self:center}
.fg-preview #sol-projects .sec-head{align-items:center}
@media(max-width:900px){
  .fg-preview .sol-all-btn{margin-left:0; align-self:flex-start}
}

/* Заголовки карточек историй в ленте «Проекты» — IBM Plex Mono вместо
   узкого Condens Bold, крупнее и жирнее. */
.fg-preview .blog-row__body h2,
.fg-preview .blog-row__body h2 a{
  font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  font-weight:700;
  letter-spacing:-.01em;
}
.fg-preview .blog-row__body h2{
  font-size:clamp(1.2rem, 1.9vw, 1.6rem);
  line-height:1.3;
}

/* Карточка блога: кнопка «Читать» по левой направляющей текста и ровно
   в 60px под описанием. Зазор задаётся gap контейнера — в нём всего два
   элемента, поэтому это именно расстояние «текст → кнопка». */
.bi-card__foot{gap:60px}
.bi-card__btn{align-self:flex-start}
@media(max-width:900px){
  .bi-card__foot{gap:40px}
}

/* Описание выбранной категории каталога — под фильтром. */
.chips-desc{
  margin:1rem 0 0;
  max-width:70ch;
  font-size:.92rem;
  line-height:1.6;
  color:var(--on-paper-2, #c4baaa);
}
.chips-desc[hidden]{display:none}
@media(max-width:700px){
  .chips-desc{font-size:.86rem; margin-top:.8rem}
}

/* Карточка блога: кнопка «Читать» в одной строке с заголовком, справа.
   Раньше она стояла отдельным блоком под описанием — отсюда провал
   по вертикали. */
.bi-card__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.2rem, 3vw, 2.5rem);
}
.bi-card__row h2{margin:0; min-width:0}
.bi-card__foot{gap:clamp(.7rem, 1.4vw, 1rem)}
.bi-card__btn{flex:none; align-self:center}
@media(max-width:900px){
  .bi-card__row{flex-direction:column; align-items:flex-start; gap:1rem}
}

/* ── CTA-полоса: 60px между заголовком и кнопками (21.09.2026) ───────────
   Прежняя правка не срабатывала: .cb-in берет display:flex из pages.css, а
   на ленте блога этот файл не подключается (она сознательно осталась вне
   pages-контекста, чтобы быть темной). Без flex свойство gap ни на что не
   влияло. Задаем раскладку здесь, не завися от pages.css. */
.fg-preview .cta-band .cb-in{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:60px !important;
}
.fg-preview .cta-band .cb-act{display:flex; flex-wrap:wrap; align-items:center}


/* ── «Карта + отзывы» одной плитой (21.09.2026) ──────────────────────────
   Было: карта прямоугольная и прижата к краю экрана, светлая панель рядом
   со своим скруглением — на стыке торчали темные уголки, снизу карта и
   панель обрывались по-разному. Теперь пара работает как одна плита: общие
   боковые поля, нулевой зазор, скругления только по внешнему периметру.
   Лента отзывов обрывалась на середине карточки — край гасится градиентом,
   чтобы прокрутка читалась как прокрутка, а не как обрезка. */
.fg-preview .fg-live-map .geo-grid.has-rev{
  gap:0; padding:0; align-items:stretch;
}
.fg-preview .fg-live-map .geo-grid.has-rev .geo-mapwrap{
  border-radius:0; border-left:0; border-right:0;
}
.fg-preview .fg-live-map .geo-grid.has-rev .geo-reviews--side{
  border-radius:0;
}
.fg-preview .fg-live-map .geo-grid.has-rev .geo-rev-track{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 3.5rem),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 3.5rem),transparent);
}
@media(max-width:1000px){
  .fg-preview .fg-live-map .geo-grid.has-rev{padding:0 var(--sp-24)}
  .fg-preview .fg-live-map .geo-grid.has-rev .geo-mapwrap{border-radius:var(--r-lg)}
  .fg-preview .fg-live-map .geo-grid.has-rev .geo-reviews--side{border-radius:var(--r-lg)}
}

/* Светлая полоса «Почему выбирают нас»: поля были больше, чем сам контент,
   из-за чего блок читался как пустой лист. Ужимаем вертикальный ритм. */
html[data-theme="dark"] .fg-preview .h2-why{padding-block:clamp(1.8rem,2.8vw,2.8rem)}
.fg-preview .h2-why .h2-why__grid{margin-top:clamp(1.2rem,1.8vw,1.8rem)}

/* ── Каталог: карточки категорий с переворотом (21.09.2026) ──────────────
   На /catalog/ видны только категории. Наведение переворачивает карточку
   и показывает описание на желтом фоне; клик уводит на страницу категории
   с подходящими дверьми (архив таксономии project_category). */
.cat-cards{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(1rem, 2vw, 1.6rem);
  margin-top:clamp(1.5rem, 3vw, 2.5rem);
}
.cat-card{
  display:block; aspect-ratio:1 / 1; perspective:1200px;
  color:inherit; text-decoration:none;
}
.cat-card__inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
@media(hover:hover){
  .cat-card:hover .cat-card__inner{transform:rotateY(180deg)}
}
.cat-card:focus-visible .cat-card__inner,
.cat-card:focus-within .cat-card__inner{transform:rotateY(180deg)}
.cat-card:focus-visible{outline:3px solid #ba9137; outline-offset:4px}

.cat-card__face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.6rem;
  padding:clamp(1.1rem, 2.2vw, 1.8rem);
  border:1px solid rgba(241,233,220,.22);
  border-radius:var(--r-lg, 16px);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  overflow:hidden;
}
.cat-card__face--front{background:#26272a; color:#f1e9dc}
.cat-card__face--back{
  transform:rotateY(180deg);
  background:#ba9137; color:#16171b; border-color:#ba9137;
  justify-content:space-between;
}
.cat-card__n{font-size:.7rem; letter-spacing:.14em; color:#ba9137; margin-bottom:auto}
.cat-card__name{
  font-family:IBM Plex Mono, ui-monospace, monospace; font-weight:700;
  font-size:clamp(1.1rem, 1.7vw, 1.45rem); line-height:1.25;
}
.cat-card__count{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7}
.cat-card__desc{font-size:.92rem; line-height:1.55}
.cat-card__go{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:IBM Plex Mono, ui-monospace, monospace;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.cat-card__go i{font-style:normal}

@media(max-width:1100px){ .cat-cards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media(max-width:600px){
  .cat-cards{grid-template-columns:1fr}
  /* На тач-устройствах наведения нет: карточка не квадратная, описание
     видно сразу, тап уводит на страницу категории. */
  .cat-card{aspect-ratio:auto}
  .cat-card__inner{transform:none !important}
  .cat-card__face{position:static; height:auto}
  .cat-card__face--back{transform:none; margin-top:.6rem}
}
@media(prefers-reduced-motion:reduce){
  .cat-card__inner{transition:none}
}

/* ── Карточки категорий: нормальный размер (21.09.2026) ──────────────────
   aspect-ratio на элементе сетки не дал высоты, карточки схлопнулись в
   маленькие квадраты. Размер задается явно: ширина колонки через auto-fit
   и своя минимальная высота — так он не зависит от того, как браузер
   разрешит пропорцию. */
.cat-cards{
  grid-template-columns:repeat(auto-fit, minmax(clamp(260px, 21vw, 360px), 1fr)) !important;
  gap:clamp(1.2rem, 2vw, 2rem) !important;
}
.cat-card{
  width:100% !important;
  aspect-ratio:auto !important;
  min-height:clamp(300px, 26vw, 420px) !important;
  height:auto;
}
.cat-card__inner{min-height:inherit}
.cat-card__face{padding:clamp(1.4rem, 2.4vw, 2.2rem)}
.cat-card__name{font-size:clamp(1.3rem, 2vw, 1.8rem)}
.cat-card__desc{font-size:clamp(.95rem, 1.2vw, 1.05rem)}
@media(max-width:600px){
  .cat-card{min-height:0 !important}
}

/* Карта и светлая полоса стыкуются без темного разрыва (21.09.2026):
   зазор между секциями задает gap у .fg-site, поэтому здесь он гасится
   отрицательным отступом именно у этой пары. */
.fg-preview .fg-home2 .h2-why{
  margin-top:calc(-2 * var(--sp-section) / 3);
  margin-bottom:calc(-2 * var(--sp-section) / 3);
}

/* Карточка-приглашение в светлой панели отзывов чернела при наведении:
   site.css задает a.geo-revcard:hover{background:var(--ink-3)}, а в светлом
   блоке переопределялся только вариант [data-geo-focus] (21.09.2026). */
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews a.geo-revcard:hover,
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews a.geo-revcard:focus-visible,
html[data-theme="dark"] .fg-preview .fg-geography .geo-reviews a.geo-revcard.is-selected{
  background:#f5f2ec;
}

/* Бейдж MAX в кружке соцсетей: своей иконки у мессенджера нет (21.09.2026). */
.nav-soc__txt{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.06em;line-height:1}
.nav-social--mm .nav-soc__txt{font-size:.62rem}

/* ── Каталог: карточки категорий как в «Проектах» (21.09.2026) ───────────
   Отменяет прежний вариант с переворотом: теперь это обычная карточка —
   крупное фото сверху, под ним название, описание и ссылка. Обложка —
   реальный кадр двери из этой же категории. */
.cat-cards{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(clamp(260px, 21vw, 340px), 1fr)) !important;
  gap:clamp(1.4rem, 2.4vw, 2.4rem) !important;
  margin-top:clamp(1.5rem, 3vw, 2.5rem);
}
.cat-card{
  display:flex !important; flex-direction:column; gap:1rem;
  width:100% !important; min-height:0 !important; aspect-ratio:auto !important;
  perspective:none; color:inherit; text-decoration:none;
}
.cat-card__inner{display:contents}
.cat-card__ph{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3 / 4; border-radius:var(--r-lg, 16px);
  background:rgba(128,128,128,.12);
}
.cat-card__ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.cat-card:hover .cat-card__ph img{transform:scale(1.03)}
.cat-card__badge{
  position:absolute; left:.9rem; top:.9rem; z-index:1;
  padding:.3rem .65rem; border-radius:999px;
  background:rgba(16,17,18,.72); color:#ba9137;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
}
.cat-card__body{display:flex; flex-direction:column; gap:.55rem}
.cat-card__name{
  font-family:IBM Plex Mono, ui-monospace, monospace; font-weight:700;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem); line-height:1.3;
}
.cat-card:hover .cat-card__name{color:#ba9137}
.cat-card__desc{font-size:.92rem; line-height:1.6; opacity:.78}
.cat-card__go{
  margin-top:.2rem; display:inline-flex; align-items:center; gap:.5rem;
  font-family:IBM Plex Mono, ui-monospace, monospace;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#ba9137;
}
.cat-card__go i{font-style:normal}
/* Прежние правила переворота больше не нужны. */
.cat-card__face{position:static !important; transform:none !important; border:0 !important; padding:0 !important; background:none !important}
@media(prefers-reduced-motion:reduce){ .cat-card__ph img{transition:none} }

/* Карточки контактов на «О компании» (21.09.2026): адрес и телефон набраны
   узким Condens в 1.15–1.45rem и рядом с моноширинным текстом читались
   мельче всего на странице. Поднимаем кегль, описание выравниваем с
   остальным текстом, карточки перестают растягиваться по высоте. */
.about-cards{align-items:start}
.about-cards .info-card{gap:.7rem}
.about-cards .info-card .geo-lbl{margin-bottom:.4rem}
.about-cards .info-card .geo-addr{font-size:clamp(1.6rem,2.5vw,2.1rem); line-height:1.15}
.about-cards .info-card .geo-note{font-size:1rem; line-height:1.65}
.about-cards .info-card .geo-mgr{font-size:.7rem}
.about-cards .info-card .link-arrow{font-size:.84rem}
.about-page .about-sec .about-cards{margin-top:clamp(1rem,2vw,1.7rem)}

/* Каталог категорий: 120px между сеткой карточек и следующим блоком.
   figma.css:176 обнуляет нижнее поле у .fg-catalog .cat, поэтому карточки
   упирались в CTA-полосу вплотную. */
.fg-preview .cat-cats{padding-bottom:120px}
@media(max-width:900px){ .fg-preview .cat-cats{padding-bottom:64px} }

/* ── «О компании»: иерархия внутри карточек (21.09.2026) ─────────────────
   Было непонятно: подпись-рубрика мелкая, главная строка (адрес, телефон)
   набрана узким акцидентным шрифтом и визуально мельче обычного текста, а
   в карточке без главной строки самым крупным оказывался абзац. Задаем
   три явных уровня: рубрика → главная строка → пояснение. */
.fg-preview.page-template-about-v2 .about-cards .info-card{
  gap:.8rem; padding:clamp(1.4rem, 2.4vw, 2rem);
}
.fg-preview.page-template-about-v2 .about-cards .geo-lbl{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:.75; margin:0;
}
.fg-preview.page-template-about-v2 .about-cards .geo-addr{
  font-family:IBM Plex Mono, ui-monospace, monospace;
  font-weight:700; font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.4; letter-spacing:-.01em; margin:0;
}
.fg-preview.page-template-about-v2 .about-cards .geo-addr a{color:inherit}
.fg-preview.page-template-about-v2 .about-cards .geo-note{
  font-size:.92rem; line-height:1.65; margin:0; opacity:.8;
}
.fg-preview.page-template-about-v2 .about-cards .geo-mgr{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.65; margin:0;
}
.fg-preview.page-template-about-v2 .about-cards .link-arrow{
  margin-top:.2rem; font-size:.78rem; letter-spacing:.1em;
}

/* «О компании»: заголовки разделов набраны узким Condens и на странице
   выглядели непропорционально крупно рядом с моноширинным текстом.
   Уменьшаем — страница читается как документ, а не как афиша. */
.fg-preview.page-template-about-v2 .about-sec .sec-head h2{
  font-size:clamp(1.9rem, 3.2vw, 2.9rem);
  line-height:1.05;
}
.fg-preview.page-template-about-v2 .page-head h1{
  font-size:clamp(2.4rem, 5.4vw, 4.4rem);
}

/* ── «О компании»: строгая привязка к левой линии шапки (21.09.2026) ─────
   Логотип стоит по левому полю .nav: max-width 1920px по центру и поле
   calc(60 * var(--u)) (figma.css:7). Повторяем это для всех контейнеров
   страницы, с !important — иначе базовый .wrap (max-width 1440px и свое
   поле) местами перебивает и строки расходятся. */
.fg-preview.page-template-about-v2 .page-head > .wrap,
.fg-preview.page-template-about-v2 .about-page > .wrap,
.fg-preview.page-template-about-v2 .about-toc,
.fg-preview.page-template-about-v2 .about-sec,
.fg-preview.page-template-about-v2 .cta-band > .wrap{
  max-width:1920px !important;
  margin-inline:auto !important;
  padding-inline:calc(60 * var(--u)) !important;
}

/* Заголовки узкого Condens — в полтора раза крупнее. */
.fg-preview.page-template-about-v2 .about-sec .sec-head h2{
  font-size:clamp(2.85rem, 4.8vw, 4.35rem);
}
.fg-preview.page-template-about-v2 .page-head h1{
  font-size:clamp(3.6rem, 8.1vw, 6.6rem);
}

@media(max-width:900px){
  .fg-preview.page-template-about-v2 .page-head > .wrap,
  .fg-preview.page-template-about-v2 .about-page > .wrap,
  .fg-preview.page-template-about-v2 .about-toc,
  .fg-preview.page-template-about-v2 .about-sec,
  .fg-preview.page-template-about-v2 .cta-band > .wrap{
    max-width:none !important; padding-inline:24px !important;
  }
  .fg-preview.page-template-about-v2 .about-sec .sec-head h2{font-size:2.4rem}
  .fg-preview.page-template-about-v2 .page-head h1{font-size:3rem}
}
@media(max-width:480px){
  .fg-preview.page-template-about-v2 .page-head > .wrap,
  .fg-preview.page-template-about-v2 .about-page > .wrap,
  .fg-preview.page-template-about-v2 .about-toc,
  .fg-preview.page-template-about-v2 .about-sec,
  .fg-preview.page-template-about-v2 .cta-band > .wrap{padding-inline:20px !important}
}

/* ── Главная: новые блоки по референсу (21.09.2026) ──────────────────────
   Подбор по параметрам, витрина каталога и полоса помощи с цифрами.
   Существующие секции не трогаем — они только переставлены по порядку. */

/* 4. Подбор по параметрам */
.fg-home2 .h2-pick{padding:0 var(--h2-pad)}
.h2-pick__grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.2rem, 2.4vw, 2rem); margin-top:var(--sp-head, 3rem);
  align-items:stretch;
}
.h2-pick__form{
  display:flex; flex-direction:column; gap:clamp(1.2rem, 2.2vw, 1.8rem);
  padding:clamp(1.4rem, 2.6vw, 2.2rem);
  border:1px solid rgba(241,233,220,.16); border-radius:var(--r-lg, 16px);
  background:#1c1d1e;
}
.h2-pick__row{display:flex; flex-direction:column; gap:.8rem}
.h2-pick__lbl{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6}
.h2-pick__opts{display:flex; flex-wrap:wrap; gap:.6rem}
.h2-pick__opt{
  display:inline-flex; align-items:center; padding:.6rem 1rem;
  border:1px solid rgba(241,233,220,.24); border-radius:999px;
  background:#26272a; color:#f1e9dc; text-decoration:none;
  font-family:IBM Plex Mono, ui-monospace, monospace; font-size:.8rem;
  transition:background .2s, border-color .2s, color .2s;
}
@media(hover:hover){
  .h2-pick__opt:hover{background:#ba9137; border-color:#ba9137; color:#16171b}
}
.h2-pick__note{margin:0; font-size:.9rem; line-height:1.6; opacity:.7; max-width:60ch}
.h2-pick__act{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:auto}
.h2-pick__promo{
  display:flex; flex-direction:column; gap:.9rem; justify-content:center;
  padding:clamp(1.6rem, 3vw, 2.6rem);
  border-radius:var(--r-lg, 16px);
  background:linear-gradient(148deg, #2a2b2d, #17181a);
  border:1px solid rgba(186,145,55,.35);
}
.h2-pick__promo-ttl{
  font-family:IBM Plex Mono, ui-monospace, monospace; font-weight:700;
  font-size:clamp(1.2rem, 1.8vw, 1.6rem); line-height:1.25; color:#ba9137;
}
.h2-pick__promo p{margin:0; font-size:.95rem; line-height:1.65; opacity:.82}

/* 5. Витрина каталога */
.fg-home2 .h2-top{padding:0 var(--h2-pad)}
.h2-top__head{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.h2-top__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1rem, 2vw, 1.6rem); margin-top:var(--sp-head, 3rem);
}
.h2-top__card{display:flex; flex-direction:column; gap:.7rem; color:inherit; text-decoration:none}
.h2-top__ph{
  display:block; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--r-lg, 16px); background:#1c1d1e;
}
.h2-top__ph img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.h2-top__card:hover .h2-top__ph img{transform:scale(1.03)}
.h2-top__name{
  font-family:IBM Plex Mono, ui-monospace, monospace; font-weight:700;
  font-size:1rem; line-height:1.3;
}
.h2-top__card:hover .h2-top__name{color:#ba9137}
.h2-top__spec{font-size:.75rem; letter-spacing:.06em; opacity:.6}

/* 10. Помощь в выборе и цифры */
.fg-home2 .h2-help{padding:0 var(--h2-pad)}
.h2-help__band{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem, 3vw, 3rem); flex-wrap:wrap;
  padding:clamp(1.8rem, 3.4vw, 3rem);
  border-radius:var(--r-lg, 16px);
  background:linear-gradient(120deg, #2a2b2d, #17181a);
  border:1px solid rgba(241,233,220,.14);
}
.h2-help__copy h2{margin:0 0 .6rem; font-size:clamp(1.5rem, 2.8vw, 2.4rem); line-height:1.1}
.h2-help__copy p{margin:0; font-size:.98rem; line-height:1.6; opacity:.8; max-width:52ch}
.h2-help__act{display:flex; flex-wrap:wrap; gap:.8rem}
.h2-help__stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  margin-top:clamp(1.2rem, 2.4vw, 2rem);
  background:rgba(241,233,220,.14);
  border:1px solid rgba(241,233,220,.14); border-radius:var(--r-lg, 16px); overflow:hidden;
}
.h2-help__stats > div{
  display:flex; flex-direction:column; gap:.45rem;
  padding:clamp(1.2rem, 2.2vw, 1.8rem); background:#1c1d1e;
}
.h2-help__stats b{
  font-family:IBM Plex Mono, ui-monospace, monospace; font-weight:700;
  font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1; color:#ba9137;
}
.h2-help__stats span{font-size:.85rem; line-height:1.5; opacity:.7}

@media(max-width:1000px){
  .h2-pick__grid{grid-template-columns:1fr}
  .h2-top__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .h2-help__stats{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(max-width:600px){
  .h2-top__grid{grid-template-columns:1fr}
  .h2-help__stats{grid-template-columns:1fr}
  .h2-help__act .fg-button,.h2-pick__act .fg-button{width:100%; justify-content:space-between}
}

/* ── Кнопки по референсу: прямоугольные, без кружка (21.09.2026) ─────────
   Заказчик сменил ориентир: вместо «таблетки» с круглой стрелкой —
   прямоугольная кнопка с малым скруглением, основная залита акцентом,
   второстепенная контурная. Стрелка-бейдж убирается.
   Селекторы с утроенным классом — чтобы перебить прежние правила кнопок
   в этом же файле и правило theme.css:24 с более высокой специфичностью. */
html[data-theme="dark"] .fg-preview .btn.btn.btn,
html[data-theme="dark"] .fg-preview .btn-amber.btn-amber.btn-amber,
html[data-theme="dark"] .fg-preview .btn-ghost.btn-ghost.btn-ghost,
html[data-theme="dark"] .fg-preview .btn-dark.btn-dark.btn-dark,
html[data-theme="dark"] .fg-preview .fg-button.fg-button.fg-button,
html[data-theme="dark"] .fg-preview .fg-button-filled.fg-button-filled.fg-button-filled,
html[data-theme="dark"] .fg-preview .nav-cta.nav-cta.nav-cta{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:4px !important;
  min-height:0 !important;
  padding:.95rem 1.7rem !important;
  gap:.6rem !important;
  font-family:IBM Plex Mono, ui-monospace, monospace !important;
  font-size:.72rem !important; font-weight:500 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  line-height:1.2 !important;
  border:1px solid transparent !important;
  transition:background .2s, color .2s, border-color .2s !important;
}
/* Круглый бейдж со стрелкой в этом варианте не нужен. */
html[data-theme="dark"] .fg-preview :is(.btn, .fg-button, .nav-cta) > :is(i, span[aria-hidden="true"]){
  display:none !important;
}

/* Основная — заливка акцентом, тёмный текст. */
html[data-theme="dark"] .fg-preview .btn-amber.btn-amber.btn-amber,
html[data-theme="dark"] .fg-preview .btn-dark.btn-dark.btn-dark,
html[data-theme="dark"] .fg-preview .fg-button-filled.fg-button-filled.fg-button-filled,
html[data-theme="dark"] .fg-preview .nav-cta.nav-cta.nav-cta{
  background:#ba9137 !important; color:#16171b !important; border-color:#ba9137 !important;
}
/* Второстепенная — контур на тёмном. */
html[data-theme="dark"] .fg-preview .btn-ghost.btn-ghost.btn-ghost,
html[data-theme="dark"] .fg-preview .fg-button.fg-button.fg-button:not(.fg-button-filled){
  background:transparent !important; color:#f1e9dc !important;
  border-color:rgba(241,233,220,.45) !important;
}
@media(hover:hover){
  html[data-theme="dark"] .fg-preview .btn-amber.btn-amber.btn-amber:hover,
  html[data-theme="dark"] .fg-preview .btn-dark.btn-dark.btn-dark:hover,
  html[data-theme="dark"] .fg-preview .fg-button-filled.fg-button-filled.fg-button-filled:hover,
  html[data-theme="dark"] .fg-preview .nav-cta.nav-cta.nav-cta:hover{
    background:#a37f2e !important; border-color:#a37f2e !important; color:#16171b !important;
  }
  html[data-theme="dark"] .fg-preview .btn-ghost.btn-ghost.btn-ghost:hover,
  html[data-theme="dark"] .fg-preview .fg-button.fg-button.fg-button:not(.fg-button-filled):hover{
    background:rgba(241,233,220,.10) !important; border-color:#ba9137 !important; color:#f1e9dc !important;
  }
}
/* Варианты выбора в подборщике — той же формы, что кнопки. */
.h2-pick__opt{border-radius:4px !important}

/* ── Новый логотип-локап (22.09.2026) ────────────────────────────────────
   Слово VIRTUS теперь входит в картинку, поэтому текстовый дубль рядом
   прячем — иначе слово читалось бы дважды. */
.logo .logo-img{display:block; height:clamp(22px, 2.1vw, 30px); width:auto}
.logo span{display:none !important}
.foot-brand .logo .logo-img{height:clamp(26px, 2.4vw, 34px)}
.fg-preview .nav .logo{width:auto !important; gap:0}
@media(max-width:900px){ .logo .logo-img{height:24px} }
@media(max-width:480px){ .logo .logo-img{height:20px} }

/* Логотип — без подложки. Файл прозрачный, но под знаком проступала
   светлая плашка; снимаем фон, рамку, тень и поля и у ссылки, и у самой
   картинки, чтобы источник не имел значения. */
.fg-preview .nav .logo,
.fg-preview .foot-brand .logo,
.fg-preview .logo,
.fg-preview .logo .logo-img{
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

/* ── Первый экран: без затемнения кадра (22.09.2026) ─────────────────────
   Поверх фотографии лежала градиентная шторка .h2-hero__scrim — она
   гасила левую часть снимка почти в ноль (до 92% черноты). Заказчик
   попросил убрать затемнение: шторка становится прозрачной.
   Правило с !important — skin-2026.css подключается последним и задаёт
   свой градиент, в том числе внутри медиазапроса. */
html[data-theme="dark"] .fg-preview .h2-hero__scrim,
body.fg-preview .h2-hero__scrim{
  background:none !important;
  background-image:none !important;
}
html[data-theme="dark"] .fg-preview .h2-hero__photo img{filter:none !important}

/* ── Первый экран: фото на всю высоту, козырёк в кадре (23.09.2026) ──────
   1) Светлая полоса внизу — это фон страницы (--sk-bg:#f4f5f7 в skin-2026):
      hero занимал min(94vh,880px) и до нижней кромки экрана не доходил.
      Растягиваем на всю высоту окна. svh — чтобы на мобильных адресная
      строка не срезала низ кадра.
   2) Кадр кропается по вертикали (снимок шире контейнера), поэтому точку
      кадрирования поднимаем к верху — тогда виден козырёк над дверью. */
body.fg-preview .h2-hero,
html[data-theme="dark"] .fg-preview .h2-hero{
  min-height:100vh !important;
  min-height:100svh !important;
}
body.fg-preview .h2-hero__photo img,
html[data-theme="dark"] .fg-preview .h2-hero__photo img{
  object-position:50% 14% !important;
}

/* ── Первый экран: кадр целиком, дверь ниже (23.09.2026) ─────────────────
   При object-fit:cover снимок шире контейнера и обрезался по вертикали на
   ~17%: либо козырёк, либо ступени — вместе не помещались. Показываем кадр
   целиком (contain). Поля по бокам на широких экранах сливаются с фоном:
   углы самой фотографии почти чёрные (#000308, #010101), под них и
   подобран фон секции. */
body.fg-preview .h2-hero,
html[data-theme="dark"] .fg-preview .h2-hero{
  background:#04070b !important;
}
body.fg-preview .h2-hero__photo,
html[data-theme="dark"] .fg-preview .h2-hero__photo{background:#04070b !important}
body.fg-preview .h2-hero__photo img,
html[data-theme="dark"] .fg-preview .h2-hero__photo img{
  object-fit:contain !important;
  object-position:50% 50% !important;
}

/* ── Первый экран начинается под шапкой (23.09.2026) ─────────────────────
   Шапка фиксированная и лежала поверх кадра — верх фотографии был под ней.
   Сдвигаем секцию вниз на высоту шапки и на столько же уменьшаем её
   высоту, чтобы первый экран по-прежнему заканчивался ровно у нижней
   кромки окна. Значения высоты — те же, что у .nav в figma.css. */
body.fg-preview .h2-hero,
html[data-theme="dark"] .fg-preview .h2-hero{
  --vt-nav-h:calc(73 * var(--u));
  margin-top:var(--vt-nav-h) !important;
  min-height:calc(100svh - var(--vt-nav-h)) !important;
}
@media(max-width:900px){
  body.fg-preview .h2-hero,
  html[data-theme="dark"] .fg-preview .h2-hero{--vt-nav-h:68px}
}
@media(max-width:480px){
  body.fg-preview .h2-hero,
  html[data-theme="dark"] .fg-preview .h2-hero{--vt-nav-h:60px}
}

/* ── Первый экран: кадр во всю ширину, дверь целиком (23.09.2026) ────────
   Отменяет contain из предыдущей правки: он показывал снимок целиком, но
   давал чёрные поля слева и справа. Возвращаем заполнение по ширине —
   полей нет. Точка кадрирования по центру: обрезка делится поровну между
   верхом и низом, полотно двери при этом остаётся в кадре целиком. */
body.fg-preview .h2-hero__photo img,
html[data-theme="dark"] .fg-preview .h2-hero__photo img{
  object-fit:cover !important;
  object-position:50% 50% !important;
}

/* Первый экран: точка кадрирования поднята к верху снимка — кадр
   опускается, над дверью открывается козырёк и запас пространства.
   Обрезка при этом уходит вниз, на ступени. (23.09.2026) */
body.fg-preview .h2-hero__photo img,
html[data-theme="dark"] .fg-preview .h2-hero__photo img{
  object-position:50% 22% !important;
}

/* ── Первый экран: затемнение только слева, под текстом (23.09.2026) ─────
   Ранее шторку убрали целиком, но в нижней левой части кадра подсвеченные
   кусты — мелкие подписи на них не читались. Возвращаем градиент, но он
   гасит только левую колонку с текстом и полностью сходит на нет к двери,
   поэтому сам снимок остаётся светлым. Цвет взят от фона секции. */
body.fg-preview .h2-hero__scrim,
html[data-theme="dark"] .fg-preview .h2-hero__scrim{
  background:linear-gradient(100deg,
    rgba(4,7,11,.90) 0%,
    rgba(4,7,11,.82) 28%,
    rgba(4,7,11,.52) 48%,
    rgba(4,7,11,.18) 65%,
    rgba(4,7,11,0) 80%) !important;
}
@media(max-width:900px){
  /* На узком экране текст идёт во всю ширину — шторка вертикальная. */
  body.fg-preview .h2-hero__scrim,
  html[data-theme="dark"] .fg-preview .h2-hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,7,11,.86) 0%,
      rgba(4,7,11,.72) 45%,
      rgba(4,7,11,.86) 100%) !important;
  }
}

/* Первый экран: преимущества набираем жирнее — на подсвеченных кустах
   тонкое начертание плыло. Подписи заодно чуть светлее. (23.09.2026) */
body.fg-preview .h2-usp b,
html[data-theme="dark"] .fg-preview .h2-usp b{
  font-weight:800 !important;
}
body.fg-preview .h2-usp span,
html[data-theme="dark"] .fg-preview .h2-usp span{
  font-weight:600 !important;
  color:rgba(255,255,255,.88) !important;
}

/* ── Первый экран: заголовок мельче, затемнение только под текстом ───────
   (23.09.2026)
   1) Заголовок занимал до половины ширины и наезжал на окно на снимке —
      уменьшаем кегль, строка становится короче.
   2) Прежняя шторка тянулась до 80% ширины и гасила сам портал. Сжимаем
      её к левому краю: к 46% ширины она уже полностью прозрачна, поэтому
      дверь, подсветка и стена остаются яркими. */
body.fg-preview .h2-hero h1,
body.fg-preview .fg-block .h2-hero h1,
html[data-theme="dark"] .fg-preview .h2-hero h1{
  font-size:clamp(1.85rem, 3.3vw, 2.95rem) !important;
  line-height:1.06 !important;
}
body.fg-preview .h2-hero__scrim,
html[data-theme="dark"] .fg-preview .h2-hero__scrim{
  background:linear-gradient(97deg,
    rgba(4,7,11,.88) 0%,
    rgba(4,7,11,.74) 18%,
    rgba(4,7,11,.42) 31%,
    rgba(4,7,11,.14) 40%,
    rgba(4,7,11,0) 48%) !important;
}
@media(max-width:900px){
  body.fg-preview .h2-hero__scrim,
  html[data-theme="dark"] .fg-preview .h2-hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,7,11,.84) 0%,
      rgba(4,7,11,.62) 40%,
      rgba(4,7,11,.84) 100%) !important;
  }
}

/* ── Главная кнопка первого экрана — заметнее (23.09.2026) ───────────────
   Кнопка тонула в пёстром фоне: глухая заливка без объёма, мелкий кегль.
   Увеличиваем размер и добавляем тёплое свечение с тенью — фирменный цвет
   при этом не меняем. Растёт только кнопка в hero, остальные как были. */
body.fg-preview .h2-hero__act .fg-button-filled.fg-button-filled.fg-button-filled,
body.fg-preview .h2-hero__act .btn-amber.btn-amber.btn-amber,
html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button-filled.fg-button-filled.fg-button-filled{
  padding:1.3rem 2.6rem !important;
  font-size:.86rem !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  border-radius:6px !important;
  box-shadow:0 16px 40px rgba(186,145,55,.42), 0 2px 0 rgba(255,255,255,.18) inset !important;
  transition:transform .2s, box-shadow .2s, background .2s !important;
}
@media(hover:hover){
  body.fg-preview .h2-hero__act .fg-button-filled.fg-button-filled.fg-button-filled:hover,
  body.fg-preview .h2-hero__act .btn-amber.btn-amber.btn-amber:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 22px 52px rgba(186,145,55,.55) !important;
  }
}
/* Вторая кнопка рядом — чуть крупнее, чтобы пара смотрелась ровно. */
body.fg-preview .h2-hero__act .fg-button.fg-button.fg-button:not(.fg-button-filled){
  padding:1.3rem 2.2rem !important;
  font-size:.8rem !important;
}
@media(max-width:600px){
  body.fg-preview .h2-hero__act .fg-button.fg-button.fg-button{
    width:100% !important; justify-content:center !important;
  }
}

/* ── AI-блок: новый кадр и мягкое затемнение (23.09.2026) ────────────────
   Фон секции задаётся в skin-2026.css через переменную --fg-ai-bg, а
   поверх лежит шторка ::before плотностью до 82% — снимок почти не
   читался. Ставим свой кадр и ослабляем шторку: она остаётся только под
   текстом слева, справа кадр открыт. */
body.fg-preview #ai.fg-ai{
  background-image:url("../img/ai-door-2026-09.jpg") !important;
  background-position:72% 50% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
body.fg-preview #ai.fg-ai::before{
  background:linear-gradient(90deg,
    rgba(10,11,13,.80) 0%,
    rgba(10,11,13,.55) 32%,
    rgba(10,11,13,.18) 52%,
    rgba(10,11,13,.06) 70%,
    rgba(10,11,13,.10) 100%) !important;
}
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{background-position:62% 50% !important}
  body.fg-preview #ai.fg-ai::before{
    background:linear-gradient(180deg,
      rgba(10,11,13,.78) 0%,
      rgba(10,11,13,.5) 45%,
      rgba(10,11,13,.78) 100%) !important;
  }
}

/* ── AI-блок: дверь целиком (23.09.2026) ─────────────────────────────────
   Снимок вертикальный (1086×1448), а блок широкий, поэтому заполнение по
   размеру блока увеличивало кадр в разы — в него попадал только фрагмент
   полотна. Теперь высота кадра равна высоте блока, ширина — сколько нужно
   по пропорции, и он прижат вправо: дверь видна целиком, слева остаётся
   тёмное поле под текст.
   Левая кромка снимка растушёвана градиентом поверх, чтобы не было
   вертикального стыка. Отдельная шторка ::before больше не нужна. */
body.fg-preview #ai.fg-ai{
  background-color:#0a0b0d !important;
  background-image:
    linear-gradient(90deg,
      #0a0b0d 0%,
      #0a0b0d 46%,
      rgba(10,11,13,.72) 57%,
      rgba(10,11,13,.18) 70%,
      rgba(10,11,13,0) 80%),
    url("../img/ai-door-2026-09.jpg") !important;
  background-size:100% 100%, auto 100% !important;
  background-position:left center, right center !important;
  background-repeat:no-repeat, no-repeat !important;
}
body.fg-preview #ai.fg-ai::before{background:none !important}

@media(max-width:900px){
  /* На узком экране кадр уходит фоном во всю ширину, текст поверх. */
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg, rgba(10,11,13,.84) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.88) 100%),
      url("../img/ai-door-2026-09.jpg") !important;
    background-size:100% 100%, cover !important;
    background-position:center, 60% 50% !important;
  }
}

/* ── Первый экран: текст по центру кадра, одинаково на всех ширинах ──────
   (23.09.2026)
   Колонка с текстом растягивалась на всю высоту секции: skin-2026 ставит
   .h2-hero{align-items:stretch} и распределяет три группы через
   space-between. Из-за этого при смене высоты окна заголовок уезжал вверх,
   а подписи вниз, и их уровень относительно окна на снимке плавал.
   Теперь блок собран по вертикальному центру и высоту секции не тянет —
   на любой ширине он стоит на одном уровне, совпадающем с освещённым
   проёмом на фотографии. */
body.fg-preview .h2-hero,
html[data-theme="dark"] .fg-preview .h2-hero{
  align-items:center !important;
}
body.fg-preview .h2-hero__inner,
html[data-theme="dark"] .fg-preview .h2-hero__inner{
  flex:0 1 auto !important;
  align-self:center !important;
  justify-content:center !important;
  padding-block:clamp(1.5rem, 5vh, 4rem) !important;
}
body.fg-preview .h2-hero__main,
html[data-theme="dark"] .fg-preview .h2-hero__main{
  justify-content:center !important;
  gap:clamp(1.2rem, 2.6vh, 2.2rem) !important;
}

/* ── AI-блок: дверь и проём видны целиком (23.09.2026) ───────────────────
   Разбор: правая колонка блока — стеклянная панель формы с заливкой
   rgba(14,16,20,.62) и размытием, а кадр за ней был маленьким: при высоте
   блока ~560px вертикальный снимок занимал по ширине всего ~420px и почти
   полностью уходил под панель. Отсюда ощущение чёрного блока.
   Делаем блок выше — кадр растёт пропорционально; панель формы осветляем,
   чтобы дверь читалась сквозь неё; левую шторку сводим на нет раньше. */
body.fg-preview #ai.fg-ai{
  background-image:
    linear-gradient(90deg,
      #0a0b0d 0%,
      #0a0b0d 34%,
      rgba(10,11,13,.55) 44%,
      rgba(10,11,13,.12) 53%,
      rgba(10,11,13,0) 62%),
    url("../img/ai-door-2026-09-v2.jpg") !important;
  background-size:100% 100%, auto 100% !important;
  background-position:left center, 88% center !important;
}
body.fg-preview #ai.fg-ai .fg-ai-copy{
  min-height:clamp(520px, 66vh, 820px) !important;
}
body.fg-preview #ai.fg-ai .fg-ai-form{
  background:rgba(14,16,20,.34) !important;
  -webkit-backdrop-filter:blur(6px) saturate(115%) !important;
  backdrop-filter:blur(6px) saturate(115%) !important;
}
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.5) 45%, rgba(10,11,13,.88) 100%),
      url("../img/ai-door-2026-09-v2.jpg") !important;
    background-size:100% 100%, cover !important;
    background-position:center, 55% 50% !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-copy{min-height:clamp(420px, 56vh, 620px) !important}
}

/* ── AI-блок: кадр слева, форма справа (23.09.2026) ──────────────────────
   Снимок был прижат вправо и уходил под стеклянную панель формы.
   Переносим его к левому краю — туда, где заголовок и кнопка, — а правую
   половину заливаем ровным тёмным, чтобы поля формы читались.
   Над самим кадром лежит умеренная шторка: без неё белый заголовок на
   светлом дереве двери не читается. */
body.fg-preview #ai.fg-ai{
  background-image:
    linear-gradient(90deg,
      rgba(10,11,13,.66) 0%,
      rgba(10,11,13,.62) 26%,
      rgba(10,11,13,.86) 40%,
      #0a0b0d 50%,
      #0a0b0d 100%),
    url("../img/ai-door-2026-09-v2.jpg") !important;
  background-size:100% 100%, auto 100% !important;
  background-position:left center, left center !important;
}
body.fg-preview #ai.fg-ai .fg-ai-form{
  background:rgba(10,11,13,.86) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.6) 42%, rgba(10,11,13,.9) 100%),
      url("../img/ai-door-2026-09-v2.jpg") !important;
    background-size:100% 100%, cover !important;
    background-position:center, 50% 40% !important;
  }
}

/* AI-блок: заменён кадр в левой половине. Раскладка прежняя — снимок
   слева под текстом, справа тёмная панель формы. Кадр альбомный, поэтому
   по высоте блока он ложится шире прежнего вертикального. (23.09.2026) */
body.fg-preview #ai.fg-ai{
  background-image:
    linear-gradient(90deg,
      rgba(10,11,13,.66) 0%,
      rgba(10,11,13,.62) 26%,
      rgba(10,11,13,.86) 40%,
      #0a0b0d 50%,
      #0a0b0d 100%),
    url("../img/ai-door-2026-09-v4.jpg") !important;
  background-size:100% 100%, auto 100% !important;
  background-position:left center, left center !important;
}
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.6) 42%, rgba(10,11,13,.9) 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
    background-size:100% 100%, cover !important;
    background-position:center, 55% 50% !important;
  }
}

/* AI-блок: шторка слабее, кадр виден. Плотность снижена с 66% до 40%, а
   читаемость добирается мягкой тенью под текстом — она не гасит снимок,
   в отличие от сплошного затемнения. (23.09.2026) */
body.fg-preview #ai.fg-ai{
  background-image:
    linear-gradient(90deg,
      rgba(10,11,13,.44) 0%,
      rgba(10,11,13,.38) 28%,
      rgba(10,11,13,.66) 42%,
      #0a0b0d 52%,
      #0a0b0d 100%),
    url("../img/ai-door-2026-09-v4.jpg") !important;
}
body.fg-preview #ai.fg-ai .fg-ai-copy :is(h2,p,.fg-star){
  text-shadow:0 2px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6) !important;
}
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.42) 42%, rgba(10,11,13,.72) 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
  }
}

/* AI-блок: шторка ещё слабее — 22% вместо 40%. Читаемость держится
   почти целиком на тени под текстом, поэтому её усиливаем. (23.09.2026) */
body.fg-preview #ai.fg-ai{
  background-image:
    linear-gradient(90deg,
      rgba(10,11,13,.26) 0%,
      rgba(10,11,13,.20) 30%,
      rgba(10,11,13,.55) 44%,
      #0a0b0d 54%,
      #0a0b0d 100%),
    url("../img/ai-door-2026-09-v4.jpg") !important;
}
body.fg-preview #ai.fg-ai .fg-ai-copy :is(h2,p,.fg-star){
  text-shadow:0 3px 18px rgba(0,0,0,.92), 0 1px 4px rgba(0,0,0,.8) !important;
}
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg, rgba(10,11,13,.48) 0%, rgba(10,11,13,.28) 42%, rgba(10,11,13,.6) 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
  }
}

/* AI-блок: шторка почти снята — 8–12% над кадром. Дальше уменьшать
   нельзя без переноса текста: он держится только на тени. (23.09.2026) */
body.fg-preview #ai.fg-ai{
  background-image:
    linear-gradient(90deg,
      rgba(10,11,13,.12) 0%,
      rgba(10,11,13,.08) 32%,
      rgba(10,11,13,.45) 46%,
      #0a0b0d 56%,
      #0a0b0d 100%),
    url("../img/ai-door-2026-09-v4.jpg") !important;
}
body.fg-preview #ai.fg-ai .fg-ai-copy :is(h2,p,.fg-star){
  text-shadow:0 4px 22px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8) !important;
}
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg, rgba(10,11,13,.34) 0%, rgba(10,11,13,.16) 42%, rgba(10,11,13,.48) 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
  }
}

/* ── AI-блок на промежуточных ширинах (23.09.2026) ───────────────────────
   Между 900 и 1400px высота блока падает, и вертикально вписанный кадр
   превращался в узкую полоску у левого края — между ней и формой
   оставалось пустое чёрное поле. Здесь кадр заполняет свою половину
   целиком, форма получает больше ширины и меньшие поля, поэтому её
   содержимое сдвигается левее и пустота уходит. */
@media(min-width:901px) and (max-width:1400px){
  body.fg-preview #ai.fg-ai{
    background-size:100% 100%, cover !important;
    background-position:left center, 32% center !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-grid{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-form{
    padding-left:clamp(1rem, 2.2vw, 1.8rem) !important;
    padding-right:clamp(1rem, 2.2vw, 1.8rem) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-copy{
    padding-left:clamp(1.4rem, 3vw, 2.4rem) !important;
    padding-right:clamp(1.2rem, 2.4vw, 2rem) !important;
  }
}

/* ── Первый экран на узких экранах: кнопки сразу за текстом (23.09.2026) ─
   Колонка распределялась через space-between, и группа кнопок уезжала к
   нижней кромке — между преимуществами и «Создать дверь с AI» зиял
   пустой кадр. Собираем содержимое от верха с обычными интервалами. */
@media(max-width:900px){
  body.fg-preview .h2-hero__inner,
  html[data-theme="dark"] .fg-preview .h2-hero__inner{
    justify-content:flex-start !important;
    gap:clamp(1.2rem, 3vh, 2rem) !important;
  }
  body.fg-preview .h2-hero__main,
  html[data-theme="dark"] .fg-preview .h2-hero__main{
    justify-content:flex-start !important;
    flex:0 0 auto !important;
  }
  body.fg-preview .h2-hero__act,
  html[data-theme="dark"] .fg-preview .h2-hero__act{
    margin-top:clamp(1.2rem, 3vh, 2rem) !important;
    margin-bottom:0 !important;
    flex:0 0 auto !important;
  }
  body.fg-preview .h2-hero,
  html[data-theme="dark"] .fg-preview .h2-hero{
    align-items:flex-start !important;
  }
}

/* ══ AI-блок: единый свод правил (23.09.2026) ════════════════════════════
   Выше по файлу лежат восемь отдельных правок этой секции, сделанных по
   ходу обсуждения. Каждая меняла часть свойств, поэтому на разных ширинах
   складывались разные комбинации — отсюда сбитая раскладка.
   Этот блок задаёт всё заново и целиком для каждого диапазона: фон, его
   размер и положение, колонки, поля, панель формы. Он идёт последним,
   поэтому перекрывает предыдущие. Предыдущие оставлены как история —
   удалять их сейчас, когда в файле работает второй разработчик, рискованно.

   Раскладка:
     от 1401px  — две колонки поровну, кадр вписан по высоте у левого края;
     901—1400px — две колонки 0.82/1.18, кадр заполняет левую половину;
     до 900px   — одна колонка, кадр фоном во всю ширину, форма под текстом.
   ════════════════════════════════════════════════════════════════════════ */

/* ——— общее для всех ширин ——— */
body.fg-preview #ai.fg-ai{
  background-color:#0a0b0d !important;
  background-repeat:no-repeat, no-repeat !important;
}
body.fg-preview #ai.fg-ai::before{background:none !important}
body.fg-preview #ai.fg-ai .fg-ai-copy :is(h2,p,.fg-star){
  text-shadow:0 4px 22px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.9) !important;
}

/* ——— десктоп от 1401px ——— */
@media(min-width:1401px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(90deg,
        rgba(10,11,13,.12) 0%,
        rgba(10,11,13,.08) 32%,
        rgba(10,11,13,.45) 46%,
        #0a0b0d 56%,
        #0a0b0d 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
    background-size:100% 100%, auto 100% !important;
    background-position:left center, left center !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-copy{
    min-height:clamp(520px, 66vh, 820px) !important;
    padding:clamp(2.4rem,5vw,4.6rem) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-form{
    padding:clamp(1.8rem,3.4vw,3rem) !important;
    background:rgba(10,11,13,.88) !important;
    border-left:1px solid rgba(255,255,255,.12) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

/* ——— планшет и узкий десктоп 901—1400px ——— */
@media(min-width:901px) and (max-width:1400px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(90deg,
        rgba(10,11,13,.18) 0%,
        rgba(10,11,13,.14) 28%,
        rgba(10,11,13,.55) 42%,
        #0a0b0d 52%,
        #0a0b0d 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
    background-size:100% 100%, cover !important;
    background-position:left center, 32% center !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-grid{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-copy{
    min-height:clamp(420px, 56vh, 620px) !important;
    padding:clamp(1.6rem,3vw,2.6rem) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-form{
    padding:clamp(1.2rem,2.2vw,1.8rem) !important;
    background:rgba(10,11,13,.9) !important;
    border-left:1px solid rgba(255,255,255,.12) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

/* ——— до 900px: одна колонка ——— */
@media(max-width:900px){
  body.fg-preview #ai.fg-ai{
    background-image:
      linear-gradient(180deg,
        rgba(10,11,13,.34) 0%,
        rgba(10,11,13,.16) 38%,
        rgba(10,11,13,.62) 72%,
        #0a0b0d 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
    background-size:100% 100%, cover !important;
    background-position:center, 42% center !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-copy{
    min-height:clamp(320px, 46vh, 480px) !important;
    padding:clamp(1.5rem,5vw,2.4rem) !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-form{
    padding:clamp(1.4rem,5vw,2.2rem) !important;
    background:#0a0b0d !important;
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

/* ——— телефон до 600px ——— */
@media(max-width:600px){
  body.fg-preview #ai.fg-ai .fg-ai-copy,
  body.fg-preview #ai.fg-ai .fg-ai-form{padding-left:1.2rem !important; padding-right:1.2rem !important}
  body.fg-preview #ai.fg-ai .fg-ai-copy{min-height:280px !important}
}