/* =========================================================
   CAMPIONE Брест — style.css
   Mobile First · премиальный минимализм · акцент #7D5CFF
   ========================================================= */

:root {
    --purple: #7D5CFF;
    --purple-dark: #5B3FD6;
    --purple-light: #9C7BFF;
    --purple-50: #F3EFFF;
    --purple-100: #E7DEFF;
    --ink: #14111F;
    --ink-2: #3A3550;
    --muted: #6B6580;
    --line: #ECEAF2;
    --bg: #FFFFFF;
    --bg-soft: #FAF9FE;
    --white: #FFFFFF;
    --card: #FFFFFF;
    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 28px;
    --shadow-sm: 0 4px 16px rgba(20, 17, 31, .06);
    --shadow: 0 12px 28px -12px rgba(20, 17, 31, .14), 0 30px 60px -30px rgba(20, 17, 31, .16);
    --shadow-lg: 0 20px 42px -18px rgba(20, 17, 31, .20), 0 54px 104px -42px rgba(20, 17, 31, .32);
    --glow: 0 0 0 6px rgba(125, 92, 255, .12), 0 14px 40px rgba(125, 92, 255, .35);
    --container: 1240px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --display: 'Unbounded', var(--font);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background:
        radial-gradient(60% 40% at 88% -8%, rgba(125,92,255,.045), transparent 58%),
        radial-gradient(130% 90% at 50% -25%, #FCFCFE 0%, #F5F6F9 54%, #EEF0F5 100%);
    background-attachment: fixed;
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 18px; height: 18px; }

/* --------------------- Типографика --------------------- */
.section { padding: 64px 0; position: relative; }
.section--soft {
    background:
        radial-gradient(55% 75% at 10% 12%, rgba(125,92,255,.10), transparent 60%),
        radial-gradient(52% 70% at 92% 90%, rgba(156,123,255,.11), transparent 62%),
        linear-gradient(180deg, #FBFAFF 0%, #F4F0FF 100%);
}
.section--soft::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(125,92,255,.09) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(85% 75% at 50% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(85% 75% at 50% 30%, #000 0%, transparent 78%);
}
.section--soft > * { position: relative; z-index: 1; }
.section--tight { padding: 44px 0; }
/* Тёмная премиальная секция — ритм свет/тьма на главной.
   Красим только «шапку» секции; внутренние карточки (белый квиз) не трогаем. */
.section--dark { background: #14111F; }
.section--dark > .container > .section-head .section-title { color: #fff; }
.section--dark > .container > .section-head .section-sub { color: rgba(255,255,255,.68); }
.section--dark > .container > .section-head .eyebrow { background: rgba(125,92,255,.18); color: #fff; }
/* На странице автоматики .section принудительно белый — перебиваем для тёмных секций */
body[data-page="avtomatika"] .section.section--dark { background: #14111F; }

.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--purple); background: var(--purple-50);
    padding: 7px 14px; border-radius: 100px; margin-bottom: 16px;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.section-title { font-size: calc(clamp(28px, 4.3vw, 46px) * var(--h-scale, 1)); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
.section-sub { color: var(--muted); font-size: clamp(15px, 2vw, 18.5px); margin-top: 16px; }
.display { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }

/* --------------------- Кнопки --------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 26px; border-radius: 100px; font-weight: 700; font-size: 15px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s;
    white-space: nowrap; will-change: transform;
}
.btn--primary { background: var(--purple); color: #fff; box-shadow: 0 12px 30px rgba(125,92,255,.35); }
.btn--primary:hover { background: var(--purple-dark); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(125,92,255,.45); }
.btn--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-3px); }
.btn--outline { background: #fff; color: var(--purple); border: 1.5px solid var(--purple-100); }
.btn--outline:hover { border-color: var(--purple); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 34px; font-size: 16px; }

/* =========================================================
   ПРЕЛОАДЕР
   ========================================================= */
.has-preloader { overflow: hidden; }
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 26px; background: radial-gradient(circle at 50% 45%, #201a38 0%, #0e0b18 70%);
}
.preloader__stage { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.preloader__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.preloader__ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.preloader__ring-fg {
    fill: none; stroke: var(--purple); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 339.29; stroke-dashoffset: 339.29;
    filter: drop-shadow(0 0 8px rgba(125,92,255,.8));
}
.preloader__logo { width: 96px; height: 96px; display: grid; place-items: center; filter: drop-shadow(0 0 0 rgba(125,92,255,0)); }
.preloader__logo img { width: 100%; height: 100%; }
.preloader__title {
    font-family: var(--display); font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
    color: #fff; font-size: 15px; opacity: 0;
}
.preloader__title span { color: var(--purple-light); }

/* Клон логотипа, летящий в шапку */
.logo-flyer { position: fixed; z-index: 10000; pointer-events: none; }
.logo-flyer img { width: 100%; height: 100%; }

/* =========================================================
   ШАПКA
   ========================================================= */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
    padding: 14px 0;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header.is-scrolled { background: rgba(255,255,255,.86); backdrop-filter: blur(16px); box-shadow: 0 6px 30px rgba(20,17,31,.08); padding: 8px 0; }

/* На тёмном hero шапка светлая */
.header.is-transparent .nav__link,
.header.is-transparent .header__phone,
.header.is-transparent .header__address,
.header.is-transparent .logo__text strong { color: #fff; }
.header.is-transparent .logo__text em { color: #7D5CFF; }
.header.is-transparent .soc { color: #fff; border-color: rgba(255,255,255,.25); }
.header.is-transparent.is-scrolled .nav__link,
.header.is-transparent.is-scrolled .header__phone,
.header.is-transparent.is-scrolled .header__address,
.header.is-transparent.is-scrolled .logo__text strong { color: var(--ink); }
.header.is-transparent.is-scrolled .soc { color: var(--purple); border-color: var(--purple-100); }

.logo { display: inline-flex; align-items: center; gap: 12px; transition: transform .3s var(--ease); }
.logo__mark { width: 44px; height: 44px; display: grid; place-items: center; transition: filter .3s, transform .3s var(--ease); }
.logo__mark img { width: 100%; height: 100%; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__text strong { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.logo__text em { font-style: normal; font-size: 11px; letter-spacing: .32em; color: var(--purple); font-weight: 700; }
.logo:hover { transform: scale(1.04); }
.logo:hover .logo__mark { filter: drop-shadow(0 0 12px rgba(125,92,255,.6)); transform: rotate(-6deg); }

/* Пока летит клон — прячем настоящий логотип шапки */
.header.logo-pending #header-logo { opacity: 0; }

.nav { display: none; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
    position: relative; display: inline-flex; align-items: center; padding: 8px 2px;
    font-weight: 600; font-size: 15px; color: var(--ink-2); transition: color .25s;
}
.nav__link::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--purple);
    transition: width .3s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--purple); }
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }
.nav__caret { display: inline-flex; align-items: center; margin-left: 3px; }
.nav__caret svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .3s var(--ease); }
.nav__item.has-drop:hover .nav__caret svg { transform: rotate(90deg) translateX(2px); }
.nav__drop {
    position: absolute; top: 100%; left: -14px; min-width: 234px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow); padding: 8px; margin-top: 10px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 60;
}
.nav__drop::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav__item.has-drop:hover .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__drop a { display: block; padding: 11px 14px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s; }
.nav__drop a:hover { background: var(--purple-50); color: var(--purple); }

.mobile-menu__sub { display: flex; flex-direction: column; margin: 2px 0 8px 16px; padding-left: 12px; border-left: 2px solid var(--purple-100); }
.mobile-menu__sublink { padding: 10px 12px; font-size: 15px; font-weight: 600; color: var(--ink-2); border-radius: 10px; transition: background .2s, color .2s; }
.mobile-menu__sublink:hover { background: var(--purple-50); color: var(--purple); }

.header__actions { display: flex; align-items: center; gap: 12px; }
.header__contacts { display: none; }
.header__phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 17px; letter-spacing: .01em; white-space: nowrap; }
.header__address { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; margin-top: 2px; }
.header__socials { display: none; gap: 8px; }

.soc {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    color: var(--purple); border: 1.5px solid var(--purple-100); transition: all .3s var(--ease);
}
.soc:hover { background: var(--purple); color: #fff; border-color: var(--purple); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(125,92,255,.35); }
.soc--viber:hover { background: #7360F2; border-color: #7360F2; box-shadow: 0 10px 24px rgba(115,96,242,.35); }
.soc--tg:hover { background: #29A9EB; border-color: #29A9EB; box-shadow: 0 10px 24px rgba(41,169,235,.35); }
.soc--ig:hover { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color: #DD2A7B; }

/* Соцсети «одной кнопкой» с выбором (шапка) */
.socfab { position: relative; }
.socfab__toggle { cursor: pointer; background: transparent; padding: 0; position: relative; overflow: visible; }
/* значок-стрелка: подсказка «это выпадающее меню» */
.socfab__chev { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--purple); color: #fff; display: grid; place-items: center;
    box-shadow: 0 2px 7px rgba(20,17,31,.30); transition: transform .3s var(--ease); }
.socfab__chev svg { width: 9px; height: 6px; display: block; }
.socfab.is-open .socfab__chev { transform: rotate(180deg); }
/* лёгкая пульсация, чтобы кнопку заметили */
.socfab__toggle::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--purple); opacity: 0; animation: socfabPulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes socfabPulse { 0% { transform: scale(1); opacity: .5; } 70%,100% { transform: scale(1.35); opacity: 0; } }
.socfab:hover .socfab__toggle::after, .socfab.is-open .socfab__toggle::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .socfab__toggle::after { animation: none; } }
.socfab__menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
    display: flex; flex-direction: column; gap: 8px; padding: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 20px 46px -14px rgba(20,17,31,.32);
    opacity: 0; transform: translateY(-8px) scale(.95); transform-origin: top right;
    pointer-events: none; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.socfab.is-open .socfab__menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; }
/* раскрытие по наведению (десктоп) — на тач-устройствах работает клик из JS */
@media (hover: hover) {
    .socfab:hover .socfab__menu, .socfab:focus-within .socfab__menu {
        opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; }
    .socfab:hover .socfab__chev, .socfab:focus-within .socfab__chev { transform: rotate(180deg); }
    /* невидимый «мостик», чтобы меню не закрывалось при переходе курсора к нему */
    .socfab::after { content: ""; position: absolute; top: 100%; right: 0; width: 60px; height: 12px; }
}
/* иконки внутри белого поповера всегда фирменного цвета (перебиваем прозрачную шапку) */
.header .socfab__menu .soc { color: var(--purple) !important; border-color: var(--purple-100) !important; background: #fff !important; }
.header .socfab__menu .soc--viber:hover { color: #fff !important; background: #7360F2 !important; border-color: #7360F2 !important; }
.header .socfab__menu .soc--tg:hover { color: #fff !important; background: #29A9EB !important; border-color: #29A9EB !important; }
.header .socfab__menu .soc--ig:hover { color: #fff !important; background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF) !important; border-color: #DD2A7B !important; }

/* Кнопка-телефон с выбором города */
.phonefab { position: relative; }
.phonefab__toggle { position: relative; overflow: visible; cursor: pointer; }
.phonefab__chev { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
    background: #fff; color: var(--purple-dark); display: grid; place-items: center;
    box-shadow: 0 2px 7px rgba(20,17,31,.28); transition: transform .3s var(--ease); }
.phonefab__chev svg { width: 9px; height: 6px; display: block; }
.phonefab.is-open .phonefab__chev { transform: rotate(180deg); }
.phonefab__menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 900; width: 254px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px;
    box-shadow: 0 22px 52px -16px rgba(20,17,31,.34);
    opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
    pointer-events: none; visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.phonefab.is-open .phonefab__menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.phonefab__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 11px; transition: background .15s var(--ease); }
.phonefab__item:hover { background: var(--purple-50); }
.phonefab__item:first-child { background: var(--purple-50); }
.phonefab__city { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: none; }
.phonefab__city .icon { width: 13px; height: 13px; color: var(--purple); }
.phonefab__phone { font-size: 16px; font-weight: 800; color: var(--ink); font-family: var(--display); }
@media (hover: hover) {
    .phonefab:hover .phonefab__menu, .phonefab:focus-within .phonefab__menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
    .phonefab:hover .phonefab__chev, .phonefab:focus-within .phonefab__chev { transform: rotate(180deg); }
    .phonefab::after { content: ""; position: absolute; top: 100%; right: 0; width: 80px; height: 12px; }
}

.btn--call span { display: none; }

/* Переключатель города */
.city-switch { position: relative; display: none; }
.city-switch__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 100px; border: 1.5px solid var(--purple-100); background: #fff; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s; white-space: nowrap; }
.city-switch__btn:hover { border-color: var(--purple); }
.city-switch__btn > .icon:first-child { color: var(--purple); }
.city-switch__btn svg:last-child { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .3s var(--ease); }
.city-switch.is-open .city-switch__btn svg:last-child { transform: rotate(-90deg); }
.city-switch__drop { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 70; }
.city-switch.is-open .city-switch__drop { opacity: 1; visibility: visible; transform: none; }
.city-switch__opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; background: none; white-space: nowrap; transition: background .2s, color .2s; }
.city-switch__opt .icon { color: var(--purple); }
.city-switch__opt:hover { background: var(--purple-50); color: var(--purple); }
.city-switch__opt.is-active { background: var(--purple-50); color: var(--purple); }
.city-switch--inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.city-switch--inline .city-switch__label { font-size: 13px; font-weight: 700; color: var(--muted); }
.city-switch--inline .city-switch__drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.city-switch--inline .city-switch__opt { width: auto; border: 1.5px solid var(--line); padding: 8px 14px; border-radius: 100px; }
.mobile-menu__addr { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mobile-menu__addr .icon { color: var(--purple); }

/* Бургер */
.burger { width: 46px; height: 46px; display: grid; place-items: center; gap: 5px; border-radius: 12px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.header.is-transparent:not(.is-scrolled) .burger span { background: #fff; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Мобильное меню */
.mobile-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); z-index: 899;
    background: #fff; box-shadow: -20px 0 60px rgba(20,17,31,.18);
    transform: translateX(100%); transition: transform .45s var(--ease);
    display: flex; flex-direction: column; padding: 92px 24px 28px; overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__link { padding: 14px 12px; font-size: 18px; font-weight: 700; border-radius: 12px; transition: background .2s, color .2s; }
.mobile-menu__link:hover, .mobile-menu__link.is-active { background: var(--purple-50); color: var(--purple); }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; padding-top: 24px; }
.mobile-menu__socials { display: flex; gap: 10px; justify-content: center; }
.menu-backdrop { position: fixed; inset: 0; background: rgba(15,11,24,.5); z-index: 898; opacity: 0; visibility: hidden; transition: opacity .4s; }
.menu-backdrop.is-open { opacity: 1; visibility: visible; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-start; overflow: hidden; color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene svg, .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Исходник пасмурный, средняя яркость 106/255 — поднимаем картинку фильтром,
   а не ослаблением скрима, чтобы кадр остался читаемым по деталям. */
.hero__video { z-index: 1; filter: brightness(1.16) contrast(1.04) saturate(0.96); }
/* Мобильное фото героя вместо видео */
.hero__mobile-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }
@media (max-width: 680px) {
    .hero__video, .hero__player { display: none !important; }
    .hero__mobile-img { display: block; filter: brightness(0.86); }
    /* затемняем низ героя + тень тексту — белый заголовок читается над фото */
    .hero__overlay { background: linear-gradient(to top, rgba(8,6,16,.92) 12%, rgba(8,6,16,.6) 55%, rgba(8,6,16,.32) 92%) !important; }
    .hero__lead, .hero__lead-l { text-shadow: 0 2px 20px rgba(8,6,16,.92), 0 1px 4px rgba(8,6,16,.8); }
    .hero__badge { text-shadow: none; }
    /* мобильные сдвиги из админки: блок заголовка+кнопки по вертикали и отступ кнопки */
    .hero__inner { transform: translateY(var(--hero-shift-m, 0px)) !important; }
    .hero__cta { margin-top: var(--mcta-gap, 0px); }
}
/* Прозрачный интерактивный слой поверх видео (зоны ворот + стрелки при наведении) */
.hero__scene--over { z-index: 2; }
.hero__scene--over, .hero__scene--over svg { pointer-events: none; }
.hero__scene--over .hs-hit { pointer-events: all; }
.hero__overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(105deg, rgba(14,11,24,.72) 0%, rgba(18,15,34,.4) 44%, rgba(20,16,40,.04) 100%),
        radial-gradient(120% 120% at 84% 16%, rgba(125,92,255,.12) 0%, transparent 60%);
}
.hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1400px; padding-top: 120px; padding-bottom: 60px; pointer-events: none; }
.hero__inner a, .hero__inner button { pointer-events: auto; }
.hero__content { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; }
.hero__badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    letter-spacing: .04em; padding: 10px 17px; border-radius: 14px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    background: rgba(12,9,22,.74); border: 1px solid rgba(125,92,255,.55); color: #fff; margin-bottom: 22px; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.hero__badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-light); box-shadow: 0 0 12px var(--purple-light); }
/* Заголовок первого экрана — Montserrat (остальные крупные блоки сайта
   по-прежнему на var(--display), то есть на Unbounded). */
.hero__title {
    font-family: 'Montserrat', var(--font); font-weight: 300; text-transform: uppercase;
    letter-spacing: -.03em; color: #FFFFFF; margin-bottom: 18px;
}
/* Построчная разбивка заголовка (по референсу):
   1 ОТКАТНЫЕ — жирный чистый белый; 2 РАСПАШНЫЕ — жирный, чуть тусклее;
   3 СЕКЦИОННЫЕ ВОРОТА — тонкий. Заменяет прежний фиолетовый .hero__title span. */
.hero__title-line { display: block; }
.hero__title-line--1 { font-weight: 700; color: #FFFFFF; }
.hero__title-line--2 { font-weight: 700; color: rgba(255,255,255,.82); }
.hero__title-line--3 { font-weight: 400; color: #FFFFFF; }
.hero__text { font-size: clamp(15px, 2.4vw, 20px); color: rgba(255,255,255,.82); max-width: 520px; margin-bottom: 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Интерактивные кнопки поверх видео */
.hero__hotspots { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hotspot {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 100px;
    background: rgba(125,92,255,.16); border: 1.5px solid rgba(125,92,255,.55); color: #fff;
    font-weight: 700; font-size: 14px; backdrop-filter: blur(8px);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.hotspot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--purple-light); box-shadow: 0 0 10px var(--purple-light); transition: box-shadow .35s; }
.hotspot:hover { transform: scale(1.09) translateY(-2px); background: rgba(125,92,255,.32); box-shadow: var(--glow); }
.hotspot:hover::before { box-shadow: 0 0 18px 3px var(--purple-light); }

.hero__scroll {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.hero__scroll span { width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.4); border-radius: 14px; position: relative; }
.hero__scroll span::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: #fff; border-radius: 4px; transform: translateX(-50%); animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0% { opacity: 0; top: 8px; } 40% { opacity: 1; } 80% { opacity: 0; top: 22px; } }

/* =========================================================
   Reveal-анимации (fallback без GSAP)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-gsap .reveal { transition-delay: 0s !important; }

/* =========================================================
   БЛОК ПРОДУКЦИИ / карточки
   ========================================================= */
.cards-3 { display: grid; grid-template-columns: 1fr; gap: 22px; }
.pcard {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #fff;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    display: flex; flex-direction: column; min-height: 340px;
}
.pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.pcard__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--purple-50); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.07); }
.pcard__badge { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.9); color: var(--purple); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(4px); }
.pcard__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pcard__title { font-size: 21px; margin-bottom: 8px; }
.pcard__text { color: var(--muted); font-size: 15px; flex: 1; }
.pcard__more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--purple); font-weight: 700; font-size: 15px; }
.pcard__more .icon { transition: transform .3s var(--ease); }
.pcard:hover .pcard__more .icon { transform: translateX(5px); }

/* =========================================================
   Инфо-блок ворот (features / specs / variants / gallery)
   ========================================================= */
.gate-block { padding: 72px 0; border-top: 1px solid var(--line); }
.gate-block:first-of-type { border-top: 0; }
.gate-lead { max-width: 760px; color: var(--muted); font-size: clamp(15px,2.2vw,18px); margin-top: 16px; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
.feature {
    display: flex; gap: 16px; padding: 22px; border-radius: var(--radius); background: #fff;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--purple-100); }
.feature__icon {
    width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center;
    color: #fff; background: linear-gradient(135deg, var(--purple-light), var(--purple)); box-shadow: 0 10px 24px rgba(125,92,255,.32);
}
.feature__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.feature__text { color: var(--muted); font-size: 14.5px; }

.specs { margin-top: 36px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.specs__row { display: flex; justify-content: space-between; gap: 16px; padding: 15px 22px; border-top: 1px solid var(--line); font-size: 15px; }
.specs__row:first-child { border-top: 0; }
.specs__row:nth-child(odd) { background: var(--bg-soft); }
.specs__label { color: var(--muted); }
.specs__value { font-weight: 700; text-align: right; }

.variant-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.variant { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.variant:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.variant__media { aspect-ratio: 4/3; background: var(--purple-50); }
.variant__media img { width: 100%; height: 100%; object-fit: cover; }
.variant__body { padding: 18px 20px 22px; }
.variant__title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.variant__text { color: var(--muted); font-size: 14.5px; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 36px; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
/* фото товаров — курсор «увеличить» */
.offer__media img, .variant__media img { cursor: zoom-in; }
.gallery__item { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; background: var(--purple-50); cursor: pointer; position: relative; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.08); }
.gallery__item::after { content: '＋'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 28px; background: rgba(125,92,255,.35); opacity: 0; transition: opacity .3s; }
.gallery__item:hover::after { opacity: 1; }

.benefit-cols { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 36px; }
.benefit-card { padding: 26px; border-radius: var(--radius); background: linear-gradient(160deg, var(--purple-50), #fff); border: 1px solid var(--purple-100); }
.benefit-card h4 { font-size: 19px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.benefit-card ul li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink-2); font-size: 15px; }
.benefit-card ul li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--purple); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19 20 8l-1.5-1.5z'/%3E%3C/svg%3E") center/14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19 20 8l-1.5-1.5z'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* =========================================================
   ПОЧЕМУ ВЫБИРАЮТ НАС
   ========================================================= */
/* Универсальные фоны секций: фото/видео + прозрачность (управляются из админки) */
.sec-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; }
.sec-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.section, .page-hero, .gate-block, .section--soft { position: relative; isolation: isolate; overflow: hidden; }
.section > .container, .section--soft > .container, .page-hero > .container, .gate-block > .container { position: relative; z-index: 1; }
.page-hero::after { z-index: 0; }

.why-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.why-card {
    position: relative; display: block; min-height: 320px; border-radius: 20px; overflow: hidden;
    color: #fff; box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.why-card__media { position: absolute; inset: 0; z-index: 0; background: linear-gradient(150deg, #2a2350, #14111f); transition: transform .8s var(--ease); }
.why-card:nth-child(3n+2) .why-card__media { background: linear-gradient(150deg, #31264f, #171326); }
.why-card:nth-child(3n) .why-card__media   { background: linear-gradient(150deg, #241f43, #100d1c); }
.why-card__media img { width: 100%; height: 100%; object-fit: cover; }
a.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
a.why-card:hover .why-card__media { transform: scale(1.07); }
.why-card__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,10,22,.62) 0%, rgba(12,10,22,.12) 32%, rgba(12,10,22,.22) 56%, rgba(12,10,22,.85) 100%); }
.why-card__ph { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: rgba(255,255,255,.13); }
.why-card__ph svg { width: 128px; height: 128px; }
.why-card__chev { position: absolute; top: 20px; right: 22px; z-index: 3; color: #fff; opacity: .92; transition: transform .3s var(--ease); }
.why-card__chev svg { width: 30px; height: 30px; }
a.why-card:hover .why-card__chev { transform: translateX(5px); }
.why-card__content { position: relative; z-index: 2; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 28px; }
.why-card__title { font-size: clamp(20px, 2.3vw, 25px); font-weight: 800; line-height: 1.14; max-width: 84%; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.why-card__text { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.92); max-width: 96%; margin-top: 16px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }

/* =========================================================
   ПРОЕКТЫ
   ========================================================= */
.proj-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.proj-card { border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.proj-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.proj-card__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--purple-50); cursor: pointer; }
.proj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.proj-card:hover .proj-card__media img { transform: scale(1.08); }
.proj-card__tag { position: absolute; top: 14px; left: 14px; background: var(--purple); color: #fff; font-weight: 700; font-size: 12px; padding: 6px 13px; border-radius: 100px; box-shadow: 0 8px 20px rgba(125,92,255,.35); }
.proj-card__body { padding: 20px 22px 24px; }
.proj-card__city { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.proj-card__title { font-size: 19px; margin-bottom: 6px; }
.proj-card__desc { color: var(--muted); font-size: 14.5px; }
.center { text-align: center; margin-top: 40px; }

/* Фильтр портфолио */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.filter-btn { padding: 11px 20px; border-radius: 100px; font-weight: 700; font-size: 14px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--line); transition: all .3s var(--ease); }
.filter-btn:hover { border-color: var(--purple); color: var(--purple); }
.filter-btn.is-active { background: var(--purple); color: #fff; border-color: var(--purple); box-shadow: 0 10px 24px rgba(125,92,255,.32); }
.proj-card.is-hidden { display: none; }

/* =========================================================
   TIMELINE «Как мы работаем»
   ========================================================= */
.timeline { position: relative; margin-top: 44px; }
.timeline::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--purple), var(--purple-100)); }
.tl-step { position: relative; padding-left: 74px; margin-bottom: 30px; }
.tl-step__num {
    position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--display); font-weight: 700; font-size: 20px; color: #fff;
    background: linear-gradient(135deg, var(--purple-light), var(--purple)); box-shadow: 0 12px 26px rgba(125,92,255,.4); z-index: 1;
}
.tl-step__card { padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tl-step:hover .tl-step__card { transform: translateX(6px); box-shadow: var(--shadow); }
.tl-step__title { font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.tl-step__text { color: var(--muted); font-size: 15px; }

/* =========================================================
   КАЛЬКУЛЯТОР
   ========================================================= */
.calc { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
.calc__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.calc__group { margin-bottom: 22px; }
.calc__label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--bg-soft); padding: 6px; border-radius: 14px; border: 1px solid var(--line); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink-2); transition: all .25s var(--ease); }
.seg input:checked + span { background: var(--purple); color: #fff; box-shadow: 0 8px 18px rgba(125,92,255,.32); }
/* Переключатель типа ворот — 3 варианта в один ряд («Каркас без зашивки» первым) */
.seg--3 { grid-template-columns: repeat(3, 1fr); }
.seg--3 span { padding: 12px 6px; font-size: 13px; line-height: 1.2; }
@media (max-width: 560px) { .seg--3 { grid-template-columns: 1fr; } }
.calc__hint { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.calc__select { width: 100%; padding: 13px 40px 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-soft); font: 700 14px/1.2 var(--font); color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237D5CFF' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; transition: border-color .2s var(--ease); }
.calc__select:focus { outline: none; border-color: var(--purple); }
[data-calc-only="gate"] { transition: opacity .2s var(--ease); }
.calc__range-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calc__range-val { font-weight: 800; color: var(--purple); font-family: var(--display); }
input[type=range] { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 6px; background: var(--purple-100); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--purple); cursor: pointer; box-shadow: 0 6px 16px rgba(125,92,255,.5); border: 4px solid #fff; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--purple); cursor: pointer; border: 4px solid #fff; }

.calc__result { background: linear-gradient(160deg, #201a38, #0e0b18); color: #fff; border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.calc__result-label { color: rgba(255,255,255,.6); font-size: 14px; letter-spacing: .04em; }
.calc__price { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 8vw, 52px); line-height: 1.1; margin: 8px 0 4px; }
.calc__price span { color: var(--purple-light); font-size: .5em; }
.calc__from { color: rgba(255,255,255,.55); font-size: 13px; }
.calc__breakdown { margin: 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
.calc__breakdown li { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14.5px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.calc__note { color: rgba(255,255,255,.5); font-size: 12.5px; margin: 14px 0 20px; }
.calc__result .btn { margin-top: auto; }

/* =========================================================
   Универсальный лид-CTA баннер
   ========================================================= */
.cta-band { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; border-radius: var(--radius-lg); padding: clamp(30px,5vw,54px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before, .cta-band::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.cta-band::before { width: 260px; height: 260px; top: -100px; right: -60px; }
.cta-band::after { width: 200px; height: 200px; bottom: -110px; left: -40px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(24px,4vw,38px); margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 26px; }
.cta-band .btn--outline { background: #fff; border-color: #fff; }

/* =========================================================
   ФУТЕР
   ========================================================= */
.footer { background: #0f0b18; color: rgba(255,255,255,.7); padding-top: 64px; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 44px; }
.logo--footer .logo__text strong { color: #fff; }
.logo--footer .logo__text em { color: #C9B8FF; }
.footer__about { margin: 18px 0 20px; font-size: 14.5px; max-width: 340px; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials .soc { color: #fff; border-color: rgba(255,255,255,.18); }
.footer__title { color: #fff; font-size: 16px; margin-bottom: 18px; }
.footer__list li, .footer__contacts li { margin-bottom: 12px; font-size: 14.5px; }
.footer__list a:hover { color: var(--purple-light); }
.footer__contacts li { display: flex; align-items: center; gap: 10px; }
.footer__contacts .icon { color: var(--purple-light); }
.footer__map-wrap { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; border: 1px solid rgba(255,255,255,.1); }
.footer__map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) invert(.9) hue-rotate(180deg); }
.footer__map-stub { display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.4); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.footer__bottom-inner { display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 13px; color: rgba(255,255,255,.5); }
.footer__heart { color: var(--purple-light); }

/* =========================================================
   Плавающие кнопки
   ========================================================= */
.floaters { position: fixed; right: 18px; bottom: 18px; z-index: 800; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
/* на мобильном контактные кнопки убираем (телефон есть в шапке), оставляем маленькую «наверх» */
@media (max-width: 680px) {
    .floater--viber, .floater--tg, .floater--call { display: none !important; }
    .floaters { right: 14px; bottom: 14px; gap: 8px; }
    .floaters .floater--top { width: 42px; height: 42px; }
    .floaters .floater--top .icon { width: 16px; height: 16px; }
}
.floater { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .3s var(--ease); pointer-events: auto; }
.floater:hover { transform: scale(1.12) translateY(-2px); }
.floater--viber { background: #7360F2; }
.floater--tg { background: #29A9EB; }
.floater--call { background: var(--purple); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(125,92,255,.5); } 70% { box-shadow: 0 0 0 16px rgba(125,92,255,0); } 100% { box-shadow: 0 0 0 0 rgba(125,92,255,0); } }

/* =========================================================
   МОДАЛЬНОЕ ОКНО
   ========================================================= */
.modal, .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal.is-open, .lightbox.is-open { display: flex; }
.modal { align-items: center; justify-content: center; padding: 20px; }
.modal__overlay { position: absolute; inset: 0; background: rgba(15,11,24,.6); backdrop-filter: blur(4px); }
.modal__card { position: relative; z-index: 1; }
.modal__box { position: relative; z-index: 1; background: #fff; border-radius: var(--radius-lg); padding: 34px 28px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); animation: modalIn .4s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
.modal__close { position: absolute; top: 14px; right: 16px; font-size: 30px; line-height: 1; color: var(--muted); }
.modal__close:hover { color: var(--ink); }
.modal__title { font-size: 24px; margin-bottom: 6px; }
.modal__sub { color: var(--muted); font-size: 15px; margin-bottom: 22px; }

/* Формы */
.field { margin-bottom: 14px; }
.field input, .field textarea, .calc select {
    width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #D7D4E4; background: #fff;
    font-family: inherit; font-size: 15px; color: var(--ink); transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder { color: #9A95AD; opacity: 1; }
.field input:hover, .field textarea:hover { border-color: #BCB6D0; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(125,92,255,.12); background: #fff; }
.field textarea { resize: vertical; }
.lead-form__status { font-size: 14px; margin-top: 12px; min-height: 20px; font-weight: 600; }
.lead-form__status.is-ok { color: #1F9D55; }
.lead-form__status.is-err { color: #E23; }
.lead-form__policy { font-size: 11.5px; color: var(--muted); margin-top: 10px; text-align: center; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox { align-items: center; justify-content: center; background: rgba(10,8,16,.94); }
.lightbox__img { max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: modalIn .4s var(--ease); }
.lightbox__close { position: absolute; top: 20px; right: 24px; font-size: 40px; color: #fff; z-index: 2; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; display: grid; place-items: center; transition: background .3s; }
.lightbox__nav:hover { background: var(--purple); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

/* =========================================================
   Простая внутренняя «шапка страницы»
   ========================================================= */
.page-hero { position: relative; padding: 150px 0 60px; background: linear-gradient(160deg, #201a38, #0e0b18); color: #fff; overflow: hidden; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 120% at 85% 0%, rgba(125,92,255,.4), transparent 60%); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero .eyebrow { background: rgba(125,92,255,.2); color: #fff; }
.page-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px,6vw,52px); text-transform: uppercase; }
.page-hero p { color: rgba(255,255,255,.8); max-width: 620px; margin-top: 16px; font-size: clamp(15px,2.4vw,18px); }
/* Видео-фон первого экрана (откатные) */
.page-hero--video { display: flex; align-items: center; min-height: clamp(470px, 66vh, 640px); }
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero--video .page-hero__vscrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(92deg, rgba(11,10,22,.82) 0%, rgba(11,10,22,.55) 42%, rgba(11,10,22,.2) 100%), linear-gradient(0deg, rgba(11,10,22,.5) 0%, transparent 40%); }
.page-hero--video .page-hero__inner { position: relative; z-index: 2; }
.breadcrumbs { display: flex; gap: 8px; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.breadcrumbs a:hover { color: #fff; }

/* Список направлений (авто/шлагбаумы/комплектующие) */
.info-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.info-card { padding: 28px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.info-card__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--purple-light), var(--purple)); margin-bottom: 18px; box-shadow: 0 10px 24px rgba(125,92,255,.3); }
.info-card h3 { font-size: 18px; margin-bottom: 8px; }
.info-card p { color: var(--muted); font-size: 15px; }

/* Контакты страница */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 8px; }
.contact-info li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-info .icon { color: var(--purple); }
.contact-info b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.contact-info a, .contact-info span { font-size: 16px; font-weight: 700; }
.contact-map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }

/* Акции */
.promo-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.promo-card { position: relative; overflow: hidden; padding: 30px 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.promo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.promo-card::after { content: ''; position: absolute; top: -46px; right: -46px; width: 130px; height: 130px; border-radius: 50%; background: var(--purple-50); }
.promo-card > * { position: relative; z-index: 1; }
.promo-card__badge { align-self: flex-start; background: linear-gradient(135deg, var(--purple-light), var(--purple)); color: #fff; font-weight: 800; font-size: 18px; padding: 8px 16px; border-radius: 100px; box-shadow: 0 8px 20px rgba(125,92,255,.35); margin-bottom: 18px; }
.promo-card__title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.promo-card__text { color: var(--muted); font-size: 15px; flex: 1; }
.promo-card__note { margin-top: 16px; font-size: 13px; color: var(--purple); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.promo-card .btn { margin-top: 18px; }

/* Цифры-достижения */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat { text-align: center; padding: 18px 10px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.stat__num { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); color: var(--purple); line-height: 1; }
.stat__label { color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.35; }

/* Отзывы */
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.review { padding: 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.review:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.review__stars { color: #FFB300; font-size: 18px; letter-spacing: 3px; margin-bottom: 12px; }
.review__text { color: var(--ink-2); font-size: 15.5px; flex: 1; line-height: 1.65; }
.review__author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.review__avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--purple-light), var(--purple)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; flex: none; }
.review__name { font-weight: 700; }
.review__city { color: var(--muted); font-size: 13px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; padding: 20px 24px; font-weight: 700; font-size: 16.5px; color: var(--ink); background: none; }
.faq__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--purple-50); color: var(--purple); display: grid; place-items: center; font-size: 20px; line-height: 1; transition: transform .3s var(--ease), background .3s, color .3s; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--purple); color: #fff; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a-inner { padding: 0 24px 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* Квиз */
.quiz { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.quiz__bar { height: 6px; background: var(--purple-50); }
.quiz__bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple-light), var(--purple)); transition: width .4s var(--ease); }
.quiz__body { padding: clamp(22px, 4vw, 36px) clamp(20px, 4vw, 30px); }
.quiz__step { display: none; }
.quiz__step.is-active { display: block; animation: fadeInUp .4s var(--ease); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.quiz__count { color: var(--purple); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.quiz__q { font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin: 8px 0 22px; }
.quiz__opts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.quiz__opt { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; font-weight: 600; font-size: 15px; transition: border-color .25s var(--ease), background .25s; background: #fff; }
.quiz__opt:hover { border-color: var(--purple); }
.quiz__opt.is-sel { border-color: var(--purple); background: var(--purple-50); }
.quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.quiz__result { text-align: center; }
.quiz__price { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 7vw, 50px); color: var(--purple); margin: 6px 0; }
.quiz__price span { font-size: .5em; }
.quiz__disc { display: inline-block; background: var(--purple-50); color: var(--purple-dark); font-weight: 700; padding: 6px 14px; border-radius: 100px; font-size: 14px; margin: 8px 0 18px; }
.quiz .field { text-align: left; }

/* Согласие на обработку данных */
.consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 8px; text-align: left; line-height: 1.5; }
.consent input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--purple); }
.consent a { color: var(--purple); text-decoration: underline; }

/* Офисы по городам */
.offices-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.office { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.office:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.office__city { font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.office__city .badge { background: var(--purple-50); color: var(--purple-dark); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.office__row { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); font-size: 14.5px; margin-top: 12px; }
.office__row .icon { color: var(--purple); flex: none; }
.office__row a { font-weight: 600; }

/* Юридическая страница */
.legal { max-width: 840px; margin: 0 auto; }
.legal p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.8; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (min-width: 600px) {
    .cards-3, .variant-grid, .why-grid, .proj-grid, .info-grid, .feature-grid, .promo-grid, .reviews-grid, .offices-grid { grid-template-columns: repeat(2, 1fr); }
    .quiz__opts { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .btn--call span { display: inline; }
    .hero__scroll { display: flex; }
}

@media (min-width: 900px) {
    .section { padding: 84px 0; }
    .nav { display: flex; gap: 18px; }
    .nav__link { font-size: 14.5px; }
    .burger { display: none; }
    .header__actions > .city-switch { display: inline-flex; }
    .stats-grid { grid-template-columns: repeat(6, 1fr); }
    .calc { grid-template-columns: 1.1fr .9fr; }
    .benefit-cols { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; }
    .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
    .cards-3, .proj-grid, .info-grid, .why-grid, .promo-grid, .offices-grid, .reviews-grid { grid-template-columns: repeat(3, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .variant-grid { grid-template-columns: repeat(3, 1fr); }
    .footer__bottom-inner { flex-direction: row; justify-content: space-between; }
}

/* Телефон + адрес в шапке — когда есть место; кнопка-дубль «Позвонить» скрывается */
@media (min-width: 1080px) {
    .header__contacts { display: flex; flex-direction: column; align-items: flex-end; }
    .btn--call { display: none; }
}
@media (min-width: 1260px) {
    .header__socials { display: flex; }
}

@media (min-width: 1200px) {
    .why-grid { grid-template-columns: repeat(3, 1fr); }
    .feature-grid.feature-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   ДИЗАЙН 2.0 — «Ламели»
   Фирменный мотив — горизонтальные ламели ворот и рельса
   с роликом. Фоны, тёмная шоурум-полоса, движение «створок».
   ========================================================= */

/* --- Рельса прокрутки с роликом-кареткой (как каретка откатных ворот) --- */
.scroll-rail { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1300; background: rgba(125,92,255,.10); pointer-events: none; }
.scroll-rail__bar { position: relative; height: 100%; width: 0%; background: linear-gradient(90deg, var(--purple-light), var(--purple)); border-radius: 0 99px 99px 0; }
.scroll-rail__roller { position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); box-shadow: 0 2px 12px rgba(125,92,255,.5); transform: rotate(var(--rot, 0deg)); }
.scroll-rail__roller::before { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--purple); opacity: .85; }

/* --- Мотив ламелей: тонкие горизонтальные линии профиля ворот --- */
.section--soft {
    background:
        repeating-linear-gradient(180deg, rgba(125,92,255,.045) 0 1px, transparent 1px 14px),
        radial-gradient(55% 75% at 10% 12%, rgba(125,92,255,.10), transparent 60%),
        radial-gradient(52% 70% at 92% 90%, rgba(156,123,255,.11), transparent 62%),
        linear-gradient(180deg, #FBFAFF 0%, #F4F0FF 100%);
}
/* дышащее свечение в мягких секциях */
.section--soft::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
    top: -12%; right: -10%; border-radius: 50%;
    background: radial-gradient(circle, rgba(125,92,255,.14), transparent 65%);
    animation: lam-drift 22s ease-in-out infinite alternate;
}
@keyframes lam-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-14%, 14%) scale(1.18); }
}

/* --- Тёмная «шоурум»-полоса: цифры на фоне ночного шоурума --- */
#stats {
    background:
        repeating-linear-gradient(180deg, rgba(125,92,255,.06) 0 1px, transparent 1px 16px),
        radial-gradient(70% 120% at 85% 0%, rgba(125,92,255,.28), transparent 60%),
        radial-gradient(50% 90% at 8% 100%, rgba(91,63,214,.22), transparent 60%),
        #14111F;
    padding: 72px 0;
}
#stats .section-title { color: #fff; }
#stats .stat {
    background: rgba(255,255,255,.045);
    border-color: rgba(125,92,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
    transition: transform .45s var(--ease), border-color .45s var(--ease);
}
#stats .stat:hover { transform: translateY(-6px); border-color: rgba(156,123,255,.6); }
#stats .stat__num { color: var(--purple-light); text-shadow: 0 0 28px rgba(125,92,255,.55); }
#stats .stat__label { color: rgba(255,255,255,.62); }
/* кромки-ламели сверху и снизу тёмной полосы */
#stats::before, #stats::after {
    content: ''; position: absolute; left: 0; right: 0; height: 10px; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(125,92,255,.55) 0 26px, transparent 26px 42px);
    opacity: .35;
}
#stats::before { top: 0; }
#stats::after { bottom: 0; }

/* --- Появление «створок»: карточки съезжаются, как полотна ворот --- */
.cards-3 > .reveal:nth-child(odd),
.proj-grid > .reveal:nth-child(odd),
.reviews-grid > .reveal:nth-child(odd),
.variant-grid > .reveal:nth-child(odd),
.offices-grid > .reveal:nth-child(odd) { transform: translateX(-46px); }
.cards-3 > .reveal:nth-child(even),
.proj-grid > .reveal:nth-child(even),
.reviews-grid > .reveal:nth-child(even),
.variant-grid > .reveal:nth-child(even),
.offices-grid > .reveal:nth-child(even) { transform: translateX(46px); }
.cards-3 > .reveal.is-in,
.proj-grid > .reveal.is-in,
.reviews-grid > .reveal.is-in,
.variant-grid > .reveal.is-in,
.offices-grid > .reveal.is-in { transform: none; }

/* фото в карточках «открываются» как полотно — слева направо */
.pcard.reveal .pcard__media img { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) .2s, transform .7s var(--ease); }
.pcard.reveal.is-in .pcard__media img { clip-path: inset(0 0 0 0); }

/* --- Заголовки секций: рельса-подчёрк, выезжающая при появлении --- */
.section-head .section-title { position: relative; padding-bottom: 18px; }
.section-head .section-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 4px; border-radius: 99px;
    background: linear-gradient(90deg, var(--purple-light), var(--purple));
    transition: width .9s var(--ease) .3s;
}
.section-head.is-in .section-title::after { width: 72px; }
.section-head--left .section-title::after { left: 0; transform: none; }

/* --- Кнопка: блик, пробегающий как свет по ламелям --- */
.btn { position: relative; overflow: hidden; }
.btn--primary::after {
    content: ''; position: absolute; top: -4px; bottom: -4px; left: -45%; width: 34%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-18deg); transition: left .65s ease; pointer-events: none;
}
.btn--primary:hover::after { left: 115%; }

/* --- CTA-полоса: те же ламели поверх фиолетового градиента --- */
.cta-band {
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px),
        linear-gradient(135deg, var(--purple), var(--purple-dark));
}

/* --- Футер: лёгкая рельса-кромка сверху --- */
.footer { position: relative; }
.footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--purple) 30%, var(--purple-light) 70%, transparent);
    opacity: .5;
}

@media (max-width: 640px) {
    .section--soft::after { display: none; }
}

/* =========================================================
   ФОНЫ 2.1 — красивые задники везде
   Белые секции: фрагмент профиля ворот в углу + мягкий свет.
   Тёмные зоны (page-hero, футер): ламели + живое свечение.
   Блоки ворот: чередование белый/тонированный.
   ========================================================= */

/* --- Белые секции: угловой фрагмент «профиля ворот» + свет --- */
.section:not(.section--soft):not(#stats):not(.smart):not(.drvcfg):not(.padv--dark):not(.section--dark)::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: 26px; right: 0; width: min(420px, 42vw); height: 190px;
    background: repeating-linear-gradient(180deg, rgba(125,92,255,.16) 0 3px, transparent 3px 18px);
    -webkit-mask-image: linear-gradient(255deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(255deg, #000 0%, transparent 72%);
    opacity: .8;
}
.section:not(.section--soft):not(#stats):not(.smart):not(.drvcfg):not(.padv--dark):not(.section--dark) {
    background:
        radial-gradient(46% 60% at 100% 0%, rgba(125,92,255,.07), transparent 62%),
        radial-gradient(40% 52% at 0% 100%, rgba(156,123,255,.06), transparent 60%),
        #fff;
}
.section > .container { position: relative; z-index: 1; }

/* --- Герои внутренних страниц: ламели + два живых свечения + кромка --- */
.page-hero {
    background:
        repeating-linear-gradient(180deg, rgba(125,92,255,.05) 0 1px, transparent 1px 16px),
        linear-gradient(160deg, #201a38, #0e0b18);
}
.page-hero::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    width: 55vw; height: 55vw; max-width: 760px; max-height: 760px;
    top: -30%; right: -12%; border-radius: 50%;
    background: radial-gradient(circle, rgba(125,92,255,.34), transparent 62%);
    animation: lam-drift 26s ease-in-out infinite alternate;
}
.page-hero::after {
    background:
        radial-gradient(40% 70% at 8% 110%, rgba(91,63,214,.30), transparent 60%),
        radial-gradient(80% 120% at 85% 0%, rgba(125,92,255,.35), transparent 60%);
}
/* нижняя кромка-ламели — переход в светлый контент */
.page-hero .page-hero__inner::after {
    content: ''; position: absolute; left: -50vw; right: -50vw; bottom: -60px; height: 8px;
    background: repeating-linear-gradient(90deg, rgba(125,92,255,.5) 0 26px, transparent 26px 42px);
    opacity: .3; pointer-events: none;
}

/* --- Футер: ламели + тёплое свечение снизу --- */
.footer {
    background:
        repeating-linear-gradient(180deg, rgba(125,92,255,.045) 0 1px, transparent 1px 18px),
        radial-gradient(60% 90% at 85% 110%, rgba(125,92,255,.16), transparent 60%),
        radial-gradient(45% 70% at 5% 0%, rgba(91,63,214,.12), transparent 55%),
        #0f0b18;
}

/* --- Блоки ворот: каждый второй тонированный (класс ставит JS,
   т.к. блоки лежат в разных контейнерах) --- */
.gate-block--tint {
    background:
        repeating-linear-gradient(180deg, rgba(125,92,255,.04) 0 1px, transparent 1px 15px),
        radial-gradient(50% 70% at 92% 8%, rgba(125,92,255,.09), transparent 60%),
        linear-gradient(180deg, #FBFAFF, #F5F1FF);
    border-top: 0;
}
.gate-block { position: relative; }
.gate-block > .container { position: relative; z-index: 1; }

/* --- CTA-банд: живое свечение внутри --- */
.cta-band::before { animation: lam-drift 18s ease-in-out infinite alternate; }

/* =========================================================
   ПРОДАЮЩИЕ БЛОКИ: офферы с ценами, таблица каркасов,
   комплекты SGN, полоса характеристик
   ========================================================= */
.offer-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 700px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .offer-grid { grid-template-columns: repeat(4, 1fr); } }
.offer { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 44px -26px rgba(20,17,31,.24); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.offer:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--purple-100); }
.offer__media { aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(160deg, #F6F7FB, #EDEFF5); }
.offer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.offer:hover .offer__media img { transform: scale(1.08); }
.offer__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.offer__size { font-family: var(--display); font-weight: 600; font-size: 17px; }
.offer__meta { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.offer__extra { color: var(--purple); font-size: 13px; font-weight: 700; }
.offer__price { margin-top: auto; padding-top: 14px; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); }
.offer__price small { display: block; font-family: var(--font); font-weight: 500; font-size: 12px; color: var(--muted); }
.offer .btn { margin-top: 12px; }
/* Выделенная карточка («Каркас без зашивки») */
.offer--hl { border: 2px solid var(--purple); box-shadow: 0 18px 44px rgba(125,92,255,.25); position: relative; }
.offer--hl::before { content: 'Выгодно'; position: absolute; top: 12px; right: 12px; z-index: 2; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 6px 12px; border-radius: 100px; box-shadow: 0 6px 16px rgba(125,92,255,.4); }
.offer--hl .offer__price { color: var(--purple); }

.price-rows { display: grid; gap: 12px; }
.price-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; box-shadow: var(--shadow-sm); }
.price-row__size { font-weight: 700; }
.price-row__frame { color: var(--muted); font-size: 14px; }
.price-row__price { font-family: var(--display); font-weight: 700; color: var(--purple); white-space: nowrap; }
.price-note { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 640px; }
.price-row .kit-thumb { width: 52px; height: 52px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-right: 4px; }

.spec-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 900px) { .spec-strip { grid-template-columns: repeat(4, 1fr); } }
.spec-cell { background: rgba(255,255,255,.05); border: 1px solid rgba(125,92,255,.28); border-radius: var(--radius); padding: 20px 18px; }
.spec-cell b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; color: #fff; margin-top: 6px; }
.spec-cell span { color: rgba(255,255,255,.6); font-size: 13px; }

.mini-price { display: flex; flex-wrap: wrap; gap: 12px; }
.mini-price__item { display: flex; align-items: baseline; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 10px 20px; box-shadow: var(--shadow-sm); font-size: 14.5px; }
.mini-price__item b { font-family: var(--display); font-weight: 700; color: var(--purple); white-space: nowrap; }
a.mini-price__item { color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
a.mini-price__item:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow-sm); }

/* Варианты исполнения строго по 3 в ряд (3×2) */
.variant-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .variant-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .variant-grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* Рейки: фото слева, цены справа (десктоп) */
@media (min-width: 800px) { .reiki-layout { grid-template-columns: 1fr 1.1fr !important; } }
/* Каталог/галерея строго по 3 в ряд */
.offer-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .offer-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .offer-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Красивые USP-карточки (6 квадратов) */
.usp-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .usp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .usp-grid { grid-template-columns: repeat(3, 1fr); } }
.usp-card {
    position: relative; overflow: hidden; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px 24px; box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.usp-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--purple-light), var(--purple));
    transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.usp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--purple-100); }
.usp-card:hover::before { transform: scaleX(1); }
.usp-card__icon {
    width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--purple-dark));
    box-shadow: 0 10px 22px rgba(125,92,255,.35); margin-bottom: 16px;
    transition: transform .4s var(--ease);
}
.usp-card:hover .usp-card__icon { transform: scale(1.08) rotate(-4deg); }
.usp-card h3 { font-size: 18px; margin: 0 0 8px; }
.usp-card p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* Полоса цены в блоке ворот на главной */
.gate-price {
    margin-top: 26px; display: flex; flex-wrap: wrap; gap: 18px 28px;
    align-items: center; justify-content: space-between;
    padding: 24px 28px; border-radius: var(--radius);
    background:
        repeating-linear-gradient(115deg, rgba(125,92,255,.06) 0 26px, transparent 26px 96px),
        linear-gradient(120deg, #F6F2FF, #EFE8FF);
    border: 1px solid var(--purple-100);
    box-shadow: var(--shadow-sm);
}
.gate-price__value { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 4vw, 34px); color: var(--purple); line-height: 1.1; }
.gate-price__note { color: var(--muted); font-size: 14.5px; margin-top: 6px; }

.promo-list { display: grid; gap: 12px; }
.promo-list li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 14px 18px; font-weight: 600; }
.promo-list .icon { color: #fff; margin-top: 1px; }

/* Квиз-приглашение по таймеру — маленькое, справа снизу, ненавязчивое */
.quiz-pop {
    position: fixed; right: 22px; bottom: 22px; z-index: 1050;
    width: 300px; max-width: calc(100vw - 44px);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 20px 18px; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(24px) scale(.96);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.quiz-pop.is-open { opacity: 1; transform: none; }
.quiz-pop__close { position: absolute; top: 8px; right: 12px; font-size: 26px; line-height: 1; color: var(--muted); }
.quiz-pop__close:hover { color: var(--ink); }
.quiz-pop__badge { display: inline-block; background: var(--purple-50); color: var(--purple); font-weight: 800; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; margin-bottom: 12px; }
.quiz-pop__title { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.quiz-pop__text { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.quiz-pop .btn { width: 100%; }
@media (max-width: 640px) { .quiz-pop { right: 14px; left: 14px; bottom: 14px; width: auto; } }
/* «Подбор»-виджет на мобильном не показываем (перекрывает первый экран) */
@media (max-width: 680px) { .quiz-pop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .quiz-pop { transition: opacity .2s; transform: none; } }

/* --- Кнопка «Наверх»: ролик каретки со стрелкой, появляется при скролле --- */
.floater--top {
    background: #fff; color: var(--purple);
    border: 2px solid var(--purple-100);
    box-shadow: 0 10px 26px rgba(125,92,255,.28);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, border-color .3s;
}
.floater--top .icon { transform: rotate(-90deg); }
body.show-totop .floater--top { opacity: 1; visibility: visible; transform: none; }
body.show-totop .floater--top:hover { transform: scale(1.12) translateY(-2px); border-color: var(--purple); }

/* =========================================================
   ФОНЫ 3.0 — «Свет сквозь ламели»
   Диагональные лучи света, как сквозь ламели ворот, во всех
   блоках + сочные ауроры в мягких секциях.
   ========================================================= */

/* Белые секции: угол «солнце сквозь ламели ворот» */
/* Светлые секции — архитектурная графитовая сцена (техно-сетка + шёпот фиолетового) */
.section:not(.section--soft):not(#stats):not(.smart):not(.drvcfg):not(.padv--dark):not(.section--dark)::before {
    top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; opacity: 1;
    background:
        repeating-linear-gradient(115deg, rgba(20,17,31,.022) 0 1px, transparent 1px 128px),
        repeating-linear-gradient(180deg, rgba(20,17,31,.014) 0 1px, transparent 1px 22px);
    -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 74%);
    mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 74%);
}
.section:not(.section--soft):not(#stats):not(.smart):not(.drvcfg):not(.padv--dark):not(.section--dark) {
    background:
        radial-gradient(52% 58% at 100% -4%, rgba(125,92,255,.045), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 100%);
}

/* Мягкие секции — холодная графитовая панель */
.section--soft {
    background:
        radial-gradient(50% 62% at 8% 4%, rgba(125,92,255,.05), transparent 60%),
        radial-gradient(46% 56% at 96% 96%, rgba(20,17,31,.04), transparent 62%),
        linear-gradient(180deg, #F1F3F8 0%, #E7EAF1 100%);
}
.section--soft::before {
    background-image:
        radial-gradient(rgba(20,17,31,.045) 1px, transparent 1px),
        repeating-linear-gradient(115deg, rgba(20,17,31,.02) 0 1px, transparent 1px 120px);
    background-size: 26px 26px, auto;
}

/* Тёмная полоса: лучи прожектора сквозь ламели */
#stats {
    background:
        repeating-linear-gradient(115deg, rgba(125,92,255,.08) 0 34px, transparent 34px 120px),
        repeating-linear-gradient(180deg, rgba(125,92,255,.06) 0 1px, transparent 1px 16px),
        radial-gradient(70% 120% at 85% 0%, rgba(125,92,255,.30), transparent 60%),
        radial-gradient(50% 90% at 8% 100%, rgba(91,63,214,.24), transparent 60%),
        #14111F;
}

/* CTA: белые лучи поверх градиента */
.cta-band {
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 30px, transparent 30px 110px),
        repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px),
        linear-gradient(135deg, var(--purple), var(--purple-dark));
}

/* Тонированные блоки ворот: те же лучи */
.gate-block--tint {
    background:
        repeating-linear-gradient(115deg, rgba(125,92,255,.05) 0 30px, transparent 30px 115px),
        repeating-linear-gradient(180deg, rgba(125,92,255,.04) 0 1px, transparent 1px 15px),
        radial-gradient(50% 70% at 92% 8%, rgba(125,92,255,.10), transparent 60%),
        linear-gradient(180deg, #FBFAFF, #F3EEFF);
}

@media (max-width: 640px) {
    .page-hero::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .section--soft::after, .page-hero::before, .cta-band::before { animation: none; }
    .scroll-rail { display: none; }
}

/* =========================================================
   ШАПКА · ПРЕМИУМ-РЕДИЗАЙН (только внешний вид)
   Стекло над hero → белый фон с тенью при прокрутке.
   Воздух, минимализм, фиолетовый только как акцент.
   ========================================================= */
@keyframes headerReveal { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

.header {
    padding: 0;
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    background: linear-gradient(103deg, rgba(20,15,38,.95) 0%, rgba(33,21,62,.93) 46%, rgba(46,28,84,.92) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border-bottom: 1px solid rgba(160,130,255,.20);
    box-shadow: 0 10px 34px -18px rgba(70,40,140,.55);
    animation: headerReveal .7s var(--ease) backwards;
    transition: background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* фиолетовое свечение в баре (как на макете) */
.header::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(620px 150px at 68% -10%, rgba(125,92,255,.34), transparent 70%),
        radial-gradient(420px 120px at 12% 120%, rgba(91,63,214,.28), transparent 72%);
    opacity: 1; transition: opacity .45s var(--ease);
}
.header .header__inner { position: relative; z-index: 1; }
.header.is-scrolled::after { opacity: 0; }
.header .header__inner {
    max-width: 1320px; min-height: 88px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 26px; padding-left: 36px; padding-right: 36px;
}
/* После прокрутки — белый с лёгкой тенью */
.header.is-scrolled {
    background: rgba(255,255,255,.9);
    border-bottom-color: rgba(20,17,31,.05);
    box-shadow: 0 14px 40px -22px rgba(40,26,80,.28);
    padding: 0;
}
.header.is-scrolled .header__inner { min-height: 80px; }

/* Логотип — крупнее и с воздухом */
.header .logo { gap: 16px; padding: 4px 6px 4px 0; }
.header .logo__mark, .header .logo__mark img { width: 52px; height: 52px; }
.header .logo__text strong { font-size: 21px; letter-spacing: .05em; }
.header .logo__text em { font-size: 10.5px; letter-spacing: .4em; margin-top: 5px; }

/* Меню — минимализм, воздух, тонкое подчёркивание 250ms */
.header .nav { gap: 38px; }
.header .nav__link { font-size: 15px; font-weight: 600; letter-spacing: .003em; padding: 12px 2px; transition: color .25s var(--ease); }
.header .nav__link::after { height: 2px; bottom: 4px; border-radius: 2px; background: var(--purple); transition: width .25s var(--ease); }
.header .nav__caret svg { width: 14px; height: 14px; }

/* Правая группа — отдельные элементы с воздухом */
.header .header__actions { gap: 18px; }
.header .city-switch__btn { padding: 11px 18px; border-radius: 100px; font-size: 14px; font-weight: 600; transition: border-color .25s, background .25s, color .25s; }
.header .header__contacts { align-items: flex-end; line-height: 1.15; }
.header .header__phone { font-size: 16.5px; font-weight: 800; }
.header .header__address { font-size: 11.5px; margin-top: 3px; }

/* Соцсети — круглые, hover фиолетовый (в обоих состояниях) */
.header .soc { width: 42px; height: 42px; transition: all .25s var(--ease); }
.header .soc:hover,
.header .soc--viber:hover, .header .soc--tg:hover, .header .soc--ig:hover {
    background: var(--purple); border-color: var(--purple); color: #fff;
    transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(125,92,255,.55);
}

/* --- Над hero (стекло): светлый текст, фиолетовый акцент --- */
.header:not(.is-scrolled) .nav__link { color: rgba(255,255,255,.86); }
.header:not(.is-scrolled) .nav__link:hover,
.header:not(.is-scrolled) .nav__link.is-active { color: #fff; }
.header:not(.is-scrolled) .nav__link:hover::after,
.header:not(.is-scrolled) .nav__link.is-active::after { background: var(--purple-light); }
.header:not(.is-scrolled) .city-switch__btn { color: #fff; border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.10); }
.header:not(.is-scrolled) .city-switch__btn > .icon:first-child { color: var(--purple-light, #b9a3ff); }
.header:not(.is-scrolled) .header__phone,
.header:not(.is-scrolled) .header__phone .icon { color: #fff; }
.header:not(.is-scrolled) .header__address,
.header:not(.is-scrolled) .header__address .icon { color: rgba(255,255,255,.62); }
.header:not(.is-scrolled) .soc { color: #fff; border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.08); }
.header:not(.is-scrolled) .logo__text strong { color: #fff; }
.header:not(.is-scrolled) .logo__text em { color: var(--purple-light, #b9a3ff); }
.header:not(.is-scrolled) .burger span { background: #fff; }

/* --- Прокрутка (белый фон): тёмный текст, фиолетовый акцент --- */
.header.is-scrolled .nav__link { color: var(--ink-2); }
.header.is-scrolled .nav__link:hover, .header.is-scrolled .nav__link.is-active { color: var(--purple); }
.header.is-scrolled .header__phone, .header.is-scrolled .header__phone .icon { color: var(--ink); }
.header.is-scrolled .header__address, .header.is-scrolled .header__address .icon { color: var(--muted); }
.header.is-scrolled .city-switch__btn { color: var(--ink); border-color: var(--purple-100); background: #fff; }
.header.is-scrolled .city-switch__btn > .icon:first-child { color: var(--purple); }
.header.is-scrolled .soc { color: var(--purple); border-color: var(--purple-100); background: #fff; }

/* Больше воздуха под меню на широких экранах */
@media (min-width: 1360px) { .header .header__inner { padding-left: 44px; padding-right: 44px; } }

/* На мобильных высота компактнее */
@media (max-width: 899px) {
    .header .header__inner { min-height: 72px; padding-left: 14px; padding-right: 14px; gap: 10px; }
    .header.is-scrolled .header__inner { min-height: 66px; }
    .header .logo__mark, .header .logo__mark img { width: 44px; height: 44px; }
    .header .logo { gap: 11px; }
    .header .header__actions { gap: 9px; }
    .header .header__search { width: 40px; height: 40px; }
    .header .phonefab__toggle { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
    .header .phonefab__label, .header .phonefab__chev { display: none; }
    .burger { width: 40px; height: 40px; }
}
/* Узкие телефоны: убираем подпись «Беларусь» и лишний воздух */
@media (max-width: 430px) {
    .header .logo__text em { display: none; }
    .header .logo__text strong { font-size: 18px; }
    .header .logo__mark, .header .logo__mark img { width: 40px; height: 40px; }
    .header .header__inner { padding-left: 12px; padding-right: 12px; gap: 8px; }
    .header .header__actions { gap: 7px; }
}
@media (max-width: 360px) {
    .header .header__search { display: none; }
}

/* =========================================================
   HERO · ПРЕМИУМ-РЕДИЗАЙН (только дизайн и UX)
   Видео + «пальцы» сохранены; добавлены Play, подсказка, воздух.
   ========================================================= */
.hero { cursor: pointer; }

/* Фон: слева затемнение под текстом, справа открытое пространство.
   Плотность сбавлена с .82 до .44 — на .82 под заголовком выходило 106×0.29 ≈ 30
   из 255, кадр был почти чёрный. Разборчивость букв держим не гашением картинки,
   а text-shadow на самом тексте (ниже). Спад растянут до 88%, чтобы доставать до
   правого края расширенного заголовка (он кончается на 72% ширины). */
.hero__overlay {
    background:
        linear-gradient(90deg, rgba(4,3,8,.44) 0%, rgba(4,3,8,.36) 30%, rgba(4,3,8,.24) 55%, rgba(4,3,8,.10) 72%, rgba(4,3,8,0) 88%),
        linear-gradient(0deg, rgba(4,3,8,.34) 0%, rgba(4,3,8,0) 30%);
}

/* Затемнение видео при наведении (10–15%), под «пальцами» */
.hero__player { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(4,3,10,0); transition: background .35s var(--ease); }
.hero:hover .hero__player { background: rgba(4,3,10,.14); }

/* «Пальцы» становятся ярче при наведении на hero */
.hero:hover .hs-point { filter: brightness(1.18) drop-shadow(0 0 10px rgba(125,92,255,.65)); }

/* Кнопка Play — по центру, плавно появляется на hover */
.hero__play {
    position: absolute; left: 50%; top: 50%; z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    background: none; border: 0; padding: 0;
    opacity: 0; transform: translate(-50%,-50%) scale(.86); pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.hero:hover .hero__play { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; }
.hero__play-circle { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
.hero__play-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(125,92,255,.6); animation: heroPlayPulse 2.2s var(--ease) infinite; }
.hero__play-ring--2 { animation-delay: 1.1s; }
@keyframes heroPlayPulse { 0% { transform: scale(.92); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.hero__play-btn {
    position: relative; width: 88px; height: 88px; border-radius: 50%;
    background: #fff; color: #14111f; display: grid; place-items: center;
    box-shadow: 0 22px 54px -14px rgba(0,0,0,.55);
    transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.hero__play-btn svg { margin-left: 3px; }
.hero__play:hover .hero__play-btn {
    background: var(--purple); color: #fff; transform: scale(1.06);
    box-shadow: 0 0 0 10px rgba(125,92,255,.18), 0 26px 64px -14px rgba(125,92,255,.6);
}
.hero__play-label { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0,0,0,.55); }

/* Уголковая подсказка — объясняет «пальцы» как интерактив */
.hero__demo-badge {
    position: absolute; left: 26px; bottom: 28px; z-index: 6;
    display: inline-flex; align-items: center; gap: 10px; padding: 11px 17px; border-radius: 100px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff;
    font-size: 13px; font-weight: 600; letter-spacing: .01em;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    cursor: pointer; transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.hero__demo-badge:hover { background: rgba(125,92,255,.24); border-color: rgba(125,92,255,.6); transform: translateY(-2px); }
.hero__demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--purple-light); animation: demoDot 2s ease-out infinite; }
@keyframes demoDot { 0% { box-shadow: 0 0 0 0 rgba(156,123,255,.6); } 70% { box-shadow: 0 0 0 11px rgba(156,123,255,0); } 100% { box-shadow: 0 0 0 0 rgba(156,123,255,0); } }

/* На touch (без hover) — Play видно сразу, чтобы можно было открыть */
@media (hover: none) {
    .hero__play { opacity: 1; transform: translate(-50%,-50%) scale(.9); pointer-events: auto; }
    .hero__play-label { display: none; }
}

/* Типографика. H1 сбавлен с исходных 82px: на них заголовок вставал в 4 строки
   (354px — половина экрана), из-за чего кнопка «Получить расчёт» уезжала за фолд
   на ноутбуках 1512×720. */
/* padding-top 88px: бейдж должен опускаться ниже фикс-шапки (её низ на 73px),
   при этом крупный заголовок в 3 строки + кнопка ещё влезают в 1512×720. */
.hero__inner { padding-top: 88px; padding-bottom: 96px; }
/* Колонка 1120px: при кегле 90px самая длинная строка «СЕКЦИОННЫЕ ВОРОТА»
   (тонкое начертание) занимает ~1090px и должна помещаться в ОДНУ строку.
   Абзац остаётся узким — у .hero__text свой max-width. */
/* Узкая левая колонка: текст не заходит в зону меток над воротами. */
.hero__content { max-width: 650px; }
.hero__badge { margin-bottom: 30px; }
/* Montserrat капсом, интерлиньяж .96 — у прописных нет выносных, тесная
   выключка выглядит собранно. Переносы заданы вручную символом | в site.json,
   поэтому text-wrap:balance убран: он мешал бы заданной разбивке. */
/* По ТЗ: очень крупный, базово тонкий, чистый белый, без теней/свечения/градиентов,
   межбуквенное -0.03em, плотный интерлиньяж, много воздуха снизу. */
/* min 26px, чтобы «СЕКЦИОННЫЕ ВОРОТА» не переполняли узкие экраны (на них строка
   при необходимости перенесётся сама). Слово переносится по границе слова. */
.hero__title { font-size: calc(clamp(26px, 6.4vw, 90px) * var(--h-scale, 1)); line-height: .94; letter-spacing: -.03em; margin-bottom: clamp(16px, 2.5vh, 36px); max-width: none; overflow-wrap: break-word; text-shadow: none; }
/* margin-bottom 176px: кнопка отодвинута вниз, между лидом и CTA много воздуха —
   призыв к действию читается отдельно от описания. */
/* Отступ до кнопки: раньше был 176px, чтобы CTA стоял у самого низа. Теперь низ
   занимает полоса доверия, а кнопка (как в макете) — над ней; отступ убавлен. */
/* По ТЗ: 22-24px, weight 400-500, цвет rgba(255,255,255,.78), макс. ширина ~560px,
   line-height 1.45, без тени. */
/* Главный текст первого экрана (бывший подзаголовок, теперь <h1> на месте убранного
   крупного заголовка). Размер — из админки через --hlead (px); min() с vw
   гарантирует, что на узких экранах текст сам ужимается. Колонка выровнена слева
   (не по шлагбауму — тот внутри видео и на разных экранах кадрируется). */
.hero__lead {
    font-weight: 800; line-height: 1.3; letter-spacing: -.005em; text-transform: uppercase;
    max-width: min(860px, 100%); margin: 0 0 clamp(22px, 3.6vh, 44px); color: #fff;
    font-size: clamp(26px, 3.2vw, var(--hlead, 50px));
    text-shadow: 0 1px 14px rgba(4,3,8,.55);
}
/* Вертикальный сдвиг текстового блока (из админки, --hero-shift). Двигает только
   текст/кнопку, плашку доверия (absolute) и маркеры не трогает. */
.hero__inner { transform: translate(var(--text-x, 0px), var(--hero-shift, 0px)); }
/* Если под главным текстом есть подзаголовок — зазор между ними меньше. */
.hero__lead:has(+ .hero__sub2) { margin-bottom: clamp(10px, 1.8vh, 18px); }
/* Доп. подзаголовок первого экрана (создаётся из админки, необязательный). */
.hero__sub2 {
    font-size: clamp(16px, 1.5vw, 18.5px); font-weight: 400; line-height: 1.55;
    max-width: min(560px, 100%); margin: 0 0 clamp(24px, 4vh, 40px);
    color: rgba(255,255,255,.85); text-shadow: 0 1px 10px rgba(4,3,8,.55);
}
/* Кнопка в одном левом крае с заголовком и подзаголовком — чистая колонка,
   стабильная на всех экранах. */
.hero__cta { gap: 16px; margin-left: 0; }

/* Кнопка «Каталог» — белая с тёмной рамкой */
.btn--hero-white { background: #fff; color: var(--ink); border: 1.5px solid rgba(20,17,31,.85); box-shadow: 0 12px 30px -14px rgba(0,0,0,.4); }
.btn--hero-white:hover { background: rgba(255,255,255,.92); color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 42px -16px rgba(0,0,0,.5); }

/* ===== Полоса доверия внизу первого экрана ===== */
/* Без рамки: тёмный прямоугольник/граница/блюр убраны — только иконки и текст
   свободно над видео, разнесённые крупным gap. */
.hero__trust {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
    display: flex; align-items: center; gap: clamp(30px, 5vw, 74px); max-width: calc(100% - 48px);
}
/* Иконка + текст, без плашки-обёртки и разделителей. */
.hero__trust-item { display: flex; align-items: center; gap: 12px; padding: 0; }
.hero__cta .btn, .hero__cta-float { border-radius: 14px; }
/* Плавающая CTA «под шлагбаумом» — привязка к кадру видео (в 16:9 совпадает).
   На мобиле/планшете скрыта, вместо неё кнопка в потоке под текстом. */
.hero__cta-float { position: absolute; left: 38%; top: 71%; z-index: 4; }
@media (min-width: 821px) { .hero__cta { display: none; } }
@media (max-width: 820px) { .hero__cta-float { display: none; } }
.hero__lead-l { display: block; }
.hero__lead-l:nth-child(2) { color: rgba(255,255,255,.82); }
.hero__lead-l:nth-child(3) { font-weight: 500; }
/* На узких экранах/портрете видео сильно кадрируется — интерактивные метки
   наезжают на текст. Прячем SVG-сцену, оставляя видео-фон. */
@media (max-width: 820px) { .hero__scene, .hero__trust, .hero__demo-badge { display: none; } .hero__badge { transform: none !important; } }
.hero__trust-ico { display: grid; place-items: center; flex: none; }
.hero__trust-ico .icon { width: 22px; height: 22px; color: var(--purple-light); filter: drop-shadow(0 1px 6px rgba(4,3,8,.55)); }
/* text-shadow — текст теперь лежит прямо на видео, без тёмной подложки. */
.hero__trust-txt { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.72); max-width: 270px; text-shadow: 0 1px 10px rgba(4,3,8,.75); }
.hero__trust-txt b { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
/* Полоса заняла низ экрана — индикатор прокрутки убираем, чтобы не накладывался */
.hero__scroll { display: none; }
/* Планшет: сбрасываем в 2+1, ниже — прячем (та же информация есть в подвале) */
@media (max-width: 1100px) { .hero__trust { flex-wrap: wrap; max-width: calc(100% - 32px); }
    .hero__trust-item { flex: 1 1 46%; } .hero__trust-item + .hero__trust-item { border-left: 0; } }
@media (max-width: 720px) { .hero__trust { display: none; } }

/* Видео-модалка */
.modal--video { align-items: center; justify-content: center; padding: 24px; }
.modal--video .modal__overlay { background: rgba(4,3,8,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.video-modal__box { position: relative; z-index: 1; width: min(1100px, 94vw); aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 50px 130px -30px rgba(0,0,0,.7); animation: modalIn .4s var(--ease); }
.video-modal__box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal--video .modal__close { color: #fff; top: 18px; right: 24px; z-index: 3; font-size: 42px; }

@media (max-width: 640px) {
    .hero__demo-badge { left: 16px; bottom: 18px; font-size: 12px; padding: 9px 14px; }
    .hero__play-circle, .hero__play-btn { width: 70px; height: 70px; }
    .hero__inner { padding-top: 118px; padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__play-ring, .hero__demo-dot { animation: none; }
    .hero:hover .hero__player { transition: none; }
}

/* =========================================================
   КАТАЛОГ «Уличная группа» · премиум-архитектурный блок
   Светлый фон, асимметрия (1 акцентная + 2), дорогие карточки.
   ========================================================= */
.catalog {
    position: relative; overflow: hidden; padding: clamp(48px,6vw,84px) 0;
    background: #FAFAFA !important;
}
.catalog::before, .catalog::after { display: none !important; }
.catalog > .container { position: relative; z-index: 1; }

/* Один декоративный элемент: большой круг-контур справа, частично за карточками */
.catalog__glow { position: absolute; z-index: 0; pointer-events: none; background: none;
    top: 6%; right: -190px; width: 820px; height: 820px; border-radius: 50%;
    border: 1px solid rgba(108,77,255,.08); }
/* Архитектурные направляющие: тонкие вертикальные линии, шаг 160px, едва заметны */
.catalog__lines { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(20,20,20,.035) 0 1px, transparent 1px 160px); }

/* Заголовок блока — воздух, крупный H2, слева */
.catalog__head { max-width: 820px; margin: 0 0 clamp(30px,4vw,50px); }
.catalog__label { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--purple); margin-bottom: 18px; }
.catalog__title { font-family: var(--font); font-weight: 800; font-size: calc(clamp(36px,5vw,58px) * var(--h-scale, 1)); line-height: 1.0; letter-spacing: -.035em; color: var(--ink); max-width: 15ch; }
.catalog__sub { color: var(--muted); font-size: clamp(16px,1.9vw,19px); line-height: 1.5; margin-top: 16px; max-width: 48ch; }

/* Асимметричная адаптивная сетка */
.catalog__grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) {
    /* Крупная карточка слева на всю высоту + две справа стопкой (как на референсе) */
    .catalog__grid { grid-template-columns: 1.16fr 1fr; gap: 22px; align-items: stretch; }
    /* Правые карточки — ландшафтные, равная высота */
    .catalog__grid .catalog-card { aspect-ratio: auto; height: 312px; }
    /* Акцентная слева — колонка 1, растянута на обе строки (вся высота стопки + gap) */
    .catalog__grid .catalog-card--feature { aspect-ratio: auto; grid-column: 1; grid-row: 1 / span 2; height: auto; }
    .catalog__grid .catalog-card--feature .catalog-card__body { padding: 34px 36px; }
    .catalog__grid .catalog-card--feature .catalog-card__title { font-size: 30px; }
}

/* Дорогие карточки: фото на всю карточку, подписи белым поверх фото (как на референсе) */
.catalog-card {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 3/2;                       /* высота на мобайле; на десктопе задаёт grid */
    border-radius: 28px; background: #14151b;
    box-shadow: 0 24px 64px -12px rgba(20,20,20,.10);
    color: #fff; text-decoration: none;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.catalog-card:hover {
    transform: translateY(-8px) scale(1.07);
    box-shadow: 0 56px 120px -30px rgba(20,20,20,.5);
    z-index: 5;
}
.catalog-card__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #14151b; }
.catalog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.catalog-card:hover .catalog-card__media img { transform: scale(1.05); }
/* Затемнение снизу — чтобы белый текст читался прямо на фото */
.catalog-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,10,14,0) 36%, rgba(10,10,14,.26) 60%, rgba(10,10,14,.86) 100%);
}

/* Подписи поверх фото, снизу слева */
.catalog-card__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 30px 32px; }
.catalog-card__title { font-family: var(--font); font-weight: 800; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); transition: color .3s var(--ease); }
.catalog-card:hover .catalog-card__title { color: var(--purple-light); }
.catalog-card__text { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.5; text-shadow: 0 1px 14px rgba(0,0,0,.55);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-card__more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); transition: color .3s var(--ease); }
.catalog-card__more .icon { transition: transform .3s var(--ease); }
.catalog-card:hover .catalog-card__more { color: var(--purple-light); }
.catalog-card:hover .catalog-card__more .icon { transform: translateX(6px); }

/* Акцентная карточка: заголовок крупнее, описание до 3 строк */
.catalog-card--feature { aspect-ratio: 4/5; }
.catalog-card--feature .catalog-card__title { font-size: 27px; }
.catalog-card--feature .catalog-card__text { -webkit-line-clamp: 3; }

/* =========================================================
   ВАРИАНТЫ ИСПОЛНЕНИЯ · конфигуратор (табы)
   Одно большое фото + переключатель. Клик по табу — плавно
   меняются фото, описание, преимущества и ссылка.
   Секция стоит на месте: без скролла и перезагрузки.
   ========================================================= */
.vcfg { background-color: #FAFAFA; padding: clamp(56px,7vw,96px) 0; position: relative; overflow: hidden;
    /* Архитектурная сетка 180px + едва уловимая диагональная текстура (~2%). Без картинок/свечений */
    background-image:
        repeating-linear-gradient(90deg, rgba(20,20,20,.03) 0 1px, transparent 1px 180px),
        repeating-linear-gradient(0deg,  rgba(20,20,20,.03) 0 1px, transparent 1px 180px),
        repeating-linear-gradient(45deg, rgba(20,20,20,.02) 0 1px, transparent 1px 13px);
}
/* Декор: два круга-контура справа за изображением. Только линия — ни заливок, ни свечений */
.vcfg::before, .vcfg::after { content: ''; position: absolute; z-index: 0; pointer-events: none;
    border-radius: 50%; top: 50%; transform: translateY(-50%); }
.vcfg::before { width: 900px; height: 900px; right: -270px; border: 1px solid rgba(108,77,255,.06); }
.vcfg::after  { width: 500px; height: 500px; right: -50px;  border: 1px solid rgba(108,77,255,.06); opacity: .3; }
/* Контент — над фоном и кругами */
.vcfg > .container { position: relative; z-index: 1; }
.vcfg__head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px,3.5vw,44px); }
.vcfg__head .catalog__title { max-width: none; font-size: calc(clamp(32px,4.4vw,56px) * var(--h-scale, 1)); }
.vcfg__head .catalog__sub { margin-left: auto; margin-right: auto; max-width: 46ch; }

.vcfg__stage { max-width: 1000px; margin: 0 auto; }

/* Большое изображение — crossfade */
.vcfg__media { position: relative; width: 100%; height: clamp(340px,50vw,600px);
    border-radius: clamp(20px,2vw,28px); overflow: hidden; background: #14151b;
    box-shadow: 0 40px 90px -40px rgba(20,20,20,.34); }
.vcfg__img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.vcfg__img.is-active { opacity: 1; z-index: 1; cursor: zoom-in; }
.vcfg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcfg__img.is-active img { animation: vcfgZoom 1s var(--ease); }
@keyframes vcfgZoom { 0% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Табы-переключатель */
.vcfg__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
    margin: clamp(20px,2.4vw,30px) 0 clamp(24px,3vw,38px); }
.vcfg__tab { display: inline-flex; align-items: center; gap: 11px;
    padding: 12px 22px; border-radius: 100px; background: #F4F4F6;
    border: 1.5px solid transparent; cursor: pointer;
    font-family: var(--font); font-weight: 700; font-size: 16px; color: var(--muted);
    transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.vcfg__tab:hover { color: var(--ink); background: #ECECEF; }
.vcfg__tab-swatch { width: 20px; height: 20px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.vcfg__tab.is-active { color: var(--ink); background: #fff; border-color: rgba(125,92,255,.5); box-shadow: 0 10px 26px -12px rgba(125,92,255,.55); }

/* Панель описания активного варианта */
.vcfg__panels { position: relative; max-width: 900px; margin: 0 auto; }
.vcfg__panel { display: none; }
.vcfg__panel.is-active { display: block; animation: vcfgIn .45s var(--ease); }
@keyframes vcfgIn { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }

.vcfg__panel-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.vcfg__title { font-family: var(--font); font-weight: 800; font-size: clamp(26px,3vw,40px); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.vcfg__count { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--purple); letter-spacing: .08em; flex: none; }
.vcfg__desc { font-size: clamp(16px,1.5vw,19px); color: var(--muted); line-height: 1.55; max-width: 60ch; margin-bottom: 24px; }

.vcfg__adv { display: grid; gap: 12px; margin-bottom: 30px; }
.vcfg__adv li { display: flex; align-items: center; gap: 11px; font-size: clamp(15px,1.2vw,17px); font-weight: 600; color: var(--ink); }
.vcfg__adv .icon { color: var(--purple); flex: none; }

.vcfg__cta { display: flex; }

@media (min-width: 720px) {
    .vcfg__adv { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .vcfg__cta { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .vcfg__img.is-active img { animation: none; }
    .vcfg__panel.is-active { animation: none; }
}

/* =========================================================
   РАСПАШНЫЕ ВОРОТА · тёмная секция с большой фотографией
   Композиция иная, чем у светлого конфигуратора: фото почти
   во всю ширину + компактные текстовые переключатели под ним.
   Фиолетовый — только акцент активного/hover. Минимум декора.
   ========================================================= */
.rgate { background: #1B1C22; color: #fff; padding: clamp(56px,7vw,100px) 0; position: relative; overflow: hidden; }
.rgate__head { margin-bottom: clamp(26px,3vw,40px); }
.rgate__label { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--purple-light); margin-bottom: 14px; }
.rgate__title { font-family: var(--font); font-weight: 800; font-size: clamp(32px,4.4vw,56px); letter-spacing: -.035em; line-height: 1.02; color: #fff; }
.rgate__sub { color: rgba(255,255,255,.6); font-size: clamp(16px,1.7vw,19px); line-height: 1.5; margin-top: 14px; max-width: 52ch; }

/* Большая фотография почти во всю ширину — главный элемент */
.rgate .container { max-width: 1180px; }
.rgate__stage { position: relative; width: min(90vw, 1180px); margin: 0 auto;
    height: clamp(360px,52vw,620px); border-radius: clamp(16px,1.6vw,22px); overflow: hidden; background: #101116; }
.rgate__img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s var(--ease); }
.rgate__img.is-active { opacity: 1; z-index: 1; cursor: zoom-in; }
.rgate__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rgate__img.is-active img { animation: rgateZoom 1.1s var(--ease); }
@keyframes rgateZoom { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Компактные текстовые переключатели с фиолетовым индикатором */
.rgate__switch { display: flex; flex-wrap: wrap; gap: clamp(18px,3vw,40px); justify-content: center;
    margin: clamp(24px,3vw,38px) 0 clamp(22px,2.6vw,32px); border-bottom: 1px solid rgba(255,255,255,.09); }
.rgate__tab { position: relative; background: none; border: 0; cursor: pointer; padding: 0 2px 16px;
    font-family: var(--font); font-weight: 700; font-size: clamp(15px,1.5vw,18px); color: rgba(255,255,255,.5);
    transition: color .25s var(--ease); }
.rgate__tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--purple); transform: scaleX(0); transition: transform .3s var(--ease); }
.rgate__tab:hover { color: #fff; }
.rgate__tab.is-active { color: #fff; }
.rgate__tab.is-active::after { transform: scaleX(1); }

/* Описание активного варианта — прямо на тёмном фоне, без карточек */
.rgate__panels { position: relative; }
.rgate__panel { display: none; }
.rgate__panel.is-active { display: block; animation: rgateIn .5s var(--ease); }
@keyframes rgateIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.rgate__panel-title { font-family: var(--font); font-weight: 800; font-size: clamp(24px,2.6vw,34px); letter-spacing: -.03em; color: #fff; margin-bottom: 12px; }
.rgate__desc { color: rgba(255,255,255,.68); font-size: clamp(16px,1.5vw,19px); line-height: 1.55; max-width: 56ch; }
.rgate__adv { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 22px; padding: 0; list-style: none; }
.rgate__adv li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(14px,1.2vw,16px); color: rgba(255,255,255,.9); }
.rgate__adv .icon { color: var(--purple-light); flex: none; }

@media (min-width: 860px) {
    .rgate__switch { justify-content: flex-start; }
    .rgate__panel.is-active { display: flex; gap: clamp(30px,5vw,72px); align-items: flex-start; }
    .rgate__panel-main { flex: 1 1 auto; }
    .rgate__panel-side { flex: 0 0 340px; padding-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .rgate__img.is-active img { animation: none; }
    .rgate__panel.is-active { animation: none; }
}

/* =========================================================
   КАЛИТКИ · компактный разгрузочный блок (~500px)
   Три карточки одинаковой высоты. Чистый #FAFAFA, без декора.
   Только фото + название + строка описания + стрелка «Подробнее».
   ========================================================= */
.kgate { background: #FAFAFA; padding: clamp(34px,4.2vw,50px) 0; }
.kgate__head { margin-bottom: clamp(18px,2.2vw,28px); }
.kgate__label { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--purple); margin-bottom: 10px; }
.kgate__title { font-family: var(--font); font-weight: 800; font-size: clamp(26px,3vw,38px); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }

.kgate__grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px,2vw,24px); }
@media (min-width: 720px) { .kgate__grid { grid-template-columns: repeat(3, 1fr); } }

/* Компактная карточка одинаковой высоты: акцент на фото, минимум текста */
.kcard { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 16px 40px -24px rgba(20,20,20,.20); text-decoration: none; color: var(--ink);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.kcard:hover { transform: translateY(-6px); box-shadow: 0 34px 72px -30px rgba(20,20,20,.32); }
.kcard__media { aspect-ratio: 4 / 5; overflow: hidden; background: #e9e7e1; }
.kcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; transition: transform .55s var(--ease); }
.kcard:hover .kcard__media img { transform: scale(1.08); }
.kcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 18px; }
.kcard__title { font-family: var(--font); font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--ink); transition: color .3s var(--ease); }
.kcard:hover .kcard__title { color: var(--purple); }
.kcard__text { color: var(--muted); font-size: 14.5px; line-height: 1.4; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard__more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--purple); }
.kcard__more .icon { transition: transform .3s var(--ease); }
.kcard:hover .kcard__more .icon { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
    .kcard:hover { transform: none; }
    .kcard:hover .kcard__media img { transform: none; }
}

/* =========================================================
   Стрелки-перелистывание над фото (конфигураторы .vcfg и .rgate)
   ========================================================= */
.cfg-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(15,15,20,.5); color: #fff;
    transition: background .25s var(--ease), transform .25s var(--ease); }
.cfg-nav:hover { background: var(--purple); }
.cfg-nav .icon { width: 20px; height: 20px; }
.cfg-nav--prev { left: 16px; }
.cfg-nav--prev .icon { transform: rotate(180deg); }
.cfg-nav--next { right: 16px; }
.cfg-nav--prev:hover { transform: translateY(-50%) scale(1.07); }
.cfg-nav--next:hover { transform: translateY(-50%) scale(1.07); }

/* =========================================================
   По просьбе: во ВСЕХ секциях убираем верхний бейдж-надзаголовок
   (ничего перед заголовком → сайт компактнее), а фразу-подзаголовок
   делаем фирменным фиолетовым.
   ========================================================= */
.eyebrow, .catalog__label, .rgate__label, .kgate__label { display: none !important; }
.section-sub, .catalog__sub { color: var(--purple); }
.rgate__sub { color: var(--purple-light); }
.kgate__sub { color: var(--purple); font-size: clamp(15px,1.6vw,17px); line-height: 1.4; margin-top: 8px; }

/* =========================================================
   ОТЗЫВЫ · премиум-редизайн (стекло + свет, фиолетовые звёзды)
   ========================================================= */
.reviews-pro { position: relative; overflow: hidden; background: linear-gradient(180deg,#FFFFFF 0%,#F6F5FF 100%); }
.reviews-pro > .container { position: relative; z-index: 1; }
/* мягкие размытые световые пятна — глубина, не «кислота» */
.reviews-pro__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.reviews-pro__bg::before, .reviews-pro__bg::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); }
.reviews-pro__bg::before { width: 520px; height: 520px; top: -140px; left: -110px; background: rgba(125,92,255,.10); }
.reviews-pro__bg::after { width: 600px; height: 600px; bottom: -180px; right: -120px; background: rgba(125,92,255,.08); }

/* Полоса доверия — стеклянная капсула */
.rvw-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(14px,2.5vw,40px);
    max-width: 900px; margin: 0 auto clamp(36px,5vw,58px); padding: 20px clamp(22px,3vw,38px);
    border-radius: 100px; background: rgba(255,255,255,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(125,92,255,.16); box-shadow: 0 22px 54px -30px rgba(80,60,160,.24); }
.rvw-trust__item { text-align: center; }
.rvw-trust__num { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(22px,2.3vw,30px); letter-spacing: -.02em; color: var(--ink); }
.rvw-trust__label { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.rvw-trust__div { width: 1px; height: 34px; background: rgba(20,20,40,.10); }

/* Карусель: видно 3 карточки, листаем стрелкой (экономим место — одна строка) */
.rvw-carousel { position: relative; }
.rvw-track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px 14px; margin: 0 -2px; }
.rvw-track::-webkit-scrollbar { display: none; }
.rvw-track > .rvw-card { flex: 0 0 calc((100% - 56px) / 3); scroll-snap-align: start; }
@media (max-width: 999px) { .rvw-track > .rvw-card { flex-basis: calc((100% - 24px) / 2); } .rvw-track { gap: 24px; } }
@media (max-width: 639px) { .rvw-track > .rvw-card { flex-basis: 86%; } }

/* Стрелки карусели — светлое стекло, фиолетовый на hover */
.rvw-nav { position: absolute; top: 42%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(125,92,255,.18);
    background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--purple); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 34px -14px rgba(80,60,160,.34); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease); }
.rvw-nav .icon { width: 20px; height: 20px; }
.rvw-nav:hover { background: var(--purple); color: #fff; }
.rvw-nav--prev { left: -10px; }
.rvw-nav--prev .icon { transform: rotate(180deg); }
.rvw-nav--next { right: -10px; }
.rvw-nav--prev:hover, .rvw-nav--next:hover { transform: scale(1.06); }
.rvw-nav.is-off { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .rvw-nav { display: none; } }

/* Стеклянная карточка отзыва */
.rvw-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px;
    border-radius: 28px; background: rgba(255,255,255,.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.6); box-shadow: 0 20px 50px -24px rgba(80,60,160,.18);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.rvw-card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 42px 92px -30px rgba(80,60,160,.32); border-color: rgba(125,92,255,.30); }
.rvw-card__line { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--purple),var(--purple-light)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.rvw-card:hover .rvw-card__line { transform: scaleX(1); }
.rvw-card__quote { position: absolute; top: 10px; right: 24px; font-family: var(--display); font-weight: 700; font-size: 80px; line-height: 1; color: rgba(125,92,255,.12); pointer-events: none; }

.rvw-card__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rvw-card__stars { display: inline-flex; color: var(--purple); font-size: 18px; letter-spacing: 2px; transition: transform .3s var(--ease); }
.rvw-card__stars .is-empty { color: rgba(125,92,255,.22); }
.rvw-card:hover .rvw-card__stars { transform: scale(1.06); }
.rvw-card__score { font-weight: 700; font-size: 15px; color: var(--ink); }

.rvw-card__text { position: relative; z-index: 1; color: var(--ink); font-size: 16.5px; line-height: 1.65; margin: 0 0 22px;
    display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rvw-card__text.is-expanded { -webkit-line-clamp: unset; }
.rvw-card__more { align-self: flex-start; background: none; border: 0; padding: 0; margin: -14px 0 20px; color: var(--purple); font-weight: 700; font-size: 14px; cursor: pointer; }
.rvw-card__more:hover { text-decoration: underline; }

.rvw-card__author { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin-top: auto; }
.rvw-card__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 17px; color: #fff;
    background: linear-gradient(135deg,var(--purple),var(--purple-light)); box-shadow: 0 6px 16px rgba(125,92,255,.35); }
.rvw-card__who { display: flex; flex-direction: column; min-width: 0; }
.rvw-card__name { font-weight: 700; font-size: 15px; color: var(--ink); }
.rvw-card__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    .rvw-card:hover { transform: none; }
}

/* =========================================================
   КАК МЫ РАБОТАЕМ · горизонтальный роадмап (компактно, дорого)
   Тонкая градиент-линия соединяет узлы-шаги. Никаких «6 карточек».
   ========================================================= */
.howx { position: relative; overflow: hidden; }
/* «Как мы работаем» — лёгкий графит-тинт, чтобы блок не сливался с белым квизом ниже */
body[data-page="home"] #how.howx {
    background:
        radial-gradient(58% 62% at 86% -6%, rgba(125,92,255,.11), transparent 62%),
        radial-gradient(46% 60% at 6% 108%, rgba(125,92,255,.08), transparent 64%),
        linear-gradient(180deg, #37333F 0%, #262230 100%) !important;
}
/* Тёмная техно-секция: чертёж светлыми линиями + светлый текст роадмапа */
#how .sec-bg { filter: invert(1) grayscale(1) brightness(.98) contrast(.9); }
#how .section-title { color: #fff; }
#how .section-sub { color: rgba(255,255,255,.7); }
#how .howx-step__title { color: #fff; }
#how .howx-step__text { color: rgba(255,255,255,.6); }
#how .howx-step__num { color: rgba(156,123,255,.24); }
#how .howx-step:hover .howx-step__num { color: rgba(156,123,255,.4); }

/* ==================== Кнопка «Открыть ворота» + попап с видео ==================== */
.aut-phone__btn { border: 0; cursor: pointer; transition: transform .18s var(--ease), box-shadow .3s var(--ease); }
.aut-phone__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(125,92,255,.85); }
.aut-phone__btn:active { transform: scale(.97); }
.aut-phone__status.is-open { color: #4ade80; }
.gate-pop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.gate-pop[hidden] { display: none; }
.gate-pop__overlay { position: absolute; inset: 0; background: rgba(10,8,18,.62); backdrop-filter: blur(5px); opacity: 0; transition: opacity .3s var(--ease); }
.gate-pop.is-open .gate-pop__overlay { opacity: 1; }
.gate-pop__card { position: relative; width: min(67vw, calc((88vh - 60px) * 1.6), 1400px); background: #14121c; border: 1px solid rgba(125,92,255,.28);
    border-radius: 22px; overflow: hidden; box-shadow: 0 44px 110px -30px rgba(0,0,0,.85);
    transform: scale(.94) translateY(14px); opacity: 0; transition: transform .34s var(--ease), opacity .34s var(--ease); }
@media (max-width: 620px) { .gate-pop__card { width: 94vw; } }
.gate-pop.is-open .gate-pop__card { transform: none; opacity: 1; }
.gate-pop__video { aspect-ratio: 16 / 10; background: #000; }
.gate-pop__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-pop__cap { display: flex; align-items: center; gap: 9px; padding: 13px 18px; color: #fff; font-weight: 600; font-size: 14.5px; }
.gate-pop__dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; flex: none; animation: gatepop-pulse 1.5s ease-out infinite; }
@keyframes gatepop-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 100% { box-shadow: 0 0 0 12px rgba(74,222,128,0); } }
.gate-pop__close { position: absolute; top: 9px; right: 11px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.5); color: #fff; font-size: 23px; line-height: 1; cursor: pointer; transition: background .2s; }
.gate-pop__close:hover { background: rgba(0,0,0,.75); }

/* ==================== Шлагбаумы: большая карточка + карусель ==================== */
.shl-models { max-width: 1120px; margin-inline: auto; }
.shl-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(18px,2.6vw,36px); align-items: stretch;
    background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
    box-shadow: 0 34px 80px -34px rgba(20,17,31,.22); }
.shl-hero__media { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(22px,3vw,40px);
    background: radial-gradient(90% 80% at 30% 20%, rgba(125,92,255,.12), transparent 62%), linear-gradient(160deg, #f5f6fc, #e9ebf4); }
.shl-hero__media img { max-width: 100%; max-height: 400px; object-fit: contain; filter: drop-shadow(0 26px 46px rgba(20,20,50,.22)); }
.shl-hero__body { padding: clamp(24px,3vw,42px) clamp(22px,3vw,42px) clamp(24px,3vw,38px); display: flex; flex-direction: column; }
.shl-hero__badge { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--purple); background: rgba(125,92,255,.12); padding: 6px 13px; border-radius: 100px; margin-bottom: 15px; }
.shl-hero__name { font-family: var(--font); font-weight: 800; font-size: clamp(24px,3vw,36px); letter-spacing: -.025em; line-height: 1.05; color: var(--ink); }
.shl-hero__tag { color: var(--muted); font-size: clamp(15px,1.6vw,17px); line-height: 1.5; margin-top: 12px; }
.shl-hero__feats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.shl-hero__feats li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: #33313c; line-height: 1.42; }
.shl-hero__feats .icon { color: var(--purple); flex: none; margin-top: 1px; }
.shl-hero__foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.shl-hero__price { font-family: var(--display); font-weight: 800; font-size: clamp(24px,2.6vw,32px); color: var(--ink); line-height: 1; display: flex; flex-direction: column; gap: 5px; }
.shl-hero__price small { font-family: var(--font); font-weight: 500; font-size: 12.5px; color: var(--muted); }
@media (max-width: 800px) { .shl-hero { grid-template-columns: 1fr; } .shl-hero__media { min-height: 240px; } }

.shl-hero__media { position: relative; }
.shl-hero__media[data-lb-src] { cursor: zoom-in; }
.shl-hero__zoom { position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 600; color: #fff;
    background: rgba(20,17,31,.55); backdrop-filter: blur(4px); padding: 6px 12px; border-radius: 100px;
    opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.shl-hero__media:hover .shl-hero__zoom { opacity: 1; transform: none; }

/* Карусель: одна большая карточка в кадре, листаем стрелками/точками */
.shl-carousel { position: relative; max-width: 1120px; margin: clamp(28px,3vw,44px) auto 0; padding: 0 6px; }
.shl-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 8px;
    scrollbar-width: thin; scrollbar-color: var(--purple-100) transparent; }
.shl-carousel__track > .shl-hero { scroll-snap-align: center; }
.shl-carousel__track::-webkit-scrollbar { height: 7px; }
.shl-carousel__track::-webkit-scrollbar-track { background: transparent; }
.shl-carousel__track::-webkit-scrollbar-thumb { background: var(--purple-100); border-radius: 100px; }
.shl-carousel__dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.shl-carousel__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(125,92,255,.28); transition: background .25s var(--ease), transform .25s var(--ease); }
.shl-carousel__dot.is-active { background: var(--purple); transform: scale(1.25); }

/* Аксессуары шлагбаумов — сетка карточек */
.shl-acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1120px; margin-inline: auto; }
@media (max-width: 980px) { .shl-acc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shl-acc-grid { grid-template-columns: 1fr; } }
.shl-acc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px;
    overflow: hidden; box-shadow: 0 18px 44px -26px rgba(20,17,31,.22); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.shl-acc:hover { transform: translateY(-6px); box-shadow: 0 30px 62px -28px rgba(20,17,31,.32); }
.shl-acc__media { aspect-ratio: 4 / 3; background: radial-gradient(80% 70% at 30% 20%, rgba(125,92,255,.08), transparent 60%), linear-gradient(160deg, #f6f7fc, #eceef6);
    display: flex; align-items: center; justify-content: center; padding: 22px; cursor: zoom-in; }
.shl-acc__media img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(20,20,50,.14)); }
.shl-acc__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.shl-acc__name { font-family: var(--font); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.shl-acc__feats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.shl-acc__feats li { position: relative; padding-left: 16px; font-size: 12.8px; line-height: 1.4; color: var(--muted); }
.shl-acc__feats li::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(125,92,255,.5); }
.shl-acc__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shl-acc__price { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); }
.shl-acc__foot .btn { padding: 9px 16px; font-size: 14px; }
/* тонкая разделительная грань сверху квиза для чёткой границы */
body[data-page="home"] #quiz-section { border-top: 1px solid rgba(20,17,31,.06); }
.howx-row { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: clamp(44px,5vw,66px); }
.howx-line { position: absolute; top: 27px; left: 8.33%; right: 8.33%; height: 2px; z-index: 0; border-radius: 2px;
    background: linear-gradient(90deg, rgba(125,92,255,.16), var(--purple) 88%); }
.howx-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.howx-step__num { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none;
    font-family: var(--display); font-weight: 700; font-size: 58px; line-height: 1; color: rgba(125,92,255,.09); transition: color .3s var(--ease); }
.howx-step__node { width: 54px; height: 54px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid rgba(125,92,255,.28); color: var(--purple); box-shadow: 0 12px 30px -14px rgba(80,60,160,.30);
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.howx-step__node .icon { width: 24px; height: 24px; }
.howx-step__title { font-family: var(--font); font-weight: 700; font-size: 17px; color: var(--ink); margin: 16px 0 6px; transition: color .3s var(--ease); }
.howx-step__text { font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 21ch; }

.howx-step:hover .howx-step__node { transform: translateY(-4px) scale(1.07); background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 22px 46px -16px rgba(125,92,255,.55); }
.howx-step:hover .howx-step__title { color: var(--purple); }
.howx-step:hover .howx-step__num { color: rgba(125,92,255,.17); }

/* Планшет/мобайл — аккуратный вертикальный таймлайн */
@media (max-width: 860px) {
    .howx-row { grid-template-columns: 1fr; gap: 24px; max-width: 440px; margin-inline: auto; }
    .howx-line { top: 8px; bottom: 8px; left: 26px; right: auto; width: 2px; height: auto;
        background: linear-gradient(180deg, rgba(125,92,255,.16), var(--purple) 92%); }
    .howx-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; }
    .howx-step__num { display: none; }
    .howx-step__title { margin: 4px 0 4px; }
    .howx-step__text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .howx-step:hover .howx-step__node { transform: none; }
}

/* =========================================================
   MOTION SYSTEM · единая система появлений (каждый блок — свой характер)
   Всё на transform/opacity (60 FPS). Триггер — класс .is-in от IntersectionObserver.
   ========================================================= */
/* Варианты появления через data-reveal (по умолчанию — fade-up) */
.reveal[data-reveal="scale"] { transform: translateY(16px) scale(.95); }
.reveal[data-reveal="left"]  { transform: translateX(-44px); }
.reveal[data-reveal="right"] { transform: translateX(44px); }
.reveal[data-reveal="blur"]  { filter: blur(9px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal[data-reveal="blur"].is-in { filter: none; }   /* .is-in { transform:none } уже сбрасывает scale/translateX */

/* Отзывы — каскад карточек (stagger), запускается при входе карусели */
.rvw-carousel .rvw-card { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rvw-carousel.is-in .rvw-card { opacity: 1; transform: none; }
.rvw-carousel.is-in .rvw-track > .rvw-card:nth-child(1) { transition-delay: .05s; }
.rvw-carousel.is-in .rvw-track > .rvw-card:nth-child(2) { transition-delay: .13s; }
.rvw-carousel.is-in .rvw-track > .rvw-card:nth-child(3) { transition-delay: .21s; }
.rvw-carousel.is-in .rvw-track > .rvw-card:nth-child(4) { transition-delay: .29s; }
.rvw-carousel.is-in .rvw-track > .rvw-card:nth-child(5) { transition-delay: .37s; }
.rvw-carousel.is-in .rvw-track > .rvw-card:nth-child(6) { transition-delay: .45s; }

/* «Как мы работаем» — прорисовка линии + каскад шагов (timeline animation) */
.howx-line { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .15s; }
.howx-row.is-drawn .howx-line { transform: scaleX(1); }
.howx-step { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.howx-row.is-drawn .howx-step { opacity: 1; transform: none; }
@media (max-width: 860px) {
    .howx-line { transform: scaleY(0); transform-origin: top; }
    .howx-row.is-drawn .howx-line { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .rvw-carousel .rvw-card, .howx-step { opacity: 1 !important; transform: none !important; }
    .howx-line { transform: scaleX(1) !important; }
}

/* =========================================================
   PREMIUM-ПОЛИРОВКА · микро-взаимодействия (кнопки, иконки, свет)
   ========================================================= */
/* Кнопки: чёткое press-состояние + стрелка чуть сдвигается */
.btn:active { transform: translateY(-1px) scale(.98); }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

/* Плавающие декоративные пятна — мягкое движение света (очень медленно) */
@keyframes floatBlob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(22px, -26px); } }
.reviews-pro__bg::before { animation: floatBlob 17s ease-in-out infinite; }
.reviews-pro__bg::after  { animation: floatBlob 21s ease-in-out infinite reverse; }

/* Микроанимации иконок */
.faq__icon { transition: transform .25s var(--ease); }
.faq__q:hover .faq__icon { transform: scale(1.18); }
.why-card:hover .why-card__chev { transform: translateX(4px); }
.why-card__chev { transition: transform .3s var(--ease); }

/* Едва заметный tilt фото каталога на hover (в дополнение к zoom) */
.catalog-card:hover .catalog-card__media img { transform: scale(1.05) rotate(-.5deg); }

@media (prefers-reduced-motion: reduce) {
    .reviews-pro__bg::before, .reviews-pro__bg::after { animation: none; }
    .btn:active, .btn:hover .icon { transform: none; }
}

/* =========================================================
   HERO «Автоматика ALUTECH» · премиальный полноэкранный экран
   Вечерний архитектурный фон + кино-грейд + tech-акценты (blue/purple/orange).
   Синий #0077CC — технологии/кнопки; фиолетовый — бренд; оранжевый — «система активна».
   ========================================================= */
.autohero { min-height: clamp(500px,68vh,660px); display: flex; align-items: center; padding: 118px 0 60px; background: #070a12; }
.autohero::before, .autohero::after { display: none !important; }   /* убираем дефолтные пятна .page-hero */
.autohero__inner { position: relative; z-index: 3; max-width: 1000px; }

/* Вечерний фон (притемнён кино-грейдом) + лёгкий параллакс */
.autohero__bg { position: absolute; inset: -7%; z-index: 0; background-size: cover; background-position: 62% center; transform: scale(1.06); will-change: transform; }
.autohero__video { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
/* Hero откатных и распашных — такой же размер, как на странице автоматики */
body[data-page="otkatnye"] .page-hero,
body[data-page="raspashnye"] .page-hero { min-height: clamp(500px, 68vh, 660px); display: flex; align-items: center; }
.autohero__dots, .autohero__inner { will-change: transform; }
.autohero__grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,10,18,.95) 0%, rgba(7,10,18,.80) 34%, rgba(7,10,18,.34) 66%, rgba(10,14,24,.58) 100%),
        linear-gradient(0deg, rgba(5,7,13,.96), rgba(5,7,13,0) 48%),
        radial-gradient(58% 78% at 78% 32%, rgba(125,92,255,.18), transparent 60%); }

/* Мягкие световые пятна — движение света */
.autohero__glow { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; filter: blur(72px); }
.autohero__glow--blue { width: 540px; height: 540px; right: 3%; top: 16%; background: rgba(125,92,255,.30); animation: autoGlow 9s ease-in-out infinite; }
.autohero__glow--purple { width: 460px; height: 460px; left: -9%; bottom: -14%; background: rgba(125,92,255,.22); animation: autoGlow 12s ease-in-out infinite reverse; }
@keyframes autoGlow { 0%, 100% { transform: translate(0,0); opacity: .82; } 50% { transform: translate(26px,-22px); opacity: 1; } }

/* Диагональный световой свип (один раз при загрузке) */
.autohero__sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.autohero__sweep::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 22%;
    background: linear-gradient(105deg, transparent, rgba(156,123,255,.16), transparent); transform: skewX(-14deg);
    animation: autoSweep 2.6s var(--ease) .35s both; }
@keyframes autoSweep { 0% { left: -30%; } 100% { left: 130%; } }

/* Плавающие световые точки (tech-частицы) */
.autohero__dots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.autohero__dots i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(125,92,255,.75); box-shadow: 0 0 9px rgba(125,92,255,.85); animation: autoFloat 7s ease-in-out infinite; }
.autohero__dots i:nth-child(1) { left: 60%; top: 30%; animation-delay: 0s; }
.autohero__dots i:nth-child(2) { left: 74%; top: 52%; animation-delay: 1.2s; background: rgba(125,92,255,.75); box-shadow: 0 0 9px rgba(125,92,255,.85); }
.autohero__dots i:nth-child(3) { left: 84%; top: 38%; animation-delay: 2.1s; }
.autohero__dots i:nth-child(4) { left: 55%; top: 66%; animation-delay: .7s; }
.autohero__dots i:nth-child(5) { left: 90%; top: 60%; animation-delay: 1.7s; background: rgba(255,122,26,.8); box-shadow: 0 0 9px rgba(255,122,26,.9); }
.autohero__dots i:nth-child(6) { left: 67%; top: 74%; animation-delay: 2.6s; }
@keyframes autoFloat { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-16px); opacity: 1; } }

/* Контент */
.autohero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); background: rgba(125,92,255,.16); border: 1px solid rgba(125,92,255,.34); padding: 9px 16px; border-radius: 100px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.autohero__live { width: 8px; height: 8px; border-radius: 50%; background: #FF7A1A; animation: autoPulse 2s infinite; }
@keyframes autoPulse { 0% { box-shadow: 0 0 0 0 rgba(255,122,26,.55); } 70% { box-shadow: 0 0 0 10px rgba(255,122,26,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,26,0); } }
.autohero .autohero__title { font-family: var(--display); font-weight: 700; font-size: clamp(36px,4.6vw,62px); line-height: 1.05; letter-spacing: -.01em; color: #fff; margin: 20px 0 0; text-transform: uppercase; }
.autohero__brand { background: linear-gradient(90deg, #B9A3FF, #7D5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.autohero .autohero__sub { color: #fff; font-size: clamp(18px,2.2vw,25px); font-weight: 600; line-height: 1.32; margin: 20px 0 0; max-width: 34ch; }
.autohero .autohero__text { color: rgba(255,255,255,.74); font-size: clamp(15px,1.7vw,18px); line-height: 1.6; margin: 16px 0 0; max-width: 52ch; }
.autohero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.autohero__cta-blue { background: linear-gradient(135deg, #9C7BFF, #7D5CFF); color: #fff; box-shadow: 0 16px 40px -12px rgba(125,92,255,.55); }
.autohero__cta-blue:hover { transform: translateY(-3px); box-shadow: 0 22px 54px -12px rgba(125,92,255,.72); }
.autohero__cta-glass { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.34); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.autohero__cta-glass:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }

.autohero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none; }
.autohero__scroll span { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 12px; position: relative; }
.autohero__scroll span::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; background: #fff; border-radius: 3px; transform: translateX(-50%); animation: scrolldot 1.8s var(--ease) infinite; }

@media (max-width: 720px) {
    .autohero { min-height: 90vh; padding: 118px 0 74px; }
    .autohero__grade { background: linear-gradient(0deg, rgba(5,7,13,.96), rgba(5,7,13,.42) 62%), linear-gradient(90deg, rgba(7,10,18,.86), rgba(7,10,18,.5)); }
    .autohero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .autohero__glow, .autohero__sweep::before, .autohero__dots i, .autohero__live { animation: none; }
}

/* =========================================================
   3D-ПРЕЗЕНТАЦИЯ МЕХАНИЗМА · scroll-scrub (стиль Apple)
   Камера приближается к приводу, детали подсвечиваются и всплывают
   из глубины. Эффект 3D — на HTML/CSS/JS (без WebGL/Three.js).
   ========================================================= */
.mech3d { position: relative; height: 300vh; background: #06070c; }
.mech3d__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1200px; }
.mech3d__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.mech3d__aura { position: absolute; width: 78vmin; height: 78vmin; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(125,92,255,.30), transparent 62%); filter: blur(70px); }

.mech3d__head { position: absolute; top: 12%; left: 0; right: 0; z-index: 5; text-align: center; padding: 0 20px; will-change: transform, opacity; }
.mech3d__eyebrow { display: inline-block; color: var(--purple-light); font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.mech3d__title { font-family: var(--display); font-weight: 700; font-size: clamp(30px,5vw,60px); letter-spacing: -.02em; color: #fff; margin: 12px 0 0; }
.mech3d__sub { color: rgba(255,255,255,.6); margin-top: 10px; font-size: 15px; }

.mech3d__object { position: relative; width: min(78vw, 900px); aspect-ratio: 3/2; border-radius: 26px; overflow: hidden;
    box-shadow: 0 70px 150px -40px rgba(0,0,0,.85); will-change: transform; }
.mech3d__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mech3d__spot { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; opacity: 0;
    border: 2px solid var(--purple-light); box-shadow: 0 0 0 4px rgba(125,92,255,.22), 0 0 18px rgba(125,92,255,.9); transition: opacity .4s var(--ease); }

.mech3d__card { position: absolute; z-index: 6; width: 232px; padding: 16px 18px; border-radius: 18px; opacity: 0;
    background: rgba(17,15,28,.66); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(125,92,255,.34); box-shadow: 0 26px 64px -22px rgba(0,0,0,.7); will-change: transform, opacity; }
.mech3d__card b { display: block; color: #fff; font-size: 15px; font-weight: 700; }
.mech3d__card i { display: block; color: rgba(255,255,255,.66); font-size: 12.5px; font-style: normal; line-height: 1.45; margin-top: 5px; }
.mech3d__card-dot { position: absolute; top: 18px; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px rgba(125,92,255,.22), 0 0 14px rgba(125,92,255,.8); }
.mech3d__card--1 { left: 5%;  top: 26%; }
.mech3d__card--2 { right: 5%; top: 22%; }
.mech3d__card--3 { left: 5%;  bottom: 18%; }
.mech3d__card--4 { right: 5%; bottom: 15%; }
.mech3d__card--2 .mech3d__card-dot, .mech3d__card--4 .mech3d__card-dot { left: auto; right: -7px; }

/* Мобайл — без pin/scrub, обычная колонка (всё видно) */
@media (max-width: 860px) {
    .mech3d { height: auto; }
    .mech3d__pin { position: static; height: auto; overflow: visible; padding: 78px 0 86px; }
    .mech3d__stage { position: static; flex-direction: column; align-items: stretch; gap: 16px; padding: 0 20px; }
    .mech3d__aura { display: none; }
    .mech3d__head { position: static; margin-bottom: 6px; }
    .mech3d__object { width: 100%; margin: 0 auto; }
    .mech3d__spot { display: none; }
    .mech3d__card { position: static; width: auto; opacity: 1; transform: none; }
    .mech3d__card-dot { display: none; }
    .mech3d__card--2 .mech3d__card-dot, .mech3d__card--4 .mech3d__card-dot { right: auto; }
}

/* =========================================================
   СТРАНИЦА ОТКАТНЫХ · жёлтый акцент #FBB800
   ========================================================= */
:root { --yellow: #FBB800; --yellow-ink: #17130a; }

/* Блок 1 · Варианты исполнения — 6 карточек */
.otv-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 620px) { .otv-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .otv-grid { grid-template-columns: repeat(3, 1fr); } }
.otv-card { position: relative; background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow: 0 18px 44px -26px rgba(20,20,40,.20); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.otv-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); z-index: 2; }
.otv-card:hover { transform: translateY(-8px); box-shadow: 0 42px 86px -30px rgba(20,20,40,.32); }
.otv-card:hover::after { transform: scaleX(1); }
.otv-card__media { height: clamp(190px,22vw,238px); overflow: hidden; background: #f1f1f5; }
.otv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.otv-card:hover .otv-card__media img { transform: scale(1.07); }
.otv-card__body { padding: 20px 22px 22px; }
.otv-card__title { font-family: var(--font); font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.otv-card__text { color: var(--muted); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.otv-card__more { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--ink); transition: color .25s var(--ease); }
.otv-card__more .icon { transition: transform .25s var(--ease); }
.otv-card:hover .otv-card__more { color: #a97b00; }
.otv-card:hover .otv-card__more .icon { transform: translateX(4px); }

/* Блок 2 · Выберите стиль — плитки 3×2, желтеют на hover */
.ost-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 620px) { .ost-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ost-grid { grid-template-columns: repeat(3, 1fr); } }
.ost-tile { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; text-align: left; width: 100%;
    min-height: 138px; padding: 26px 28px; border-radius: 20px; cursor: pointer; background: #fff; border: 1px solid var(--line);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
/* Фото стиля — появляется на hover */
.ost-tile__photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.ost-tile__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,16,.28), rgba(10,10,16,.72)); }
.ost-tile__num, .ost-tile__name, .ost-tile__arr { position: relative; z-index: 1; }
.ost-tile__num { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--muted); opacity: .55; transition: color .3s var(--ease); }
.ost-tile__name { flex: 1; font-family: var(--font); font-weight: 800; font-size: clamp(18px,2vw,22px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); transition: color .3s var(--ease); }
.ost-tile__arr { color: var(--muted); transition: color .3s var(--ease), transform .3s var(--ease); }
.ost-tile__arr .icon { width: 22px; height: 22px; }
.ost-tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.ost-tile:hover { border-color: var(--yellow); transform: translateY(-6px); box-shadow: 0 34px 66px -26px rgba(20,20,40,.42); }
.ost-tile:hover .ost-tile__photo { opacity: 1; transform: scale(1); }
.ost-tile:hover::after { transform: scaleX(1); }
.ost-tile:hover .ost-tile__num { color: rgba(255,255,255,.72); opacity: 1; }
.ost-tile:hover .ost-tile__name, .ost-tile:hover .ost-tile__arr { color: #fff; }
.ost-tile:hover .ost-tile__arr { transform: translateX(5px); }

/* Блок 5 · Готовые решения — каталог как у авто */
.otr-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .otr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .otr-grid { grid-template-columns: repeat(3, 1fr); } }
.otr-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
    box-shadow: 0 18px 44px -28px rgba(20,20,40,.16); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.otr-card:hover { transform: translateY(-8px); box-shadow: 0 44px 92px -32px rgba(20,20,40,.30); }
.otr-card.is-hl { border-color: var(--yellow); box-shadow: 0 26px 62px -26px rgba(251,184,0,.5); }
.otr-card__badge { position: absolute; z-index: 2; top: 14px; left: 14px; background: var(--yellow); color: var(--yellow-ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; box-shadow: 0 8px 20px -6px rgba(251,184,0,.7); }
.otr-card__media { height: clamp(180px,20vw,220px); background: #f1f1f5; overflow: hidden; }
.otr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.otr-card:hover .otr-card__media img { transform: scale(1.06); }
.otr-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.otr-card__title { font-family: var(--font); font-weight: 800; font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.otr-card__sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.otr-card__incl { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.otr-card__incl li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.otr-card__incl .icon { color: #C8930A; flex: none; }
.otr-card__price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 16px; font-family: var(--display); font-weight: 700; font-size: 25px; color: var(--ink); }
.otr-card__price small { font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--muted); }
.otr-card__btn { margin-top: auto; }
.otr-cta { text-align: center; margin-top: clamp(30px,4vw,50px); }

/* Блок 6 · Галерея «как в жизни» — masonry + hover (zoom, градиент, лупа) */
.otl-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .otl-masonry { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .otl-masonry { grid-template-columns: 1fr; } }
.otl-item { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
    aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 42px -26px rgba(20,20,40,.28); }
.otl-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease); }
.otl-item__scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
    background: linear-gradient(180deg, rgba(10,10,16,0) 38%, rgba(10,10,16,.6)); }
.otl-item__loupe { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; pointer-events: none;
    display: flex; align-items: center; justify-content: center; background: rgba(251,184,0,.94); color: var(--yellow-ink);
    opacity: 0; transform: scale(.8); transition: opacity .35s var(--ease), transform .35s var(--ease); box-shadow: 0 12px 32px -8px rgba(0,0,0,.5); }
.otl-item__loupe .icon { width: 24px; height: 24px; }
.otl-item:hover img { transform: scale(1.06); }
.otl-item:hover .otl-item__scrim { opacity: 1; }
.otl-item:hover .otl-item__loupe { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .otl-item:hover img { transform: none; } }

/* Блок 7 · Почему каркасы служат десятилетиями — тёмный, фон-металл */
.ofa { position: relative; overflow: hidden; background: #14151a; color: #fff; }
.ofa__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
        linear-gradient(120deg, #1d1f26, #101116 58%, #191b22); }
.ofa__bg::after { content: ''; position: absolute; inset: 0;
    background: radial-gradient(58% 80% at 18% 0%, rgba(255,255,255,.06), transparent 60%); }
.ofa > .container { position: relative; z-index: 1; }
.ofa__grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 900px) { .ofa__grid { grid-template-columns: 1.05fr 1fr; gap: 52px; } }
.ofa__media { border-radius: 22px; overflow: hidden; box-shadow: 0 50px 110px -40px rgba(0,0,0,.8); }
.ofa__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.ofa__title { font-family: var(--display); font-weight: 700; font-size: clamp(28px,3.6vw,46px); line-height: 1.06; letter-spacing: -.02em; color: #fff; }
.ofa__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.ofa__list li { display: flex; align-items: center; gap: 14px; font-size: clamp(16px,1.5vw,18px); font-weight: 600; color: rgba(255,255,255,.92); }
.ofa__check { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(251,184,0,.16); color: var(--yellow); }
.ofa__check .icon { width: 17px; height: 17px; }
.ofa__life { display: flex; align-items: center; gap: 18px; margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.ofa__life-num { font-family: var(--display); font-weight: 700; font-size: clamp(64px,9vw,120px); line-height: .9; letter-spacing: -.03em; color: var(--yellow); }
.ofa__life-num em { font-style: normal; font-size: .5em; vertical-align: super; }
.ofa__life-cap { font-size: 13px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .07em; line-height: 1.35; }
.ofa__life-cap b { display: block; margin-top: 2px; color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 16px; }

/* Блок 8 · Стоимость каркасов — S/M/L карточки, hover жёлтым */
.ofp-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 720px) { .ofp-grid { grid-template-columns: repeat(3, 1fr); } }
.ofp-card { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 32px; border-radius: 24px;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 44px -28px rgba(20,20,40,.16);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.ofp-card__size { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1; color: var(--ink); }
.ofp-card__w { font-size: 16px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.ofp-card__p { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--ink); margin-top: 14px; }
.ofp-card .btn { margin-top: 22px; align-self: stretch; }
.ofp-card:hover { transform: translateY(-8px); background: var(--yellow); border-color: var(--yellow); box-shadow: 0 30px 66px -26px rgba(251,184,0,.6); }
.ofp-card:hover .ofp-card__size, .ofp-card:hover .ofp-card__w, .ofp-card:hover .ofp-card__p { color: var(--yellow-ink); }
.ofp-card:hover .btn--outline { border-color: rgba(23,19,10,.42); color: var(--yellow-ink); }

/* Блок 9 · Из чего складывается стоимость — timeline с жёлтой линией */
.obd-flow { position: relative; display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 860px) { .obd-flow { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
.obd-flow::before { content: ''; position: absolute; z-index: 0; background: var(--yellow); border-radius: 3px; }
@media (min-width: 860px) { .obd-flow::before { top: 21px; left: 10%; right: 10%; height: 3px; } }
@media (max-width: 859px) { .obd-flow::before { left: 21px; top: 12px; bottom: 12px; width: 3px; } }
.obd-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
@media (max-width: 859px) { .obd-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; } }
.obd-step__dot { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 18px; background: #fff; border: 3px solid var(--yellow); color: var(--ink); box-shadow: 0 8px 22px -8px rgba(251,184,0,.6); }
.obd-step__body { display: flex; flex-direction: column; }
.obd-step__name { font-family: var(--font); font-weight: 800; font-size: 16px; color: var(--ink); margin-top: 14px; }
.obd-step__desc { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 22ch; }
.obd-step.is-total .obd-step__dot { background: var(--yellow); color: var(--yellow-ink); }
.obd-step.is-total .obd-step__name { color: #a97b00; }
@media (max-width: 859px) { .obd-step__name { margin-top: 4px; } .obd-step__desc { max-width: none; } }

/* =========================================================
   ВЫБОР СЕРИИ · split-screen (Trend / Prestige) — 50/50 → hover 70/30
   Две большие продуктовые зоны, фиолетовое свечение только на hover.
   ========================================================= */
.split-series { overflow: hidden; }
/* Ограничиваем ширину (в .container), чтобы фото не растягивалось выше своего разрешения (940px) → резче */
.split { display: flex; width: 100%; height: clamp(440px, 54vh, 580px); margin-top: clamp(24px,3vw,40px);
    border-radius: clamp(18px,2vw,26px); overflow: hidden; box-shadow: 0 44px 110px -50px rgba(20,20,40,.42); }
.split-zone { position: relative; flex-grow: 1; flex-basis: 0; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px,4vw,54px);
    text-decoration: none; color: #fff; transition: flex-grow .65s var(--ease); }
.split-zone + .split-zone { box-shadow: -1px 0 0 0 rgba(255,255,255,.6); }
.split-zone__photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: contrast(1.05) saturate(1.05); transition: transform .7s var(--ease); }
.split-zone__scrim { position: absolute; inset: 0; z-index: 1; transition: background .5s var(--ease);
    background: linear-gradient(180deg, rgba(10,10,16,.12) 0%, rgba(10,10,16,.28) 42%, rgba(10,10,16,.82) 100%); }
.split-zone__glow { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .55s var(--ease);
    background: radial-gradient(75% 55% at 50% 100%, rgba(125,92,255,.30), transparent 72%); box-shadow: inset 0 -3px 0 0 var(--purple); }
.split-zone__badge { position: absolute; z-index: 3; top: clamp(24px,3vw,40px); left: clamp(28px,4vw,54px);
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--purple);
    background: rgba(255,255,255,.94); padding: 7px 14px; border-radius: 100px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); }
.split-zone__body { position: relative; z-index: 3; }
.split-zone__title { font-family: var(--display); font-weight: 700; font-size: clamp(34px,5vw,64px); letter-spacing: .01em; line-height: 1; color: #fff; }
.split-zone__points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; max-width: 36ch; }
.split-zone__points li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.92); }
.split-zone__points .icon { color: var(--purple-light); flex: none; }
.split-zone__price { margin-top: 18px; font-family: var(--display); font-weight: 700; font-size: clamp(20px,2.3vw,28px); color: #fff; }
.split-zone__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 24px; border-radius: 100px;
    background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.42); color: #fff; font-weight: 700; font-size: 15px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.split-zone__btn .icon { transition: transform .3s var(--ease); }

/* Hover: расширение 70/30 + зум + свечение + кнопка */
.split:hover .split-zone { flex-grow: 3; }
.split:hover .split-zone:hover { flex-grow: 7; }
.split-zone:hover .split-zone__photo { transform: scale(1.05); }
.split-zone:hover .split-zone__scrim { background: linear-gradient(180deg, rgba(10,10,16,.10) 0%, rgba(10,10,16,.24) 42%, rgba(10,10,16,.8) 100%); }
.split-zone:hover .split-zone__glow { opacity: 1; }
.split-zone:hover .split-zone__btn { background: var(--purple); border-color: var(--purple); transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(125,92,255,.65); }
.split-zone:hover .split-zone__btn .icon { transform: translateX(4px); }

@media (max-width: 760px) {
    .split { flex-direction: column; height: auto; }
    .split-zone { flex: none; min-height: 440px; transition: none; }
    .split-zone + .split-zone { box-shadow: 0 -1px 0 0 rgba(255,255,255,.6); }
    .split:hover .split-zone, .split:hover .split-zone:hover { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
    .split-zone, .split-zone__photo { transition: none; }
    .split:hover .split-zone, .split:hover .split-zone:hover { flex-grow: 1; }
}

/* =========================================================
   ГАЛЕРЕЯ «Наши работы» · карусель (видно 3, листается стрелкой)
   ========================================================= */
.wgal { position: relative; }
.wgal__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px 14px; }
.wgal__track::-webkit-scrollbar { display: none; }
.wgal__item { position: relative; flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start;
    aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; padding: 0; border: 0; background: none; cursor: pointer;
    box-shadow: 0 18px 42px -26px rgba(20,20,40,.28); }
@media (max-width: 900px) { .wgal__item { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .wgal__item { flex-basis: 86%; } }
.wgal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.wgal__item:hover img { transform: scale(1.06); }
.wgal__loupe { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; pointer-events: none;
    display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: var(--ink);
    opacity: 0; transform: scale(.85); transition: opacity .3s var(--ease), transform .3s var(--ease); box-shadow: 0 10px 28px -8px rgba(0,0,0,.4); }
.wgal__loupe .icon { width: 22px; height: 22px; }
.wgal__item:hover .wgal__loupe { opacity: 1; transform: scale(1); }
/* Стрелки */
.wgal__nav { position: absolute; top: 40%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(20,20,40,.1);
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 34px -14px rgba(20,20,40,.4);
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease); }
.wgal__nav .icon { width: 20px; height: 20px; }
.wgal__nav:hover { background: var(--ink); color: #fff; }
.wgal__nav--prev { left: -10px; }
.wgal__nav--prev .icon { transform: rotate(180deg); }
.wgal__nav--next { right: -10px; }
.wgal__nav--prev:hover, .wgal__nav--next:hover { transform: scale(1.06); }
.wgal__nav.is-off { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .wgal__nav { display: none; } }

/* =========================================================
   Карусель карточек «Готовые решения» — видно 3, стрелки листают
   ========================================================= */
.ocar { position: relative; margin-top: clamp(28px, 3.6vw, 46px); }
.ocar__track {
    display: flex; gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 14px 4px 30px;           /* запас сверху/снизу под hover-подъём карточки и тень */
}
.ocar__track::-webkit-scrollbar { display: none; }
.ocar__item {
    flex: 0 0 calc((100% - 48px) / 3);  /* ровно 3 в видимой области (2 промежутка по 24px) */
    scroll-snap-align: start;
}
@media (max-width: 860px) { .ocar__item { flex-basis: calc((100% - 24px) / 2); } }  /* планшет — 2 */
@media (max-width: 560px) { .ocar__item { flex-basis: 84%; } }                        /* телефон — ~1 с намёком */

/* стрелки (светлые, стеклянные; на hover — фиолетовые) */
.ocar__nav {
    position: absolute; top: 38%; z-index: 3;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(20,20,40,.1);
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 34px -14px rgba(20,20,40,.4);
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease);
}
.ocar__nav .icon { width: 20px; height: 20px; }
.ocar__nav:hover { background: var(--purple); color: #fff; border-color: var(--purple); transform: scale(1.06); }
.ocar__nav--prev { left: -28px; }
.ocar__nav--prev .icon { transform: rotate(180deg); }
.ocar__nav--next { right: -28px; }
.ocar__nav.is-off { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .ocar__nav { display: none; } }
/* Откатные ворота — жёлтый акцент вместо фиолетового */
.ot-ready .ocar__nav:hover { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }

/* =========================================================
   Премиальный блок преимуществ (padv) — большое фото по центру,
   интерактивные стеклянные карточки по бокам + линия к воротам
   ========================================================= */
.padv { background: linear-gradient(180deg, #F4F3FC 0%, #FFFFFF 62%); }
.padv__stage {
    display: grid; grid-template-columns: 1fr; gap: 18px;
    align-items: center; margin-top: clamp(28px, 3.6vw, 50px);
}
@media (min-width: 960px) {
    .padv__stage { grid-template-columns: minmax(0,1fr) minmax(0,1.28fr) minmax(0,1fr); gap: clamp(16px, 2.4vw, 42px); }
}
/* центральное фото */
.padv__media { position: relative; order: -1; }
@media (min-width: 960px) { .padv__media { order: 0; } }
.padv__media img {
    position: relative; z-index: 1; width: 100%; display: block;
    border-radius: 22px; box-shadow: 0 44px 84px -42px rgba(20,20,44,.5);
}
.padv__halo {
    position: absolute; inset: -10% -8%; z-index: 0; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 42%, rgba(125,92,255,.30), transparent 66%);
    filter: blur(12px);
}
/* колонки */
.padv__col { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
/* карточка-преимущество (стекло) */
.padv__adv {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 15px 18px; border-radius: 16px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(125,92,255,.14);
    box-shadow: 0 18px 40px -28px rgba(20,20,44,.35);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    cursor: default; outline: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.padv__ico {
    flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(125,92,255,.10); color: var(--purple);
    transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.padv__ico .icon { width: 22px; height: 22px; }
.padv__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.padv__t { font-family: var(--display); font-weight: 600; font-style: normal; font-size: 16px; line-height: 1.2; color: var(--ink); }
.padv__d {
    font-style: normal; color: var(--muted); font-size: 13.5px; line-height: 1.5;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .45s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease);
}
/* левая колонка — зеркалим: иконка ближе к фото (справа), текст справа */
@media (min-width: 960px) {
    .padv__col--left .padv__adv { flex-direction: row-reverse; text-align: right; }
    .padv__col--left .padv__body { align-items: flex-end; }
}
/* hover / focus — карточка «проявляется», мягкое свечение */
.padv__adv:hover, .padv__adv:focus-visible {
    transform: translateY(-2px);
    background: rgba(255,255,255,.96);
    border-color: var(--purple);
    box-shadow: 0 0 0 1px rgba(125,92,255,.5), 0 26px 54px -26px rgba(125,92,255,.55);
}
.padv__adv:hover .padv__ico, .padv__adv:focus-visible .padv__ico { background: var(--purple); color: #fff; transform: scale(1.06); }
.padv__adv:hover .padv__d, .padv__adv:focus-visible .padv__d { max-height: 90px; opacity: 1; margin-top: 4px; }
/* линия-коннектор к воротам + пульсирующий узел (только десктоп) */
.padv__link { display: none; }
@media (min-width: 960px) {
    .padv__link {
        display: block; position: absolute; top: 50%; z-index: 2;
        width: clamp(16px, 2.4vw, 42px); height: 2px;
        transform: translateY(-50%) scaleX(.35);
        opacity: 0; transition: opacity .4s var(--ease), transform .55s var(--ease);
    }
    .padv__col--left .padv__link { right: calc(-1 * clamp(16px,2.4vw,42px)); transform-origin: left;
        background: linear-gradient(90deg, var(--purple), rgba(125,92,255,0)); }
    .padv__col--right .padv__link { left: calc(-1 * clamp(16px,2.4vw,42px)); transform-origin: right;
        background: linear-gradient(270deg, var(--purple), rgba(125,92,255,0)); }
    .padv__node { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--purple); transform: translateY(-50%); }
    .padv__col--left .padv__node { right: -4px; }
    .padv__col--right .padv__node { left: -4px; }
    .padv__adv:hover .padv__link, .padv__adv:focus-visible .padv__link { opacity: 1; transform: translateY(-50%) scaleX(1); }
    .padv__adv:hover .padv__node, .padv__adv:focus-visible .padv__node { animation: padvPulse 1.6s var(--ease) infinite; }
}
@keyframes padvPulse {
    0%   { box-shadow: 0 0 0 0 rgba(125,92,255,.5); }
    70%  { box-shadow: 0 0 0 11px rgba(125,92,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(125,92,255,0); }
}
/* мобильные: описания всегда видны, линий нет */
@media (max-width: 959px) {
    .padv__d { max-height: none; opacity: 1; margin-top: 4px; }
    .padv__col { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .padv__node { animation: none !important; } }

/* =========================================================
   Тёмный tech-блок «Умная автоматика» (smart)
   ========================================================= */
.smart { position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(160deg, #191823 0%, #100F18 100%); }
.smart__glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(72px); }
.smart__glow--1 { width: 440px; height: 440px; top: -150px; left: -70px; background: rgba(125,92,255,.30); }
.smart__glow--2 { width: 400px; height: 400px; bottom: -150px; right: -50px; background: rgba(94,110,255,.22); }
.smart .container { position: relative; z-index: 1; }
.smart .section-title { color: #fff; }
.smart .section-sub { color: rgba(255,255,255,.66); }
.smart__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #CBBBFF; background: rgba(125,92,255,.16); padding: 7px 14px; border-radius: 100px;
}
.smart__eyebrow .icon { width: 15px; height: 15px; }
.smart__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(30px, 4vw, 50px); }
@media (min-width: 640px) { .smart__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .smart__grid { grid-template-columns: repeat(4, 1fr); } }
.smart__card {
    padding: 26px 24px; border-radius: 20px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.smart__card:hover {
    transform: translateY(-6px);
    background: rgba(125,92,255,.12); border-color: rgba(125,92,255,.55);
    box-shadow: 0 30px 62px -30px rgba(125,92,255,.6);
}
.smart__ico {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
    background: rgba(125,92,255,.18); color: #CBBBFF; margin-bottom: 16px;
    transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.smart__ico .icon { width: 26px; height: 26px; }
.smart__card:hover .smart__ico { background: var(--purple); color: #fff; transform: scale(1.06); }
.smart__t { font-family: var(--display); font-weight: 600; font-size: 18px; color: #fff; margin-bottom: 8px; }
.smart__d { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.55; }
.smart__cta { text-align: center; margin-top: clamp(30px,3.8vw,46px); }
.smart__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: 100px; font-family: var(--display); font-weight: 600; font-size: 15.5px; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 16px 38px -14px rgba(125,92,255,.7); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.smart__btn:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -14px rgba(125,92,255,.85); }
.smart__btn .icon { width: 18px; height: 18px; }

/* =========================================================
   Галерея материалов (matg) — крупные превью текстур + палитра RAL
   ========================================================= */
.matg__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(28px, 3.6vw, 48px); }
@media (min-width: 640px)  { .matg__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .matg__grid { grid-template-columns: repeat(3, 1fr); } }
.matg__tile {
    position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden;
    background: #ececf2; box-shadow: 0 24px 52px -30px rgba(20,20,40,.42);
    outline: none; cursor: pointer;
}
.matg__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.matg__tile:hover img, .matg__tile:focus-visible img { transform: scale(1.08); }
.matg__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,14,22,0) 38%, rgba(15,14,22,.78)); }
.matg__label { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; }
.matg__name { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.2; }
.matg__note { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 3px; }
.matg__tile::after {
    content: ''; position: absolute; left: 0; bottom: 0; z-index: 3; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--purple), var(--purple-light));
    transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.matg__tile:hover::after, .matg__tile:focus-visible::after { transform: scaleX(1); }
/* плитка палитры RAL */
.matg__ral { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.matg__ral i { background: var(--c); transition: transform .4s var(--ease); }
.matg__tile--ral:hover .matg__ral i { transform: scale(1.04); }

/* =========================================================
   Тёмный high-tech вариант блока преимуществ (.padv--dark)
   — графитовый фон, монохромные иконки, светящиеся линии-точки
   ========================================================= */
.padv--dark {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(55% 72% at 12% 0%, rgba(125,92,255,.20), transparent 60%),
        radial-gradient(52% 66% at 90% 100%, rgba(94,110,255,.16), transparent 62%),
        linear-gradient(160deg, #191823 0%, #0F0E17 100%);
}
.padv--dark .section-title { color: #fff; }
.padv--dark .section-sub { color: rgba(255,255,255,.68); }
.padv--dark .padv__adv {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
    box-shadow: 0 20px 46px -30px rgba(0,0,0,.6);
}
.padv--dark .padv__adv:hover, .padv--dark .padv__adv:focus-visible {
    background: rgba(125,92,255,.14); border-color: rgba(125,92,255,.6);
    box-shadow: 0 0 0 1px rgba(125,92,255,.5), 0 26px 56px -26px rgba(125,92,255,.6);
}
.padv--dark .padv__ico { background: rgba(255,255,255,.08); color: #fff; }
.padv--dark .padv__adv:hover .padv__ico,
.padv--dark .padv__adv:focus-visible .padv__ico { background: rgba(255,255,255,.16); color: #fff; }
.padv--dark .padv__t { color: #fff; }
.padv--dark .padv__d { color: rgba(255,255,255,.6); }
.padv--dark .padv__media img { box-shadow: 0 46px 92px -40px rgba(0,0,0,.72); }
.padv--dark .padv__halo { background: radial-gradient(50% 50% at 50% 45%, rgba(125,92,255,.42), transparent 66%); }
@media (min-width: 960px) {
    .padv--dark .padv__node { box-shadow: 0 0 10px 1px rgba(125,92,255,.85); }
}

/* =========================================================
   Конфигуратор комплектов SGN (sgncfg) — подбор по весу ворот
   ========================================================= */
.sgncfg__box { max-width: 1040px; margin: clamp(28px,3.6vw,46px) auto 0; }
.sgncfg__switch { display: flex; width: max-content; max-width: 100%; margin-inline: auto; gap: 4px; padding: 5px; border-radius: 100px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.sgncfg__seg { border: 0; background: none; cursor: pointer; padding: 11px 22px; border-radius: 100px; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--muted); transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); white-space: nowrap; }
.sgncfg__seg.is-active { background: var(--purple); color: #fff; box-shadow: 0 8px 20px -6px rgba(125,92,255,.5); }
/* шкала веса */
.sgncfg__scale { position: relative; display: flex; justify-content: space-between; max-width: 660px; margin: clamp(30px,4vw,50px) auto; }
.sgncfg__track { position: absolute; top: 10px; left: 7%; right: 7%; height: 2px; background: var(--line); z-index: 0; }
.sgncfg__pt { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; }
.sgncfg__dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.sgncfg__kg { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--muted); transition: color .3s var(--ease); }
.sgncfg__pt.is-active .sgncfg__dot { border-color: var(--purple); background: var(--purple); box-shadow: 0 0 0 6px rgba(125,92,255,.16); transform: scale(1.12); }
.sgncfg__pt.is-active .sgncfg__kg { color: var(--purple); }
.sgncfg__pt.is-dim { opacity: .32; pointer-events: none; }
/* тело: визуал + панель */
.sgncfg__body { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px,3vw,36px); box-shadow: 0 34px 66px -42px rgba(20,20,40,.32); }
@media (min-width: 820px) { .sgncfg__body { grid-template-columns: 1fr 1fr; gap: 44px; } }
.sgncfg__visual { position: relative; border-radius: 18px; overflow: hidden; background: #f4f5fa; aspect-ratio: 4/3; }
.sgncfg__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(52% 52% at 50% 45%, rgba(125,92,255,.16), transparent 66%); }
.sgncfg__scheme { width: 100%; height: 100%; object-fit: contain; padding: 18px; background: #fff; }
.sgncfg__scheme.is-zoom { animation: sgnZoom .6s var(--ease); }
@keyframes sgnZoom { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
.sgncfg__panel { position: relative; }
.sgncfg__kit { display: none; }
.sgncfg__kit.is-active { display: block; animation: sgnFade .45s var(--ease); }
@keyframes sgnFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sgncfg__name { font-family: var(--display); font-weight: 600; font-size: clamp(22px,2.6vw,28px); color: var(--ink); margin-bottom: 16px; }
.sgncfg__specs { display: grid; margin-bottom: 20px; }
.sgncfg__specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.sgncfg__specs > div:last-child { border-bottom: 1px solid var(--line); }
.sgncfg__specs span { color: var(--muted); font-size: 14px; }
.sgncfg__specs b { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); text-align: right; }
.sgncfg__price { font-family: var(--display); font-weight: 700; font-size: clamp(28px,3.4vw,38px); color: var(--purple); line-height: 1; }
.sgncfg__price small { display: block; font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 6px; }
.sgncfg__btn { margin-top: 22px; }
/* лента аксессуаров */
.sgncfg__acc { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.sgncfg__acc-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 10px 20px; box-shadow: var(--shadow-sm); font-size: 14px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.sgncfg__acc-item:hover { transform: translateY(-2px); border-color: var(--purple-100); }
.sgncfg__acc-item b { font-family: var(--display); font-weight: 700; color: var(--purple); white-space: nowrap; }
/* финальный CTA */
.sgncfg__final { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; max-width: 1040px; margin: clamp(28px,3.6vw,42px) auto 0; padding: clamp(22px,3vw,32px); border-radius: 20px; background: linear-gradient(120deg, #F2F0FD, #FCFBFF); border: 1px solid rgba(125,92,255,.16); }
.sgncfg__final-txt b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(17px,2vw,20px); color: var(--ink); margin-bottom: 4px; }
.sgncfg__final-txt span { color: var(--muted); }

/* =========================================================
   Тёмный конфигуратор приводов (drvcfg) — ROTEO / Levigato / …
   ========================================================= */
.drvcfg { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, #2C2A3A 0%, #1C1A2A 100%) !important; }
.drvcfg__bg { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(82px); }
.drvcfg__bg--1 { width: 480px; height: 480px; top: -160px; left: -80px; background: rgba(125,92,255,.26); }
.drvcfg__bg--2 { width: 420px; height: 420px; bottom: -160px; right: -60px; background: rgba(94,110,255,.18); }
.drvcfg .container { position: relative; z-index: 1; }
.drvcfg .section-title { color: #fff; }
.drvcfg .section-sub { color: rgba(255,255,255,.66); max-width: 760px; margin-inline: auto; }
.drvcfg__box { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: clamp(28px,3.6vw,48px); align-items: center; }
@media (min-width: 880px) { .drvcfg__box { grid-template-columns: 1.05fr 1fr; gap: clamp(30px,4vw,60px); } }
.drvcfg__stage {
    position: relative; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(60% 60% at 50% 42%, rgba(125,92,255,.16), transparent 62%), linear-gradient(160deg, #211F2C, #131220);
    border: 1px solid rgba(255,255,255,.06);
}
.drvcfg__halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 46% at 50% 46%, rgba(125,92,255,.32), transparent 66%); }
.drvcfg__img { position: relative; z-index: 1; max-width: 82%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 30px 42px rgba(0,0,0,.62)); }
.drvcfg__img.is-swap { animation: drvSwap .6s var(--ease); }
.drvcfg__imglink { position: relative; z-index: 1; display: block; max-width: 82%; max-height: 82%; cursor: pointer; transition: transform .3s var(--ease); }
.drvcfg__imglink:hover { transform: scale(1.04); }
.drvcfg__imglink .drvcfg__img { max-width: 100%; max-height: 100%; }
@keyframes drvSwap { 0% { transform: rotate(-4deg) scale(.96); opacity: .4; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
/* Стрелки-навигация по моделям + счётчик */
.drvcfg__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.drvcfg__arrow:hover { background: rgba(125,92,255,.5); border-color: rgba(255,255,255,.4); }
.drvcfg__arrow .icon { width: 20px; height: 20px; }
.drvcfg__arrow--prev { left: 14px; }
.drvcfg__arrow--prev .icon { transform: rotate(180deg); }
.drvcfg__arrow--next { right: 14px; }
.drvcfg__arrow:active { transform: translateY(-50%) scale(.92); }
.drvcfg__hit { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font); font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #FF6A3D, #FF3D7F); padding: 5px 13px; border-radius: 100px; margin-bottom: 10px; box-shadow: 0 10px 22px -8px rgba(255,61,127,.55); }
.drvcfg__counter {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
    font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
    background: rgba(10,8,20,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 5px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 560px) { .drvcfg__arrow { width: 40px; height: 40px; } .drvcfg__arrow--prev { left: 8px; } .drvcfg__arrow--next { right: 8px; } }
.drvcfg__scale { position: relative; display: flex; justify-content: space-between; margin-top: 28px; }
.drvcfg__track { position: absolute; top: 10px; left: 6%; right: 6%; height: 2px; background: rgba(255,255,255,.14); z-index: 0; }
.drvcfg__pt { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; }
.drvcfg__dot { width: 20px; height: 20px; border-radius: 50%; background: #211F2C; border: 2px solid rgba(255,255,255,.28); transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.drvcfg__lbl { font-family: var(--display); font-weight: 600; font-size: 13px; color: rgba(255,255,255,.6); transition: color .3s var(--ease); white-space: nowrap; }
.drvcfg__pt.is-active .drvcfg__dot { background: var(--purple); border-color: var(--purple); box-shadow: 0 0 0 6px rgba(125,92,255,.22), 0 0 14px 2px rgba(125,92,255,.7); transform: scale(1.12); }
.drvcfg__pt.is-active .drvcfg__lbl { color: #fff; }
.drvcfg__panel { position: relative; }
.drvcfg__model { display: none; }
.drvcfg__model.is-active { display: block; animation: sgnFade .45s var(--ease); }
.drvcfg__tag { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 13px; color: #CBBBFF; background: rgba(125,92,255,.16); padding: 6px 14px; border-radius: 100px; margin-bottom: 14px; }
.drvcfg__name { font-family: var(--display); font-weight: 600; font-size: clamp(24px,3vw,32px); color: #fff; margin-bottom: 12px; }
.drvcfg__price { font-family: var(--display); font-weight: 700; font-size: clamp(30px,3.6vw,42px); color: #fff; margin-bottom: 18px; }
.drvcfg__desc { display: grid; gap: 10px; }
.drvcfg__desc li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.72); font-size: 14.5px; }
.drvcfg__desc li .icon { color: var(--purple-light); flex: none; margin-top: 1px; }
.drvcfg__cta { margin-top: 24px; }
.drvcfg__adv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(30px,4vw,52px); }
@media (min-width: 760px) { .drvcfg__adv { grid-template-columns: repeat(4, 1fr); } }
.drvcfg__adv-item { text-align: center; padding: 22px 16px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); }
.drvcfg__adv-item b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(22px,2.6vw,28px); color: #fff; }
.drvcfg__adv-item span { display: block; color: rgba(255,255,255,.6); font-size: 13.5px; margin-top: 6px; }

/* =========================================================
   Уличные ворота — премиальный первый экран с 3 зонами (uhero)
   ========================================================= */
.uhero { position: relative; min-height: clamp(600px, 92vh, 900px); padding: 0; display: flex; flex-direction: column; background: #0E0D15; color: #fff; overflow: hidden; }
.uhero::before, .uhero::after { display: none !important; }   /* убрать дефолтные пятна .page-hero */
.uhero__head { position: relative; z-index: 2; text-align: center; padding: clamp(92px,13vh,140px) 20px clamp(22px,4vh,38px); }
.uhero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CBBBFF; background: rgba(125,92,255,.16); padding: 8px 16px; border-radius: 100px; margin-bottom: 20px; }
.uhero__live { width: 8px; height: 8px; border-radius: 50%; background: var(--purple-light); box-shadow: 0 0 0 0 rgba(156,123,255,.6); animation: uPulse 2s var(--ease) infinite; }
@keyframes uPulse { 0% { box-shadow: 0 0 0 0 rgba(156,123,255,.6); } 70% { box-shadow: 0 0 0 9px rgba(156,123,255,0); } 100% { box-shadow: 0 0 0 0 rgba(156,123,255,0); } }
.uhero .uhero__title { font-family: var(--display); font-weight: 600; font-size: clamp(30px,5vw,60px); letter-spacing: -.02em; line-height: 1.05; color: #fff; }
.uhero .uhero__sub { color: rgba(255,255,255,.72); font-size: clamp(15px,2vw,19px); line-height: 1.5; margin: 14px auto 0; max-width: 640px; }
/* зоны */
.uhero__zones { flex: 1; display: flex; min-height: 0; }
.uhero__zone { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; border-left: 1px solid rgba(255,255,255,.07); transition: flex-grow .6s var(--ease); }
.uhero__zone:first-child { border-left: 0; }
.uhero__photo { position: absolute; inset: 0; background: var(--uimg) center/cover no-repeat; transform: scale(1.03); transition: transform .9s var(--ease); }
.uhero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,21,.12) 0%, rgba(14,13,21,.5) 55%, rgba(14,13,21,.92) 100%); }
.uhero__glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(64% 46% at 50% 100%, rgba(125,92,255,.45), transparent 72%); transition: opacity .5s var(--ease); }
.uhero__z-body { position: relative; z-index: 2; display: block; padding: clamp(24px,3.4vw,44px); }
.uhero__z-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.13); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); margin-bottom: 16px; transition: background .4s var(--ease); }
.uhero__z-ico .icon { width: 24px; height: 24px; color: #fff; }
.uhero__z-title { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(21px,2.5vw,30px); color: #fff; }
.uhero__z-desc { display: block; color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.5; margin-top: 10px; max-width: 360px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .45s var(--ease), margin-top .5s var(--ease); }
.uhero__z-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.uhero__z-link .icon { width: 18px; height: 18px; color: var(--purple-light); }
/* hover (десктоп): активная зона расширяется + свечение + описание */
@media (hover: hover) and (min-width: 860px) {
    .uhero__zones:hover .uhero__zone { flex-grow: .82; }
    .uhero__zone:hover { flex-grow: 1.7; }
}
.uhero__zone:hover .uhero__photo, .uhero__zone:focus-visible .uhero__photo { transform: scale(1.08); }
.uhero__zone:hover .uhero__glow, .uhero__zone:focus-visible .uhero__glow { opacity: 1; }
.uhero__zone:hover .uhero__z-ico, .uhero__zone:focus-visible .uhero__z-ico { background: rgba(125,92,255,.85); }
.uhero__zone:hover .uhero__z-desc, .uhero__zone:focus-visible .uhero__z-desc { max-height: 100px; opacity: 1; margin-top: 10px; }
.uhero__zone:hover .uhero__z-link, .uhero__zone:focus-visible .uhero__z-link { opacity: 1; transform: none; }
/* нижняя полоса преимуществ */
.uhero__bar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px,3vw,40px); padding: 20px; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.08); }
.uhero__bar span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.84); }
.uhero__bar .icon { width: 18px; height: 18px; color: var(--purple-light); flex: none; }
/* мобильные: зоны колонкой, описание видно сразу */
@media (max-width: 859px) {
    .uhero { min-height: auto; }
    .uhero__zones { flex-direction: column; }
    .uhero__zone { flex: none; min-height: 240px; border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
    .uhero__zone:first-child { border-top: 0; }
    .uhero__z-desc { max-height: 120px; opacity: 1; margin-top: 10px; }
    .uhero__z-link { opacity: 1; transform: none; }
}

/* =========================================================
   Зубчатые рейки — инженерный калькулятор (reikicalc)
   ========================================================= */
.reikicalc__box { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 1040px; margin: clamp(28px,3.6vw,46px) auto 0; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px,3vw,38px); box-shadow: 0 34px 66px -42px rgba(20,20,40,.3); }
@media (min-width: 860px) { .reikicalc__box { grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; } }
.reikicalc__scheme { background: linear-gradient(160deg, #F6F7FB, #EAEDF6); border-radius: 16px; padding: 18px; }
.reikicalc__svg { width: 100%; height: auto; display: block; }
.rc-leaf { fill: #fff; stroke: #C7CAD9; stroke-width: 1.5; }
.rc-slats line { stroke: #D6D9E5; stroke-width: 2; }
.rc-rack { fill: #EEF0F7; stroke: #C7CAD9; stroke-width: 1.2; }
[data-rc-teeth] line { stroke: var(--purple); stroke-width: 2; }
.rc-motor { fill: var(--purple); }
.rc-gear { fill: none; stroke: #fff; stroke-width: 2; }
.rc-dim { stroke: #A7ABBE; stroke-width: 1; }
.rc-dimtext { fill: var(--muted); font-size: 12px; font-family: var(--font); font-weight: 600; }
.reikicalc__slider { margin-top: 22px; }
.reikicalc__slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.reikicalc__slider-head span { color: var(--muted); font-size: 14px; }
.reikicalc__slider-head b { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--purple); }
input[data-rc-range] { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 100px; background: linear-gradient(90deg, var(--purple), var(--purple-light)); outline: none; margin: 0; }
input[data-rc-range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--purple); box-shadow: 0 4px 12px rgba(125,92,255,.4); cursor: pointer; }
input[data-rc-range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--purple); cursor: pointer; }
.reikicalc__ticks { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; }
.reikicalc__results { display: grid; gap: 12px; margin-bottom: 22px; }
.reikicalc__res { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #F7F8FC; border: 1px solid var(--line); }
.reikicalc__res span { color: var(--muted); font-size: 14px; }
.reikicalc__res b { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); }
.reikicalc__res--kit { background: linear-gradient(120deg, #F3F1FD, #FCFBFF); border-color: rgba(125,92,255,.2); }
.reikicalc__res--kit b { color: var(--purple); }
.reikicalc__adv { display: grid; gap: 10px; }
.reikicalc__adv li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 14.5px; }
.reikicalc__adv li .icon { color: var(--purple); flex: none; margin-top: 1px; }
.reikicalc__kits { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1040px; margin: 22px auto 0; }
@media (min-width: 680px) { .reikicalc__kits { grid-template-columns: 1fr 1fr; } }
.reikicalc__kit { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.reikicalc__kit-info { flex: 1; min-width: 150px; }
.reikicalc__kit-info b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.reikicalc__kit-info span { color: var(--muted); font-size: 13.5px; }
.reikicalc__kit-price { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--purple); white-space: nowrap; }
.reikicalc__kit.is-rec { border-color: var(--purple); box-shadow: 0 22px 46px -24px rgba(125,92,255,.45); transform: translateY(-2px); }
.reikicalc__kit.is-rec::after { content: 'Рекомендуем'; position: absolute; top: -10px; left: 20px; background: var(--purple); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 12px; border-radius: 100px; }

/* =========================================================
   Уличные ворота — премиальные блоки 2–10 (uv-)
   ========================================================= */
/* Блок 2 — Варианты (3 карточки) */
.uv-vars__grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: clamp(28px,3.5vw,44px); }
@media (min-width: 760px) { .uv-vars__grid { grid-template-columns: repeat(3, 1fr); } }
.uv-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 22px 48px -30px rgba(20,20,40,.25); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.uv-card:hover { transform: translateY(-8px); box-shadow: 0 44px 84px -34px rgba(20,20,40,.34); border-color: var(--purple-100); }
.uv-card__media { aspect-ratio: 4/3; overflow: hidden; }
.uv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.uv-card:hover .uv-card__media img { transform: scale(1.07); }
.uv-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.uv-card__title { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 8px; transition: color .35s var(--ease); }
.uv-card:hover .uv-card__title { color: var(--purple); }
.uv-card__text { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
/* цена + кнопка внутри карточки, прижаты вниз (равная высота карточек) */
.uv-card__price { margin-top: auto; padding-top: 18px; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--purple); line-height: 1; }
.uv-card__price small { display: block; font-family: var(--font); font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 4px; }
.uv-card__btn { margin-top: 16px; width: 100%; justify-content: center; }
/* фото-рендеры вариантов — целиком (contain) на светлой подложке */
.uv-card__media--contain { background: #f4f5fa; }
.uv-card__media--contain img { object-fit: contain; padding: 12px; }
/* галерея на уличной странице — видно 2 фото (остальные скрыты справа) */
body[data-page="ulichnye"] .wgal__item { flex-basis: calc((100% - 20px) / 2); }
@media (max-width: 640px) { body[data-page="ulichnye"] .wgal__item { flex-basis: 84%; } }
/* характеристики — красивая сетка вместо строк-таблицы */
.uv-specs__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); padding: 0; }
.uv-specs__row { display: flex; flex-direction: column; gap: 5px; padding: 20px 22px; border: 0; background: #fff; }
.uv-specs__row:last-child { border: 0; }
.uv-specs__row span { color: var(--muted); font-size: 13px; }
.uv-specs__row b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); text-align: left; }
@media (max-width: 560px) { .uv-specs__list { grid-template-columns: 1fr; } }

/* =========================================================
   Уличные ворота — ПРЕМИУМ-ПОЛИРОВКА (только визуал: фоны-сцены,
   продуктовые карточки, крупная типографика, воздух)
   ========================================================= */
body[data-page="ulichnye"] { background-color: #F2F5F9; }
/* крупная типографика + воздух */
body[data-page="ulichnye"] .section-head { margin-bottom: clamp(26px,3.4vw,46px); }
body[data-page="ulichnye"] .section-title { font-size: clamp(28px,3.8vw,48px); letter-spacing: -.02em; line-height: 1.05; }
body[data-page="ulichnye"] .section { padding-top: clamp(56px,7vw,104px); padding-bottom: clamp(56px,7vw,104px); }
/* фоны-сцены: чередование чистый белый / светлый графит-тинт (:not(#zzz) — ID-специфичность, чтобы перебить глобальное .section) */
body[data-page="ulichnye"] .section:not(#zzz) {
    background:
        radial-gradient(58% 50% at 86% -4%, rgba(125,92,255,.05), transparent 60%),
        radial-gradient(50% 60% at 6% 104%, rgba(125,92,255,.035), transparent 62%),
        #FFFFFF;
}
body[data-page="ulichnye"] .section--soft:not(#zzz) {
    background:
        radial-gradient(48% 60% at 10% 4%, rgba(125,92,255,.06), transparent 62%),
        repeating-linear-gradient(90deg, rgba(20,20,44,.018) 0 1px, transparent 1px 190px),
        linear-gradient(180deg, #F1F3F9 0%, #EAEDF5 100%);
}
/* Вариант-карточки — премиальные продуктовые блоки */
body[data-page="ulichnye"] .uv-card { position: relative; border-radius: 24px; border-color: rgba(20,20,44,.06); box-shadow: 0 30px 64px -36px rgba(20,20,44,.32); }
body[data-page="ulichnye"] .uv-card:hover { transform: translateY(-10px); box-shadow: 0 56px 108px -38px rgba(20,20,44,.44), 0 0 0 1px var(--purple); }
body[data-page="ulichnye"] .uv-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, var(--purple), var(--purple-light)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
body[data-page="ulichnye"] .uv-card:hover::after { transform: scaleX(1); }
body[data-page="ulichnye"] .uv-card__media--contain { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #F6F7FC 0%, #E7EAF3 100%); }
body[data-page="ulichnye"] .uv-card__media--contain img { padding: 18px; transition: transform .7s var(--ease); }
body[data-page="ulichnye"] .uv-card:hover .uv-card__media--contain img { transform: scale(1.06); }
/* Карточки преимуществ — крупнее иконки, мягче */
body[data-page="ulichnye"] .uv-feat__card { border-radius: 22px; }
body[data-page="ulichnye"] .uv-feat__ico { width: 58px; height: 58px; border-radius: 16px; }
body[data-page="ulichnye"] .uv-feat__ico .icon { width: 28px; height: 28px; }

/* ===== Уличная — РЕДАКТОРСКАЯ АСИММЕТРИЯ (арт-дирекшн, композиция без смены контента) ===== */
@media (min-width: 920px) {
    /* ВАРИАНТЫ: 1 крупная карточка + 2 компактные горизонтальные в стопку */
    body[data-page="ulichnye"] .uv-vars__grid {
        grid-template-columns: 1.24fr 1fr;
        grid-auto-rows: 1fr;
        gap: 22px;
        align-items: stretch;
    }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(1) .uv-card__title { font-size: 25px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(1) .uv-card__text { font-size: 15.5px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(1) .uv-card__body { padding: 30px 32px 32px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(1) .uv-card__price { font-size: 26px; }
    /* правые карточки — горизонтальная компактная композиция (фото слева, текст справа) */
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) { flex-direction: row; align-items: stretch; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) .uv-card__media { width: 43%; flex: none; aspect-ratio: auto; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) .uv-card__media--contain img { padding: 14px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) .uv-card__body { flex: 1; padding: 20px 22px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) .uv-card__title { font-size: 18px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) .uv-card__text { font-size: 13px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) .uv-card__price { font-size: 19px; padding-top: 12px; }
    body[data-page="ulichnye"] .uv-vars__grid > .uv-card:nth-child(n+2) .uv-card__btn { margin-top: 12px; padding: 11px 18px; font-size: 13.5px; }
    /* распашные — крупная карточка справа (смена стороны для ритма) */
    body[data-page="ulichnye"] #raspashnye .uv-vars__grid { grid-template-columns: 1fr 1.24fr; }
    body[data-page="ulichnye"] #raspashnye .uv-vars__grid > .uv-card:nth-child(1) { grid-column: 2; }
}

/* =========================================================
   Страница АВТОМАТИКА — премиальные секции (aut-)
   ========================================================= */

/* Каталог оборудования (автоматика/аксессуары) — премиальная презентация ALUTECH */
/* Атмосфера секций: светлый премиум-фон + графитовые акценты, у каждой категории свой оттенок */
.section.acat { position: relative; overflow: hidden; }
.section.acat::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(120% 80% at 100% -10%, rgba(125,92,255,.06), transparent 55%),
        linear-gradient(180deg, #FCFCFE 0%, #F4F5FA 100%);
}
.section.acat.section--soft::before {
    background:
        radial-gradient(120% 80% at 0% -10%, rgba(38,42,66,.07), transparent 55%),
        linear-gradient(180deg, #F3F4F9 0%, #EBEDF4 100%);
}
.section.acat > .container { position: relative; z-index: 1; }
.acat__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: clamp(28px,3.2vw,44px) auto 0;
}
@media (max-width: 900px) { .acat__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .acat__grid { grid-template-columns: 1fr; gap: 16px; } }
.acat-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid rgba(20,20,45,.06);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(20,20,45,.03), 0 18px 42px -26px rgba(24,22,50,.24);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.acat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 14px rgba(20,20,45,.05), 0 44px 74px -30px rgba(96,74,196,.34);
    border-color: var(--purple-100);
}
.acat-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid; place-items: center;
    background:
        radial-gradient(72% 62% at 50% 36%, #FFFFFF 0%, rgba(255,255,255,0) 72%),
        linear-gradient(162deg, #F4F6FB 0%, #E3E6EF 55%, #ECEEF6 100%);
    overflow: hidden;
}
.acat-card__media::after {
    content: ""; position: absolute; left: 14%; right: 14%; bottom: 11%; height: 13px;
    background: radial-gradient(50% 100% at 50% 0%, rgba(20,20,50,.18), transparent 72%);
    filter: blur(2px);
}
.acat-card__media img {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 14px 18px 16px;
    transition: transform .5s var(--ease);
    filter: drop-shadow(0 9px 15px rgba(20,20,50,.13));
}
.acat-card:hover .acat-card__media img { transform: scale(1.07); }
.acat-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; gap: 10px; }
.acat-card__name {
    font-family: var(--display); font-weight: 700;
    font-size: 16px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink);
    min-height: 2.6em;
}
.acat-card__price {
    font-family: var(--display); font-weight: 800;
    font-size: 24px; line-height: 1.05; color: var(--purple); letter-spacing: -.02em;
}
.acat-card__price small {
    display: block; margin-top: 5px;
    font-family: var(--font); font-weight: 500; font-size: 11.5px; color: var(--muted);
}
.acat-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.acat-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; color: var(--muted);
    background: rgba(125,92,255,.05); border: 1px solid rgba(125,92,255,.14);
    padding: 4px 9px; border-radius: 100px;
}
.acat-tag .icon { width: 12px; height: 12px; color: var(--purple); }
.acat-card__feats { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 3px 0 4px; }
.acat-card__feats li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.acat-card__feats .icon { width: 15px; height: 15px; color: var(--purple); flex: none; }
.acat-card__btn { margin-top: auto; width: 100%; justify-content: center; padding: 13px; font-size: 14.5px; font-weight: 700; border-radius: 12px; }
/* Продающая кнопка в шапке блока */
.acat-head-cta { margin-top: 20px; }
.acat-head-cta .btn { padding: 13px 26px; }
/* Блок доверия «Почему выбирают нас» */
.acat-trust__box { max-width: 1080px; margin: 0 auto; text-align: center; border-radius: 24px; padding: clamp(28px,4vw,44px);
    background: linear-gradient(162deg, #FFFFFF 0%, #F4F2FE 100%); border: 1px solid rgba(125,92,255,.12); box-shadow: 0 20px 46px -28px rgba(80,60,180,.26); }
.acat-trust__title { font-family: var(--display); font-weight: 800; font-size: clamp(22px,3vw,30px); color: var(--ink); margin-bottom: 26px; letter-spacing: -.02em; }
.acat-trust__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 820px) { .acat-trust__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .acat-trust__list { grid-template-columns: 1fr; } }
.acat-trust__list li { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.acat-trust__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: var(--purple-50); }
.acat-trust__ico .icon { width: 25px; height: 25px; color: var(--purple); }
/* Описание в карточке привода */
.acat-card__desc { font-size: 13px; line-height: 1.4; color: var(--muted); margin: -2px 0 0; }
/* Слайдер каталога приводов (стрелки листают ленту) */
.acat-slider { position: relative; max-width: 1120px; margin: clamp(28px,3.2vw,44px) auto 0; padding: 0 6px; }
.acat-slider__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3);
    gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
    padding: 4px 4px 14px; scrollbar-width: thin; scrollbar-color: var(--purple-100) transparent;
}
.acat-slider__track > .acat-card { scroll-snap-align: start; }
.acat-slider__track::-webkit-scrollbar { height: 7px; }
.acat-slider__track::-webkit-scrollbar-track { background: transparent; }
.acat-slider__track::-webkit-scrollbar-thumb { background: var(--purple-100); border-radius: 100px; }
.acat-slider__nav {
    position: absolute; top: 44%; transform: translateY(-50%); z-index: 4;
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--line); background: #fff;
    box-shadow: 0 12px 26px -12px rgba(20,20,45,.32); cursor: pointer; color: var(--ink);
    transition: transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.acat-slider__nav:hover { color: var(--purple); border-color: var(--purple-100); transform: translateY(-50%) scale(1.06); }
.acat-slider__nav .icon { width: 20px; height: 20px; }
.acat-slider__nav--prev { left: -8px; }
.acat-slider__nav--prev .icon { transform: rotate(180deg); }
.acat-slider__nav--next { right: -8px; }
/* Карусель приводов: сдвигаем дорожку внутрь, чтобы крупные стрелки были в отступах и не заходили на карточки */
.drives-bento__slider { padding: 0 68px; }
.drives-bento__slider .acat-slider__nav { width: 62px; height: 62px; border: 0; color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--purple-dark));
    box-shadow: 0 16px 30px -12px rgba(91,63,214,.55); animation: navPulse 1.6s var(--ease) infinite; }
.drives-bento__slider .acat-slider__nav .icon { width: 27px; height: 27px; }
.drives-bento__slider .acat-slider__nav:hover { filter: brightness(1.08);
    transform: translateY(-50%) scale(1.12); animation: none; box-shadow: 0 20px 40px -12px rgba(91,63,214,.7); }
.drives-bento__slider .acat-slider__nav--prev { left: 2px; }
.drives-bento__slider .acat-slider__nav--next { right: 2px; }
@keyframes navPulse {
    0%   { box-shadow: 0 16px 30px -12px rgba(91,63,214,.55), 0 0 0 0 rgba(125,92,255,.6); }
    70%  { box-shadow: 0 16px 30px -12px rgba(91,63,214,.55), 0 0 0 18px rgba(125,92,255,0); }
    100% { box-shadow: 0 16px 30px -12px rgba(91,63,214,.55), 0 0 0 0 rgba(125,92,255,0); }
}
@media (max-width: 620px) { .drives-bento__slider { padding: 0; } }
@media (max-width: 620px) { .acat-slider__track { grid-auto-columns: 74%; } .acat-slider__nav { display: none; } }
/* Фильтры каталога автоматики */
.acat-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; max-width: 1080px; margin: 0 auto clamp(22px,3vw,34px);
    padding: 16px 20px; background: #fff; border: 1px solid rgba(20,20,45,.06); border-radius: 16px; box-shadow: 0 14px 34px -24px rgba(24,22,50,.2); }
.acat-filters__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acat-filters__label { font-size: 13px; font-weight: 700; color: var(--muted); }
.acat-filter { font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); padding: 8px 15px; border-radius: 100px; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.acat-filter:hover { border-color: var(--purple-100); }
.acat-filter.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }
.acat-filter--reset { margin-left: auto; color: var(--purple); background: transparent; border-color: transparent; }
.acat-filter--reset:hover { text-decoration: underline; }
.acat-filter-price { width: 82px; font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-family: inherit; }
.acat-filter-price:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(125,92,255,.12); }
.acat-filters__dash { color: var(--muted); }
.acat-filters__count { font-size: 13px; font-weight: 700; color: var(--purple); }
@media (max-width: 620px) { .acat-filters { padding: 14px; } .acat-filter--reset { margin-left: 0; } }

/* ===== Бенто-каталог приводов ROTEO (слева привод + текст, справа сетка) ===== */
.drives-bento { position: relative; overflow: hidden; background: linear-gradient(180deg, #F5F6FB 0%, #E8EAF2 100%); }
.drives-bento__bg { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(55% 45% at 10% 28%, rgba(176,182,204,.42), transparent 62%), radial-gradient(45% 45% at 96% 8%, rgba(125,92,255,.06), transparent 55%); }
.drives-bento .container { position: relative; z-index: 1; }
.drives-bento--photo { background: linear-gradient(180deg, #EDEFF5 0%, #E2E5EF 100%); }
.drives-bento__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--drv-bg) center/cover no-repeat; opacity: .5; }
.drives-bento--photo::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(238,240,246,.3) 0%, rgba(230,233,242,.5) 100%); }
.drives-bento__wrap { display: grid; grid-template-columns: minmax(270px, 30%) 1fr; gap: clamp(20px,2.4vw,32px); align-items: stretch; margin-top: clamp(20px,3vw,36px); }
@media (max-width: 940px) { .drives-bento__wrap { grid-template-columns: 1fr; } }
/* Левая панель */
.drives-bento__hero { display: flex; flex-direction: column; border-radius: 24px; padding: clamp(24px,2.4vw,34px); overflow: hidden;
    background: linear-gradient(165deg, #FCFCFE 0%, #ECEEF6 100%); border: 1px solid rgba(20,20,45,.06); box-shadow: 0 22px 54px -32px rgba(24,22,50,.28); }
.drives-bento__title { font-family: var(--display); font-weight: 800; font-size: clamp(24px,3vw,36px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.drives-bento__sub { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 8px; }
.drives-bento__feats { list-style: none; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.drives-bento__feats li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.drives-bento__feats .icon { width: 18px; height: 18px; color: var(--purple); flex: none; }
.drives-bento__img { display: block; width: 100%; max-width: 320px; margin: 28px auto 0; margin-top: auto; border-radius: 16px; filter: drop-shadow(0 24px 34px rgba(20,20,50,.22)); }
/* Правая сетка (бенто) */
.drives-bento__right { display: flex; flex-direction: column; gap: 20px; }
.drives-bento__top { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .drives-bento__top { grid-template-columns: 1fr; } }
.drives-card { position: relative; }
.drives-card__badge { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff;
    background: linear-gradient(135deg, #CBA135, #A87C1E); padding: 5px 12px; border-radius: 100px; box-shadow: 0 8px 18px -8px rgba(168,124,30,.5); }
/* Хиты крупнее (горизонтальные: большое фото + крупная цена) */
@media (min-width: 641px) {
    .drives-card.is-big { flex-direction: row; align-items: stretch; }
    .drives-card.is-big .acat-card__media { width: 50%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid rgba(20,20,45,.06); }
    .drives-card.is-big .acat-card__body { flex: 1; justify-content: center; padding: 22px 22px 24px; }
    .drives-card.is-big .acat-card__name { font-size: 20px; }
    .drives-card.is-big .acat-card__price { font-size: 30px; }
    .drives-card.is-big .acat-card__desc { font-size: 14px; }
}

/* 2. Преимущества */
.aut-ben__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(28px,3.5vw,44px); }
@media (min-width: 560px)  { .aut-ben__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .aut-ben__grid { grid-template-columns: repeat(5, 1fr); } }
.aut-ben__card { padding: 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.aut-ben__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(20,20,40,.28); border-color: var(--purple-100); }
.aut-ben__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--purple-50); color: var(--purple); margin-bottom: 16px; }
.aut-ben__ico .icon { width: 25px; height: 25px; }
.aut-ben__card h3 { font-family: var(--display); font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.aut-ben__card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
/* 3. Как работает */
.aut-how__flow { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(30px,4vw,48px); }
@media (min-width: 820px) { .aut-how__flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; } }
.aut-how__step { position: relative; text-align: center; padding: 32px 24px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 22px 48px -30px rgba(20,20,40,.22); }
.aut-how__num { position: absolute; top: 14px; right: 20px; font-family: var(--display); font-weight: 700; font-size: 34px; color: rgba(125,92,255,.12); }
.aut-how__ico { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; margin-bottom: 16px; }
.aut-how__ico .icon { width: 30px; height: 30px; }
.aut-how__step h3 { font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 8px; }
.aut-how__step p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.aut-how__arrow { display: grid; place-items: center; color: var(--purple); }
.aut-how__arrow .icon { width: 28px; height: 28px; }
@media (max-width: 819px) { .aut-how__arrow { transform: rotate(90deg); } }
/* 5. Умный дом (тёмный) */
.aut-smart { position: relative; overflow: hidden; color: #fff; background: linear-gradient(155deg, #1A1924 0%, #0F0E17 100%) !important; }
.aut-smart__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); background: rgba(125,92,255,.28); top: -160px; right: -60px; z-index: 0; pointer-events: none; }
.aut-smart .container { position: relative; z-index: 1; }
.aut-smart__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 860px) { .aut-smart__grid { grid-template-columns: 1.1fr 1fr; gap: clamp(34px,4vw,64px); } }
.aut-smart__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CBBBFF; background: rgba(125,92,255,.16); padding: 7px 14px; border-radius: 100px; margin-bottom: 18px; }
.aut-smart__eyebrow .icon { width: 15px; height: 15px; }
.aut-smart__title { font-family: var(--display); font-weight: 600; font-size: clamp(26px,3.4vw,40px); line-height: 1.1; color: #fff; }
.aut-smart__desc { color: rgba(255,255,255,.7); font-size: clamp(15px,1.8vw,17px); line-height: 1.6; margin-top: 16px; max-width: 460px; }
.aut-smart__list { display: grid; gap: 12px; margin: 22px 0 26px; }
.aut-smart__list li { display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.85); font-size: 15px; }
.aut-smart__list .icon { color: var(--purple-light); flex: none; }
.aut-smart__visual { display: flex; justify-content: center; }
.aut-phone { width: 250px; max-width: 72vw; aspect-ratio: 9 / 18.5; border-radius: 36px; background: linear-gradient(160deg, #26242F, #15141D); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1); padding: 12px; position: relative; }
.aut-phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; border-radius: 100px; background: #0c0b12; z-index: 2; }
.aut-phone__screen { height: 100%; border-radius: 26px; background: radial-gradient(120% 60% at 50% 0%, rgba(125,92,255,.28), transparent 60%), linear-gradient(180deg, #171622, #0e0d15); display: flex; flex-direction: column; align-items: center; padding: 46px 20px 26px; }
.aut-phone__app { font-family: var(--display); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.85); letter-spacing: .04em; margin-bottom: 26px; }
.aut-phone__card { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: auto; }
.aut-phone__gate-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(125,92,255,.2); color: #CBBBFF; }
.aut-phone__gate-ico .icon { width: 30px; height: 30px; }
.aut-phone__card b { color: #fff; font-family: var(--display); font-weight: 600; font-size: 16px; }
.aut-phone__status { color: rgba(255,255,255,.5); font-size: 13px; }
.aut-phone__btn { width: 100%; padding: 15px; border-radius: 14px; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; font-family: var(--display); font-weight: 600; font-size: 15px; text-align: center; box-shadow: 0 14px 30px -10px rgba(125,92,255,.7); }
/* 6. Безопасность */
.aut-safe__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(28px,3.5vw,44px); }
@media (min-width: 760px) { .aut-safe__grid { grid-template-columns: repeat(3, 1fr); } }
.aut-safe__card { padding: 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.aut-safe__card:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -30px rgba(20,20,40,.28); border-color: var(--purple-100); }
.aut-safe__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--purple-50); color: var(--purple); margin-bottom: 18px; }
.aut-safe__ico .icon { width: 28px; height: 28px; }
.aut-safe__card h3 { font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 8px; }
.aut-safe__card p { color: var(--muted); font-size: 14px; line-height: 1.55; }
/* подвал раздела типа ворот: цена + CTA */
.uv-gate__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding: 22px 26px; border-radius: 18px; background: linear-gradient(120deg, #F3F1FD, #FCFBFF); border: 1px solid rgba(125,92,255,.16); }
.uv-gate__price { font-family: var(--display); font-weight: 700; font-size: clamp(24px,3vw,32px); color: var(--purple); }
.uv-gate__price small { font-family: var(--font); font-weight: 500; font-size: 14px; color: var(--muted); margin-left: 10px; }

/* Блок 3 — Цена + оффер (тёмный) */
.uv-offer { position: relative; overflow: hidden; color: #fff; background: linear-gradient(155deg, #1B1A25 0%, #100F18 100%) !important; }
.uv-offer__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); background: rgba(125,92,255,.26); top: -180px; right: -80px; z-index: 0; pointer-events: none; }
.uv-offer .container { position: relative; z-index: 1; }
.uv-offer__grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 860px) { .uv-offer__grid { grid-template-columns: 1fr 1fr; gap: clamp(34px,4vw,60px); } }
.uv-offer__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CBBBFF; background: rgba(125,92,255,.16); padding: 7px 14px; border-radius: 100px; margin-bottom: 16px; }
.uv-offer__title { font-family: var(--display); font-weight: 600; font-size: clamp(26px,3.4vw,40px); line-height: 1.1; color: #fff; }
.uv-offer__desc { color: rgba(255,255,255,.7); font-size: clamp(15px,1.8vw,17px); line-height: 1.6; margin-top: 16px; max-width: 460px; }
.uv-offer__price { font-family: var(--display); font-weight: 700; font-size: clamp(30px,4vw,44px); color: #fff; margin: 22px 0 24px; }
.uv-offer__price small { display: block; font-family: var(--font); font-weight: 500; font-size: 14px; color: rgba(255,255,255,.55); margin-top: 4px; }
.uv-offer__media { border-radius: 22px; overflow: hidden; box-shadow: 0 44px 90px -40px rgba(0,0,0,.7); }
.uv-offer__media img { width: 100%; display: block; }

/* Блоки 4 и 8 — сетка преимуществ (светлые карточки) */
.uv-feat__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(28px,3.5vw,44px); }
@media (min-width: 560px) { .uv-feat__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .uv-feat__grid { grid-template-columns: repeat(4, 1fr); } }
.uv-feat__card { padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.uv-feat__card:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -30px rgba(20,20,40,.28); border-color: var(--purple-100); }
.uv-feat__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--purple-50); color: var(--purple); margin-bottom: 16px; }
.uv-feat__ico .icon { width: 26px; height: 26px; }
.uv-feat__card h3 { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.uv-feat__card p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Блок 5 — Гарантия и сервис */
.uv-serv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (min-width: 760px) { .uv-serv__grid { grid-template-columns: repeat(4, 1fr); } }
.uv-serv__item { text-align: center; padding: 24px 16px; border-radius: 18px; background: linear-gradient(160deg, #F7F6FD, #FCFBFF); border: 1px solid rgba(125,92,255,.14); }
.uv-serv__ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--purple); box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.uv-serv__ico .icon { width: 22px; height: 22px; }
.uv-serv__num { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(24px,3vw,30px); color: var(--purple); line-height: 1; }
.uv-serv__cap { display: block; color: var(--muted); font-size: 13.5px; margin-top: 6px; }

/* Блок 6 — Тех.характеристики (премиум-карточка) */
.uv-specs__box { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: 0 34px 66px -42px rgba(20,20,40,.3); margin-top: clamp(28px,3.5vw,44px); }
@media (min-width: 820px) { .uv-specs__box { grid-template-columns: 1fr 1fr; } }
.uv-specs__media { min-height: 260px; }
.uv-specs__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-specs__list { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: clamp(24px,3vw,40px); background: #fff; }
.uv-specs__row { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.uv-specs__row:last-child { border-bottom: 0; }
.uv-specs__row span { color: var(--ink-2); font-size: 14.5px; flex-shrink: 0; }
.uv-specs__row b { font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--ink); text-align: right; line-height: 1.4; }

/* Блок 9 — Преимущества ALUTECH (тёмный) */
.uv-brand { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, #17161F 0%, #0E0D15 100%) !important; }
.uv-brand__glow { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; pointer-events: none; }
.uv-brand__glow--1 { width: 420px; height: 420px; top: -140px; left: -70px; background: rgba(125,92,255,.24); }
.uv-brand__glow--2 { width: 360px; height: 360px; bottom: -140px; right: -50px; background: rgba(94,110,255,.18); }
.uv-brand .container { position: relative; z-index: 1; }
.uv-brand .section-title { color: #fff; }
.uv-brand__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(28px,3.5vw,44px); }
@media (min-width: 560px) { .uv-brand__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .uv-brand__grid { grid-template-columns: repeat(4, 1fr); } }
.uv-brand__card { padding: 28px 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.uv-brand__card:hover { transform: translateY(-6px); background: rgba(125,92,255,.12); border-color: rgba(125,92,255,.5); }
.uv-brand__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.08); color: #CBBBFF; margin-bottom: 16px; }
.uv-brand__ico .icon { width: 26px; height: 26px; }
.uv-brand__card h3 { font-family: var(--display); font-weight: 600; font-size: 18px; color: #fff; margin-bottom: 8px; }
.uv-brand__card p { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.55; }

/* Блок 10 — Финальный CTA с фото-фоном */
.uv-final { position: relative; overflow: hidden; padding: clamp(70px,12vh,130px) 0; background: var(--uv-final-img) center/cover no-repeat; color: #fff; text-align: center; }
.uv-final__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(14,13,21,.7), rgba(14,13,21,.84)); }
.uv-final__inner { position: relative; z-index: 1; }
.uv-final__title { font-family: var(--display); font-weight: 600; font-size: clamp(28px,4.4vw,52px); line-height: 1.08; color: #fff; }
.uv-final__sub { color: rgba(255,255,255,.78); font-size: clamp(15px,2vw,19px); margin: 16px auto 0; max-width: 560px; }
.uv-final__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.uv-final__ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.uv-final__ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Фиксированная кнопка расчёта */
.uv-fab { position: fixed; left: 20px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border: 0; border-radius: 100px; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 16px 38px -12px rgba(125,92,255,.75); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.uv-fab:hover { transform: translateY(-3px); box-shadow: 0 24px 52px -14px rgba(125,92,255,.9); }
.uv-fab .icon { width: 18px; height: 18px; }
@media (max-width: 560px) { .uv-fab { left: 14px; bottom: 16px; padding: 12px 16px; } .uv-fab span { display: none; } }

/* =========================================================
   БЛОК «Автоматика» с фото приводов
   ========================================================= */
.auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (min-width: 720px) { .auto-grid { grid-template-columns: repeat(4, 1fr); } }
.auto-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
    text-decoration: none; color: var(--ink); box-shadow: 0 14px 36px -24px rgba(20,20,40,.16);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.auto-card:hover { transform: translateY(-6px); box-shadow: 0 30px 66px -28px rgba(20,20,40,.30); }
.auto-card__media { height: 152px; background: linear-gradient(160deg,#f7f7fb,#eef0f5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.auto-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.auto-card:hover .auto-card__media img { transform: scale(1.07); }
.auto-card__body { display: flex; flex-direction: column; gap: 5px; flex: 1; padding: 14px 16px 16px; }
.auto-card__name { font-family: var(--font); font-weight: 700; font-size: 14.5px; line-height: 1.25; color: var(--ink); }
.auto-card__price { margin-top: auto; padding-top: 6px; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--purple); }

/* =========================================================
   РАСПАШНЫЕ · «Варианты исполнения» — премиальный сплит-конфигуратор.
   Слева большая сцена с фото (fade + zoom при смене), справа —
   вертикальное меню-селектор без рамок; фиолетовый только для активного.
   ========================================================= */
.rvar__config {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    margin-top: clamp(30px, 4vw, 52px);
}
@media (min-width: 900px) {
    .rvar__config { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(34px, 4.5vw, 68px); }
}

/* --- Левая сцена: тёмная студия (Porsche-style), ворота «парят» --- */
.rvar__stage {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 26px;
    background:
        radial-gradient(58% 62% at 50% 16%, rgba(125,92,255,.22), transparent 60%),
        radial-gradient(70% 44% at 50% 116%, rgba(0,0,0,.6), transparent 62%),
        linear-gradient(160deg, #201F2B 0%, #14131C 58%, #0D0C13 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.04), 0 44px 84px -44px rgba(0,0,0,.62);
    overflow: hidden;
}
/* мягкий студийный «пол» — светлый эллипс-отражение под воротами */
.rvar__stage::after {
    content: ''; position: absolute; left: 50%; bottom: 8%;
    width: 66%; height: 16%; transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(160,150,220,.16), transparent 70%);
    filter: blur(6px); pointer-events: none;
}
.rvar__glow {
    position: absolute; inset: 0; pointer-events: none;
    /* центральный спотлайт за воротами */
    background: radial-gradient(46% 52% at 50% 40%, rgba(255,255,255,.10), transparent 66%);
}
.rvar__img {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: clamp(20px, 4.2vw, 56px);
    opacity: 0; transform: scale(1.06);
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.55));
    transition: opacity .7s var(--ease), transform 1s var(--ease);
    will-change: opacity, transform;
}
.rvar__img.is-active { opacity: 1; transform: scale(1); }

/* стрелки-перелистывание над фото */
.rvar__arrow {
    position: absolute; top: 50%; z-index: 4;
    transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; cursor: pointer;
    transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rvar__arrow:hover { background: rgba(125,92,255,.9); border-color: rgba(125,92,255,.95); box-shadow: 0 8px 22px rgba(125,92,255,.5); }
.rvar__arrow:active { transform: translateY(-50%) scale(.92); }
.rvar__arrow .icon { width: 20px; height: 20px; }
.rvar__arrow--prev { left: 16px; }
.rvar__arrow--prev .icon { transform: rotate(180deg); }
.rvar__arrow--next { right: 16px; }

/* Светлый вариант сцены (для калиток — светлые рендеры на белом фоне) */
.rvar--light .rvar__stage {
    background:
        radial-gradient(120% 120% at 82% 0%, #FFFFFF, rgba(255,255,255,0) 58%),
        linear-gradient(150deg, #F6F8FC 0%, #E9EDF6 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 34px 66px -42px rgba(20,20,44,.4);
}
.rvar--light .rvar__stage::after { display: none; }
.rvar--light .rvar__glow { background: radial-gradient(52% 56% at 22% 16%, rgba(125,92,255,.14), transparent 62%); }
.rvar--light .rvar__img { filter: drop-shadow(0 18px 28px rgba(20,20,44,.16)); }
.rvar--light .rvar__arrow { background: rgba(255,255,255,.92); border-color: rgba(20,20,40,.1); color: var(--ink); }
.rvar--light .rvar__arrow:hover { background: var(--purple); border-color: var(--purple); color: #fff; }

/* --- Правое вертикальное меню --- */
.rvar__menu { display: flex; flex-direction: column; }
.rvar__opt {
    position: relative;
    display: block; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer;
    padding: 19px 8px 19px 22px;
    border-top: 1px solid var(--line);            /* тонкий разделитель списка, не рамка-карточка */
    transition: padding-left .4s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.rvar__opt:last-child { border-bottom: 1px solid var(--line); }
/* вертикальный фиолетовый акцент — только у активного */
.rvar__opt::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 3px; height: 0; border-radius: 3px;
    background: linear-gradient(var(--purple), var(--purple-light));
    transform: translateY(-50%);
    transition: height .5s var(--ease);
}
.rvar__opt.is-active::before { height: calc(100% - 32px); }
.rvar__opt-top { display: flex; align-items: baseline; gap: 16px; }
.rvar__num {
    min-width: 22px;
    font-family: var(--display); font-weight: 600; font-size: 13px;
    letter-spacing: .04em; color: var(--muted);
    transition: color .35s var(--ease);
}
.rvar__name {
    font-family: var(--display); font-weight: 600;
    font-size: 18px; line-height: 1.22; color: var(--ink);
    transition: color .35s var(--ease), font-size .4s var(--ease);
}
.rvar__opt:hover .rvar__name { color: var(--purple-dark); }
.rvar__opt:hover .rvar__num { color: var(--ink); }
/* активный — крупнее и фиолетовый */
.rvar__opt.is-active { padding-left: 27px; }
.rvar__opt.is-active .rvar__num { color: var(--purple); }
.rvar__opt.is-active .rvar__name { color: var(--purple); font-size: clamp(20px, 2.4vw, 24px); }

/* --- описание под активным названием (плавное раскрытие по высоте) --- */
.rvar__panel {
    display: grid; grid-template-rows: 0fr;
    opacity: 0; margin-top: 0;
    transition: grid-template-rows .5s var(--ease), opacity .45s var(--ease), margin-top .5s var(--ease);
}
.rvar__panel.is-active { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.rvar__desc {
    min-height: 0; overflow: hidden;
    padding-left: 38px; max-width: 46ch;
    color: var(--muted); font-size: 15px; line-height: 1.62;
}
@media (max-width: 560px) { .rvar__desc { padding-left: 0; } }

/* доступность: без анимаций — просто показать активное */
@media (prefers-reduced-motion: reduce) {
    .rvar__img { transition: opacity .2s; transform: none; }
    .rvar__panel { transition: opacity .2s; }
}

/* =========================================================
   СТРАНИЦА «АВТОМАТИКА» · high-tech презентация.
   Ритм: СВЕТЛЫЙ → ТЁМНЫЙ → СВЕТЛЫЙ → ТЁМНЫЙ → СВЕТЛЫЙ.
   Меняются только фоны/атмосфера; структура и карточки не тронуты.
   Карточки .offer белые, .spec-cell — под тёмный фон (белый текст).
   ========================================================= */
body[data-page="avtomatika"] { background-color: #EEF1F6; }

/* Дефолт — светлая секция (мини-заметка и любые нестандартные) */
body[data-page="avtomatika"] .section {
    background-color: #FFFFFF;
    background-image: radial-gradient(120% 60% at 50% -12%, rgba(125,92,255,.045), transparent 60%);
}
body[data-page="avtomatika"] .section--soft {
    background-color: #F6F8FC;
    background-image: radial-gradient(120% 60% at 50% -12%, rgba(125,92,255,.05), transparent 60%);
}

/* ====== БЛОК 1 · Откатные — СВЕТЛЫЙ, чистое первое впечатление ====== */
body[data-page="avtomatika"] #grp-otkatnyh.section {
    background-color: #FFFFFF;
    background-image: radial-gradient(65% 55% at 50% -10%, rgba(125,92,255,.06), transparent 62%);
}

/* ====== БЛОК 2 · Распашные — СВЕТЛЫЙ ====== */
body[data-page="avtomatika"] #grp-raspashnyh.section {
    background-color: #FFFFFF;
    background-image: radial-gradient(46% 58% at 90% 4%, rgba(125,92,255,.05), transparent 62%);
}

/* ====== БЛОК 3 · Гаражные — СВЕТЛЫЙ, максимум воздуха (отдых) ====== */
body[data-page="avtomatika"] #grp-garazhnyh.section {
    background-color: #FCFCFF;
    background-image:
        radial-gradient(42% 55% at 9% 6%, rgba(125,92,255,.05), transparent 62%),
        radial-gradient(46% 58% at 92% 6%, rgba(125,92,255,.04), transparent 62%);
}

/* ====== БЛОК 4 · Промышленные — ТЁМНЫЙ (чередование от распашных) ====== */
body[data-page="avtomatika"] #grp-promyshlennyh.section {
    background-color: #14111F;
    background-image: none;
}
/* Общая каталожная подложка bg-tech почти белая (яркость 241): на тёмном фоне
   она давала белёсую муть. Прячем — распашные (вторая тёмная группа) тоже без
   фото, так обе тёмные группы читаются чисто и одинаково. */
body[data-page="avtomatika"] #grp-promyshlennyh .sec-bg { display: none; }

/* ====== БЛОК 5-подводка · Аксессуары — СВЕТЛЫЙ ====== */
body[data-page="avtomatika"] #aksessuary.section {
    background-color: #F6F8FC;
    background-image: radial-gradient(130% 60% at 50% -10%, rgba(125,92,255,.05), transparent 58%);
}

/* ====== Характеристики (#stats) — ТЁМНАЯ инженерная полоса (spec-cell уже белые) ====== */
body[data-page="avtomatika"] #stats .sec-bg { display: none !important; }
body[data-page="avtomatika"] #stats.section {
    background-color: #17161F;
    background-image:
        radial-gradient(70% 120% at 50% 0%, rgba(125,92,255,.18), transparent 60%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 130px),
        radial-gradient(120% 110% at 50% 100%, rgba(0,0,0,.4), transparent 62%);
}
body[data-page="avtomatika"] #stats .section-title { color: #FFFFFF; }

/* ====== БЛОК 5 · Финал (CTA) — СВЕТЛЫЙ + фиолетовое свечение по краям ======
   :not(#stats) даёт ID-специфичность, чтобы перебить глобальное .section-правило */
body[data-page="avtomatika"] .section--tight:not(#stats):has(.cta-band) {
    background-color: #FBFAFF;
    background-image:
        radial-gradient(58% 82% at 0% 50%, rgba(125,92,255,.13), transparent 55%),
        radial-gradient(58% 82% at 100% 50%, rgba(125,92,255,.13), transparent 55%),
        radial-gradient(80% 90% at 50% 122%, rgba(125,92,255,.15), transparent 60%);
}

/* ---- Текст на тёмных секциях: заголовки/подписи светлые (карточки остаются светлыми) ---- */
/* Автоматика — конфигуратор ROTEO СВЕТЛЫЙ (не сливается с тёмным hero); сцена с фото остаётся тёмной */
body[data-page="avtomatika"] .drvcfg { background: linear-gradient(155deg, #F4F3FC 0%, #FFFFFF 62%) !important; }
body[data-page="avtomatika"] .drvcfg__bg { opacity: .5; }
body[data-page="avtomatika"] .drvcfg .section-title { color: var(--ink); }
body[data-page="avtomatika"] .drvcfg .section-sub { color: var(--muted); }
body[data-page="avtomatika"] .drvcfg__name,
body[data-page="avtomatika"] .drvcfg__price { color: var(--ink); }
body[data-page="avtomatika"] .drvcfg__desc li { color: var(--muted); }
body[data-page="avtomatika"] .drvcfg__desc li .icon { color: var(--purple); }
body[data-page="avtomatika"] .drvcfg__lbl { color: var(--muted); }
body[data-page="avtomatika"] .drvcfg__track { background: var(--line); }
body[data-page="avtomatika"] .drvcfg__dot { background: #fff; border-color: var(--line); }
body[data-page="avtomatika"] .drvcfg__adv-item { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
body[data-page="avtomatika"] .drvcfg__adv-item b { color: var(--ink); }
body[data-page="avtomatika"] .drvcfg__adv-item span { color: var(--muted); }

/* ---- Автоматика: премиум-каталог (карточки .offer) — только визуал ---- */
body[data-page="avtomatika"] .offer { border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 22px 50px -30px rgba(20,20,40,.22); transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease); overflow: hidden; }
body[data-page="avtomatika"] .offer:hover { transform: translateY(-8px); box-shadow: 0 44px 84px -34px rgba(20,20,40,.34); border-color: var(--purple-100); }
body[data-page="avtomatika"] .offer__media { background: linear-gradient(160deg, #F7F8FC, #EDF0F6) !important; }
body[data-page="avtomatika"] .offer__media img { transition: transform .5s var(--ease); }
body[data-page="avtomatika"] .offer:hover .offer__media img { transform: scale(1.06); }
body[data-page="avtomatika"] .offer__body { padding: 22px 24px 24px; gap: 6px; }
body[data-page="avtomatika"] .offer__size { font-size: 19px !important; font-weight: 700; color: var(--ink); line-height: 1.25; }
body[data-page="avtomatika"] .offer__price { font-size: 26px !important; font-weight: 700; color: var(--purple); margin-top: 8px; }
body[data-page="avtomatika"] .offer__price small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 4px; }
body[data-page="avtomatika"] .offer__body { display: flex; flex-direction: column; flex: 1; }
body[data-page="avtomatika"] .offer .btn { width: 100%; justify-content: center; margin-top: auto; border-radius: 12px; }
body[data-page="avtomatika"] .offer__price { margin-bottom: 16px; }
/* Категории — крупнее заголовки, больше воздуха между секциями */
body[data-page="avtomatika"] .section:not(#zzz) { padding-top: clamp(58px,7.5vw,108px); padding-bottom: clamp(58px,7.5vw,108px); }
body[data-page="avtomatika"] .section .section-head .section-title { font-size: clamp(28px,3.4vw,44px); letter-spacing: -.02em; }
/* Аксессуары — компактнее, но единый стиль */
body[data-page="avtomatika"] #aksessuary .offer__body { padding: 16px 18px 18px; }
body[data-page="avtomatika"] #aksessuary .offer__size { font-size: 16px !important; }
body[data-page="avtomatika"] #aksessuary .offer__price { font-size: 21px !important; }

/* ==================== Премиальные фоны главной ==================== */
/* Мягкое затухание фото сверху/снизу: чистые заголовки + плавные стыки секций */
body[data-page="home"] .sec-bg,
body[data-page="avtomatika"] .sec-bg {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 88%, transparent 100%);
}
/* Продуктовые блоки получили фон-фото через section_bg — держим контент над ним */
.vcfg  { position: relative; overflow: hidden; }
.kgate { position: relative; overflow: hidden; }
.vcfg  > .container, .rgate .container, .kgate > .container { position: relative; z-index: 1; }
.vcfg  > .sec-bg, .vcfg  > .sec-scrim,
.rgate > .sec-bg, .rgate > .sec-scrim,
.kgate > .sec-bg, .kgate > .sec-scrim { z-index: 0; }
/* Распашные (тёмная сцена) — премиальная глубина: фото + фирменное свечение */
.rgate::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: -20%; right: -10%; width: 60%; height: 90%;
    background: radial-gradient(closest-side, rgba(125,92,255,.22), transparent 70%);
}
.rgate > .container, .rgate__stage { position: relative; z-index: 1; }

/* ==================== Реквизиты · Cookie-баннер · callback ==================== */
.footer__req { font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.5; margin-bottom: 14px; }
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
    background: #14111F; color: rgba(255,255,255,.86); border: 1px solid rgba(125,92,255,.3);
    border-radius: 16px; padding: 14px 18px; box-shadow: 0 24px 60px -22px rgba(0,0,0,.65);
    animation: cookie-in .45s var(--ease); }
.cookie[hidden] { display: none; }
.cookie__txt { font-size: 13px; line-height: 1.45; flex: 1; min-width: 220px; }
.cookie__txt a { color: var(--purple-light); text-decoration: underline; }
.cookie__btn { flex: none; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--purple), var(--purple-dark));
    color: #fff; font-weight: 700; font-size: 14px; padding: 10px 24px; border-radius: 100px; transition: transform .2s var(--ease); }
.cookie__btn:hover { transform: translateY(-2px); }
@keyframes cookie-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.modal__box--sm { max-width: 400px; }

/* ===== Живая активность (счётчики в реальном времени) ===== */
.liveact { position: relative; overflow: hidden; background: #14111F; }
.liveact .section-title { color: #fff; }
.liveact__glow { position: absolute; left: 20%; right: 20%; top: -34%; height: 340px; background: radial-gradient(closest-side, rgba(125,92,255,.38), transparent 72%); filter: blur(28px); pointer-events: none; }
.eyebrow--live { display: inline-flex; align-items: center; gap: 8px; color: #b9b1e0; }
.liveact__pulse { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: la-pulse 2s infinite; flex: none; }
@keyframes la-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.liveact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.liveact__card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.liveact__card:hover { transform: translateY(-4px); border-color: rgba(125,92,255,.5); }
.liveact__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(125,92,255,.16); color: #b9a8ff; margin-bottom: 4px; }
.liveact__ico .icon { width: 24px; height: 24px; }
.liveact__num { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -1px; background: linear-gradient(180deg, #ffffff, #cfc6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.liveact__label { font-size: 13.5px; color: #9c95bd; max-width: 190px; line-height: 1.4; }
.liveact__badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; font-weight: 700; color: #34d399; text-transform: uppercase; letter-spacing: .05em; }
.liveact__dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: la-pulse 2s infinite; }
.liveact__num.is-bump { animation: la-bump .5s var(--ease); }
@keyframes la-bump { 0% { transform: none; } 32% { transform: translateY(-6px) scale(1.06); } 100% { transform: none; } }
@media (max-width: 860px) { .liveact__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) {
    .liveact__grid { grid-template-columns: 1fr; }
    .liveact__card { flex-direction: row; text-align: left; justify-content: flex-start; align-items: center; gap: 16px; padding: 18px 20px; }
    .liveact__card .liveact__label { max-width: none; }
    .liveact__card .liveact__num { font-size: 34px; }
    .liveact__badge { position: absolute; top: 14px; right: 16px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .liveact__pulse, .liveact__dot, .liveact__num.is-bump { animation: none; } }

/* ===== Блог: список статей ===== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(20,20,40,.4); border-color: var(--purple-100); }
.blog-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--purple-50, #f3f0ff); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__tag, .blog-card__cat { position: absolute; top: 12px; left: 12px; background: rgba(20,17,31,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 100px; backdrop-filter: blur(4px); }
.blog-card__cat { position: static; display: inline-block; margin-bottom: 8px; background: var(--purple-100); color: var(--purple-dark); }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.blog-card__title { font-size: 18.5px; font-weight: 800; line-height: 1.3; margin: 0; }
.blog-card__excerpt { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; flex: 1; }
.blog-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.blog-card__date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.blog-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--purple); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } }

/* ===== Статья ===== */
.art { padding: clamp(28px, 5vw, 56px) 0 0; }
.art__wrap { max-width: 760px; }
.art__head { margin: 18px 0 10px; }
.art__cat { display: inline-block; background: var(--purple-100); color: var(--purple-dark); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
.art__title { font-family: var(--display); font-size: clamp(28px, 4.6vw, 44px); line-height: 1.14; letter-spacing: -.5px; margin: 0 0 16px; text-wrap: balance; }
.art__meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }
.art__meta span { display: inline-flex; align-items: center; gap: 6px; }
.art__meta .icon { color: var(--purple); }
.art__lead { font-size: 18.5px; line-height: 1.6; color: var(--ink-2, #3a3550); font-weight: 500; }
.art__cover { margin: 22px 0 30px; border-radius: var(--radius); overflow: hidden; }
.art__cover img { width: 100%; height: auto; display: block; }
.art__body { font-size: 17px; line-height: 1.72; color: var(--ink-2, #322e45); }
.art__body > * + * { margin-top: 1.15em; }
.art__body h2 { font-family: var(--display); font-size: clamp(23px, 3.2vw, 30px); line-height: 1.25; letter-spacing: -.4px; margin: 1.7em 0 .1em; text-wrap: balance; }
.art__body h3 { font-size: 20px; font-weight: 800; margin: 1.4em 0 0; }
.art__body p { margin: 0; }
.art__body a { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.art__body a:hover { color: var(--purple-dark); }
.art__body ul, .art__body ol { padding-left: 1.3em; display: grid; gap: 8px; }
.art__body li { line-height: 1.62; }
.art__body li::marker { color: var(--purple); }
.art__body blockquote { margin: 1.4em 0; padding: 16px 22px; border-left: 3px solid var(--purple); background: var(--purple-50, #f5f2ff); border-radius: 0 12px 12px 0; font-size: 16px; color: var(--ink-2); }
.art__body table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.art__body table thead th { background: #14111F; color: #fff; text-align: left; padding: 12px 14px; font-size: 14px; }
.art__body table td, .art__body table th { border: 1px solid var(--line); padding: 11px 14px; vertical-align: top; }
.art__body table tbody tr:nth-child(even) { background: var(--purple-50, #faf9ff); }
.art__body .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.4em 0; }
.art__body .pc { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.art__body .pc--plus { background: #f2fbf5; border-color: #cdeccf; }
.art__body .pc--minus { background: #fdf4f3; border-color: #f2d6d2; }
.art__body .pc h4 { margin: 0 0 10px; font-size: 15px; }
.art__body .pc ul { padding-left: 1.15em; }
@media (max-width: 560px) { .art__body .pros-cons { grid-template-columns: 1fr; } }
.art__cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin: 40px 0 10px; padding: 28px 30px; border-radius: var(--radius); background: linear-gradient(120deg, var(--purple), var(--purple-dark)); color: #fff; }
.art__cta h3 { margin: 0 0 6px; font-size: 21px; color: #fff; }
.art__cta p { margin: 0; opacity: .92; font-size: 14.5px; max-width: 460px; }
.art__cta .btn { background: #fff; color: var(--purple-dark); border: none; flex: none; }
.art__faq { margin: 42px 0 10px; }
.art__faq > h2 { font-family: var(--display); font-size: clamp(23px, 3.2vw, 30px); margin: 0 0 18px; }
.art__related { margin-top: 50px; }

/* ===================== Плавающий виджет «в реальном времени» ===================== */
.la-widget { position: fixed; left: 18px; bottom: 18px; z-index: 790; width: 268px; max-width: calc(100vw - 36px);
    background: #14111F; border: 1px solid rgba(125,92,255,.28); border-radius: 16px; padding: 14px 14px 12px;
    box-shadow: 0 26px 64px -24px rgba(0,0,0,.72); color: #fff;
    transform: translateX(-120%); opacity: 0; will-change: transform, opacity;
    transition: transform .55s var(--ease), opacity .55s var(--ease); }
.la-widget.is-in { transform: none; opacity: 1; }
.la-widget[hidden] { display: none; }
/* на мобильном виджет скрываем — иначе фиксированная панель перекрывает карточки товаров */
@media (max-width: 680px) { .la-widget { display: none !important; } }
.la-widget__close { position: absolute; top: 6px; right: 9px; width: 24px; height: 24px; background: none; border: 0;
    color: rgba(255,255,255,.5); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 7px; transition: color .2s, background .2s; }
.la-widget__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.la-widget__head { display: flex; align-items: center; gap: 7px; margin: 0 22px 11px 2px; }
.la-widget__pulse { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; flex: none;
    box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: la-pulse 2s infinite; }
.la-widget__title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.la-widget__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.la-widget__card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 11px; padding: 9px 10px; }
.la-widget__ico { display: inline-flex; color: #a78bfa; }
.la-widget__ico .icon { width: 17px; height: 17px; }
.la-widget__num { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; margin: 3px 0 1px;
    background: linear-gradient(90deg, #fff, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.la-widget__num.is-bump { animation: la-bump .5s var(--ease); }
.la-widget__label { display: block; font-size: 10.5px; line-height: 1.25; color: rgba(255,255,255,.55); }
.la-widget__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; margin-left: 2px; vertical-align: baseline; }
@keyframes la-bump { 0% { transform: translateY(0); } 30% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes la-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); } 70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
@media (max-width: 560px) { .la-widget { width: 210px; padding: 12px 12px 10px; left: 12px; bottom: 12px; } .la-widget__num { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .la-widget { transition: opacity .3s; transform: none; } .la-widget__pulse { animation: none; } }

/* ===================== Способы оплаты (акции) ===================== */
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.pay-card { background: #fff; border: 1px solid rgba(125,92,255,.14); border-radius: 16px; padding: 24px 22px; box-shadow: 0 12px 34px -20px rgba(20,20,40,.22); }
.pay-card__ico { display: inline-flex; width: 48px; height: 48px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(125,92,255,.1); color: var(--purple); margin-bottom: 14px; }
.pay-card__ico .icon { width: 24px; height: 24px; }
.pay-card__title { font-size: 17px; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
.pay-card__text { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ===================== Шоурум в Бресте (галерея) ===================== */
.showroom__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 12px; margin-top: 30px; }
.showroom__item { overflow: hidden; border-radius: 14px; display: block; position: relative; margin: 0; background: rgba(125,92,255,.06); box-shadow: 0 12px 32px -20px rgba(20,20,40,.28); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.showroom__item--big { grid-column: span 2; grid-row: span 2; }
.showroom__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* при наведении вся плитка увеличивается и всплывает над соседними */
.showroom__item:hover { transform: scale(1.14); z-index: 5; box-shadow: 0 28px 56px -18px rgba(20,20,40,.5); }
.showroom__cta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.showroom__addr { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .showroom__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 128px; } }
@media (max-width: 600px) { .showroom__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 112px; } .showroom__item--big { grid-column: span 2; grid-row: span 2; } }

/* ================= Страница ДВЕРИ (ARD 72 / 92) ================= */
.dv-hero { padding-top: 150px; }
.dv-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; opacity: .5; filter: brightness(.7); }
.dv-hero .page-hero__inner { position: relative; z-index: 2; }
.dv-hero .page-hero__vscrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,11,24,.9) 0%, rgba(14,11,24,.7) 45%, rgba(14,11,24,.35) 100%); }

/* Карточки моделей */
.dv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.dv-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px -30px rgba(20,17,31,.4); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.dv-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(20,17,31,.45); }
.dv-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eceaf5; }
.dv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.dv-card:hover .dv-card__media img { transform: scale(1.05); }
.dv-card__tag { position: absolute; top: 14px; left: 14px; background: var(--purple); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 6px 12px; border-radius: 100px; box-shadow: 0 8px 20px rgba(125,92,255,.4); }
.dv-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.dv-card__title { font-family: var(--display); font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.dv-card__desc { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.dv-card__list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.dv-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; font-weight: 600; }
.dv-card__list .icon { color: var(--purple); flex: none; margin-top: 2px; }
.dv-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); }
.dv-card__price { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); }

/* Преимущества (с фото) */
.dv-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dv-adv__item { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 40px -30px rgba(20,17,31,.4); }
.dv-adv__photo { position: relative; display: block; height: 168px; background-size: cover; background-position: center; background-color: #ece9f5; }
.dv-adv__ico { position: absolute; left: 16px; bottom: -24px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--purple); color: #fff; box-shadow: 0 10px 22px rgba(125,92,255,.45); }
.dv-adv__ico .icon { width: 24px; height: 24px; }
.dv-adv__body { padding: 34px 20px 22px; }
.dv-adv__title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.dv-adv__text { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

/* Карусель фото в сравнении */
.dv-carousel { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #f4f2fb; }
.dv-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dv-carousel__track::-webkit-scrollbar { display: none; }
.dv-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; position: relative; }
.dv-slide img { width: 100%; height: 420px; object-fit: cover; display: block; }
.dv-slide__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(to top, rgba(10,8,18,.82), rgba(10,8,18,0)); }
.dv-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--purple-dark); border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(20,17,31,.28); transition: background .2s, transform .2s; z-index: 2; }
.dv-carousel__nav:hover { background: #fff; }
.dv-carousel__nav--prev { left: 12px; transform: translateY(-50%) rotate(180deg); }
.dv-carousel__nav--next { right: 12px; }
.dv-carousel__nav .icon { width: 20px; height: 20px; }

/* Сравнение */
.dv-compare { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 30px; align-items: center; }
.dv-compare__media { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.dv-compare__media img { width: 100%; display: block; }
.dv-compare__table { display: flex; flex-direction: column; }
.dv-cmp__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding: 13px 6px; border-bottom: 1px solid var(--line); align-items: center; }
.dv-cmp__row--head { border-bottom: 2px solid var(--purple-100, #E5E2EF); }
.dv-cmp__row--head .dv-cmp__v { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--purple); text-align: center; }
.dv-cmp__label { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.dv-cmp__v { font-size: 14px; font-weight: 700; text-align: center; }

@media (max-width: 860px) {
    .dv-cards { grid-template-columns: 1fr; }
    .dv-adv { grid-template-columns: 1fr 1fr; }
    .dv-compare { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .dv-adv { grid-template-columns: 1fr; }
    .dv-cmp__row { grid-template-columns: 1fr; gap: 3px; text-align: left; padding: 12px 4px; }
    .dv-cmp__v { text-align: left; }
    .dv-cmp__row--head { display: none; }
    .dv-cmp__v::before { content: attr(data-m); }
}

/* Карусель внутри карточки модели */
.dv-card__media .dv-carousel--card { position: absolute; inset: 0; border: 0; border-radius: 0; background: #ece9f5; }
.dv-carousel--card .dv-carousel__track { height: 100%; }
.dv-carousel--card .dv-slide { height: 100%; }
.dv-carousel--card .dv-slide img { height: 100%; }
.dv-carousel--card .dv-carousel__nav { width: 38px; height: 38px; }
.dv-carousel--card .dv-slide__cap { padding: 22px 14px 12px; font-size: 13.5px; }

/* Круглая пульсирующая кнопка «Каталог здесь» */
.dv-catalog-wrap { display: flex; justify-content: flex-end; margin-top: 64px; margin-bottom: 10px; padding-right: 6%; }
@media (max-width: 680px) { .dv-catalog-wrap { justify-content: center; padding-right: 0; margin-top: 44px; } }
.dv-catalog-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 142px; height: 142px; border-radius: 50%; text-decoration: none; text-align: center;
  background: linear-gradient(150deg, var(--purple) 0%, var(--purple-dark) 100%); color: #fff;
  box-shadow: 0 20px 42px -14px rgba(125,92,255,.75); animation: dvCatBeat 1.5s ease-in-out infinite;
  will-change: transform; transition: box-shadow .3s var(--ease); z-index: 1; }
.dv-catalog-btn__ico { display: grid; place-items: center; }
.dv-catalog-btn__ico .icon { width: 30px; height: 30px; }
.dv-catalog-btn__txt { font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.12; letter-spacing: .01em; }
.dv-catalog-btn:hover { box-shadow: 0 24px 54px -12px rgba(125,92,255,.9); }
.dv-catalog-btn::before, .dv-catalog-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: -1; }
.dv-catalog-btn::after { box-shadow: 0 0 0 0 rgba(125,92,255,.7); animation: dvCatPulse 1.5s infinite; }
.dv-catalog-btn::before { box-shadow: 0 0 0 0 rgba(125,92,255,.45); animation: dvCatPulse 1.5s infinite; animation-delay: .55s; }
@keyframes dvCatPulse { 0% { box-shadow: 0 0 0 0 rgba(125,92,255,.6); } 70% { box-shadow: 0 0 0 26px rgba(125,92,255,0); } 100% { box-shadow: 0 0 0 26px rgba(125,92,255,0); } }
@keyframes dvCatBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .dv-catalog-btn, .dv-catalog-btn::before, .dv-catalog-btn::after { animation: none; } }

/* ==== Дополнительные ховер-анимации страницы дверей ==== */
/* Заметный зум фото в карточках моделей + блик */
.dv-card__media img { transition: transform .7s cubic-bezier(.22,.7,.24,1); }
.dv-card:hover .dv-card__media img, .dv-card__media:hover img { transform: scale(1.12); }
.dv-card__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .85s var(--ease); }
.dv-card:hover .dv-card__media::after { transform: translateX(130%); }
.dv-card__tag { z-index: 3; }
/* Преимущества: подъём карточки, зум фото, «оживление» иконки */
.dv-adv__item { position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.dv-adv__item:hover { transform: translateY(-7px); box-shadow: 0 30px 58px -28px rgba(20,17,31,.55); }
.dv-adv__frame { display: block; height: 168px; overflow: hidden; background: #ece9f5; }
.dv-adv__photo { display: block; height: 100%; background-size: cover; background-position: center; background-color: #ece9f5; transition: transform .8s cubic-bezier(.22,.7,.24,1); }
.dv-adv__item:hover .dv-adv__photo { transform: scale(1.14); }
.dv-adv__ico { position: absolute; left: 16px; top: 144px; bottom: auto; transition: transform .4s var(--ease); }
.dv-adv__item:hover .dv-adv__ico { transform: translateY(-4px) scale(1.1) rotate(-6deg); }
/* Карусели (сравнение и карточки): заметный зум активного слайда */
.dv-slide img { transition: transform .8s cubic-bezier(.22,.7,.24,1); }
.dv-carousel:hover .dv-slide img { transform: scale(1.1); }
.dv-carousel__nav:hover { transform: translateY(-50%) scale(1.12); }
.dv-carousel__nav--prev:hover { transform: translateY(-50%) rotate(180deg) scale(1.12); }
/* Таблица сравнения: подсветка строки */
.dv-cmp__row:not(.dv-cmp__row--head) { transition: background .25s; border-radius: 8px; }
.dv-cmp__row:not(.dv-cmp__row--head):hover { background: rgba(125,92,255,.07); }
/* Медленный «ken burns» на фоне hero */
.dv-hero__bg { animation: dvHeroKen 22s ease-in-out infinite alternate; }
@keyframes dvHeroKen { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .dv-hero__bg, .dv-card__media::after { animation: none; transition: none; } }

/* ==================== Страница «Рольставни» ==================== */
/* Карточки серий (Prestige / Security / Trend) */
.rs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rs-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px -30px rgba(20,17,31,.4); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.rs-card:hover { transform: translateY(-6px); box-shadow: 0 34px 64px -28px rgba(20,17,31,.48); }
.rs-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #ece9f5; }
.rs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22,.7,.24,1); }
.rs-card:hover .rs-card__media img { transform: scale(1.12); }
.rs-card__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.34) 50%, transparent 68%); transform: translateX(-130%); transition: transform .85s var(--ease); }
.rs-card:hover .rs-card__media::after { transform: translateX(130%); }
.rs-card__tag { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--purple); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 6px 12px; border-radius: 100px; box-shadow: 0 8px 20px rgba(125,92,255,.4); }
.rs-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.rs-card__title { font-family: var(--display); font-size: 25px; font-weight: 700; margin: 0 0 8px; }
.rs-card__desc { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.rs-card__list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.rs-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 600; }
.rs-card__list .icon { color: var(--purple); flex: none; margin-top: 2px; }
.rs-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.rs-card__price { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); }

/* Таблица сравнения серий */
.rs-compare { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card, #fff); box-shadow: 0 20px 50px -34px rgba(20,17,31,.4); }
.rs-cmp__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); align-items: center; transition: background .25s; }
.rs-cmp__row:last-child { border-bottom: 0; }
.rs-cmp__row:not(.rs-cmp__row--head):hover { background: rgba(125,92,255,.06); }
.rs-cmp__row--head { background: linear-gradient(180deg, #f6f4fc, #efeafc); border-bottom: 2px solid var(--purple-100, #E5E2EF); }
.rs-cmp__row--head .rs-cmp__v { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--purple); text-align: center; }
.rs-cmp__label { font-size: 14px; color: var(--muted); font-weight: 600; }
.rs-cmp__v { font-size: 14px; font-weight: 700; text-align: center; }

/* Где применяют — тайлы с фото */
.rs-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rs-app { position: relative; min-height: 340px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; box-shadow: 0 22px 50px -30px rgba(20,17,31,.5); }
.rs-app__photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.22,.7,.24,1); }
.rs-app:hover .rs-app__photo { transform: scale(1.1); }
.rs-app__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,22,.9) 6%, rgba(12,9,22,.35) 48%, rgba(12,9,22,.05) 100%); }
.rs-app__body { position: relative; z-index: 2; padding: 26px 24px 24px; color: #fff; }
.rs-app__title { font-family: var(--display); font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.rs-app__text { font-size: 14px; line-height: 1.55; margin: 0; color: rgba(255,255,255,.9); }

@media (max-width: 900px) {
    .rs-cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .rs-apps { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 680px) {
    .rs-cmp__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; text-align: left; }
    .rs-cmp__row--head { display: none; }
    .rs-cmp__label { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--purple-dark); margin-bottom: 2px; }
    .rs-cmp__v { text-align: left; }
    .rs-cmp__v::before { content: attr(data-m); color: var(--muted); font-weight: 600; }
}
/* Компаратор на 2 колонки значений (ZIP / Тросовая) */
.rs-compare--2 .rs-cmp__row { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 680px) { .rs-compare--2 .rs-cmp__row { grid-template-columns: 1fr; } }
/* Компаратор на 4 колонки значений (промышленные серии) */
.rs-compare--4 .rs-cmp__row { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
.rs-compare--4 .rs-cmp__label { font-size: 13.5px; }
.rs-compare--4 .rs-cmp__v { font-size: 13px; }
.rs-compare--4 .rs-cmp__row--head .rs-cmp__v { font-size: 15px; }
@media (max-width: 760px) { .rs-compare--4 .rs-cmp__row { grid-template-columns: 1fr; } }

/* ==================== Страница «Солнцезащита» ==================== */
/* Блок из 4 выгод (иконка + текст) */
.sz-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sz-quad__item { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-shadow: 0 16px 42px -32px rgba(20,17,31,.4); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.sz-quad__item:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -30px rgba(20,17,31,.5); }
.sz-quad__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px; color: #fff; background: linear-gradient(150deg, var(--purple), var(--purple-dark)); box-shadow: 0 12px 26px -8px rgba(125,92,255,.6); }
.sz-quad__ico .icon { width: 26px; height: 26px; }
.sz-quad__title { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.sz-quad__text { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

/* Тёмный блок «Управление» */
.sz-control { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, #1b1630, #241a3f); box-shadow: 0 30px 70px -34px rgba(20,17,31,.7); }
.sz-control__media { position: relative; min-height: 320px; }
.sz-control__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sz-control__body { padding: 42px 44px; color: #fff; align-self: center; }
.sz-control__title { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 10px 0 8px; color: #fff; }
.sz-control__sub { color: rgba(255,255,255,.75); font-size: 15px; margin: 0 0 20px; }
.sz-control__list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; }
.sz-control__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; color: #efeafc; }
.sz-control__list .icon { color: #b9a3ff; flex: none; margin-top: 2px; }

/* Полоса характеристик */
.sz-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; background: none; padding: 0; box-shadow: none; border-radius: 0; }
.sz-facts__cell { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; overflow: hidden;
  box-shadow: 0 18px 44px -32px rgba(20,17,31,.42); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sz-facts__cell::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--purple), var(--purple-dark)); }
.sz-facts__cell:hover { transform: translateY(-6px); box-shadow: 0 32px 58px -30px rgba(20,17,31,.5); }
.sz-facts__cell b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.sz-facts__cell span { display: block; margin-top: 9px; text-transform: uppercase; letter-spacing: .11em; font-size: 11.5px; font-weight: 700; color: var(--purple); }

@media (max-width: 900px) {
    .sz-quad { grid-template-columns: 1fr 1fr; }
    .rs-apps--4 { grid-template-columns: 1fr 1fr; }
    .sz-control { grid-template-columns: 1fr; }
    .sz-control__media { min-height: 240px; }
    .sz-facts { grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; }
}
@media (min-width: 901px) { .rs-apps--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) {
    .sz-quad { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .rs-apps--4 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/* ==================== Страница «Перголы» ==================== */
/* 6 плиток в 3 колонки */
.sz-quad--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sz-quad--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sz-quad--3 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* Лайфстайл-блок: фото + текст */
.pg-life { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--card, #fff); box-shadow: 0 28px 64px -34px rgba(20,17,31,.5); }
.pg-life__media { position: relative; min-height: 340px; overflow: hidden; }
.pg-life__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,.7,.24,1); }
.pg-life:hover .pg-life__media img { transform: scale(1.06); }
.pg-life__body { padding: 44px 46px; align-self: center; }
.pg-life__title { font-family: var(--display); font-size: clamp(24px, 3vw, 33px); font-weight: 700; margin: 0 0 14px; }
.pg-life__text { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0 0 24px; }

/* Дополнения (интеграции): карточки фото сверху */
.pg-int { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pg-int__card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px -32px rgba(20,17,31,.42); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pg-int__card:hover { transform: translateY(-6px); box-shadow: 0 32px 62px -30px rgba(20,17,31,.5); }
.pg-int__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #ece9f5; }
.pg-int__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22,.7,.24,1); }
.pg-int__card:hover .pg-int__media img { transform: scale(1.08); }
.pg-int__body { padding: 24px 26px 26px; }
.pg-int__title { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.pg-int__text { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

@media (max-width: 860px) {
    .pg-life { grid-template-columns: 1fr; }
    .pg-life__media { min-height: 240px; }
    .pg-int { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ==================== Страница «Ремонт и сервис» ==================== */
.rmt-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rmt-list li { display: flex; align-items: center; gap: 14px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 15px; font-weight: 600; box-shadow: 0 14px 36px -30px rgba(20,17,31,.4); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.rmt-list li:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(20,17,31,.5); }
.rmt-list__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(125,92,255,.12); color: var(--purple-dark); }
.rmt-list__ico .icon { width: 20px; height: 20px; }
@media (max-width: 680px) { .rmt-list { grid-template-columns: 1fr; } }
/* Форма заявки на ремонт */
.rmt-form-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: center; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 24px; padding: 40px; box-shadow: 0 28px 64px -34px rgba(20,17,31,.5); }
.rmt-form-wrap__intro h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0 0 12px; }
.rmt-form-wrap__intro > p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 22px; }
.rmt-form-wrap__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.rmt-form-wrap__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; }
.rmt-form-wrap__list .icon { color: var(--purple); flex: none; margin-top: 2px; }
.rmt-form .field { margin-bottom: 14px; }
.rmt-form label:not(.consent) { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.rmt-form .rmt-req { color: var(--purple); }
.rmt-form input, .rmt-form textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 15px; background: #fbfaff; transition: border-color .2s, box-shadow .2s; }
.rmt-form input:focus, .rmt-form textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(125,92,255,.15); background: #fff; }
.rmt-form .consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 4px 0 16px; }
.rmt-form .consent input { width: auto; }
.rmt-form .lead-form__status { margin-top: 12px; font-size: 14px; }
.rmt-form .lead-form__status.is-ok { color: #1a9d5a; }
.rmt-form .lead-form__status.is-err { color: #d4443c; }
@media (max-width: 820px) {
    .rmt-form-wrap { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
}

/* ==================== Главная: каталог направлений ==================== */
.dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dir-card { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 14px 38px -30px rgba(20,17,31,.4); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.dir-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(20,17,31,.5); border-color: var(--purple); }
.dir-card__ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, var(--purple), var(--purple-dark)); box-shadow: 0 12px 26px -10px rgba(125,92,255,.6); }
.dir-card__ico .icon { width: 26px; height: 26px; }
.dir-card__body { flex: 1; min-width: 0; }
.dir-card__title { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 3px; }
.dir-card__text { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.dir-card__arrow { flex: none; color: var(--purple); opacity: .5; transition: transform .3s var(--ease), opacity .3s; }
.dir-card:hover .dir-card__arrow { opacity: 1; transform: translateX(4px); }
@media (max-width: 900px) { .dirs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dirs { grid-template-columns: 1fr; } }

/* ==================== Мега-меню «Ворота» ==================== */
.nav__mega { position: absolute; top: 100%; left: -22px; margin-top: 12px; width: 940px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(20,17,31,.5);
  padding: 22px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 70; }
.nav__mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav__item.has-drop:hover .nav__mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__mega-inner { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.mega-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.mega-col__head { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; padding-bottom: 11px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.mega-col__ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--purple-50, rgba(125,92,255,.1)); color: var(--purple); }
.mega-col__arr { margin-left: auto; color: var(--purple); opacity: .5; transition: transform .2s, opacity .2s; }
.mega-col__arr .icon { width: 15px; height: 15px; }
.mega-col__head:hover { color: var(--purple); }
.mega-col__head:hover .mega-col__arr { transform: translateX(3px); opacity: 1; }
.mega-col__list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 1px; }
.mega-col__list a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background .18s, color .18s; }
.mega-col__list a:hover { background: var(--purple-50, rgba(125,92,255,.1)); color: var(--purple); }
.mega-col__cta { display: flex; align-items: center; gap: 11px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.mega-col__cta:hover { border-color: var(--purple); box-shadow: 0 12px 26px -16px rgba(125,92,255,.6); transform: translateY(-2px); }
.mega-col__cta-img { flex: none; width: 56px; height: 42px; border-radius: 9px; background-size: cover; background-position: center; }
.mega-col__cta-txt { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 5px; line-height: 1.25; }
.mega-col__cta-txt .icon { width: 14px; height: 14px; color: var(--purple); flex: none; }
.mega-benefits { background: linear-gradient(160deg, #f6f4fc, #efeafc); border-radius: 14px; padding: 14px 22px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 18px 28px; }
.mega-benefits .mega-benefit { flex: 1 1 auto; min-width: 200px; }
.mega-benefit { display: flex; gap: 12px; align-items: center; }
.mega-benefit__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(150deg, var(--purple), var(--purple-dark)); color: #fff; box-shadow: 0 12px 24px -10px rgba(125,92,255,.6); }
.mega-benefit__ico .icon { width: 22px; height: 22px; }
.mega-benefit__txt { display: flex; flex-direction: column; }
.mega-benefit__txt b { font-size: 14px; color: var(--ink); line-height: 1.2; }
.mega-benefit__txt span { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 1240px) {
  .nav__mega { width: 720px; }
  .nav__mega-inner { grid-template-columns: 1fr; }
  .mega-benefits { display: none; }
}

/* ==================== Поиск по сайту ==================== */
.header__search { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; color: inherit; transition: background .2s, border-color .2s, color .2s, transform .2s; flex: none; }
.header:not(.is-scrolled) .header__search { color: #fff; border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.08); }
.header.is-scrolled .header__search { color: var(--purple); border-color: var(--purple-100); background: #fff; }
.header__search:hover { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(125,92,255,.6); }
.header__search .icon { width: 19px; height: 19px; }
.search-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.search-modal.is-open { display: block; }
.search-modal__overlay { position: absolute; inset: 0; background: rgba(15,11,24,.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: fadeIn .2s ease; }
.search-modal__box { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); width: min(640px, 92vw); background: #fff; border-radius: 18px; box-shadow: 0 44px 100px -34px rgba(20,17,31,.65); overflow: hidden; animation: searchPop .22s var(--ease); }
@keyframes searchPop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.search-modal__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.search-modal__bar > .icon { width: 22px; height: 22px; color: var(--purple); flex: none; }
.search-modal__input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; background: transparent; color: var(--ink); }
.search-modal__close { border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.search-modal__close:hover { color: var(--ink); }
.search-modal__results { max-height: min(58vh, 440px); overflow-y: auto; }
.search-modal__results a { display: flex; align-items: center; gap: 12px; padding: 13px 18px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: background .15s; }
.search-modal__results a:last-child { border-bottom: 0; }
.search-modal__results a:hover { background: var(--purple-50, rgba(125,92,255,.08)); }
.search-modal__results a b { font-weight: 700; font-size: 15px; }
.search-modal__results a small { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--purple); background: var(--purple-50, rgba(125,92,255,.1)); padding: 3px 10px; border-radius: 100px; flex: none; }
.search-modal__hint { padding: 16px 18px; color: var(--muted); font-size: 13.5px; margin: 0; }
.search-modal__empty { padding: 22px 18px; color: var(--muted); font-size: 14px; }
@media (max-width: 680px) { .search-modal__box { top: 68px; } }

/* Футер: сворачиваемый список «Продукция» */
.footer__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; background: transparent; border: 0; color: var(--purple-light, #b9a3ff); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 6px 0; transition: color .2s; }
.footer__more:hover { color: #fff; }
.footer__more-chev svg { width: 12px; height: 8px; transition: transform .25s var(--ease); }
.footer__more[aria-expanded="true"] .footer__more-chev svg { transform: rotate(180deg); }
.footer__list--more { margin-top: 4px; }

/* ==================== 3D-карусель каталога (главная) ==================== */
.cat3d { position: relative; margin: 12px auto 0; max-width: 1080px; }
.cat3d__stage { position: relative; height: 468px; perspective: 1600px; transform-style: preserve-3d; }
.cat3d__card { position: absolute; top: 50%; left: 50%; width: 330px; height: 424px; margin: -212px 0 0 -165px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: 0 44px 90px -34px rgba(20,17,31,.65); transition: transform .55s cubic-bezier(.22,.7,.24,1), opacity .5s var(--ease); will-change: transform, opacity; cursor: pointer; }
.cat3d__photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.cat3d__card.is-active:hover .cat3d__photo { transform: scale(1.06); }
.cat3d__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,22,.95) 8%, rgba(12,9,22,.35) 48%, rgba(12,9,22,.06) 100%); }
.cat3d__ico { position: absolute; top: 16px; left: 16px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(125,92,255,.92); color: #fff; box-shadow: 0 10px 24px -8px rgba(125,92,255,.7); }
.cat3d__ico .icon { width: 24px; height: 24px; }
.cat3d__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px 24px; }
.cat3d__title { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.cat3d__text { display: block; font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.4; }
.cat3d__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 15px; font-size: 13px; font-weight: 700; color: #fff; background: var(--purple); padding: 8px 15px; border-radius: 100px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.cat3d__more .icon { width: 14px; height: 14px; }
.cat3d__card.is-active .cat3d__more { opacity: 1; transform: translateY(0); }
.cat3d__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--purple-dark); display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 34px -12px rgba(20,17,31,.42); transition: background .2s, color .2s, transform .2s; }
.cat3d__nav:hover { background: var(--purple); color: #fff; transform: translateY(-50%) scale(1.08); }
.cat3d__nav .icon { width: 22px; height: 22px; }
.cat3d__nav--prev { left: 0; }
.cat3d__nav--prev .icon { transform: rotate(180deg); }
.cat3d__nav--next { right: 0; }
.cat3d__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.cat3d__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: background .2s, transform .2s; }
.cat3d__dot.is-active { background: var(--purple); transform: scale(1.3); }
@media (max-width: 720px) {
  .cat3d__stage { height: 420px; }
  .cat3d__card { width: 258px; height: 366px; margin: -183px 0 0 -129px; }
  .cat3d__nav { width: 44px; height: 44px; }
  .cat3d__nav .icon { width: 19px; height: 19px; }
}

/* ===== Откатные: выбор цвета RAL в конфигураторе ===== */
.rvar__wash{position:absolute;inset:0;background:#383E42;mix-blend-mode:color;opacity:0;transition:opacity .45s ease,background .45s ease;pointer-events:none;border-radius:inherit;z-index:3}
.rvar__wash.is-on{opacity:.34}
.rvar__colors{margin-top:28px;max-width:660px}
.rvar__colors-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.rvar__colors-title{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.rvar__color-label{font-weight:700;font-size:16px;color:var(--ink)}
.rvar__swatches{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:22px}
.rvar__sw{width:46px;height:46px;border-radius:13px;background:var(--sw);border:2px solid rgba(255,255,255,.16);box-shadow:0 4px 12px rgba(0,0,0,.18);cursor:pointer;position:relative;transition:transform .16s ease,box-shadow .16s ease;padding:0;flex:none}
.rvar__sw:hover{transform:translateY(-3px)}
.rvar__sw.is-active{transform:translateY(-3px);box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--purple),0 6px 16px rgba(0,0,0,.22)}
.rvar__sw:focus-visible{outline:none;box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--purple)}
.rvar__calc{display:inline-flex;align-items:center;gap:8px}
@media(max-width:600px){ .rvar__sw{width:42px;height:42px;border-radius:12px} .rvar__color-label{font-size:15px} }

/* ===== «Готовые решения» — 3D-coverflow ===== */
.ocar--3d .ocar__track{ display:block; overflow:visible; height:600px; gap:0; padding:24px 0; perspective:1700px; transform-style:preserve-3d; }
.ocar--3d .ocar__item{ position:absolute; top:24px; left:50%; width:380px; margin-left:-190px; flex-basis:auto; transition:transform .6s cubic-bezier(.22,.7,.24,1), opacity .5s ease; will-change:transform, opacity; backface-visibility:hidden; }
.ocar--3d .ocar__item .otr-card{ height:100%; box-shadow:0 40px 90px -34px rgba(20,17,31,.6); }
.ocar--3d .ocar__item.is-active .otr-card{ box-shadow:0 50px 110px -30px rgba(125,92,255,.45); }
.ocar--3d .ocar__nav{ z-index:200; }
.ocar--3d .ocar__nav--prev{ left:8px; } .ocar--3d .ocar__nav--next{ right:8px; }
@media(max-width:760px){ .ocar--3d .ocar__track{ height:560px } .ocar--3d .ocar__item{ width:328px; margin-left:-164px } }
@media(max-width:400px){ .ocar--3d .ocar__item{ width:296px; margin-left:-148px } }

/* Полотно в выбранном цвете (слой поверх фото заполнения) */
.rvar__gate{ position:absolute; inset:0; z-index:4; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.rvar__gate.is-active{ opacity:1; }
.rvar--light .rvar__gate{ filter: drop-shadow(0 18px 28px rgba(20,20,44,.16)); }


/* ===== Конфигуратор заполнения (.gcfg) — как у ALUTECH ===== */
.gcfg__wrap{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -46px rgba(20,16,45,.5)}
.gcfg__tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px 10px 0;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.gcfg__tab{appearance:none;border:0;background:none;cursor:pointer;font:600 14.5px/1.2 inherit;color:var(--muted);
  padding:14px 16px;position:relative;white-space:nowrap;transition:color .2s}
.gcfg__tab:hover{color:var(--ink)}
.gcfg__tab.is-active{color:var(--purple)}
.gcfg__tab.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--purple)}
.gcfg__body{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
.gcfg__stage{position:relative;background:linear-gradient(160deg,#fbfbfd,#eef0f6);display:flex;align-items:center;justify-content:center;padding:26px;min-height:340px;overflow:hidden}
.gcfg__glow{position:absolute;width:70%;height:60%;left:15%;top:20%;background:radial-gradient(closest-side,rgba(125,92,255,.14),transparent 70%);filter:blur(10px);pointer-events:none}
.gcfg__img{position:relative;z-index:1;max-width:100%;max-height:420px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(24,18,54,.20));transition:opacity .28s ease}
.gcfg__img.is-swap{opacity:0}
.gcfg__panel{padding:28px 30px 30px;display:flex;flex-direction:column;gap:22px}
.gcfg__desc{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.gcfg__label{font:700 12px/1 inherit;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gcfg__color-name{font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--muted);font-size:13px}
.gcfg__exec{display:flex;gap:12px;flex-wrap:wrap}
.gcfg__ex{appearance:none;cursor:pointer;background:var(--bg-soft);border:1.5px solid var(--line);border-radius:14px;
  padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:120px;transition:border-color .2s,box-shadow .2s,background .2s}
.gcfg__ex:hover{border-color:var(--purple)}
.gcfg__ex.is-active{border-color:var(--purple);box-shadow:0 0 0 3px rgba(125,92,255,.16);background:var(--card)}
.gcfg__ex-ic{width:66px;height:44px;border-radius:8px;border:1.5px solid #c8ccd8;background:#fff;position:relative;overflow:hidden}
.gcfg__ex-ic::before{content:"";position:absolute;inset:6px;border-radius:3px}
.gcfg__ex-ic--v::before{background:repeating-linear-gradient(90deg,var(--purple) 0 3px,transparent 3px 8px)}
.gcfg__ex-ic--h::before{background:repeating-linear-gradient(0deg,var(--purple) 0 3px,transparent 3px 8px)}
.gcfg__ex-ic--m::before{background:repeating-linear-gradient(90deg,var(--purple) 0 3px,transparent 3px 8px) top/100% 45% no-repeat,repeating-linear-gradient(0deg,var(--purple) 0 3px,transparent 3px 7px) bottom/100% 52% no-repeat}
.gcfg__ex-lb{font:600 11.5px/1.25 inherit;color:var(--ink);text-align:center;max-width:120px}
.gcfg__pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px}
.gcfg__sw{appearance:none;cursor:pointer;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.gcfg__sw i{display:block;width:100%;height:40px;border-radius:10px;background:var(--sw);border:1px solid rgba(0,0,0,.14);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25);transition:box-shadow .18s,transform .18s}
.gcfg__sw span{font:600 10.5px/1 inherit;color:var(--muted);letter-spacing:.01em}
.gcfg__sw:hover i{transform:translateY(-1px)}
.gcfg__sw.is-active i{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--purple)}
.gcfg__sw.is-active span{color:var(--ink)}
.gcfg__cta{margin-top:2px;align-self:flex-start}
@media(max-width:860px){
  .gcfg__body{grid-template-columns:1fr}
  .gcfg__stage{min-height:260px;padding:18px}
  .gcfg__panel{padding:22px 20px 24px}
  .gcfg__tab{padding:12px 12px;font-size:13.5px}
}
@media(max-width:440px){
  .gcfg__ex{min-width:0;flex:1}
  .gcfg__pal{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
}


/* ===== Блог: галерея объектов + таблица цен в статье ===== */
.art__body .blog-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0}
.art__body .blog-gallery figure{margin:0}
.art__body .blog-gallery img{width:100%;height:230px;object-fit:cover;border-radius:14px;display:block;box-shadow:0 14px 30px -20px rgba(20,16,45,.5)}
.art__body .blog-gallery figcaption{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.45}
.art__body .blog-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;overflow:hidden;border-radius:12px}
.art__body .blog-table th,.art__body .blog-table td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.art__body .blog-table thead th{background:var(--bg-soft);font-weight:700;font-size:13px}
.art__body .blog-table tbody tr:nth-child(even){background:rgba(125,92,255,.04)}
.art__body .blog-table td:last-child{font-weight:700;color:var(--purple-dark);white-space:nowrap}
@media(max-width:620px){
  .art__body .blog-gallery{grid-template-columns:1fr}
  .art__body .blog-gallery img{height:200px}
  .art__body .blog-table{font-size:13px}
  .art__body .blog-table th,.art__body .blog-table td{padding:8px 9px}
}


/* Подписи к плиткам шоурума (если заданы в админке) */
.showroom__item{position:relative}
.showroom__cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 14px 12px;
  font-size:13px;line-height:1.35;color:#fff;
  background:linear-gradient(to top,rgba(10,8,20,.72),rgba(10,8,20,0));
  border-radius:0 0 inherit inherit}

.showroom__item video{width:100%;height:100%;object-fit:cover;display:block}
.showroom__item--video{background:#0d0b18}


/* ===== Акции — витрина (первые 3 крупные + остальные) ===== */
.promo-block-head{margin:0 0 20px}
.promo-block-head h2{font-size:23px;margin:0 0 4px;line-height:1.2}
.promo-block-head p{color:var(--muted);margin:0;font-size:14.5px}
.promo-block-head--sub{margin-top:8px}

.promo-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:46px}
.promo-feat__card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 26px 54px -36px rgba(30,20,70,.5);
  transition:transform .35s var(--ease,ease),box-shadow .35s var(--ease,ease)}
.promo-feat__card:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(30,20,70,.55)}
.promo-feat__media{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;
  background-color:#efeaff}
.promo-feat__ph{position:absolute;inset:0;background:
  radial-gradient(circle at 78% 22%,rgba(125,92,255,.4),transparent 55%),
  linear-gradient(135deg,#f0ebff,#d9ccff)}
.promo-feat__badge{position:absolute;left:16px;top:16px;background:var(--purple);color:#fff;font-weight:800;
  font-size:14px;letter-spacing:.01em;padding:9px 17px;border-radius:30px;
  box-shadow:0 10px 22px -8px rgba(125,92,255,.75)}
.promo-feat__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;background:var(--card)}
.promo-feat__title{font-size:20px;margin:0;line-height:1.25}
.promo-feat__text{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0;flex:1}
.promo-feat__price{font-size:21px;font-weight:800;color:var(--purple-dark);margin:2px 0 8px}
.promo-feat__old{font-size:15px;font-weight:600;color:var(--muted);text-decoration:line-through;margin-left:10px}
.promo-feat__body .btn{align-self:stretch;justify-content:center}

.promo-more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.promo-card__thumb{display:block;height:130px;border-radius:14px;background-size:cover;background-position:center;
  margin-bottom:14px}

@media(max-width:920px){
  .promo-feat{grid-template-columns:1fr 1fr;gap:18px}
  .promo-more{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:600px){
  .promo-feat,.promo-more{grid-template-columns:1fr}
  .promo-feat__title{font-size:19px}
}

.promo-feat__deadline{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  background:rgba(184,121,27,.12);color:#b8791b;font-weight:700;font-size:12.5px;
  padding:5px 12px;border-radius:20px;margin-bottom:2px}
.promo-feat__deadline .icon{width:14px;height:14px}


/* ===== Акции — 3D-карусель (центр крупный) ===== */
.promo-carousel{position:relative;margin:0 0 50px}
.promo-carousel__stage{position:relative;height:700px;perspective:1800px}
.promo-carousel .promo-feat__card{position:absolute;top:55px;left:50%;width:430px;height:590px;margin-left:-215px;
  transition:transform .6s cubic-bezier(.22,.7,.24,1),opacity .5s ease;will-change:transform;cursor:pointer;backface-visibility:hidden}
.promo-carousel .promo-feat__card.is-active{cursor:default}
.promo-carousel .promo-feat__card:not(.is-active){filter:saturate(.9) brightness(.96)}
.promo-carousel .promo-feat__body{overflow:hidden}
.promo-carousel__nav{position:absolute;top:44%;transform:translateY(-50%);z-index:200;width:52px;height:52px;border:0;border-radius:50%;
  background:var(--card);box-shadow:0 14px 32px -12px rgba(30,20,70,.5);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--purple);transition:transform .2s,background .2s,color .2s}
.promo-carousel__nav:hover{transform:translateY(-50%) scale(1.08);background:var(--purple);color:#fff}
.promo-carousel__nav .icon{width:20px;height:20px}
.promo-carousel__nav--prev{left:4px}
.promo-carousel__nav--prev .icon{transform:rotate(180deg)}
.promo-carousel__nav--next{right:4px}
.promo-carousel__dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.promo-carousel__dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:.25s;padding:0}
.promo-carousel__dot.is-on{background:var(--purple);width:26px;border-radius:5px}
@media(max-width:760px){
  .promo-carousel__stage{height:640px}
  .promo-carousel .promo-feat__card{width:330px;height:540px;margin-left:-165px;top:50px}
  .promo-carousel__nav{width:44px;height:44px}
}
@media(max-width:440px){
  .promo-carousel__stage{height:620px}
  .promo-carousel .promo-feat__card{width:288px;height:520px;margin-left:-144px;top:50px}
  .promo-carousel__nav--prev{left:-6px}.promo-carousel__nav--next{right:-6px}
}

/* Акция-баннер: только полная картинка-макет + кнопка */
.promo-feat__card.is-banner .promo-feat__media{aspect-ratio:4/3}
.promo-feat__card.is-banner .promo-feat__body{display:flex;align-items:center;justify-content:center;padding:22px 24px 26px}
.promo-feat__card.is-banner .promo-feat__body .btn{align-self:center}

/* Зум центральной (активной) карточки акции при наведении */
.promo-carousel .promo-feat__card.is-active{transition:transform .45s cubic-bezier(.22,.7,.24,1),box-shadow .35s ease,opacity .5s ease}
.promo-carousel .promo-feat__card.is-active:hover{
  transform:translateX(0) translateZ(0) rotateY(0deg) scale(1.18) !important;
  z-index:300 !important;
  box-shadow:0 50px 90px -26px rgba(30,20,70,.62) !important;
}
/* Кликабельные фото акций + просмотрщик */
.promo-carousel .promo-feat__card.is-active .promo-feat__media.has-img{cursor:zoom-in}
.promo-card__thumb.has-img{cursor:zoom-in}
.imglb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(16,12,30,.86);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s ease;padding:24px}
.imglb.is-open{opacity:1;visibility:visible}
.imglb img{max-width:min(94vw,1100px);max-height:92vh;border-radius:14px;box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  transform:scale(.94);transition:transform .28s var(--ease)}
.imglb.is-open img{transform:scale(1)}
.imglb__close{position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:.2s}
.imglb__close:hover{background:var(--purple)}

/* ===== Каталог автоматики (модалка «Перейти в каталог») ===== */
.drives-bento__catalog-btn{margin:22px 0 20px;align-self:flex-start;position:relative;animation:catBtnPulse 1.8s var(--ease) infinite}
.drives-bento__catalog-btn:hover{animation:none}
@keyframes catBtnPulse{
  0%{box-shadow:0 10px 24px -10px rgba(125,92,255,.6),0 0 0 0 rgba(125,92,255,.5);transform:scale(1)}
  55%{box-shadow:0 14px 30px -10px rgba(125,92,255,.7),0 0 0 12px rgba(125,92,255,0);transform:scale(1.035)}
  100%{box-shadow:0 10px 24px -10px rgba(125,92,255,.6),0 0 0 0 rgba(125,92,255,0);transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .drives-bento__catalog-btn,.drives-bento__slider .acat-slider__nav{animation:none !important}
}
.drv-cat{position:fixed;inset:0;z-index:980;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,34px);opacity:0;visibility:hidden;transition:opacity .28s ease}
.drv-cat.is-open{opacity:1;visibility:visible}
.drv-cat__overlay{position:absolute;inset:0;background:rgba(16,12,30,.72);backdrop-filter:blur(5px)}
.drv-cat__panel{position:relative;z-index:1;width:min(1180px,100%);max-height:92vh;display:flex;flex-direction:column;
  background:var(--bg);border-radius:22px;overflow:hidden;box-shadow:0 50px 120px -30px rgba(16,12,30,.7);
  transform:translateY(14px) scale(.985);transition:transform .3s var(--ease)}
.drv-cat.is-open .drv-cat__panel{transform:none}
.drv-cat__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px clamp(18px,3vw,30px);
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--purple-50),var(--bg))}
.drv-cat__eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--purple);font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px}
.drv-cat__eyebrow .icon{width:15px;height:15px}
.drv-cat__title{margin:0;font-size:clamp(20px,2.6vw,27px);line-height:1.15}
.drv-cat__sub{margin:6px 0 0;color:var(--muted);font-size:14px}
.drv-cat__close{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:var(--white);color:var(--ink);
  font-size:28px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);transition:.2s}
.drv-cat__close:hover{background:var(--purple);color:#fff;transform:rotate(90deg)}
.drv-cat__scroll{overflow-y:auto;padding:clamp(16px,3vw,26px);-webkit-overflow-scrolling:touch}
.drv-cat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.drv-cat__card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 14px 30px -24px rgba(20,16,45,.5);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.drv-cat__card:hover{transform:translateY(-4px);box-shadow:0 26px 46px -26px rgba(20,16,45,.55)}
.drv-cat__media{position:relative;display:block;width:100%;border:0;padding:14px;cursor:zoom-in;
  background:radial-gradient(120% 100% at 50% 0%,#f4f2fb,#e9e7f2);aspect-ratio:4/3}
.drv-cat__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.drv-cat__body{display:flex;flex-direction:column;gap:11px;padding:14px 16px 16px;flex:1}
.drv-cat__name{margin:0;font-size:14.5px;line-height:1.32;font-weight:700;min-height:2.6em}
.drv-cat__specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.drv-cat__specs li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;border-bottom:1px dashed var(--line);padding-bottom:5px}
.drv-cat__specs li:last-child{border-bottom:0;padding-bottom:0}
.drv-cat__specs span{color:var(--muted)}
.drv-cat__specs b{color:var(--ink);font-weight:700;text-align:right}
.drv-cat__foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.drv-cat__price{font-size:23px;font-weight:800;color:var(--purple-dark);line-height:1}
.drv-cat__price span{font-size:13px;font-weight:700;color:var(--muted)}
.drv-cat__btn{justify-content:center;width:100%;padding:11px 14px;font-size:14px}
@media(max-width:560px){
  .drv-cat__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .drv-cat__name{font-size:13px;min-height:0}
  .drv-cat__price{font-size:20px}
}

/* ===== 3D-карусель приводов (распашные ворота и т.п.) ===== */
.drv3d-sec { position: relative; overflow: hidden; background: linear-gradient(180deg,#F5F6FB 0%,#E8EAF2 100%); }
.drv3d-sec__bg { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(55% 45% at 12% 22%, rgba(176,182,204,.4), transparent 62%), radial-gradient(45% 45% at 92% 6%, rgba(125,92,255,.06), transparent 55%); }
.drv3d-sec--photo { background: linear-gradient(180deg,#EDEFF5 0%,#E2E5EF 100%); }
.drv3d-sec__photo { position:absolute; inset:0; z-index:0; pointer-events:none; background: var(--drv-bg) center/cover no-repeat; opacity:.5; }
.drv3d-sec--photo::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(180deg, rgba(238,240,246,.3), rgba(230,233,242,.5)); }
.drv3d-sec .container { position: relative; z-index: 1; }
.drv3d { position: relative; margin: 8px 0 34px; }
.drv3d__stage { position: relative; height: 560px; perspective: 2200px; }
.drv3d__card { position: absolute; top: 40px; left: 50%; width: 300px; height: 476px; margin-left: -150px;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 26px 54px -36px rgba(30,20,70,.5);
  transition: transform .6s cubic-bezier(.22,.7,.24,1), opacity .5s ease; will-change: transform; cursor: pointer; backface-visibility: hidden; }
.drv3d__card:not(.is-active) { filter: saturate(.95) brightness(.97); }
.drv3d__card.is-active { cursor: default; transition: transform .45s cubic-bezier(.22,.7,.24,1), box-shadow .35s ease, opacity .5s ease; }
.drv3d__card.is-active:hover { transform: translateX(0) translateZ(0) rotateY(0deg) scale(1.16) !important; z-index: 300 !important; box-shadow: 0 50px 90px -26px rgba(30,20,70,.6) !important; }
.drv3d__media { position: relative; aspect-ratio: 4/3; background: radial-gradient(120% 100% at 50% 0%, #f4f2fb, #e9e7f2); cursor: zoom-in; padding: 14px; }
.drv3d__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.drv3d__body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; background: var(--card); overflow: hidden; }
.drv3d__name { margin: 0; font-size: 15.5px; line-height: 1.25; font-weight: 800;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drv3d__desc { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0; flex: 1; }
.drv3d__price { font-size: 22px; font-weight: 800; color: var(--purple-dark); }
.drv3d__price span { font-size: 13px; color: var(--muted); font-weight: 700; }
.drv3d__body .btn { align-self: stretch; justify-content: center; }
.drv3d__nav { position: absolute; top: 42%; transform: translateY(-50%); z-index: 210; width: 62px; height: 62px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 16px 30px -12px rgba(91,63,214,.55); animation: navPulse 1.6s var(--ease) infinite; transition: transform .2s, box-shadow .2s, filter .2s; }
.drv3d__nav:hover { filter: brightness(1.08); transform: translateY(-50%) scale(1.12); animation: none; box-shadow: 0 20px 40px -12px rgba(91,63,214,.7); }
.drv3d__nav .icon { width: 27px; height: 27px; }
.drv3d__nav--prev { left: 6px; }
.drv3d__nav--prev .icon { transform: rotate(180deg); }
.drv3d__nav--next { right: 6px; }
.drv3d__dots { display: flex; gap: 9px; justify-content: center; margin-top: 20px; }
.drv3d__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; padding: 0; transition: .25s; }
.drv3d__dot.is-on { background: var(--purple); width: 26px; border-radius: 5px; }
@media (max-width: 820px) {
  .drv3d__stage { height: 540px; }
  .drv3d__card { width: 286px; height: 496px; margin-left: -143px; top: 40px; }
  .drv3d__nav { width: 48px; height: 48px; }
  .drv3d__nav .icon { width: 20px; height: 20px; }
}
@media (max-width: 440px) {
  .drv3d__card { width: 258px; margin-left: -129px; }
  .drv3d__nav--prev { left: -4px; } .drv3d__nav--next { right: -4px; }
}
@media (prefers-reduced-motion: reduce) { .drv3d__nav { animation: none !important; } }


/* ===== Кредит / рассрочка — баннер на всех страницах ===== */
.credit-bar{background:var(--purple-50,#F3EFFF);border-top:1px solid var(--purple-100,#E7DEFF);border-bottom:1px solid var(--purple-100,#E7DEFF)}
.credit-bar__inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:16px 0;text-align:center}
.credit-bar__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#9C7BFF,#5B3FD6);color:#fff}
.credit-bar__ic svg{width:22px;height:22px}
.credit-bar__text{font-size:19px;font-weight:600;color:var(--ink,#14111F);letter-spacing:.2px}
.credit-bar__text b{color:var(--purple,#7D5CFF);font-weight:800}
.credit-bar__btn{background:var(--purple,#7D5CFF);color:#fff;padding:10px 20px;border-radius:12px;font-weight:700;font-size:15px;border:0;cursor:pointer}
.credit-bar__btn:hover{background:var(--purple-dark,#5B3FD6)}
@media(max-width:560px){.credit-bar__text{font-size:17px}.credit-bar__inner{gap:12px;padding:14px 16px}}


/* ===== Модалка «Контакты» (из меню, поверх страницы) ===== */
.modal__box--wide{max-width:900px;width:min(900px,94vw)}
.cmodal{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.cmodal__info{min-width:0}
.cmodal__list{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-direction:column;gap:14px}
.cmodal__list li{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--ink,#14111F)}
.cmodal__list li a{color:inherit;text-decoration:none;font-weight:600}
.cmodal__list li a:hover{color:var(--purple,#7D5CFF)}
.cmodal__list .icon{color:var(--purple,#7D5CFF);flex:none}
.cmodal__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cmodal__soc{display:flex;gap:10px}
.cmodal__map{border-radius:16px;overflow:hidden;min-height:300px;background:#eceef3}
.cmodal__map iframe{width:100%;height:100%;min-height:300px;border:0;display:block}
@media(max-width:720px){.cmodal{grid-template-columns:1fr;gap:20px}.cmodal__map{min-height:220px}.cmodal__map iframe{min-height:220px}}


/* ===== Модалка «Контакты»: все офисы (переопределяет прежний вид) ===== */
.modal__box--wide{max-width:920px;width:min(920px,94vw);max-height:90vh;overflow:auto}
.cmodal{display:block}
.cmodal__cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:18px 0}
.ccity{border:1px solid var(--line,#ECEAF2);border-radius:16px;padding:16px 18px;background:var(--bg-soft,#FAF9FE)}
.ccity__name{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--ink,#14111F);margin-bottom:12px}
.ccity__name .icon{color:var(--purple,#7D5CFF)}
.ccity__tels{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.ccity__tel{display:flex;align-items:center;gap:9px;color:var(--ink,#14111F);text-decoration:none;font-weight:700;font-size:17px}
.ccity__tel .icon{color:var(--purple,#7D5CFF);flex:none}
.ccity__tel:hover{color:var(--purple,#7D5CFF)}
.ccity__addr{font-size:14px;color:var(--muted,#6B6580);margin-bottom:10px;line-height:1.4}
.ccity__map{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--purple,#7D5CFF);text-decoration:none}
.ccity__map:hover{text-decoration:underline}
.cmodal__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line,#ECEAF2);padding-top:18px}
.cmodal__mail{display:inline-flex;align-items:center;gap:8px;color:var(--ink,#14111F);text-decoration:none;font-weight:600}
.cmodal__mail .icon{color:var(--purple,#7D5CFF)}
.cmodal__soc{display:flex;gap:10px;margin-left:auto}
@media(max-width:560px){.cmodal__cities{grid-template-columns:1fr}.cmodal__soc{margin-left:0}.cmodal__foot{gap:12px}}


/* ===== Окно условий кредита ===== */
.credit-terms{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-direction:column;gap:14px}
.credit-terms li{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:var(--ink,#14111F);line-height:1.45}
.credit-terms__ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--purple-50,#F3EFFF);color:var(--purple,#7D5CFF)}
.credit-terms b{color:var(--ink,#14111F);font-weight:800}
.credit-bar--top{margin:0}


/* ===== Карточка «Кредит» в способах оплаты — открывает окно условий ===== */
.pay-card--credit{cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.pay-card--credit:hover{transform:translateY(-3px);border-color:var(--purple,#7D5CFF);box-shadow:0 16px 34px rgba(125,92,255,.18)}
.pay-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:800;color:var(--purple,#7D5CFF)}
.pay-card--credit:hover .pay-card__link{gap:9px}


/* Описание в карточке каталога комплектующих */
.drv-cat__desc{color:var(--muted,#6B6580);font-size:13.5px;line-height:1.4;margin:2px 0 10px}


/* Пункты меню — всегда в одну строку (Ворота и двери, Роллетные системы) */
.header .nav__link{white-space:nowrap}
.nav__item{white-space:nowrap}


/* 16.10.2026 — шапка не влезала на ноутбуках (контейнер 1320px, справа обрезался телефон).
   Шапка во всю ширину; на меньших экранах прячем адрес/соцсети/поиск и ужимаем меню; 900–1199px — меню в бургер. */
.header .header__inner{max-width:none;gap:24px}
@media (max-width:1799px){.header .header__address{display:none}.header .nav{gap:26px}}
@media (max-width:1599px){.header .nav{gap:20px}.header .nav__link{font-size:14px}.header .header__actions{gap:12px}.header .city-switch__btn{padding:9px 14px}.header .header__phone{font-size:15.5px}.header .header__socials{display:none}}
@media (max-width:1399px){.header .nav{gap:14px}.header .nav__link{font-size:13.5px}.header .header__search{display:none}.header .logo__text em{display:none}}
@media (min-width:900px) and (max-width:1199px){.header .nav{display:none}.header .burger{display:grid}.header .header__search{display:grid}}
/* 16.10.2026 (2) — 1200–1279px: меню всё ещё не помещалось, телефон обрезался → тоже бургер */
@media (min-width:1200px) and (max-width:1279px){.header .nav{display:none}.header .burger{display:grid}}

/* ===== 23.10.2026: правки по дизайн-ревью ===== */
/* Плашка «в кредит»: контраст ≥ 4.5:1 (было 3,8 и 4,3) */
.credit-bar__text b { color: #5B3FD6; }
.credit-bar__btn { background: #6C4AF0; }
.credit-bar__btn:hover, .credit-bar__btn:focus-visible { background: #5B3FD6; }
/* Подвал на телефоне: ссылки удобно нажимать пальцем (≥ 40 px) */
@media (max-width: 900px) {
  .footer__list a, .footer__contacts a { display: inline-block; padding: 9px 0; }
  .footer__list li, .footer__contacts li { margin-bottom: 2px; }
}
/* «Почему выбирают нас» на телефоне: горизонтальная лента вместо 6 высоких карточек подряд */
@media (max-width: 640px) {
  .why-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .why-grid::-webkit-scrollbar { display: none; }
  .why-grid > .why-card { flex: 0 0 84%; scroll-snap-align: start; }
  .why-card__content { min-height: 240px; padding: 22px 22px; }
  .why-card__text { font-size: 15px; margin-top: 10px; }
}
/* Фото в карточках: пока грузится — мягкое мерцание вместо плоской сиреневой заливки */
@keyframes cmp-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.proj-card__media, .showroom__item { background: linear-gradient(100deg, #EEEAF8 30%, #F7F5FC 50%, #EEEAF8 70%) 0 0 / 200% 100%; animation: cmp-shimmer 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .proj-card__media, .showroom__item { animation: none; } }
/* Нижняя панель на телефоне: «Расчёт под ключ» — контраст 5,4:1 (было 4,3) */
body .mbar__btn--main { background: #6C4AF0; border-color: #6C4AF0; }
/* ===== 23.10.2026: главная — лента бренда, сроки, фото в калькуляторе, вопросы по темам, менеджер ===== */
.stats-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: clamp(22px,3vw,34px); padding: 14px 20px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.stats-brand__k { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.stats-brand__logo { height: 34px; width: auto; }
.stats-brand__an { font-weight: 800; font-size: 18px; letter-spacing: .02em; color: #fff; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.22); }
.stats-brand__badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: rgba(19,128,75,.22); border: 1px solid rgba(91,214,148,.4); color: #CFF5DF; font-weight: 700; font-size: 14px; }
.stats-brand__badge .icon { width: 16px; height: 16px; }
@media (max-width: 640px) { .stats-brand { gap: 10px 14px; padding: 14px; } .stats-brand__k { width: 100%; text-align: center; } .stats-brand__logo { height: 28px; } .stats-brand__an { font-size: 16px; padding-left: 14px; } }

.howx-step__time { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; padding: 5px 11px; border-radius: 999px; background: rgba(125,92,255,.12); color: #5B3FD6; font-size: 13px; font-weight: 800; white-space: nowrap; }
.section--dark .howx-step__time, .howx[class*="dark"] .howx-step__time { background: rgba(125,92,255,.25); color: #E3DAFF; }
.howx-step__time .icon { width: 14px; height: 14px; }

.calc__pic { margin: 14px 0 6px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.08); transition: opacity .25s; }
.calc__pic.is-swap { opacity: .4; }
.calc__pic img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 50% 45%; background: #fff; }
.calc__pic figcaption { padding: 8px 12px; font-size: 13px; color: rgba(255,255,255,.75); }

.faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; max-width: 860px; }
.faq-tabs__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.faq-tabs__btn span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #F1ECFF; color: #5B3FD6; font-size: 12px; }
.faq-tabs__btn:hover { border-color: #B9A6FF; }
.faq-tabs__btn.is-on { background: #5B3FD6; border-color: #5B3FD6; color: #fff; }
.faq-tabs__btn.is-on span { background: rgba(255,255,255,.22); color: #fff; }
.faq-tabs__btn:focus-visible { outline: 3px solid #B9A6FF; outline-offset: 2px; }
@media (max-width: 640px) { .faq-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 18px; padding: 2px 16px 6px; scrollbar-width: none; } .faq-tabs::-webkit-scrollbar { display: none; } .faq-tabs__btn { flex: none; font-size: 14px; } }

.cta-band--mgr { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(20px,4vw,48px); align-items: center; text-align: left; }
.cta-band--mgr p { margin-left: 0; }
.cta-mgr { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 22px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(4px); }
.cta-mgr__photo { flex: none; width: 128px; height: 160px; border-radius: 16px; object-fit: cover; object-position: 50% 20%; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.cta-mgr__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cta-mgr__name { font-size: 22px; font-weight: 800; color: #fff; }
.cta-mgr__role { font-size: 14px; color: rgba(255,255,255,.8); }
.cta-mgr__tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: clamp(20px,2.2vw,26px); color: #fff; text-decoration: none; white-space: nowrap; }
.cta-mgr__tel .icon { width: 20px; height: 20px; }
.cta-mgr__tel:hover, .cta-mgr__tel:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.cta-mgr__hint { font-size: 13px; color: rgba(255,255,255,.75); }
@media (max-width: 860px) {
  .cta-band--mgr { grid-template-columns: 1fr; text-align: center; }
  .cta-band--mgr p { margin-left: auto; }
  .cta-mgr { text-align: left; }
}
@media (max-width: 420px) { .cta-mgr { gap: 14px; padding: 12px; } .cta-mgr__photo { width: 96px; height: 120px; } .cta-mgr__name { font-size: 19px; } .cta-mgr__tel { font-size: 19px; } }
.howx .howx-step__time { background: rgba(185,166,255,.18); color: #EAE3FF; border: 1px solid rgba(185,166,255,.35); }
.cta-mgr__tel { font-size: clamp(18px,1.75vw,23px); white-space: normal; }
.cta-mgr__tel span, .cta-mgr__tel { word-break: keep-all; }
/* «Как мы работаем» на телефоне: значок слева, справа столбиком — название, срок, текст */
@media (max-width: 900px) {
  .howx-step { display: grid; grid-template-columns: 54px minmax(0,1fr); column-gap: 18px; align-items: start; }
  .howx-step__node { grid-row: 1 / span 3; }
  .howx-step__title, .howx-step__time, .howx-step__text { grid-column: 2; justify-self: start; }
  .howx-step__time { margin: 2px 0 6px; }
}
/* Карточка менеджера: телефон не рвём посередине */
.cta-mgr__tel { white-space: nowrap; font-size: clamp(17px,1.5vw,21px); }
@media (max-width: 860px) {
  .cta-mgr { flex-direction: column; text-align: center; max-width: 360px; margin: 0 auto; }
  .cta-mgr__info { align-items: center; }
  .cta-mgr__photo { width: 120px; height: 150px; }
  .cta-mgr__tel { font-size: 22px; }
}
@media (max-width: 900px) { .howx-step { row-gap: 0; } .howx-step__text { margin-top: 0; } }
@media (max-width: 860px) { .cta-mgr__tel { font-size: 20px; } }
/* 23.10.2026: шоурум — выбор дня визита и маршрут */
.showroom__plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -26px rgba(40,30,110,.5); }
.showroom__days { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.showroom__days-t { font-weight: 800; color: var(--ink); margin-right: 6px; }
.showroom__day { min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid #DDD5FF; background: #F7F4FF; color: #5B3FD6; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.showroom__day:hover, .showroom__day:focus-visible { background: #5B3FD6; border-color: #5B3FD6; color: #fff; }
.showroom__route { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.showroom__route-a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #5B3FD6; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .showroom__plan { padding: 14px; }
  .showroom__days-t { width: 100%; margin: 0 0 2px; }
  .showroom__days { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .showroom__days-t { grid-column: 1 / -1; }
  .showroom__route { width: 100%; justify-content: space-between; }
}
/* ===== 23.10.2026: телефон — удобные нажатия и тексты без вылезания (проверка 360/390 px) ===== */
@media (max-width: 640px) {
  .breadcrumbs a { display: inline-block; padding: 10px 2px; }
  .office__row a, .lead-note a { display: inline-block; padding: 9px 0; }
  .footer a[href*="privacy"] { display: inline-block; padding: 10px 0; }
  .page-hero h1 { font-size: clamp(24px, 7.6vw, 34px); overflow-wrap: break-word; hyphens: auto; }
  .sz-facts__cell b { font-size: clamp(16px, 5vw, 21px); overflow-wrap: anywhere; hyphens: auto; }
  .sz-facts__cell span { font-size: 11px; letter-spacing: .06em; overflow-wrap: anywhere; }
}
/* точки каруселей: невидимая зона нажатия 44 px вокруг маленькой точки (вид не меняется) */
.promo-carousel__dot, .drv3d__dot, .shl-carousel__dot { position: relative; }
.promo-carousel__dot::after, .drv3d__dot::after, .shl-carousel__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 40px; transform: translate(-50%,-50%); }
@media (max-width: 640px) { main a[href^="tel:"]:not(.btn):not([class*="btn"]):not(.cta-mgr__tel) { display: inline-block; padding: 9px 0; } }
/* 23.10.2026: карточка «Секционные ворота» — ворота «поднимаются» (закрытое фото уезжает вверх, открывая проём) */
.cat3d__photo--closed { clip-path: inset(0 0 0 0); transition: clip-path 1.3s cubic-bezier(.65,.05,.3,1), transform .6s var(--ease); }
.cat3d__card--gate.is-active:hover .cat3d__photo--closed, .cat3d__card--gate.is-open .cat3d__photo--closed, .cat3d__card--gate:focus-visible .cat3d__photo--closed { clip-path: inset(0 0 100% 0); }
.cat3d__card--gate .cat3d__photo--closed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.35)); }
@media (prefers-reduced-motion: reduce) { .cat3d__photo--closed { transition: none; } }

/* 23.10.2026: фото с объектов под отзывами */
.rvw-shots{margin-top:36px}
.rvw-shots__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.rvw-shots__head b{font-size:18px}
.rvw-shots__head a{display:inline-flex;align-items:center;gap:6px;color:var(--purple,#6C4AF0);font-weight:600;padding:8px 0}
.rvw-shots__row{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.rvw-shots__item{padding:0;border:0;border-radius:14px;overflow:hidden;aspect-ratio:3/4;cursor:zoom-in;background:#eee}
.rvw-shots__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease,ease)}
.rvw-shots__item:hover img,.rvw-shots__item:focus-visible img{transform:scale(1.06)}
.rvw-shots__item:focus-visible{outline:3px solid var(--purple,#6C4AF0);outline-offset:2px}
@media (max-width:1023px){.rvw-shots__row{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.rvw-shots__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px}.rvw-shots__item{flex:0 0 42%;scroll-snap-align:start}}

/* 23.10.2026: отзыв на картах */
.rvw-maps{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:18px 22px;border-radius:18px;background:#fff;border:1px solid rgba(108,74,240,.14)}
.rvw-maps__t{display:flex;flex-direction:column;gap:2px}
.rvw-maps__t b{font-size:17px}
.rvw-maps__t span{color:var(--muted,#5f5a6e);font-size:15px}
.rvw-maps__btns{display:flex;gap:10px;flex-wrap:wrap}
.rvw-maps__btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 18px 8px 8px;border-radius:999px;border:1px solid rgba(108,74,240,.25);font-weight:600;color:inherit;transition:background .2s,border-color .2s}
.rvw-maps__btn:hover,.rvw-maps__btn:focus-visible{background:var(--purple-50,#f3f0ff);border-color:var(--purple,#6C4AF0)}
.rvw-maps__ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff}
.rvw-maps__ic--y{background:#fc3f1d}
.rvw-maps__ic--g{background:#fff;color:#4285f4;border:1px solid #dadce0}
@media (max-width:640px){.rvw-maps{padding:16px}.rvw-maps__btns{width:100%}.rvw-maps__btn{flex:1 1 100%;justify-content:center}}

/* 23.10.2026: галерея «Наши работы» */
.wk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-bottom:28px}
.wk-chips{display:flex;flex-wrap:wrap;gap:8px}
.wk-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:100px;font-weight:700;font-size:14px;color:var(--ink-2);background:#fff;border:1.5px solid var(--line);transition:all .25s var(--ease)}
.wk-chip span{font-size:12px;min-width:22px;padding:2px 7px;border-radius:20px;background:var(--purple-50);color:var(--purple)}
.wk-chip:hover{border-color:var(--purple);color:var(--purple)}
.wk-chip.is-on{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 10px 24px rgba(125,92,255,.3)}
.wk-chip.is-on span{background:rgba(255,255,255,.22);color:#fff}
.wk-chip:focus-visible,.wk-tile:focus-visible,.wk-city select:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.wk-city{position:relative;display:inline-flex;align-items:center;color:var(--purple)}
.wk-city .icon{position:absolute;left:14px;pointer-events:none}
.wk-city select{min-height:44px;padding:8px 40px 8px 38px;border-radius:100px;border:1.5px solid var(--line);font:inherit;font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer;appearance:none;-webkit-appearance:none;background:#fff linear-gradient(45deg,transparent 50%,currentColor 50%) calc(100% - 22px) 50%/5px 5px no-repeat}
.wk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wk-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;grid-auto-flow:dense;gap:14px}
.wk-tile{position:relative;display:block;padding:0;border:0;border-radius:20px;overflow:hidden;background:var(--purple-50);cursor:zoom-in;text-align:left;color:#fff;isolation:isolate}
.wk-tile--big{grid-column:span 2;grid-row:span 2}
.wk-tile[hidden]{display:none}
.wk-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wk-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,30,0) 45%,rgba(14,10,30,.78));z-index:0}
.wk-tile:hover img,.wk-tile:focus-visible img{transform:scale(1.06)}
.wk-tile__tag{position:absolute;top:12px;left:12px;z-index:1;font-size:12px;font-weight:700;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.92);color:var(--purple)}
.wk-tile__cap{position:absolute;left:16px;right:52px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:3px}
.wk-tile__cap b{font-size:16px;line-height:1.25}
.wk-tile--big .wk-tile__cap b{font-size:22px}
.wk-tile__cap i{font-style:normal;font-size:13px;opacity:.9;display:inline-flex;align-items:center;gap:5px}
.wk-tile__zoom{position:absolute;right:12px;bottom:12px;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);opacity:0;transform:scale(.8);transition:all .3s var(--ease)}
.wk-tile__zoom svg{width:16px;height:16px}
.wk-tile:hover .wk-tile__zoom,.wk-tile:focus-visible .wk-tile__zoom{opacity:1;transform:none}
.wk-empty{text-align:center;color:var(--muted);padding:40px 0}
.wk-lock,.wk-lock body{overflow:hidden}
.wk-lb{position:fixed;inset:0;z-index:2147483000;display:grid;grid-template-columns:1fr 360px;background:rgba(10,8,20,.95);animation:wk-in .25s ease}
.wk-lb[hidden]{display:none}
@keyframes wk-in{from{opacity:0}}
.wk-lb__stage{position:relative;display:grid;place-items:center;padding:28px 84px;min-height:0;min-width:0}
.wk-lb__img{max-width:100%;max-height:calc(100vh - 56px);object-fit:contain;border-radius:10px;transition:opacity .2s}
.wk-lb.is-swap .wk-lb__img{opacity:.35}
.wk-lb__nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.wk-lb__nav:hover{background:var(--purple)}
.wk-lb__nav--prev{left:16px}
.wk-lb__nav--prev .icon{transform:rotate(180deg)}
.wk-lb__nav--next{right:16px}
.wk-lb__nav[hidden]{display:none}
.wk-lb__info{background:#fff;color:var(--ink);padding:76px 30px 30px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.wk-lb__count{font-size:13px;color:var(--muted);font-weight:600}
.wk-lb__tag{align-self:flex-start;font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;background:var(--purple-50);color:var(--purple)}
.wk-lb__title{font-size:24px;line-height:1.2;margin:4px 0 0}
.wk-lb__city{color:var(--purple);font-weight:700;margin:0}
.wk-lb__desc{color:var(--muted);margin:0;line-height:1.55}
.wk-lb__cta{margin-top:auto;justify-content:center}
.wk-lb__close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:var(--purple-50);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:2}
.wk-lb__close svg{width:20px;height:20px}
.wk-lb__close:focus-visible,.wk-lb__nav:focus-visible,.wk-lb__cta:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
@media (max-width:1023px){.wk-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px}.wk-lb{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.wk-lb__info{padding:18px 20px 22px;max-height:44vh}.wk-lb__img{max-height:calc(56vh - 40px)}.wk-lb__close{background:rgba(255,255,255,.16);color:#fff}}
@media (max-width:640px){.wk-bar{flex-direction:column;align-items:stretch}.wk-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}.wk-chip{flex:0 0 auto}.wk-city select{width:100%}.wk-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:10px}.wk-tile{border-radius:14px}.wk-tile__cap{left:12px;right:12px;bottom:10px}.wk-tile__cap b{font-size:14px}.wk-tile--big .wk-tile__cap b{font-size:18px}.wk-lb__stage{padding:64px 8px 8px}.wk-lb__nav{width:44px;height:44px}.wk-lb__title{font-size:20px}.wk-lb__desc{font-size:15px}}
@media (prefers-reduced-motion:reduce){.wk-tile img,.wk-tile__zoom{transition:none}.wk-lb{animation:none}}

/* 23.10.2026: видео в галерее и страница работы */
.wk-tile__play{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 11px 5px 8px;border-radius:100px;background:rgba(20,14,40,.72);color:#fff}
.wk-tile__play svg{width:14px;height:14px}
.wk-lb__video{width:auto;background:#000}
.wk-lb__video[hidden],.wk-lb__img[hidden]{display:none}
.wk-lb__more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--purple);padding:8px 0}
.prj-h1-city{color:var(--purple)}
.prj{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:start}
.prj__media{display:flex;flex-direction:column;gap:14px}
.prj__video{margin:0;border-radius:20px;overflow:hidden;background:#0d0a1a;position:relative}
.prj__video video{display:block;width:100%;max-height:78vh;object-fit:contain;background:#0d0a1a}
.prj__video figcaption{position:absolute;top:12px;left:12px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.92);color:var(--purple)}
.prj__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prj__shots--one{grid-template-columns:1fr}
.prj__shot{padding:0;border:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;background:var(--purple-50)}
.prj__shot--main{grid-column:1/-1;aspect-ratio:16/10}
.prj__shots--one .prj__shot{aspect-ratio:auto}
.prj__shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.prj__shot:hover img{transform:scale(1.04)}
.prj__shot:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.prj__side{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px}
.prj__facts{margin:0;display:grid;gap:0}
.prj__facts div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.prj__facts dt{color:var(--muted);font-size:14px}
.prj__facts dd{margin:0;font-weight:700;text-align:right}
.prj__lead{margin:0;color:var(--ink-2);line-height:1.55}
.prj__cta{justify-content:center}
.prj__note{margin:0;font-size:13px;color:var(--muted);text-align:center}
.prj__story{max-width:760px;margin-top:40px}
.prj__story h2{font-size:26px;margin-bottom:12px}
.prj__story p{color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.prj-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prj-rel__card{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;color:#fff}
.prj-rel__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prj-rel__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(14,10,30,.8))}
.prj-rel__card span{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:3px}
.prj-rel__card i{font-style:normal;font-size:13px;opacity:.9;display:inline-flex;align-items:center;gap:5px}
.prj-rel__card:hover img{transform:scale(1.05)}
@media (max-width:1023px){.prj{grid-template-columns:1fr}.prj__side{position:static}}
@media (max-width:640px){.prj__shots{grid-template-columns:repeat(2,1fr);gap:8px}.prj-rel{grid-template-columns:1fr}.prj__side{padding:20px}.prj__story h2{font-size:22px}}
.prj__shots.prj__shots--one{grid-template-columns:1fr}
.prj__shots--one .prj__shot{aspect-ratio:4/3;max-height:70vh}