/*
 * site.css — оформление сайта leo-wend.ru.
 *
 * 25.10.2026 — второй редизайн (владелец: «рекламный сайт выглядит ИИшным — выдаёт непонятная палитра и т. д.;
 * посмотри примеры (студийные сайты-портфолио), сделай дизайнерским, фотки завода, красивый каталог, анимации»;
 * «цвет бренда — синий, белый, тёмно-синий, смотря в какой теме»).
 * Что убрано как признаки «сайта из нейросети»: градиентный и переливающийся текст, свечения под кнопками и
 * карточками, сетка-миллиметровка на фонах, «стеклянные» капсулы, моноширинные подписи-номера «01/02», блики,
 * пробегающие по карточкам, голубой второй акцент. Что вместо: большие фотографии (рендеры силомер_3D, съёмка
 * в Blender — ТЦ, цех, ЧПУ, электроника, CRM на ноутбуке и телефоне), строгая типографика, синий только как акцент.
 * 31.10.2026 — рендеры убраны, всё на настоящей съёмке (аппараты вырезаны и стоят прямо на фоне сайта); общий фон
 * сайта — анимированная картинка: настоящий цех (фермы и лампы) медленно плывёт (.site-pic). Блок в конце файла: «настоящие фото».
 *
 * Темы: светлая — белая с синим, тёмная — тёмно-синяя. Класс .dark/.light на <html> (переключатель в шапке)
 * или настройка системы. Шрифт — Ubuntu Sans со своего сервера (static/vendor/fonts): внешние CDN без VPN
 * у части провайдеров не открываются.
 * Движение — static/js/site.js: появление при прокрутке, «шторка» у фотографий, параллакс, счётчики, бегущий ряд
 * цветов, вкладки CRM, 8 ракурсов в каталоге. При «уменьшить движение» в системе всё сразу на месте.
 */

