/* Главная 2026. Новые блоки идут обычным потоком, а не по абсолютной фигма-сетке:
   так они переживают смену длины текста и количества категорий.
   Поля и радиусы берутся из общих токенов (--sp-gutter, --sp-section,
   --sp-head — зазор «шапка блока → контент», --r-*). */

.fg-home2{--h2-pad:var(--sp-gutter);--h2-line:rgba(241,233,220,.14)}
.fg-home2 .fg-block{color:#f1e9dc}

/* ── 1. Первый экран ─────────────────────────────────────────────── */
.fg-home2 .h2-hero{position:relative;min-height:calc(760 * var(--u));display:flex;align-items:flex-end;
 overflow:hidden;background:#202122}
.h2-hero__photo{position:absolute;inset:0}
.h2-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 62%;max-width:none}
/* Снимок светлый, поэтому под текстом плотная подложка, а не легкая вуаль. */
.h2-hero__scrim{position:absolute;inset:0;
 background:linear-gradient(100deg,rgba(16,17,18,.94) 0%,rgba(16,17,18,.86) 34%,rgba(16,17,18,.35) 62%,rgba(16,17,18,.12) 100%)}
/* Текст слева, кнопки колонкой справа; обе группы прижаты к низу кадра.
   Ритм левой колонки одинаковый: заголовок → лид → смыслы через 44u. */
.h2-hero__inner{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
 gap:calc(64 * var(--u));width:100%;padding:var(--sp-section) var(--h2-pad)}
.h2-hero__main{max-width:calc(820 * var(--u))}
.fg-home2 .h2-hero h1{font-size:calc(2 * var(--title-xl))}
.h2-hero__lead{margin-top:calc(44 * var(--u));max-width:calc(560 * var(--u));
 font:400 calc(18 * var(--u))/1.55 'IBM Plex Mono',monospace;color:#d6d0c5}
.h2-usp{list-style:none;margin:calc(44 * var(--u)) 0 0;padding:0;display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(36 * var(--u)) calc(44 * var(--u));max-width:calc(640 * var(--u))}
.h2-usp li{display:flex;flex-direction:column;gap:calc(8 * var(--u));
 padding-left:calc(18 * var(--u));border-left:2px solid #ba9137}
.h2-usp b{font:400 calc(18 * var(--u))/1.3 'IBM Plex Mono',monospace;color:#f1e9dc}
.h2-usp span{font:400 calc(14 * var(--u))/1.4 'IBM Plex Mono',monospace;color:#a9a294}
.h2-hero__act{display:flex;flex-direction:column;align-items:stretch;flex:0 0 auto;gap:calc(16 * var(--u))}
.fg-home2 .h2-hero__act .fg-button{justify-content:center;padding:calc(20 * var(--u)) calc(40 * var(--u));
 font-size:calc(17 * var(--u));line-height:1.2}
/* Контурная кнопка стоит на светлой части снимка — без подложки текст тонет. */
.fg-home2 .h2-hero__act .fg-button:not(.fg-button-filled){background:rgba(16,17,18,.55);backdrop-filter:blur(4px)}
.fg-home2 .h2-hero__act .fg-button:not(.fg-button-filled):hover{background:rgba(16,17,18,.75)}

/* ── 2. Категории ────────────────────────────────────────────────── */
/* Карточка — портрет 3:4, как фото дверей в карточках товара: кадр входит
   целиком, без обрезки. Марки фурнитуры (бывший блок «подборщика») — строкой
   под сеткой, чипы ручного выбора убраны как дубль этого же выбора. */
.fg-home2 .h2-cats{padding:0 var(--h2-pad)}
.h2-cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(20 * var(--u));margin-top:var(--sp-head)}
.h2-cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(4 * var(--u));
 aspect-ratio:3/4;padding:calc(24 * var(--u));border-radius:var(--r-lg);overflow:hidden;
 background:#181919;text-decoration:none;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.h2-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;
 transition:scale .8s cubic-bezier(.16,1,.3,1)}
.h2-cat__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,17,18,0) 45%,rgba(16,17,18,.85))}
.h2-cat__name{position:relative;font:400 calc(22 * var(--u))/1.2 'IBM Plex Mono',monospace;letter-spacing:.01em}
.h2-cat__count{position:relative;font:400 calc(12 * var(--u))/1.4 'IBM Plex Mono',monospace;color:#a9a294}
.h2-cat__count [aria-hidden]{color:#ba9137;opacity:0;transition:opacity .3s}
.h2-cat:hover img{scale:1.04}
.h2-cat:hover{transform:translateY(-4px)}
.h2-cat:hover .h2-cat__count [aria-hidden]{opacity:1}
.h2-cats__note{display:flex;align-items:center;justify-content:space-between;gap:calc(32 * var(--u));
 margin-top:calc(20 * var(--u));padding:calc(24 * var(--u)) calc(32 * var(--u));
 border:1px solid var(--h2-line);border-radius:var(--r-lg);background:#171819}
.h2-cats__note p{font:400 calc(14 * var(--u))/1.6 'IBM Plex Mono',monospace;color:#a9a294;max-width:calc(880 * var(--u))}
.h2-cats__note b{font-weight:400;color:#f1e9dc}
.h2-cats__note .fg-button{flex:0 0 auto;white-space:nowrap}

/* ── 4. Избранные работы ─────────────────────────────────────────── */
.fg-home2 .h2-works{padding:0 var(--h2-pad)}
.h2-works__head{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(24 * var(--u));flex-wrap:wrap}
.h2-works__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(20 * var(--u));margin-top:var(--sp-head)}
.h2-work{position:relative;display:flex;flex-direction:column;gap:calc(8 * var(--u));text-decoration:none;
 transition:transform .5s cubic-bezier(.16,1,.3,1)}
.h2-work__ph{display:block;aspect-ratio:267/333;border-radius:var(--r-lg);overflow:hidden;background:#fff}
.h2-work__ph img{width:100%;height:100%;object-fit:contain}
.h2-work__tag{position:absolute;top:calc(16 * var(--u));left:calc(16 * var(--u));
 padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:999px;background:rgba(16,17,18,.78);
 font:400 calc(11 * var(--u))/1.2 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#ba9137}
.h2-work__name{margin-top:calc(8 * var(--u));font:400 calc(17 * var(--u))/1.35 'IBM Plex Mono',monospace;letter-spacing:.01em}
.h2-work__cat{font:400 calc(12 * var(--u))/1.4 'IBM Plex Mono',monospace;color:#a9a294}
.h2-work__calc{margin-top:calc(6 * var(--u));font:400 calc(12 * var(--u))/1.4 'IBM Plex Mono',monospace;color:#ba9137}
.h2-work:hover{transform:translateY(-6px)}
/* Карточка-история (записи блога): обложка — сцена, заполняет кадр целиком. */
.h2-works__sub{margin-top:calc(14 * var(--u));max-width:calc(560 * var(--u));
 font:400 calc(14 * var(--u))/1.6 'IBM Plex Mono',monospace;color:#a9a294}
.h2-work--story .h2-work__ph{background:#181919}
.h2-work--story .h2-work__ph img{object-fit:cover}
.h2-work--story .h2-work__cat{margin-top:calc(2 * var(--u))}

/* ── 7. Производство ─────────────────────────────────────────────────
   Старые правила figma.css растягивали кадры процентами, подогнанными под
   исходные стоковые PNG (width:163.99% и т.п.) — реальные фото из цеха они
   плющили. Для живых кадров — обычный cover без искажений. */
.fg-home2 .fg-factory-image img,
.fg-home2 .fg-factory-image video{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;
 max-width:none;object-fit:cover;display:block}

/* ── 8. Почему выбирают нас ──────────────────────────────────────── */
.fg-home2 .h2-why{padding:0 var(--h2-pad)}
.h2-why__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(20 * var(--u));margin-top:var(--sp-head)}
.h2-why__item{padding:calc(28 * var(--u));border:1px solid var(--h2-line);border-radius:var(--r-lg);background:#181919}
.h2-why__item b{display:block;margin-bottom:calc(12 * var(--u));
 font:400 calc(15 * var(--u))/1.35 'IBM Plex Mono',monospace;letter-spacing:.01em;color:#f1e9dc}
.h2-why__item p{font:400 calc(13 * var(--u))/1.6 'IBM Plex Mono',monospace;color:#a9a294}

/* ── Мобильная ───────────────────────────────────────────────────── */
@media(max-width:900px){
 .fg-home2{--h2-pad:24px}
 .fg-home2 .h2-hero{min-height:0}
 /* На узком экране текст идет во всю ширину, поэтому подложка вертикальная,
    иначе мелкие подписи ложатся на светлую часть кадра. */
 .h2-hero__scrim{background:linear-gradient(180deg,rgba(16,17,18,.93) 0%,rgba(16,17,18,.88) 58%,rgba(16,17,18,.6) 100%)}
 .h2-hero__inner{display:block;padding:96px 24px 56px;max-width:none}
 .h2-hero__main{max-width:none}
 .h2-hero__lead{margin-top:24px;font-size:15px;max-width:none}
 .h2-usp{gap:16px;margin-top:32px}
 .h2-usp li{min-width:calc(50% - 8px);padding-left:12px}
 .h2-usp b{font-size:14px}.h2-usp span{font-size:12px}
 .h2-hero__act{gap:12px;margin-top:32px}
 .fg-home2 .h2-hero__act .fg-button{width:100%;justify-content:center;padding:15px 20px;font-size:14px}
 .h2-cats__grid,.h2-works__grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px}
 .h2-cat{padding:16px}
 .h2-cat__name{font-size:18px}
 .h2-cats__note{flex-direction:column;align-items:stretch;gap:16px;margin-top:12px;padding:20px}
 .h2-cats__note .fg-button{justify-content:center;white-space:normal}
 .h2-why__grid{grid-template-columns:1fr;gap:12px;margin-top:32px}
 .h2-why__item{padding:20px}
 .h2-works__head .fg-button{width:100%;justify-content:center}
 .h2-work__name{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 .h2-cat,.h2-cat img,.h2-work,.h2-work__ph img{transition:none}
}

/* Сноска под лентой отзывов: монтаж делается партнерами не во всех городах,
   поэтому оговорка стоит рядом с отзывами, где о монтаже и пишут. */
.geo-rev-note{margin-top:calc(28 * var(--u));font:400 calc(13 * var(--u))/1.6 IBM Plex Mono,monospace;color:#a9a294}
@media(max-width:900px){.geo-rev-note{margin-top:20px;font-size:12px}}

/* ── Производство (21.09.2026) ─────────────────────────────────────
   Заголовок блока — IBM Plex Mono вместо узкого Condens; моноширинный
   шире, поэтому кегль уменьшен, иначе строка не встает в кадр.
   Лента кадров из цеха притушена: съемка телефоном, шум заметен. */
.fg-home2 .fg-factory-image{position:relative}
.fg-home2 .fg-factory-image :is(img,video){filter:brightness(.58) saturate(.86) contrast(1.06)}
.fg-home2 .fg-factory-image::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(16,17,18,.3) 0%,rgba(16,17,18,.5) 55%,rgba(16,17,18,.75) 100%)}
/* Кадр-заставка блока — та же съемка телефоном, гасим так же. */
.fg-home2 .fg-factory-photo img,.fg-home2 .fg-factory-photo video{filter:brightness(.6) saturate(.88) contrast(1.05)}
.fg-home2 .fg-factory-hero .fg-photo-shade{background:linear-gradient(180deg,rgba(16,17,18,.42) 0%,rgba(16,17,18,.5) 45%,rgba(16,17,18,.78) 100%)}