/* ==== tokens.css ==== */
/* ============================================================
БОРФИ — Дизайн-система · tokens.css
Единственный источник правды по цвету, типографике, ритму,
радиусам, состояниям и движению.
Подключать первым, до borfi.css:
Значения совпадают с боевым сайтом test.borfi.ru —
новый сайт на этих токенах встанет в тот же визуальный ряд.
============================================================ */
:root{
/* ---------- 1. ЦВЕТ · ядро ----------
Три цвета несут всю систему. Пропорция на экране: ~60 / 30 / 10.
Жёлтый — лазер, а не фон: один смысловой акцент на экран. */
--yellow:#FFC828; /* доминанта, акцент-герой */
--ink:#212225; /* структура, типографика, тёмные плоскости */
--bg:#FFFFFF; /* воздух, базовая поверхность */
/* ---------- 2. ЦВЕТ · производные ----------
Только для UI-нюансов: вторичный текст, границы, штрихи иконок.
На крупной графике и плашках не применять. */
--ink-2:#0F1012; /* нажатая/наведённая тёмная поверхность */
--muted:#5F646B; /* вторичный текст на светлом */
--tertiary:#969A9E; /* полутон, подписи-заглушки */
--faint:#C2C7CC; /* текст на тёмном фоне */
--subtle:#F5F5F4; /* фон блока внутри светлой секции */
--yellow-soft:#FFF7D6; /* подложка предупреждения */
--line:rgba(33,34,37,.10); /* граница карточки, разделитель */
--line-strong:rgba(33,34,37,.18); /* граница поля ввода, активная */
--line-inverse:rgba(255,255,255,.14); /* разделитель на тёмном */
/* ---------- 3. ЦВЕТ · состояния ----------
Наведение сдвигает ФОН, а не прозрачность текста:
контраст подписи никогда не падает. */
--yellow-hover:color-mix(in oklab, var(--yellow), var(--ink) 10%);
--ink-hover:var(--ink-2);
--surface-hover:var(--subtle);
--danger:#D74C3C; /* обязательное поле, ошибка валидации */
--success:#1E8E5A; /* подтверждение отправки */
/* ---------- 4. ТИПОГРАФИКА ----------
Moula — фирменная гарнитура. Если её файлы не подключены,
стек падает на системный гротеск: см. §Шрифты в DESIGN.md.
Montserrat закреплён за цифрами, метками и эйбрау —
он даёт табличные цифры и ровный капс. */
--font-display:'Moula','Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-body:'Moula','Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-mono:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
/* Шкала кегля — текучая, привязана к ширине окна.
Верхний предел намеренно сдержанный: на больших мониторах
заголовок не должен занимать пол-экрана. */
--fs-display:clamp(32px,3.6vw,50px); /* герой первого экрана */
--fs-h1:clamp(30px,3.3vw,46px); /* заголовок секции */
--fs-h2:clamp(22px,1.9vw,26px); /* подзаголовок */
--fs-h3:18px; /* заголовок карточки */
--fs-lead:clamp(16px,1.3vw,19px); /* лид-абзац */
--fs-body:16px;
--fs-sm:14px; /* текст в карточках, меню */
--fs-xs:13px;
--fs-eyebrow:11px; /* надзаголовок, метка, капс */
--lh-tight:1.06; /* display / h1 */
--lh-heading:1.16; /* h2 / h3 */
--lh-body:1.55;
--fw-black:900; /* display, h1 */
--fw-bold:800; /* h2, названия карточек */
--fw-semibold:600; /* h3, кнопка-праймари, метки */
--fw-medium:500;
--fw-regular:400;
/* ---------- 5. РИТМ И СЕТКА ----------
Всё кратно 4. Поля страницы текучие: 20px на телефоне → 56px на десктопе. */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--pad:clamp(20px,4vw,56px); /* боковое поле страницы */
--wrap-max:1440px; /* предел ширины контента */
--section-y:clamp(56px,7vw,112px); /* вертикальный ритм секции */
--measure:62ch; /* предел длины строки текста */
/* ---------- 6. РАДИУСЫ ----------
Острые углы — только у полноформатных фото и иконок.
Всё остальное скруглено щедро. */
--r-sm:12px; /* нотис, мелкая плашка */
--r-md:16px; /* фото внутри карточки */
--r-lg:20px; /* плитка подбора */
--r-xl:24px; /* карточка, модалка, форма */
--r-2xl:32px; /* крупный блок, финальный CTA */
--r-pill:100px; /* кнопка, пилюля, поле ввода */
--r-full:50%; /* аватар, круглая кнопка */
/* ---------- 7. ТЕНИ ----------
Их нет. Совсем. Слои разделяются границей, а не размытием. */
--shadow:none;
/* ---------- 8. ДВИЖЕНИЕ ----------
Служебное, не декоративное. Реакция на нажатие быстрее,
чем появление элемента: система отвечает мгновенно. */
--ease-out:cubic-bezier(0.23,1,0.32,1); /* вход, наведение */
--ease-in-out:cubic-bezier(0.77,0,0.175,1); /* парные переходы */
--ease-drawer:cubic-bezier(0.32,0.72,0,1); /* шторки, панели */
--dur-press:160ms; /* нажатие */
--dur-hover:180ms; /* наведение */
--dur-enter:280ms; /* появление элемента */
--dur-drawer:320ms; /* шторка меню */
/* ---------- 9. СЛОИ ---------- */
--z-nav:50;
--z-sticky:40;
--z-drawer:200;
--z-modal:200;
--z-toast:220;
}
/* ============================================================
Тёмная поверхность.
Навесьте .on-dark на секцию с фоном --ink: текст, границы
и акценты переключатся на инверсные значения автоматически.
============================================================ */
.on-dark{
--bg:var(--ink);
--fg:#FFFFFF;
--muted:var(--faint);
--line:var(--line-inverse);
--line-strong:rgba(255,255,255,.22);
--surface-hover:rgba(255,255,255,.08);
background:var(--ink);
color:#FFFFFF;
}
/* ==== borfi.css ==== */
/* ============================================================
БОРФИ — Дизайн-система · borfi.css
База и компоненты. Требует tokens.css, подключённого раньше.
Классы совпадают с боевым сайтом, поэтому разметку с любой
страницы test.borfi.ru можно переносить как есть.
Три отличия от текущего сайта — намеренные, см. DESIGN.md §Изменения:
1. Наведение сдвигает фон, а не гасит текст прозрачностью.
2. У цитаты в кейсе убрана жёлтая полоса слева.
3. Нумерация 01/02/03 в блоке отличий не зашита в компонент.
============================================================ */
/* ---------- 1. БАЗА ---------- */
*{box-sizing:border-box}
html,body{
margin:0;padding:0;
background:var(--bg);color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-regular)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* ---------- 2. ТИПОГРАФИКА ---------- */
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.display{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-display);
line-height:var(--lh-tight);letter-spacing:-.01em;margin:0}
.h1{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h1);line-height:var(--lh-tight);margin:0}
.h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h2);line-height:var(--lh-heading);margin:0}
.h3{font-weight:var(--fw-semibold);font-size:var(--fs-h3);line-height:1.25;margin:0}
.lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--muted);max-width:var(--measure);margin:0}
.muted{color:var(--muted)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.accent{color:var(--yellow)}
.on-dark .accent{color:var(--yellow)}
/* ---------- 3. РАСКЛАДКА ---------- */
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--section-y) 0}
section + section{border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-6);
margin-bottom:var(--space-7);flex-wrap:wrap}
.sec-head .left{max-width:760px}
.sec-head .eyebrow{margin-bottom:14px;display:block}
.sec-head .lead{margin-top:var(--space-4)}
/* ---------- 4. ШАПКА ---------- */
.nav{position:sticky;top:0;z-index:var(--z-nav);
background:rgba(255,255,255,.86);
backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
border-bottom:1px solid var(--line);
transition:background-color 200ms ease,border-bottom-color 200ms ease;
animation:nav-in 360ms var(--ease-out) both}
.nav.scrolled{background:rgba(255,255,255,.94);border-bottom-color:rgba(33,34,37,.14)}
@keyframes nav-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-inner{display:flex;align-items:center;gap:var(--space-6);height:72px;
padding:0 var(--pad);max-width:var(--wrap-max);margin:0 auto}
.brand{display:flex;align-items:center;color:var(--ink);
transition:transform var(--dur-hover) var(--ease-out);transform-origin:left center}
.brand:active{transform:scale(.97)}
.brand svg{display:block;height:26px;width:auto;color:var(--ink)}
.nav-links{display:flex;gap:28px;font-size:var(--fs-sm);color:var(--muted)}
.nav-links a{position:relative;transition:color 160ms ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
background:currentColor;transform:scaleX(0);transform-origin:left center;
transition:transform var(--dur-enter) var(--ease-out)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);outline:none}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-phone{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink);
display:flex;align-items:center;gap:var(--space-2);margin-right:18px;white-space:nowrap}
.nav-phone svg{width:17px;height:17px;flex:0 0 auto;color:var(--muted);transition:color var(--dur-hover) ease}
.nav-phone .np-label{color:var(--muted);font-size:var(--fs-eyebrow);text-transform:uppercase}
.nav-phone .np-num{font-weight:700;color:var(--ink);text-decoration-color:transparent;
text-underline-offset:4px;transition:text-decoration-color 160ms ease}
.nav-phone:hover svg{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
.nav-phone .np-num:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px}
}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-full);
background:var(--ink);color:#fff;border:none;cursor:pointer;
align-items:center;justify-content:center;flex:0 0 auto;padding:0;
transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
.burger:hover{background:var(--ink-hover)}
.burger:active{transform:scale(.92)}
.burger svg{width:20px;height:20px;display:block;transition:transform 220ms var(--ease-out)}
body.menu-open .burger svg{transform:rotate(90deg)}
/* ---------- 5. ШТОРКА МЕНЮ ---------- */
.mobile-menu{position:fixed;inset:0;background:#fff;z-index:var(--z-drawer);
display:flex;flex-direction:column;padding:var(--space-4) var(--pad) 28px;
visibility:hidden;opacity:0;transform:translateY(-12px);
transition:opacity 200ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s linear 220ms;
will-change:opacity,transform}
.mobile-menu.open{visibility:visible;opacity:1;transform:translateY(0);
transition:opacity var(--dur-enter) var(--ease-drawer),transform var(--dur-drawer) var(--ease-drawer),visibility 0s linear 0s}
body.menu-open{overflow:hidden}
.mm-head{display:flex;align-items:center;justify-content:space-between;height:72px;margin-bottom:var(--space-2)}
.mm-head svg{height:26px;color:var(--ink)}
.mm-close{width:44px;height:44px;border-radius:var(--r-full);background:var(--ink);color:#fff;
border:none;cursor:pointer;display:grid;place-items:center;padding:0;
transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
.mm-close:hover{background:var(--ink-hover)}
.mm-close:active{transform:scale(.92)}
.mm-close svg{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.mm-close:hover svg{transform:rotate(90deg)}
.mm-links{display:flex;flex-direction:column;flex:1;margin-top:var(--space-2)}
.mm-links a{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:28px;line-height:1.1;
color:var(--ink);padding:18px 0;border-bottom:1px solid var(--line);
opacity:0;transform:translateY(10px);
transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out),background-color 160ms ease}
.mm-links a:active{background:var(--subtle)}
.mobile-menu.open .mm-links a{opacity:1;transform:translateY(0)}
.mobile-menu.open .mm-links a:nth-child(1){transition-delay:80ms,80ms,0ms}
.mobile-menu.open .mm-links a:nth-child(2){transition-delay:120ms,120ms,0ms}
.mobile-menu.open .mm-links a:nth-child(3){transition-delay:160ms,160ms,0ms}
.mobile-menu.open .mm-links a:nth-child(4){transition-delay:200ms,200ms,0ms}
.mobile-menu.open .mm-links a:nth-child(5){transition-delay:240ms,240ms,0ms}
.mobile-menu.open .mm-links a:nth-child(6){transition-delay:280ms,280ms,0ms}
.mobile-menu.open .mm-links a:nth-child(7){transition-delay:320ms,320ms,0ms}
.mm-foot{padding-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);
opacity:0;transform:translateY(10px);
transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
.mobile-menu.open .mm-foot{opacity:1;transform:translateY(0);transition-delay:360ms,360ms}
.mm-phone-lbl{font-family:var(--font-mono);font-size:var(--fs-eyebrow);text-transform:uppercase;
color:var(--muted);letter-spacing:.04em}
.mm-phone{font-family:var(--font-mono);font-size:24px;color:var(--ink);display:block;
font-weight:var(--fw-semibold);margin-top:var(--space-1)}
.mm-cta{background:var(--yellow);color:var(--ink);height:56px;border-radius:var(--r-pill);
display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:var(--fw-semibold);
width:100%;margin-top:var(--space-2);transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
.mm-cta:active{transform:scale(.97)}
.mm-cta:hover{background:var(--yellow-hover)}
/* ---------- 6. КНОПКИ И ПИЛЮЛИ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:48px;padding:0 22px;border-radius:var(--r-pill);
font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);
border:none;cursor:pointer;white-space:nowrap;
transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease,color var(--dur-hover) ease,border-color var(--dur-hover) ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--yellow);color:var(--ink);font-weight:var(--fw-semibold)}
.btn-dark{background:var(--ink);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline-light{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff}
/* Наведение сдвигает фон — подпись не теряет контраст. */
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{background:var(--yellow-hover)}
.btn-dark:hover{background:var(--ink-hover)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn-arrow{width:48px;height:48px;border-radius:var(--r-full);background:var(--ink);color:var(--yellow);
display:inline-grid;place-items:center;font-size:20px;border:none;cursor:pointer;flex:0 0 auto;
transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
.btn-arrow:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.btn-arrow:hover{background:var(--ink-hover)}}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;
border-radius:var(--r-pill);font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-medium)}
.pill-dark{background:var(--ink);color:#fff}
.pill-yellow{background:var(--yellow);color:var(--ink)}
.pill-outline{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.on-dark .pill-outline{border-color:var(--yellow);color:var(--yellow)}
/* ---------- 7. ФОРМЫ ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);
text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2);letter-spacing:.04em}
.field label .req{color:var(--danger);margin-left:var(--space-1);font-weight:700}
.field select,.field input,.field textarea{
width:100%;height:48px;padding:0 var(--space-4);
border:1px solid var(--line-strong);border-radius:var(--r-pill);
background:#fff;color:var(--ink);font-family:inherit;font-size:var(--fs-sm);
outline:none;-webkit-appearance:none;appearance:none}
.field textarea{height:auto;padding:var(--space-3) var(--space-4);border-radius:var(--r-md);
resize:vertical;min-height:80px}
.field select{padding-right:40px;background-repeat:no-repeat;background-position:right 18px center;
background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23212225' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.field select:focus,.field input:focus,.field textarea:focus{
border-color:var(--ink);outline:2px solid var(--yellow);outline-offset:2px}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.field .err{display:block;margin-top:6px;font-size:12px;color:var(--danger)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.form-note{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--muted);
text-transform:uppercase;text-align:center;margin-top:14px}
.check{display:flex;gap:10px;align-items:start;font-size:var(--fs-xs);color:var(--muted);
line-height:1.4;margin:14px 0 18px;cursor:pointer}
.check input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--ink);flex:0 0 auto}
.check a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);
text-decoration-thickness:2px;text-underline-offset:3px}
/* ---------- 8. КАРТОЧКИ И ПЛИТКИ ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--space-5)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--space-5);
display:flex;flex-direction:column;justify-content:space-between;min-height:240px;cursor:pointer;
transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.cat-card .ico{width:56px;height:56px;border-radius:18px;background:var(--subtle);
border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;
transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.cat-card .ico svg{width:30px;height:30px}
.cat-card .nm{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;
line-height:1.15;margin-top:var(--space-5)}
.cat-card .cnt{font-family:var(--font-mono);font-size:12px;color:var(--muted);
margin-top:var(--space-2);text-transform:uppercase;transition:color .2s ease}
.cat-card .arr{align-self:flex-end;width:36px;height:36px;border-radius:var(--r-full);
border:1px solid var(--line-strong);display:grid;place-items:center;font-size:16px;margin-top:auto;
transition:border-color .2s ease,color .2s ease}
.cat-foot{display:flex;justify-content:space-between;align-items:end;width:100%;margin-top:auto}
.cat-card:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-card:hover .ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--yellow)}
.cat-card:hover .cnt{color:var(--yellow)}
.cat-card:hover .arr{border-color:rgba(255,255,255,.22);color:#fff}
.selector{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7)}
.sel-tabs{display:none}
.sel-col .h2{margin-bottom:var(--space-5)}
.sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.sel-tile{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
padding:20px 88px 20px 20px;background:#fff;display:flex;flex-direction:column;gap:14px;
min-height:140px;justify-content:space-between;transition:border-color .15s ease}
.sel-tile:hover{border-color:var(--ink)}
.sel-tile .nm{font-weight:var(--fw-semibold);font-size:15px}
.sel-tile .sub{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-transform:uppercase}
.sel-tile .skus{font-family:var(--font-mono);font-size:12px;color:var(--muted);
display:flex;flex-wrap:wrap;gap:4px 8px}
.sel-tile .skus a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px;
transition:border-color .15s ease}
.sel-tile .skus a:hover{border-color:var(--ink)}
.sel-tile .tico{position:absolute;top:50%;right:14px;transform:translateY(-50%);
width:64px;height:64px;object-fit:contain;display:block;pointer-events:none}
/* ---------- 9. СЕКЦИИ ---------- */
/* герой */
.hero{background:var(--ink);color:#fff;padding:0;border-top:none}
.hero .wrap{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
.hero .eyebrow{color:var(--yellow);margin-bottom:var(--space-5);display:block}
.hero .display{color:#fff}
.hero-lead{font-size:clamp(16px,1.2vw,19px);color:var(--faint);max-width:46ch;margin:var(--space-5) 0 36px}
.hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hero-stats{display:flex;gap:28px;margin-top:var(--space-7);flex-wrap:wrap}
.hero-stat{padding-right:28px;border-right:1px solid var(--line-inverse)}
.hero-stat:last-child{border-right:none}
.hero-stat .n{font-family:var(--font-mono);font-size:30px;color:#fff;font-weight:700;line-height:1}
.hero-stat .l{font-family:var(--font-mono);font-size:12px;color:var(--faint);
margin-top:var(--space-2);text-transform:uppercase}
/* Вход первого экрана — опционально: class="hero hero-anim".
Заголовок наводится в фокус, акцентное слово загорается на бит позже,
опора подхватывается каскадом. Играет один раз при загрузке. */
@keyframes hero-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-focus-in{from{opacity:0;transform:translateY(16px);filter:blur(7px)}
to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes accent-ignite{from{color:#fff}to{color:var(--yellow)}}
.hero-anim .eyebrow{animation:hero-rise 560ms var(--ease-out) both}
.hero-anim .display{animation:hero-focus-in 720ms var(--ease-out) 90ms both;will-change:transform,opacity,filter}
.hero-anim .display .accent{animation:accent-ignite 460ms ease 660ms both}
.hero-anim .hero-lead{animation:hero-rise 600ms var(--ease-out) 260ms both}
.hero-anim .hero-actions{animation:hero-rise 600ms var(--ease-out) 340ms both}
.hero-anim .hero-stats{animation:hero-rise 600ms var(--ease-out) 420ms both}
@media (prefers-reduced-motion:reduce){
.hero-anim .eyebrow,.hero-anim .display,.hero-anim .hero-lead,
.hero-anim .hero-actions,.hero-anim .hero-stats{animation:none}
.hero-anim .display .accent{animation:none;color:var(--yellow)}
}
/* карточка-форма поверх тёмного героя */
.hero-form{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:28px;position:relative}
.hero-form .eyebrow{color:var(--muted);margin-bottom:6px;display:block}
.hero-form .ttl{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:24px;
line-height:1.1;margin:0 0 var(--space-1)}
.hero-form .sub{font-size:var(--fs-xs);color:var(--muted);margin:0 0 22px}
.hero-badge{position:absolute;top:-18px;right:-18px;width:96px;height:96px;border-radius:var(--r-full);
background:var(--yellow);color:var(--ink);display:grid;place-items:center;
font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-eyebrow);
text-align:center;line-height:1.1;text-transform:uppercase;transform:rotate(-8deg);border:2px solid var(--ink)}
/* полоса доверия */
.trust{padding:var(--space-6) 0;border-top:1px solid var(--line);border-bottom:none}
.trust .wrap{display:flex;align-items:center;gap:var(--space-7);flex-wrap:wrap;justify-content:space-between}
.trust .lbl{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--muted);
text-transform:uppercase;font-weight:var(--fw-semibold);letter-spacing:.04em}
.trust-logos{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.trust-logos .tl{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:15px;
color:var(--muted);display:flex;align-items:center;gap:var(--space-2);letter-spacing:-.01em}
.trust-logos .tl::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
/* тёмный блок отличий */
.diff-bg{background:var(--ink);color:#fff;padding:clamp(64px,8vw,128px) 0;border:none}
.diff-bg .eyebrow{color:var(--yellow);margin-bottom:var(--space-5);display:block}
.diff-bg h2{color:#fff;max-width:18ch;margin-bottom:var(--space-8)}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:start}
.diff-card{display:flex;flex-direction:column;padding:var(--space-6) 0;border-top:1px solid var(--line-inverse)}
.diff-card .dico{width:48px;height:48px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.2);
color:var(--yellow);display:grid;place-items:center;margin-bottom:var(--space-5);flex:0 0 auto}
.diff-card .dico svg{width:22px;height:22px}
.diff-card .n{font-family:var(--font-mono);font-size:12px;color:var(--yellow);
text-transform:uppercase;margin-bottom:14px;display:block}
.diff-card .nm{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:24px;
line-height:1.15;margin-bottom:14px}
.diff-card .txt{color:var(--faint);font-size:15px;line-height:var(--lh-body)}
/* кейсы */
.cases-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-4)}
.case-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;
display:flex;flex-direction:column;gap:18px;min-height:340px}
.case-card.feature{background:var(--subtle)}
.case-card .stub{flex:1;background:var(--subtle);border-radius:var(--r-md);min-height:140px;
display:grid;place-items:center;color:var(--tertiary);font-family:var(--font-mono);
font-size:12px;text-transform:uppercase;overflow:hidden}
.case-card.feature .stub{background:#fff;border:1px solid var(--line)}
.case-card .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.case-card h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;line-height:1.2;margin:0}
/* цитата без цветной полосы слева — маркируем меткой, а не декором */
.case-card .quote{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.case-card .quote-src{display:block;margin-top:var(--space-2);font-family:var(--font-mono);
font-size:11px;text-transform:uppercase;color:var(--tertiary)}
.case-card .nums-row{display:flex;gap:var(--space-6);margin-top:auto}
.case-card .num-big{font-family:var(--font-mono);font-size:36px;color:var(--ink);font-weight:700;line-height:1}
.case-card .num-big .h{background:var(--yellow);padding:0 6px;border-radius:6px}
.case-card .num-l{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--muted);
text-transform:uppercase;margin-top:var(--space-2)}
/* география / таблица-список */
.geo{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:start}
.geo-row{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;
border-bottom:1px solid var(--line)}
.geo-row:first-child{border-top:1px solid var(--line)}
.geo-row .city{font-size:15px;font-weight:var(--fw-medium)}
.geo-row .term{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-xs)}
.geo-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.geo-stat{padding:var(--space-5) var(--space-5) var(--space-5) 0;border-right:1px solid var(--line)}
.geo-stat:nth-child(2n){border-right:none;padding-left:var(--space-5);padding-right:0}
.geo-stat:nth-child(n+3){border-top:1px solid var(--line)}
.geo-stat .n{font-family:var(--font-display);font-size:48px;font-weight:var(--fw-black);
letter-spacing:-.02em;line-height:1;color:var(--ink)}
.geo-stat .l{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
color:var(--muted);margin-top:var(--space-2)}
.geo-note{margin-top:var(--space-5);font-family:var(--font-mono);font-size:12px;
text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.geo-note i{width:8px;height:8px;border-radius:var(--r-full);background:var(--yellow);display:inline-block}
/* вопросы и ответы */
.faq{display:grid;grid-template-columns:.45fr 1fr;gap:var(--space-7)}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line);padding:var(--space-5) 0;cursor:pointer}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:start;gap:var(--space-5);
font-size:17px;font-weight:var(--fw-medium);line-height:1.35}
.faq-q .icn{width:32px;height:32px;border-radius:var(--r-full);border:1px solid var(--line-strong);
display:grid;place-items:center;flex:0 0 auto;color:var(--muted);
transition:transform .2s ease,background .15s ease,border-color .15s ease,color .15s ease}
.faq-q .icn svg{width:14px;height:14px}
.faq-item.open .faq-q .icn{transform:rotate(45deg);background:var(--yellow);
border-color:var(--yellow);color:var(--ink)}
.faq-a{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:14px;
max-width:var(--measure);display:none}
.faq-item.open .faq-a{display:block}
/* финальный призыв */
.cta-block{background:var(--yellow);color:var(--ink);border-radius:var(--r-2xl);
padding:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr auto;
gap:var(--space-7);align-items:center}
.cta-block h2{font-family:var(--font-display);font-weight:var(--fw-black);
font-size:clamp(30px,2.9vw,42px);line-height:1.05;margin:0;max-width:18ch}
.cta-block .sub{font-size:var(--fs-body);margin-top:var(--space-4);max-width:48ch;line-height:var(--lh-body)}
.cta-block .acts{display:flex;flex-direction:column;gap:var(--space-3);min-width:260px}
.cta-block .acts .btn{background:var(--ink);color:#fff;justify-content:space-between;
width:100%;font-weight:var(--fw-medium);height:56px;text-align:left}
.cta-block .acts .btn svg{width:16px;height:16px}
.cta-block .acts .btn.ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
.cta-block .acts .btn:hover{background:var(--ink-hover)}
.cta-block .acts .btn.ghost:hover{background:var(--ink);color:#fff}
}
.cta-block .acts .lbl{font-family:var(--font-mono);font-size:var(--fs-eyebrow);
text-transform:uppercase;margin-top:var(--space-2)}
/* подвал */
footer{background:var(--ink);color:#fff;padding:var(--space-8) 0 var(--space-6)}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-6)}
footer h4{font-family:var(--font-mono);font-size:var(--fs-eyebrow);text-transform:uppercase;
color:var(--yellow);margin:0 0 18px;font-weight:var(--fw-semibold)}
footer .brand-l{display:block;margin-bottom:18px;color:#fff}
footer .brand-l svg{display:block;height:19px;width:auto;color:#fff}
footer .ftxt{color:var(--faint);font-size:var(--fs-sm);line-height:1.6;max-width:36ch}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
gap:10px;color:#fff;font-size:var(--fs-sm)}
footer ul a{color:#fff}
footer ul a:hover{color:var(--yellow)}
footer .bottom{margin-top:var(--space-8);padding-top:var(--space-5);
border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
color:var(--faint);font-size:12px;font-family:var(--font-mono);text-transform:uppercase;gap:var(--space-4)}
/* ---------- 10. МОДАЛЬНОЕ ОКНО ---------- */
.modal{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(33,34,37,.5);
backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;
padding:var(--space-5);overflow-y:auto;animation:mfade .15s ease}
.modal.open{display:flex}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal-bd{background:#fff;color:var(--ink);border-radius:var(--r-xl);max-width:480px;width:100%;
padding:40px;position:relative;animation:mslide .2s cubic-bezier(.22,.61,.36,1)}
@keyframes mslide{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;background:transparent;
border:none;cursor:pointer;display:grid;place-items:center;border-radius:var(--r-full);color:var(--ink);
transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
.modal-close:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.modal-close:hover{background:var(--surface-hover)}}
.modal-close svg{width:18px;height:18px}
.modal h3{font-family:var(--font-display);font-weight:var(--fw-black);font-size:26px;
line-height:1.1;margin:0 0 var(--space-3);max-width:18ch}
.modal .modal-sub{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-body);
margin:0 0 20px;max-width:42ch}
.modal .notice{font-size:var(--fs-xs);color:var(--ink);border:1px solid var(--ink);
padding:10px 14px;border-radius:var(--r-sm);margin:0 0 20px;line-height:1.4;
background:var(--yellow-soft);font-weight:var(--fw-medium)}
.modal-form .field{margin:0 0 var(--space-3)}
.modal-form .submit{width:100%;height:52px;background:var(--ink);color:#fff;border:none;
border-radius:var(--r-pill);font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
cursor:pointer;letter-spacing:.02em;text-transform:uppercase;
transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
.modal-form .submit.yellow{background:var(--yellow);color:var(--ink)}
.modal-form .submit:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
.modal-form .submit:hover{background:var(--ink-hover)}
.modal-form .submit.yellow:hover{background:var(--yellow-hover)}
}
.modal-note{font-size:var(--fs-eyebrow);color:var(--muted);text-align:center;margin:var(--space-4) 0 0;line-height:1.5}
.modal-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);
text-decoration-thickness:2px;text-underline-offset:2px}
.modal-ok{text-align:center;padding:18px 0 var(--space-2)}
.modal-ok .chk{width:64px;height:64px;border-radius:var(--r-full);background:var(--yellow);
margin:0 auto 18px;display:grid;place-items:center}
.modal-ok .chk svg{width:30px;height:30px;stroke:var(--ink);stroke-width:2.5}
.modal-ok p{font-size:var(--fs-sm);color:var(--muted);line-height:1.5;margin:0 0 22px}
body.modal-open{overflow:hidden}
/* ---------- 11. ИКОНКИ ---------- */
/* Линейный знак: контур currentColor, без заливки. */
.ico-svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:28px;height:28px}
.ico-xl{width:48px;height:48px}
/* Знак на жёлтой плашке — фирменная форма из библиотеки ikonki.html. */
.ic-tile{width:var(--tile,76px);height:var(--tile,76px);border-radius:30%;
background:var(--yellow);color:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.ic-tile svg{width:63%;height:63%;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.ic-tile-sm{--tile:56px}
.ic-tile-lg{--tile:96px}
.ic-tile-white{background:#fff}
.ic-tile-outline{background:transparent;border:1px solid var(--line-strong)}
.on-dark .ic-tile-outline{border-color:rgba(255,255,255,.24);color:#fff}
/* ---------- 11а. ПОЯВЛЕНИЕ БЛОКА ----------
Навесьте .reveal на секцию — borfi.js добавит .in, когда
блок попадёт в кадр. Один раз за визит, без повторов. */
.reveal > *{opacity:0;transform:translateY(14px);
transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.reveal.in > *{opacity:1;transform:translateY(0)}
.reveal.in > *:nth-child(2){transition-delay:90ms}
.reveal.in > *:nth-child(3){transition-delay:170ms}
.reveal.in > *:nth-child(4){transition-delay:240ms}
@media (prefers-reduced-motion:reduce){
.reveal > *{opacity:1;transform:none;transition:none}
}
/* ---------- 12. АДАПТИВ ---------- */
@media (max-width:1180px){
.cases-grid{grid-template-columns:1fr 1fr}
.case-card:first-child{grid-column:1/-1}
}
@media (max-width:1024px){
.hero .wrap{grid-template-columns:1fr;gap:40px}
.diff-grid{grid-template-columns:1fr 1fr}
.geo,.faq,.cta-block{grid-template-columns:1fr;gap:var(--space-6)}
.nav-links{display:none}
.nav-cta .btn,.nav-cta .nav-phone,.nav-cta .btn-arrow{display:none}
.burger{display:inline-flex}
}
@media (max-width:760px){
.cat-grid,.cases-grid{display:flex;grid-template-columns:none;overflow-x:auto;
scroll-snap-type:x mandatory;gap:var(--space-3);margin:0 calc(var(--pad) * -1);
padding:4px var(--pad) var(--space-2);scroll-padding-left:var(--pad);
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-grid::-webkit-scrollbar,.cases-grid::-webkit-scrollbar{display:none}
.cat-card,.case-card{flex:0 0 80vw;max-width:340px;scroll-snap-align:start;min-height:auto}
.case-card:first-child{grid-column:auto}
.selector{grid-template-columns:1fr;gap:0}
.sel-tabs{display:flex;gap:var(--space-1);background:var(--subtle);padding:5px;
border-radius:var(--r-pill);margin-bottom:var(--space-5);border:1px solid var(--line)}
.sel-tab{flex:1;padding:13px var(--space-4);border-radius:var(--r-pill);border:none;
background:transparent;font-family:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-sm);
color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease;-webkit-appearance:none}
.sel-tab.active{background:var(--ink);color:#fff}
.sel-col{display:none}
.sel-col.active{display:block}
.sel-col .h2{display:none}
.sel-tile{padding:var(--space-5) 88px var(--space-5) var(--space-5);min-height:0;gap:var(--space-4)}
.diff-grid{grid-template-columns:1fr}
footer .wrap{grid-template-columns:1fr 1fr}
.nav-phone .np-label{display:none}
.form-row{grid-template-columns:1fr}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;flex-wrap:initial}
.hero-stat{padding-right:14px}
.hero-stat:nth-child(2n){border-right:none;padding-right:0}
.geo-stats{grid-template-columns:1fr;border:none;gap:14px}
.geo-stat,.geo-stat:nth-child(2n){padding:0 0 0 20px;border:none;border-left:3px solid var(--ink)}
.geo-stat:nth-child(n+3){border-top:none}
.geo-stat .n{font-size:42px}
footer .bottom{flex-direction:column;gap:var(--space-2)}
}
@media (max-width:440px){
.sel-grid{grid-template-columns:1fr}
footer .wrap{grid-template-columns:1fr}
.nav-inner{gap:var(--space-3);height:64px}
.cta-block .acts{min-width:0}
}
/* Компактный десктоп — ноутбуки 1366×768 и экраны с малой высотой.
Меню уезжает в бургер, логотип, телефон и кнопка остаются. */
@media (min-width:1025px) and (max-height:860px),(min-width:1025px) and (max-width:1366px){
section{padding:clamp(34px,4.2vw,60px) 0}
.display{font-size:clamp(30px,3.3vw,44px)}
.h1{font-size:clamp(27px,2.9vw,40px)}
.h2{font-size:clamp(20px,2vw,26px)}
.lead{font-size:15px;line-height:1.5}
.nav-inner{height:60px}
.nav-links{display:none}
.burger{display:inline-flex}
.nav-cta{margin-left:auto}
.hero .wrap{padding-top:38px;padding-bottom:38px;gap:clamp(28px,3.4vw,48px)}
.hero-lead{font-size:15px;margin:var(--space-4) 0 var(--space-5)}
.hero-stat .n{font-size:24px}
.hero-form{padding:22px}
.hero-form .ttl{font-size:20px}
.hero-form .sub{margin:0 0 var(--space-4)}
.hero-form .field{margin-bottom:10px}
.field select,.field input{height:44px}
.field label{margin-bottom:6px}
.cat-card{min-height:200px;padding:20px}
.cat-card .nm{font-size:18px;margin-top:18px}
.cat-card .ico{width:42px;height:42px}
.sel-tile{min-height:120px;padding:18px 88px 18px 18px}
.diff-bg{padding:clamp(44px,5vw,80px) 0}
.diff-card{padding:var(--space-5) 0}
.diff-card .nm{font-size:20px}
.case-card{min-height:280px;padding:var(--space-5)}
.geo-stat .n{font-size:40px}
.cta-block{padding:clamp(36px,4vw,56px)}
.cta-block h2{font-size:clamp(28px,2.8vw,40px)}
footer{padding:var(--space-7) 0 28px}
footer .bottom{margin-top:44px}
}
/* ---------- 13. СНИЖЕННАЯ АНИМАЦИЯ ---------- */
@media (prefers-reduced-motion:reduce){
.nav{animation:none}
.nav-links a::after{transition:none}
.mobile-menu,.mobile-menu.open{transition:opacity 120ms ease,visibility 0s linear;transform:none}
.mobile-menu .mm-links a,.mobile-menu.open .mm-links a,
.mobile-menu .mm-foot,.mobile-menu.open .mm-foot{transition:opacity 120ms ease;transform:none;transition-delay:0ms}
.brand,.burger,.btn,.btn-arrow,.mm-close,.mm-cta,.modal-close,.modal-form .submit{
transition:background-color 120ms ease}
.brand:active,.burger:active,.btn:active,.btn-arrow:active,
.mm-close:active,.mm-cta:active,.modal-close:active,.modal-form .submit:active{transform:none}
.burger svg,.mm-close svg,body.menu-open .burger svg,.mm-close:hover svg{transition:none;transform:none}
}
/* ==== site.css ==== */
/* ---------- Шрифт Moula (самостоятельный хостинг, woff2 из moula-…-utc/Web-TT) ---------- */
@font-face{font-family:'Moula';src:url('/assets/fonts/Moula-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Moula';src:url('/assets/fonts/Moula-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Moula';src:url('/assets/fonts/Moula-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Moula';src:url('/assets/fonts/Moula-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Moula';src:url('/assets/fonts/Moula-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Moula';src:url('/assets/fonts/Moula-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{
--font-display:'Moula',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-body:'Moula',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-mono:'Moula',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
/* Крупнее базовые размеры: Moula визуально мельче Inter, прежние 11–13px нечитабельны */
:root{
--fs-display:clamp(36px,3.6vw,54px);
--fs-h1:clamp(34px,3.3vw,50px);
--fs-h2:clamp(26px,1.9vw,30px);
--fs-body:19px;
--fs-sm:17px;
--fs-xs:16px;
--fs-eyebrow:14px;
--fs-h3:21px;
--fs-lead:clamp(19px,1.35vw,22px);
--lh-tight:1.02;
--lh-heading:1.06;
--lh-body:1.3;
}
.pill{font-size:15px}
.field .err{font-size:15px}
.cat-card .cnt,.sel-tile .sub,.sel-tile .skus,.hero-stat .l,.diff-card .n,.geo-stat .l,.geo-note{font-size:15px}
footer .bottom{font-size:15px}
.case-card .stub{font-size:15px}
.case-card .quote-src{font-size:14px}
.mm-links a{font-size:30px}
.mm-phone{font-size:26px}
.mm-cta{font-size:17px}
.cat-card .nm{font-size:22px}
.cat-card .arr{font-size:18px}
.sel-tile .nm{font-size:17px}
.hero-stat .n{font-size:32px}
.hero-form .ttl{font-size:26px}
.trust-logos .tl{font-size:17px}
.diff-card .nm{font-size:26px}
.diff-card .txt{font-size:17px}
.case-card h3{font-size:22px}
.case-card .num-big{font-size:38px}
.geo-row .city{font-size:17px}
.geo-stat .n{font-size:50px}
.faq-q{font-size:19px}
.modal h3{font-size:28px}
.hero-lead{font-size:clamp(18px,1.2vw,21px)}
.cta-block h2{font-size:clamp(32px,2.9vw,44px)}
body{line-height:1.3}
.hero-lead{line-height:1.35}
.faq-a{line-height:1.35}
footer .ftxt{line-height:1.35}
.modal-note{line-height:1.3}
.modal-ok p{line-height:1.3}
.case-card .quote{line-height:1.3}
@media (min-width:1025px) and (max-height:860px),(min-width:1025px) and (max-width:1366px){
.display{font-size:clamp(32px,3.3vw,46px)}
.h1{font-size:clamp(29px,2.9vw,42px)}
.h2{font-size:clamp(22px,2vw,28px)}
.lead,.hero-lead{font-size:17px}
.hero-stat .n{font-size:26px}
.hero-form .ttl{font-size:22px}
.cat-card .nm{font-size:20px}
.diff-card .nm{font-size:22px}
.geo-stat .n{font-size:42px}
}
/* ============================================================
borfi.ru · site.css — надстройка над дизайн-системой.
Только то, чего нет в borfi.css: контентные блоки, каталог,
статьи, документы, формы опросных листов. Токены — из tokens.css.
============================================================ */
/* ---------- Шапка: активный пункт ---------- */
.nav-links{margin-left:auto}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{transform:scaleX(1);background:var(--yellow)}
/* атрибуты width/height (против сдвига) не фиксируют высоту адаптивных картинок */
/* нулевая специфичность (:where), чтобы любые явные правила высоты (миниатюры, фасовки, баннеры) побеждали */
:where(img[width][height]){height:auto}
/* ---------- Раскладка ---------- */
.wrap-narrow{max-width:960px}
.wrap-article{max-width:860px}
.sec-tight{padding:var(--space-5) 0}
.sec-tight + section{border-top:none}
.page-head{padding-bottom:var(--space-6)}
.page-head + .wrap + section,.page-head + section{border-top:none}
.h1-sm{font-size:clamp(26px,2.4vw,36px)}
.txt-muted{color:var(--muted);font-size:18px;line-height:1.4;margin:0 0 24px}
.note{font-family:var(--font-mono);font-size:15px;color:var(--muted);margin-top:14px;line-height:1.3}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.pills-row{display:flex;gap:8px;flex-wrap:wrap}
.pills-row .pill{height:36px;padding:0 16px;color:var(--ink);transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,border-color var(--dur-hover) ease}
.pills-row .pill-dark{color:#fff}
@media (hover:hover) and (pointer:fine){
.pills-row .pill-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
}
/* ---------- Хлебные крошки ---------- */
.crumbs{font-family:var(--font-mono);font-size:16px;color:var(--muted);margin-bottom:24px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.crumbs a{border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .15s ease,color .15s ease}
.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.crumbs i{font-style:normal;color:var(--tertiary)}
.crumbs span{color:var(--ink)}
/* ---------- Широкая фотополоса ---------- */
.band{margin:0 0 var(--space-6);border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:21/8;background:var(--subtle)}
.band img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.band{aspect-ratio:16/9;border-radius:var(--r-xl)}}
/* ---------- Карточки брендов ---------- */
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.brand-card{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;display:flex;flex-direction:column;
transition:border-color .2s ease,transform var(--dur-press) var(--ease-out)}
.brand-card img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:center bottom;display:block;background:#fff}
.brand-card .bc-body{padding:20px var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:8px;flex:1}
.brand-card .nm{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:24px;line-height:1.15}
.brand-card p{font-size:var(--fs-sm);color:var(--muted);line-height:1.3;margin:0}
.brand-card .cnt{margin-top:auto;font-family:var(--font-mono);font-size:15px;text-transform:uppercase;padding-top:8px}
@media (hover:hover) and (pointer:fine){.brand-card:hover{border-color:var(--ink)}}
.brand-card:active{transform:scale(.99)}
@media (max-width:1024px){.brand-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.brand-grid{grid-template-columns:1fr}}
/* ---------- Категории с 3D-иконкой ---------- */
.cat-card-img .thumb{width:112px;height:112px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
position:relative;display:block;overflow:hidden;transition:background-color .2s ease,border-color .2s ease}
.cat-card-img .thumb img{position:absolute;left:6%;top:6%;width:88%;height:88%;object-fit:contain}
.cat-card:hover .thumb{background:#fff;border-color:#fff}
.cat-scroll-indicator{display:none;height:3px;background:var(--line);border-radius:2px;margin-top:14px;overflow:hidden}
.cat-scroll-indicator span{display:block;height:100%;background:var(--ink);border-radius:2px;width:30%}
@media (max-width:760px){.cat-scroll-indicator{display:block}}
/* ---------- Карточки продуктов ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.prod-card{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;padding:var(--space-4);display:flex;gap:var(--space-4);
transition:border-color .2s ease,background-color .2s ease;min-height:150px}
.prod-card .thumb{flex:0 0 108px;width:108px;height:108px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);
position:relative;display:block;overflow:hidden}
.prod-card .thumb img{position:absolute;left:7%;top:7%;width:86%;height:86%;object-fit:contain}
.prod-card .pc-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.prod-card .nm{font-weight:var(--fw-semibold);font-size:19px;line-height:1.2}
.prod-card .sub{font-size:17px;color:var(--muted);line-height:1.3;margin:0}
.prod-card .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.prod-card .meta .pill{height:24px;font-size:14px;padding:0 10px}
@media (hover:hover) and (pointer:fine){.prod-card:hover{border-color:var(--ink)}}
.prod-card.hidden{display:none}
@media (max-width:1180px){.prod-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.prod-grid{grid-template-columns:1fr}.prod-card{min-height:0}}
.filter{min-width:260px}
.filter-input{width:100%;height:48px;padding:0 20px 0 44px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-family:inherit;font-size:var(--fs-sm);
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F646B' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center/18px;outline:none;-webkit-appearance:none}
.filter-input:focus{border-color:var(--ink);outline:2px solid var(--yellow);outline-offset:2px}
.filter-empty{font-family:var(--font-mono);font-size:16px;color:var(--muted);text-transform:uppercase;padding:24px 0}
/* ---------- Карточка продукта ---------- */
.prod-hero{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:start}
.prod-media{border:1px solid var(--line);border-radius:var(--r-2xl);background:#fff;aspect-ratio:1;overflow:hidden;position:sticky;top:96px}
.prod-media img{position:absolute;left:10%;top:10%;width:80%;height:80%;object-fit:contain}
.prod-info .eyebrow{display:block;margin-bottom:14px}
.prod-info .lead{margin-top:16px}
.prod-info .hero-actions{margin-top:24px}
.kv{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0 8px}
.kv .k{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted);flex:0 0 96px}
.kv .v{font-size:18px;font-weight:var(--fw-medium)}
.prod-sec{padding:40px 0}
.ps-title{margin-bottom:20px}
.ps-body{max-width:900px}
.ps-body.ps-wide{max-width:none}
.ps-body .prose{max-width:68ch}
.adv-list{margin:0;padding:0 0 0 20px;list-style:disc;display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;max-width:900px}
.adv-list li{font-size:18px;line-height:1.3;padding-left:2px}
.adv-list li::marker{color:var(--ink)}
.fr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fr-tile{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;background:#fff}
.fr-tile img{width:72px;height:72px;object-fit:contain;mix-blend-mode:multiply}
.fr-tile span{font-size:16px;line-height:1.25;color:var(--ink)}
.spec-table th small{display:block;font-size:14px;color:var(--muted);text-transform:none;margin-top:3px}
@media (max-width:900px){.prod-hero{grid-template-columns:1fr}.prod-media{position:relative;top:auto;max-width:420px}.adv-list{grid-template-columns:1fr}.prod-sec{padding:32px 0}}
/* телефоны: длинное слово в названии товара («Высокотемпературное», 34px) не помещалось в строку и раздвигало страницу на 360px */
@media (max-width:440px){.prod-info .h1{font-size:clamp(26px,7.6vw,34px);overflow-wrap:anywhere}}
/* ---------- Блоки из библиотеки blocks.html ---------- */
.prose{max-width:68ch}
.prose p{font-size:19px;line-height:1.4;color:var(--ink);margin:0 0 20px}
.prose h2{font-family:var(--font-display);font-weight:800;font-size:28px;line-height:1.1;margin:40px 0 16px}
.prose h3,.prose h4{font-weight:600;font-size:21px;margin:32px 0 12px;line-height:1.2}
.prose h4{font-size:19px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px;color:var(--ink);font-size:19px;line-height:1.4}
.prose li{margin-bottom:8px}
.prose li p{margin:0}
.prose b,.prose strong{font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.prose blockquote{margin:28px 0;padding:0;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.25;color:var(--ink)}
.prose blockquote cite{display:block;margin-top:12px;font-family:var(--font-mono);font-size:15px;font-style:normal;text-transform:uppercase;color:var(--muted);font-weight:400}
.prose img{max-width:100%;height:auto;border-radius:var(--r-md);margin:8px 0 20px}
.prose figure{margin:32px 0}
.prose figcaption{font-family:var(--font-mono);font-size:15px;color:var(--muted);margin-top:10px}
.prose hr{border:none;border-top:1px solid var(--line);margin:32px 0}
.prose .tbl{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r-md)}
.prose table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.25}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose tr:last-child td{border-bottom:none}
.prose th{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--subtle)}
.prose-sm p,.prose-sm li{font-size:18px;line-height:1.35}
.prose-sm h3{font-size:18px;margin:20px 0 8px}
.art-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-family:var(--font-mono);font-size:15px;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.art-nav a{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .2s ease}
.art-nav a:hover{border-color:var(--ink)}
.art-nav a span{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted)}
.art-nav a b{font-weight:600;font-size:17px;line-height:1.25}
.art-nav .an-next{text-align:right;align-items:flex-end}
@media (max-width:640px){.art-nav{grid-template-columns:1fr}.art-nav .an-next{text-align:left;align-items:flex-start}}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;gap:14px;background:#fff;transition:border-color .2s ease}
.news-card:hover{border-color:var(--ink)}
.news-card .date{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted)}
.news-card h3{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.15;margin:0}
.news-card p{font-size:17px;color:var(--muted);line-height:1.3;margin:0}
.news-card .more{margin-top:auto;font-family:var(--font-mono);font-size:15px;text-transform:uppercase;border-bottom:2px solid var(--yellow);align-self:flex-start;padding-bottom:2px}
@media (max-width:1024px){.news-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.news-grid{grid-template-columns:1fr}}
.doc-list{display:flex;flex-direction:column}
.doc-row{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.doc-row:first-child{border-top:1px solid var(--line)}
.doc-row .tp{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:100px;padding:4px 10px;flex:0 0 auto}
.doc-row .nm{font-size:18px;font-weight:500;flex:1;min-width:0;line-height:1.3}
.doc-row .sz{font-family:var(--font-mono);font-size:15px;color:var(--muted);flex:0 0 auto}
.doc-row .dl{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;color:var(--ink);padding:0;
transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.doc-row .dl:hover{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.doc-row .dl svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.steps-3{grid-template-columns:repeat(3,1fr)}
.step{display:flex;flex-direction:column;gap:12px}
.step .n{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--yellow);display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:20px}
.step .nm{font-weight:600;font-size:18px;line-height:1.2}
.step .tx{font-size:17px;color:var(--muted);line-height:1.3;margin:0}
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (min-width:901px){.about-split .split-sticky{position:sticky;top:96px}}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);font-size:18px;vertical-align:top;line-height:1.25}
.spec-table th{font-family:var(--font-mono);font-size:15px;text-transform:uppercase;color:var(--muted);font-weight:500;width:42%;padding-right:24px}
.spec-table td{font-weight:500}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:1px solid var(--line)}
@media (max-width:900px){.steps,.steps-3{grid-template-columns:1fr 1fr}.about-split{grid-template-columns:1fr;gap:32px}}
@media (max-width:520px){.steps,.steps-3{grid-template-columns:1fr}.spec-table th,.spec-table td{display:block;width:auto;padding:6px 0}.spec-table td{padding-bottom:14px}.spec-table tr:first-child td{border-top:none}}
/* ---------- Подбор СОЖ ---------- */
.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.select-card{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;display:grid;grid-template-columns:.9fr 1.1fr;transition:border-color .2s ease}
.select-card img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block}
.select-card > div{padding:var(--space-5);display:flex;flex-direction:column;gap:10px}
.select-card h2,.select-card h3{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.15;margin:4px 0 0}
.select-card p{font-size:17px;color:var(--muted);line-height:1.3;margin:0}
.select-card .more{margin-top:auto;font-family:var(--font-mono);font-size:15px;text-transform:uppercase;padding-top:10px}
@media (hover:hover) and (pointer:fine){.select-card:hover{border-color:var(--ink)}}
@media (max-width:1024px){.select-grid{grid-template-columns:1fr}}
@media (max-width:640px){.select-card{grid-template-columns:1fr}.select-card img{min-height:0;aspect-ratio:16/9}}
/* ---------- Формы ---------- */
.big-form .h2{margin:32px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.big-form .h2:first-child{margin-top:0;padding-top:0;border-top:none}
.big-form .field{margin-bottom:14px}
.big-form .submit{max-width:360px}
.form-ok{text-align:center;padding:24px 0 8px}
.form-ok .chk{width:56px;height:56px;border-radius:50%;background:var(--yellow);margin:0 auto 14px;display:grid;place-items:center}
.form-ok .chk svg{width:26px;height:26px;stroke:var(--ink);stroke-width:2.5;fill:none}
.form-ok b{display:block;font-family:var(--font-display);font-weight:800;font-size:22px;margin-bottom:6px}
.form-ok p{font-size:17px;color:var(--muted);margin:0}
.lead-form.sent > :not(.form-ok){display:none}
.hero-form .form-note{margin-top:12px}
/* ---------- Контакты ---------- */
.contacts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.contact-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--space-5);display:flex;flex-direction:column;gap:8px;min-height:180px}
.contact-card .eyebrow{display:block;margin-bottom:8px}
.contact-card .big{font-family:var(--font-mono);font-size:22px;font-weight:700;line-height:1.2;word-break:break-word}
.contact-card .big:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px}
.contact-card .addr{font-size:18px;line-height:1.3;margin:0;font-weight:500}
.contact-card .txt-muted{font-size:16px;margin:auto 0 0;line-height:1.3}
.contact-card .txt-muted a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:1024px){.contacts-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.contacts-grid{grid-template-columns:1fr}.contact-card{min-height:0}}
/* ---------- Пагинация ---------- */
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:40px}
.pg{min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);display:inline-grid;place-items:center;font-family:var(--font-mono);font-size:16px;color:var(--ink);transition:background-color .18s ease,color .18s ease}
a.pg:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pg.on{background:var(--yellow);border-color:var(--yellow);font-weight:600}
.pg.dots{border:none}
/* ---------- Подвал: мелочи ---------- */
footer .fpills{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
footer .fpills .pill{border-color:rgba(255,255,255,.2);color:#fff}
footer .bottom a{color:var(--faint)}
footer .bottom a:hover{color:#fff}
footer .num a{font-family:var(--font-mono)}
@media (max-width:1024px){footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:640px){footer .wrap{grid-template-columns:1fr}}
/* Компактный десктоп: сдержаннее плитки */
@media (min-width:1025px) and (max-height:860px),(min-width:1025px) and (max-width:1366px){
.cat-card-img .thumb{width:88px;height:88px}
.prod-card .thumb{flex-basis:92px;width:92px;height:92px}
.brand-card .nm{font-size:22px}
.prod-sec{padding:40px 0}
}
/* ---------- Полоса преимуществ под героем (как на borfi.ru) ---------- */
.features{padding:calc(var(--space-6) + 24px) 0 var(--space-6);border-bottom:none}
.features + section{border-top:none}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5) var(--space-6)}
.feature{display:flex;align-items:center;gap:18px}
.feature img{width:72px;height:72px;flex:0 0 auto}
.feature .ft{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:19px;line-height:1.1;margin-bottom:6px}
.feature p{font-size:17px;color:var(--muted);line-height:1.25;margin:0;max-width:26ch}
@media (max-width:1024px){.features-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features-grid{grid-template-columns:1fr}.feature img{width:60px;height:60px}}
/* ---------- Аннотация о компании: карточка «10 лет» ---------- */
.years-badge .yb-ico{display:block;width:min(340px,88%);height:auto}
.years-badge p{font-size:18px;color:var(--muted);line-height:1.3;margin:14px 0 0;max-width:38ch}
.years-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--space-6);margin-bottom:var(--space-5);background:var(--subtle)}
.years-card .yc-num{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(74px,7vw,114px);line-height:0.9;letter-spacing:-.02em;color:var(--ink)}
.years-card .yc-lbl{font-family:var(--font-mono);font-size:17px;text-transform:uppercase;font-weight:600;margin-top:10px;display:inline-block;background:var(--yellow);padding:4px 10px;border-radius:6px}
.years-card p{font-size:18px;color:var(--muted);line-height:1.3;margin:18px 0 0;max-width:38ch}
/* ---------- Каталог EFELE: фото товаров, фасовки, цены, видео ---------- */
.prod-card-photo .thumb{background:#fff}
.prod-card-photo .thumb img{left:8%;top:8%;width:84%;height:84%}
.prod-media-photo{background:#fff}
.prod-media-photo img{left:12%;top:8%;width:76%;height:84%}
.pack-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.pack{margin:0;width:132px;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:8px}
.pack img{width:100px;height:100px;object-fit:contain;display:block}
.pack figcaption{font-family:var(--font-mono);font-size:15px;color:var(--ink);text-align:center;line-height:1.2}
.price-table{max-width:720px}
.price-table td{font-family:var(--font-mono);font-weight:600;white-space:nowrap;text-align:right;width:140px}
.spec-table td .unit{color:var(--muted);font-weight:400;font-size:16px}
.prod-sec .spec-table th,.prod-sec .spec-table td{padding:20px 0}
.prod-sec .spec-table th{padding-right:32px}
.prod-sec .spec-table td{padding-left:24px}
.prod-sec .spec-table+.note{margin-top:20px}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px}
.video{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--subtle);border:1px solid var(--line)}
.video iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:760px){.video-grid{grid-template-columns:1fr}.pack{width:calc(50% - 6px)}}
/* ---------- Корзина фасовок (страница товара EFELE) ---------- */
.order .lead{margin-top:12px}
.legal-strip{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.legal-strip li{position:relative;padding-left:24px;font-size:17px;color:var(--ink)}
.legal-strip li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--yellow);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212225' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center}
.order-grid{display:grid;grid-template-columns:1fr 360px;gap:var(--space-5);align-items:start}
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.pack-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--space-4);background:#fff;display:flex;flex-direction:column;gap:12px;transition:border-color .2s ease}
.pack-card.is-active{border-color:var(--ink)}
.pk-img{position:relative;height:120px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line)}
.pk-img img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain}
.pk-img .pk-fallback{opacity:.5}
.pk-name{font-weight:var(--fw-semibold);font-size:18px;line-height:1.2}
.pk-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.pk-price{font-family:var(--font-mono);font-weight:700;font-size:20px}
.pk-per{font-family:var(--font-mono);font-size:15px;color:var(--muted)}
.pk-add{width:100%;height:44px}
.qty{display:flex;align-items:center;justify-content:space-between;height:44px;border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:0 4px}
.qty button{width:36px;height:36px;border-radius:50%;border:none;background:transparent;font-size:22px;line-height:1.0;cursor:pointer;color:var(--ink);font-family:inherit;transition:background-color var(--dur-hover) ease}
.qty button:hover{background:var(--subtle)}
.qty button:disabled{opacity:.35;cursor:default}
.qty .q-num{font-family:var(--font-mono);font-weight:700;font-size:18px;min-width:24px;text-align:center}
.qty-sm{height:32px;padding:0 2px;border-width:1px;border-color:var(--line-strong)}
.qty-sm button{width:28px;height:28px;font-size:18px}
.order-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--space-5);background:#fff;position:sticky;top:96px}
.order-card h3{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.1;margin:0}
.oc-sub{font-family:var(--font-mono);font-size:15px;color:var(--muted);margin:6px 0 16px;text-transform:uppercase}
.oc-rows{display:flex;flex-direction:column}
.oc-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:17px}
.oc-row .oc-name{font-weight:500;line-height:1.25;margin-bottom:8px}
.oc-row .oc-sum-cell{text-align:right;font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.oc-row .oc-line{display:block;font-size:14px;color:var(--muted);font-weight:400;margin-top:4px}
.oc-ship span:last-child{font-family:var(--font-mono);color:var(--muted)}
.oc-empty{font-size:17px;color:var(--muted);line-height:1.3;margin:0 0 8px}
.oc-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-top:1px solid var(--line-strong);margin-bottom:12px}
.oc-total b{font-family:var(--font-mono);font-size:24px;font-weight:700}
.oc-submit,.oc-sample{width:100%}
.oc-sample{margin-top:8px}
.order-card .note{margin-top:14px;text-align:center}
@media (max-width:1180px){.packs-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.order-grid{grid-template-columns:1fr}.order-card{position:static}}
@media (max-width:520px){.packs-grid{grid-template-columns:1fr 1fr}.pack-card{padding:12px}.pk-img{height:96px}}
/* атрибут hidden сильнее классов с display */
[hidden]{display:none !important}
/* ---------- Доступность (аудит по web-design-guidelines) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:300;padding:12px 20px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:17px;font-weight:600;transition:top .15s ease}
.skip-link:focus{top:12px;outline:2px solid var(--yellow);outline-offset:2px}
/* Кольцо фокуса: жёлтое кольцо системы + тонкий ink-контур, чтобы на белом контраст индикатора был ≥3:1 */
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
.on-dark :focus-visible,.hero :focus-visible,.diff-bg :focus-visible,footer :focus-visible{box-shadow:0 0 0 2px #fff}
.field select:focus,.field input:focus,.field textarea:focus{box-shadow:none}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;align-items:center}
.crumbs li{display:flex;align-items:center}
.crumbs li + li::before{content:"·";color:var(--tertiary);margin:0 8px}
.crumbs [aria-current="page"]{color:var(--ink)}
footer .fh{font-family:var(--font-mono);font-size:var(--fs-eyebrow);text-transform:uppercase;color:var(--yellow);margin:0 0 18px;font-weight:var(--fw-semibold)}
.news-card h2{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.15;margin:0}
.news-card:focus-visible,.cat-card:focus-visible,.prod-card:focus-visible,.brand-card:focus-visible,.select-card:focus-visible{border-color:var(--ink)}
.oc-submit[aria-disabled="true"]{opacity:.6}
.oc-hint{text-align:left;color:var(--danger)}
a,button{-webkit-tap-highlight-color:transparent}
/* Цели касания ≥44px на сенсорных экранах */
@media (pointer:coarse){
.pills-row .pill,.pg{min-height:44px}
.crumbs a,.crumbs span{display:inline-block;padding:8px 0}
.doc-row .dl,.qty button,.qty-sm button{width:44px;height:44px}
.qty,.qty-sm{height:48px}
.nav-links a{padding:12px 0}
.faq-q{padding:6px 0}
}
/* Повышенный контраст по настройке ОС */
@media (prefers-contrast:more){
:root{--muted:#3F434A;--tertiary:#5F646B;--line:rgba(33,34,37,.32);--line-strong:rgba(33,34,37,.55)}
.btn-outline{border-width:2px}
.field select,.field input,.field textarea{border-color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
.skip-link,.pack-card,.news-card,.prod-card,.brand-card,.select-card,.crumbs a,.pills-row .pill,.doc-row .dl,.qty button{transition:none}
}
/* ---------- Каталог: табы брендов + колонка разделов + сетка (структура из концепта) ---------- */
.cat-tabs .pill,.hc-tabs .pill{height:44px;padding:0 18px;font-size:16px;cursor:pointer;border:1px solid var(--line-strong);font-family:var(--font-mono);font-weight:600}
.cat-tabs .pill-dark,.hc-tabs .pill-dark{border-color:var(--ink)}
@media (min-width:761px){.cat-tabs .pill,.hc-tabs .pill{padding:0 42px;justify-content:center}}
.cat-tabs .tab-n{opacity:.6;font-weight:500;margin-left:2px}
.cat-layout{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;padding-bottom:var(--section-y)}
.cat-side{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:6px}
.cat-side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cat-side button{width:100%;display:flex;justify-content:space-between;gap:12px;text-align:left;padding:10px 14px;border-radius:var(--r-sm);border:none;background:transparent;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);cursor:pointer;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease}
.cat-side button:hover{background:var(--subtle)}
.cat-side button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cat-side button span{font-family:var(--font-mono);font-size:15px;color:var(--muted)}
.cat-side button[aria-pressed="true"] span{color:var(--yellow)}
.cat-side .side-title{font-family:var(--font-mono);font-size:var(--fs-eyebrow);text-transform:uppercase;color:var(--muted);margin:20px 0 8px;padding:0 14px}
.cat-side .side-link{display:inline-block;margin:18px 14px 0;font-family:var(--font-mono);font-size:15px;border-bottom:2px solid var(--yellow);padding-bottom:1px}
.cat-side .side-link:hover{border-color:var(--ink)}
.grid-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.grid-count{font-family:var(--font-mono);font-size:16px;color:var(--muted);text-transform:uppercase}
.grid-tools .filter{flex:0 0 320px;max-width:100%}
@media (max-width:1180px){.cat-layout{grid-template-columns:240px 1fr;gap:28px}}
@media (max-width:900px){.cat-layout{grid-template-columns:1fr}.cat-side{position:static;max-height:none;overflow:visible;padding-right:0}.cat-side ul{display:flex;flex-wrap:wrap;gap:6px}.cat-side button{width:auto;border:1px solid var(--line-strong)}.cat-side .side-title{padding:0}}
.cat-layout .prod-grid{grid-template-columns:1fr 1fr}
@media (max-width:640px){.cat-layout .prod-grid{grid-template-columns:1fr}}
/* телефоны: длинное слово в названии («Высокотемпературное») растягивало карточку шире экрана — колонка может сжиматься, название на узких экранах мельче и при нужде переносится */
@media (max-width:640px){.prod-grid,.cat-layout .prod-grid{grid-template-columns:minmax(0,1fr)}.prod-card .nm{overflow-wrap:anywhere}}
@media (max-width:400px){.prod-card .nm{font-size:17px}}
/* Списки с иконками (стиль icon-ref3) на странице товара */
.adv-list.adv-ico{list-style:none;padding:0;gap:18px 40px}
.adv-list.adv-ico li{display:flex;align-items:center;gap:16px;padding:0}
.adv-list.adv-ico img{flex:0 0 56px;width:56px;height:56px;border-radius:var(--r-sm);border:1px solid var(--line);object-fit:cover;background:#fff}
.adv-list.adv-ico span{font-size:18px;line-height:1.25}
.order .legal-strip{margin-top:4px}
/* ---------- Служебная страница /icons/ ---------- */
.ico-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:0 0 28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ico-meta dt{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ico-meta dd{margin:0;font-size:17px;line-height:1.3}
.ico-meta code{font-family:var(--font-mono);font-size:15px;background:var(--subtle);padding:2px 6px;border-radius:6px}
.ico-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ico-grid figure{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:10px}
.ico-grid img{width:100%;aspect-ratio:1;object-fit:contain}
.ico-grid figcaption{font-family:var(--font-mono);font-size:14px;color:var(--muted);text-align:center;word-break:break-all}
.ico-grid-wide{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ico-grid-wide img{aspect-ratio:3/2}
.ico-grid-ds{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.ico-wide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ico-wide img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center bottom;border:1px solid var(--line);border-radius:var(--r-lg)}
@media (max-width:760px){.ico-meta,.ico-wide{grid-template-columns:1fr}}
/* «Что мы предлагаем» на странице о компании: просторнее */
.spec-table-airy th,.spec-table-airy td{padding:36px 0;font-size:19px;line-height:1.35}
.spec-table-airy th{font-size:16px;padding-right:56px;width:38%}
.spec-table-airy + .note{margin-top:36px}
.offer-sec{padding:clamp(72px,8vw,128px) 0}
.step .step-ico{width:72px;height:72px;border-radius:var(--r-md);border:1px solid var(--line);object-fit:cover;background:#fff}
.adv-list.adv-ico .li-ico{--tile:36px;flex:0 0 36px;color:var(--ink,#1a1a1a)}
/* карточки подбора СОЖ с изометрической иконкой вместо фото */
.select-card-ico{grid-template-columns:.7fr 1.3fr}
.select-card-ico img{object-fit:contain;background:#fff;padding:24px;min-height:0;height:100%}
@media (max-width:640px){.select-card-ico{grid-template-columns:1fr}.select-card-ico img{max-height:200px;aspect-ratio:auto}}
.link-y{border-bottom:2px solid var(--yellow);padding-bottom:1px}
.link-y:hover{border-color:var(--ink)}
/* ---------- О компании: единая двухколоночная сетка блоков, растушёвка картинки, реквизиты за кнопкой ---------- */
.lead-cta{display:block;margin-top:28px}
.band-fade-left{background:#fff}
.band-fade-left img{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.35) 8%,#000 26%,#000 100%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.35) 8%,#000 26%,#000 100%)}
.split-sec{display:grid;grid-template-columns:.45fr 1fr;gap:var(--space-7);align-items:start}
.split-head .h1{margin-top:14px}
.split-head .lead{margin-top:16px}
.split-sec .spec-table-airy th,.split-sec .spec-table-airy td{padding:28px 0}
.split-sec .spec-table-airy th{padding-right:24px}
.req-acc{margin-top:28px}
.req-btn{display:inline-flex;align-items:center;gap:14px}
.req-btn .icn{display:inline-flex;width:22px;height:22px;transition:transform .25s}
.req-btn .icn svg{width:14px;height:14px}
.req-btn[aria-expanded="true"] .icn{transform:rotate(45deg)}
.req-panel{margin-top:24px}
.req-panel .spec-table th{width:34%}
button.link-y{background:none;border:0;padding:0;font:inherit;cursor:pointer}
@media (max-width:900px){.split-sec{grid-template-columns:1fr;gap:28px}}
/* ---------- Видео на странице товара: один ролик — большой плеер, несколько — карусель ---------- */
.video-lg{max-width:1100px}
.video-carousel{max-width:1100px}
.vc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
.vc-track::-webkit-scrollbar{display:none}
.vc-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.vc-nav{display:flex;align-items:center;gap:14px;margin-top:16px}
.vc-btn{width:44px;height:44px;border-radius:var(--r-full);border:1px solid var(--line-strong);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .2s,border-color .2s}
.vc-btn svg{width:18px;height:18px}
.vc-btn:hover{background:var(--yellow);border-color:var(--yellow)}
.vc-btn[disabled]{opacity:.35;cursor:default;background:#fff;border-color:var(--line-strong)}
.vc-dots{display:flex;gap:8px;align-items:center}
.vc-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--line-strong);cursor:pointer;position:relative}
.vc-dot::after{content:"";position:absolute;inset:-12px}
.vc-dot.on{background:var(--yellow);width:26px;border-radius:100px}
.vc-count{margin-left:auto;font-family:var(--font-mono);font-size:15px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.vc-track{scroll-behavior:smooth}}
/* ---------- Картинки статей и новостей ---------- */
.news-card{padding:0;overflow:hidden}
.news-card>*:not(.nc-img){margin-left:24px;margin-right:24px}
.news-card>.date{margin-top:20px}
.news-card>.more{margin-bottom:24px}
.news-card:not(:has(.nc-img))>.date{margin-top:24px}
.nc-img{display:block;aspect-ratio:16/9;background:var(--subtle);border-bottom:1px solid var(--line);overflow:hidden}
.nc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.news-card:hover .nc-img img{transform:scale(1.03)}
.art-hero{display:block;margin:0 0 32px;border-radius:var(--r-xl);overflow:hidden;background:var(--subtle);aspect-ratio:16/9}
.art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.prose img{max-width:100%;height:auto;border-radius:var(--r-lg);display:block;margin:24px 0}
@media (prefers-reduced-motion:reduce){.news-card:hover .nc-img img{transform:none}}
/* «Кто мы»: пункты с изометрическими иконками */
.prose ul.who-list{list-style:none;padding:0;margin:8px 0 24px;display:flex;flex-direction:column;gap:14px}
.prose ul.who-list li{display:flex;align-items:center;gap:18px;padding:0}
.prose ul.who-list li::marker{content:""}
.prose ul.who-list img{flex:0 0 72px;width:72px;height:72px;object-fit:contain;margin:0;border-radius:0}
.prose ul.who-list span{font-size:19px;line-height:1.3}
/* Главная: табы брендов над категориями */
.hc-tabs{margin:0 0 28px}
/* мобильный: принудительные переносы в лиде героя не действуют — строки собираются естественно */
@media (max-width:900px){.hero-lead br{display:none}}
/* ---------- Мобильные правки (2026-08-19) ---------- */
button.cat-filter-toggle{display:none !important}
@media (max-width:760px){
/* 1. главная: без гео-статистики */
.geo-stats,.geo-note{display:none}
/* 2. категории на главной — плитка 2 колонки вместо слайдера */
.hc-panel:not([hidden]){display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0;gap:10px;scroll-snap-type:none}
.hc-panel .cat-card{flex:none;width:auto;max-width:none;min-height:auto;padding:14px}
.hc-panel .thumb{width:64px;height:64px}
.hc-panel .thumb img{left:8%;top:8%;width:84%;height:84%}
.hc-panel .cat-foot{gap:8px}
.hc-panel .nm{font-size:15px;line-height:1.2;margin-top:12px}
.hc-panel .cnt{font-size:12px;margin-top:4px}
.hc-panel .arr{display:none}
[data-od-id="categories"] .cat-scroll-indicator{display:none}
}
@media (max-width:900px){
/* 3. каталог: разделы и подборки — за кнопкой «Фильтр» */
button.cat-filter-toggle{display:inline-flex !important;align-items:center;justify-content:center;width:52px;height:52px;padding:0}
.cat-filter-toggle svg{width:22px;height:22px;flex:0 0 auto}
.cat-filter-toggle[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-side-panels{display:none;margin-top:14px}
.cat-side.open .cat-side-panels{display:block}
}
/* минимальная цена в карточке товара */
.pc-price{font-family:var(--font-mono);font-weight:700;font-size:17px;margin-top:10px;color:var(--ink)}
.pc-price-ask{font-weight:500;font-size:15px;color:var(--muted)}
.prod-card .pc-body{display:flex;flex-direction:column}
.prod-card .meta{margin-top:10px}
/* ---------- Блок «Каталог»: карточки-картинки (градиент+объекты одним изображением) ---------- */
.brand-card.bc-g-efele,.brand-card.bc-g-yunpro,.brand-card.bc-g-equipment{border:none;color:#fff;background-size:cover;background-position:center top}
.brand-card[class*="bc-g-"] .nm,.brand-card[class*="bc-g-"] .cnt{color:#fff}
.brand-card[class*="bc-g-"] p{color:rgba(255,255,255,.82)}
.bc-media{display:block;aspect-ratio:21/11}
.bc-g-efele{background-image:url('/assets/img/wide/card-efele.jpg')}
.bc-g-yunpro{background-image:url('/assets/img/wide/card-yunpro.jpg')}
.bc-g-equipment{background-image:url('/assets/img/wide/card-equipment.jpg')}
.brand-card[class*="bc-g-"] .nm,.brand-card[class*="bc-g-"] .cnt{color:#fff}
.brand-card[class*="bc-g-"] p{color:rgba(255,255,255,.8)}
.bc-media{display:block;aspect-ratio:21/10;position:relative;overflow:hidden}
.bc-media img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:92%;width:auto;max-width:none;aspect-ratio:auto;background:transparent;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
/* ---------- Карусель спецпредложений на главной ---------- */
.promo-carousel{max-width:none}
.promo-slide{background:var(--subtle);border-radius:var(--r-2xl);padding:40px 44px 36px}
.promo-title{margin:0 0 28px}
.promo-grid{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:48px;align-items:start}
.promo-media{background:var(--subtle);border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1}
.promo-media img{width:100%;height:100%;object-fit:cover;display:block}
.promo-info{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.promo-price{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.promo-price .pill-yellow{font-weight:700;font-size:15px;height:32px;display:inline-flex;align-items:center}
.promo-price s{font-family:var(--font-mono);font-size:22px;color:var(--muted);text-decoration-thickness:2px}
.promo-price b{font-family:var(--font-mono);font-weight:800;font-size:44px;line-height:1;color:var(--ink)}
.promo-name{font-size:18px;font-weight:600;line-height:1.3;color:var(--ink);border-bottom:2px solid var(--yellow);padding-bottom:2px}
.promo-apps .pa-t{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted);margin:8px 0 12px}
.promo-apps .adv-list{grid-template-columns:1fr;gap:12px;max-width:none}
.promo-apps .adv-list span{font-size:16px;max-width:560px}
.promo-note{margin:2px 0 0}
.promo-info .btn{margin-top:18px}
@media (max-width:900px){
.promo-slide{padding:24px 20px}
.promo-grid{grid-template-columns:1fr;gap:20px}
.promo-price b{font-size:36px}
.promo-title{margin-bottom:18px}
}
/* ---------- Страница EFELE: NSF / производство / документы ---------- */
.nsf-split{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;margin-top:32px}
.lead-light{color:var(--faint)}
.nsf-card{background:#fff;border-radius:var(--r-2xl);padding:44px;text-align:center;color:var(--ink)}
.nsf-card .n{font-family:var(--font-display);font-weight:var(--fw-black);font-size:64px;line-height:1}
.nsf-card .c{font-family:var(--font-mono);font-weight:700;font-size:20px;margin-top:14px;background:var(--yellow);border-radius:8px;display:inline-block;padding:6px 16px}
.nsf-card .s{font-family:var(--font-mono);font-size:15px;color:var(--muted);margin-top:16px}
.steps-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.doc-tag{font-family:var(--font-mono);font-size:14px;background:var(--subtle);border:1px solid var(--line);border-radius:8px;display:inline-block;padding:5px 12px;margin:10px 0 12px}
@media (max-width:1024px){.steps-4{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.nsf-split{grid-template-columns:1fr;gap:28px}}
@media (max-width:560px){.steps-4{grid-template-columns:1fr}}
/* страница сертификатов EFELE */
.lic-n{font-family:var(--font-mono);color:var(--muted);font-weight:500;margin-left:8px}
.lic-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.lic-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;background:#fff;transition:border-color .2s}
.lic-card:hover{border-color:var(--ink)}
.lic-shot{display:block;aspect-ratio:3/4;background:var(--subtle);border-radius:var(--r-sm);overflow:hidden}
.lic-shot img{width:100%;height:100%;object-fit:cover;display:block}
.lic-name{font-size:13.5px;line-height:1.35;color:var(--ink)}
@media (max-width:1024px){.lic-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.lic-grid{grid-template-columns:1fr 1fr}}
/* иконки блоков «Производство» и «Документы» на страницах EFELE */
.step .prod-ico{width:100%;max-width:220px;height:150px;object-fit:contain;object-position:bottom;margin-bottom:14px;display:block}
.step .doc-ico{width:96px;height:96px;object-fit:contain;margin-bottom:12px;display:block}
/* /company/ «Статус и география»: крупнее круги с иконками */
[data-od-id="status"] .diff-card .dico{width:72px;height:72px}
[data-od-id="status"] .diff-card .dico svg{width:32px;height:32px}
/* /company/ «Вакансии»: правая колонка ниже */
@media (min-width:901px){#vacancy .faq-list{margin-top:56px}}
/* мобильный промо-слайдер: виден край следующей карточки + короткие «Применения» */
@media (max-width:760px){
.promo-carousel .vc-slide{flex:0 0 87%}
.promo-apps .adv-list li>span:not(.li-ico){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
/* ---------- Общая корзина: плавающая иконка + страница /cart/ ---------- */
.cart-fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.22);display:inline-flex;align-items:center;justify-content:center;z-index:var(--z-sticky)}
.cart-fab:hover{transform:translateY(-2px)}
.cart-fab svg{width:26px;height:26px}
.cart-fab .cf-n{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink);color:#fff;font-family:var(--font-mono);font-weight:700;font-size:13px;line-height:22px;text-align:center}
.cart-fab[hidden]{display:none}
.cart-page .cart-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.cart-group{border:1px solid var(--line);border-radius:var(--r-xl);padding:20px 22px;background:#fff;margin-bottom:16px}
.cg-head{margin-bottom:6px}
.cg-name{font-weight:600;font-size:18px;line-height:1.3;border-bottom:2px solid var(--yellow);padding-bottom:1px}
.cg-name:hover{border-color:var(--ink)}
.cart-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:none;padding-bottom:4px}
.cr-name{flex:1;font-size:16px}
.cart-row .qty-sm{flex:0 0 auto;width:118px}
.cr-sum{font-family:var(--font-mono);font-weight:700;font-size:17px;min-width:120px;text-align:right}
.cr-line{display:block;font-family:var(--font-mono);font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.cr-del{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cr-del:hover{background:var(--subtle);color:var(--ink)}
.cr-del svg{width:16px;height:16px}
.cart-submit[aria-disabled="true"]{opacity:.6}
@media (max-width:900px){
.cart-page .cart-layout{grid-template-columns:1fr}
.cart-page .order-card{position:static}
.cart-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name del" "qty sum";gap:10px 14px;align-items:center}
.cr-name{grid-area:name}
.cart-row .qty-sm{grid-area:qty;justify-self:start}
.cr-sum{grid-area:sum;min-width:0;justify-self:end}
.cr-del{grid-area:del;justify-self:end}
}
/* промо: плашка скидки — зелёная */
.promo-price .pill-yellow{background:#2E9E4F;color:#fff}
/* статьи: видеоплееры (rutube/youtube из выгрузки) — крупные, на всю ширину колонки, 16:9 */
.prose iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;min-height:0;border:0;border-radius:var(--r-lg);background:var(--ink)}
/* ---------- Статьи/новости: колонка контента слева + sticky-сайдбар ---------- */
.art-h1{max-width:1000px}
.art-layout{display:grid;grid-template-columns:minmax(0,820px) minmax(280px,360px);gap:56px;align-items:start;justify-content:space-between}
.art-main{min-width:0}
.art-side{position:sticky;top:96px;display:grid;gap:16px}
.side-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;background:#fff}
.side-card .sc-t{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.15;margin:0 0 6px}
.as-item{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
.as-item b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.as-item:hover b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.as-item span{display:block;font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-top:4px}
.as-all{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:15px}
.side-cta p{font-size:15px;color:var(--muted);line-height:1.35;margin:0 0 14px}
.side-cta .btn{width:100%}
@media (max-width:1024px){.art-layout{grid-template-columns:1fr;gap:32px}.art-side{position:static}}
/* ---------- материалы: текстуры в кругах ---------- */
.mat-grid{display:flex;flex-wrap:wrap;gap:10px}
.mat-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 18px 6px 7px;background:#fff}
.mat-chip>span:last-child{font-size:16px;font-weight:500}
.mat-c{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;display:inline-block;flex:0 0 auto}
.mp-circles{display:inline-flex;flex:0 0 auto}
.mp-circles .mat-c{border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.mp-circles .mat-c+.mat-c{margin-left:-13px}
/* ---------- оборудование: характеристики в 2 колонки с иконками ---------- */
.spec-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.sc-i{display:flex;gap:14px;align-items:flex-start}
.sc-i .ic-tile{--tile:36px;flex:0 0 36px;color:var(--ink,#1a1a1a)}
.sc-i .ic-tile.ic-grey{background:var(--subtle)}
.sc-i .sl{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;color:var(--muted);line-height:1.3}
.sc-i .sv{font-size:17px;font-weight:600;margin-top:3px;line-height:1.3}
@media (max-width:760px){.spec-cards{grid-template-columns:1fr;gap:14px}}
/* количество — редактируемое поле внутри степпера */
.qty .q-num{border:none;background:transparent;width:44px;min-width:0;padding:0;font-family:var(--font-mono);font-weight:700;font-size:18px;text-align:center;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.qty .q-num:focus{outline:none;background:var(--subtle);border-radius:8px}
.qty-sm .q-num{font-size:16px;width:38px}
/* строка-призрак удалённой позиции */
.cart-ghost{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px dashed var(--line-strong);border-radius:var(--r-xl);padding:14px 22px;margin-bottom:16px;color:var(--muted);font-size:16px}
.cart-ghost .link-y{background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:15px;padding:0;flex:0 0 auto}
/* модалка: состав заявки read-only */
.lead-order{border:1px solid var(--line);background:var(--subtle);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px}
.lead-order .lo-t{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.lead-order .lo-body{font-size:15px;line-height:1.35;white-space:pre-line;max-height:150px;overflow:auto;color:var(--ink)}
/* экран успеха: recap и действия */
.ok-recap{font-family:var(--font-mono);font-weight:600;font-size:16px;margin:12px 0 4px}
.ok-acts{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 14px;justify-content:center}
.ok-acts .btn{height:40px;padding:0 16px;font-size:15px}
.pk-art{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-top:2px}
/* шапка: два телефона столбиком */
.nav-phone .np-nums{display:flex;flex-direction:column;line-height:1.15}
.nav-phone .np-num2{font-size:15px;font-weight:500;color:var(--muted)}
/* плашка cookie-согласия */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:var(--z-toast);margin:0 auto;max-width:920px;display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:14px 20px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.cookie-bar span{font-size:15px;line-height:1.35;color:var(--faint)}
.cookie-bar a{color:#fff;border-bottom:1px solid var(--yellow)}
.cookie-bar .btn{height:40px;padding:0 20px;font-size:15px;flex:0 0 auto}
@media (max-width:640px){.cookie-bar{flex-direction:column;align-items:stretch;text-align:left;gap:12px;left:10px;right:10px;bottom:10px}}
/* ---------- Акция: плашка и витрина /sale/ ---------- */
.sale-strip{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:18px;letter-spacing:.02em;padding:13px 16px;text-decoration:none}
.sale-strip::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:32%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-18deg);animation:ss-glint 6s ease-in-out infinite;pointer-events:none}
@keyframes ss-glint{0%,58%{left:-45%}82%,100%{left:115%}}
@media (prefers-reduced-motion:reduce){.sale-strip::after{animation:none}}
.sale-strip svg{width:22px;height:22px;flex:none;transform-origin:50% 2px;animation:ss-ring 3.2s ease-in-out infinite}
@keyframes ss-ring{0%,32%,100%{transform:rotate(0)}4%{transform:rotate(16deg)}9%{transform:rotate(-13deg)}14%{transform:rotate(9deg)}19%{transform:rotate(-6deg)}24%{transform:rotate(3deg)}28%{transform:rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.sale-strip svg{animation:none}}
.sale-strip:hover span{border-bottom:2px solid var(--ink);margin-bottom:-2px}
@media (max-width:700px){.sale-strip{font-size:18.5px;padding:14px 14px;gap:11px}.sale-strip svg{width:25px;height:25px}}
.sale-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.sale-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.sc-pic{display:flex;align-items:center;justify-content:center;padding:20px 20px 6px}
.sc-pic img{width:auto;max-width:78%;height:170px;object-fit:contain}
.sc-info{display:flex;flex-direction:column;flex:1;padding:6px 20px 20px}
.sc-brand{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--tertiary);text-transform:uppercase}
.sc-name{font-size:19px;line-height:1.15;margin:6px 0 8px}
.sc-name a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(33,34,37,.25)}
.sc-name a:hover{border-color:var(--ink)}
.sc-descr{font-size:15px;line-height:1.35;color:var(--muted);margin:0 0 14px}
.sale-order{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.sl-pack{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name act" "price act" "stock act";align-items:center;column-gap:12px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.slp-name{grid-area:name;font-size:14px;color:var(--tertiary)}
.slp-price{grid-area:price;font-size:17px}
.slp-old{margin-left:8px;font-size:14px;font-weight:400;color:var(--tertiary)}
.slp-off{display:inline-block;margin-left:8px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:800;border-radius:6px;padding:1px 6px;vertical-align:2px}
.slp-stock{grid-area:stock;font-size:13px;color:#1E8E5A}
.slp-stock.low{color:#D74C3C;font-weight:700}
.slp-act{grid-area:act;display:flex;align-items:center}
.sl-pack .qty{display:flex;align-items:center;gap:6px;border:0;padding:0;height:auto}
.sl-pack .qty button{width:34px;height:34px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font-size:17px;cursor:pointer}
.sl-pack .qty .q-num{width:40px;height:34px;text-align:center;border:1px solid var(--line);border-radius:8px;font-size:15px}
.sl-pack .sale-hint{font-size:12px;color:var(--tertiary);margin-left:8px}
.sale-tag{display:inline-block;background:var(--yellow);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:2px 8px;margin-left:8px;vertical-align:2px}
/* вид «списком» + переключатель на /sale/ */
.sale-tools{display:flex;justify-content:flex-end;margin:0 0 18px}
.view-switch{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:#fff}
.view-switch button{display:flex;align-items:center;gap:7px;padding:9px 18px;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.view-switch button.on{background:var(--ink);color:#fff}
.view-switch svg{width:16px;height:16px}
.sc-info .sc-text{flex:1}
.sale-grid.as-list{display:flex;flex-direction:column;gap:14px}
.as-list .sale-card{flex-direction:row;align-items:stretch}
.as-list .sc-pic{flex:0 0 132px;align-self:center;padding:12px}
.as-list .sc-pic img{height:104px;max-width:100%}
.as-list .sc-info{flex-direction:row;align-items:center;gap:26px;padding:16px 20px 16px 0}
.as-list .sale-order{flex:0 0 400px;margin-top:0}
.as-list .sc-descr{margin-bottom:0}
@media (max-width:900px){.as-list .sc-info{flex-direction:column;align-items:stretch;gap:12px;padding:0 18px 18px}.as-list .sale-order{flex:none}}
@media (max-width:560px){.as-list .sale-card{flex-direction:column}.as-list .sc-pic{padding-bottom:0}}
/* /delivery/: таблица регионов */
.del-grid{margin:18px 0 6px;border-top:1px solid var(--line)}
.del-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.del-row b{font-size:16px}
.del-row span{color:var(--tertiary);font-size:14px;text-align:right}
@media (max-width:560px){.del-row{flex-direction:column;gap:2px}.del-row span{text-align:left}}
/* /delivery/: полная ширина, две колонки с иллюстрациями, полоса цифр */
.del-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.del-hero-rev{grid-template-columns:.95fr 1.05fr}
.del-img{margin:0}
.del-img img{width:100%;height:auto}
.del-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px}
.del-stat{padding:26px 24px 26px 0;border-right:1px solid var(--line)}
.del-stat:last-child{border-right:none}
.del-stat+.del-stat{padding-left:24px}
.del-stat .n{font-family:var(--font-display);font-weight:900;font-size:44px;line-height:1;letter-spacing:-.02em}
.del-stat .l{margin-top:8px;color:var(--tertiary);font-size:14px}
@media (max-width:900px){.del-hero,.del-hero-rev{grid-template-columns:1fr;gap:26px}.del-hero-rev .del-img{order:2}.del-stats{grid-template-columns:1fr 1fr}.del-stat:nth-child(2n){border-right:none}.del-stat:nth-child(n+3){border-top:1px solid var(--line)}}
/* подвал: кнопка промо-сайта по СОЖ */
.foot-promo{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:11px 20px;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.foot-promo svg{width:15px;height:15px}
.foot-promo:hover{border-color:var(--yellow);color:var(--yellow)}
/* /brand/ — бренд-гайд (служебная страница) */
.ic-tile img{width:63%;height:63%;object-fit:contain}
.br-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:20px}
.br-q{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;text-decoration:none;color:var(--ink)}
.br-q b{font-family:var(--font-mono);font-size:15px}.br-q span{font-size:14px;color:var(--muted);line-height:1.4}
.br-q:hover{background:var(--ink);color:#fff}.br-q:hover span{color:var(--faint)}
.br-nav{position:sticky;top:76px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.br-nav a{font-family:var(--font-mono);font-size:13px;font-weight:600;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:999px;border:1px solid var(--line)}
.br-nav a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.br-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.br-swatches-sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.br-sw{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.br-sw i{display:block;height:96px}.br-swatches-sm .br-sw i{height:56px}
.br-sw div{padding:10px 12px;font-size:13px;line-height:1.4}.br-sw b{font-family:var(--font-mono);font-size:14px;display:block}.br-sw code{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.br-type{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:6px 40px;margin-bottom:28px}
.br-type div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-inverse,rgba(255,255,255,.14));min-width:0}
.br-type span{font-family:'Moula',var(--font-display);font-size:26px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.br-type small{flex:none;font-family:var(--font-mono);font-size:12px;color:var(--faint);white-space:nowrap}
@media (max-width:520px){.br-type{grid-template-columns:1fr}}
.br-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}.br-cols-13{grid-template-columns:1fr 2fr}
@media (max-width:900px){.br-cols,.br-cols-13{grid-template-columns:1fr}}
.br-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45;margin:8px 0 12px}
.br-table th{text-align:left;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line-strong)}
.br-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}.br-table td:first-child{font-weight:600}
.br-table code{font-family:var(--font-mono);font-size:12.5px;background:var(--subtle);padding:1px 5px;border-radius:5px}
.br-rules{margin:8px 0 0;padding-left:20px;font-size:15px;line-height:1.55}.br-rules li{margin:0 0 8px}
.br-rules code{font-family:var(--font-mono);font-size:13px;background:var(--subtle);padding:1px 5px;border-radius:5px}
.br-rules-no li::marker{content:'✕ ';color:var(--danger)}.br-rules-ol{list-style:decimal}
.br-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.br-logo{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.br-logo .bg{display:flex;align-items:center;justify-content:center;height:150px;padding:22px}.br-logo .bg img{max-width:100%;max-height:100%;object-fit:contain}
.br-logo .bg-dark{background:var(--ink)}.br-logo .bg-yellow{background:var(--yellow)}.br-logo .bg-white{background:#fff;border-bottom:1px solid var(--line)}
.br-logo figcaption{padding:10px 12px;font-size:13px;line-height:1.4}.br-logo figcaption code{font-family:var(--font-mono);font-size:12px;color:var(--muted);display:block;word-break:break-all}
.br-comp{border-top:1px solid var(--line)}
.br-comp-row{display:grid;grid-template-columns:280px 1fr;gap:20px 32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.br-comp-l{font-weight:700;font-size:17px}.br-comp-l small{display:block;font-weight:400;font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:6px}
.br-comp-l code{font-family:var(--font-mono);font-size:12px;background:var(--subtle);padding:1px 4px;border-radius:4px}
.br-comp-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.br-dark-chip{display:inline-flex;padding:8px;border-radius:14px;background:var(--ink)}
.br-tabs{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.br-numcircle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--yellow);font-weight:900;font-size:18px}
.br-numcircle-y{background:var(--yellow);color:var(--ink)}
.br-progress{display:inline-block;width:220px;height:6px;border-radius:999px;background:rgba(33,34,37,.08);overflow:hidden;vertical-align:middle}.br-progress i{display:block;height:100%;background:var(--yellow);border-radius:999px}
@media (max-width:760px){.br-comp-row{grid-template-columns:1fr}}
.br-blank-preview{width:100%;border:1px solid var(--line);border-radius:var(--r-md)}
.br-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;background:var(--ink);color:#E8EAED;padding:16px 18px;border-radius:var(--r-md);overflow-x:auto;white-space:pre-wrap;word-break:break-word;margin:8px 0 0}
.br-key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--yellow-soft);padding:3px 8px;border-radius:6px;word-break:break-all}
.br-details{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;margin:10px 0}.br-details summary{cursor:pointer;font-weight:600;font-size:15px}
.br-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.br-prod{display:grid;grid-template-columns:72px 1fr;gap:12px;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;background:#fff;font-size:13px;line-height:1.4}
.br-prod img{width:72px;height:72px;object-fit:contain}.br-prod b{display:block;font-size:14px;margin-bottom:3px}.br-prod code{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);display:block;word-break:break-all}
.br-files{list-style:none;margin:8px 0 0;padding:0}.br-files li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.br-files small{font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}
/* тёмные секции гайда: контраст подписей, чипов кода и границ */
.diff-bg .lead,.diff-bg .muted,.diff-bg .note,.diff-bg .br-table th,.diff-bg .ico-meta dt,.diff-bg .br-comp-l small,.diff-bg .br-files small{color:var(--faint)}
.diff-bg a{color:#fff;text-decoration-color:var(--yellow)}
.diff-bg .br-table td,.diff-bg .br-table th,.diff-bg .br-files li,.diff-bg .br-type div{border-color:var(--line-inverse)}
.diff-bg .ico-meta{border-color:var(--line-inverse)}
.diff-bg .br-rules code,.diff-bg .br-table code,.diff-bg .ico-meta code,.diff-bg .br-comp-l code,.diff-bg .lead code{background:rgba(255,255,255,.14);color:#fff}
.diff-bg .br-table code.br-key{background:var(--yellow);color:var(--ink)}
.ico-grid figcaption{word-break:normal;overflow-wrap:anywhere;hyphens:auto}
.diff-bg .br-code{background:#0F1012;border:1px solid var(--line-inverse)}
.diff-bg .br-details{border-color:var(--line-inverse)}
.diff-bg .br-rules-no li::marker{color:#FF8A7A}
/* стрелки листания слайдов (правило для веб-презентаций) */
.br-arrows{display:inline-flex;align-items:center;gap:12px}
.br-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:inline-grid;place-items:center;cursor:pointer}
.br-arrow svg{width:22px;height:22px}
.br-arrow:disabled{opacity:.35;cursor:default}
.br-arrows-n{font-family:var(--font-mono);font-size:14px;color:var(--muted)}
.br-arrows-dark{padding:10px 16px}.br-arrows-dark .br-arrow{border-color:#fff;color:#fff}.br-arrows-dark .br-arrows-n{color:var(--faint)}
.br-slides{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:12px 0 20px}
.br-slide{position:relative;aspect-ratio:16/9;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.br-slide b{font-size:24px;font-weight:900;line-height:1.1}
.br-slide .br-arrows{position:absolute;right:18px;bottom:16px}
.br-slide .br-arrow{width:44px;height:44px}.br-slide .br-arrow svg{width:19px;height:19px}
.br-slide-w{background:#fff;color:var(--ink)}
.br-slide-d{background:var(--ink-2);color:#fff;border:1px solid var(--line-inverse)}
.br-slide-d .br-arrow{border-color:#fff;color:#fff}.br-slide-d .br-arrows-n{color:var(--faint)}
.br-slide-y{background:var(--yellow);color:var(--ink)}.br-slide-y .br-arrows-n{color:var(--ink)}
.diff-bg .br-slide-w .eyebrow{color:var(--muted)}.diff-bg .br-slide-y .eyebrow{color:var(--ink)}
.diff-bg .br-slide .eyebrow{margin-bottom:0;font-size:11px}
/* текстуры материалов, иконки документов, подбор sozh */
.br-tex{display:block;width:84px;height:84px;border-radius:50%;background-size:cover;background-position:center;border:1px solid var(--line)}
.br-docrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.br-docrow:last-child{border-bottom:0}.br-docrow img{width:48px;height:48px;flex:none}
.br-docrow b{display:block;font-size:15px;font-weight:600}.br-docrow small{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.br-docrow .btn{margin-left:auto;height:40px;padding:0 18px;font-size:13px}
.br-demo{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:24px;margin:0 0 18px}
.br-demo .mat-chip{color:var(--ink)}
.br-seg{display:inline-flex;gap:4px;background:var(--subtle);padding:5px;border-radius:100px;border:1px solid var(--line)}
.br-seg button{padding:11px 20px;border-radius:100px;border:0;background:transparent;font:inherit;font-weight:600;font-size:15px;color:var(--muted);cursor:pointer}
.br-seg button.on{background:var(--ink);color:#fff}
.br-sel{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:16px}
.br-sel .sel-tile{position:relative;padding:20px 96px 20px 20px;min-height:0;border:1px solid var(--line);border-radius:20px;background:#fff;display:flex;flex-direction:column;gap:12px}
.br-sel .sel-tile .sub{font-family:var(--font-mono);font-size:13px;color:var(--muted);text-transform:uppercase}
.br-sel .sel-tile .nm{font-weight:600;font-size:17px}
.br-sel .sel-tile .skus{display:flex;flex-wrap:wrap;gap:6px 12px;font-family:var(--font-mono);font-size:15px}
.br-sel .sel-tile .skus span{border-bottom:2px solid var(--yellow);padding-bottom:1px}
.br-sel .tico{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:68px;height:68px;object-fit:contain}
/* широкие иллюстрации с полным кадром (карточки 4:3) */
.ico-wide-43 img{aspect-ratio:4/3;object-fit:contain;background:#fff}
/* ---------- Категория «Режущий инструмент»: ссылки в каталоге и на главной; стили ins-* — статья-обзор
(первый вариант страницы категории, с 07.10.2026 живёт в статьях) ---------- */
.tabs-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.tabs-row .cat-tabs,.tabs-row .hc-tabs{margin:0}
.hc-tabs-row{margin:0 0 28px}
.tabs-link{height:44px;padding:0 18px;font-size:16px;font-family:var(--font-mono);font-weight:600;border:1px solid var(--line-strong);text-decoration:none;color:var(--ink);cursor:pointer;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,border-color var(--dur-hover) ease}
@media (min-width:761px){.tabs-link{padding:0 30px;justify-content:center}}
@media (hover:hover) and (pointer:fine){.tabs-link:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.brand-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){.brand-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.brand-grid-4{grid-template-columns:1fr}}
.brand-card.bc-g-instrument{border:none;color:#fff;background-size:cover;background-position:center top}
.bc-g-instrument{background-image:url('/assets/img/wide/card-instrument.jpg')}
[id^="clamping"],#deburring,#range,#deep-drilling,#services{scroll-margin-top:96px}
.ins-nav .pill{height:40px;padding:0 18px;font-family:var(--font-mono);font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,border-color var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){.ins-nav .pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.ins-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ins-split-rev{grid-template-columns:.95fr 1.05fr}
.ins-fig{margin:0;border-radius:var(--r-2xl);overflow:hidden;background:var(--subtle)}
.ins-fig img{width:100%;height:auto;display:block}
.ins-prose p{margin:0 0 16px;font-size:18px;line-height:1.5}
.ins-prose p:last-child{margin-bottom:0}
.ins-more{margin:26px 0 0;font-size:17px}
.ins-sub{margin:56px 0 24px;max-width:900px}
.ins-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ins-stat{border:1px solid var(--line);border-radius:var(--r-xl);padding:28px 24px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.ins-stat .n{font-family:var(--font-display);font-weight:900;font-size:clamp(48px,5vw,72px);line-height:1}
.ins-stat .l{font-size:16px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:11 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4}
.ins-grid{display:grid;gap:16px}
.ins-grid-3{grid-template-columns:repeat(3,1fr)}
.ins-grid-4{grid-template-columns:repeat(4,1fr)}
.ins-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;background:#fff;display:flex;flex-direction:column;gap:10px}
.ins-card .ic-tile{--tile:52px;margin-bottom:8px}
.ins-card .nm{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.15}
.ins-card .nm span{display:block;margin-top:4px;font-family:var(--font-body,inherit);font-weight:400;font-size:16px;color:var(--muted)}
.ins-card .tx{margin:0;color:var(--muted);font-size:16px;line-height:1.4}
.ins-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px;margin:44px 0 0}
.ins-feat-2{grid-template-columns:repeat(2,1fr);margin-top:30px}
.ins-feat-1{grid-template-columns:1fr;margin-top:28px;gap:20px}
.ins-feat-4{grid-template-columns:repeat(4,1fr)}
.ins-fi{display:flex;gap:16px;align-items:flex-start}
.ins-fi .ic-tile{--tile:48px}
.ins-fi b{display:block;font-size:18px;font-weight:700;line-height:1.25}
.ins-fi > div > span{display:block;margin-top:4px;color:var(--muted);font-size:15px;line-height:1.4}
.ins-feat-short .ins-fi{align-items:center}
.ins-tbl{border:1px solid var(--line);border-radius:var(--r-xl);overflow-x:auto}
.ins-tbl table{width:100%;border-collapse:collapse}
.ins-tbl th{background:var(--ink);color:#fff;text-align:left;font-family:var(--font-mono);font-size:13px;font-weight:600;text-transform:uppercase;padding:14px 22px}
.ins-tbl td{padding:18px 22px;vertical-align:top;font-size:16px;line-height:1.45;border-top:1px solid var(--line)}
.ins-tbl td:first-child{font-weight:700;width:34%}
.ins-tbl tbody tr:nth-child(even) td{background:var(--subtle)}
.ins-lists{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ins-list{border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;background:#fff}
.ins-list .nm{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.2;margin:0}
.ins-list ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ins-list li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.35}
.ins-list li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.ins-svc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ins-svc figure{margin:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
.ins-svc img{width:100%;height:auto;display:block}
.ins-svc figcaption{padding:20px 24px 24px;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.15}
.ins-svc + .ins-feat{margin-top:36px}
.ins-dark h2{max-width:none}
.ins-dark .lead{color:var(--faint);margin-top:0}
.ins-promise h2{font-size:clamp(34px,4.6vw,66px);line-height:1.04;max-width:22ch;margin-bottom:var(--space-6)}
.ins-promise .lead{font-size:clamp(17px,1.4vw,20px)}
.ins-quality .diff-grid{margin-top:8px}
.ins-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.ins-chips .pill{height:40px;padding:0 20px;font-size:15px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.4)}
button.link-y.ins-ask,a.link-y.ins-ask{font-weight:600;font-size:17px;line-height:1.3;text-align:left;border-bottom:2px solid var(--yellow);padding:0 0 2px;transition:border-color var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){button.link-y.ins-ask:hover,a.link-y.ins-ask:hover{border-bottom-color:var(--ink)}}
.ins-brt{margin-top:64px}
[data-od-id^="ins-"] h2,.ins-sub{text-wrap:balance}
@media (max-width:1024px){
.ins-grid-4,.ins-lists{grid-template-columns:1fr 1fr}
.ins-grid-3{grid-template-columns:1fr 1fr}
.ins-feat{grid-template-columns:1fr 1fr}
.ins-feat-4{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.ins-split,.ins-split-rev{grid-template-columns:1fr;gap:28px}
.ins-svc{grid-template-columns:1fr}
}
@media (max-width:640px){
.ins-grid-3,.ins-grid-4,.ins-lists,.ins-feat,.ins-feat-2,.ins-feat-4{grid-template-columns:1fr}
.ins-stats{gap:12px}
.ins-stat{padding:20px 16px}
.ins-stat .l{font-size:14px}
.ins-tbl table,.ins-tbl tbody,.ins-tbl tr,.ins-tbl td{display:block;width:100%}
.ins-tbl thead{display:none}
.ins-tbl td{padding:0 18px 18px;border-top:none}
.ins-tbl td:first-child{width:100%;padding-top:18px;padding-bottom:6px}
.ins-tbl tbody tr+tr{border-top:1px solid var(--line)}
.ins-tbl tbody tr:nth-child(even) td{background:transparent}
.ins-tbl tbody tr:nth-child(even){background:var(--subtle)}
.ins-sub{margin-top:40px}
}
/* ---------- Страница категории «Режущий инструмент» (/catalog/instrument/), дизайн презентации ----------
Колода BORFI_presentation на странице сайта: цветные слайды — скруглённые панели,
жёлтый титул → белая середина с тёмными блоками. Один жёлтый акцент на экран,
поэтому знаки стоят на серых плашках, а не на жёлтых. */
.pv{--pv-gap:clamp(44px,5.8vw,92px);--pv-pad:clamp(22px,4.4vw,64px);--pv-r:clamp(22px,2.3vw,32px)}
.pv section{padding:calc(var(--pv-gap)/2) 0;border-top:0}
.pv .pv-top{padding-top:clamp(18px,2.2vw,32px)}
.pv section[id]{scroll-margin-top:96px}
.pv-progress{display:none}
@supports (animation-timeline:scroll()){
.pv-progress{display:block;position:fixed;top:0;left:0;z-index:60;width:100%;height:4px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;animation:pv-progress linear both;animation-timeline:scroll(root block)}
@keyframes pv-progress{to{transform:scaleX(1)}}
}
.pv-panel{border-radius:var(--pv-r);padding:var(--pv-pad)}
.pv-y{background:var(--yellow);color:var(--ink)}
.pv-d{padding-top:clamp(30px,5vw,72px);padding-bottom:clamp(30px,5vw,72px)}
.pv-eb{display:block;margin:0 0 clamp(12px,1.5vw,22px);font-family:var(--font-display);font-weight:600;font-size:clamp(12px,1.02vw,15px);line-height:1.2;text-transform:uppercase;color:var(--ink)}
.pv-d .pv-eb{color:var(--faint)}
.pv .pv-h{font-size:clamp(27px,3.75vw,54px);line-height:1.07;max-width:17.5em;text-wrap:balance}
.pv .pv-h-xl{font-size:clamp(29px,6.1vw,88px);max-width:none}
.pv .pv-h1{font-size:clamp(32px,5vw,72px);line-height:1.05;max-width:11.5em;text-wrap:balance}
.pv .pv-y .tba-block{background:var(--ink)}
.pv-y :focus-visible{outline-color:var(--ink)}
.pv-lead{margin:clamp(14px,1.6vw,22px) 0 0;max-width:62ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--ink)}
.pv-d .pv-lead{color:var(--faint)}
.pv-head{margin-bottom:clamp(26px,3.4vw,52px)}
.pv-more{margin:clamp(22px,2.8vw,40px) 0 0}
.pv .btn{height:52px;padding:0 26px;font-size:15px;font-weight:600}
.pv-text{margin-top:clamp(20px,2.6vw,40px)}
.pv-text p{margin:0 0 1.05em;max-width:60ch;font-size:clamp(16px,1.35vw,20px);line-height:1.6}
.pv-text p:last-child{margin-bottom:0}
.pv-photo{margin:0;border-radius:var(--pv-r);overflow:hidden;background:var(--subtle)}
.pv-photo picture{display:block;width:100%;height:100%}
.pv-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pv-ph-sq{aspect-ratio:16/15}
.pv-ph-45{aspect-ratio:4/5}
.pv-ph-34{aspect-ratio:3/4}
.pv-ph-wide{aspect-ratio:21/9}
.pv .ic-tile{--tile:clamp(46px,3.8vw,54px);background:var(--subtle);border-radius:28%}
/* титул */
.pv-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,26vw,372px);gap:clamp(22px,4vw,64px);min-height:clamp(440px,45vw,660px)}
.pv-hero-t{display:flex;flex-direction:column;min-width:0}
.pv-hero-lead{margin:auto 0 0;padding-top:clamp(28px,4vw,56px);max-width:31ch;font-size:clamp(17px,1.55vw,22px);line-height:1.45}
.pv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(20px,2.3vw,32px)}
.pv-hero-photo{position:relative;border-radius:clamp(18px,2vw,28px);background:var(--ink)}
.pv-hero-photo picture{position:absolute;inset:0}
.pv-hero-photo img{object-position:50% 88%}
.pv-arrow{display:inline-grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}
.pv-arrow svg{width:20px;height:20px;transform:rotate(90deg)}
.pv-arrow:active{transform:scale(.94)}
.pv-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.2vw,28px)}
.pv-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line-strong);font-weight:600;font-size:15px;line-height:1.2;color:var(--ink);text-decoration:none;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,border-color var(--dur-hover) ease}
@media (hover:hover) and (pointer:fine){
.pv-arrow:hover{background:var(--ink);color:var(--yellow)}
.pv-nav a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
}
/* текст + фото или карточка */
.pv-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,84px);align-items:center}
.pv-col{min-width:0}
.pv-split-photo{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.pv-split-card{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.pv-split-wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.pv-side{display:grid;gap:clamp(14px,1.6vw,24px);min-width:0}
.pv-ypill{margin:0;display:flex;align-items:center;justify-content:center;min-height:clamp(52px,4.6vw,66px);padding:10px 24px;border-radius:var(--r-pill);background:var(--yellow);font-family:var(--font-display);font-weight:900;font-size:clamp(16px,1.4vw,20px);line-height:1.2;text-align:center}
.pv-ycard{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(280px,29vw,420px);padding:clamp(26px,3.4vw,48px);border-radius:var(--pv-r);background:var(--yellow)}
.pv-ycard .n{font-family:var(--font-display);font-weight:900;font-size:clamp(104px,11.4vw,168px);line-height:.82}
.pv-ycard p{margin:clamp(20px,2.4vw,36px) 0 0;max-width:19ch;font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.5vw,22px);line-height:1.38}
/* карточки: ценности, шесть направлений, услуги */
.pv-vals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pv-vcard{display:flex;align-items:center;gap:clamp(16px,1.8vw,24px);padding:clamp(22px,2.6vw,36px);border:1px solid var(--line-strong);border-radius:var(--pv-r);background:#fff}
.pv-vcard h3{margin:0 0 8px;font-family:var(--font-display);font-weight:900;font-size:clamp(18px,1.6vw,23px);line-height:1.15}
.pv-vcard p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.5}
.pv-ncards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);counter-reset:pvn}
.pv-ncard{counter-increment:pvn;display:flex;flex-direction:column;min-height:clamp(190px,15.6vw,224px);padding:clamp(22px,2.4vw,32px);border:1px solid var(--line-strong);border-radius:var(--pv-r);background:var(--subtle)}
.pv-ncard::before{content:counter(pvn,decimal-leading-zero);margin-bottom:auto;padding-bottom:18px;font-family:var(--font-display);font-weight:900;font-size:clamp(18px,1.6vw,23px);line-height:1}
.pv-ncard h3{margin:0 0 10px;font-family:var(--font-display);font-weight:900;font-size:clamp(18px,1.6vw,23px);line-height:1.2}
.pv-ncard p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.5}
.pv-scards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pv-scard{display:grid;grid-template-columns:clamp(116px,37%,236px) minmax(0,1fr);align-items:center;min-height:clamp(170px,18vw,256px);border:1px solid var(--line-strong);border-radius:var(--pv-r);overflow:hidden;background:#fff}
.pv-scard.is-y{background:var(--yellow);border-color:var(--yellow)}
.pv-scard .pv-photo{height:100%;border-radius:0}
.pv-scard h3{margin:0;padding:clamp(18px,2.2vw,32px);font-family:var(--font-display);font-weight:900;font-size:clamp(18px,1.75vw,25px);line-height:1.2}
/* пункты со знаками на серых плашках */
.pv-feats{list-style:none;margin:clamp(26px,3.4vw,48px) 0 0;padding:0;display:grid;gap:clamp(18px,2vw,28px)}
.pv-feats-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px)}
.pv-feats-4{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.pv-feats li{display:flex;align-items:flex-start;gap:clamp(12px,1.3vw,18px);min-width:0}
.pv-feats .ic-tile{--tile:clamp(42px,3.3vw,46px)}
.pv-feats b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(16px,1.3vw,19px);line-height:1.2}
.pv-feats p{margin:6px 0 0;font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:var(--muted)}
.pv-feats-short li{align-items:center}
/* тёмные панели: качество и ассортимент BRT */
.pv-cols3{list-style:none;margin:clamp(30px,4.4vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,40px)}
.pv-cols3 li{border-top:2px solid var(--yellow);padding-top:clamp(18px,2.2vw,32px)}
.pv-cols3 h3{margin:0 0 12px;font-family:var(--font-display);font-weight:900;font-size:clamp(17px,1.4vw,20px);line-height:1.25;color:#fff}
.pv-cols3 p{margin:0;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:var(--faint)}
.pv-chips{list-style:none;margin:clamp(30px,4.6vw,76px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pv-chips + .pv-chips{margin-top:10px}
.pv-chips li{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.34);font-family:var(--font-display);font-weight:800;font-size:clamp(14px,1.15vw,17px);line-height:1.2;color:#fff}
.pv-ocards{list-style:none;margin:clamp(26px,3.4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pv-ocards > li{padding:clamp(20px,2.2vw,30px);border:1.5px solid rgba(255,255,255,.26);border-radius:var(--pv-r)}
.pv-ocards h3{margin:0 0 clamp(14px,1.6vw,22px);font-family:var(--font-display);font-weight:900;font-size:clamp(16px,1.35vw,19px);line-height:1.25;color:#fff}
.pv-ocards ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.1vw,14px)}
.pv-ocards ul li{font-size:clamp(14px,1.15vw,16px);line-height:1.45;color:var(--faint)}
/* таблица ассортимента */
.pv-tbl{border:1px solid var(--line-strong);border-radius:var(--pv-r);overflow:hidden}
.pv-tbl table{width:100%;border-collapse:collapse}
.pv-tbl th,.pv-tbl td{padding:clamp(16px,1.7vw,24px) clamp(18px,2.2vw,30px);text-align:left;vertical-align:middle}
.pv-tbl thead th{background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:600;font-size:clamp(12px,1vw,14px);line-height:1.2;text-transform:uppercase}
.pv-tbl tbody th{width:36%;font-family:var(--font-display);font-weight:900;font-size:clamp(16px,1.35vw,19px);line-height:1.3}
.pv-tbl tbody td{font-size:clamp(15px,1.2vw,17px);line-height:1.55}
.pv-tbl tbody tr:nth-child(odd){background:var(--subtle)}
.pv-tbl tbody tr.is-y{background:var(--yellow)}
@media (max-width:1100px){
.pv-feats-4,.pv-ocards,.pv-ncards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
.pv-split,.pv-split-photo,.pv-split-card,.pv-split-wide{grid-template-columns:1fr}
.pv-split-photo .pv-photo,.pv-side,.pv-split > .pv-ph-sq{max-width:520px}
.pv-cols3,.pv-scards{grid-template-columns:1fr}
.pv-ycard{min-height:0}
}
@media (max-width:760px){
.pv-hero{grid-template-columns:1fr;min-height:0}
.pv-hero-lead{margin-top:0}
.pv-hero-photo{aspect-ratio:5/4}
.pv-hero-photo img{object-position:50% 94%}
.pv-vals,.pv-feats-2{grid-template-columns:1fr}
.pv-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pv-tbl tr{display:block;padding:18px 20px}
.pv-tbl th,.pv-tbl td{display:block;padding:0}
.pv-tbl tbody th{width:auto;margin-bottom:8px}
}
@media (max-width:600px){
.pv-feats-4,.pv-ocards,.pv-ncards{grid-template-columns:1fr}
.pv-ncard{min-height:0}
.pv-ncard::before{margin-bottom:22px;padding-bottom:0}
.pv-vcard{align-items:flex-start}
.pv-scard{grid-template-columns:116px minmax(0,1fr);min-height:150px}
}
@media (prefers-reduced-motion:reduce){.pv-arrow,.pv-nav a{transition:none}.pv-progress{display:none}}
/* ==== ai.css ==== */
/* borfi.ru · ai.css — ИИ-подбор: карточка в hero (/ai/), чат-drawer, плавающая кнопка.
Только существующие токены сайта: тёмный фон, фирменный жёлтый, белая карточка. */
/* ---------- карточка в hero + портрет инженера за карточкой ---------- */
.hero-side{position:relative}
.hero-side .hero-form{position:relative;z-index:1}
.hero-person{--ph:clamp(300px,29.4vw,411px);position:absolute;top:calc(-.062*var(--ph));bottom:0;right:calc(100% - .124*var(--ph));width:calc(.518*var(--ph));overflow:hidden;z-index:0;pointer-events:none;user-select:none}
.hero-person img{height:100%;width:auto;max-width:none;display:block}
@media (min-width:901px) and (max-width:1180px){.hero-person{display:none}}
.ai-card{display:flex;flex-direction:column}
.ai-card .ttl{margin-top:4px}
.ai-card .sub{margin-bottom:16px}
.ai-form{display:flex;flex-direction:column;gap:12px}
.ai-form textarea{width:100%;resize:none;overflow:hidden;min-height:52px;max-height:120px;line-height:1.3;
font:inherit;font-size:18px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);
background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.ai-form textarea::placeholder{color:var(--muted)}
.ai-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,200,40,.35)}
.ai-form textarea.is-shake{animation:ai-shake .4s ease;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,200,40,.5)}
@keyframes ai-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ai-card.is-hint{box-shadow:0 0 0 3px var(--yellow);transition:box-shadow .3s}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ai-chip{cursor:pointer;height:32px;padding:0 14px;font-size:15px;transition:background .2s,border-color .2s,color .2s}
.ai-chip:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ai-chip:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.ai-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:18px;
padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.ai-foot .link-y{font-size:15px;color:var(--ink);white-space:nowrap;font-weight:500}
@media (max-width:760px){
/* плейсхолдер в две строки: поле выше, текст не прижимается к нижнему краю */
.ai-form textarea{min-height:80px}
.ai-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-22px;margin-right:-22px;padding:0 22px}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chip{flex:0 0 auto}
}
/* ---------- drawer ---------- */
.ai-overlay{position:fixed;inset:0;background:rgba(33,34,37,.5);z-index:var(--z-drawer);opacity:0;pointer-events:none;transition:opacity .25s ease}
.ai-overlay.open{opacity:1;pointer-events:auto}
.ai-drawer{position:fixed;top:0;right:0;bottom:0;width:min(500px,100vw);background:#fff;color:var(--ink);z-index:calc(var(--z-drawer) + 1);
display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s var(--ease-out,ease);box-shadow:-24px 0 60px rgba(0,0,0,.18);
height:100dvh;height:var(--ai-vh,100dvh)}
.ai-drawer.open{transform:translateX(0)}
.ai-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.ai-head .who{flex:1;min-width:0}
.ai-head .nm{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;line-height:1.1;display:flex;align-items:center;gap:8px}
.ai-head .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(255,200,40,.3);flex:0 0 auto}
.ai-head .dsc{font-size:15px;color:var(--muted);margin-top:4px}
.ai-head .handoff{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:14px;text-transform:uppercase;
letter-spacing:.02em;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;border-bottom:2px solid var(--yellow)}
.ai-close{width:40px;height:40px;border-radius:var(--r-full);border:1px solid var(--line-strong);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;color:var(--ink)}
.ai-close svg{width:18px;height:18px}
.ai-close:hover{background:var(--surface-hover,#f4f4f5)}
.ai-log{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.ai-msg{max-width:92%;font-size:18px;line-height:1.3}
.ai-msg.user{align-self:flex-end;background:var(--ink);color:#fff;border-radius:16px 16px 4px 16px;padding:12px 16px;white-space:pre-wrap}
.ai-msg.bot{align-self:flex-start;background:var(--subtle,#f6f6f7);border-radius:16px 16px 16px 4px;padding:14px 16px}
.ai-msg.bot p{margin:0 0 10px}
.ai-msg.bot p:last-child{margin-bottom:0}
.ai-msg.bot ul,.ai-msg.bot ol{margin:0 0 10px;padding-left:20px}
.ai-msg.bot li{margin:4px 0}
.ai-msg.bot a{color:var(--ink);border-bottom:2px solid var(--yellow);text-decoration:none}
.ai-msg.bot strong{font-weight:700}
.ai-msg.bot .caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:ai-caret 1s steps(2) infinite}
@keyframes ai-caret{50%{opacity:0}}
.ai-msg.error{background:#fff;border:1px solid var(--line-strong)}
.ai-msg.error .btn{margin-top:10px}
.ai-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;align-self:flex-start;max-width:92%}
.ai-actions .btn{height:36px;padding:0 14px;font-size:16px}
.ai-lead{align-self:flex-start;max-width:92%;border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:14px 16px;background:#fff}
.ai-lead .t{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:17px;margin:0 0 10px}
.ai-lead .row{display:flex;gap:8px}
.ai-lead input[type=email],.ai-lead input[type=text],.ai-lead input[type=tel]{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);font:inherit;font-size:17px;background:#fff;color:var(--ink)}
.ai-lead input[type=email]:focus,.ai-lead input[type=text]:focus,.ai-lead input[type=tel]:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,200,40,.35)}
.ai-lead .btn{height:40px;padding:0 16px;font-size:16px}
.ai-lead .check{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:var(--muted);margin-top:10px;cursor:pointer}
.ai-lead .check input{margin-top:2px}
.ai-lead .done{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px}
.ai-lead .done i{width:22px;height:22px;border-radius:50%;background:var(--yellow);display:inline-flex;align-items:center;justify-content:center}
.ai-lead .done svg{width:12px;height:12px}
.ai-typing{align-self:flex-start;color:var(--muted);font-size:16px;padding:0 4px}
.ai-input{border-top:1px solid var(--line);padding:14px 22px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:flex-end;background:#fff}
.ai-input textarea{flex:1;resize:none;overflow:hidden;min-height:44px;max-height:120px;font:inherit;font-size:18px;line-height:1.25;padding:11px 14px;
border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;color:var(--ink)}
.ai-input textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,200,40,.35)}
.ai-send{width:44px;height:44px;border-radius:var(--r-full);border:0;background:var(--yellow);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.ai-send svg{width:18px;height:18px}
.ai-send:hover{background:var(--yellow-hover,#f0b400)}
.ai-send:focus-visible,.ai-close:focus-visible,.ai-head .handoff:focus-visible,.ai-actions .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:760px){
.ai-drawer{width:100vw}
.ai-head{padding:16px 18px 12px}
.ai-log{padding:16px 18px}
.ai-input{padding-left:18px;padding-right:18px}
}
/* ---------- плавающая кнопка ---------- */
.ai-fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;
background:var(--ink);color:#fff;border:0;box-shadow:0 10px 30px rgba(0,0,0,.25);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:var(--z-sticky)}
.ai-fab::after{content:"";position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink)}
.ai-fab svg{width:26px;height:26px}
.ai-fab:hover{transform:translateY(-2px)}
.ai-fab:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.ai-fab[hidden]{display:none}
body.ai-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
.ai-overlay,.ai-drawer,.ai-card.is-hint,.ai-chip,.ai-fab{transition:none}
.ai-form textarea.is-shake{animation:none}
.ai-msg.bot .caret{animation:none}
}
/* hero с ИИ-карточкой: заголовок не залезает под портрет; компактный режим (ноутбуки) */
.hero-side ~ * .display,.hero .wrap:has(.hero-side) .display{max-width:600px}
@media (min-width:1025px) and (max-height:860px),(min-width:1025px) and (max-width:1366px){
.hero .wrap:has(.hero-side) .display{max-width:520px}
.hero-person{--ph:clamp(280px,25vw,342px)}
}
/* мобильный: колонка героя не растягивается под нескроллящийся min-content чипов */
.hero .wrap>*{min-width:0}
.hero-side,.ai-card{min-width:0;max-width:100%}
/* мобильный hero по макету: третья строка заголовка, фото инженера по центру, карточка без заголовка */
.hm-only{display:none}
@media (max-width:900px){
.hd-only{display:none}
.hm-only{display:block}
.display .hm-white{color:#fff !important;animation:none !important}
.display .hm-only{color:var(--yellow) !important;animation:none !important}
.hero .hero-lead,.hero .hero-actions{display:none}
.hero-person{display:block;position:static;width:61%;max-width:260px;height:auto;margin:10px auto -6px;overflow:visible;pointer-events:none}
.hero-person img{width:100%;height:auto;margin:0}
.hero-side{display:flex;flex-direction:column}
.ai-card .ttl{display:none}
}
/* CTA «Подобрать онлайн»: мягкое жёлтое свечение + бегущий блик раз в ~4 с */
.btn-glint{position:relative;overflow:hidden}
.btn-glint::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-90px;width:56px;transform:skewX(-22deg);
background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
animation:btn-glint 4s ease-in-out infinite;pointer-events:none}
@keyframes btn-glint{
0%{left:-90px}
28%{left:calc(100% + 40px)}
100%{left:calc(100% + 40px)}
}
@media (prefers-reduced-motion:reduce){.btn-glint::after{animation:none;display:none}}
/* кнопки-действия: скрытая кнопка итога */
.ai-actions .btn[hidden]{display:none}
.ai-lead .col{display:grid;gap:8px}
.ai-lead .col .btn{height:40px}
/* временная кнопка очистки диалога (тестирование) */
.ai-head .ai-clear{margin-top:6px;padding:2px 0;background:none;border:0;cursor:pointer;font-size:14px;color:var(--muted);text-decoration:underline;text-decoration-style:dotted;align-self:flex-start}
.ai-head .ai-clear:hover{color:var(--ink)}
/* ожидание ответа: пузырь с точками и сменяющимся статусом */
.ai-wait{display:flex;align-items:center;gap:10px}
.ai-wait .dots{display:inline-flex;gap:4px;flex:0 0 auto}
.ai-wait .dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ai-dot 1.2s ease-in-out infinite}
.ai-wait .dots i:nth-child(2){animation-delay:.15s}
.ai-wait .dots i:nth-child(3){animation-delay:.3s}
@keyframes ai-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.ai-wait .st{font-size:15px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ai-wait .dots i{animation:none;opacity:.7}}
/* B1: хвост H1 «онлайн за минуту» — на десктопе белый в строку, на мобильном жёлтой строкой */
.display .hm-tail{color:#fff}
@media (max-width:900px){.display .hm-tail{display:block;color:var(--yellow) !important;animation:none !important}}
/* ==== tba.css ==== */
/* Главная: блочная анимация заголовков (по мотивам 21st.dev text-block-animation) */
.tba-ready .tba-line{position:relative;display:block;overflow:hidden}
.tba-ready .tba-in{opacity:0}
.tba-ready .tba-block{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left center;z-index:2;pointer-events:none}
.tba-ready .tba-line.grow .tba-block{transform:scaleX(1);transition:transform .45s cubic-bezier(.87,0,.13,1)}
.tba-ready .tba-line.shrink .tba-block{transform:scaleX(0);transform-origin:right center;transition:transform .45s cubic-bezier(.87,0,.13,1)}
@media (prefers-reduced-motion:reduce){.tba-ready .tba-in{opacity:1}.tba-ready .tba-block{display:none}}