@font-face {
    font-family: 'LW Sans';
    src: url('../vendor/fonts/files/ubuntu-sans-var.woff') format('woff');
    font-weight: 100 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'LW Mono';
    src: url('../vendor/fonts/files/ubuntu-sans-mono-var.woff') format('woff');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ темы
 * 26.10.2026 владелец: «я же сказал — в цвет бренда… синий-белый в белой теме и синий тёмный в тёмной; подвал и плата 3D
 * почему не меняют цвет от темы». Поэтому: в светлой теме текст тёмно-синий (не чёрный), подложки — голубые, всё
 * выделенное — фирменным синим; подвал синий с белым; блок платы и окно 3D светлые. В тёмной — тёмно-синие.
 * Затемнение фотографий — синее (--shade), а не чёрное. */
:root {
    --bg: #ffffff;
    --bg-2: #eef4ff;
    --paper: #ffffff;
    --panel: #e8f0ff;          /* «студия» под силомером в каталоге */
    --ink: #0a1f4d;
    --ink-2: #2b4272;
    --muted: #5d6f97;
    --line: #d5e1f8;
    --line-2: #e6eefd;
    --accent: #1f63ff;
    --accent-hover: #1552e6;
    --accent-soft: rgba(31, 99, 255, .09);
    --accent-ink: #ffffff;
    --ok: #10a36a;
    --shade: 7, 26, 80;        /* затемнение фото: тёмно-синее */
    --shade-solid: #071a50;
    --foot-bg: #f3f7ff;        /* подвал (27.10.2026): светлый, текст тёмно-синий, синий — акцент */
    --foot-ink: #0a1f4d;
    --foot-muted: #5d6f97;
    --foot-line: #d5e1f8;
    --foot-word: #e3ebfc;
    --foot-hover: #1f63ff;
    --foot-card: #ffffff;
    --foot-card-shadow: 0 22px 44px -30px rgba(16, 48, 120, .45);
    --foot-go-ink: #ffffff;
    --viewer-bg: radial-gradient(110% 90% at 50% 25%, #ffffff 0%, #eef4ff 52%, #dbe7ff 100%);
    --viewer-btn: #ffffff;
    --viewer-btn-ink: #0a1f4d;
    --viewer-btn-line: #d5e1f8;
    --tag-bg: #ffffff;
    --tag-ink: #1f63ff;
    --tag-line: #9fbcff;
    --head-bg: #ffffff;
    --shadow: 0 24px 60px -36px rgba(16, 48, 120, .35);
    --radius: 10px;
    --radius-sm: 8px;
    --wrap: 1280px;
    --gutter: 32px;
    --sans: 'LW Sans', 'Ubuntu', 'Segoe UI', Roboto, Arial, sans-serif;
    --mono: 'LW Mono', 'Ubuntu Mono', ui-monospace, Menlo, Consolas, monospace;
    --ease: cubic-bezier(.22, .7, .15, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    /* прежние имена — их читает страница /oblicovka/ */
    --accent-2: var(--accent);
    --glow: transparent;
    color-scheme: light;
}
html.dark {
    --bg: #060e1f;
    --bg-2: #0a1834;
    --paper: #0c1a36;
    --panel: #0f2148;
    --ink: #eaf0ff;
    --ink-2: #c3d0ef;
    --muted: #8b9cc4;
    --line: #1c3060;
    --line-2: #142650;
    --accent: #3a7bff;
    --accent-hover: #5b91ff;
    --accent-soft: rgba(58, 123, 255, .16);
    --ok: #3ad08f;
    --shade: 3, 9, 26;
    --shade-solid: #040a18;
    --foot-bg: #040b19;
    --foot-ink: #eaf0ff;
    --foot-muted: #8b9cc4;
    --foot-line: #16284d;
    --foot-word: #0c1b3c;
    --foot-hover: #8fb4ff;
    --foot-card: rgba(255, 255, 255, .02);
    --foot-card-shadow: none;
    --foot-go-ink: #040b19;
    --viewer-bg: radial-gradient(110% 90% at 50% 25%, #14295a 0%, #0a1733 55%, #060e1f 100%);
    --viewer-btn: rgba(8, 18, 40, .78);
    --viewer-btn-ink: #e8efff;
    --viewer-btn-line: rgba(160, 190, 255, .28);
    --tag-bg: rgba(6, 14, 31, .9);
    --tag-ink: #8fb4ff;
    --tag-line: rgba(143, 180, 255, .55);
    --head-bg: #060e1f;
    --shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    html:not(.light):not(.dark) {
        --bg: #060e1f; --bg-2: #0a1834; --paper: #0c1a36; --panel: #0f2148; --ink: #eaf0ff; --ink-2: #c3d0ef;
        --muted: #8b9cc4; --line: #1c3060; --line-2: #142650; --accent: #3a7bff; --accent-hover: #5b91ff;
        --accent-soft: rgba(58, 123, 255, .16); --ok: #3ad08f; --shade: 3, 9, 26; --shade-solid: #040a18;
        --foot-bg: #040b19; --foot-ink: #eaf0ff; --foot-muted: #8b9cc4; --foot-line: #16284d; --foot-word: #0c1b3c;
        --foot-hover: #8fb4ff; --foot-card: rgba(255, 255, 255, .02); --foot-card-shadow: none; --foot-go-ink: #040b19;
        --viewer-bg: radial-gradient(110% 90% at 50% 25%, #14295a 0%, #0a1733 55%, #060e1f 100%);
        --viewer-btn: rgba(8, 18, 40, .78); --viewer-btn-ink: #e8efff; --viewer-btn-line: rgba(160, 190, 255, .28);
        --tag-bg: rgba(6, 14, 31, .9); --tag-ink: #8fb4ff; --tag-line: rgba(143, 180, 255, .55);
        --head-bg: #060e1f; --shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.6 var(--sans);
    font-stretch: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
main { flex: 1 0 auto; }
img, svg, canvas, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 760px) { :root { --gutter: 16px; } }

/* картинки под тему: .img-light — только в светлой, .img-dark — только в тёмной */
.img-dark, .crm-dark { display: none !important; }
html.dark .img-light, html.dark .crm-light { display: none !important; }
html.dark .img-dark, html.dark .crm-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
    html:not(.light):not(.dark) .img-light, html:not(.light):not(.dark) .crm-light { display: none !important; }
    html:not(.light):not(.dark) .img-dark, html:not(.light):not(.dark) .crm-dark { display: block !important; }
}

/* ------------------------------------------------------------------ типографика */
.display {
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.98;
    font-size: clamp(44px, 6.6vw, 96px);
}
.h2 {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.04;
    font-size: clamp(32px, 4.2vw, 58px);
}
.h3 { font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
/* была переливающаяся градиентом — теперь просто фирменный синий */
.display .hl, .h2 .hl { color: var(--accent); }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.label {
    display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%;
    font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
}
.label::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.label--num::before { content: ''; }
.prose p + p { margin-top: 14px; }
.prose h2 { font-size: 26px; margin: 34px 0 12px; letter-spacing: -0.01em; }
.prose h3 { font-size: 19px; margin: 24px 0 8px; }
.prose ul, .prose ol { margin: 10px 0 10px 1.2em; }
.prose li { margin: 4px 0; }
.prose a { color: var(--accent); }
.prose { color: var(--ink-2); max-width: 74ch; }

/* ------------------------------------------------------------------ кнопки и ссылки */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 28px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 16px; letter-spacing: 0;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn::after {               /* стрелка выезжает при наведении */
    content: ''; width: 0; height: 12px; opacity: 0; margin-left: -10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: width .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}
.btn:hover::after { width: 16px; opacity: 1; margin-left: 0; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--line { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--line:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.btn--ghost:hover { background: transparent; border-color: var(--accent); }
.btn--white { background: #fff; color: #0b1324; }
.btn--white:hover { background: #e8eefc; }
.btn--glass { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.btn--glass:hover { background: #fff; color: #0b1324; border-color: #fff; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: wait; }
.arrow-link {
    display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--accent);
    padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: border-color .3s, color .3s;
}
.arrow-link::after { content: '→'; transition: transform .3s var(--ease); }
.arrow-link:hover { border-color: currentColor; color: var(--accent-hover); }
.arrow-link:hover::after { transform: translateX(5px); }

/* ------------------------------------------------------------------ шапка
 * Ровная полоса, как у студийных сайтов: логотип, меню с подчёркиванием, справа тема, вход в CRM, телефон и
 * «Заказать звонок». На главной поверх фотографии шапка прозрачная и белая, после прокрутки — обычная.
 * При прокрутке вниз уезжает вверх, при прокрутке вверх возвращается (site.js). */
.site-head {
    position: sticky; top: 0; z-index: 40; height: 80px;
    background: var(--head-bg); border-bottom: 1px solid transparent;
    transition: transform .45s var(--ease), background-color .35s, border-color .35s, color .35s;
}
.site-head.is-scrolled { border-bottom-color: var(--line); }
.site-head.is-hidden { transform: translateY(-100%); }
.site-head__row { display: flex; align-items: center; gap: 28px; height: 80px; max-width: calc(1440px + 2 * var(--gutter)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand img { width: 36px; height: 36px; }   /* логотип не крутим (владелец, 14.10) */
.brand b { font-weight: 700; font-size: 21px; letter-spacing: 0.06em; line-height: 1; }
.brand b span { color: var(--accent); }
.nav { position: relative; display: flex; align-items: center; gap: 4px; margin: 0 auto; height: 100%; }
.nav a {
    position: relative; z-index: 1; display: flex; align-items: center; height: 100%;
    text-decoration: none; font-size: 15.5px; font-weight: 500; color: var(--ink-2);
    padding: 0 12px; white-space: nowrap; transition: color .2s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent); }
.nav a::after {             /* без скрипта: черта под пунктом */
    content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--accent);
    transform: scaleX(0); transition: transform .35s var(--ease);
}
.nav a[aria-current="page"]::after { transform: none; }
.nav__glider {              /* со скриптом: черта едет за мышью (site.js) */
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; pointer-events: none;
    background: var(--accent); opacity: 0;
    transition: transform .4s var(--ease), width .4s var(--ease), opacity .25s;
}
.nav.has-glider a::after { display: none; }
.head-tools { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.head-util, .head-contact { display: flex; align-items: center; gap: 4px; }
.head-util__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 8px;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer;
    font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s;
}
.head-util__btn:hover, .head-util__btn[aria-expanded="true"] { color: var(--accent); }
.head-util__btn svg { width: 19px; height: 19px; flex-shrink: 0; }
#theme-btn { padding: 0; }
#theme-icon { display: grid; place-items: center; }
#theme-icon svg { animation: theme-in .45s var(--ease); }
@keyframes theme-in { from { opacity: 0; transform: rotate(-60deg) scale(.7); } }
.head-crm i { font-style: normal; }
.head-contact { gap: 16px; }
.head-contact__phone { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.head-contact__icon { display: none; }
.head-contact__txt { display: grid; line-height: 1.15; text-align: right; }
.head-contact__txt b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .2s; }
.head-contact__txt small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.head-contact__phone:hover b { color: var(--accent); }
.head-contact__cta {
    height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: #fff;
    cursor: pointer; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .25s;
}
.head-contact__cta:hover { background: var(--accent-hover); }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: transparent; cursor: pointer; color: var(--ink); transition: border-color .2s, color .2s, background-color .2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 20px; height: 20px; }
.burger { display: none; }
@media (max-width: 1360px) { .head-crm i { display: none; } .nav a { padding: 0 9px; } .site-head__row { gap: 20px; } }
@media (max-width: 1250px) { .head-contact__txt { display: none; } }
@media (max-width: 1120px) {
    .nav, .head-crm { display: none; }
    .head-contact__txt { display: grid; }
    .burger { display: inline-flex; }
    .site-head__row { justify-content: space-between; }
}
/* шапка поверх фотографии первого экрана (главная): прозрачная и белая, пока не прокрутили */
.has-photo-hero .site-head:not(.is-scrolled) { background: transparent; color: #fff; }
.has-photo-hero .site-head:not(.is-scrolled) .nav a,
.has-photo-hero .site-head:not(.is-scrolled) .head-util__btn,
.has-photo-hero .site-head:not(.is-scrolled) .head-contact__phone,
.has-photo-hero .site-head:not(.is-scrolled) .brand b { color: #fff; }
.has-photo-hero .site-head:not(.is-scrolled) .head-contact__txt small { color: rgba(255, 255, 255, .7); }
.has-photo-hero .site-head:not(.is-scrolled) .brand b span { color: #8fb4ff; }
.has-photo-hero .site-head:not(.is-scrolled) .icon-btn { color: #fff; border-color: rgba(255, 255, 255, .4); }
.has-photo-hero .site-head:not(.is-scrolled) .nav__glider { background: #fff; }
.has-photo-hero .site-head { margin-bottom: -80px; }

/* выпадающее меню темы */
.theme { position: relative; }
.theme__menu {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; padding: 6px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); animation: pop .2s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.theme__menu button {
    display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px;
    border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left; font-size: 14.5px; color: var(--ink);
}
.theme__menu button:hover { background: var(--bg-2); color: var(--accent); }
.theme__menu svg { width: 16px; height: 16px; }

/* мобильное меню — на весь экран справа */
.drawer-back { position: fixed; inset: 0; z-index: 60; background: rgba(4, 10, 24, .55); opacity: 0; pointer-events: none; transition: opacity .35s; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, 100vw);
    background: var(--bg); color: var(--ink); border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .5s var(--ease-out);
    display: flex; flex-direction: column; overflow-y: auto;
}
.drawer-open .drawer { transform: none; }
.drawer-open .drawer-back { opacity: 1; pointer-events: auto; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.drawer nav { display: flex; flex-direction: column; padding: 10px var(--gutter); }
.drawer nav a {
    text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--line-2);
    font-weight: 600; font-size: 24px; letter-spacing: -0.01em;
    opacity: 0; transform: translateX(30px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .2s;
}
.drawer-open .drawer nav a { opacity: 1; transform: none; }
.drawer-open .drawer nav a:nth-child(2) { transition-delay: .03s; }
.drawer-open .drawer nav a:nth-child(3) { transition-delay: .06s; }
.drawer-open .drawer nav a:nth-child(4) { transition-delay: .09s; }
.drawer-open .drawer nav a:nth-child(5) { transition-delay: .12s; }
.drawer-open .drawer nav a:nth-child(6) { transition-delay: .15s; }
.drawer-open .drawer nav a:nth-child(7) { transition-delay: .18s; }
.drawer-open .drawer nav a:nth-child(8) { transition-delay: .21s; }
.drawer-open .drawer nav a:nth-child(9) { transition-delay: .24s; }
.drawer-open .drawer nav a:nth-child(10) { transition-delay: .27s; }   /* «Проверка по номеру», 29.10.2026 */
.drawer nav a:hover, .drawer nav a[aria-current="page"] { color: var(--accent); }
.drawer__foot { margin-top: auto; padding: 20px var(--gutter) 28px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.drawer__foot a.mono { font-family: var(--sans); font-weight: 700; text-decoration: none; font-size: 22px; }

/* ------------------------------------------------------------------ секции */
.section { position: relative; padding: 130px 0; }
.section--first { padding-top: 40px; }
/* 31.10.2026: подложка полупрозрачная — сквозь неё видно общий анимированный фон (.site-pic) */
.section--paper { background: color-mix(in srgb, var(--bg-2) 78%, transparent); --curtain: var(--bg-2); }
/* блок платы в 3D и прочие «тёмные» полосы: по теме (26.10: раньше были тёмными и в светлой теме) */
.section--night, .section--dark { background: var(--bg-2); --curtain: var(--bg-2); overflow: hidden; }
.section__head { display: grid; gap: 22px; margin-bottom: 64px; max-width: 860px; }
.section__head--split {
    max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 40px;
}
.section__head--split > :last-child { justify-self: end; }
.section__head--split .lead { justify-self: stretch; }
@media (max-width: 860px) {
    .section { padding: 76px 0; }
    .section__head { margin-bottom: 36px; }
    .section__head--split { grid-template-columns: 1fr; gap: 20px; }
    .section__head--split > :last-child { justify-self: start; }
}

/* ------------------------------------------------------------------ первый экран: фотография во весь экран */
.hero-photo {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--shade-solid);
}
.hero-photo__img { position: absolute; inset: 0; z-index: -2; animation: kenburns 2.8s var(--ease-out) both; }
.hero-photo__img img {
    width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
    transform: translate3d(0, var(--py, 0px), 0) scale(1.06);
    will-change: transform;
}
/* наезд камеры при загрузке — на обёртке, а параллакс (--py) — на самой картинке, чтобы не спорили */
@keyframes kenburns { from { transform: scale(1.14); filter: brightness(.45); } to { transform: none; filter: none; } }
.hero-photo::before {        /* затемнение под текстом */
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--shade), .86) 0%, rgba(var(--shade), .55) 34%, rgba(var(--shade), 0) 62%),
        linear-gradient(0deg, rgba(var(--shade), .8) 0%, rgba(var(--shade), 0) 34%),
        linear-gradient(180deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 18%);
}
.hero-photo__inner { display: grid; gap: 28px; padding-top: 150px; padding-bottom: 56px; }
.hero-photo__kicker { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.hero-photo__title { color: #fff; font-weight: 700; letter-spacing: -0.035em; line-height: .95; font-size: clamp(54px, 8.4vw, 128px); }
.hero-photo__lead { max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .86); }
.hero-photo__facts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .22); padding-bottom: 34px;
}
.hero-photo__facts > div { display: grid; gap: 4px; padding: 22px 24px 0 0; }
.hero-photo__facts > div + div { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .16); }
.hero-photo__facts b { font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: #fff; }
.hero-photo__facts span { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.hero-photo__facts b span { font: inherit; color: inherit; }
.hero-photo__scroll {
    position: absolute; right: var(--gutter); bottom: 40px; width: 1px; height: 64px; overflow: hidden;
    background: rgba(255, 255, 255, .25);
}
.hero-photo__scroll::after {
    content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff;
    animation: scroll-hint 2.2s var(--ease) infinite;
}
@keyframes scroll-hint { to { top: 100%; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-photo__link { justify-self: start; display: inline-flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 600; font-size: 15.5px; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 4px; transition: color .25s, border-color .25s; }
.hero-photo__link::after { content: '→'; transition: transform .3s var(--ease); }
.hero-photo__link:hover { color: #fff; border-color: #fff; }
.hero-photo__link:hover::after { transform: translateX(5px); }
@media (max-width: 960px) {
    .hero-photo__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-photo__facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .hero-photo__facts > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 18px; }
    .hero-photo__scroll { display: none; }
}
@media (max-width: 760px) {
    .hero-photo { min-height: 100svh; }
    .hero-photo__img img { object-position: 50% 30%; }
    .hero-photo::before {
        background: linear-gradient(0deg, rgba(var(--shade), .94) 0%, rgba(var(--shade), .7) 45%, rgba(var(--shade), .1) 75%),
            linear-gradient(180deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 22%);
    }
    .hero-photo__inner { padding-top: 46vh; gap: 20px; padding-bottom: 28px; }
    .hero-photo__facts > div { padding: 16px 12px 0 0; }
    .hero-photo__facts > div + div { padding-left: 12px; }
    .hero-photo__facts span { font-size: 13px; }
}

/* старый первый экран (страница /oblicovka/ и др. используют только .hero__actions) */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 6px; align-content: start; padding: 26px 24px 4px 0; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts b { font-weight: 700; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.facts > div > span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.facts b span { font: inherit; color: inherit; }
@media (max-width: 960px) {
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------------ фотографии: «шторка» и параллакс
 * .photo — рамка с картинкой; при появлении на экране картинка открывается снизу вверх (clip-path), чуть
 * уменьшаясь; [data-parallax] двигает картинку медленнее страницы (site.js). */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; translate: 0 var(--py, 0px); scale: var(--ps, 1.12); transition: scale 1.6s var(--ease-out); will-change: translate, scale; }
.photo[data-parallax] img { height: calc(100% + 90px); top: -45px; }
/* шторка — псевдоэлемент цвета фона секции (clip-path на самом блоке не годится: Chrome тогда не считает его
   видимым для IntersectionObserver, и шторка не открывается никогда) */
.js .photo::after {
    content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none; background: var(--curtain, var(--bg));
    transform-origin: 50% 0; transition: transform .8s var(--ease-out) var(--d, 0s);
}
.js .photo.is-in::after { transform: scaleY(0); }
.js .photo.is-in img { --ps: 1; }
.js .photo figcaption { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out) calc(var(--d, 0s) + .6s), transform .8s var(--ease-out) calc(var(--d, 0s) + .6s); }
.js .photo.is-in figcaption { opacity: 1; transform: none; }
.photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 26px 22px; color: #fff;
    background: linear-gradient(0deg, rgba(var(--shade), .78), rgba(var(--shade), 0));
    display: grid; gap: 4px; font-size: 14.5px; line-height: 1.45;
}
.photo figcaption b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.photo figcaption span { color: rgba(255, 255, 255, .78); max-width: 46ch; }

/* ------------------------------------------------------------------ производство: мозаика фотографий */
.works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.works .photo { min-height: 0; }
.works__a { grid-column: 1 / span 8; grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.works__b { grid-column: 9 / span 4; grid-row: 1; }
.works__c { grid-column: 9 / span 4; grid-row: 2; }
.works__d { grid-column: 1 / span 5; grid-row: 3; aspect-ratio: 4 / 5; }
.works__e { grid-column: 6 / span 7; grid-row: 3; align-self: center; padding-left: 36px; }
.works__e .works-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.works__e .works-steps li:nth-child(odd) { padding-left: 0; border-left: 0; }
.works__e .works-steps li:nth-child(n+3) { margin-top: 10px; }
.works__links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 34px; }
.works-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 70px; border-top: 1px solid var(--line); counter-reset: ws; }
.works-steps li { list-style: none; display: grid; gap: 10px; align-content: start; padding: 28px 28px 0 0; }
.works-steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.works-steps li::before {
    counter-increment: ws; content: counter(ws, decimal-leading-zero);
    font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
}
.works-steps b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.works-steps span { color: var(--muted); font-size: 15.5px; }
@media (max-width: 960px) {
    .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .works__a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
    .works__b, .works__c { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
    .works__d { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
    .works__e { grid-column: 1 / -1; grid-row: auto; padding: 30px 0 0; }
    .works-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .works-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
    .works__b figcaption, .works__c figcaption { padding: 40px 14px 12px; }
    .works__b figcaption b, .works__c figcaption b { font-size: 15px; }
    .works__b figcaption span, .works__c figcaption span { display: none; }
    .works-steps { grid-template-columns: 1fr; }
    .works-steps li, .works-steps li + li { padding: 22px 0 0; border-left: 0; }
}

/* широкая фотография с текстом поверх (полоса во всю ширину) */
.band {
    position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--shade-solid);
    min-height: 82vh; display: flex; align-items: flex-end;
}
.band__img { position: absolute; inset: -60px 0; z-index: -2; }
.band__img img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.band::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(var(--shade), .9) 0%, rgba(var(--shade), .35) 50%, rgba(var(--shade), .15) 100%);
}
.band__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; padding-top: 140px; padding-bottom: 80px; }
.band h2 { color: #fff; }
.band p { color: rgba(255, 255, 255, .84); }
@media (max-width: 860px) { .band { min-height: 0; } .band__inner { grid-template-columns: 1fr; padding-top: 200px; padding-bottom: 54px; } }

/* ------------------------------------------------------------------ модели (каталог)
 * Карточка: «студия» с силомером (8 ракурсов: мышь водит по картинке, пальцем — листать вбок; сама не крутится —
 * владелец, 23.10), под ней название, вид, габарит и цена. Кадры — рендеры Blender с поликарбонатом на табло. */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.model { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.model__pic {
    position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: var(--radius);
    background: var(--panel); transition: background-color .4s;
}
.model:hover .model__pic { background: color-mix(in srgb, var(--panel) 88%, var(--ink)); }
.model__body { padding: 22px 2px 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.model__kind { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.model__name { font-weight: 700; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; transition: color .25s; }
.model:hover .model__name { color: var(--accent); }
.model__spec { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 15px; color: var(--muted); }
.model__spec span + span::before { content: '·'; margin-right: 14px; }
.model__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.model__price { font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--accent); }
.model__more { font-size: 14px; font-weight: 600; color: var(--accent); }
.model__go {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--line); color: var(--accent); transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease);
}
.model__go svg { width: 18px; height: 18px; }
.model:hover .model__go { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-45deg); }
.model__color {
    position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    background: var(--paper); border: 1px solid var(--line-2);
}
.model__color i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.model__color small { font-size: inherit; color: var(--muted); font-weight: 500; }
@media (max-width: 1060px) { .models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } }
@media (max-width: 560px) { .models { grid-template-columns: 1fr; } }

/* ракурсы: кадры лежат стопкой, виден один (.is-on) */
.spin { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.spin__frames { position: absolute; inset: 15% 13% 6%; z-index: 1; transition: transform .8s var(--ease-out); }   /* 01.11: аппарат меньше, глубже в складе */
.model:hover .spin__frames { transform: scale(1.03); }
.spin__frames img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
    opacity: 0; pointer-events: none; -webkit-user-drag: none;
}
.spin__frames img.is-on { opacity: 1; }
.spin__badge {
    position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px 6px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-2);
}
.spin__badge svg { width: 14px; height: 14px; color: var(--accent); }
.spin__dial {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 12.5px; color: var(--muted); pointer-events: none;
}
.spin__ticks { display: flex; gap: 4px; }
.spin__ticks i { width: 10px; height: 2px; background: var(--line); transition: background-color .2s, width .25s var(--ease); }
.spin__ticks i.is-on { width: 20px; background: var(--accent); }
.spin__label { min-width: 104px; font-weight: 600; color: var(--ink-2); }
.model .spin__dial { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease); }
.model:hover .spin__dial { opacity: 1; transform: none; }
@media (hover: none) { .model .spin__dial { opacity: 1; transform: none; } }

/* каталог: фильтр и подсказка */
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cat-filter { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cat-filter button {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
    background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.cat-filter button span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; transition: inherit; }
.cat-filter button:hover { border-color: var(--accent); color: var(--accent); }
.cat-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-filter button[aria-pressed="true"] span { color: inherit; opacity: .7; }
.cat-hint { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.cat-hint svg { width: 18px; height: 18px; color: var(--accent); }
.cat-hint__touch { display: none; }
@media (hover: none) { .cat-hint__mouse { display: none; } .cat-hint__touch { display: inline; } }
.models--cat .model.is-out { display: none; }
.models--cat .model.is-back { animation: card-back .5s var(--ease) both; }
@keyframes card-back { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------------ ряд цветов: бегущая лента */
.colors-row { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding: 8px 0 0; }
.colors-row a { flex: 0 1 160px; min-width: 0; margin: 0 -4px; display: grid; justify-items: center; text-decoration: none; transition: transform .45s var(--ease); }
.colors-row a:hover { transform: translateY(-12px); }
.colors-row img { width: 100%; }
.colors-row b { margin-top: 12px; font-size: 14.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.colors-row small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.colors-row i { width: 14px; height: 14px; border-radius: 50%; margin-top: 8px; box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px var(--line); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee .colors-row { justify-content: flex-start; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .colors-row { animation-play-state: paused; }
.marquee .colors-row a { flex: 0 0 190px; margin: 0 6px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.colors-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
    .colors-row:not(.is-marquee) { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 6px; scrollbar-width: none; }
    .colors-row::-webkit-scrollbar { display: none; }
    .colors-row:not(.is-marquee) a { flex: 0 0 34vw; margin: 0 -2px; scroll-snap-align: center; }
    .marquee .colors-row a { flex: 0 0 140px; }
}

/* ------------------------------------------------------------------ конструкция: крупные планы */
.detail { position: relative; margin: 0; display: grid; gap: 18px; align-content: start; }
.detail__pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.detail__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.detail:hover .detail__pic img { transform: scale(1.05); }
.detail figcaption { display: grid; gap: 6px; }
.detail figcaption b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.detail figcaption span { color: var(--muted); font-size: 15.5px; }

/* ------------------------------------------------------------------ плата и телеметрия */
.board { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.board__text { display: grid; gap: 26px; }
.ports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.ports div {
    display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 12px 4px; font-size: 14.5px;
    border-bottom: 1px solid var(--line); transition: color .25s;
}
.ports div:hover { color: var(--accent); }
.ports code { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: .02em; }
.board__view { display: grid; gap: 12px; }
.viewer3d {
    position: relative; height: min(64vh, 580px); min-height: 360px;
    background: var(--viewer-bg); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.viewer3d canvas { position: relative; width: 100%; height: 100%; display: block; touch-action: none; }
.viewer3d__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.viewer3d__bar .muted { font-size: 13.5px; }
.viewer3d .silomer-3d-ui { position: absolute; inset: 12px; pointer-events: none; }
.viewer3d .silomer-3d-chips, .viewer3d [data-act="display"], .viewer3d [data-act="xray"], .viewer3d [data-act="board"],
.viewer3d [data-act="sticker"], .viewer3d [data-act="ar"] { display: none !important; }
.viewer3d .silomer-3d-tools { position: absolute; right: 0; top: 0; display: flex; gap: 6px; pointer-events: auto; }
.viewer3d .silomer-3d-btn {
    height: 36px; min-width: 36px; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer;
    border: 1px solid var(--viewer-btn-line); background: var(--viewer-btn); color: var(--viewer-btn-ink); font-size: 14px;
}
.viewer3d .silomer-3d-btn:hover { border-color: var(--accent); color: var(--accent); }
.viewer3d__state {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
    color: var(--muted); font-size: 14px; pointer-events: none;
}
.viewer3d[data-loading] .viewer3d__state span:first-child::after {
    content: ''; display: block; width: 120px; height: 2px; margin: 14px auto 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: load-bar 1.2s linear infinite;
}
@keyframes load-bar { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.viewer3d:not([data-loading]):not([data-unsupported]) .viewer3d__state { display: none; }
.viewer3d[data-unsupported] .viewer3d__state span:first-child,
.viewer3d:not([data-unsupported]) .viewer3d__state span:last-child { display: none; }
.silomer-3d-full { position: fixed; inset: 0; z-index: 90; background: var(--viewer-bg); }
.silomer-3d-full .silomer-3d-ui { position: absolute; inset: 14px; }
.silomer-3d-full .silomer-3d-tools { position: absolute; right: 0; top: 0; display: flex; gap: 6px; }
.silomer-3d-full .silomer-3d-chips, .silomer-3d-full [data-act="display"], .silomer-3d-full [data-act="xray"],
.silomer-3d-full [data-act="board"], .silomer-3d-full [data-act="sticker"], .silomer-3d-full [data-act="ar"] { display: none !important; }
.silomer-3d-full .silomer-3d-btn {
    height: 40px; min-width: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--viewer-btn-line);
    background: var(--viewer-btn); color: var(--viewer-btn-ink); font-size: 15px; cursor: pointer;
}
.board-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.board-modes button {
    border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer;
    padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
    transition: border-color .2s, color .2s, background-color .2s;
}
.board-modes button:hover { border-color: var(--accent); color: var(--accent); }
.board-modes button[aria-pressed="true"] { color: #fff; border-color: var(--accent); background: var(--accent); }
#plataTags[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: transparent; }
.board-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.board-tag {
    position: absolute; left: 0; top: 0; white-space: nowrap;
    padding: 2px 7px; margin: -26px 0 0 -8px; border-radius: 5px;
    font-family: var(--mono); font-weight: 700; font-size: 11px; line-height: 1.3; color: var(--tag-ink);
    background: var(--tag-bg); border: 1px solid var(--tag-line); transition: opacity .2s;
}
.board-tag { pointer-events: auto; cursor: help; }
.board-tag::after { content: ''; position: absolute; left: 7px; bottom: -8px; width: 1px; height: 8px; background: var(--tag-line); }
@media (max-width: 980px) {
    .board { grid-template-columns: 1fr; gap: 20px; }
    .board__text { display: contents; }
    .board__text > * { order: 1; }
    .board__view { order: 2; margin: 8px 0 10px; }
    .board__text > .ports { order: 3; }
    .board__text > .arrow-link { order: 4; }
    .viewer3d { height: 58vh; min-height: 320px; }
}
@media (max-width: 520px) { .ports { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ CRM: фото устройств, возможности, экраны */
.crm-hero { position: relative; margin: 0 0 80px; border-radius: var(--radius); overflow: hidden; background: var(--panel); aspect-ratio: 3 / 2; }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.feats > div { display: grid; gap: 12px; align-content: start; padding: 34px 34px 38px 0; border-bottom: 1px solid var(--line); }
.feats > div:not(:nth-child(3n + 1)) { padding-left: 34px; border-left: 1px solid var(--line); }
.feats svg { width: 34px; height: 34px; color: var(--accent); }
.feats b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.feats p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 960px) {
    .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feats > div:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
    .feats > div:nth-child(2n) { padding-left: 26px; border-left: 1px solid var(--line); }
    .feats > div { padding-right: 26px; }
}
@media (max-width: 560px) {
    .feats { grid-template-columns: 1fr; }
    .feats > div, .feats > div:nth-child(2n) { padding: 26px 0; border-left: 0; }
}
.crm-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
.crm-tabs button {
    position: relative; overflow: hidden; border: 1px solid var(--line); background: none; cursor: pointer; padding: 11px 20px; border-radius: 999px;
    font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color .25s, background-color .25s, border-color .25s;
}
.crm-tabs button:hover { border-color: var(--accent); color: var(--accent); }
.crm-tabs button[aria-selected="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.crm-tabs button i { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; background: rgba(255, 255, 255, .85); transform: scaleX(0); transform-origin: left; }
.crm-tabs button[aria-selected="true"] i { animation: tab-progress var(--cycle, 6s) linear forwards; }
.crm-tabs.is-paused button i { animation-play-state: paused; }
@keyframes tab-progress { to { transform: scaleX(1); } }
.crm-stage { position: relative; }
.crm-shots { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: end; }
.crm-shot { margin: 0; }
.crm-shot img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.crm-shot--phone img { border-radius: 34px; border: 9px solid #0b1120; }
.crm-shot figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.crm-pane { animation: pane-in .7s var(--ease); }
.crm-pane[hidden] { display: none; }
@keyframes pane-in { from { opacity: 0; transform: translateY(16px); } }
.crm-pane .crm-shot--phone { animation: phone-in .9s var(--ease-out); }
@keyframes phone-in { from { opacity: 0; transform: translateY(40px); } }
.crm-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.crm-points div { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.crm-points b { font-size: 18px; font-weight: 700; }
.crm-points span { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
    .crm-shots { grid-template-columns: 1fr; }
    .crm-shot--desk { display: none; }
    .crm-shot--phone { max-width: 300px; margin: 0 auto; }
    .crm-points { grid-template-columns: 1fr; }
    .crm-hero { margin-bottom: 48px; }
}

/* ------------------------------------------------------------------ оплата */
.pay-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.pay-wrap .photo { aspect-ratio: 4 / 5; }
.pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.pay > div { display: grid; gap: 12px; align-content: start; padding: 30px 28px 32px 0; border-bottom: 1px solid var(--line); }
.pay > div:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--line); }
.pay svg { width: 40px; height: 40px; color: var(--accent); }
.pay svg * { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.6s var(--ease); }
.pay > div.is-in svg * { stroke-dashoffset: 0; }
.pay b { font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
.pay span { color: var(--muted); font-size: 15.5px; }
@media (max-width: 960px) { .pay-wrap { grid-template-columns: 1fr; gap: 36px; } .pay-wrap .photo { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .pay { grid-template-columns: 1fr; } .pay > div, .pay > div:nth-child(2n) { padding: 24px 0; border-left: 0; } }

/* ------------------------------------------------------------------ шаги, списки, таблицы */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
.steps li { position: relative; list-style: none; padding: 30px 28px 0 0; display: grid; gap: 10px; align-content: start; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps li::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    font-weight: 700; color: var(--accent); font-size: 15px; font-variant-numeric: tabular-nums;
}
.steps li::after {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform 1s var(--ease) var(--d, 0s);
}
.steps li.is-in::after { transform: scaleX(1); }
.steps b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.steps span { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps li:nth-child(3) { padding-left: 0; border-left: 0; } .steps li:nth-child(n+3) { margin-top: 26px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .steps li, .steps li + li { padding: 24px 0 0; border-left: 0; margin-top: 0; } }

.spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec th, .spec td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-weight: 500; color: var(--muted); width: 42%; padding-right: 16px; }
.spec td { font-weight: 500; }

.ticks { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ticks li::before {
    content: ''; width: 20px; height: 20px; margin-top: 3px;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ticks b { display: block; font-weight: 700; margin-bottom: 2px; }
.ticks span { color: var(--muted); }

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .cols-2 { grid-template-columns: 1fr; gap: 32px; } .cols-3 { gap: 18px; } }
@media (max-width: 760px) { .cols-3 { grid-template-columns: 1fr; gap: 14px; } }

.card {
    position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
    display: grid; gap: 12px; align-content: start; transition: border-color .3s;
}
.card:hover { border-color: var(--accent); }
.card h3 { font-size: 22px; letter-spacing: -0.01em; }
.card p { color: var(--ink-2); }
.card__icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--accent); }
.card__icon svg { width: 30px; height: 30px; }

.note { border-left: 2px solid var(--accent); padding: 6px 0 6px 18px; color: var(--ink-2); }

/* ------------------------------------------------------------------ заголовок внутренних страниц */
.page-head { position: relative; padding: 90px 0 70px; border-bottom: 1px solid var(--line); }
.page-head__inner { position: relative; z-index: 1; display: grid; gap: 22px; }
.page-head__inner > * { max-width: 980px; }
.page-head--photo { border: 0; color: #fff; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: var(--shade-solid); padding: 160px 0 70px; }
.page-head--photo .page-head__img { position: absolute; inset: -40px 0; z-index: -2; animation: kenburns 2.6s var(--ease-out) both; }
.page-head--photo .page-head__img img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); }
.page-head--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--shade), .9) 0%, rgba(var(--shade), .4) 55%, rgba(var(--shade), .55) 100%); }
.page-head--photo .display, .page-head--photo h1 { color: #fff; }
.page-head--photo .lead { color: rgba(255, 255, 255, .86); }
.page-head--photo .crumbs, .page-head--photo .crumbs a { color: rgba(255, 255, 255, .72); }
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
@media (max-width: 760px) { .page-head { padding: 54px 0 40px; } .page-head--photo { min-height: 64vh; padding: 140px 0 40px; } }

/* ------------------------------------------------------------------ страница модели
 * 23.10.2026: слева сцена с 8 ракурсами (тянуть мышью/пальцем, стрелки, миниатюры), справа описание. */
.product { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; padding: 36px 0 120px; align-items: start; }
.product__media { position: sticky; top: 100px; display: grid; gap: 12px; }
.stage {
    position: relative; height: min(720px, calc(100vh - 230px)); min-height: 460px; border-radius: var(--radius);
    overflow: hidden; cursor: grab; outline-offset: 4px; background: var(--panel);
}
.stage.is-dragging { cursor: grabbing; }
.stage .spin__frames { inset: max(56px, 11%) 18% 88px; }   /* 01.11: аппарат глубже в складе, не во весь кадр */
.stage .spin__dial { position: static; pointer-events: none; }
.stage__bar {
    position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; white-space: nowrap;
    background: var(--paper); border: 1px solid var(--line);
}
.stage__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 9px;
    border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 13.5px; font-weight: 600;
    transition: background-color .2s, color .2s;
}
.stage__btn:hover { background: var(--bg-2); color: var(--accent); }
.stage__btn svg { width: 18px; height: 18px; }
.stage .spin__badge { transition: opacity .4s; }
.stage.was-dragged .spin__badge { opacity: 0; }
.stage-thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.stage-thumbs button {
    display: grid; gap: 4px; justify-items: center; padding: 8px 2px 6px; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--panel); cursor: pointer; color: var(--muted); font-size: 10.5px; line-height: 1.15; text-align: center;
    transition: border-color .2s, color .2s;
}
.stage-thumbs img { height: 58px; width: auto; }
.stage-thumbs button:hover { color: var(--accent); }
.stage-thumbs button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.product__info { display: grid; gap: 28px; }
.product__buy { display: grid; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product__price { font-weight: 700; font-size: 48px; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.product__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.product__stats div { display: grid; gap: 4px; padding: 0 14px 0 0; }
.product__stats div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.product__stats span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.product__stats b { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1100px) { .product__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } .product__stats div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 900px) {
    .product { grid-template-columns: 1fr; gap: 28px; padding-top: 16px; }
    .product__media { position: static; }
    .stage { height: 66vh; min-height: 380px; max-height: 620px; }
    .stage-thumbs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; }
    .stage-thumbs::-webkit-scrollbar { display: none; }
    .stage-thumbs button { flex: 0 0 76px; }
}

/* переход из карточки в страницу модели: картинка «перетекает» (Chrome, Edge, Safari 18+; остальные — обычный переход) */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* ------------------------------------------------------------------ контакты, финальный блок */
.contact-band { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.big-phone {
    font-weight: 700; font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.03em; text-decoration: none; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    padding-bottom: 6px; transition: background-size .5s var(--ease), color .3s;
}
.big-phone:hover { background-size: 100% 2px; color: var(--accent); }
.contact-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact-list div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list span:first-child { color: var(--muted); font-size: 14.5px; padding-top: 2px; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { color: var(--accent); }
@media (max-width: 900px) { .contact-band { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 420px) { .contact-list div { grid-template-columns: 1fr; gap: 2px; } }
/* финальный блок с фотографией (главная) */
.cta-photo { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--shade-solid); padding: 150px 0 110px; }
.cta-photo__img { position: absolute; inset: -60px 0; z-index: -2; }
.cta-photo__img img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); }
.cta-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--shade), .92) 0%, rgba(var(--shade), .72) 45%, rgba(var(--shade), .4) 100%); }
.cta-photo .contact-band { --ink: #fff; --muted: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .18); --accent: #8fb4ff; }
.cta-photo .lead { color: rgba(255, 255, 255, .84); }
.cta-photo .label { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------------ подвал
 * 27.10.2026 владелец: «дизайн подвала в белой теме не устраивает — переделай; добавь LeoPulse и хватайки».
 * В светлой теме подвал светлый (бумага с голубым оттенком, текст тёмно-синий, фирменный синий — только акцент),
 * а не сплошная синяя плита; тёмная — прежняя. Линейки — карточками: «в продаже» ведёт в каталог, «в разработке» —
 * без ссылки и без стрелки. Связь — справа сверху, крупным номером. */
.site-foot { position: relative; overflow: hidden; color: var(--foot-ink); padding: 84px 0 30px; background: var(--foot-bg); border-top: 1px solid var(--foot-line); }
.site-foot a { color: var(--foot-ink); text-decoration: none; transition: color .2s; }
.site-foot a:hover { color: var(--foot-hover); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-bottom: 48px; }
.foot-brand p { color: var(--foot-muted); font-size: 15px; line-height: 1.55; margin-top: 18px; max-width: 46ch; }
.foot-brand .brand b { color: var(--foot-ink); }
.site-foot .brand b span { color: var(--foot-hover); }
.site-foot .brand img { background: #fff; border-radius: 9px; padding: 3px; width: 40px; height: 40px; box-shadow: 0 0 0 1px var(--foot-line); }
.foot-reach { display: grid; gap: 6px; justify-items: end; text-align: right; font-size: 15px; }
.foot-reach span { color: var(--foot-muted); font-size: 14px; }
.site-foot .foot-reach__phone { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px; }
.foot-cap, .foot-grid h4 { color: var(--foot-muted); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.foot-lines { padding: 40px 0 44px; border-top: 1px solid var(--foot-line); }
/* 02.11: четыре линейки (+ LeoWend 3D) — колонок столько, сколько влезает, а не жёстко три */
.foot-lines__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.foot-line {
    display: grid; grid-template-rows: auto 1fr auto; gap: 12px; min-height: 190px; padding: 24px;
    border: 1px solid var(--foot-line); border-radius: var(--radius); background: var(--foot-card);
    transition: border-color .3s, transform .4s var(--ease), box-shadow .3s;
}
a.foot-line:hover { border-color: var(--foot-hover); transform: translateY(-3px); box-shadow: var(--foot-card-shadow); }
.site-foot a.foot-line:hover { color: var(--foot-ink); }
/* метка «в продаже / в разработке» — над названием, одинаково в любой ширине карточки */
.foot-line__top { display: grid; justify-items: start; gap: 14px; }
.foot-line__top .foot-chip { order: -1; }
.foot-line__name { font-size: clamp(24px, 2.3vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.foot-line__what { color: var(--foot-muted); font-size: 15px; line-height: 1.5; }
.foot-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--foot-muted); border: 1px solid var(--foot-line);
}
.foot-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.foot-chip--on { color: var(--foot-hover); border-color: currentColor; }
.foot-line__go {
    justify-self: end; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--foot-line); transition: transform .4s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.foot-line__go svg { width: 18px; height: 18px; }
a.foot-line:hover .foot-line__go { transform: rotate(-45deg); background: var(--foot-hover); border-color: var(--foot-hover); color: var(--foot-go-ink); }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 40px 0 46px; border-top: 1px solid var(--foot-line); border-bottom: 1px solid var(--foot-line); }
.foot-grid ul { list-style: none; display: grid; gap: 11px; font-size: 15.5px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 24px; font-size: 13.5px; color: var(--foot-muted); }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-bottom a { color: var(--foot-muted); }
.foot-word {
    font-weight: 700; font-size: clamp(64px, 16vw, 240px); line-height: .82; letter-spacing: -0.045em;
    margin: 56px 0 -10px; text-align: center; user-select: none; pointer-events: none; color: var(--foot-word); white-space: nowrap;
}
@media (max-width: 900px) {
    .foot-top { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .foot-reach { justify-items: start; text-align: left; }
    .foot-lines__row { grid-template-columns: 1fr; }
    .foot-line { min-height: 0; }
    /* стрелка — справа по центру карточки, а не отдельной строкой */
    a.foot-line { position: relative; padding-right: 76px; }
    .foot-line__go { position: absolute; top: 50%; right: 20px; margin-top: -21px; }
}
@media (max-width: 560px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-line { padding: 20px; } a.foot-line { padding-right: 72px; } }
@media (max-width: 480px) { .foot-grid { gap: 28px 16px; } .foot-grid ul { font-size: 14.5px; } }

/* ------------------------------------------------------------------ окно заявки */
.modal {
    position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(4, 10, 24, .6); opacity: 0; transition: opacity .3s;
}
.modal.is-open { display: flex; }
.modal.is-visible { opacity: 1; }
.modal__box {
    position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--paper); color: var(--ink); border-radius: 14px; padding: 36px 32px 30px;
    box-shadow: var(--shadow); transform: translateY(24px); transition: transform .45s var(--ease-out);
}
.modal.is-visible .modal__box { transform: none; }
.modal__close { position: absolute; top: 14px; right: 14px; }
.modal h3 { font-size: 30px; letter-spacing: -0.02em; margin-bottom: 8px; padding-right: 44px; }
.modal p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; color: var(--muted); }
.field input {
    width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-error { color: #e5484d; font-size: 14px; text-align: center; }
.text-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 8px; margin-top: 4px; width: 100%; }
.text-btn:hover { color: var(--accent); }
.modal__done { text-align: center; padding: 18px 0 4px; display: grid; gap: 12px; justify-items: center; }
.modal__done svg { width: 52px; height: 52px; color: var(--ok); }
.modal__done svg * { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* уведомления Django messages */
.toasts { position: fixed; top: 92px; right: 16px; z-index: 99; display: grid; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14.5px; box-shadow: var(--shadow); animation: pop .3s var(--ease); }
.toast--error { border-left-color: #e5484d; }

/* ------------------------------------------------------------------ появление при прокрутке (site.js) */
/* 01.11.2026 владелец: «анимации чтобы были чётенько» — короче путь и время, одна кривая для всего */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--left { transform: translateX(-18px); }
.js .reveal--right { transform: translateX(18px); }
.js .reveal--zoom { transform: scale(.96); }
.js .split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.js .split-line > span { display: inline-block; transform: translateY(110%); transition: transform .75s var(--ease-out) var(--d, 0s); }
.js .is-in .split-line > span, .js .split-line.is-in > span { transform: none; }

/* ------------------------------------------------------------------ документы: оферта, правила оплаты */
.display--doc { font-size: clamp(36px, 5vw, 64px); }
.legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.legal__toc {
    position: sticky; top: 100px; display: grid; gap: 4px; padding: 4px 0; font-size: 14.5px;
}
.legal__toc b { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.legal__toc a { padding: 6px 0; text-decoration: none; color: var(--ink-2); font-weight: 500; line-height: 1.35; transition: color .2s; }
.legal__toc a:hover { color: var(--accent); }
.legal__body {
    display: grid; gap: 40px; max-width: 900px; color: var(--ink-2); line-height: 1.7;
}
.legal__body > * { scroll-margin-top: 100px; }
.legal__body h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
.legal__body h4 { margin: 18px 0 8px; font-size: 16px; }
.legal-num { flex: 0 0 auto; font-size: .8em; color: var(--accent); font-variant-numeric: tabular-nums; }
.legal__body p + p, .legal__body p + ul, .legal__body ul + p, .legal__body p + ol, .legal__body div > p + p { margin-top: 12px; }
.legal__body ul, .legal__body ol { display: grid; gap: 8px; margin: 12px 0; padding-left: 22px; }
.legal__body li::marker { color: var(--accent); }
.legal__body strong, .legal__body b { color: var(--ink); }
.legal__body a { color: var(--accent); }
.legal-pre { padding-bottom: 34px; border-bottom: 1px solid var(--line); font-size: 17px; }
.legal-note { margin-bottom: 18px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.legal-note p:first-child { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.legal-req { display: grid; gap: 2px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.legal-req p + p { margin-top: 0 !important; }
.legal-req p:first-child { margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 980px) {
    .legal { grid-template-columns: 1fr; gap: 20px; }
    .legal__toc { position: static; }
}
@media (max-width: 760px) {
    .legal__body { gap: 30px; font-size: 15.5px; line-height: 1.65; }
    .legal-pre { font-size: 16px; }
}
@media print {
    @page { size: auto; margin: 20mm 15mm; }
    .site-head, .site-foot, .drawer, .drawer-back, .modal, .no-print, .legal__toc, .crumbs { display: none !important; }
    html, body { background: #fff !important; }
    *, *::before, *::after { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
    .page-head { margin: 0; padding: 0 0 8mm; border: 0; }
    .section { padding: 0; }
    .legal { display: block; }
    .legal__body { border: 0; padding: 0; background: #fff; max-width: none; }
    .legal-sec { break-inside: avoid; }
    .js .reveal, .js .split-line > span { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ вход, регистрация, восстановление доступа
   (14.10.2026: после редизайна эти страницы остались на классах Tailwind без стилей — владелец: «страничка
   регистрации не имеет стилей, страничка входа не имеет шапки и дна»). Поля форм Django стилизуются
   по контейнеру .auth, а не по классам виджетов. */
.auth { position: relative; padding: 80px 0 100px; min-height: calc(100vh - 80px); display: grid; place-items: center; background: var(--bg-2); }
.auth__box { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), 480px); display: grid; gap: 18px; }
.auth__card {
    display: grid; gap: 22px; padding: clamp(26px, 5vw, 44px); background: var(--paper);
    border: 1px solid var(--line); border-radius: 14px;
}
.auth__head { display: grid; gap: 8px; }
.auth__head .brand { margin-bottom: 6px; }
.auth__head .brand b { font-size: 19px; }
.auth__icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: #fff; margin-bottom: 4px; background: var(--accent); }
.auth__icon svg { width: 26px; height: 26px; }
.auth__title { font-weight: 700; font-size: clamp(30px, 6vw, 38px); line-height: 1.04; letter-spacing: -0.025em; }
.auth__sub { color: var(--muted); font-size: 15px; }
.auth__sub b { color: var(--ink); }
.auth form { display: grid; gap: 16px; }
.auth__field { display: grid; gap: 7px; }
.auth__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.auth__label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.auth__label a { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.auth__label a:hover { text-decoration: underline; }
.auth input[type="text"], .auth input[type="email"], .auth input[type="password"], .auth input[type="tel"] {
    width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg);
    color: var(--ink); font: 500 16px/1.2 var(--sans); outline: none; -webkit-appearance: none; appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.auth input::placeholder { color: var(--muted); opacity: .75; }
.auth input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth__code { text-align: center; letter-spacing: .4em; font-family: var(--mono) !important; font-weight: 600 !important; }
.auth__pw { position: relative; }
.auth__pw input { padding-right: 52px !important; }
.auth__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 8px;
    background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.auth__eye:hover { color: var(--accent); }
.auth__eye svg { width: 20px; height: 20px; }
.auth__err { color: #e5484d; font-size: 13px; font-weight: 600; }
html.dark .auth__err { color: #ff7b80; }
.auth__msgs { display: grid; gap: 8px; }
.auth__msg { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; line-height: 1.45; text-align: center;
    color: #0f8a59; background: rgba(16, 163, 106, .1); border: 1px solid rgba(16, 163, 106, .25); }
.auth__msg--error { color: #d63a40; background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .28); }
html.dark .auth__msg { color: #4fe0a0; }
html.dark .auth__msg--error { color: #ff8a8f; }
.auth__check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius-sm);
    border: 1px solid transparent; font-size: 14px; color: var(--ink-2); cursor: pointer; line-height: 1.45; }
.auth__check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.auth__check a { color: var(--accent); font-weight: 600; }
.auth__check.is-invalid { border-color: #e5484d; background: rgba(229, 72, 77, .08); }
.auth__submit { width: 100%; min-height: 54px; font-size: 16px; }
.auth__submit:disabled { opacity: .7; cursor: default; }
.auth__spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth__alt { padding-top: 20px; border-top: 1px solid var(--line-2); text-align: center; font-size: 15px; color: var(--muted); display: grid; gap: 4px; justify-items: center; }
.auth__alt a, .auth__link { color: var(--accent); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.auth__alt a:hover, .auth__link:hover { text-decoration: underline; }
.auth__link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.auth__back { justify-self: center; font-size: 14px; color: var(--muted); text-decoration: none; }
.auth__back:hover { color: var(--accent); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-2); }
.auth__tabs button { border: 0; border-radius: 7px; padding: 10px 8px; background: none; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; }
.auth__tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(10, 24, 56, .3); }
.auth__note { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink-2); font-size: 14.5px; line-height: 1.5; text-align: center; }
.auth__note b { color: var(--accent); }
.auth__pick { display: grid; gap: 8px; }
.auth__pick button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 600; font-size: 14.5px; cursor: pointer; text-align: left; }
.auth__pick button:hover { border-color: var(--accent); }
.auth__pick button span:last-child { color: var(--accent); font-size: 13px; white-space: nowrap; }
.otp { display: flex; justify-content: center; gap: 8px; }
.auth .otp input { width: 50px; min-height: 60px; padding: 0; text-align: center; font: 600 26px/1 var(--mono); }
.auth .is-shake { animation: auth-shake .4s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes auth-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@media (max-width: 760px) {
    .auth { padding: 40px 0 56px; place-items: start center; }
    .auth__row { grid-template-columns: 1fr; }
    .auth .otp input { width: 44px; min-height: 54px; font-size: 22px; }
}
/* установленное приложение CRM (PWA): на входе шапка и подвал сайта не нужны */
@media (display-mode: standalone) {
    .is-crm-app .site-head, .is-crm-app .site-foot, .is-crm-app .drawer, .is-crm-app .drawer-back { display: none !important; }
    .is-crm-app .auth { padding-top: max(32px, env(safe-area-inset-top)); min-height: 100vh; }
}

/* ------------------------------------------------------------------ телефон (владелец смотрит сайт в основном с телефона) */
.head-call, .rail-hint { display: none; }
@media (max-width: 760px) {
    .site-head__row, .site-head { height: 64px; }
    .has-photo-hero .site-head { margin-bottom: -64px; }
    .brand img { width: 32px; height: 32px; }
    .brand b { font-size: 19px; }
    .head-tools { gap: 8px; }
    .head-contact, .head-util { display: none; }
    .head-call { display: inline-flex; color: #fff; background: var(--accent); border-color: var(--accent); }
    .has-photo-hero .site-head:not(.is-scrolled) .head-call { color: #fff; border-color: var(--accent); }
    .display { font-size: clamp(42px, 12.5vw, 60px); }
    .h2 { font-size: clamp(31px, 8.8vw, 42px); }
    .lead { font-size: 16.5px; }
    .hero__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .hero__actions .btn { padding: 6px 12px; font-size: 15.5px; min-height: 52px; white-space: normal; line-height: 1.15; text-align: center; }
    .hero__actions .btn::after { display: none; }
    .hero__actions > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .facts b { font-size: 26px; }
    .facts > div { padding: 18px 12px 4px 0; }
    .facts > div + div { padding-left: 12px; }
    .facts > div > span { font-size: 13.5px; }
    .section__head { gap: 14px; }

    /* ленты вбок вместо столбика во всю ширину */
    .rail { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
        margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .rail::-webkit-scrollbar { display: none; }
    .rail > * { flex: 0 0 80%; scroll-snap-align: start; }
    .rail.models > .model { flex-basis: 78%; }
    .rail-hint { display: flex; align-items: center; gap: 8px; margin: -12px 0 14px; font-size: 13.5px; color: var(--muted); }
    .rail-hint::after { content: '→'; animation: nudge 1.6s ease-in-out infinite; }
    @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

    /* каталог — по две компактные карточки */
    .models:not(.rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
    .models:not(.rail) .model__pic { aspect-ratio: 4 / 5.4; }
    .models:not(.rail) .spin__frames { inset: 16% 8% 6%; }
    .models:not(.rail) .spin__badge { gap: 0; padding: 6px; font-size: 0; top: 8px; left: 8px; }
    .models:not(.rail) .model__color { gap: 0; padding: 5px; font-size: 0; top: 8px; right: 8px; }
    .models:not(.rail) .spin__dial { bottom: 8px; }
    .models:not(.rail) .spin__label { display: none; }
    .models:not(.rail) .spin__ticks i { width: 7px; }
    .models:not(.rail) .spin__ticks i.is-on { width: 13px; }
    .models:not(.rail) .model__spec { gap: 0 8px; font-size: 12.5px; }
    .models:not(.rail) .model__spec { display: grid; gap: 0; }
    .models:not(.rail) .model__spec span + span::before { display: none; }
    .models:not(.rail) .model__go { width: 32px; height: 32px; }
    .models:not(.rail) .model__go svg { width: 15px; height: 15px; }
    .models:not(.rail) .model__body { padding-top: 14px; gap: 6px; }
    .models:not(.rail) .model__name { font-size: 20px; }
    .models:not(.rail) .model__kind { font-size: 10.5px; }
    .models:not(.rail) .model__price { font-size: 16px; }
    .models:not(.rail) .model__more { display: none; }
    .cat-bar { margin-bottom: 24px; }
    .cat-filter { width: 100%; }
    .cat-filter button { flex: 1 1 auto; justify-content: center; padding: 0 8px; font-size: 14px; }
    .cat-filter button span { display: none; }
    .stage .spin__label { display: none; }
    .stage .model__color small { display: none; }
    .stage__bar { gap: 4px; }
    .product__price { font-size: 40px; }

    .card { padding: 22px 20px; gap: 10px; }
    .card h3 { font-size: 21px; }
    .board-modes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; }
    .board-modes::-webkit-scrollbar { display: none; }
    .board-modes button { flex: 0 0 auto; }
    .ports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ports div { grid-template-columns: 1fr; gap: 2px; padding: 10px 6px; font-size: 13px; }
    .viewer3d { height: 52vh; min-height: 300px; }
    .viewer3d__bar .muted { font-size: 12.5px; }
    .crm-tabs { display: flex; width: 100%; }
    .crm-tabs button { flex: 1 1 auto; padding: 10px 10px; font-size: 14px; }
    .crm-shot--phone { max-width: 260px; }
    .contact-band { gap: 28px; }
    .foot-grid { gap: 26px; }
    .cta-photo { padding: 100px 0 70px; }
    .foot-word { margin-top: 36px; }
}
@media (max-width: 380px) { .hero__actions { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal, .js .split-line > span { opacity: 1 !important; transform: none !important; }
    .js .photo::after { display: none; }
    .photo img { transform: none !important; }
    .marquee .colors-row { width: auto; flex-wrap: wrap; justify-content: center; }
}

/* =====================================================================================================================
 * 31.10.2026 — настоящие фото и анимированный общий фон.
 * Владелец: «есть исходники… сделай красивые фотки реальные… от всех фоток, которые сейчас сделаны, избавиться — это
 * вымышленные, а нам нужны реальные»; «фон сайта — анимационный, общий, а не фоток»; «детализация по аппарату»;
 * «показать рост детского силомера… габариты»; «скачать приложение CRM можно в RuStore».
 * Аппараты — вырезанные кадры съёмки 26.10.2026 (прозрачный фон и мягкая тень), стоят прямо на фоне страницы.
 * ================================================================================================================== */
:root { --pic-veil: rgba(246, 248, 251, .84); }
html.dark { --pic-veil: rgba(6, 14, 31, .8); }
@media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --pic-veil: rgba(6, 14, 31, .8); } }
/* общий фон: тот же снимок цеха, что на первом экране, чётко; медленно плывёт, поверх — вуаль цвета темы */
.site-pic { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0a1430; }
.site-pic i { position: absolute; inset: -6%; background: url('../images/site/real/bg/warehouse.webp') 50% 50% / cover no-repeat; animation: hall-drift 60s ease-in-out infinite alternate; will-change: transform; }
.site-pic::after { content: ''; position: absolute; inset: 0; background: var(--pic-veil); }
@media (max-width: 760px) { .site-pic i { background-image: url('../images/site/real/bg/warehouse-1280.webp'); } }
@media (prefers-reduced-motion: reduce) { .site-pic i { animation: none !important; } }

/* ------------------------------------------------------------------ ряд «в любом цвете» */
.lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.lineup__item { display: grid; justify-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.lineup__item img { width: 100%; max-width: 300px; transition: transform .6s var(--ease-out); }
.lineup__item:hover img { transform: translateY(-12px); }
.lineup__item span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.lineup__item i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
@media (max-width: 760px) { .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 10px; } }

/* ------------------------------------------------------------------ «аппарат вблизи»: мозаика деталей */
.dtl { display: grid; gap: 22px; }
.dtl-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dtl-switch > span { font-size: 14px; color: var(--muted); margin-right: 6px; }
.dtl-switch button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px 0 11px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 14.5px; font-weight: 600; color: var(--ink-2);
    transition: border-color .25s, color .25s, background-color .25s;
}
.dtl-switch button i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.dtl-switch button:hover { border-color: var(--accent); color: var(--accent); }
.dtl-switch button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dtl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
/* по-журнальному (владелец: «выглядит ИИшным»): без рамок и подложек у карточки — фото и подпись под ним */
.dtl-card { position: relative; margin: 0; display: flex; flex-direction: column; --mh: 400px; }
.dtl-media { position: relative; height: var(--mh); overflow: hidden; background: var(--card-plate); isolation: isolate; flex-shrink: 0; border-radius: 6px; }
.dtl-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), opacity .35s; }
.dtl-card:hover .dtl-media > img { transform: scale(1.04); }
.dtl-media > img.is-swapping { opacity: .3; }
.dtl-card figcaption { display: grid; gap: 6px; padding: 16px 2px 6px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.dtl-kicker { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }
.dtl-card figcaption b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
.dtl-chip {
    position: absolute; z-index: 3; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px;
    background: var(--paper); color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 6px 18px -10px rgba(var(--shade), .6);
}
.dtl-chip--safe { color: var(--ok); }
.dtl-card--plate { grid-column: span 7; }
.dtl-card--wheel { grid-column: span 5; }
.dtl-card--cable { grid-column: span 3; --mh: 340px; }
.dtl-card--start { grid-column: span 5; --mh: 340px; }
.dtl-card--roof { grid-column: span 4; --mh: 340px; }
.dtl-card--anchor { grid-column: span 5; --mh: 360px; }
.dtl-card--pad { grid-column: span 7; --mh: 360px; }
/* фанера — главное про безопасность (владелец: «это важно показать»): во всю ширину, текст справа крупно */
.dtl-card--ply { grid-column: span 12; flex-direction: row; --mh: 420px; }
.dtl-card--ply .dtl-media { flex: 0 0 58%; height: auto; min-height: var(--mh); }
.dtl-card--ply { gap: 48px; margin-top: 30px; padding-top: 40px; border-top: 1px solid var(--line); }
.dtl-card--ply figcaption { align-content: center; gap: 14px; padding: 0; font-size: 17px; }
.dtl-card--ply figcaption b { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; }
.dtl-chip--static { position: static; justify-self: start; box-shadow: none; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.dtl-card--plate .dtl-media > img { object-position: 50% 55%; }
.dtl-card--wheel .dtl-media > img { object-position: 40% 42%; }
.dtl-card--cable .dtl-media > img { object-position: 55% 30%; }
.dtl-card--ply .dtl-media > img { object-position: 50% 42%; }
.dtl-card--anchor .dtl-media > img { object-position: 50% 45%; }
/* крыша под дождём: грозовое небо, крыша прижата к правому краю (там снимок обрезан); дальний дождь — за крышей,
   ближний — перед ней, капли бьются о плоскость крыши (static/js/site.js) */
.dtl-card--roof .dtl-media { background: radial-gradient(120% 90% at 30% 0%, #26385e 0%, #121f3d 50%, #0a1328 100%); }
.dtl-card--roof .dtl-media::after {        /* туман у земли и вспышка молнии */
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(0deg, rgba(160, 185, 230, .18), rgba(160, 185, 230, 0) 38%);
}
.dtl-card--roof.is-flash .dtl-media::after { background-color: rgba(210, 225, 255, .22); }
.dtl-roof { position: absolute; right: -10%; bottom: -12%; width: 104%; z-index: 1; }
.dtl-roof img { width: 100%; height: auto; display: block; transition: opacity .35s; }
.dtl-roof img.is-swapping { opacity: .3; }
.dtl-rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.dtl-rain--far { z-index: 0; filter: blur(.6px); }
/* подушка: волны звука гаснут, не долетев до края */
.dtl-waves { position: absolute; z-index: 2; left: 25%; top: 44%; width: 0; height: 0; pointer-events: none; }
.dtl-waves i {
    position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85); opacity: 0; animation: dtl-wave 2.6s var(--ease-out) infinite;
}
.dtl-waves i:nth-child(2) { animation-delay: .3s; }
.dtl-waves i:nth-child(3) { animation-delay: .6s; }
@keyframes dtl-wave { 0% { transform: scale(.4); opacity: .9; } 55% { opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }
/* фанера: молния перечёркнута */
.dtl-volt {
    position: absolute; z-index: 2; left: 18px; top: 18px; width: 64px; height: 64px; display: grid; place-items: center;
    border-radius: 50%; background: var(--paper); color: #e0a400; box-shadow: 0 10px 24px -12px rgba(var(--shade), .7);
}
.dtl-volt svg { width: 38px; height: 38px; }
.dtl-volt__no { color: #e5484d; stroke: #e5484d; stroke-dasharray: 46; stroke-dashoffset: 46; animation: dtl-no 3.2s var(--ease) infinite; }
@keyframes dtl-no { 0%, 20% { stroke-dashoffset: 46; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 46; } }
.dtl-volt__bolt { fill: rgba(224, 164, 0, .18); animation: dtl-bolt 3.2s steps(1) infinite; }
@keyframes dtl-bolt { 0%, 8%, 16% { opacity: 1; } 4%, 12% { opacity: .35; } }
@media (max-width: 1060px) {
    .dtl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .dtl-card { grid-column: span 1 !important; --mh: 300px !important; }
    .dtl-card--plate, .dtl-card--pad, .dtl-card--ply { grid-column: span 2 !important; --mh: 380px !important; }
}
@media (max-width: 760px) {
    .dtl-card--ply { flex-direction: column; }
    .dtl-card--ply .dtl-media { flex: none; height: var(--mh); min-height: 0; }
    .dtl-card--ply { gap: 0; }
    .dtl-card--ply figcaption { padding: 18px 2px 6px; font-size: 15px; }
}
@media (max-width: 560px) {
    .dtl-grid { grid-template-columns: 1fr; }
    .dtl-card, .dtl-card--plate, .dtl-card--pad, .dtl-card--ply { grid-column: span 1 !important; --mh: 250px !important; }
    .dtl-card figcaption { padding: 12px 2px 4px; font-size: 14.5px; }
    .dtl-grid { gap: 28px; }
    .dtl-card figcaption b { font-size: 18px; }
}

/* ------------------------------------------------------------------ рост и габариты */
.size { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.size__height { position: relative; margin: 0; aspect-ratio: 1500 / 2000; max-height: 860px; justify-self: center; width: 100%; max-width: 620px; }
.size__height img { position: absolute; inset: 0; width: 100%; height: 100%; }
.size__line { position: absolute; left: 0; right: 0; top: var(--y); height: 0; }
.size__line { border-top: 1.5px solid var(--accent); }
.size__line em { position: absolute; right: 0; bottom: 5px; font-style: normal; font-size: 13.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.size__line b { font-size: 17px; font-weight: 700; color: var(--ink); margin-right: 4px; }
.size__line--main { border-top-width: 2px; }
.size__line--main em, .size__line--main b { color: var(--accent); }
.size__side { display: grid; gap: 34px; }
.size__text { display: grid; gap: 18px; }
.size__dims { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dim { margin: 0; display: grid; gap: 10px; }
.dim figcaption { font-size: 14px; color: var(--muted); text-align: center; }
.dim__pic { position: relative; aspect-ratio: 970 / 1360; border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--line-2); }
.dim__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dim__v { position: absolute; top: var(--top); bottom: calc(100% - var(--floor)); left: calc(var(--x0) - 7%); width: 0; border-left: 1.5px solid var(--accent); }
.dim__v::before, .dim__v::after, .dim__w::before, .dim__w::after { content: ''; position: absolute; background: var(--accent); }
.dim__v::before, .dim__v::after { left: -6px; width: 11px; height: 1.5px; }
.dim__v::before { top: 0; } .dim__v::after { bottom: 0; }
.dim__v b { position: absolute; top: 50%; left: -10px; transform: translate(-100%, -50%); font-size: 14px; font-weight: 700; color: var(--accent); background: var(--paper); padding: 2px 6px; border-radius: 6px; }
.dim__w { position: absolute; left: var(--x0); right: calc(100% - var(--x1)); top: calc(var(--floor) + 1.2%); height: 0; border-top: 1.5px solid var(--accent); }
.dim__w::before, .dim__w::after { top: -6px; width: 1.5px; height: 11px; }
.dim__w::before { left: 0; } .dim__w::after { right: 0; }
.dim__w b { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-size: 14px; font-weight: 700; color: var(--accent); background: var(--paper); padding: 2px 6px; border-radius: 6px; }
.dim__pic { margin-bottom: 26px; margin-left: 30px; }
.size__specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.size__specs div { padding: 18px 16px 0 0; display: grid; gap: 4px; }
.size__specs div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.size__specs dt { font-size: 13.5px; color: var(--muted); }
.size__specs dd { margin: 0; font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
@media (max-width: 960px) {
    .size { grid-template-columns: 1fr; gap: 40px; }
    .size__height { max-width: 460px; }
}
@media (max-width: 560px) {
    .size__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .size__specs div:nth-child(3) { padding-left: 0; border-left: 0; }
    .size__dims { gap: 10px; }
    .dim__pic { margin-left: 24px; }
}

/* ------------------------------------------------------------------ оплата: две фотографии вместо одной */
.pay-pics { display: grid; gap: 16px; }
.pay-wrap .pay-pics .photo { aspect-ratio: 3 / 2; }

/* ------------------------------------------------------------------ приложение CRM в RuStore */
.app-band {
    position: relative; margin-top: 70px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px;
    align-items: center; padding: 56px; border-radius: calc(var(--radius) * 2); overflow: hidden;
    background: color-mix(in srgb, var(--paper) 86%, transparent); border: 1px solid var(--line);
}
.app-band__text { display: grid; gap: 22px; align-content: start; }
.app-band__id { display: flex; align-items: center; gap: 16px; }
.app-band__id img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 24px -14px rgba(var(--shade), .7); }
.app-band__id div { display: grid; gap: 2px; }
.app-band__id b { font-size: 20px; font-weight: 700; }
.app-band__id span { font-size: 14px; color: var(--muted); }
.app-band__list { list-style: none; display: grid; gap: 8px; }
.app-band__list li { position: relative; padding-left: 26px; color: var(--ink-2); }
.app-band__list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-2px); }
.app-band__get { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 6px; }
.app-band__badge { display: block; border-radius: 10px; transition: transform .3s var(--ease); }
.app-band__badge:hover { transform: translateY(-3px); }
.app-band__badge img { width: 222px; height: auto; }
.app-band__badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.app-band__qr { display: flex; align-items: center; gap: 14px; max-width: 280px; }
.app-band__qr img { width: 88px; height: 88px; padding: 8px; background: #fff; border-radius: 10px; border: 1px solid var(--line); flex-shrink: 0; }
.app-band__qr span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.app-band__phones { position: relative; height: 470px; }
.phone {
    position: absolute; bottom: -80px; width: 210px; aspect-ratio: 540 / 960; border-radius: 30px; padding: 7px;
    background: #0b1220; box-shadow: 0 30px 60px -30px rgba(var(--shade), .8);
    transition: transform .8s var(--ease-out);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
.phone--c { left: 50%; margin-left: -115px; width: 230px; bottom: -40px; z-index: 2; }
.phone--l { left: 4%; transform: rotate(-7deg); }
.phone--r { right: 4%; transform: rotate(7deg); }
.app-band:hover .phone--l { transform: rotate(-9deg) translateY(-8px); }
.app-band:hover .phone--r { transform: rotate(9deg) translateY(-8px); }
.app-band:hover .phone--c { transform: translateY(-10px); }
@media (max-width: 960px) {
    .app-band { grid-template-columns: 1fr; padding: 32px 24px 0; }
    .app-band__phones { height: 360px; }
    .phone { width: 160px; } .phone--c { width: 180px; margin-left: -90px; }
}
@media (max-width: 560px) {
    .app-band { margin-top: 48px; }
    .app-band__qr { display: none; }
    .app-band__phones { height: 300px; }
    .phone { width: 130px; border-radius: 22px; padding: 5px; } .phone img { border-radius: 18px; }
    .phone--c { width: 150px; margin-left: -75px; }
    .phone--l { left: -2%; } .phone--r { right: -2%; }
}
@media (prefers-reduced-motion: reduce) {
    .dtl-waves, .dtl-volt__no { animation: none !important; }
}

/* ------------------------------------------------------------------ карточки моделей и сцена модели: ровный фон
 * Владелец, 31.10: «фон карточек не нравится — пол этот вообще убрать… сайт выглядит слишком ИИшным». Поэтому без
 * подиума, градиентов и значков-«таблеток» на картинке: ровная светлая (в тёмной теме — тёмно-синяя) подложка,
 * аппарат с мягкой тенью, подписи — текстом под картинкой. */
.model__pic, .stage { background: var(--card-plate); }
:root { --card-plate: #f1f5fc; }
html.dark { --card-plate: #0d1b38; }
@media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --card-plate: #0d1b38; } }
.model:hover .model__pic { background: color-mix(in srgb, var(--card-plate) 92%, var(--accent)); }
.model .spin__dial { bottom: 14px; }
.model .spin__label { display: none; }
.stage-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stage-thumbs button { background: var(--card-plate); }

/* ------------------------------------------------------------------ вкладки цветов (фото по ТЗ) и просмотр на весь экран */
.gal-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gal-tabs button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.gal-tabs button i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.gal-tabs button:hover { border-color: var(--accent); color: var(--accent); }
.gal-tabs button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lb { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(4, 10, 24, .94); color: #fff; }
.lb.is-open { display: grid; grid-template-rows: 1fr auto; }
.lb__stage { position: relative; display: grid; place-items: center; padding: 56px 72px 12px; min-height: 0; touch-action: pan-y; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none;
    background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; }   /* вырезки — тоже на складе */
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 22px; font-size: 15px; }
.lb__bar b { font-weight: 600; }
.lb__bar span { color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.lb__btn {
    position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); border: 0; color: #fff; cursor: pointer;
}
.lb__btn:hover { background: rgba(255, 255, 255, .22); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__prev { left: 14px; } .lb__next { right: 14px; }
.lb__close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lb__close svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .lb__stage { padding: 56px 10px 8px; } .lb__btn { display: none; } }

/* ------------------------------------------------------------------ «как проходит игра»: четыре шага на настоящих фото */
.play { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.play__step { display: grid; gap: 8px; align-content: start; color: var(--muted); font-size: 15px; line-height: 1.5; }
.play__pic { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--card-plate); margin-bottom: 10px; }
.play__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play__pic.is-cut img { object-fit: contain; object-position: 50% 100%; padding: 8% 6% 0; }
.play__n { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.play__step b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
@media (max-width: 960px) { .play { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }
@media (max-width: 480px) { .play__step { font-size: 14px; } .play__step b { font-size: 17px; } }

/* =====================================================================================================================
 * 01.11.2026 — светлый склад, фото по ТЗ фотографу.
 * Владелец: «найди фото склада светлее или вообще сделай склад под стилистику — и фон выдуманного склада на другие
 * карточки ложился»; «есть ТЗ на ПК для фотографа — также красиво расположить фотографии, сейчас это каша»; «у каждого
 * силомера сравнение с человеком»; «анимации чётенько»; «на телефоне презентабельно».
 * Склад — рендер Blender (deploy/site_photos_real_20261031/blender/warehouse.py), аппараты — настоящие снимки.
 * ================================================================================================================== */
:root { --wh-card: url('../images/site/real/bg/card.webp'); --wh-plate: #edf0f4; }
html.dark { --wh-plate: #142347; }
@media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { --wh-plate: #142347; } }

/* ------------------------------------------------------------------ шапка поверх светлого первого экрана */
.has-light-hero .site-head { margin-bottom: -80px; }
.has-light-hero .site-head:not(.is-scrolled) { background: transparent; }

/* ------------------------------------------------------------------ первый экран: настоящий аппарат на светлом складе */
.hero-wh { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; background: #dfe3e8; }
.hero-wh__img { position: absolute; inset: 0; z-index: -2; }
.hero-wh__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; animation: wh-in 1.2s var(--ease-out) both; }
@keyframes wh-in { from { opacity: 0; transform: scale(1.03); } }
.hero-wh::before {          /* светлая дымка под текстом слева и под цифрами снизу */
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(246, 248, 251, .9) 0%, rgba(246, 248, 251, .7) 30%, rgba(246, 248, 251, 0) 56%),
        linear-gradient(0deg, rgba(246, 248, 251, .95) 0%, rgba(246, 248, 251, 0) 26%);
}
.hero-wh__inner { display: grid; gap: 24px; padding-top: 150px; padding-bottom: 40px; max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.hero-wh__inner > * { max-width: 560px; }
.hero-wh__kicker { font-size: 13.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero-wh__title { font-weight: 700; letter-spacing: -0.035em; line-height: .95; font-size: clamp(50px, 7.6vw, 120px); color: #0a1f4d; max-width: none; }
.hero-wh__title .hl { color: var(--accent); }
.hero-wh__lead { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; color: #2b4272; max-width: 46ch; }
.hero-wh .arrow-link { color: #0a1f4d; }
.hero-wh__facts { border-top-color: rgba(10, 31, 77, .14); margin-bottom: 34px; }
.hero-wh__facts b { color: #0a1f4d; }
.hero-wh__facts > div > span { color: #4c5f86; }
.hero-wh__facts > div + div { border-left-color: rgba(10, 31, 77, .12); }
html.dark .hero-wh::before { background:
    linear-gradient(90deg, rgba(6, 14, 31, .82) 0%, rgba(6, 14, 31, .55) 34%, rgba(6, 14, 31, 0) 60%),
    linear-gradient(0deg, rgba(6, 14, 31, .92) 0%, rgba(6, 14, 31, 0) 28%); }
html.dark .hero-wh__title, html.dark .hero-wh .arrow-link, html.dark .hero-wh__facts b { color: #fff; }
html.dark .hero-wh__lead { color: rgba(255, 255, 255, .86); }
html.dark .hero-wh__facts > div > span { color: rgba(255, 255, 255, .7); }
html.dark .hero-wh__facts { border-top-color: rgba(255, 255, 255, .2); }
html.dark .hero-wh__facts > div + div { border-left-color: rgba(255, 255, 255, .14); }
/* телефон (01.11.2026, владелец: «на мобилке — фотка сверху просто, убожество, не дизайнерский вкус; текст «Силомеры»
 * сделай меньше, не прям масштабным»): одна сцена во весь экран — сверху над аппаратом заголовок, аппарат целиком
 * стоит на полу склада, кнопки — на полу перед ним. Кадр нарисован под телефон 1:2 (warehouse.py SHOT=herom: аппарат
 * в нижней половине, сверху стена). Текст про завод и ссылка на 3D — под сценой. Сцена светлая в обеих темах: это фото. */
@media (max-width: 760px) {
    .hero-wh {
        display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 78px auto auto 1fr auto auto auto;
        min-height: 0; background: var(--bg); overflow: hidden;
    }
    .hero-wh__img { grid-area: 1 / 1 / 6 / 2; display: block; position: relative; inset: auto; z-index: 0; height: min(max(600px, 100svh), 200vw); }
    .hero-wh__img img { position: absolute; inset: 0; object-position: 50% 60%; }   /* шире 1:2 (планшет) — режем сверху и снизу, аппарат в середине */
    .hero-wh::before {
        display: block; grid-area: 1 / 1 / 6 / 2; position: relative; inset: auto; z-index: 1;
        background: linear-gradient(180deg, rgba(238, 241, 245, .9) 0%, rgba(238, 241, 245, .62) 24%, rgba(238, 241, 245, 0) 42%);
    }
    .has-light-hero .site-head { margin-bottom: -64px; }
    .hero-wh__inner { display: contents; }
    .hero-wh__inner > * { z-index: 2; margin: 0 var(--gutter); max-width: none; }
    .hero-wh__kicker { grid-area: 2 / 1; font-size: 11.5px; letter-spacing: .12em; color: #1f5ae8; }
    .hero-wh__title { grid-area: 3 / 1; margin-top: 8px; font-size: clamp(34px, 10.4vw, 46px); line-height: 1; color: #0a1f4d; }
    .hero-wh__title .hl { color: #1f5ae8; }
    .hero__actions.hero-wh__actions { grid-area: 5 / 1; align-self: end; width: auto; margin-bottom: 14px; gap: 10px; grid-template-columns: 1fr 1fr; }
    .hero-wh__actions .btn { min-height: 50px; padding: 6px 8px; font-size: 15px; box-shadow: 0 14px 30px -18px rgba(10, 31, 77, .55); }
    .hero-wh__actions .btn--line { background: rgba(255, 255, 255, .92); }
    .hero-wh__lead { grid-area: 6 / 1; margin-top: 24px; font-size: 16px; }
    .hero-wh__more { grid-area: 7 / 1; margin-top: 16px; justify-self: start; }
    html.dark .hero-wh__title { color: #0a1f4d; }
    html.dark .hero-wh::before { background: linear-gradient(180deg, rgba(238, 241, 245, .9) 0%, rgba(238, 241, 245, .62) 24%, rgba(238, 241, 245, 0) 42%); }
    html.dark .hero-wh .hero-wh__more { color: #fff; }
    .has-light-hero .site-head:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.dark .has-light-hero .site-head:not(.is-scrolled) { --ink: #0a1f4d; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
    html:not(.light):not(.dark) .hero-wh__lead { color: rgba(255, 255, 255, .86); }
    html:not(.light):not(.dark) .hero-wh .hero-wh__more { color: #fff; }
}

/* ------------------------------------------------------------------ подложка склада у карточек, сцены и ряда цветов */
.model__pic, .stage { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; }
.model:hover .model__pic { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; }
.model__pic::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, 0); transition: background-color .3s; pointer-events: none; }
.model:hover .model__pic::after { background: rgba(255, 255, 255, .06); }
.stage-thumbs button { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; }
.lineup__item img { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; border-radius: 10px; padding: 4% 6% 2%; }
.play__pic.is-cut { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; }
.dim__pic { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; border: 0; }
.size__height { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; border-radius: 12px; overflow: hidden; }

/* ------------------------------------------------------------------ фото по разделам ТЗ: буква раздела, сетка, код кадра */
.pb { display: grid; gap: 30px; }
.pb-tabs { position: sticky; top: 88px; z-index: 5; padding: 8px 0; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pb-set { display: grid; gap: 64px; }
.pb-set[hidden] { display: none; }
.pb-sec { display: grid; gap: 22px; }
.pb-head { display: flex; align-items: flex-start; gap: 16px; }
.pb-letter { flex: none; width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 24px; }
.pb-kicker { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pb-head h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; }
.pb-head p { margin-top: 6px; color: var(--muted); font-size: 15.5px; max-width: 70ch; }
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pb-tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); transition: border-color .25s, transform .35s var(--ease-out), box-shadow .35s; }
.pb-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(16, 48, 120, .45); }
.pb-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wh-plate); }
.pb-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pb-tile:hover .pb-pic img { transform: scale(1.03); }
.pb-tile--cut .pb-pic { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; }
/* аппарат целиком — меньше и глубже в складе (01.11 владелец: «преувеличение масштаба — плохо выглядит», «меньше,
 * поставить глубже»): стоит на полу примерно там, где стоял бы на рендере подложки, а не у самого края кадра */
.pb-tile--cut .pb-pic img { object-fit: contain; object-position: 50% 100%; padding: 20% 12% 8%; }
.pb-tile--main .pb-pic img { padding: 12% 14% 6%; }
/* часть аппарата — тоже на складе (01.11 «у всех фоток фон склада»): срезом к краю плитки, без белых полей */
.pb-tile--part .pb-pic { background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; }
.pb-tile--part .pb-pic img { object-fit: contain; }
.pb-tile--free .pb-pic img { padding: 8%; }
.pb-cap { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 12px 14px 14px; }
.pb-cap i { grid-row: span 2; align-self: start; font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 7px; border-radius: 6px; }
.pb-cap b { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.pb-cap small { font-size: 13px; color: var(--muted); line-height: 1.35; }
/* «Снаружи»: главный кадр 00 крупно — две колонки и две строки */
.pb-grid--н .pb-tile--main { grid-column: span 2; grid-row: span 2; }
.pb-grid--н .pb-tile--main .pb-pic { aspect-ratio: auto; flex: 1; min-height: 0; }
.pb-grid--н .pb-tile--main .pb-cap b { font-size: 19px; }
.pb-grid--г { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 960px) {
    .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pb-grid--н .pb-tile--main { grid-column: span 2; grid-row: auto; }
    .pb-grid--н .pb-tile--main .pb-pic { aspect-ratio: 4 / 5; }
    .pb-set { gap: 48px; }
    .pb-tabs { top: 64px; }
}
@media (max-width: 480px) {
    .pb-grid { gap: 10px; }
    .pb-cap { grid-template-columns: 1fr; padding: 10px 10px 12px; }
    .pb-cap i { grid-row: auto; justify-self: start; margin-bottom: 4px; }
    .pb-cap b { font-size: 14px; }
    .pb-cap small { font-size: 12px; }
    .pb-letter { width: 40px; height: 40px; font-size: 20px; }
}

/* ------------------------------------------------------------------ детали — тем же видом, что кадры ТЗ */
.dtl-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.dtl-media { border-radius: 0; }
.dtl-card figcaption { padding: 14px 18px 18px; }
.dtl-card--ply { border-top: 1px solid var(--line); padding-top: 0; margin-top: 0; gap: 0; }
.dtl-card--ply figcaption { padding: 36px 40px; }
.dtl-code { justify-self: start; font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 7px; border-radius: 6px; margin-bottom: 4px; }
@media (max-width: 760px) { .dtl-card--ply figcaption { padding: 18px; } }

/* ------------------------------------------------------------------ рост: у каждого цвета свой кадр, миниатюры для выбора */
.size__stage { display: grid; gap: 14px; justify-items: center; }
.size__height[hidden], .size__dims[hidden] { display: none; }
.size__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 620px; }
.size__thumbs button { display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.size__thumb { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--wh-plate) var(--wh-card) 50% 100% / cover no-repeat; transition: border-color .2s; }
.size__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.size__thumbs button > span:last-child { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.size__thumbs button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.size__thumbs button[aria-selected="true"] { color: var(--ink); }
.size__thumbs button[aria-selected="true"] .size__thumb { border-color: var(--accent); }
.facts-strip { padding: 34px 0 10px; }
.hero-wh { min-height: min(92svh, 900px); }
.hero-wh__inner { padding-bottom: 70px; }
@media (max-width: 760px) { .facts-strip { padding-top: 26px; } }
/* рост: одна тонкая линия верха аппарата и подпись без подложки (01.11 владелец: «много текста, убери 210 и т. д.») */
.size__line--main { border-top: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.size__line--main em { right: 14px; bottom: 6px; padding: 0; background: none; border: 0; font-size: 15px; font-weight: 700; color: var(--accent); }

/* =====================================================================================================================
 * 01.11.2026 — без мутной вуали поверх фото.
 * Владелец: «в белой теме убери мутный эффект» (блок контактов: синее затемнение поверх фото цеха). Фото теперь чёткое,
 * текст — на карточке цвета темы поверх фото. Так же — шапки страниц с фото (каталог, «О компании»).
 * ================================================================================================================== */
.cta-photo { color: var(--ink); background: var(--bg-2); padding: 110px 0; }
.cta-photo::before { content: none; }
.cta-photo .cta-card {
    --ink: inherit; --muted: inherit; --line: inherit; --accent: inherit;
    grid-template-columns: 1fr; gap: 28px; align-items: start; max-width: 600px;
    padding: 44px 44px 36px; background: var(--paper); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(10, 31, 77, .5);
}
.cta-photo .lead { color: var(--ink-2); }
.cta-photo .label { color: var(--accent); }
.cta-photo .big-phone { font-size: clamp(34px, 4vw, 54px); }
.page-head--photo { color: var(--ink); background: var(--bg-2); align-items: flex-end; }
.page-head--photo::before { content: none; }
.page-head--photo .page-head__inner { width: auto; }
.page-head--photo .page-head__inner > .crumbs, .page-head--photo .page-head__inner > h1, .page-head--photo .page-head__inner > .lead { max-width: 760px; }
.page-head--photo .page-head__card { display: grid; gap: 18px; max-width: 780px; padding: 36px 40px 34px; background: var(--paper); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(10, 31, 77, .5); }
.page-head--photo .display, .page-head--photo h1 { color: var(--ink); font-size: clamp(40px, 5.4vw, 84px); }
.page-head--photo .lead { color: var(--ink-2); }
.page-head--photo .crumbs, .page-head--photo .crumbs a { color: var(--muted); }
@media (max-width: 760px) {
    .cta-photo { padding: 0 0 48px; }
    .cta-photo__img { position: relative; inset: auto; z-index: 0; height: 280px; overflow: hidden; }
    .cta-photo__img img { transform: none; }
    .cta-photo .cta-card { position: relative; z-index: 1; margin-top: -64px; padding: 26px 20px 22px; border-radius: 14px; gap: 22px; }
    .page-head--photo { display: block; min-height: 0; padding: 0 0 8px; }
    .page-head--photo .page-head__img { position: relative; inset: auto; z-index: 0; height: 300px; overflow: hidden; }
    .page-head--photo .page-head__img img { transform: none; }
    .page-head--photo .page-head__card { position: relative; z-index: 1; margin-top: -64px; padding: 24px 20px 22px; border-radius: 14px; gap: 14px; }
    .page-head--photo .display, .page-head--photo h1 { font-size: clamp(32px, 9vw, 40px); }
}

/* =====================================================================================================================
 * 01.11.2026 — телефон: страница листается только вниз.
 * Владелец: «чтобы на телефоне выглядело неплохо, было удобно, и сайт не вилял влево-вправо, а чётко свайпался вниз».
 * Что «виляло»: лента моделей вбок (свайп вниз по ней уводил ленту в сторону), прокрутка вбок у режимов платы и
 * ракурсов, плата в 3D на всю ширину ловила палец (страница стояла, крутилась модель), блоки въезжали сбоку
 * (reveal--left/right), фон сайта плыл влево-вправо. Теперь на телефоне всё сеткой и столбиком.
 * ================================================================================================================== */
main { overflow-x: clip; }      /* страховка: ничто не шире экрана; clip, а не hidden — hidden ломает sticky */
@keyframes hall-drift { from { transform: scale(1.04) translate3d(-1.8%, -1%, 0); } to { transform: scale(1.14) translate3d(1.8%, 1.2%, 0); } }
@keyframes hall-drift-v { from { transform: scale(1.04); } to { transform: scale(1.12) translate3d(0, 1.6%, 0); } }
@media (max-width: 760px) {
    .site-pic i { animation-name: hall-drift-v; }
    .js .reveal--left, .js .reveal--right { transform: translateY(18px); }
    .section { padding: 60px 0; }
    .section__head { margin-bottom: 28px; }

    /* режимы платы — сеткой 3 × 2, а не лентой вбок */
    .board-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0; padding: 0; }
    .board-modes button { min-width: 0; padding: 8px 4px; font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; }
    /* 3D: вертикальный свайп листает страницу, вбок — крутит модель; окно ниже, чтобы его легко пролистать */
    .viewer3d { height: auto; aspect-ratio: 1 / 1; min-height: 0; }
    .viewer3d canvas { touch-action: pan-y !important; }
    /* вкладки CRM — 2 × 2 равными кнопками */
    .crm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .crm-tabs button { padding: 10px 6px; font-size: 14px; }
    /* ракурсы на странице модели — сеткой */
    .stage-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0; padding: 0; }

    /* фото по ТЗ: цвета — одной строкой, сплошной фон без мути; подписи короче */
    .pb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 0; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .pb-tabs button { min-width: 0; min-height: 38px; padding: 0 4px; gap: 5px; justify-content: center; font-size: 12.5px; }
    .pb-tabs button i { width: 10px; height: 10px; flex: none; }
    .pb-set { gap: 40px; }
    .pb-sec { gap: 16px; }
    .pb-head { gap: 12px; }
    .pb-head p { font-size: 14.5px; }
    .pb-cap small { display: none; }
    .pb-cap i { font-size: 11px; }
}
@media (max-width: 760px) {
    .size__thumbs { gap: 6px; }
    .size__thumbs button { min-width: 0; font-size: 12px; }
    .size__thumbs button > span:last-child { gap: 4px; white-space: nowrap; }
    .size__thumbs button i { width: 8px; height: 8px; flex: none; }
    .board-modes button { min-height: 44px; display: grid; place-items: center; }
}
@media (max-width: 760px) { .stage .spin__frames { inset: 15% 14% 84px; } }
/* тёмная тема: шапка над светлым складом первого экрана — тёмные буквы, пока страницу не пролистали */
html.dark .has-light-hero .site-head:not(.is-scrolled) .brand b { color: #0a1f4d; }
html.dark .has-light-hero .site-head:not(.is-scrolled) .icon-btn { color: #0a1f4d; border-color: rgba(10, 31, 77, .25); background: rgba(255, 255, 255, .6); }
@media (prefers-color-scheme: dark) {
    html:not(.light):not(.dark) .has-light-hero .site-head:not(.is-scrolled) .brand b { color: #0a1f4d; }
    html:not(.light):not(.dark) .has-light-hero .site-head:not(.is-scrolled) .icon-btn { color: #0a1f4d; border-color: rgba(10, 31, 77, .25); background: rgba(255, 255, 255, .6); }
}

/* =====================================================================================================================
 * 01.11.2026 — фото целиком, без «приближения».
 * Владелец: «фотки из-за того, что ты их приблизила, не всё влезает в кадр — выглядит странно» (у «Старта» было видно
 * «ТАР», колесо и ввод кабеля обрезаны). Рамка теперь по пропорциям снимка; вырезанный аппарат — целиком на складе.
 * ================================================================================================================== */
/* фото по ТЗ: снимок во весь кадр — в своих пропорциях, широкий — на две колонки; вырезки растут под высоту строки */
.pb-tile--wide { grid-column: span 2; }
.pb-tile--cut .pb-pic, .pb-tile--part .pb-pic { flex: 1 0 auto; }
/* как проходит игра: рамки 3:2 у всех шагов */
.play__pic { aspect-ratio: 3 / 2; }
.play__pic.is-cut img { padding: 6% 0 3%; }
/* детали: кадр по пропорциям снимка; ряды подобраны так, чтобы высоты совпадали */
.dtl-grid { align-items: start; }
.dtl-media { height: auto; aspect-ratio: var(--ar, 3 / 2); }
.dtl-card--plate { grid-column: span 8; --ar: 1600 / 960; }
.dtl-card--wheel { grid-column: span 4; --ar: 960 / 1200; }
.dtl-card--cable { grid-column: span 4; --ar: 960 / 1200; }
.dtl-card--start { grid-column: span 8; --ar: 1500 / 1000; }
.dtl-card--roof, .dtl-card--anchor, .dtl-card--pad { grid-column: span 4; --ar: 1500 / 1000; }
.dtl-card--ply .dtl-media { flex: 0 0 40%; aspect-ratio: 960 / 1200; min-height: 0; }
/* крыша целиком в рамке (раньше выходила за край) — дождь считает по её месту на экране */
.dtl-roof { right: 6%; bottom: 6%; width: auto; height: 86%; }
.dtl-roof img { width: auto; height: 100%; }
@media (max-width: 1060px) {
    .dtl-card, .dtl-card--plate, .dtl-card--pad, .dtl-card--ply { grid-column: span 1 !important; }
    .dtl-card--plate, .dtl-card--ply { grid-column: span 2 !important; }
}
@media (max-width: 760px) {
    .dtl-card--ply .dtl-media { flex: none; height: auto; }
    .play { grid-template-columns: 1fr; gap: 28px; }
    .play__step { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .dtl-card, .dtl-card--plate, .dtl-card--ply { grid-column: span 1 !important; }
}

/* ------------------------------------------------------------------ первый экран телефона: выноски и цена
 * 01.11.2026 владелец: «первое впечатление — дешмань», «заполни не фото, а расположи текст и элементы красиво —
 * сейчас пустота». Тонкие линии от деталей аппарата к краям экрана с подписями, над полом — цена. Кадр на телефоне
 * всегда 1:2 (высота 200vw), поэтому точки в процентах сцены попадают в детали. Шире телефона выноски не показываем. */
.hero-wh__marks { display: none; }
@media (max-width: 560px) {
    .hero-wh__img { height: 200vw; }
    .hero-wh__marks { display: block; grid-area: 1 / 1 / 6 / 2; position: relative; z-index: 2; pointer-events: none; }
    .hm { position: absolute; top: var(--y); height: 0; color: #0a1f4d; }
    .hm--l { left: var(--gutter); right: calc(100% - var(--x)); }
    .hm--r { left: var(--x); right: var(--gutter); text-align: right; }
    .hm::before {
        content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid rgba(10, 31, 77, .5);
        transform-origin: var(--o, 100%) 0; animation: hm-line .55s var(--ease-out) var(--d, .5s) both;
    }
    .hm--r::before { --o: 0%; }
    .hm i {
        position: absolute; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #1f5ae8;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); animation: hm-dot .35s var(--ease-out) var(--d, .5s) both;
    }
    .hm--l i { right: -4px; }
    .hm--r i { left: -4px; }
    .hm b, .hm small {
        position: absolute; display: block; width: 28vw; line-height: 1.2; animation: hm-text .45s var(--ease-out) calc(var(--d, .5s) + .25s) both;
    }
    .hm--l b, .hm--l small { left: 0; }
    .hm--r b, .hm--r small { right: 0; }
    .hm b { bottom: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; }
    .hm small { top: 5px; font-size: 11px; color: #4c5f86; }
    .hero-wh__price {
        position: absolute; left: var(--gutter); right: var(--gutter); top: 75%; display: grid; justify-items: center; gap: 4px;
        text-align: center; color: #0a1f4d; animation: hm-text .5s var(--ease-out) 1s both;
    }
    .hero-wh__price b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
    .hero-wh__price span { font-size: 12.5px; color: #4c5f86; }
    @keyframes hm-line { from { transform: scaleX(0); } }
    @keyframes hm-dot { from { transform: scale(0); } }
    @keyframes hm-text { from { opacity: 0; transform: translateY(6px); } }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
    .hm::before, .hm i, .hm b, .hm small, .hero-wh__price { animation: none; }
}

/* ------------------------------------------------------------------ страница модели: «Детали» и «Аппарат на фото»
 * 01.11.2026 вечер, владелец: «детально по силомеру блок фоток тоже выглядит дизайнерски плохо». Было: карточки разного
 * размера (шильд и «Старт» во всю ширину), коды «Д-01» и «Н-01» в «таблетках», буквы разделов, рваная сетка. Теперь
 * «Детали» — ровная сетка 4 × 2 одинаковых карточек (квадратное фото, заголовок, текст), «Аппарат на фото» — сетка
 * 4 колонки: аппарат и портретный снимок 4:5, широкий снимок на две колонки; кодов и букв нет. */
.dtl-code, .pb-letter, .pb-kicker, .pb-cap i { display: none; }
.dtl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.dtl-grid > .dtl-card {
    grid-column: auto !important; --mh: auto; flex-direction: column; gap: 0; margin: 0; padding: 0;
    background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
    transition: transform .5s var(--ease-out), box-shadow .4s;
}
.dtl-grid > .dtl-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -32px rgba(16, 48, 120, .5); }
.dtl-grid > .dtl-card .dtl-media { flex: none; height: auto; min-height: 0; aspect-ratio: 1 / 1; border-radius: 0; }
.dtl-grid > .dtl-card figcaption { padding: 18px 20px 22px; gap: 8px; font-size: 14.5px; line-height: 1.55; max-width: none; align-content: start; }
.dtl-grid > .dtl-card figcaption b { font-size: 18px; letter-spacing: -0.01em; }
.dtl-grid > .dtl-card--ply figcaption span + span { display: none; }
.dtl-grid > .dtl-card .dtl-kicker { font-size: 12px; }
.pb-head { display: block; }
.pb-head h3 { font-size: clamp(22px, 2vw, 28px); }
.pb-set { gap: 56px; }
.pb .pb-grid, .pb .pb-grid--н, .pb .pb-grid--г { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: none; align-items: stretch; }
.pb .pb-tile, .pb .pb-grid--н .pb-tile--main { grid-column: auto !important; grid-row: auto !important; margin: 0; border-radius: 16px; }
/* аппарат и портретный снимок — вертикальная плитка 4:5; широкий снимок — на две колонки, по высоте ряда */
.pb .pb-tile .pb-pic, .pb .pb-grid--н .pb-tile--main .pb-pic { aspect-ratio: 4 / 5 !important; flex: none; }
.pb .pb-tile--wide { grid-column: span 2 !important; }
/* фрагмент аппарата (крыша сверху, голова снизу) — во всю плитку, а не полоской посередине пола */
.pb .pb-tile--part .pb-pic img { object-fit: cover; padding: 0; }
.pb .pb-tile--wide .pb-pic { aspect-ratio: auto !important; flex: 1 1 auto; min-height: 220px; }
.pb .pb-tile--main .pb-pic img { padding: 20% 12% 8%; }
.pb .pb-cap { grid-template-columns: 1fr; padding: 12px 14px 14px; }
.pb .pb-grid--н .pb-tile--main .pb-cap b { font-size: 15.5px; }
@media (max-width: 1100px) {
    .dtl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pb .pb-grid, .pb .pb-grid--н, .pb .pb-grid--г { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .dtl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dtl-grid > .dtl-card { border-radius: 16px; }
    .dtl-grid > .dtl-card figcaption { padding: 12px 12px 14px; font-size: 13px; gap: 5px; }
    .dtl-grid > .dtl-card figcaption b { font-size: 15px; }
    .pb .pb-grid, .pb .pb-grid--н, .pb .pb-grid--г { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pb .pb-tile, .pb .pb-grid--н .pb-tile--main { border-radius: 12px; }
    .pb .pb-tile--wide .pb-pic { min-height: 160px; }
}

/* ------------------------------------------------------------------ первый экран страниц на складе (.pg-hero)
 * 01.11.2026 вечер, владелец: «Телеметрия — хочется видеть фотку, красиво текст»; «блок контакты переделай красиво».
 * Склад чёткий (без общей белёсой пелены сайта), белая дымка только слева под текстом; заголовок — тот же узкий
 * прописной шрифт, что на главной. Справа — аппарат с телефоном CRM («Телеметрия») или карточка контактов. */
.pg-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 940px); display: flex; align-items: center; }
.pg-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #e7ebf0; }
.pg-hero__bg i { position: absolute; inset: -5%; background: url('../images/site/real/bg/warehouse.webp') 55% 42% / cover no-repeat; animation: hall-drift 60s ease-in-out infinite alternate; }
.pg-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(248, 250, 252, .95) 0%, rgba(248, 250, 252, .82) 36%, rgba(248, 250, 252, 0) 62%),
        linear-gradient(0deg, rgba(248, 250, 252, .9) 0%, rgba(248, 250, 252, 0) 22%);
}
.pg-hero__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding-top: 120px; padding-bottom: 60px; }
.pg-hero__text { display: grid; gap: 20px; justify-items: start; max-width: 640px; }
.pg-hero .crumbs { color: #5d6f97; }
.pg-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 6px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pg-kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.pg-h1 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: #0a1f4d; font-size: clamp(56px, 7.4vw, 124px); line-height: .88; letter-spacing: -.01em; margin: 0; }
.pg-h1 .hl { color: var(--accent); }
.pg-lead { font-size: clamp(16.5px, 1.3vw, 19.5px); line-height: 1.6; color: #2b4272; max-width: 540px; }
.pg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pg-points li { position: relative; padding-left: 30px; color: #0a1f4d; font-weight: 600; font-size: 16px; }
.pg-points li::before { content: ''; position: absolute; left: 2px; top: .42em; width: 15px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.pg-hero .hero__actions { margin-top: 6px; }
.pg-hero .btn--line { background: rgba(255, 255, 255, .75); }
/* «Телеметрия»: аппарат на полу склада и телефон с CRM рядом */
.pg-crm { position: relative; height: min(78vh, 760px); }
.pg-crm__machine { position: absolute; left: 6%; bottom: 0; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 30px 30px rgba(20, 28, 40, .18)); }
.pg-crm__phone {
    position: absolute; right: 0; bottom: 8%; width: min(250px, 42%); margin: 0; border-radius: 30px; overflow: hidden;
    border: 8px solid #0a1f4d; background: #0a1f4d; box-shadow: 0 40px 70px -30px rgba(10, 31, 77, .6);
    animation: pg-float 6s ease-in-out infinite;
}
.pg-crm__phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
@keyframes pg-float { 50% { transform: translateY(-14px); } }
/* «Контакты»: крупный телефон и карточка */
.pg-phone { font-weight: 800; font-stretch: 75%; font-size: clamp(46px, 5.6vw, 92px); line-height: 1; color: #0a1f4d; text-decoration: none; letter-spacing: -.005em; }
.pg-phone:hover { color: var(--accent); }
.pg-card { margin: 0; justify-self: end; width: min(520px, 100%); background: #fff; border-radius: 24px; padding: 10px 32px; box-shadow: 0 40px 80px -46px rgba(10, 31, 77, .55); }
.pg-card div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pg-card div:last-child { border-bottom: 0; }
.pg-card dt { font-size: 13.5px; color: #5d6f97; padding-top: 2px; }
.pg-card dd { margin: 0; font-size: 16.5px; line-height: 1.45; color: #0a1f4d; font-weight: 600; }
.pg-card dd a { color: var(--accent); text-decoration: none; }
.pg-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pg-way { display: grid; grid-template-columns: 38% 1fr; align-items: stretch; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: #0a1f4d; transition: transform .5s var(--ease-out), box-shadow .4s; }
.pg-way:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -32px rgba(16, 48, 120, .5); }
.pg-way__pic { position: relative; min-height: 220px; background: #e7ebf0 url('../images/site/real/bg/card.webp') 50% 70% / cover no-repeat; }
.pg-way__pic img { position: absolute; inset: 10% 6% 4%; width: 88%; height: 86%; object-fit: contain; object-position: 50% 100%; }
.pg-way__txt { display: grid; gap: 8px; align-content: center; padding: 22px 22px; }
.pg-way__txt b { font-size: 20px; line-height: 1.2; }
.pg-way__txt span { font-size: 14.5px; line-height: 1.5; color: #5d6f97; }
.pg-way__txt em { font-style: normal; font-weight: 700; color: var(--accent); font-size: 14.5px; margin-top: 4px; }
.pg-way__txt em::after { content: ' →'; }
@media (max-width: 1100px) {
    .pg-ways { grid-template-columns: 1fr; }
    .pg-way { grid-template-columns: 180px 1fr; }
}
@media (max-width: 900px) {
    .pg-hero { min-height: 0; }
    .pg-hero::before { background: linear-gradient(180deg, rgba(248, 250, 252, .94) 0%, rgba(248, 250, 252, .8) 52%, rgba(248, 250, 252, .2) 100%); }
    .pg-hero__grid { grid-template-columns: 1fr; padding-top: 96px; padding-bottom: 36px; gap: 28px; }
    .pg-crm { height: 460px; }
    .pg-crm__machine { left: 0; }
    .pg-card { justify-self: stretch; padding: 4px 20px; }
    .pg-card div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}
@media (max-width: 760px) {
    .pg-h1 { font-size: clamp(48px, 15vw, 72px); }
    .pg-phone { font-size: 42px; }
    .pg-hero .hero__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .pg-hero .hero__actions .btn { width: 100%; }
    .pg-crm { height: 400px; }
    .pg-crm__phone { width: 44%; border-width: 6px; border-radius: 24px; }
    .pg-way { grid-template-columns: 120px 1fr; }
    .pg-way__pic { min-height: 170px; }
    .pg-way__txt { padding: 16px; }
    .pg-way__txt b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .pg-hero__bg i, .pg-crm__phone { animation: none; } }

/* «Габариты» на странице модели (01.11.2026 вечер, владелец: «текст 179 не видно» — тонкая серая подпись терялась на
   стеллажах склада): подпись линии роста — на белой плашке, крупнее */
.size__line--main em {
    right: 10px; bottom: 8px; padding: 5px 11px; border-radius: 8px; background: #fff; color: var(--accent);
    font-size: 15px; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(10, 31, 77, .45);
}