/* ══════════════════════════════════════════════════════════════════
МЕТР ПЛЮС · ЕДИНАЯ ТАБЛИЦА СТИЛЕЙ
───────────────────────────────────────────────────────────────
БАЗА (общее для всей страницы):
· Токены, темы секций, кнопки, nav, hero
· Футер и представительства «МЕТР ПЛЮС OS» (.hq — секция 15+16)
· UI: моб. панель (.mbar), модалка (.sheet), кнопка наверх (.toTop)
· Национальная валюта (.nbrb-icon)
· Reveal-анимации и медиа-правила
БЛОКИ (в порядке следования на странице; номера в баннерах ниже —
исторические, при переносе секций их не перенумеровываем):
01 · HERO · перелистываемые сцены .hero
02 · ТЕХНОЛОГИИ · слайдер световых решений .tech
03 · КОНФИГУРАТОР · сцены + калькулятор .mpx
04 · ПРИМЕРЫ РАБОТ · вертикальная витрина .wx
05 · ПРАЙС · полотна и прейскурант .prx
06 · ПРОЩЕ ПРОСТОГО · сторис процесса .ez
07 · РАССРОЧКА · карта и калькулятор .rs
08 · ПОМЕЩЕНИЯ · световой атлас .atl
09 · АКЦИИ · рулетка выгоды .pk
10 · ГАЛЕРЕЯ-ПОРТАЛ · портфолио .pg
11 · ОСВЕЩЕНИЕ · подбор и монтаж .lt / .lm / .lcat
12 · ОТЗЫВЫ · coverflow + рилсы .rvx
13 · ДО / ПОСЛЕ · шторка .ba
14 · НАМ ДОВЕРЯЮТ · барабан объектов .vp
15 · SEO-ГИД · редакционный лонгрид .sx
16 · ВОПРОС-ОТВЕТ · чат с технологом .qa / .qc / .qx
17 · ПРЕДСТАВИТЕЛЬСТВА + ФУТЕР «МЕТР ПЛЮС OS» .hq
═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
БАЗА · ТОКЕНЫ, ТЕМЫ СЕКЦИЙ, КНОПКИ, NAV, HERO
══════════════════════════════════════════════════════════════════ */
:root{
--bg:#0B0D10; --bg-2:#0E1116; --panel:#14171C;
--txt:#EAEEF3; --txt-dim:#A7B0BD; --txt-mute:#6B7480;
--line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
--glow:rgba(210,225,245,.55); --glow-soft:rgba(180,205,240,.18);
--vio:#a98cff; --vio-2:#cbb8ff; --vio-dim:rgba(169,140,255,.35);
--vgrad:linear-gradient(115deg,#8b74e8,#b9a4ff 55%,#8fb0ff);
--ease:cubic-bezier(.22,.61,.36,1);
--spring:cubic-bezier(.34,1.5,.6,1);
--maxw:1200px;
--r:18px; --r-lg:28px; /* скругления hero-плиток, techcard, «До/После» */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:'Onest',system-ui,sans-serif;line-height:1.55;
overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--glow-soft)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
/* ═══════════════ ЧЕРЕДОВАНИЕ ТЁМНЫХ/СВЕТЛЫХ СЕКЦИЙ ═══════════════
КАК МЕНЯТЬ СТРАНИЦУ:
• Порядок блоков — переносить целиком выше/ниже (hero не трогать).
• Тема блока — менять класс: sec--dark (тёмный) ↔ sec--light (светлый).
Оформление, отступы и цвета переключаются автоматически.
• Переключаемые блоки: #tech #quiz #beforeafter #price #reviews и CTA.
• Фиксированно-тёмные по своей механике: #hero, #gallery (звёзды/3D), #demo. */
.sec{padding:72px 0;position:relative}
.sec--dark{background:var(--bg)}
.sec--deep{background:linear-gradient(180deg,var(--bg),#08090C)}
.sec--light{
background:#EEF0F3;border-radius:clamp(28px,5vw,52px);
--txt:#13161B; --txt-dim:#565E6B; --txt-mute:#9199A5;
--line:rgba(19,22,27,.09); --line-2:rgba(19,22,27,.14);
--panel:#FFFFFF; --panel-2:#F4F5F7;
--glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.86);
--glow:rgba(96,120,230,.55); --glow-soft:rgba(96,120,230,.15);
}
.eyebrow{font-family:'Inter';font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
color:var(--txt-mute);display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--glow);box-shadow:0 0 8px var(--glow)}
.sec__head{margin-bottom:26px}
.sec__head h2{font-family:'Unbounded';font-weight:300;font-size:clamp(27px,7vw,46px);line-height:1.05;
letter-spacing:-.01em;margin-top:14px}
.sec__head h2 b{font-weight:500}
.sec__head p{color:var(--txt-dim);margin-top:12px;max-width:52ch;font-size:15px}
.lightline{height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--glow) 50%,var(--line-2) 80%,transparent);
box-shadow:0 0 10px var(--glow-soft);opacity:.6}
/* ═══════════════ КНОПКИ ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 25px;border-radius:100px;
font-size:15px;font-weight:500;transition:transform .5s var(--spring),box-shadow .4s var(--ease),background .3s;will-change:transform}
.btn svg{width:16px;height:16px}
.btn--primary{color:#0B0D10;background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);
box-shadow:0 10px 30px -10px rgba(200,215,240,.45),0 1px 0 rgba(255,255,255,.6) inset}
.btn--primary:hover{box-shadow:0 16px 40px -10px rgba(200,215,240,.6)}
.sec--light .btn--primary{color:#fff;background:#13161B;box-shadow:0 14px 34px -14px rgba(20,30,60,.5)}
.btn--ghost{color:var(--txt);background:rgba(127,140,160,.08);border:1px solid var(--line-2);backdrop-filter:blur(10px)}
.btn--ghost:hover{background:rgba(127,140,160,.16)}
.btn--block{width:100%}
/* ═══════════════ NAV · мега-меню с выпадающими списками ═══════════════ */
.nav{position:fixed;inset:12px 0 auto;z-index:100;display:flex;justify-content:center;pointer-events:none}
.nav__inner{pointer-events:auto;position:relative;width:calc(100% - 24px);max-width:var(--maxw);
display:flex;align-items:center;gap:12px;
padding:10px 10px 10px 16px;background:var(--glass);border:1px solid var(--line);border-radius:26px;
backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px -20px rgba(0,0,0,.7);
transition:padding .4s var(--ease)}
.nav.scrolled .nav__inner{padding:8px 8px 8px 14px}
/* логотипы: короткий на мобиле, полный на десктопе */
.nav__logo{display:flex;align-items:center;min-height:40px}
.nav__logo img{display:block}
.nav__logo .lg-full{display:none;height:22px;width:auto}
.nav__logo .lg-mini{display:block;height:26px;width:auto;border-radius:9px}
/* пункты */
.nav__menu{display:none;align-items:center;gap:4px;margin-left:8px}
.nav__item{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;
border-radius:12px;font-size:14px;font-weight:500;color:#A7B0BD;white-space:nowrap;
transition:color .3s,background .3s}
.nav__top svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.nav__item:hover>.nav__top,.nav__item.open>.nav__top{color:#fff;background:rgba(255,255,255,.06)}
.nav__item.open>.nav__top svg{transform:rotate(180deg)}
/* выпадающая панель */
.nav__drop{position:absolute;left:50%;top:calc(100% + 14px);translate:-50% 0;min-width:250px;
padding:10px;border-radius:20px;
background:rgba(15,18,24,.88);border:1px solid var(--line);
backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 34px 80px -28px rgba(0,0,0,.9);
opacity:0;visibility:hidden;translate:-50% 8px;
transition:opacity .3s var(--ease),translate .35s var(--ease),visibility .3s}
.nav__item.open>.nav__drop{opacity:1;visibility:visible;translate:-50% 0}
.nav__drop a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:13px;
font-size:14px;color:#C4CBD6;white-space:nowrap;transition:background .25s,color .25s}
.nav__drop a i{width:6px;height:6px;border-radius:50%;background:rgba(196,214,240,.35);
flex:none;transition:background .25s,box-shadow .25s}
.nav__drop a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav__drop a:hover i{background:var(--glow);box-shadow:0 0 10px var(--glow)}
.nav__drop small{display:block;padding:8px 13px 4px;font-family:'Inter';font-size:10.5px;
font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6B7480}
.nav__spacer{flex:1}
.nav__phone{display:none;font-size:14px;color:#A7B0BD;white-space:nowrap;transition:color .3s}
.nav__phone:hover{color:#fff}
.nav__cta{padding:11px 20px;border-radius:100px;font-size:14px;font-weight:500;color:#0B0D10;
background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);white-space:nowrap;
box-shadow:0 8px 24px -8px rgba(200,215,240,.4);transition:transform .4s var(--spring)}
.nav__burger{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.03)}
.nav__burger span{width:16px;height:1.6px;background:#EAEEF3;transition:.4s var(--ease)}
.nav.open .nav__burger span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}
/* ── мобильное меню: панель с аккордеонами ── */
.mobile{position:fixed;inset:0;z-index:99;overflow:auto;-webkit-overflow-scrolling:touch;
padding:88px 22px calc(28px + env(safe-area-inset-bottom));
background:rgba(11,13,16,.86);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.mobile.on{opacity:1;visibility:visible}
.mobile__in{max-width:520px;margin:0 auto;display:grid;gap:2px;
translate:0 16px;opacity:0;transition:translate .5s var(--ease),opacity .5s}
.mobile.on .mobile__in{translate:0 0;opacity:1}
.mobile__logo{display:block;width:180px;height:auto;margin:0 0 18px}
.mobile a{color:#EAEEF3}
.mobile__link,.mobile__grp>button{display:flex;align-items:center;justify-content:space-between;gap:12px;
width:100%;min-height:56px;padding:8px 2px;text-align:left;
font-family:'Unbounded';font-weight:300;font-size:22px;color:#EAEEF3;
border-bottom:1px solid rgba(255,255,255,.08)}
.mobile__grp>button svg{width:18px;height:18px;flex:none;stroke:#A7B0BD;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.mobile__grp.open>button svg{transform:rotate(180deg)}
.mobile__sub{overflow:hidden;height:0;transition:height .45s var(--ease)}
.mobile__sub a{display:flex;align-items:center;gap:11px;min-height:48px;padding:6px 4px;
font-size:16px;color:#C4CBD6}
.mobile__sub a i{width:6px;height:6px;border-radius:50%;background:rgba(196,214,240,.35);flex:none}
.mobile__sub a:active i{background:var(--glow);box-shadow:0 0 10px var(--glow)}
.mobile__foot{display:grid;gap:12px;margin-top:24px}
.mobile__soc{display:flex;justify-content:center;gap:12px;margin-top:20px}
.mobile__soc a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.05);border:1px solid var(--line-2);transition:border-color .3s,background .3s}
.mobile__soc a:active{border-color:var(--glow);background:rgba(255,255,255,.1)}
.mobile__soc svg{width:23px;height:23px;stroke:#EAEEF3;fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.mobile__soc svg.fill{fill:#EAEEF3;stroke:none}
.mobile__tel{font-family:'Unbounded';font-weight:400;font-size:21px;color:#fff}
.mobile__foot .btn-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
border-radius:100px;font-size:15px;font-weight:500;color:#0B0D10;
background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF)}
/* ═══════════════ HERO (switchable + видео + лента преимуществ) ═══════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);pointer-events:none;z-index:1}
.hero__slide.on{opacity:1;pointer-events:auto;z-index:2}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.06);transition:transform 7s var(--ease)}
.hero__slide.on .hero__media img,.hero__slide.on .hero__media video{transform:scale(1)}
.hero__scrim{position:absolute;inset:0;background:
radial-gradient(120% 80% at 50% -10%,rgba(200,220,250,.15),transparent 55%),
linear-gradient(180deg,rgba(11,13,16,.2) 0%,rgba(11,13,16,.55) 55%,var(--bg) 100%)}
.hero__sweep{position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
background:linear-gradient(90deg,transparent,var(--glow),transparent);filter:blur(1px);opacity:.6;
animation:sweep 7s var(--ease) infinite}
@keyframes sweep{0%{transform:translateY(6vh);opacity:0}20%{opacity:.8}50%{transform:translateY(46vh);opacity:.5}80%{opacity:.6}100%{transform:translateY(86vh);opacity:0}}
.hero__inner{position:inherit;z-index:5;width:100%; bottom: 100px; padding: 6%;}
.hero h1,.hero .hero-h{font-family:'Unbounded';font-weight:300;font-size:clamp(34px,9vw,74px);line-height:1.03;letter-spacing:-.015em;max-width:15ch}
.hero h1 b,.hero .hero-h b{font-weight:500;background:linear-gradient(135deg,#fff,#AEB7C4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{margin-top:16px;color:var(--txt-dim);font-size:clamp(15px,4vw,18px);max-width:44ch}
.hero__actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
/* компактная лента преимуществ в hero */
.hero__adv{display:flex;gap:10px;margin-top:30px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.hero__adv::-webkit-scrollbar{display:none}
.hero__pill{padding: 22px 24px;
border-radius: var(--r);
background: var(--glass);
border: 1px solid var(--line);
backdrop-filter: blur(16px) saturate(130%);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
white-space: nowrap;
}
.hero__pill b{font-family:'Unbounded';font-weight:400;font-size:17px;line-height:1}
.hero__pill span{font-size:12px;color:var(--txt-mute)}
.hero__pill .nbrb-icon{font-size:.72em;letter-spacing:.02em}
/* сегментный переключатель сцен */
.hero__tabs{position:absolute;left:0;right:0;bottom:26px;z-index:6;display:flex;justify-content:center;padding:0 18px}
.hero__tabs-in{display:flex;gap:6px;padding:6px;border-radius:100px;background:var(--glass);border:1px solid var(--line);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
max-width:100%;overflow:auto;scrollbar-width:none}
.hero__tabs-in::-webkit-scrollbar{display:none}
.hero__tab{position:relative;padding:10px 20px;border-radius:100px;font-size:13px;font-weight:500;color:var(--txt-dim);
white-space:nowrap;transition:color .35s;z-index:1}
.hero__tab.on{color:#0B0D10}
.hero__ind{position:absolute;top:6px;bottom:6px;border-radius:100px;background:linear-gradient(135deg,#EDEFF4,#B7C0CD);
transition:left .5s var(--spring),width .5s var(--spring);z-index:0}
/* ══════════════════════════════════════════════════════════════════
БАЗА · НАЦИОНАЛЬНАЯ ВАЛЮТА · .nbrb-icon
══════════════════════════════════════════════════════════════════ */
/* ═══════════════ нац. валюта · знак белорусского рубля (шрифт НБРБ) ═══════════════ */
@font-face{
font-family:"nbrb";
font-style:normal;
font-weight:400;
font-display:block;
src:url("/assets/fonts2026/nbrb.woff2") format("woff2"),
url("/assets/fonts2026/nbrb.woff") format("woff"),
url("/assets/fonts2026/nbrb.ttf") format("truetype");
unicode-range:U+E901, U+42, U+59, U+4E;
}
.nbrb-icon{
font-family:"nbrb"!important;
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
line-height:1;
letter-spacing:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-font-feature-settings:"liga";
-moz-font-feature-settings:"liga=1";
-moz-font-feature-settings:"liga";
-ms-font-feature-settings:"liga" 1;
font-feature-settings:"liga";
-webkit-font-variant-ligatures:discretionary-ligatures;
font-variant-ligatures:discretionary-ligatures;
}
.nbrb-icon-byn:before{content:"\e901"}
/* ══════════════════════════════════════════════════════════════════
02 · ТЕХНОЛОГИИ · слайдер световых решений · .tech
══════════════════════════════════════════════════════════════════ */
/* ═══════════════ ТЕХНОЛОГИИ · СЛАЙДЕР СВЕТОВЫХ РЕШЕНИЙ ═══════════════ */
.tech__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px}
.tech__arrows{display:flex;gap:8px;flex:0 0 auto}
.tech__arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--glass);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
color:var(--txt-dim);transition:transform .4s var(--spring),background .3s,color .3s,border-color .3s}
.tech__arrow:hover{background:var(--glow-soft);color:var(--txt);border-color:var(--glow);transform:scale(1.08)}
.tech__arrow svg{width:17px;height:17px}
.techcard{position:relative;display:grid;grid-template-columns:1fr;border-radius:calc(var(--r) + 8px);overflow:hidden;
background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--line);
backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -40px rgba(0,0,0,.6)}
.tech__vis{position:relative;min-height:320px;background:#08090C;overflow:hidden}
.tech__ph{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.tech__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);
transform:scale(1.07);transition:transform 6s var(--ease)}
.tech__ph.on{opacity:1}
.tech__ph.on img{transform:scale(1)}
.tech__vis::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,9,12,.25),transparent 30% 70%,rgba(8,9,12,.35))}
.tech__count{position:absolute;top:18px;left:20px;z-index:3;font-family:'Inter';font-size:11px;font-weight:600;
letter-spacing:.22em;color:var(--txt-dim);padding:7px 13px;border-radius:100px;
background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px)}
.tech__info{padding:26px 22px 28px;display:flex;flex-direction:column;opacity:1;transition:opacity .35s var(--ease)}
.tech__info.fade{opacity:0}
.tech__badge{align-self:flex-start;font-family:'Inter';font-size:11px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;padding:6px 13px;border-radius:100px;border:1px solid var(--line-2);
color:var(--txt-dim);background:rgba(127,140,160,.07);margin-bottom:16px}
.tech__info h3{font-family:'Unbounded';font-weight:300;font-size:clamp(22px,3vw,32px);line-height:1.1;margin-bottom:12px}
.tech__info h3 b{font-weight:500}
.tech__desc{color:var(--txt-dim);font-size:15px;line-height:1.6;max-width:38ch;margin-bottom:22px}
.tech__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px}
.tech__spec{padding:13px 15px;border-radius:var(--r-sm);background:rgba(127,140,160,.07);border:1px solid var(--line)}
.tech__spec small{display:block;font-family:'Inter';font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:4px}
.tech__spec b{font-size:14px;font-weight:600}
.tech__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;
padding-top:22px;border-top:1px solid var(--line)}
.tech__price small{display:block;font-family:'Inter';font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:5px}
.tech__price b{font-family:'Unbounded';font-weight:500;font-size:clamp(19px,2.4vw,24px);white-space:nowrap}
.tech__price b span{font-weight:300;font-size:.72em;color:var(--txt-dim)}
.tech__dots{display:flex;gap:7px;justify-content:center;padding:16px 0 0}
.tech__dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:.35s var(--ease);cursor:pointer}
.tech__dot.on{background:var(--glow);box-shadow:0 0 8px var(--glow);transform:scale(1.25)}
/* (лид-форма живёт в футере «Шильдик») */
.frm{display:grid;gap:10px;max-width:420px}
.frm input{padding:15px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:rgba(127,140,160,.08);color:var(--txt);font-size:16px;transition:.3s}
.frm input::placeholder{color:var(--txt-mute)}
.frm input:focus{outline:none;border-color:var(--glow);background:var(--glow-soft)}
.frm .note{font-size:12px;color:var(--txt-mute)}
.ok{text-align:center;padding:24px 6px}
.ok__ic{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(135deg,#EDEFF4,#B7C0CD);display:flex;align-items:center;justify-content:center}
.ok__ic svg{width:28px;height:28px;stroke:#0B0D10;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ok h3{font-family:'Unbounded';font-weight:300;font-size:24px;margin-bottom:8px;color:#fff}
.ok p{color:var(--txt-dim);font-size:14px}
/* ══════════════════════════════════════════════════════════════════
13 · ДО / ПОСЛЕ · шторка · .ba
══════════════════════════════════════════════════════════════════ */
/* ═══════════════ ДО / ПОСЛЕ · ШТОРКА ═══════════════ */
.ba{position:relative;background:var(--bg);overflow:hidden}
.ba__head{position:relative;z-index:3;text-align:center;max-width:660px;margin:0 auto 34px}
.ba__head h2{font-family:'Unbounded';font-weight:300;font-size:clamp(28px,7vw,48px);line-height:1.04;
letter-spacing:-.015em;margin:14px 0 12px}
.ba__head h2 b{font-weight:500;background:linear-gradient(135deg,#fff,#AEB7C4);
-webkit-background-clip:text;background-clip:text;color:transparent}
.sec--light .ba__head h2 b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--txt)}
.ba__head p{color:var(--txt-dim);font-size:15px;max-width:52ch;margin:0 auto}
.ba__stage{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch;
max-width:1120px;margin:0 auto}
.ba__col{position:relative;min-width:0;display:flex;flex-direction:column}
/* правый вертикальный кадр задаёт высоту всей сцены */
.ba__col--tall{justify-content:flex-start}
.ba__frame--port{aspect-ratio:3/4.6;width:100%} /* высокий вертикальный */
/* левая колонка: горизонтальный кадр + тумблер; кадр ниже правого → образуется коридор */
.ba__col--float{justify-content:flex-start}
.ba__frame--wide{aspect-ratio:16/10;width:100%} /* горизонтальный, заметно ниже правого */
/* медленный мягкий дрейф левого кадра+тумблера вдоль коридора */
@media(hover:hover) and (min-width:721px){
.ba__col--float{animation:baDrift 16s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.ba__col--float:hover{animation-play-state:paused}
.ba__col--float:hover .ba__frame--wide{transform:scale(1.025)}
}
/* амплитуда — доля высоты коридора; движение только вниз от старта, без «отскоков» */
@keyframes baDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(clamp(40px,9vh,120px))}}
/* основной фрейм */
.ba__frame{position:relative;border-radius:var(--r-lg);overflow:hidden;
border:1px solid var(--line-2);background:#05070A;
box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;
cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;
transition:transform .5s var(--spring)}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__img--after{opacity:0}
.ba__frame.is-after .ba__img--after{opacity:1}
/* подписи-теги на фрейме */
.ba__tag{position:absolute;z-index:5;font-family:'Inter';font-size:11px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;padding:8px 13px;border-radius:100px;
background:var(--glass);border:1px solid var(--line-2);color:#fff;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:inline-flex;align-items:center;gap:8px;transition:opacity .3s var(--ease)}
.ba__tag i{width:6px;height:6px;border-radius:50%}
.ba__tag--before{left:16px;top:16px}
.ba__tag--before i{background:#8894A6;box-shadow:0 0 8px #8894A6}
.ba__tag--after{right:16px;bottom:16px;opacity:0}
.ba__tag--after i{background:var(--glow);box-shadow:0 0 10px var(--glow)}
.ba__frame.is-after .ba__tag--before{opacity:0}
.ba__frame.is-after .ba__tag--after{opacity:1}
/* матовое покрытие: занимает весь фрейм, видима только «пройденная» часть через clip-path */
.ba__wipe{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
background:rgba(226,234,246,.05);
backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
clip-path:inset(0 100% 0 0);
will-change:clip-path,opacity}
/* светящаяся кромка на движущемся крае покрытия */
.ba__wipe::before{content:"";position:absolute;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,transparent,var(--glow),transparent);
box-shadow:0 0 18px 3px var(--glow),0 0 40px 6px var(--glow-soft);opacity:.95}
.ba__wipe.to-right::before{right:0}
.ba__wipe.to-left::before{left:0}
.ba__frame.is-wiping{cursor:progress}
/* тумблер до/после (живёт в левой колонке, дрейфует с ней) */
.ba__toggle{position:relative;z-index:5;display:inline-flex;gap:4px;padding:5px;align-self:center;
border-radius:100px;background:var(--glass);border:1px solid var(--line);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:22px auto 0}
.ba__toggle .ba__ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);
border-radius:100px;background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);
box-shadow:0 6px 18px -8px rgba(200,215,240,.6);transition:transform .32s var(--spring)}
.ba__toggle.on-after .ba__ind{transform:translateX(100%)}
.sec--light .ba__ind{background:linear-gradient(135deg,#13161B,#2A2F38)}
.sec--light .ba__toggle:not(.on-after) .ba__tg[data-v="before"],
.sec--light .ba__toggle.on-after .ba__tg[data-v="after"]{color:#fff}
.ba__tg{position:relative;z-index:2;min-width:120px;padding:11px 22px;border-radius:100px;
font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--txt-dim);transition:color .3s var(--ease)}
.ba__toggle:not(.on-after) .ba__tg[data-v="before"]{color:#0B0D10}
.ba__toggle.on-after .ba__tg[data-v="after"]{color:#0B0D10}
.ba__tg:disabled{cursor:progress}
.ba__hint{margin:18px auto 0;text-align:center;font-family:'Inter';font-size:11px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute)}
@media(max-width:720px){
.ba__stage{display:flex;flex-direction:column;gap:12px;align-items:stretch}
/* отключаем дрейф и раскрываем колонки в общий поток */
.ba__col--float{animation:none;transform:none;display:contents}
.ba__col--tall{display:contents}
/* горизонтальный кадр сверху, вертикальный под ним, тумблер внизу */
.ba__frame--wide{order:1;aspect-ratio:4/3;width:100%}
.ba__frame--port{order:2;aspect-ratio:3/4;width:100%}
.ba__toggle{order:3;width:100%;max-width:340px;margin:14px auto 0}
.ba__hint{order:4;margin:8px auto 0}
.ba__tg{min-width:0;flex:1;padding:11px 14px}
}
/* ── МОБАЙЛ: вертикальный ползунок-шторка (1 кадр). Десктоп не трогаем ── */
.ba__vline{display:none}
.ba__fader{display:none}
.ba__mhint{display:none}
@media(max-width:720px){
/* оставляем ОДИН кадр: прячем широкий кадр, тумблер и текст-подсказку */
.ba__frame--wide{display:none}
.ba__toggle{display:none}
.ba__hint{display:none}
.ba__frame--port{cursor:default}
/* оба слоя видимы: конкурент (До) — база снизу, наш (После) — сверху по clip-path */
.ba__frame--port .ba__img--after{opacity:1;
clip-path:inset(0 0 40% 0);-webkit-clip-path:inset(0 0 40% 0);will-change:clip-path}
/* теги всегда видимы: наш — сверху-справа, конкурент — снизу-слева */
.ba__frame--port .ba__tag{font-size:12px}
.ba__frame--port .ba__tag--before{top:auto;bottom:14px;left:14px;opacity:1}
.ba__frame--port .ba__tag--after{top:14px;bottom:auto;right:14px;opacity:1}
.ba__frame--port.is-after .ba__tag--before{opacity:1}
/* ── граница-шторка: тонкая светящаяся линия поперёк кадра (без ручки) ── */
.ba__vline{display:block;position:absolute;left:0;right:0;top:60%;z-index:7;
height:2px;transform:translateY(-1px);pointer-events:none;
background:linear-gradient(90deg,transparent,var(--glow) 18%,var(--glow) 82%,transparent);
box-shadow:0 0 12px 2px var(--glow),0 0 30px 5px var(--glow-soft)}
/* ── компактный вертикальный фейдер: статичен в правом нижнем углу ── */
.ba__fader{display:block;position:absolute;right:14px;bottom:14px;z-index:9;
width:46px;height:162px;border-radius:100px;
pointer-events:auto;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;
background:linear-gradient(180deg,rgba(150,162,180,.20),rgba(8,11,15,.34) 46%,var(--glow-soft));
border:1px solid rgba(255,255,255,.42);
backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
box-shadow:0 14px 32px -14px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.08)}
.ba__fader::before{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:2px;
transform:translateX(-50%);border-radius:2px;
background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.07))}
.ba__frame--port.ba--dragging .ba__fader{cursor:grabbing}
.ba__fader-knob{position:absolute;left:50%;top:71px;transform:translateX(-50%);
width:40px;height:40px;border-radius:50%;pointer-events:none;z-index:2;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);
box-shadow:0 6px 16px -6px rgba(0,0,0,.6),0 0 0 4px rgba(255,255,255,.06),
inset 0 1px 0 rgba(255,255,255,.6);transition:box-shadow .2s var(--ease)}
.ba__frame--port.ba--dragging .ba__fader-knob{
box-shadow:0 9px 22px -6px rgba(0,0,0,.72),0 0 0 6px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.6)}
.ba__fader-knob svg{width:22px;height:22px;fill:none;stroke:#0B0D10;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;opacity:.72}
/* подсказка под кадром */
.ba__mhint{display:block;order:3;margin:12px auto 0;text-align:center;
font-family:'Inter';font-size:12px;font-weight:600;line-height:1.4;
letter-spacing:.03em;color:var(--txt-mute);max-width:330px}
}
/* ══════════════════════════════════════════════════════════════════
08 · ПОМЕЩЕНИЯ · световой атлас · .atl
══════════════════════════════════════════════════════════════════ */
.atl{padding:66px 0 92px;position:relative;background:linear-gradient(180deg,var(--bg),#08090C);overflow:hidden}
.atl [hidden]{display:none!important}
.atl__head{max-width:680px;margin:0 0 30px}
.atl__head h2{font-family:'Unbounded';font-weight:300;font-size:clamp(27px,6vw,46px);
line-height:1.05;letter-spacing:-.015em;margin:14px 0 12px}
.atl__head h2 b{font-weight:500;background:linear-gradient(120deg,#fff,#c9d3ea 60%,#B7C0CD);
-webkit-background-clip:text;background-clip:text;color:transparent}
.atl__head p{color:var(--txt-dim);font-size:15px;max-width:52ch}
/* ── ДЕСКТОП: список + витрина (без изменений механики) ── */
.atl__grid{display:none}
@media(min-width:881px){.atl__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:start}}
.atl__list{border-top:1px solid var(--line)}
.atl__item{border-bottom:1px solid var(--line)}
.atl__row{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:17px 4px;text-align:left}
.atl__row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
background:linear-gradient(90deg,hsl(var(--h,222) 60% 78%),transparent 82%);
box-shadow:0 0 12px hsl(var(--h,222) 65% 72% / .5);
transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease)}
.atl__dot{flex:none;width:9px;height:9px;border-radius:50%;
background:hsl(var(--h,222) 55% 80%);box-shadow:0 0 12px hsl(var(--h,222) 65% 72% / .85);
opacity:.3;transform:scale(.8);transition:.45s var(--ease)}
.atl__name{font-family:'Unbounded';font-weight:500;font-size:clamp(23px,4.6vw,40px);
line-height:1.08;letter-spacing:-.015em;color:rgba(234,238,243,.42);
transition:color .4s var(--ease)}
.atl__tag{margin-left:auto;font-family:'Inter';font-size:10.5px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mute);white-space:nowrap;
opacity:0;transform:translateX(10px);transition:.5s var(--ease)}
.atl__arrow{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);
display:grid;place-items:center;opacity:.4;transition:.45s var(--ease)}
.atl__arrow svg{width:15px;height:15px;stroke:var(--txt-dim);fill:none;stroke-width:2;
transition:transform .45s var(--ease)}
.atl__item.on .atl__name{color:transparent;
background:linear-gradient(120deg,#fff,hsl(var(--h,222) 55% 84%) 58%,hsl(var(--h,222) 45% 74%));
-webkit-background-clip:text;background-clip:text}
.atl__item.on .atl__dot{opacity:1;transform:scale(1)}
.atl__item.on .atl__row::after{transform:scaleX(1)}
.atl__item.on .atl__tag{opacity:1;transform:none}
.atl__item.on .atl__arrow{opacity:1;border-color:hsl(var(--h,222) 55% 74% / .55)}
.atl__item.on .atl__arrow svg{transform:translateX(2px)}
.atl__show{position:sticky;top:88px;height:min(74vh,640px);border-radius:var(--r-lg);overflow:hidden;
border:1px solid var(--line);background:#08090c;box-shadow:0 40px 90px -50px rgba(0,0,0,.85)}
.atl__scene{position:absolute;inset:0;transition:opacity .35s var(--ease)}
/* фото потолка выбранной комнаты (десктоп-витрина) — вертикальный кадр */
.atl__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
background:#08090c}
.atl__floor{position:absolute;left:0;right:0;bottom:0;height:74%;
background:linear-gradient(180deg,transparent,rgba(6,7,10,.55) 42%,rgba(6,7,10,.95) 80%)}
.atl__info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:28px;display:grid;gap:12px;
transition:opacity .3s var(--ease),transform .3s var(--ease)}
.atl__show.swap .atl__info{opacity:0;transform:translateY(12px)}
.atl__show.swap .atl__scene{opacity:.35}
.atl__k{font-family:'Inter';font-size:10px;font-weight:600;letter-spacing:.24em;
text-transform:uppercase;color:var(--txt-mute)}
.atl__title{font-family:'Unbounded';font-weight:400;font-size:clamp(21px,2.6vw,30px);
letter-spacing:-.01em;color:#fff}
.atl__d{color:var(--txt-dim);font-size:14.5px;line-height:1.55;max-width:46ch;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.atl__cta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:2px}
/* Акции в блоке помещений временно скрыты (не проработаны на стороне организации).
Чтобы вернуть — удалить эти две строки. */
.atl__promo,.atl__cpromo{display:none!important}
.atl__promo{flex:1;min-width:200px;display:flex;align-items:center;gap:11px;padding:11px 14px;
border-radius:15px;background:rgba(210,225,245,.06);border:1px solid var(--line-2);
font-size:13px;line-height:1.35;color:var(--txt)}
.atl__promo b{color:var(--vio)}
.atl__gift{flex:none;width:32px;height:32px;border-radius:10px;
background:linear-gradient(135deg,var(--vio-dim),rgba(169,140,255,.12));
display:grid;place-items:center}
.atl__gift svg{width:16px;height:16px;stroke:var(--vio);fill:none;stroke-width:2}
.atl__go{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
border-radius:100px;width:max-content;font-size:13.5px;font-weight:500;color:#0B0D10;
background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);
box-shadow:0 12px 28px -12px rgba(200,215,240,.45);
transition:transform .45s var(--spring),box-shadow .4s var(--ease)}
.atl__go:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(200,215,240,.6)}
.atl__go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
/* ══ МОБАЙЛ: СВЕТОВОЙ АТЛАС · коверфлоу-барабан комнат · .atl__dial ══
Уникальная механика для телефонов: 3D-барабан карточек-комнат.
Свайп крутит барабан, тап по центральной карточке — переход в раздел,
хью-рельс снизу = прогресс и быстрый выбор. Десктоп (.atl__grid) не тронут. */
.atl__dial{display:block;margin-top:24px}
@media(min-width:881px){.atl__dial{display:none}}
.atl__dial :focus-visible{outline:none;box-shadow:0 0 0 3px var(--vio-dim);border-radius:16px}
.atl__stage{position:relative;height:min(78svh,600px);
perspective:1300px;perspective-origin:50% 42%;
touch-action:pan-y;user-select:none;-webkit-user-select:none}
.atl__deck{position:absolute;inset:0;transform-style:preserve-3d}
/* карточка без видимых граней: объём даёт только мягкая тень, не обводка.
Композиция намеренно ДРУГАЯ, чем в ленте работ: не фото на весь кадр с
текстом поверх, а «окно света» сверху + сплошная тёмная табличка снизу —
текст и акция никогда не читаются поверх фотографии. */
.atl__card{position:absolute;left:50%;top:50%;width:min(86vw,384px);aspect-ratio:3/4.3;
border-radius:30px;overflow:hidden;border:0;
background:linear-gradient(180deg,#12141a,#0a0b0e 60%);
box-shadow:0 60px 110px -44px rgba(0,0,0,.94);
transform:translate(-50%,-50%);opacity:0;text-align:left;
transition:transform .6s var(--spring),opacity .5s var(--ease),box-shadow .5s var(--ease);
cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}
.atl__dial.drag .atl__card{transition:none}
/* окно-иллюминатор с фото помещения и светящимся ободом в цвете комнаты */
.atl__cwin{position:relative;flex:0 0 57%;margin:16px 16px 0;border-radius:22px;overflow:hidden;
box-shadow:0 0 0 1px hsl(var(--h,222) 55% 70% / .22) inset;
transition:box-shadow .5s var(--ease)}
.atl__cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(1.04);filter:saturate(.94)}
.atl__cwin::before{content:"";position:absolute;inset:0;
background:linear-gradient(200deg,transparent 55%,rgba(6,7,10,.5));pointer-events:none}
/* тонкий световой блик вдоль верхнего края — «включаем свет», не текст-оверлей */
.atl__cwin::after{content:"";position:absolute;left:8%;right:8%;top:0;height:3px;border-radius:3px;
background:linear-gradient(90deg,transparent,hsl(var(--h,222) 78% 88%),transparent);
opacity:.35;transform:scaleX(.5);transform-origin:50% 0;
transition:opacity .6s var(--ease),transform .8s var(--spring)}
.atl__card.on .atl__cwin{box-shadow:0 0 0 1.5px hsl(var(--h,222) 60% 74% / .55),
0 0 26px 2px hsl(var(--h,222) 60% 60% / .3) inset}
.atl__card.on .atl__cwin::after{opacity:1;transform:scaleX(1)}
/* табличка: сплошной тёмный фон — имя, тег и акция читаются всегда, вне зависимости от фото */
.atl__cface{flex:1;position:relative;z-index:2;padding:18px 22px 20px;display:grid;
align-content:start;gap:6px}
.atl__ck{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--txt-mute)}
.atl__cname{font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(24px,6.4vw,30px);
line-height:1.08;letter-spacing:-.015em;color:var(--txt)}
.atl__cline{position:relative;height:2px;margin-top:6px;border-radius:2px;
background:rgba(255,255,255,.1);overflow:hidden;width:44px}
.atl__cline i{position:absolute;inset:0;width:0;border-radius:2px;
background:linear-gradient(90deg,hsl(var(--h,222) 62% 82%),transparent);
box-shadow:0 0 12px hsl(var(--h,222) 66% 74% / .7);
transition:width .7s var(--ease) .1s}
/* акция и переход — на той же табличке, показывается у активной.
Единая цветовая схема подарка (violet-акцент бренда) — не завязана на hue комнаты */
.atl__cfoot{margin-top:13px;display:grid;gap:9px;
opacity:0;transform:translateY(8px);pointer-events:none;
transition:opacity .38s var(--ease) .06s,transform .42s var(--spring) .06s}
.atl__cpromo{display:inline-flex;align-items:center;gap:9px;max-width:100%;
padding:7px 14px 7px 7px;border-radius:100px;
background:var(--vio-dim);border:1px solid rgba(169,140,255,.3)}
.atl__cgift{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,#EDEFF4,var(--vio) 65%,#8f74e6)}
.atl__cgift svg{width:14px;height:14px;stroke:#14121e;fill:none;stroke-width:2.4}
.atl__cpromo b{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--txt);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atl__cgo{display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;min-height:48px;border-radius:100px;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:600;color:#0B0D10;
background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);box-shadow:0 14px 28px -12px rgba(200,215,240,.55)}
.atl__cgo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* активная карточка — контент и переход открываются */
.atl__card.on{box-shadow:0 64px 120px -40px rgba(0,0,0,.92),0 0 0 1px hsl(var(--h,222) 55% 70% / .28)}
.atl__card.on .atl__cline i{width:100%}
.atl__card.on .atl__cfoot{opacity:1;transform:none;pointer-events:auto}
/* хью-рельс: прогресс и быстрый выбор комнаты */
.atl__rail{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.atl__seg{width:20px;height:7px;border-radius:99px;flex:none;padding:0;
background:hsl(var(--h,222) 45% 74% / .3);
transition:width .4s var(--spring),background .35s,box-shadow .35s;cursor:pointer}
.atl__seg.on{width:38px;background:hsl(var(--h,222) 62% 74%);
box-shadow:0 0 14px 1px hsl(var(--h,222) 66% 70% / .6)}
.atl__dhint{margin-top:16px;text-align:center;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute);
transition:opacity .5s,transform .5s}
.atl__dhint.gone{opacity:0;transform:translateY(6px)}
@media(prefers-reduced-motion:reduce){
.atl__card,.atl__cline i,.atl__cfoot,.atl__seg,.atl__cwin{transition:none}
}
/* ══════════════════════════════════════════════════════════════════
10 · ГАЛЕРЕЯ-ПОРТАЛ · портфолио · .pg
══════════════════════════════════════════════════════════════════ */
/* ═══════════════ ГАЛЕРЕЯ-ПОРТАЛ (.pg-) ═══════════════ */
.pg{position:relative;background:var(--bg);padding:70px 0 0;overflow:hidden}
.pg__head{position:relative;z-index:6;text-align:center;max-width:640px;margin:0 auto}
.pg__head h2{font-family:'Unbounded';font-weight:300;font-size:clamp(28px,7vw,48px);line-height:1.04;
letter-spacing:-.015em;margin:14px 0 12px}
.pg__head h2 b{font-weight:500;background:linear-gradient(135deg,#fff,#AEB7C4);
-webkit-background-clip:text;background-clip:text;color:transparent}
.pg__head p{color:var(--txt-dim);font-size:15px;max-width:46ch;margin:0 auto}
.pg-scene{position:relative;height:min(84vh,760px);min-height:520px;margin-top:6px;
perspective:1500px;perspective-origin:50% 46%;
touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pg-core{position:absolute;left:50%;top:46%;width:min(64vw,560px);aspect-ratio:1;
transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.pg-core::before,.pg-core::after{content:"";position:absolute;inset:0;border-radius:50%}
.pg-core::before{background:radial-gradient(circle,rgba(210,225,245,.42),rgba(150,185,240,.14) 34%,transparent 62%);
filter:blur(14px);animation:pgPulse 6s var(--ease) infinite}
.pg-core::after{background:radial-gradient(circle,#fff,rgba(220,232,250,.7) 12%,transparent 40%);
width:24%;height:24%;left:38%;top:38%;filter:blur(6px);animation:pgPulse 4.2s var(--ease) infinite}
@keyframes pgPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.pg-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid var(--line-2);
transform:translate(-50%,-50%);opacity:.5}
.pg-ring--1{width:40%;height:40%;box-shadow:0 0 40px -6px var(--glow) inset,0 0 30px -10px var(--glow);
animation:pgSpin 26s linear infinite}
.pg-ring--2{width:70%;height:70%;border-style:dashed;border-color:rgba(210,225,245,.16);
animation:pgSpin 40s linear infinite reverse}
.pg-ring--3{width:100%;height:100%;border-color:rgba(210,225,245,.08);animation:pgSpin 60s linear infinite}
@keyframes pgSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.pg-stars{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.9}
.pg-rays{position:absolute;left:50%;top:46%;width:170%;height:170%;transform:translate(-50%,-50%);
z-index:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;
background:conic-gradient(from 0deg,transparent 0 8%,rgba(210,225,245,.10) 9% 10%,transparent 11% 24%,
rgba(210,225,245,.07) 25% 26%,transparent 27% 49%,rgba(210,225,245,.10) 50% 51%,transparent 52% 74%,
rgba(210,225,245,.06) 75% 76%,transparent 77% 100%);
-webkit-mask:radial-gradient(circle,transparent 20%,#000 44%,transparent 72%);
mask:radial-gradient(circle,transparent 20%,#000 44%,transparent 72%);
animation:pgSpin 90s linear infinite}
.pg-stage{position:absolute;inset:0;transform-style:preserve-3d;z-index:2;will-change:transform}
.pg-card{position:absolute;left:50%;top:46%;transform-style:preserve-3d;cursor:pointer;
width:var(--cw,220px);will-change:transform;opacity:0}
.pg-card__inner{position:relative;transform-style:preserve-3d;border-radius:18px;overflow:hidden;
aspect-ratio:3/4;background:#12151B;border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset;
transition:border-color .4s var(--ease),box-shadow .5s var(--ease)}
.pg-card__inner::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent 46%,rgba(8,9,12,.72));opacity:.9;transition:opacity .4s}
.pg-card__inner::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;z-index:3;
background:linear-gradient(90deg,transparent,var(--glow),transparent);
box-shadow:0 0 10px var(--glow);opacity:0;transition:opacity .45s var(--ease)}
.pg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:grayscale(.4) brightness(.82) contrast(1.05);transition:filter .6s var(--ease),transform 1s var(--ease);
transform:scale(1.04)}
.pg-card__cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 14px 15px;
transform:translateY(8px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.pg-card__cap b{display:block;font-family:'Unbounded';font-weight:400;font-size:15px;color:#fff;letter-spacing:-.01em}
.pg-card__cap span{display:block;margin-top:3px;font-size:12px;color:var(--txt-dim)}
.pg-card__num{position:absolute;top:11px;left:12px;z-index:4;font-family:'Inter';font-weight:600;
font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55);
padding:5px 9px;border-radius:100px;background:rgba(14,17,22,.5);border:1px solid var(--line);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pg-card.hot .pg-card__inner{border-color:rgba(210,225,245,.5);
box-shadow:0 44px 80px -34px rgba(0,0,0,.9),0 0 44px -10px var(--glow-soft)}
.pg-card.hot .pg-card__inner::before{opacity:1}
.pg-card.hot .pg-card__inner::after{opacity:.55}
.pg-card.hot img{filter:grayscale(0) brightness(.98) contrast(1.05);transform:scale(1.09)}
.pg-card.hot .pg-card__cap{transform:none;opacity:1}
.pg-card.dim{opacity:.28!important;transition:opacity .5s}
.pg-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;
display:inline-flex;align-items:center;gap:14px;font-size:12.5px;color:var(--txt-dim);
padding:9px 16px;border-radius:100px;background:var(--glass);border:1px solid var(--line);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
box-shadow:0 20px 50px -22px rgba(0,0,0,.7);transition:opacity .5s,transform .5s;white-space:nowrap}
.pg-hint.gone{opacity:0;transform:translate(-50%,10px);pointer-events:none}
.pg-hint b{color:var(--txt);font-weight:600}
.pg-hint i{width:4px;height:4px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);font-style:normal}
.pg-lb{position:fixed;inset:0;z-index:200;display:flex;visibility:hidden}
.pg-lb__bg{position:absolute;inset:0;background:rgba(6,7,9,.86);opacity:0;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .5s var(--ease)}
.pg-lb.on{visibility:visible}
.pg-lb.on .pg-lb__bg{opacity:1}
.pg-lb__fig{position:fixed;z-index:3;border-radius:18px;overflow:hidden;background:#0d1015;
box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);will-change:transform,width,height}
.pg-lb__fig img{width:100%;height:100%;object-fit:cover}
.pg-lb__meta{position:fixed;z-index:4;left:0;right:0;bottom:0;padding:26px 20px calc(24px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,transparent,rgba(6,7,9,.9));opacity:0;transform:translateY(16px);
transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s;text-align:center;pointer-events:none}
.pg-lb.ready .pg-lb__meta{opacity:1;transform:none}
.pg-lb__meta .k{font-family:'Inter';font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-mute)}
.pg-lb__meta b{display:block;font-family:'Unbounded';font-weight:400;font-size:clamp(20px,4vw,30px);color:#fff;margin:8px 0 4px}
.pg-lb__meta span{font-size:14px;color:var(--txt-dim)}
.pg-lb__ctrl{position:fixed;z-index:5;top:0;left:0;right:0;padding:18px;display:flex;align-items:center;
justify-content:space-between;opacity:0;transition:opacity .5s .1s}
.pg-lb.ready .pg-lb__ctrl{opacity:1}
.pg-lb__count{font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--txt-dim);
padding:9px 15px;border-radius:100px;background:var(--glass);border:1px solid var(--line);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pg-btn{width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;color:#fff;
background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
display:flex;align-items:center;justify-content:center;
box-shadow:0 20px 50px -22px rgba(0,0,0,.8);transition:transform .4s var(--spring),background .3s,border-color .3s}
.pg-btn:hover{transform:scale(1.08);background:rgba(210,225,245,.14);border-color:var(--glow)}
.pg-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-lb__nav{position:fixed;z-index:5;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .5s .15s}
.pg-lb.ready .pg-lb__nav{opacity:1}
.pg-lb__nav.prev{left:14px}.pg-lb__nav.next{right:14px}
@media(prefers-reduced-motion:reduce){.pg-card{opacity:1!important}}
/* ══════════════════════════════════════════════════════════════════
11 · ОСВЕЩЕНИЕ · подбор и монтаж · .lt / .lm / .lcat
══════════════════════════════════════════════════════════════════ */
/* ═══════════ БЛОК «ОСВЕЩЕНИЕ» · бесшовный, безрамочный · .lt- ═══════════ */
.lt{position:relative;padding:clamp(48px,7vw,110px) 0}
/* заголовок */
.lt__head{text-align:center;max-width:820px;margin:0 auto clamp(30px,4.5vw,58px)}
.lt__eyebrow{font-family:'Inter';font-size:clamp(11px,1.4vw,13px);font-weight:600;
letter-spacing:.28em;text-transform:uppercase;color:var(--txt-mute)}
.lt__head h2{font-family:'Unbounded';font-weight:300;font-size:clamp(32px,7vw,66px);
line-height:1.02;letter-spacing:-.02em;margin:clamp(14px,2vw,22px) 0 clamp(14px,2vw,20px)}
.lt__head h2 b{font-weight:500;background:var(--vgrad);
-webkit-background-clip:text;background-clip:text;color:transparent}
.lt__head p{color:var(--txt-dim);font-size:clamp(16px,2vw,21px);line-height:1.55;
max-width:34ch;margin:0 auto}
/* ── ВИТРИНА · во всю ширину контента, без рамки ── */
.lt__stage{position:relative;width:100%;aspect-ratio:16/8;border-radius:clamp(24px,3vw,40px);
overflow:hidden;background:#08090d;isolation:isolate}
@media(max-width:760px){.lt__stage{aspect-ratio:4/5;border-radius:26px}}
.lt__stage.busy{cursor:default}
/* медиа-слои */
.lt__media{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.lt__media.on{opacity:1}
.lt__media video,.lt__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* CSS-сцена, если ни видео, ни фото нет */
.lt__css{position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 4%,#1b2130,#08090d 72%)}
.lt__css::before{content:"";position:absolute;left:20%;right:20%;top:16%;height:6px;border-radius:6px;
background:linear-gradient(90deg,transparent,var(--glow),transparent);
box-shadow:0 0 40px 12px var(--glow-soft),0 90px 150px 50px var(--glow-soft);
animation:ltBreath 5s ease-in-out infinite}
@keyframes ltBreath{50%{box-shadow:0 0 54px 16px var(--glow-soft),0 90px 180px 66px rgba(180,205,240,.26)}}
/* затемнение для читаемости подписи */
.lt__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(8,9,13,.5) 0%,transparent 22%,transparent 44%,rgba(8,9,13,.82) 100%)}
/* верхняя строка: сегмент + акция */
.lt__toprow{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;
align-items:flex-start;justify-content:space-between;gap:12px;
padding:clamp(16px,2.4vw,28px)}
.lt__seg{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:100px;
background:rgba(11,13,16,.5);border:1px solid var(--line-2);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
font-family:'Inter';font-size:clamp(11px,1.4vw,13px);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:#fff;white-space:nowrap}
.lt__seg i{width:8px;height:8px;border-radius:50%;background:var(--vio);box-shadow:0 0 12px var(--vio-dim)}
.lt__gift{display:none;align-items:center;gap:10px;padding:12px 18px;border-radius:100px;
color:#14161b;font-size:clamp(12px,1.5vw,15px);font-weight:600;white-space:nowrap;
background:linear-gradient(135deg,#f4f6fa,#e2e7f0);box-shadow:0 16px 34px -14px rgba(0,0,0,.6)}
.lt__gift.show{display:inline-flex;animation:ltGift 3s ease-in-out infinite}
.lt__gift svg{width:18px;height:18px;flex:none;stroke:#7e6ce0;fill:none;stroke-width:2}
@keyframes ltGift{50%{transform:translateY(-4px)}}
@media(max-width:560px){.lt__gift span{display:none}.lt__gift{padding:12px}}
/* нижняя подпись на витрине */
.lt__cap{position:absolute;left:0;right:0;bottom:0;z-index:5;
padding:clamp(20px,3vw,40px);display:flex;align-items:flex-end;
justify-content:space-between;gap:20px;flex-wrap:wrap}
.lt__capL{min-width:0}
.lt__tag{font-family:'Inter';font-size:clamp(12px,1.5vw,14px);font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--vio-2);
transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lt__name{font-family:'Unbounded';font-weight:500;font-size:clamp(26px,4.6vw,52px);
line-height:1.05;letter-spacing:-.015em;color:#fff;margin-top:10px;
transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lt__stage.swap .lt__tag,.lt__stage.swap .lt__name{opacity:0;transform:translateY(12px)}
/* стрелки-навигация витрины */
.lt__arrows{display:flex;gap:12px;flex:none}
.lt__arr{width:clamp(52px,6vw,64px);height:clamp(52px,6vw,64px);border-radius:50%;
display:grid;place-items:center;
background:rgba(11,13,16,.5);border:1px solid var(--line-2);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;
transition:transform .45s var(--spring),background .3s,border-color .3s}
.lt__arr:hover{transform:scale(1.06);border-color:var(--glow);background:rgba(169,140,255,.16)}
.lt__arr svg{width:clamp(22px,2.6vw,26px);height:clamp(22px,2.6vw,26px);
stroke:currentColor;fill:none;stroke-width:2.2}
/* точки-прогресс слайдера-фолбэка */
.lt__dots{position:absolute;left:50%;top:clamp(16px,2.4vw,26px);transform:translateX(-50%);
z-index:5;display:none;gap:7px}
.lt__dots.show{display:flex}
.lt__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:.3s}
.lt__dots i.on{width:22px;border-radius:7px;background:#fff}
/* ── ЛЕНТА КАТЕГОРИЙ · крупные карточки под витриной ── */
.lt__rail{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;
padding:clamp(20px,3vw,32px) 0 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.lt__rail::-webkit-scrollbar{display:none}
.lcat{flex:0 0 auto;scroll-snap-align:center;width:clamp(150px,44vw,190px);
display:flex;flex-direction:column;gap:14px;padding:20px 18px;border-radius:22px;
text-align:left;background:rgba(127,140,160,.05);border:1.5px solid var(--line);
transition:transform .5s var(--spring),background .35s,border-color .35s,box-shadow .45s}
.lcat:hover{transform:translateY(-4px);border-color:var(--line-2)}
.lcat.on{background:rgba(169,140,255,.1);border-color:var(--vio-dim);
box-shadow:0 24px 50px -22px rgba(150,120,255,.4)}
.lcat__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
background:rgba(20,24,30,.7);border:1px solid var(--line-2);transition:.35s}
.lcat__ic svg{width:26px;height:26px;stroke:var(--txt-dim);fill:none;stroke-width:1.7;transition:stroke .3s}
.lcat.on .lcat__ic{background:var(--vgrad);border-color:transparent}
.lcat.on .lcat__ic svg{stroke:#14161b}
.lcat__nm{font-size:clamp(15px,1.8vw,17px);font-weight:600;color:var(--txt);line-height:1.2}
.lcat__hint{font-size:13px;color:var(--txt-mute);line-height:1.4}
/* ── строка действий ── */
.lt__act{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3vw,34px)}
.lt__more{flex:1 1 240px;display:inline-flex;align-items:center;justify-content:center;gap:11px;
padding:19px 28px;border-radius:100px;font-size:clamp(15px,1.8vw,17px);font-weight:600;
color:var(--txt);background:rgba(127,140,160,.08);border:1.5px solid var(--line-2);
transition:transform .45s var(--spring),background .3s,border-color .3s}
.lt__more:hover{transform:translateY(-2px);background:rgba(169,140,255,.12);border-color:var(--vio-dim)}
.lt__more svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.lt__go{flex:1 1 240px;display:inline-flex;align-items:center;justify-content:center;gap:11px;
padding:19px 28px;border-radius:100px;font-size:clamp(15px,1.8vw,17px);font-weight:600;
color:#14161b;background:var(--vgrad);box-shadow:0 20px 44px -18px rgba(150,120,255,.6);
transition:transform .45s var(--spring),box-shadow .4s var(--ease)}
.lt__go:hover{transform:translateY(-2px);box-shadow:0 26px 52px -18px rgba(150,120,255,.75)}
.lt__go svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2}
/* умный дом — крупная бесшовная строка */
.lt__smart{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);
flex-wrap:wrap;margin-top:clamp(30px,4vw,50px);
font-family:'Inter';font-size:clamp(12px,1.5vw,14px);font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute)}
.lt__smart span{display:inline-flex;align-items:center;gap:9px}
.lt__smart svg{width:20px;height:20px;stroke:var(--vio);fill:none;stroke-width:1.8}
.lt__smart b{color:var(--txt-dim);font-weight:600}
/* ═══════════ МОДАЛКА ═══════════ */
.lm{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center;
padding:0}
@media(min-width:760px){.lm{align-items:center;padding:32px}}
.lm.open{display:flex}
.lm__bg{position:absolute;inset:0;background:rgba(6,7,10,.72);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
opacity:0;transition:opacity .4s var(--ease)}
.lm.open .lm__bg{opacity:1}
.lm__card{position:relative;width:100%;max-width:640px;max-height:92svh;overflow-y:auto;
background:linear-gradient(180deg,#15181f,#0d0f14);
border:1px solid var(--line-2);border-radius:30px 30px 0 0;
box-shadow:0 -30px 80px -30px rgba(0,0,0,.8);
transform:translateY(40px);opacity:0;
transition:transform .5s var(--spring),opacity .4s var(--ease);scrollbar-width:none}
@media(min-width:760px){.lm__card{border-radius:30px}}
.lm__card::-webkit-scrollbar{display:none}
.lm.open .lm__card{transform:none;opacity:1}
.lm__grab{width:44px;height:5px;border-radius:5px;background:var(--line-2);margin:12px auto 0}
@media(min-width:760px){.lm__grab{display:none}}
.lm__hero{position:relative;height:clamp(180px,30vw,240px);overflow:hidden;margin:14px 14px 0;
border-radius:20px;background:radial-gradient(90% 80% at 50% 0,#1b2130,#08090d 72%)}
.lm__hero video,.lm__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lm__hero .lt__css{border-radius:20px}
.lm__body{padding:22px 22px 26px}
.lm__seg{font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--vio-2)}
.lm__ttl{font-family:'Unbounded';font-weight:500;font-size:clamp(24px,4vw,32px);
line-height:1.08;letter-spacing:-.01em;margin:9px 0 12px;color:#fff}
.lm__lead{color:var(--txt-dim);font-size:clamp(15px,1.9vw,17px);line-height:1.6;margin-bottom:20px}
/* сегмент-переключатель внутри модалки (трек) */
.lm__seg-sw{display:none;gap:8px;padding:6px;border-radius:100px;width:max-content;margin-bottom:18px;
background:rgba(127,140,160,.08);border:1px solid var(--line)}
.lm__seg-sw.show{display:inline-flex}
.lm__seg-sw button{padding:11px 20px;border-radius:100px;font-size:14px;font-weight:600;
color:var(--txt-dim);transition:.3s}
.lm__seg-sw button.on{background:var(--vgrad);color:#14161b}
.lm__list{display:grid;gap:12px}
.lm__pt{display:flex;align-items:flex-start;gap:14px;padding:16px 17px;border-radius:16px;
background:rgba(127,140,160,.06);border:1px solid var(--line)}
.lm__pt i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
background:rgba(169,140,255,.12);border:1px solid var(--vio-dim)}
.lm__pt i svg{width:19px;height:19px;stroke:var(--vio-2);fill:none;stroke-width:2}
.lm__pt div{min-width:0}
.lm__pt b{display:block;font-size:clamp(15px,1.9vw,16px);font-weight:600;color:var(--txt);margin-bottom:3px}
.lm__pt span{font-size:14px;color:var(--txt-dim);line-height:1.5}
.lm__cta{display:inline-flex;align-items:center;justify-content:center;gap:11px;width:100%;
margin-top:22px;padding:19px 28px;border-radius:100px;font-size:17px;font-weight:600;
color:#14161b;background:var(--vgrad);box-shadow:0 20px 44px -18px rgba(150,120,255,.6);
transition:transform .45s var(--spring)}
.lm__cta:hover{transform:translateY(-2px)}
.lm__cta svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2}
.lm__x{position:absolute;top:16px;right:16px;z-index:6;width:44px;height:44px;border-radius:50%;
display:grid;place-items:center;background:rgba(11,13,16,.55);border:1px solid var(--line-2);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;
transition:transform .4s var(--spring),background .3s}
.lm__x:hover{transform:rotate(90deg);background:rgba(169,140,255,.2)}
.lm__x svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4}
/* ══════════════════════════════════════════════════════════════════
03 · КОНФИГУРАТОР · сцены + калькулятор · .mpx
══════════════════════════════════════════════════════════════════ */
/* ─── ТОКЕНЫ БЛОКА (--x-*, не конфликтуют с сайтом) ────────── */
.mpx{
--x-bg:#f5f5f7; --x-card:#ffffff;
--x-ink:#15151b; --x-ink2:#585866; --x-ink3:#8e8e9d;
--x-line:rgba(21,21,32,.09);
--x-acc:#7e6ce0; --x-acc2:#b39dff;
--x-grad:linear-gradient(115deg,#6a56d6,#a98cff 55%,#7fa8ff);
--x-sh:0 34px 80px -34px rgba(40,34,90,.35);
--x-sh2:0 16px 40px -18px rgba(40,34,90,.30);
--x-ease:cubic-bezier(.22,1,.36,1);
--x-fd:'Unbounded',system-ui,sans-serif;
--x-fb:'Onest','Inter',system-ui,sans-serif;
position:relative;width:100%;padding:clamp(6px,1.5vw,20px) 0 0;
background:
radial-gradient(52% 34% at 14% 4%,rgba(150,130,255,.14),transparent 70%),
radial-gradient(46% 30% at 88% 12%,rgba(120,190,255,.12),transparent 70%),
radial-gradient(50% 36% at 50% 100%,rgba(190,150,255,.10),transparent 72%),
#f5f5f7;
color:var(--x-ink);font-family:var(--x-fb);overflow:clip;
}
.mpx *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.mpx [hidden]{display:none!important}
.mpx img{user-select:none;-webkit-user-drag:none}
/* ─── ТАБЫ ПРИЛОЖЕНИЙ ────────────────────────────────────── */
.mpx__top{position:relative;z-index:5;display:flex;justify-content:center;
padding:clamp(16px,3.4vw,30px) 16px 4px}
.mpx__tabs{position:relative;display:inline-flex;padding:6px;border-radius:999px;
background:var(--x-card);box-shadow:var(--x-sh2)}
.mpx__tabs button{position:relative;z-index:2;appearance:none;border:0;background:0;
cursor:pointer;font-family:var(--x-fb);font-weight:600;font-size:15px;
color:var(--x-ink2);padding:13px 26px;border-radius:999px;
display:inline-flex;align-items:center;gap:9px;transition:color .35s var(--x-ease)}
.mpx__tabs button svg{width:17px;height:17px;stroke-width:2}
.mpx__tabs button[aria-selected=true]{color:#fff}
.mpx__pill{position:absolute;z-index:1;top:6px;bottom:6px;border-radius:999px;
background:var(--x-ink);transition:left .5s var(--x-ease),width .5s var(--x-ease)}
/* ─── СЦЕНА (общее) ──────────────────────────────────────── */
.mpx__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:100%}
.scn{grid-area:1/1;width:100%;min-width:0;max-width:100%;min-height:clamp(620px,88svh,880px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(10px,1.8vw,16px);
padding:clamp(16px,3vw,40px) clamp(14px,4vw,40px) 136px;
opacity:0;visibility:hidden;pointer-events:none}
.scn.is-on{opacity:1;visibility:visible;pointer-events:auto}
.scn:not(.is-on){min-height:0;height:0;padding:0;overflow:hidden}
.scn__eyebrow{font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
color:var(--x-acc)}
.scn__title{font-family:var(--x-fd);font-weight:500;text-align:center;margin:0;
font-size:clamp(27px,6vw,54px);line-height:1.06;letter-spacing:-.02em;
background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.scn__sub{margin:0;text-align:center;font-size:clamp(15.5px,2vw,18px);
line-height:1.55;color:var(--x-ink2);max-width:52ch}
/* ─── ПЛАВАЮЩАЯ НАВИГАЦИЯ (слайдер-паттерн) ──────────────── */
.mpx__nav{position:absolute;left:0;right:0;bottom:clamp(18px,3vw,32px);z-index:30;
display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.mpx__nav>*{pointer-events:auto}
.fab{appearance:none;border:0;cursor:pointer;border-radius:50%;
display:grid;place-items:center;transition:.3s var(--x-ease)}
.fab svg{width:22px;height:22px;stroke-width:2.2;fill:none;stroke:currentColor}
.fab--back{width:56px;height:56px;background:var(--x-card);color:var(--x-ink);
box-shadow:var(--x-sh2)}
.fab--back:hover{transform:translateY(-2px)}
.fab--next{width:66px;height:66px;background:var(--x-grad);color:#fff;
box-shadow:0 20px 44px -14px rgba(110,90,220,.6)}
.fab--next:hover{transform:translateY(-3px) scale(1.03)}
.fab--next:active{transform:scale(.96)}
.fab[disabled]{opacity:.35;pointer-events:none;filter:grayscale(.4)}
.mpx__dots{display:flex;align-items:center;gap:8px;padding:13px 17px;border-radius:999px;
background:var(--x-card);box-shadow:var(--x-sh2)}
.mpx__dots button{appearance:none;border:0;cursor:pointer;padding:0;height:8px;width:8px;
border-radius:999px;background:#cfcfda;transition:.45s var(--x-ease)}
.mpx__dots button.is-on{width:28px;background:var(--x-ink)}
.mpx__dots button[disabled]{cursor:default}
/* градиент-фолбэк под любым медиа */
.ph{position:absolute;inset:0;z-index:0;
background:
radial-gradient(90% 60% at 30% 20%,hsl(var(--h,258) 45% 90%),transparent 70%),
linear-gradient(155deg,hsl(var(--h,258) 30% 86%),hsl(calc(var(--h,258) + 26) 26% 72%) 60%,hsl(calc(var(--h,258) - 18) 30% 80%))}
.ph::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.ph--dark{background:
radial-gradient(90% 60% at 30% 15%,#232030,transparent 70%),
linear-gradient(160deg,#191722,#0d0d13 60%,#15131d)}
/* ─── СЦЕНА 1 · ПОМЕЩЕНИЯ — карусель вертикальных карточек ── */
.rms__wrap{width:100%;min-width:0;max-width:100%;margin-top:clamp(4px,1.2vw,12px)}
.rms{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scrollbar-width:none;
padding:16px clamp(18px,4vw,48px) 24px;cursor:grab}
.rms::-webkit-scrollbar{display:none}
.rms.is-drag{cursor:grabbing;scroll-snap-type:none}
/* центрируем ленту, когда все карточки помещаются; при переполнении margins схлопываются в 0 и работает обычный скролл */
.rms>.rmc:first-child{margin-left:auto}
.rms>.rmc:last-child{margin-right:auto}
.rmc{position:relative;flex:0 0 clamp(206px,56vw,296px);aspect-ratio:3/4.3;
border-radius:28px;overflow:hidden;scroll-snap-align:center;cursor:pointer;
box-shadow:var(--x-sh2);transition:transform .5s var(--x-ease),box-shadow .5s var(--x-ease)}
.rmc:hover{transform:translateY(-6px)}
.rmc img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
filter:brightness(.92);transform:scale(1.001);
transition:transform .9s var(--x-ease),filter .5s var(--x-ease)}
.rmc:hover img{transform:scale(1.09);filter:brightness(1.02)}
.rmc.is-sel img{filter:brightness(1)}
.rmc__shade{position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,rgba(10,10,16,.06) 30%,rgba(10,10,16,.62) 100%)}
.rmc__name{position:absolute;z-index:3;left:20px;bottom:44px;color:#fff;
font-family:var(--x-fd);font-weight:500;font-size:clamp(18px,2.6vw,22px);letter-spacing:-.01em}
.rmc__area{position:absolute;z-index:3;left:20px;bottom:20px;color:rgba(255,255,255,.88);
font-size:14.5px;font-weight:600}
.rmc__chk{position:absolute;z-index:3;top:16px;right:16px;width:42px;height:42px;
border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.28);backdrop-filter:blur(10px);
border:1.5px solid rgba(255,255,255,.55);transition:.35s var(--x-ease)}
.rmc__chk svg{width:20px;height:20px;stroke:#fff;stroke-width:2.6;fill:none;
opacity:0;transform:scale(.5);transition:.3s var(--x-ease)}
.rmc.is-sel{box-shadow:0 0 0 3px var(--x-acc),var(--x-sh)}
.rmc.is-sel .rmc__chk{background:var(--x-grad);border-color:transparent}
.rmc.is-sel .rmc__chk svg{opacity:1;transform:scale(1)}
.rms__bar{width:min(1160px,92%);margin:0 auto;display:flex;align-items:center;
justify-content:center;gap:14px;flex-wrap:wrap}
.rms__meta{background:var(--x-card);border-radius:999px;box-shadow:var(--x-sh2);
padding:14px 22px;font-size:15px;color:var(--x-ink2)}
.rms__meta b{color:var(--x-ink);font-weight:600}
.rms__arr{display:none;gap:10px}
.rms__arr button{appearance:none;border:0;cursor:pointer;width:48px;height:48px;
border-radius:50%;background:var(--x-card);box-shadow:var(--x-sh2);color:var(--x-ink);
display:grid;place-items:center;transition:.3s var(--x-ease)}
.rms__arr button:hover{transform:translateY(-2px)}
.rms__arr svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none}
@media(min-width:900px){.rms__arr{display:flex}}
/* ─── СЦЕНА 2 · ПЛОЩАДЬ — по комнате за раз, явно и крупно ── */
.ar{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vw,20px);width:100%}
.ar__tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:min(780px,94vw)}
.ar__tabs button{appearance:none;border:0;cursor:pointer;font-family:var(--x-fb);
font-weight:600;font-size:15px;color:var(--x-ink2);padding:13px 18px;border-radius:999px;
background:var(--x-card);box-shadow:var(--x-sh2);transition:.3s var(--x-ease);
display:inline-flex;align-items:center;gap:8px}
.ar__tabs button b{font-weight:600;color:var(--x-acc)}
.ar__tabs button.is-on{background:var(--x-ink);color:#fff}
.ar__tabs button.is-on b{color:var(--x-acc2)}
/* какая комната сейчас редактируется */
.ar__cur{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:2px}
.ar__cur i{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--x-ink3)}
.ar__cur b{font-family:var(--x-fd);font-weight:500;font-size:clamp(20px,3.4vw,27px);
color:var(--x-ink);letter-spacing:-.01em}
.ar__big{display:flex;align-items:center;gap:clamp(14px,5vw,40px)}
.ar__btn{appearance:none;border:0;cursor:pointer;border-radius:50%;
width:clamp(56px,14vw,76px);height:clamp(56px,14vw,76px);
background:var(--x-card);box-shadow:var(--x-sh2);color:var(--x-ink);
display:grid;place-items:center;transition:.25s var(--x-ease)}
.ar__btn:hover{transform:scale(1.07)}
.ar__btn:active{transform:scale(.93)}
.ar__btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;fill:none}
.ar__num{display:flex;align-items:baseline;gap:8px;line-height:.95}
.ar__num b,.ar__num input{font-family:var(--x-fd);font-weight:500;letter-spacing:-.03em;
font-size:clamp(76px,20vw,150px);
background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ar__num input{appearance:none;-webkit-appearance:none;border:0;outline:none;padding:0;margin:0;
width:1.6ch;min-width:1ch;text-align:center;line-height:.95;cursor:text;
caret-color:var(--x-acc);-webkit-text-fill-color:transparent}
.ar__num input:focus{filter:drop-shadow(0 10px 28px rgba(126,108,224,.35))}
.ar__num span{font-family:var(--x-fd);font-weight:500;font-size:clamp(19px,4.4vw,30px);
color:var(--x-ink3)}
.ar__note{margin:0;font-size:14.5px;font-weight:600;color:var(--x-ink3)}
.rng{-webkit-appearance:none;appearance:none;width:min(440px,86vw);height:6px;
border-radius:99px;background:#e0e0ea;outline:none;cursor:pointer}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
background:var(--x-grad);cursor:pointer;
box-shadow:0 8px 20px -6px rgba(110,90,220,.65),0 0 0 5px rgba(126,108,224,.14);
transition:transform .2s}
.rng::-webkit-slider-thumb:active{transform:scale(1.15)}
.rng::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;
background:var(--x-grad);cursor:pointer;box-shadow:0 8px 20px -6px rgba(110,90,220,.65)}
.ar__total{background:var(--x-card);border-radius:999px;box-shadow:var(--x-sh2);
padding:15px 26px;font-size:16px;font-weight:600;color:var(--x-ink)}
.ar__total i{font-style:normal;color:var(--x-ink3);font-weight:600;margin-right:8px}
/* ─── СЦЕНА 3 · ПОЛОТНО — кадр + свотчи-ФАКТУРЫ + бренды ──── */
.fb{display:grid;grid-template-columns:minmax(280px,380px) minmax(300px,420px);
gap:clamp(20px,3.4vw,44px);align-items:center;justify-content:center;
width:min(1020px,94%);margin-top:clamp(4px,1.2vw,12px)}
.fb__side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.6vw,15px);min-width:0}
.fb__frame{position:relative;width:100%;aspect-ratio:3/4;border-radius:30px;
overflow:hidden;box-shadow:var(--x-sh)}
.fb__frame img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.05);
transition:opacity .7s var(--x-ease),transform 1.3s var(--x-ease)}
.fb__frame img.is-on{opacity:1;transform:scale(1)}
.fb__kind{font-size:13.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--x-ink3)}
.fb__name{font-family:var(--x-fd);font-weight:500;text-align:left;margin:0;
font-size:clamp(28px,4.4vw,44px);line-height:1.06;letter-spacing:-.02em;
background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fb__desc{margin:0;text-align:left;font-size:clamp(15px,1.9vw,17px);color:var(--x-ink2);
max-width:42ch;line-height:1.5}
/* пилюля свотчей-фактур */
.fb__pill{display:flex;align-items:flex-start;justify-content:space-between;
gap:clamp(10px,2.2vw,20px);width:100%;
padding:15px 20px 13px;border-radius:28px;background:var(--x-card);box-shadow:var(--x-sh)}
.swx{display:flex;flex-direction:column;align-items:center;gap:8px;
appearance:none;background:0;border:0;cursor:pointer;padding:0}
.swx i{display:block;width:clamp(46px,10vw,54px);aspect-ratio:1;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(20,20,30,.12),inset 0 -6px 12px rgba(0,0,0,.10);
transition:.3s var(--x-ease)}
.swx:hover i{transform:scale(1.1)}
.swx span{font-size:13.5px;font-weight:600;color:var(--x-ink2);transition:color .3s}
.swx.is-on i{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--x-acc),inset 0 -6px 12px rgba(0,0,0,.10)}
.swx.is-on span{color:var(--x-ink)}
/* бренды полотна */
.fb__brands{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.fb__brands button{appearance:none;cursor:pointer;border-radius:18px;padding:12px 18px;
background:var(--x-card);border:1.5px solid var(--x-line);text-align:left;
transition:.3s var(--x-ease);font-family:var(--x-fb)}
.fb__brands button b{display:block;font-size:16px;font-weight:600;color:var(--x-ink)}
.fb__brands button span{font-size:13.5px;color:var(--x-ink3);font-weight:600}
.fb__brands button.is-on{background:var(--x-ink);border-color:var(--x-ink)}
.fb__brands button.is-on b{color:#fff}
.fb__brands button.is-on span{color:rgba(255,255,255,.65)}
/* ─── СЦЕНА 4 · ПРОФИЛЬ — раскрывающиеся панели ─────────────── */
.xp{display:flex;gap:clamp(10px,1.6vw,16px);width:min(1120px,94%);
height:clamp(420px,56vh,560px);margin-top:clamp(6px,1.4vw,14px)}
.xpp{position:relative;flex:1;border-radius:26px;overflow:hidden;cursor:pointer;
box-shadow:var(--x-sh2);transition:flex .65s var(--x-ease)}
.xpp.is-on{flex:2.7}
.xpp img,.xpp video{position:absolute;inset:0;z-index:1;width:100%;height:100%;
object-fit:cover;filter:brightness(.9)}
.xpp__shade{position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,rgba(10,10,16,.08) 30%,rgba(10,10,16,.7) 100%)}
.xpp__ico{position:absolute;z-index:3;top:16px;left:16px;width:54px;height:54px;
border-radius:16px;display:grid;place-items:center;
background:rgba(255,255,255,.22);backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.4)}
.xpp__ico svg{width:28px;height:28px;stroke:#fff;stroke-width:1.7;fill:none}
.xpp__chk{position:absolute;z-index:3;top:16px;right:16px;width:40px;height:40px;
border-radius:50%;display:grid;place-items:center;background:var(--x-grad);
opacity:0;transform:scale(.5);transition:.35s var(--x-ease)}
.xpp.is-on .xpp__chk{opacity:1;transform:scale(1)}
.xpp__chk svg{width:19px;height:19px;stroke:#fff;stroke-width:2.6;fill:none}
.xpp__cap{position:absolute;z-index:3;left:20px;right:20px;bottom:18px;color:#fff}
.xpp__cap h4{font-family:var(--x-fd);font-weight:500;margin:0;
font-size:clamp(17px,2.2vw,22px);letter-spacing:-.01em;white-space:nowrap}
.xpp__cap p{margin:8px 0 0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.88);
opacity:0;transform:translateY(8px);transition:.45s var(--x-ease) .15s;max-width:38ch}
.xpp.is-on .xpp__cap p{opacity:1;transform:translateY(0)}
/* ─── СЦЕНА 5 · СВЕТ — тёмная, кадр с фото выбранного света ── */
.scn--lux{background:radial-gradient(130% 90% at 50% 0%,#1b1826 0%,#0b0b10 62%)}
.scn--lux .scn__eyebrow{color:var(--x-acc2)}
.scn--lux .scn__title{background:linear-gradient(115deg,#ffffff,#cfc0ff 60%,#9fbcff);
-webkit-background-clip:text;background-clip:text}
.scn--lux .scn__sub{color:rgba(255,255,255,.62)}
.lx{display:grid;grid-template-columns:minmax(280px,380px) minmax(280px,400px);
gap:clamp(20px,3.4vw,44px);align-items:center;justify-content:center;
width:min(1000px,94%);margin-top:clamp(4px,1.2vw,12px)}
.lx__side{display:flex;flex-direction:column;gap:clamp(12px,1.8vw,18px);min-width:0}
.lx__sub{text-align:left;margin:0}
.lx__frame{position:relative;width:100%;aspect-ratio:3/4;border-radius:30px;
overflow:hidden;box-shadow:0 46px 100px -34px rgba(0,0,0,.85)}
.lx__frame img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.05);filter:brightness(.88);
transition:opacity .7s var(--x-ease),transform 1.3s var(--x-ease)}
.lx__frame img.is-on{opacity:1;transform:scale(1)}
.lx__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(8,8,12,.12),transparent 35%,rgba(8,8,12,.28))}
.lx__chips{display:grid;gap:11px;width:100%;margin-top:0}
.lx__chips button{appearance:none;cursor:pointer;border-radius:20px;padding:15px 20px;
width:100%;text-align:left;justify-content:flex-start;
font-family:var(--x-fb);font-weight:600;font-size:15px;color:#ece9f6;
background:rgba(255,255,255,.08);backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.16);
display:inline-flex;align-items:center;gap:10px;transition:.3s var(--x-ease)}
.lx__chips button svg{width:20px;height:20px;stroke:var(--x-acc2);stroke-width:1.9;fill:none}
.lx__chips button:hover{background:rgba(255,255,255,.14)}
.lx__chips button.is-on{background:#fff;color:var(--x-ink);border-color:#fff}
.lx__chips button.is-on svg{stroke:var(--x-acc)}
/* ─── СЦЕНА 6 · КАРНИЗ — кадр + строки-варианты ─────────────── */
.cn{display:grid;grid-template-columns:minmax(300px,420px) minmax(300px,430px);
gap:clamp(20px,3.6vw,44px);align-items:center;justify-content:center;
width:min(1020px,94%);margin-top:clamp(4px,1.2vw,12px)}
.cn__frame{position:relative;width:100%;aspect-ratio:3/4;border-radius:30px;
overflow:hidden;box-shadow:var(--x-sh)}
.cn__frame img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.05);
transition:opacity .7s var(--x-ease),transform 1.3s var(--x-ease)}
.cn__frame img.is-on{opacity:1;transform:scale(1)}
.cn__rows{display:flex;flex-direction:column;gap:12px}
.cnr{display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;
appearance:none;font-family:var(--x-fb);
background:var(--x-card);border:2px solid transparent;border-radius:22px;
padding:clamp(15px,2vw,19px);box-shadow:var(--x-sh2);transition:.3s var(--x-ease)}
.cnr:hover{transform:translateY(-3px)}
.cnr.is-on{border-color:var(--x-acc)}
.cnr__ico{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
background:#f1effb}
.cnr__ico svg{width:30px;height:30px;stroke:var(--x-acc);stroke-width:1.8;fill:none}
.cnr__tx{flex:1;min-width:0}
.cnr__tx b{display:block;font-size:17px;font-weight:600;color:var(--x-ink);margin-bottom:3px}
.cnr__tx span{font-size:15px;line-height:1.4;color:var(--x-ink2)}
.cnr__dot{flex:none;width:28px;height:28px;border-radius:50%;
border:2px solid #d5d5e0;display:grid;place-items:center;transition:.3s var(--x-ease)}
.cnr__dot svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;opacity:0;
transform:scale(.5);transition:.25s var(--x-ease)}
.cnr.is-on .cnr__dot{border-color:transparent;background:var(--x-grad)}
.cnr.is-on .cnr__dot svg{opacity:1;transform:scale(1)}
/* ─── СЦЕНА 7 · ИТОГ ────────────────────────────────────────── */
.fn{display:flex;flex-direction:column;align-items:center;gap:clamp(11px,1.8vw,17px);width:100%}
.fn__price{display:flex;align-items:baseline;gap:10px;line-height:.95}
.fn__price b{font-family:var(--x-fd);font-weight:500;letter-spacing:-.03em;
font-size:clamp(52px,12vw,98px);
background:var(--x-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fn__price span{font-family:var(--x-fd);font-weight:500;font-size:clamp(18px,4vw,27px);
color:var(--x-ink3)}
.fn__cap{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--x-ink3)}
.fn__spec{width:min(560px,92vw);background:var(--x-card);border-radius:26px;
box-shadow:var(--x-sh2);padding:2px clamp(18px,3vw,26px)}
.fn__spec summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
cursor:pointer;list-style:none;padding:16px 0;
font-size:15.5px;font-weight:600;color:var(--x-ink)}
.fn__spec summary::-webkit-details-marker{display:none}
.fn__spec summary svg{width:20px;height:20px;flex:none;stroke:var(--x-ink3);stroke-width:2.2;
fill:none;transition:transform .35s var(--x-ease)}
.fn__spec[open] summary svg{transform:rotate(180deg)}
.fn__spec-b{padding-bottom:8px}
.fn__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding:12px 0;border-bottom:1px solid var(--x-line)}
.fn__row:last-child{border-bottom:0}
.fn__row small{font-size:14px;color:var(--x-ink3);font-weight:600}
.fn__row b{font-size:15px;font-weight:600;text-align:right;color:var(--x-ink)}
.fn__form{width:min(460px,92vw);display:flex;flex-direction:column;gap:11px;margin-top:4px}
.fn__form h3,.fn__form h4{font-family:var(--x-fd);font-weight:500;font-size:clamp(19px,3vw,23px);
margin:0;text-align:center;letter-spacing:-.01em}
.fn__form>p{margin:0 0 4px;text-align:center;font-size:15px;color:var(--x-ink2);line-height:1.5}
.fn__form input{width:100%;font-family:var(--x-fb);font-size:16px;color:var(--x-ink);
background:var(--x-card);border:1.5px solid var(--x-line);border-radius:18px;
padding:17px 20px;outline:none;transition:.25s var(--x-ease);box-shadow:var(--x-sh2)}
.fn__form input::placeholder{color:var(--x-ink3)}
.fn__form input:focus{border-color:var(--x-acc);box-shadow:0 0 0 4px rgba(126,108,224,.15)}
.xbtn{appearance:none;border:0;cursor:pointer;border-radius:999px;
font-family:var(--x-fb);font-weight:600;font-size:16px;color:#fff;
background:var(--x-grad);padding:18px 30px;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
box-shadow:0 20px 44px -14px rgba(110,90,220,.6);transition:.3s var(--x-ease)}
.xbtn:hover{transform:translateY(-2px)}
.xbtn:active{transform:scale(.97)}
.xbtn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.4;fill:none}
.fn__note{margin:2px 0 0;text-align:center;font-size:13px;color:var(--x-ink3);line-height:1.5}
.fn__done{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
padding:16px 0}
.fn__done svg{width:64px;height:64px;stroke:#3fbf8f;stroke-width:1.7;fill:none}
.fn__done h3,.fn__done h4{font-family:var(--x-fd);font-weight:500;font-size:23px;margin:0}
.fn__done p{margin:0;font-size:15px;color:var(--x-ink2);max-width:32ch;line-height:1.5}
/* ─── КАЛЬКУЛЯТОР (таб 2) ───────────────────────────────────── */
.clc{width:100%;min-height:clamp(600px,84svh,840px);display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:clamp(13px,2vw,19px);
padding:clamp(16px,3vw,40px) clamp(14px,4vw,40px) clamp(36px,6vw,60px)}
.clc__fields{width:min(620px,94%);display:flex;flex-direction:column;gap:clamp(17px,2.8vw,25px);
margin-top:4px}
.clc__f>label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
font-size:15px;font-weight:600;color:var(--x-ink2);margin-bottom:12px}
.clc__f>label b{font-family:var(--x-fd);font-weight:500;font-size:17px;color:var(--x-ink)}
.seg{display:flex;flex-wrap:wrap;gap:9px}
.seg button{appearance:none;cursor:pointer;font-family:var(--x-fb);font-weight:600;
font-size:15px;color:var(--x-ink2);padding:13px 17px;border-radius:16px;
background:var(--x-card);border:1.5px solid var(--x-line);
display:inline-flex;align-items:center;gap:9px;transition:.25s var(--x-ease)}
.seg button:hover{transform:translateY(-2px)}
.seg button.is-on{background:var(--x-ink);border-color:var(--x-ink);color:#fff}
.clc__cta{width:min(460px,94%);display:flex;flex-direction:column;gap:10px;margin-top:6px}
.clc__cta p{margin:0;text-align:center;font-size:13.5px;color:var(--x-ink3)}
/* ─── АДАПТИВ БЛОКА ─────────────────────────────────────────── */
@media(max-width:820px){
.cn{grid-template-columns:1fr;justify-items:center}
.cn__frame{max-width:min(420px,86vw)}
.cn__rows{width:min(470px,100%)}
/* полотно и свет — в одну колонку, кадр сверху */
.fb,.lx{grid-template-columns:1fr;justify-items:center;gap:clamp(14px,3vw,22px)}
.fb__frame,.lx__frame{width:min(420px,86vw)}
.fb__side,.lx__side{width:min(470px,100%)}
.fb__name{text-align:center;align-self:center}
.fb__kind{align-self:center}
.fb__desc,.lx__sub{text-align:center}
}
@media(max-width:760px){
/* ПРОФИЛЬ на мобильном: горизонтальные строки-карточки вместо
вертикальных полосок — превью читается, текст не сплющен */
.xp{flex-direction:column;height:auto;width:min(470px,100%);gap:10px}
.xpp{flex:none;height:96px;border-radius:20px;
transition:height .55s var(--x-ease),box-shadow .4s var(--x-ease)}
.xpp.is-on{flex:none;height:min(46svh,320px);box-shadow:var(--x-sh)}
.xpp img,.xpp video{object-position:center 38%}
.xpp__shade{background:linear-gradient(90deg,rgba(10,10,16,.78),rgba(10,10,16,.35) 62%,rgba(10,10,16,.12))}
.xpp.is-on .xpp__shade{background:linear-gradient(180deg,rgba(10,10,16,.12) 30%,rgba(10,10,16,.72) 100%)}
.xpp__ico{top:50%;left:16px;transform:translateY(-50%);width:48px;height:48px;
transition:top .45s var(--x-ease),transform .45s var(--x-ease)}
.xpp.is-on .xpp__ico{top:16px;transform:none}
.xpp__chk{top:50%;right:16px;transform:translateY(-50%) scale(.5)}
.xpp.is-on .xpp__chk{top:16px;transform:none;opacity:1}
.xpp__cap{left:78px;right:64px;bottom:auto;top:50%;transform:translateY(-50%);
transition:top .45s var(--x-ease),left .45s var(--x-ease),transform .45s var(--x-ease)}
.xpp.is-on .xpp__cap{top:auto;bottom:18px;left:20px;right:20px;transform:none}
.xpp__cap h4{white-space:normal;font-size:19px}
.xpp__cap p{font-size:14.5px}
}
@media(max-width:640px){
.mpx{border-radius:clamp(20px,5vw,28px)}
/* высоту сцены задаёт содержимое, но не меньше экрана: короткие шаги
не сжимают секцию, длинные — прокручиваются внутри страницы */
.scn{min-height:calc(100svh - 92px);height:auto;padding:14px 14px 122px;gap:10px;
justify-content:flex-start;padding-top:22px}
.mpx__top{padding:14px 14px 2px}
.mpx__tabs{width:min(420px,96%)}
.mpx__tabs button{flex:1;justify-content:center;padding:13px 10px;font-size:14px}
.fab--back{width:52px;height:52px}
.fab--next{width:60px;height:60px}
.mpx__dots{padding:12px 14px;gap:7px}
.mpx__nav{bottom:16px}
/* сцена 1 */
.rmc{flex-basis:clamp(208px,58vw,280px)}
.rms{padding:12px 6vw 20px}
/* сцена 2 */
.ar__num b,.ar__num input{font-size:clamp(72px,20vw,120px)}
.ar__tabs button{padding:12px 14px;font-size:14.5px}
/* сцена 3 — кадр по высоте экрана */
.fb__frame{width:auto;height:min(34svh,340px);aspect-ratio:3/4}
.fb__pill{padding:13px 14px 11px;gap:8px}
.fb__brands{gap:9px}
.fb__brands button{padding:11px 14px}
/* сцена 5 */
.lx__frame{width:auto;height:min(34svh,340px);aspect-ratio:3/4}
.lx__chips button{padding:13px 16px;font-size:14.5px}
/* сцена 6 */
.cn{gap:14px}
.cn__frame{width:auto;height:min(30svh,300px);aspect-ratio:3/4}
.cnr{padding:12px}
.cnr__ico{width:44px;height:44px}
.cnr__ico svg{width:24px;height:24px}
.cnr__tx b{font-size:16px}
.cnr__tx span{font-size:14px;line-height:1.35}
.cn__rows{gap:9px}
/* сцена 7 */
.fn__spec{padding:2px 16px}
.fn__row{padding:11px 0}
/* калькулятор */
.clc{min-height:calc(100svh - 92px);padding:14px 14px 36px}
.seg button{padding:12px 14px;font-size:14.5px}
}
@media(max-width:380px){
.fb__pill{gap:10px}
.swx i{width:42px}
}
/* ══════════════════════════════════════════════════════════════════
04 · ПРИМЕРЫ РАБОТ · вертикальная витрина · .wx
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
ПОРТФОЛИО · вертикальная витрина · .wx
1. каркас и вход 2. шапка 3. кадр 9:16 и медиа
4. панель проекта 5. список работ 6. модалка
7. адаптив, motion
══════════════════════════════════════════════════════════ */
/* ── 1. каркас и вход ───────────────────────────────────── */
.wx{
position:relative;overflow:hidden;
background:
radial-gradient(1100px 560px at 84% -12%, var(--glow-soft,rgba(180,205,240,.18)), transparent 62%),
radial-gradient(760px 480px at -12% 112%, rgba(180,205,240,.07), transparent 60%),
#0B0D10;
color:var(--txt,#EAEEF3);
font-family:'Onest',system-ui,sans-serif;
padding:clamp(72px,9vw,120px) clamp(18px,4vw,56px);
}
.wx *,.wx *::before,.wx *::after{box-sizing:border-box}
.wx [hidden]{display:none!important}
.wx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.wx :focus-visible{outline:2px solid var(--glow,rgba(210,225,245,.55));outline-offset:3px;border-radius:10px}
.wx__wrap{max-width:var(--maxw,1200px);margin:0 auto}
.wx .pre{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease,ease),transform .7s var(--ease,ease)}
.wx.lit .pre{opacity:1;transform:none}
.wx.lit .pre.d1{transition-delay:.08s}
.wx.lit .pre.d2{transition-delay:.18s}
/* ── 2. шапка ───────────────────────────────────────────── */
.wx__head{max-width:780px;margin-bottom:clamp(28px,4vw,50px)}
.wx__kicker{
display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--txt-dim,#A7B0BD);
}
.wx__kicker::before{content:"";width:34px;height:1px;background:var(--glow,rgba(210,225,245,.55))}
.wx__title{margin:0;font-family:'Unbounded',sans-serif;font-weight:300;
font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:-.01em}
.wx__title b{font-weight:500;color:transparent;
background:linear-gradient(120deg,#fff,rgba(210,225,245,.75));
-webkit-background-clip:text;background-clip:text}
.wx__sub{margin:18px 0 0;max-width:600px;font-size:16px;line-height:1.6;color:var(--txt-dim,#A7B0BD)}
/* ── 3. кадр 9:16 и медиа ───────────────────────────────── */
.wx__stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.wx__frame{
position:relative;aspect-ratio:9/16;height:clamp(520px,66vh,680px);
border-radius:var(--r-lg,30px);overflow:hidden;isolation:isolate;
background:#0e1116;
border:1px solid var(--line-2,rgba(255,255,255,.14));
box-shadow:0 46px 100px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.wx__lay{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.wx__lay.is-on{opacity:1}
.wx__lay img,.wx__lay video{width:100%;height:100%;object-fit:cover;display:block}
.wx__lay.is-zoom img{animation:wxZoom 9s ease-out forwards}
@keyframes wxZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.wx__lay.wx-noimg{background:linear-gradient(150deg,#151b25,#0d1016 60%,#141019)}
/* градиенты под сегменты и низ */
.wx__frame::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(to bottom, rgba(8,10,14,.62), transparent 15%),
linear-gradient(to top, rgba(8,10,14,.5), transparent 22%);
}
/* сегменты медиа (как в сторис) */
.wx__segs{position:absolute;z-index:4;left:14px;right:14px;top:14px;display:flex;gap:6px}
.wx__seg{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.24);overflow:hidden}
.wx__seg i{display:block;height:100%;width:0;border-radius:99px;background:#fff}
.wx__seg.is-done i{width:100%}
.wx__seg.is-live i{width:100%}
.wx__seg.is-live.is-vid i{width:var(--p,0%)}
/* бейдж «видео» */
.wx__vbadge{
position:absolute;z-index:4;right:14px;top:32px;
display:none;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
background:var(--glass,rgba(20,24,30,.55));backdrop-filter:blur(12px);
border:1px solid var(--line-2,rgba(255,255,255,.14));
font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.wx__vbadge.is-on{display:inline-flex}
.wx__vbadge::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:wxRec 1.4s ease-in-out infinite}
@keyframes wxRec{0%,100%{opacity:1}50%{opacity:.25}}
/* звук */
.wx__mute{
position:absolute;z-index:5;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;
display:none;align-items:center;justify-content:center;
background:var(--glass,rgba(20,24,30,.55));backdrop-filter:blur(12px);
border:1px solid var(--line-2,rgba(255,255,255,.14));
transition:transform .2s var(--ease,ease);
}
.wx__mute.is-on{display:flex}
.wx__mute:hover{transform:scale(1.06)}
.wx__mute svg{width:22px;height:22px;fill:var(--txt,#EAEEF3)}
.wx__mute .m-off{display:none}
.wx__mute.is-muted .m-on{display:none}
.wx__mute.is-muted .m-off{display:block}
/* стрелки проектов */
.wx__nav{
position:absolute;z-index:5;top:50%;transform:translateY(-50%);
width:54px;height:54px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--glass,rgba(20,24,30,.55));backdrop-filter:blur(12px);
border:1px solid var(--line-2,rgba(255,255,255,.14));
transition:transform .2s var(--ease,ease),background .2s ease;
}
.wx__nav:hover{background:rgba(210,225,245,.2);transform:translateY(-50%) scale(1.06)}
.wx__nav svg{width:20px;height:20px;fill:var(--txt,#EAEEF3)}
.wx__nav--prev{left:14px}
.wx__nav--next{right:14px}
/* подпись жестов под кадром */
.wx__gest{
margin:14px 0 0;text-align:center;
font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute,#6B7480);
}
.wx__gest b{color:var(--txt-dim,#A7B0BD)}
/* ── 4. панель проекта ──────────────────────────────────── */
.wx__side{display:flex;flex-direction:column;gap:20px;min-width:0}
.wx__num{
font-family:'Inter',sans-serif;font-size:15px;font-weight:600;letter-spacing:.2em;color:var(--txt-mute,#6B7480);
}
.wx__num b{color:var(--txt,#EAEEF3);font-size:22px;letter-spacing:.08em}
.wx__name{
margin:0;font-family:'Unbounded',sans-serif;font-weight:500;
font-size:clamp(24px,2.8vw,34px);line-height:1.16;letter-spacing:-.01em;
}
.wx__where{margin:0;font-size:17px;font-weight:600;color:var(--txt-dim,#A7B0BD)}
.wx__where b{color:var(--txt,#EAEEF3)}
.wx__brief{
margin:0;font-size:16.5px;line-height:1.6;color:var(--txt-dim,#A7B0BD);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wx__price{font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(26px,3vw,36px);line-height:1}
.wx__price small{display:block;margin-top:8px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute,#6B7480)}
.wx__acts{display:flex;gap:14px;flex-wrap:wrap}
.wx__btn{
display:inline-flex;align-items:center;justify-content:center;gap:11px;
min-height:56px;padding:0 26px;border-radius:999px;text-decoration:none;
font-family:'Onest',sans-serif;font-weight:700;font-size:16.5px;
transition:transform .2s var(--ease,ease),box-shadow .2s ease,background .2s ease;
}
.wx__btn svg{width:18px;height:18px;fill:currentColor}
.wx__btn--main{color:#0B0D10;background:linear-gradient(120deg,#ffffff,#cfe0f4);
box-shadow:0 18px 44px -14px rgba(210,225,245,.45)}
.wx__btn--main:hover{transform:translateY(-2px);box-shadow:0 24px 52px -14px rgba(210,225,245,.6)}
.wx__btn--ghost{color:var(--txt,#EAEEF3);background:var(--glass,rgba(20,24,30,.55));
border:1px solid var(--line-2,rgba(255,255,255,.14));backdrop-filter:blur(12px)}
.wx__btn--ghost:hover{background:rgba(210,225,245,.14)}
/* ── 5. список работ ────────────────────────────────────── */
.wx__panel{display:flex;flex-direction:column;gap:20px;min-width:0}
.wx__listwrap{margin-top:6px;border-top:1px solid var(--line,rgba(255,255,255,.08));padding-top:8px}
.wx__list{display:flex;flex-direction:column}
.wx__item{border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.wx__row{
width:100%;display:flex;align-items:center;gap:18px;min-height:66px;padding:10px 8px;text-align:left;
border-radius:12px;
transition:background .2s ease;
}
.wx__row:hover{background:rgba(210,225,245,.06)}
.wx__row-num{
flex-shrink:0;width:44px;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
letter-spacing:.08em;color:var(--txt-mute,#6B7480);
}
.wx__row-txt{min-width:0;flex:1}
.wx__row-txt b{display:block;font-size:18px;font-weight:700;line-height:1.3;color:var(--txt,#EAEEF3)}
.wx__row-txt span{display:block;margin-top:3px;font-size:14.5px;color:var(--txt-mute,#6B7480)}
.wx__row-go{flex-shrink:0;width:34px;height:34px;opacity:0;transition:opacity .2s ease,transform .35s var(--ease,ease);display:flex;align-items:center;justify-content:center}
.wx__row-go svg{width:18px;height:18px;fill:var(--txt-dim,#A7B0BD)}
.wx__row:hover .wx__row-go{opacity:1}
.wx__row.is-active{background:rgba(210,225,245,.09)}
.wx__row.is-active .wx__row-num{color:var(--txt,#EAEEF3)}
.wx__row.is-active .wx__row-txt b{color:transparent;
background:linear-gradient(120deg,#fff,rgba(210,225,245,.8));
-webkit-background-clip:text;background-clip:text}
.wx__list.is-cut .wx__item:nth-child(n+5){display:none}
.wx__list.is-cut .wx__item.is-open{display:block}
/* аккордеон (работает на мобильных, см. медиа-запросы) */
.wx__acc{height:0;overflow:hidden;transition:height .6s var(--ease,ease)}
.wx__accin{padding:2px 2px 24px}
.wx__all{
margin-top:12px;width:100%;min-height:56px;border-radius:var(--r-sm,14px);
font-family:'Inter',sans-serif;font-size:14.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--txt-dim,#A7B0BD);background:var(--glass,rgba(20,24,30,.55));
border:1px solid var(--line,rgba(255,255,255,.08));
transition:background .2s ease,color .2s ease;
}
.wx__all:hover{background:rgba(210,225,245,.1);color:var(--txt,#EAEEF3)}
/* ── 6. модалка проекта ─────────────────────────────────── */
.wx__modal{
position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
background:rgba(6,8,11,.7);backdrop-filter:blur(10px);
opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.wx__modal.is-open{opacity:1;pointer-events:auto}
.wx__sheet{
width:min(720px,100%);max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
border-radius:var(--r-lg,30px) var(--r-lg,30px) 0 0;
background:linear-gradient(180deg,#171b22,#101318);
border:1px solid var(--line-2,rgba(255,255,255,.14));border-bottom:0;
padding:clamp(22px,3.4vw,36px);
transform:translateY(40px);transition:transform .35s var(--ease,ease);
-webkit-overflow-scrolling:touch;
}
.wx__modal.is-open .wx__sheet{transform:none}
.wx__m-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.wx__m-name{margin:0;font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(24px,3vw,30px);line-height:1.18}
.wx__close{
flex-shrink:0;width:52px;height:52px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--glass,rgba(20,24,30,.55));border:1px solid var(--line-2,rgba(255,255,255,.14));
transition:background .2s ease,transform .2s var(--ease,ease);
}
.wx__close:hover{background:rgba(210,225,245,.16);transform:rotate(90deg)}
.wx__close svg{width:20px;height:20px;fill:var(--txt,#EAEEF3)}
.wx__m-where{margin:0 0 20px;font-size:17px;font-weight:600;color:var(--txt-dim,#A7B0BD)}
.wx__m-desc{margin:0 0 24px;font-size:16.5px;line-height:1.7;color:var(--txt-dim,#A7B0BD)}
.wx__m-facts{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
background:var(--line,rgba(255,255,255,.08));border:1px solid var(--line,rgba(255,255,255,.08));
border-radius:var(--r-sm,14px);overflow:hidden;margin:0 0 24px;
}
.wx__m-fact{background:#12151b;padding:16px 18px}
.wx__m-fact dt{margin:0 0 7px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mute,#6B7480)}
.wx__m-fact dd{margin:0;font-size:18px;font-weight:700;color:var(--txt,#EAEEF3)}
.wx__m-label{margin:0 0 14px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mute,#6B7480)}
.wx__m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:26px}
.wx__thumb{
position:relative;aspect-ratio:9/14;border-radius:var(--r-sm,14px);overflow:hidden;
border:1px solid var(--line,rgba(255,255,255,.08));background:#0e1116;
transition:transform .2s var(--ease,ease),border-color .2s ease;
}
.wx__thumb:hover{transform:translateY(-3px);border-color:var(--glow,rgba(210,225,245,.55))}
.wx__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wx__thumb.is-vid::after{
content:"";position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;
background:rgba(10,12,16,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EAEEF3'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/20px no-repeat;
border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px);
}
.wx__m-cta{width:100%}
/* ── 7. адаптив и motion ────────────────────────────────── */
@media (max-width:1023px){
.wx__stage{grid-template-columns:1fr}
/* мобильный режим: витрина живёт в аккордеоне списка */
.wx__viewercol{display:none}
.wx__deskinfo{display:none}
.wx__side .wx__panel{display:none}
.wx__listwrap{margin-top:0;border-top:0;padding-top:0}
.wx__item{scroll-margin-top:16px}
.wx__row-go{opacity:1}
.wx__item.is-open .wx__row-go{transform:rotate(90deg)}
.wx__item.is-open .wx__row-go svg{fill:var(--txt,#EAEEF3)}
.wx__accin .wx__frame{height:min(60vh,540px);margin:10px auto 0;max-width:100%}
.wx__accin .wx__panel{display:flex;margin-top:20px}
/* въезд содержимого при раскрытии */
.wx__acc .wx__media,.wx__acc .wx__panel{
opacity:0;transform:translateY(22px) scale(.985);
transition:opacity .45s var(--ease,ease) .14s,transform .55s var(--ease,ease) .14s;
}
.wx__item.is-open .wx__media,.wx__item.is-open .wx__panel{opacity:1;transform:none}
}
@media (max-width:639px){
.wx{padding-left:16px;padding-right:16px}
.wx__nav{display:none}
.wx__acts{flex-direction:column;align-items:stretch}
.wx__btn{width:100%}
.wx__row-txt b{font-size:17px}
.wx__sheet{max-height:92vh;border-radius:var(--r,22px) var(--r,22px) 0 0}
}
@media (min-width:1024px){
.wx__all{display:none}
.wx__acc{display:none}
.wx__list.is-cut .wx__item:nth-child(n+5){display:block}
.wx__listwrap{max-height:340px;overflow-y:auto;scrollbar-width:none;
-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);
mask-image:linear-gradient(to bottom,#000 82%,transparent)}
.wx__listwrap::-webkit-scrollbar{display:none}
}
@media (prefers-reduced-motion:reduce){
.wx .pre{opacity:1;transform:none;transition:none}
.wx__lay{transition:opacity .01s}
.wx__lay.is-zoom img{animation:none}
.wx__nav,.wx__btn,.wx__close,.wx__thumb,.wx__mute,.wx__row-go{transition:none}
.wx__vbadge::before{animation:none}
.wx__modal,.wx__sheet{transition:none}
.wx__acc{transition:none}
.wx__acc .wx__media,.wx__acc .wx__panel{opacity:1;transform:none;transition:none}
}
/* ══════════════════════════════════════════════════════════════════
04b · ПРИМЕРЫ РАБОТ · МОБИЛЬНАЯ ЛЕНТА-ДЕК + BOTTOM-SHEET · .wkx
Десктоп .wx остаётся без изменений. На ширине ≤1023px витрина .wx__stage
прячется, вместо неё — снап-лента карточек-обложек; тап открывает
bottom-sheet с галереей и деталями проекта.
══════════════════════════════════════════════════════════════════ */
.wkx{display:none}
@media (max-width:1023px){
.wx .wx__stage{display:none}
.wkx{display:block;margin-top:20px}
}
.wkx :focus-visible{outline:none;box-shadow:0 0 0 3px var(--vio-dim);border-radius:18px}
/* ── лента-дек ── */
.wkx__reelwrap{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
.wkx__hint{position:absolute;right:max(calc(50vw - 590px),16px);top:-10px;z-index:2;
display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;
font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-mute);
animation:wkxNudge 1.8s var(--ease) infinite;transition:opacity .4s}
.wkx__hint.gone{opacity:0}
.wkx__hint svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@keyframes wkxNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.wkx__reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
padding:6px max(calc(50vw - 590px),16px) 22px}
.wkx__reel::-webkit-scrollbar{display:none}
.wkx__cardwrap{scroll-snap-align:center;flex:none}
.wkx__card{position:relative;width:clamp(250px,74vw,300px);aspect-ratio:3/4;
border-radius:24px;overflow:hidden;background:var(--panel);padding:0;text-align:left;
box-shadow:0 40px 90px -42px rgba(0,0,0,.95);transition:transform .5s var(--spring)}
.wkx__card:active{transform:scale(.98)}
.wkx__card img,.wkx__card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wkx__card::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(8,10,14,.92) 2%,rgba(8,10,14,.16) 44%,transparent 68%)}
.wkx__num{position:absolute;left:15px;top:14px;z-index:2;font-family:'Inter',sans-serif;
font-weight:600;font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.82)}
.wkx__play{position:absolute;right:14px;top:13px;z-index:2;width:38px;height:38px;
display:grid;place-items:center;border-radius:50%;
background:rgba(10,12,16,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wkx__play svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.wkx__cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.wkx__cap b{display:block;font-family:'Unbounded',sans-serif;font-weight:400;
font-size:clamp(17px,4.6vw,20px);line-height:1.18;color:#fff;letter-spacing:-.01em}
.wkx__meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:9px}
.wkx__meta span{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;
font-size:12.5px;font-weight:500;color:rgba(220,228,240,.85)}
.wkx__meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--vio)}
.wkx__open{margin-top:12px;display:inline-flex;align-items:center;gap:8px;min-height:38px;
padding:0 15px;border-radius:999px;background:rgba(255,255,255,.12);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:#fff}
.wkx__open svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* прогресс-точки */
.wkx__dots{display:flex;justify-content:center;gap:7px;margin-top:2px}
.wkx__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);
transition:width .35s var(--spring),background .35s}
.wkx__dots i.on{width:22px;border-radius:4px;background:var(--vio);box-shadow:0 0 12px 1px var(--vio-dim)}
.wkx__all{display:flex;justify-content:center;margin-top:22px}
.wkx__all button{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 24px;
border-radius:999px;background:rgba(255,255,255,.05);font-family:'Inter',sans-serif;
font-size:15px;font-weight:600;color:var(--txt);transition:background .3s}
.wkx__all svg{width:17px;height:17px;stroke:var(--vio);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* ── bottom-sheet просмотра ── */
.wkx-sheet{position:fixed;inset:0;z-index:160;display:grid;align-items:end;justify-items:center;
background:rgba(6,8,11,.72);backdrop-filter:blur(16px) saturate(1.3);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.wkx-sheet.on{opacity:1;pointer-events:auto}
.wkx-panel{position:relative;width:min(560px,100%);max-height:92dvh;overflow:auto;
-webkit-overflow-scrolling:touch;border-radius:28px 28px 0 0;
background:linear-gradient(to bottom,#171b24,#0e1116);
box-shadow:0 -34px 100px -30px rgba(0,0,0,.95);
padding-bottom:max(20px,env(safe-area-inset-bottom));
transform:translateY(46px);transition:transform .45s var(--spring)}
.wkx-sheet.on .wkx-panel{transform:none}
.wkx-grab{position:sticky;top:0;z-index:5;display:grid;justify-items:center;padding:10px 0 4px;
background:linear-gradient(to bottom,#171b24,rgba(23,27,36,0))}
.wkx-grab i{width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.2)}
.wkx-x{position:absolute;top:12px;right:12px;z-index:6;width:44px;height:44px;
display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.07);transition:background .3s}
.wkx-x svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.wkx-gal{position:relative;margin:0 14px;border-radius:22px;overflow:hidden;background:#0c0e12;aspect-ratio:3/4}
.wkx-slide{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
.wkx-slide.on{opacity:1}
.wkx-slide img,.wkx-slide video{width:100%;height:100%;object-fit:cover}
.wkx-gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;
display:grid;place-items:center;border-radius:50%;
background:rgba(10,12,16,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s}
.wkx-gnav svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wkx-gnav.prev{left:10px}.wkx-gnav.next{right:10px}
.wkx-gdots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:6px}
.wkx-gdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:.3s}
.wkx-gdots i.on{width:18px;border-radius:3px;background:#fff}
.wkx-info{padding:18px 20px 4px}
.wkx-geo{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;
font-size:13px;font-weight:600;color:var(--vio);margin-bottom:8px}
.wkx-geo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wkx-title{font-family:'Unbounded',sans-serif;font-weight:400;font-size:clamp(22px,5.8vw,28px);
line-height:1.14;letter-spacing:-.01em}
.wkx-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
.wkx-fact{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05)}
.wkx-fact small{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:5px}
.wkx-fact b{font-size:15.5px;font-weight:600}
.wkx-fact.price b{background:var(--vgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wkx-desc{font-size:15px;line-height:1.62;color:var(--txt-dim);padding:0 20px}
.wkx-sact{padding:18px 20px 4px}
.wkx-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
min-height:56px;border-radius:16px;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:#fff;
background:var(--vgrad);box-shadow:0 20px 44px -18px rgba(130,108,240,.8)}
.wkx-cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.wkx *,.wkx-sheet *{animation:none!important;transition:none!important}}
/* ══════════════════════════════════════════════════════════════════
05 · ПРАЙС · полотна и прейскурант · .prx
══════════════════════════════════════════════════════════════════ */
/* ─── ТОКЕНЫ ПРАЙСА ────────────────────────────────────────── */
@property --prxa{syntax:'';initial-value:0deg;inherits:false}
.prx{
--p-ink:#15151b; --p-ink2:#585866; --p-ink3:#8e8e9d;
--p-line:rgba(21,21,32,.10);
--p-grad:linear-gradient(115deg,#6a56d6,#a98cff 55%,#7fa8ff);
--p-green:#1fae63; --p-red:#e23d3d; --p-blue:#3f6fe0;
--p-sh:0 30px 70px -32px rgba(40,34,90,.32);
--p-sh2:0 16px 40px -18px rgba(40,34,90,.26);
--p-ease:cubic-bezier(.22,1,.36,1);
--p-fd:'Unbounded',system-ui,sans-serif;
--p-fb:'Onest','Inter',system-ui,sans-serif;
position:relative;overflow:clip;color:var(--p-ink);font-family:var(--p-fb);
padding:clamp(56px,7vw,100px) 0;
background:
radial-gradient(46% 32% at 10% 8%,rgba(140,120,255,.16),transparent 70%),
radial-gradient(42% 30% at 90% 10%,rgba(31,191,113,.13),transparent 70%),
radial-gradient(50% 36% at 50% 106%,rgba(120,170,255,.12),transparent 72%),
#f5f6f8;
}
.prx *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* цветные ауры ПОД стеклом — их и переливают карточки */
.prx__orb{position:absolute;z-index:0;border-radius:50%;filter:blur(58px);pointer-events:none}
.prx__orb--a{width:42vw;height:42vw;max-width:560px;max-height:560px;left:-10%;top:4%;
background:radial-gradient(circle,rgba(122,98,255,.48),transparent 65%);
animation:prxDrift 15s var(--p-ease) infinite alternate}
.prx__orb--b{width:34vw;height:34vw;max-width:460px;max-height:460px;right:-8%;top:12%;
background:radial-gradient(circle,rgba(31,191,113,.42),transparent 65%);
animation:prxDrift 20s var(--p-ease) -7s infinite alternate-reverse}
.prx__orb--c{width:36vw;height:36vw;max-width:470px;max-height:470px;left:6%;bottom:-8%;
background:radial-gradient(circle,rgba(226,61,61,.30),transparent 65%);
animation:prxDrift 24s var(--p-ease) -12s infinite alternate}
.prx__orb--d{width:32vw;height:32vw;max-width:430px;max-height:430px;right:4%;bottom:-6%;
background:radial-gradient(circle,rgba(63,111,224,.36),transparent 65%);
animation:prxDrift 18s var(--p-ease) -4s infinite alternate-reverse}
@keyframes prxDrift{to{translate:5vw 6vh;scale:1.14}}
.prx .sec__head{position:relative;z-index:2}
/* ─── СТРОКА «СОСТАВЛЯЕМ СМЕТУ» ────────────────────────────── */
.prx__calcw{position:relative;z-index:3;display:grid;grid-template-rows:0fr;opacity:0;
justify-items:center;margin:0 auto clamp(8px,1.2vw,14px);
transition:grid-template-rows .5s var(--p-ease),opacity .4s var(--p-ease)}
.prx.pre .prx__calcw{grid-template-rows:1fr;opacity:1}
.prx__calcw.done{grid-template-rows:0fr;opacity:0;pointer-events:none}
.prx__calc{overflow:hidden;min-height:0;width:min(560px,92vw);
display:flex;align-items:center;gap:13px;padding:13px 18px;border-radius:18px;
background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);
box-shadow:var(--p-sh2);backdrop-filter:blur(18px) saturate(1.5);
-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.prx__calc svg{width:21px;height:21px;flex:none;stroke:#6a56d6;stroke-width:1.8;fill:none}
.prx__calc svg .bl{animation:prxBlink 1s steps(2) infinite}
@keyframes prxBlink{50%{opacity:.15}}
.prx__calc small{font-size:13.5px;font-weight:600;color:var(--p-ink2);white-space:nowrap}
.prx__bar{flex:1;height:6px;border-radius:99px;background:rgba(21,21,32,.08);overflow:hidden}
.prx__bar i{position:relative;display:block;height:100%;width:0;border-radius:99px;background:var(--p-grad)}
.prx__bar i::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
background:linear-gradient(105deg,transparent,rgba(255,255,255,.8),transparent);
animation:prxBarS 1.1s linear infinite}
@keyframes prxBarS{to{transform:translateX(140%)}}
.prx__calc b{font-family:var(--p-fd);font-weight:500;font-size:15.5px;min-width:3.4ch;text-align:right;
background:var(--p-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ─── КАРТЫ ПРОИЗВОДИТЕЛЕЙ ─────────────────────────────────── */
.prx__brands{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;
gap:clamp(14px,1.5vw,20px);width:min(1560px,94vw);margin:0 auto}
.bcard{--bc:#8b7bd8;position:relative;border-radius:28px;
flex:1 1 232px;max-width:304px;min-width:228px;
padding:clamp(19px,1.8vw,24px) clamp(17px,1.6vw,22px);
background:linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.42));
border:1px solid rgba(255,255,255,.9);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--p-sh);
backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
display:flex;flex-direction:column;gap:12px;min-height:430px}
/* ирризирующая плёнка — сам «перелив» стекла */
.bcard__iri{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;
background:linear-gradient(115deg,rgba(255,90,190,.12),rgba(80,190,255,.14) 30%,
rgba(110,255,190,.12) 55%,rgba(190,120,255,.14) 80%,rgba(255,200,120,.10));
background-size:230% 230%;mix-blend-mode:overlay;
animation:prxIri 9s var(--p-ease) infinite alternate}
.bcard:hover .bcard__iri{opacity:.9}
@keyframes prxIri{to{background-position:100% 100%}}
/* бегущий по кромке блик в цвет бренда */
.bcard::before{content:"";position:absolute;inset:-1px;border-radius:29px;padding:1.4px;
pointer-events:none;opacity:.85;
background:conic-gradient(from var(--prxa),
transparent 0 12%,var(--bc) 22%,rgba(255,255,255,1) 28%,var(--bc) 34%,transparent 46% 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:prxSpin 7s linear infinite}
@keyframes prxSpin{to{--prxa:360deg}}
/* блик за курсором */
.bcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
background:radial-gradient(320px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.5),transparent 55%);
transition:opacity .35s}
.bcard:hover::after{opacity:1}
/* разовый прочерк света при материализации */
.bcard__shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.bcard__shine i{position:absolute;top:-40%;bottom:-40%;left:-30%;width:34%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:translateX(-190%) rotate(14deg)}
.bcard.in .bcard__shine i{animation:prxStreak 1s var(--p-ease) .15s forwards}
@keyframes prxStreak{to{transform:translateX(620%) rotate(14deg)}}
/* вход по мере «расчёта» */
.prx.pre .bcard{opacity:0;translate:0 32px;filter:blur(12px);
transition:opacity .7s var(--p-ease),translate .7s var(--p-ease),filter .7s var(--p-ease)}
.prx.pre .bcard.in{opacity:1;translate:0 0;filter:blur(0)}
.bcard__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bcard__logo{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
font-family:var(--p-fd);font-weight:600;font-size:20px;box-shadow:0 12px 26px -12px rgba(20,16,50,.45)}
.bcard__origin{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
color:var(--p-ink3);padding:8px 10px;border:1px solid var(--p-line);border-radius:999px;
background:rgba(255,255,255,.5);white-space:nowrap}
.bcard__name{font-family:var(--p-fd);font-weight:500;line-height:1;letter-spacing:-.01em;
font-size:clamp(25px,2vw,31px);
background:var(--ng,linear-gradient(180deg,#3a3a46,#15151b));
-webkit-background-clip:text;background-clip:text;color:transparent}
.bcard__pos{font-size:14px;line-height:1.55;color:var(--p-ink2)}
.bcard__tex{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.bcard__tex i{font-style:normal;font-size:12px;font-weight:600;color:var(--p-ink2);
padding:7px 10px;border-radius:999px;border:1px solid var(--p-line);background:rgba(255,255,255,.55)}
.bcard__tex i.fire{color:#c22f2f;border-color:rgba(226,61,61,.4);background:rgba(226,61,61,.08)}
.bcard__price{display:flex;align-items:baseline;gap:8px}
.bcard__price small{font-size:14px;font-weight:600;color:var(--p-ink3)}
.bcard__price b{font-family:var(--p-fd);font-weight:500;font-size:clamp(36px,3vw,42px);line-height:1;
background:var(--p-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bcard__price span{font-size:13.5px;font-weight:600;color:var(--p-ink3)}
.bcard__inc{margin-top:-7px;font-size:12.5px;font-weight:600;color:var(--p-ink3)}
.bbtn{appearance:none;cursor:pointer;width:100%;padding:14px 18px;border-radius:16px;
border:1px solid rgba(21,21,32,.12);background:rgba(255,255,255,.75);
font-family:var(--p-fb);font-weight:600;font-size:14.5px;color:var(--p-ink);
display:inline-flex;align-items:center;justify-content:center;gap:9px;
transition:.3s var(--p-ease)}
.bbtn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.bbtn:hover{background:#15151b;color:#fff;border-color:#15151b;transform:translateY(-2px)}
/* Decken — новинка */
.bcard--hot{--bc:#1fae63;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 34px 80px -28px rgba(31,174,99,.4);
animation:prxBreath 4.6s ease-in-out infinite}
@keyframes prxBreath{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 38px 90px -24px rgba(31,174,99,.55)}}
.bcard--hot .bbtn{border-color:rgba(31,174,99,.5);background:rgba(31,174,99,.12)}
.bcard--hot .bbtn:hover{background:#1fae63;border-color:#1fae63;color:#fff}
.bcard__tag{position:absolute;top:-13px;left:50%;translate:-50% 0;z-index:3;overflow:hidden;
font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;
padding:9px 13px;border-radius:999px;white-space:nowrap;
background:linear-gradient(120deg,#2ecb7c,#169a55);
box-shadow:0 12px 28px -8px rgba(31,174,99,.6)}
.bcard__tag::after{content:"";position:absolute;inset:0;transform:translateX(-140%);
background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.7) 50%,transparent 68%);
animation:prxTagShine 3.8s var(--p-ease) 1.2s infinite}
@keyframes prxTagShine{18%{transform:translateX(150%)}100%{transform:translateX(150%)}}
/* Teqtum — огнестойкий */
.bcard--fire{--bc:#e23d3d}
/* ─── ПРЕЙСКУРАНТ РАБОТ ────────────────────────────────────── */
.prx__list{position:relative;z-index:2;width:min(880px,94vw);
margin:clamp(28px,3.6vw,44px) auto 0;border-radius:28px;
border:1px solid rgba(255,255,255,.9);padding:clamp(16px,2.4vw,26px);
background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.46));
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--p-sh);
backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
.prx__lhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin:2px 4px 14px}
.prx__lhead h3{margin:0;font-family:var(--p-fd);font-weight:500;font-size:clamp(18px,2.2vw,23px);
letter-spacing:-.01em;color:var(--p-ink)}
.prx__lhead small{font-size:13px;font-weight:600;color:var(--p-ink3)}
.prx__tabs{position:relative;display:flex;gap:4px;padding:5px;border-radius:999px;
background:rgba(21,21,32,.05);border:1px solid var(--p-line);
width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.prx__tabs::-webkit-scrollbar{display:none}
.prx__tabs button{position:relative;z-index:2;appearance:none;border:0;background:0;cursor:pointer;
font-family:var(--p-fb);font-weight:600;font-size:14px;color:var(--p-ink2);
padding:11px 17px;border-radius:999px;white-space:nowrap;transition:color .3s var(--p-ease)}
.prx__tabs button.on{color:#fff}
.prx__ind{position:absolute;z-index:1;top:5px;bottom:5px;border-radius:999px;background:#15151b;
transition:left .45s var(--p-ease),width .45s var(--p-ease)}
.prx__rows{margin-top:6px}
.prow{display:flex;align-items:baseline;gap:12px;padding:14px 4px;
border-bottom:1px dashed rgba(21,21,32,.10);
opacity:0;translate:0 10px;
transition:opacity .45s var(--p-ease),translate .45s var(--p-ease);
transition-delay:calc(var(--i)*.045s)}
.prx__rows.go .prow{opacity:1;translate:0 0}
.prow:last-child{border-bottom:0}
.prow__l{min-width:0}
.prow__l b{display:block;font-weight:600;font-size:15.5px;color:var(--p-ink)}
.prow__l em{display:block;font-style:normal;font-size:13px;color:var(--p-ink3);margin-top:3px}
.prow>i{flex:1;min-width:24px;border-bottom:1px dotted rgba(21,21,32,.3);translate:0 -4px}
.prow>span{font-weight:600;font-size:15px;color:#2b2b36;white-space:nowrap}
.prx__bhint{display:none}
/* ─── АДАПТИВ ──────────────────────────────────────────────── */
@media(max-width:640px){
.prx{padding:52px 0 60px}
.prx__brands{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
width:100%;padding:10px 5vw 16px;gap:14px}
.prx__brands::-webkit-scrollbar{display:none}
.prx__brands>.bcard{flex:0 0 min(80vw,330px);max-width:none;scroll-snap-align:center;min-height:404px}
.prx__brands>.bcard:first-child{margin-left:auto}
.prx__brands>.bcard:last-child{margin-right:auto}
.prx__bhint{display:flex;justify-content:center;margin-top:2px;
transition:opacity .5s,translate .5s}
.prx__bhint.gone{opacity:0;translate:0 8px}
.prx__bhint span{font-size:13.5px;font-weight:600;color:var(--p-ink3);
padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.9);
background:rgba(255,255,255,.6);box-shadow:var(--p-sh2);
backdrop-filter:blur(14px)}
.prx__bhint b{color:var(--p-ink);font-weight:600}
.prow{gap:10px;padding:13px 2px}
}
@media(prefers-reduced-motion:reduce){
.prx__orb,.bcard::before,.bcard--hot,.bcard__tag::after,.bcard__iri,.prx__bar i::after{animation:none!important}
.prx.pre .bcard{opacity:1;translate:0 0;filter:none}
}
/* ══════════════════════════════════════════════════════════════════
07 · РАССРОЧКА · карты и калькулятор · .rs
══════════════════════════════════════════════════════════════════ */
/* ─── ТОКЕНЫ РАССРОЧКИ ─────────────────────────────────────── */
@property --rsa{syntax:'';initial-value:0deg;inherits:false}
.rs{
--r-ink:#15151b; --r-ink2:#585866; --r-ink3:#8e8e9d;
--r-line:rgba(21,21,32,.10);
--r-grad:linear-gradient(115deg,#6a56d6,#a98cff 55%,#7fa8ff);
--r-acc:#7e6ce0;
--r-sh:0 30px 70px -32px rgba(40,34,90,.32);
--r-sh2:0 16px 40px -18px rgba(40,34,90,.26);
--r-ease:cubic-bezier(.22,1,.36,1);
--r-fd:'Unbounded',system-ui,sans-serif;
--r-fb:'Onest','Inter',system-ui,sans-serif;
position:relative;overflow:clip;color:var(--r-ink);font-family:var(--r-fb);
padding:clamp(56px,7vw,100px) 0;
background:
radial-gradient(46% 32% at 8% 6%,rgba(140,120,255,.15),transparent 70%),
radial-gradient(42% 30% at 92% 14%,rgba(120,170,255,.12),transparent 70%),
radial-gradient(50% 36% at 50% 108%,rgba(190,150,255,.10),transparent 72%),
#f5f6f8;
}
.rs *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.rs [hidden]{display:none!important}
.rs .sec__head{position:relative;z-index:2}
.rs__row{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;
gap:clamp(18px,2.6vw,36px);align-items:start;width:min(1180px,94vw);margin:0 auto}
/* ─── ПЕРЕКЛЮЧАТЕЛЬ: РАССРОЧКА / ПО КАРТЕ БАНКА ────────────── */
.rs__mode{position:relative;z-index:2;display:flex;gap:4px;padding:6px;
margin:0 auto clamp(18px,2.4vw,24px);width:min(480px,100%);border-radius:999px;
background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
box-shadow:var(--r-sh2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.rs__modeInd{position:absolute;z-index:1;top:6px;bottom:6px;left:6px;
width:calc(50% - 6px);border-radius:999px;background:#15151b;
transition:left .5s var(--r-ease),width .5s var(--r-ease)}
.rs__mode button{position:relative;z-index:2;flex:1;appearance:none;border:0;
cursor:pointer;background:0;padding:15px 10px;border-radius:999px;text-align:center;
font-family:var(--r-fb);font-weight:600;font-size:15px;color:var(--r-ink2);
transition:color .35s var(--r-ease)}
.rs__mode button.on{color:#fff}
/* какие карты видны в каждом режиме — по data-mode самой карты */
.rs{overflow:clip visible}
.rs.mode-own .rcard[data-mode="card"]{display:none}
.rs.mode-card .rcard[data-mode="loan"]{display:none}
/* в режиме своей рассрочки карта одна — пульт и подсказка свайпа не нужны */
.rs.mode-own .rs__pilot,.rs.mode-own .rs__deckhint{display:none}
/* колода из 1 карты (рассрочка) чуть компактнее колоды из 4 (карты банков) */
.rs.mode-own .rs__deck{height:clamp(300px,30vw,340px)}
/* ─── СТОПКА ПЛАТЁЖНЫХ КАРТ ────────────────────────────────── */
.rs__deckwrap{position:relative}
.rs__deck{position:relative;height:clamp(360px,34vw,430px);perspective:1200px;
touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rcard{position:absolute;left:0;right:0;top:0;margin:0 auto;width:min(430px,92%);aspect-ratio:1.586;
border-radius:24px;cursor:pointer;touch-action:pan-y;
transform-origin:50% 85%;will-change:transform;
transition:box-shadow .5s var(--r-ease),filter .5s var(--r-ease);
box-shadow:0 30px 60px -28px rgba(20,16,50,.45)}
/* фолбэк, если GSAP не загрузился: раскладку берёт на себя CSS */
.rs.no-gsap .rcard{transition:transform .55s var(--r-ease),box-shadow .5s var(--r-ease),filter .5s var(--r-ease)}
.rs.no-gsap .rcard[data-pos="0"]{transform:none}
.rs.no-gsap .rcard[data-pos="1"]{transform:translateY(9%) scale(.94)}
.rs.no-gsap .rcard[data-pos="2"]{transform:translateY(17%) scale(.885)}
.rs.no-gsap .rcard[data-pos="3"]{transform:translateY(24%) scale(.835)}
.rs.no-gsap .rcard[data-pos="9"]{transform:translateY(24%) scale(.835);opacity:0}
.rcard__in{position:absolute;inset:0;border-radius:24px;overflow:hidden;
padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;
border:1px solid rgba(255,255,255,.5)}
/* банковские карты — светлое стекло с брендовым тоном */
.rcard--bank .rcard__in{
background:
radial-gradient(120% 90% at 85% -10%,var(--bc,#7e6ce0) 0%,transparent 55%),
linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.68));
backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.rcard--bank .rcard__in::before{content:"";position:absolute;inset:0;opacity:.35;
mix-blend-mode:overlay;pointer-events:none;
background:linear-gradient(115deg,rgba(255,90,190,.14),rgba(80,190,255,.16) 34%,
rgba(110,255,190,.12) 58%,rgba(190,120,255,.16) 82%)}
/* СВОЯ карта — тёмный премиум-шильдик */
.rcard--own{box-shadow:0 40px 80px -30px rgba(10,12,20,.65)}
.rcard--own .rcard__in{color:#EAEEF3;border-color:rgba(255,255,255,.16);
background:
radial-gradient(130% 100% at 88% -12%,rgba(126,108,224,.35),transparent 55%),
linear-gradient(155deg,#1a1d26,#0c0e14 62%,#141722)}
/* бегущий блик по кромке своей карты */
.rcard--own::before{content:"";position:absolute;inset:-1px;border-radius:25px;
padding:1.4px;pointer-events:none;opacity:.9;
background:conic-gradient(from var(--rsa),transparent 0 14%,
#cfe0ff 24%,rgba(255,255,255,.95) 30%,#a98cff 36%,transparent 50% 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:rsSpin 8s linear infinite}
@keyframes rsSpin{to{--rsa:360deg}}
/* разовый прочерк света */
.rcard__shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
pointer-events:none;z-index:3}
.rcard__shine i{position:absolute;top:-40%;bottom:-40%;left:-30%;width:32%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
transform:translateX(-200%) rotate(13deg)}
.rcard.is-top .rcard__shine i{animation:rsStreak 1s var(--r-ease) .2s forwards}
@keyframes rsStreak{to{transform:translateX(640%) rotate(13deg)}}
.rcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rcard__brand{font-family:var(--r-fd);font-weight:500;font-size:clamp(18px,2vw,23px);
letter-spacing:-.01em;line-height:1.05}
.rcard--own .rcard__brand{color:transparent;
background:linear-gradient(110deg,#8b97ab 0%,#EDEFF4 38%,#B7C0CD 58%,#e6ebf3 78%,#5a6272 100%);
background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
animation:rsIri 7s var(--r-ease) infinite alternate}
@keyframes rsIri{to{background-position:100% 0}}
.rcard__brand small{display:block;font-family:'Inter',var(--r-fb);font-size:11px;
font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-top:5px;
color:var(--r-ink3)}
.rcard--own .rcard__brand small{color:rgba(234,238,243,.5)}
.rcard__badge{flex:none;font-family:'Inter',var(--r-fb);font-size:11.5px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;border-radius:999px;
color:var(--r-ink2);border:1px solid var(--r-line);background:rgba(255,255,255,.6)}
.rcard--own .rcard__badge{color:#cfe0ff;border-color:rgba(160,180,255,.45);
background:rgba(126,108,224,.16)}
/* чип */
.rcard__chip{width:44px;height:33px;border-radius:8px;margin-top:auto;
background:linear-gradient(140deg,#e9edf4,#b9c2d3 60%,#dfe4ee);
box-shadow:inset 0 0 0 1px rgba(20,20,40,.18);position:relative}
.rcard__chip::before{content:"";position:absolute;inset:7px 5px;
border:1px solid rgba(20,20,40,.22);border-radius:4px}
.rcard--own .rcard__chip{background:linear-gradient(140deg,#3a3f4e,#1d212c 60%,#2c3140);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.rcard--own .rcard__chip::before{border-color:rgba(255,255,255,.25)}
.rcard__num{margin-top:10px;font-family:var(--r-fd);font-weight:400;
font-size:clamp(13.5px,3.2vw,16px);letter-spacing:.1em;color:var(--r-ink2)}
.rcard--own .rcard__num{color:rgba(234,238,243,.75)}
/* партнёрская приписка: сроки 4/5/6/12 обслуживает ЗАО «Альфа-Банк» */
.rcard__partner{margin-top:10px;align-self:flex-start;display:flex;align-items:baseline;gap:9px;
padding:9px 14px;border-radius:12px;
font-family:'Inter',var(--r-fb);font-size:12.5px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;line-height:1.5;
color:#ffc4bd;background:rgba(239,49,36,.16);border:1px solid rgba(239,49,36,.55)}
.rcard__partner::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
align-self:center;
background:#EF3124;box-shadow:0 0 10px rgba(239,49,36,.9)}
.rcard__partner>span{display:block;min-width:0}
.rcard__partner b{color:#ff6a5c;font-weight:700}
/* приписка заменяет строку «без банка и справок», а подпись «рассрочка от
компании» скрывается — карта в этот момент представляет программу партнёра */
.rcard--own.is-partner .rcard__num{display:none}
.rcard--own.is-partner .rcard__brand small{display:none}
.rcard--own.is-partner .rcard__badge{color:#ffc4bd;border-color:rgba(239,49,36,.55);
background:rgba(239,49,36,.14)}
.rcard--own.is-partner .rcard__zero{background:linear-gradient(115deg,#fff,#ffb3ab 55%,#EF3124);
-webkit-background-clip:text;background-clip:text;
filter:drop-shadow(0 8px 26px rgba(239,49,36,.5))}
.rcard--own.is-partner::before{background:conic-gradient(from var(--rsa),transparent 0 14%,
#ffd0c9 24%,rgba(255,255,255,.95) 30%,#EF3124 36%,transparent 50% 100%)}
.rcard__foot{display:flex;align-items:flex-end;justify-content:space-between;
gap:10px;margin-top:12px}
.rcard__term{font-size:13.5px;font-weight:600;color:var(--r-ink3)}
.rcard--own .rcard__term{color:rgba(234,238,243,.55)}
.rcard__term b{display:block;font-family:var(--r-fd);font-weight:500;font-size:21px;
color:var(--r-ink);margin-top:2px}
.rcard--own .rcard__term b{color:#fff}
.rcard__zero{font-family:var(--r-fd);font-weight:500;font-size:clamp(24px,2.6vw,32px);
line-height:1;background:var(--r-grad);
-webkit-background-clip:text;background-clip:text;color:transparent}
.rcard--own .rcard__zero{background:linear-gradient(115deg,#fff,#cfe0ff 55%,#a98cff);
-webkit-background-clip:text;background-clip:text;
filter:drop-shadow(0 8px 26px rgba(150,140,255,.45))}
/* стопка: z-index и приглушение — по data-pos; сами transform ставит JS (GSAP),
иначе CSS и твины дерутся за одно свойство и карты «разлетаются» */
.rcard[data-pos="0"]{z-index:6;filter:none}
.rcard[data-pos="1"]{z-index:5;filter:brightness(.96) saturate(.9)}
.rcard[data-pos="2"]{z-index:4;filter:brightness(.92) saturate(.8)}
.rcard[data-pos="3"]{z-index:3;filter:brightness(.88) saturate(.7)}
.rcard:not(.is-top):hover{filter:brightness(1)}
/* уголок карты снизу торчит и приглашает нажать */
.rcard:not(.is-top){cursor:pointer}
.rcard:not(.is-top):hover{filter:brightness(1) saturate(1)}
.rcard__peek{position:absolute;left:0;right:0;bottom:0;z-index:4;
display:flex;align-items:center;justify-content:center;gap:8px;
height:36px;font-family:'Inter',var(--r-fb);font-size:12px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--r-ink3);
opacity:0;transition:opacity .4s var(--r-ease);pointer-events:none}
.rcard:not(.is-top) .rcard__peek{opacity:1}
.rcard:not(.is-top):hover .rcard__peek{color:var(--r-acc)}
/* ─── ПУЛЬТ КОЛОДЫ: стрелки + вкладки программ ─────────────── */
.rs__pilot{display:flex;align-items:center;gap:10px;margin:16px auto 0;
width:min(430px,96%)}
.rs__arr{flex:none;width:44px;height:44px;border-radius:50%;appearance:none;border:0;
cursor:pointer;background:#fff;color:var(--r-ink);display:grid;place-items:center;
box-shadow:var(--r-sh2);transition:.3s var(--r-ease)}
.rs__arr:hover{transform:translateY(-2px);color:var(--r-acc)}
.rs__arr:active{transform:scale(.93)}
.rs__arr svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.3;fill:none}
.rs__tabs{position:relative;flex:1;min-width:0;display:flex;gap:4px;padding:5px;
border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
box-shadow:var(--r-sh2);backdrop-filter:blur(12px)}
.rs__tabs .rs__ind{position:absolute;z-index:1;top:5px;bottom:5px;border-radius:999px;
background:#15151b;transition:left .5s var(--r-ease),width .5s var(--r-ease)}
.rs__tabs button{position:relative;z-index:2;flex:1;min-width:0;appearance:none;border:0;
cursor:pointer;background:0;padding:12px 6px;border-radius:999px;
font-family:var(--r-fb);font-weight:600;font-size:14px;color:var(--r-ink2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .35s var(--r-ease)}
.rs__tabs button.on{color:#fff}
.rs__deckhint{margin:12px auto 0;text-align:center;font-family:'Inter',var(--r-fb);
font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--r-ink3);transition:opacity .5s;
display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center}
.rs__deckhint svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;
animation:rsSwipe 1.8s var(--r-ease) infinite}
@keyframes rsSwipe{50%{translate:5px 0}}
.rs__deckhint.gone{opacity:0}
/* ─── КАЛЬКУЛЯТОР ПЛАТЕЖА ──────────────────────────────────── */
.rs__calc{position:relative;border-radius:28px;
padding:clamp(20px,2.4vw,30px);
background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
border:1px solid rgba(255,255,255,.95);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--r-sh);
backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
.rs__calcBody{display:flex;flex-direction:column;gap:16px}
.rs__calcEmpty{display:flex;flex-direction:column;gap:14px;text-align:left}
.rs__emptyTxt{margin:0;font-size:15px;line-height:1.6;color:var(--r-ink2)}
.rs__ck{font-family:'Inter',var(--r-fb);font-size:12px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--r-ink3)}
.rs__pay{display:flex;align-items:baseline;gap:10px;line-height:.95}
.rs__pay b{font-family:var(--r-fd);font-weight:500;letter-spacing:-.03em;
font-size:clamp(46px,5.4vw,72px);
background:var(--r-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rs__pay span{font-family:var(--r-fd);font-weight:500;font-size:clamp(16px,2vw,22px);
color:var(--r-ink3)}
.rs__paycap{margin-top:-8px;font-size:15px;font-weight:600;color:var(--r-ink2)}
.rs__paycap b{color:var(--r-acc)}
.rs__f label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
font-size:15px;font-weight:600;color:var(--r-ink2);margin-bottom:11px}
.rs__f label b{font-family:var(--r-fd);font-weight:500;font-size:17px;color:var(--r-ink)}
.rs__rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
background:#e0e0ea;outline:none;cursor:pointer}
.rs__rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
border-radius:50%;background:var(--r-grad);cursor:pointer;
box-shadow:0 8px 20px -6px rgba(110,90,220,.65),0 0 0 5px rgba(126,108,224,.14);
transition:transform .2s}
.rs__rng::-webkit-slider-thumb:active{transform:scale(1.15)}
.rs__rng::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;
background:var(--r-grad);cursor:pointer;box-shadow:0 8px 20px -6px rgba(110,90,220,.65)}
.rs__capnote{display:block;margin-top:9px;font-size:12.5px;font-weight:600;
color:var(--r-ink3)}
.rs__terms{display:flex;flex-wrap:wrap;gap:8px}
.rs__terms button{appearance:none;cursor:pointer;font-family:var(--r-fb);font-weight:600;
font-size:15.5px;color:var(--r-ink2);padding:14px 18px;border-radius:15px;
background:#fff;border:1.5px solid var(--r-line);transition:.25s var(--r-ease)}
.rs__terms button:hover{transform:translateY(-2px)}
.rs__terms button.on{background:#15151b;border-color:#15151b;color:#fff}
.rs__terms button[disabled]{opacity:.35;pointer-events:none}
/* строка «без банка» / краткая суть программы */
.rs__own{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;
background:rgba(126,108,224,.09);border:1px solid rgba(126,108,224,.3)}
.rs__own i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;
place-items:center;background:#15151b}
.rs__own svg{width:18px;height:18px;stroke:#cfe0ff;stroke-width:1.9;fill:none}
.rs__own span{font-size:14.5px;line-height:1.5;color:var(--r-ink2)}
.rs__own span b{color:var(--r-ink)}
.rs__cta{appearance:none;cursor:pointer;border:0;border-radius:17px;padding:18px 26px;
font-family:var(--r-fb);font-weight:600;font-size:16.5px;color:#fff;
background:var(--r-grad);display:inline-flex;align-items:center;
justify-content:center;gap:10px;
box-shadow:0 20px 46px -14px rgba(110,90,220,.7);
transition:transform .3s var(--r-ease),box-shadow .3s var(--r-ease)}
.rs__cta svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.rs__cta:hover{transform:translateY(-2px);box-shadow:0 26px 56px -14px rgba(110,90,220,.85)}
.rs__note{margin:-6px 0 0;text-align:center;font-size:13.5px;font-weight:600;
color:var(--r-ink3)}
/* лента доверия */
.rs__trust{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;
gap:9px 11px;width:min(1180px,94vw);margin:clamp(22px,3vw,32px) auto 0}
.rs__tr{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
color:var(--r-ink2);padding:13px 17px;border-radius:999px;
background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
box-shadow:var(--r-sh2);backdrop-filter:blur(12px)}
.rs__tr svg{width:17px;height:17px;flex:none;stroke:var(--r-acc);stroke-width:2.1;fill:none}
/* ─── ТАКЖЕ РАБОТАЕМ С БАНКАМИ: кредиты и гос. программы ───── */
/* общий блок — виден независимо от выбранной вкладки рассрочки */
.rs__morebank{position:relative;z-index:2;width:min(1180px,94vw);
margin:clamp(30px,3.8vw,44px) auto 0}
.rs__morebank h3{font-family:var(--r-fd);font-weight:500;
font-size:clamp(19px,2.2vw,23px);color:var(--r-ink);margin-bottom:6px}
.rs__morebank>p{font-size:14.5px;line-height:1.5;color:var(--r-ink3);
margin-bottom:18px;max-width:64ch}
.rs__mb{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rs__mbi{display:flex;gap:14px;padding:18px 19px;border-radius:19px;
background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.9);
box-shadow:var(--r-sh2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rs__mbi i{flex:none;width:44px;height:44px;border-radius:13px;display:grid;
place-items:center;background:#15151b}
.rs__mbi svg{width:21px;height:21px;stroke:#cfe0ff;stroke-width:1.8;fill:none}
.rs__mbi b{display:block;font-family:var(--r-fb);font-weight:700;
font-size:15.5px;color:var(--r-ink);line-height:1.3}
.rs__mbi b small{display:block;font-weight:600;font-size:12px;color:var(--r-ink3);
text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.rs__mbi p{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--r-ink2)}
.rs__mbnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--r-ink3)}
/* ─── ВХОД ─────────────────────────────────────────────────── */
/* карты: с GSAP въездом управляет JS; ниже — фолбэк .no-gsap */
.rs.no-gsap.pre .rcard{opacity:0;translate:0 46px}
.rs.no-gsap.pre.lit .rcard{opacity:1;translate:0 0;
transition:opacity .7s var(--r-ease),translate .7s var(--r-ease),
transform .65s var(--r-ease),box-shadow .5s var(--r-ease),filter .5s var(--r-ease)}
.rs.pre .rs__calc{opacity:0;translate:26px 0;filter:blur(8px);
transition:opacity .7s var(--r-ease) .15s,translate .7s var(--r-ease) .15s,
filter .7s var(--r-ease) .15s}
.rs.pre.lit .rs__calc{opacity:1;translate:0 0;filter:blur(0)}
@media(max-width:900px){
.rs__row{grid-template-columns:1fr;gap:10px}
.rs__mode{width:100%}
.rs__mode button{padding:15px 8px;font-size:14.5px}
.rs__deck{height:clamp(300px,74vw,380px)}
.rs.mode-own .rs__deck{height:clamp(270px,64vw,320px)}
.rs__mb{grid-template-columns:1fr}
.rs__mbi{padding:16px 17px}
.rcard{width:min(420px,96%)}
.rcard__in{padding:18px}
.rcard__brand{font-size:clamp(20px,5.6vw,23px)}
.rcard__zero{font-size:clamp(28px,8vw,34px)}
.rs__pilot{width:100%;margin-top:12px;gap:8px}
.rs__arr{width:48px;height:48px}
.rs__arr svg{width:21px;height:21px}
.rs__tabs button{font-size:13.5px;padding:13px 4px}
.rs__deckhint{margin-bottom:18px;font-size:12px;letter-spacing:.08em}
.rs__calc{padding:20px 16px}
.rs__pay b{font-size:clamp(52px,14vw,68px)}
.rs__terms button{flex:1;padding:14px 8px;font-size:15px}
.rs__own span{font-size:14px}
.rs__cta{width:100%;padding:19px 22px;font-size:16.5px}
.rs__tr{flex:1 1 46%;justify-content:center;text-align:center;
font-size:13.5px;padding:13px 10px}
}
@media(max-width:420px){
.rs__tabs button{font-size:11.5px;padding:11px 1px;letter-spacing:-.01em}
.rs__tabs{gap:2px;padding:4px}
}
@media(max-width:360px){
.rs__tabs button{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
.rcard--own::before,.rcard--own .rcard__brand,.rs__deckhint svg{animation:none!important}
.rs.no-gsap.pre .rcard{opacity:1;translate:0 0}
.rs.pre .rs__calc{opacity:1;translate:0 0;filter:none}
}
/* ══════════════════════════════════════════════════════════════════
06 · ПРОЩЕ ПРОСТОГО · сторис процесса · .ez
══════════════════════════════════════════════════════════════════ */
/* ─── ТОКЕНЫ БЛОКА ПРОЦЕССА ────────────────────────────────── */
.ez{
--e-ink:#F4F6FA; --e-ink2:rgba(233,236,245,.74); --e-ink3:rgba(233,236,245,.46);
--e-line:rgba(255,255,255,.12);
--e-glow:rgba(210,225,245,.9); --e-glow2:rgba(180,205,240,.4);
--e-ease:cubic-bezier(.22,1,.36,1);
--e-fd:'Unbounded',system-ui,sans-serif;
--e-fb:'Onest','Inter',system-ui,sans-serif;
position:relative;overflow:clip;color:var(--e-ink);font-family:var(--e-fb);
padding:clamp(56px,7vw,104px) 0;
background:
radial-gradient(46% 34% at 10% 4%,rgba(150,180,240,.06),transparent 70%),
radial-gradient(50% 40% at 92% 100%,rgba(150,180,240,.05),transparent 72%),
#0a0b0f;
}
.ez *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.ez [hidden]{display:none!important}
.ez img{user-select:none;-webkit-user-drag:none}
.ez .sec__head{position:relative;z-index:2}
.ez__row{position:relative;z-index:2;display:grid;
grid-template-columns:minmax(0,1fr) auto;gap:clamp(26px,4vw,64px);
align-items:center;width:min(1160px,94vw);margin:0 auto}
/* ─── ДЕСКТОП: СПИСОК ШАГОВ ────────────────────────────────── */
.ez__list{border-top:1px solid var(--e-line)}
.ez__it{position:relative;display:flex;align-items:center;gap:16px;width:100%;
padding:17px 6px;text-align:left;appearance:none;border:0;background:0;cursor:pointer;
border-bottom:1px solid var(--e-line)}
.ez__it::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
background:linear-gradient(90deg,#dbe7fb,transparent 82%);
box-shadow:0 0 12px var(--e-glow2);
transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-ease)}
.ez__it.on::after{transform:scaleX(1)}
.ez__n{flex:none;font-family:'Inter',var(--e-fb);font-size:11px;font-weight:600;
letter-spacing:.14em;color:var(--e-ink3);width:26px;transition:color .4s}
.ez__it.on .ez__n{color:#dbe7fb}
.ez__t{font-family:var(--e-fd);font-weight:500;font-size:clamp(19px,2.2vw,27px);
letter-spacing:-.015em;line-height:1.1;color:transparent;
-webkit-text-stroke:1px rgba(234,238,243,.28);transition:-webkit-text-stroke .4s}
.ez__it.on .ez__t{-webkit-text-stroke:1px transparent;
background:linear-gradient(120deg,#fff,#c9d3ea 60%,#B7C0CD);
-webkit-background-clip:text;background-clip:text;color:transparent}
.ez__tag{margin-left:auto;font-family:'Inter',var(--e-fb);font-size:10px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--e-ink3);white-space:nowrap;
opacity:0;transform:translateX(8px);transition:.45s var(--e-ease)}
.ez__it.on .ez__tag{opacity:1;transform:none}
/* мини-прогресс активной строки */
.ez__mini{position:absolute;left:0;bottom:-1px;height:2px;width:100%;
transform-origin:left;transform:scaleX(0);background:#eef4ff;
box-shadow:0 0 10px var(--e-glow);opacity:0}
.ez__it.on .ez__mini{opacity:1}
/* ─── ТЕЛЕФОН ──────────────────────────────────────────────── */
.ez__phone{position:relative;width:min(392px,92vw);border-radius:44px;padding:10px;
background:linear-gradient(160deg,#262b36,#10131b 60%,#1b202c);
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 60px 120px -46px rgba(0,0,0,1),
0 0 90px -30px rgba(150,180,240,.25)}
.ez__phone::before{content:"";position:absolute;left:50%;top:16px;translate:-50% 0;
width:96px;height:22px;border-radius:99px;background:#05060a;z-index:9;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ez__screen{position:relative;border-radius:34px;overflow:hidden;background:#07080c;
aspect-ratio:9/18.6;touch-action:pan-y;user-select:none;-webkit-user-select:none;
cursor:pointer}
/* прогресс-сегменты */
.ez__seg{position:absolute;top:12px;left:12px;right:12px;z-index:8;display:flex;gap:5px}
.ez__seg i{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.24);
overflow:hidden;position:relative}
.ez__seg i::after{content:"";position:absolute;inset:0;border-radius:99px;
background:#fff;transform:scaleX(var(--f,0));transform-origin:left;
box-shadow:0 0 8px rgba(255,255,255,.8)}
/* сцены */
.ezs{position:absolute;inset:0;opacity:0;visibility:hidden;
transition:opacity .55s var(--e-ease),visibility .55s;z-index:1}
.ezs.on{opacity:1;visibility:visible;z-index:2}
.ezs__bg{position:absolute;inset:0}
.ezs__bg img,.ezs__bg video{width:100%;height:100%;object-fit:cover;
transform:scale(1.08);transition:transform 7s var(--e-ease);filter:brightness(.82)}
.ezs.on .ezs__bg img,.ezs.on .ezs__bg video{transform:scale(1)}
.ezs__shade{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,7,11,.55) 0%,rgba(6,7,11,.14) 34%,
rgba(6,7,11,.2) 58%,rgba(6,7,11,.88) 100%)}
.ezs__in{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
justify-content:flex-end;gap:12px;padding:20px 18px 92px}
/* входы элементов сцены */
.ezs [data-a]{opacity:0;translate:0 16px;
transition:opacity .6s var(--e-ease),translate .6s var(--e-ease)}
.ezs.on [data-a]{opacity:1;translate:0 0}
.ezs.on [data-a].d1{transition-delay:.12s}
.ezs.on [data-a].d2{transition-delay:.24s}
.ezs.on [data-a].d3{transition-delay:.38s}
.ezs.on [data-a].d4{transition-delay:.52s}
.ezs__k{font-family:'Inter',var(--e-fb);font-size:12px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:#dbe7fb;
display:inline-flex;align-items:center;gap:9px}
.ezs__k::before{content:"";width:20px;height:1px;background:var(--e-glow);
box-shadow:0 0 8px var(--e-glow)}
.ezs__t{font-family:var(--e-fd);font-weight:400;font-size:clamp(24px,6.4vw,28px);
line-height:1.14;letter-spacing:-.01em;color:#fff;margin:0}
.ezs__t b{font-weight:500}
.ezs__d{margin:0;font-size:15px;line-height:1.55;color:var(--e-ink2)}
.ez__chips{display:flex;flex-wrap:wrap;gap:7px}
.ez__chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
color:#eef2fa;padding:10px 14px;border-radius:999px;
background:rgba(14,16,24,.55);border:1px solid rgba(255,255,255,.2);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ez__chip svg{width:15px;height:15px;flex:none;stroke:#dbe7fb;stroke-width:2.1;fill:none}
/* S1 · заявка: чат */
.ez__msgs{display:grid;gap:8px;margin-bottom:2px}
.ez__msg{max-width:88%;padding:13px 15px;border-radius:17px;font-size:15px;line-height:1.5}
.ez__msg--out{justify-self:end;border-radius:16px 16px 4px 16px;color:#0d1017;
background:linear-gradient(135deg,#EDEFF4,#c6cfdd);font-weight:600}
.ez__msg--in{justify-self:start;border-radius:16px 16px 16px 4px;color:#eef2fa;
background:rgba(20,23,32,.78);border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ez__msg--in b{color:#dbe7fb}
/* S2 · замер: карточка специалиста + шкала времени */
.ez__pro{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:18px;
background:rgba(14,16,24,.6);border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ez__ava{position:relative;flex:none;width:56px;height:56px;border-radius:50%;
overflow:hidden;border:2px solid rgba(255,255,255,.6)}
.ez__ava img{width:100%;height:100%;object-fit:cover;transform:none!important;filter:none}
.ez__ava::after{content:"";position:absolute;right:1px;bottom:1px;width:11px;height:11px;
border-radius:50%;background:#3fbf8f;border:2px solid #0d1017}
.ez__pro b{display:block;font-size:15.5px;font-weight:600;color:#fff}
.ez__pro small{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--e-ink3)}
.ez__star{margin-left:auto;flex:none;display:flex;align-items:center;gap:6px;
font-family:var(--e-fd);font-weight:500;font-size:16px;color:#ffe9c9}
.ez__star svg{width:16px;height:16px;fill:#f2b01e}
.ez__time{padding:11px 13px 13px;border-radius:16px;
background:rgba(14,16,24,.6);border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ez__time small{display:flex;justify-content:space-between;font-family:'Inter',var(--e-fb);
font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--e-ink3);margin-bottom:9px}
.ez__rail{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.14)}
.ez__rail i{position:absolute;inset:0;border-radius:99px;transform:scaleX(0);
transform-origin:left;background:linear-gradient(90deg,#8fa4c4,#eef4ff);
box-shadow:0 0 12px rgba(210,225,245,.7)}
.ezs.on .ez__rail i{animation:ezRail 2.4s var(--e-ease) .5s forwards}
@keyframes ezRail{to{transform:scaleX(1)}}
.ez__rail u{position:absolute;top:50%;left:0;translate:-50% -50%;width:19px;height:19px;
border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(230,240,255,1);opacity:0}
.ezs.on .ez__rail u{animation:ezKnob 2.4s var(--e-ease) .5s forwards}
@keyframes ezKnob{0%{left:0;opacity:1}100%{left:100%;opacity:1}}
/* S3 · договор: документ + штамп */
.ez__doc{position:relative;border-radius:16px;padding:15px 15px 13px;
background:linear-gradient(170deg,#f6f4ee,#e9e5d9);color:#2c2a24;overflow:hidden}
.ez__doc small{font-family:'Inter',var(--e-fb);font-size:10.5px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:#8a8471}
.ez__doc b{display:block;font-family:var(--e-fd);font-weight:500;font-size:17px;margin:6px 0 9px}
.ez__doc i{display:block;height:4px;border-radius:2px;background:rgba(70,66,50,.14);
margin-bottom:5px}
.ez__doc i:nth-of-type(2){width:84%}
.ez__doc i:nth-of-type(3){width:62%}
.ez__stamp{position:absolute;right:10px;bottom:9px;padding:9px 13px;border-radius:9px;
border:3px solid #b23a2e;color:#b23a2e;rotate:-9deg;
font-family:'Inter',var(--e-fb);font-size:11.5px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;opacity:0;scale:2.4}
.ezs.on .ez__stamp{animation:ezStamp .5s var(--e-ease) .9s forwards}
@keyframes ezStamp{60%{opacity:1;scale:.92;rotate:-9deg}
80%{scale:1.06}100%{opacity:1;scale:1;rotate:-9deg}}
/* S4 · изготовление: счётчики + конвейер */
.ez__nums{display:flex;gap:8px}
.ez__num{flex:1;padding:11px 6px;border-radius:14px;text-align:center;
background:rgba(14,16,24,.6);border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ez__num b{display:block;font-family:var(--e-fd);font-weight:500;font-size:22px;
color:#fff;line-height:1}
.ez__num small{display:block;margin-top:6px;font-size:11.5px;font-weight:600;
letter-spacing:.04em;color:var(--e-ink3);text-transform:uppercase}
.ez__belt{position:relative;overflow:hidden;border-radius:999px;padding:10px 0;
background:rgba(14,16,24,.6);border:1px solid rgba(255,255,255,.18);
-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ez__belt div{display:flex;gap:26px;width:max-content;white-space:nowrap;
animation:ezBelt 14s linear infinite;padding-left:8px}
@keyframes ezBelt{to{translate:-50% 0}}
.ez__belt span{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;
font-weight:600;color:#dbe7fb}
.ez__belt span::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--e-glow);box-shadow:0 0 8px var(--e-glow)}
/* S5 · монтаж: чек-лист */
.ez__check{display:grid;gap:7px}
.ez__ck{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px;
font-size:14.5px;font-weight:600;color:#eef2fa;
background:rgba(14,16,24,.6);border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
opacity:0;translate:0 12px}
.ezs.on .ez__ck{animation:ezCk .55s var(--e-ease) forwards}
.ezs.on .ez__ck:nth-child(1){animation-delay:.35s}
.ezs.on .ez__ck:nth-child(2){animation-delay:.55s}
.ezs.on .ez__ck:nth-child(3){animation-delay:.75s}
.ezs.on .ez__ck:nth-child(4){animation-delay:.95s}
@keyframes ezCk{to{opacity:1;translate:0 0}}
.ez__ck i{flex:none;width:27px;height:27px;border-radius:50%;display:grid;
place-items:center;background:linear-gradient(135deg,#EDEFF4,#B7C0CD)}
.ez__ck svg{width:14px;height:14px;stroke:#0d1017;stroke-width:3;fill:none}
/* S6 · результат: вспышка + CTA */
.ezs--fin .ezs__shade{background:linear-gradient(180deg,rgba(6,7,11,.4),
rgba(6,7,11,.06) 40%,rgba(6,7,11,.86) 100%)}
.ez__flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
background:radial-gradient(90% 60% at 50% 22%,rgba(235,243,255,.95),transparent 62%)}
.ezs.on .ez__flash{animation:ezFlash 1.4s var(--e-ease) .35s forwards}
@keyframes ezFlash{0%{opacity:0}18%{opacity:.9}30%{opacity:.15}
46%{opacity:.75}64%{opacity:.1}100%{opacity:0}}
.ez__wow{font-family:var(--e-fd);font-weight:500;letter-spacing:-.02em;
font-size:clamp(40px,11vw,54px);line-height:1;color:transparent;margin:0;
background:linear-gradient(115deg,#fff,#cfe0ff 55%,#8fa4c4);
-webkit-background-clip:text;background-clip:text;
filter:drop-shadow(0 10px 40px rgba(180,205,240,.55))}
.ez__cta{appearance:none;cursor:pointer;border:0;border-radius:17px;padding:17px 24px;
font-family:var(--e-fb);font-weight:600;font-size:16px;color:#0B0D10;
background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);
display:inline-flex;align-items:center;justify-content:center;gap:9px;
box-shadow:0 18px 46px -14px rgba(200,215,240,.55);
transition:transform .3s var(--e-ease),box-shadow .3s var(--e-ease)}
.ez__cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.ez__cta:hover{transform:translateY(-2px);
box-shadow:0 24px 56px -14px rgba(200,215,240,.7)}
/* ─── ТАБ-БАР (низ экрана, как в приложении) ───────────────── */
.ez__bar{position:absolute;left:10px;right:10px;bottom:10px;z-index:8;display:flex;
gap:2px;padding:7px 5px;border-radius:22px;
background:rgba(12,14,20,.66);border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
.ez__tab{flex:1;min-width:0;appearance:none;border:0;background:0;cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px;
border-radius:15px;color:var(--e-ink3);transition:color .35s,background .35s}
.ez__tab svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.9;fill:none;
transition:transform .35s var(--e-ease)}
.ez__tab span{font-family:'Inter',var(--e-fb);font-size:11px;font-weight:600;
letter-spacing:.02em;white-space:nowrap;overflow:hidden;max-width:100%;
text-overflow:ellipsis}
.ez__tab.on{color:#fff;background:rgba(210,225,245,.12)}
.ez__tab.on svg{transform:translateY(-1px) scale(1.08);
filter:drop-shadow(0 0 8px rgba(210,225,245,.8))}
/* подсказка про тапы */
.ez__hint{position:absolute;left:50%;bottom:86px;translate:-50% 0;z-index:7;
display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
font-family:'Inter',var(--e-fb);font-size:11.5px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:#dbe7fb;padding:10px 15px;border-radius:999px;
background:rgba(12,14,20,.6);border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(10px);pointer-events:none;
transition:opacity .5s,translate .5s}
.ez__hint svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none}
.ez__hint.gone{opacity:0;translate:-50% 8px}
/* ─── ВХОД БЛОКА ───────────────────────────────────────────── */
.ez.pre .ez__phone{opacity:0;translate:0 40px;scale:.94;filter:blur(10px);
transition:opacity .8s var(--e-ease),translate .8s var(--e-ease),
scale .9s var(--e-ease),filter .8s var(--e-ease)}
.ez.pre.lit .ez__phone{opacity:1;translate:0 0;scale:1;filter:blur(0)}
.ez.pre .ez__it{opacity:0;translate:-14px 0;
transition:opacity .5s var(--e-ease),translate .5s var(--e-ease)}
.ez.pre .ez__it:nth-child(2){transition-delay:.07s}
.ez.pre .ez__it:nth-child(3){transition-delay:.14s}
.ez.pre .ez__it:nth-child(4){transition-delay:.21s}
.ez.pre .ez__it:nth-child(5){transition-delay:.28s}
.ez.pre .ez__it:nth-child(6){transition-delay:.35s}
.ez.pre.lit .ez__it{opacity:1;translate:0 0}
/* ─── ФАКТ-СТРОКА И НАВИГАЦИЯ: только мобайл ───────────────── */
/* На телефоне вместо стеклянных виджетов-реквизитов у каждой сцены —
одна тихая строка фактов. Никаких коробок внутри коробок. */
.ez__fact{display:none}
.ez__mnav{display:none}
/* ─── АДАПТИВ ──────────────────────────────────────────────── */
@media(max-width:880px){
.ez__row{grid-template-columns:1fr;justify-items:stretch;gap:4px;width:min(560px,94vw)}
.ez__list{display:none}
/* на телефоне рамка «телефона» не нужна — экран сторис становится
полноэкранной карточкой, содержимое крупнее */
.ez__phone{width:100%;padding:0;background:none;border:0;box-shadow:none;
border-radius:0}
.ez__phone::before{display:none}
.ez__screen{aspect-ratio:auto;height:min(74svh,660px);border-radius:28px;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 46px 100px -40px rgba(0,0,0,.95),0 0 80px -34px rgba(150,180,240,.3)}
/* прогресс тоньше и тише — он подсказка, а не элемент интерфейса */
.ez__seg{top:15px;left:15px;right:15px;gap:4px}
.ez__seg i{height:3px;background:rgba(255,255,255,.2)}
/* жест уже объяснён в подзаголовке блока — подсказка внутри экрана не нужна */
.ez__hint{display:none}
/* ГЛАВНОЕ: убираем все стеклянные виджеты-реквизиты. На телефоне они
превращались в россыпь мелких блоков и душили кадр. Остаётся фото,
шаг, заголовок, фраза и одна строка фактов. */
.ez__msgs,.ez__pro,.ez__time,.ez__doc,.ez__chips,.ez__nums,.ez__belt,
.ez__check{display:none}
/* таб-бар из шести микро-иконок убран: шаг подписан в самом кадре,
а листание вынесено под карточку крупными кнопками */
.ez__bar{display:none}
.ezs__in{padding:26px 20px 30px;gap:14px}
.ezs__k{font-size:11.5px;letter-spacing:.18em}
.ezs__t{font-size:clamp(26px,7.4vw,32px);line-height:1.12}
.ezs__d{font-size:15.5px;line-height:1.6;max-width:30ch}
.ez__wow{font-size:clamp(46px,13vw,56px)}
.ez__cta{margin-top:4px;padding:18px 24px;font-size:16.5px}
/* тихая строка фактов вместо виджетов */
.ez__fact{display:block;margin:2px 0 0;padding-top:13px;
border-top:1px solid rgba(255,255,255,.13);
font-family:'Inter',var(--e-fb);font-size:13.5px;font-weight:600;
letter-spacing:.01em;line-height:1.5;color:var(--e-ink3)}
/* навигация под карточкой: воздух вместо плотного бара внутри кадра */
.ez__mnav{display:flex;align-items:center;justify-content:center;gap:18px;
margin-top:20px}
.ez__mb{appearance:none;border:1px solid var(--e-line);background:0;cursor:pointer;
width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
color:var(--e-ink2);transition:transform .35s var(--e-ease),border-color .3s,color .3s}
.ez__mb:active{transform:scale(.92)}
.ez__mb svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none}
.ez__mcount{min-width:74px;text-align:center;font-family:'Inter',var(--e-fb);
font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--e-ink3)}
.ez__mcount b{color:var(--e-ink);font-weight:600}
}
@media(max-width:400px){
.ez__screen{border-radius:24px;height:min(76svh,640px)}
.ezs__in{padding:24px 18px 28px;gap:12px}
.ez__mb{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
.ez__belt div,.ez__flash{animation:none!important}
.ezs.on .ez__rail i{animation:none;transform:scaleX(1)}
.ezs.on .ez__rail u{animation:none;left:100%;opacity:1}
.ezs.on .ez__stamp{animation:none;opacity:1;scale:1}
.ezs.on .ez__ck{animation:none;opacity:1;translate:0 0}
.ez.pre .ez__phone,.ez.pre .ez__it{opacity:1;translate:0 0;scale:1;filter:none}
}
/* ══════════════════════════════════════════════════════════════════
09 · АКЦИИ · рулетка выгоды · .pk
══════════════════════════════════════════════════════════════════ */
/* ─── ТОКЕНЫ: раскалённый sale-красный ─────────────────────── */
@property --pkb{syntax:'';initial-value:0deg;inherits:false}
.pk{
--k-ink:#F4F6FA; --k-ink2:rgba(233,236,245,.72); --k-ink3:rgba(233,236,245,.46);
--k-line:rgba(255,255,255,.12);
--k-red:#f02d12; --k-red2:#ff5a38; --k-red3:#c01500;
--k-grad:linear-gradient(115deg,#ff5a38,#f02d12 55%,#c01500);
--k-ease:cubic-bezier(.22,1,.36,1);
--k-fd:'Unbounded',system-ui,sans-serif;
--k-fb:'Onest','Inter',system-ui,sans-serif;
--k-w:min(1160px,94vw);
position:relative;overflow:clip;color:var(--k-ink);font-family:var(--k-fb);
padding:clamp(56px,7vw,104px) 0 clamp(60px,7vw,108px);
background:
radial-gradient(50% 38% at 12% 8%,rgba(240,45,18,.15),transparent 70%),
radial-gradient(44% 34% at 90% 14%,rgba(192,21,0,.13),transparent 70%),
radial-gradient(58% 44% at 50% 108%,rgba(255,90,56,.09),transparent 72%),
#0b0c10;
}
.pk *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.pk .sec__head{position:relative;z-index:2}
.pk__stagewrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
gap:clamp(16px,2.2vw,26px);padding:0 16px}
/* ─── ПОЛОТНО: фотосцена ───────────────────────────────────── */
.pk__stage{position:relative;width:var(--k-w);border-radius:30px;overflow:hidden;touch-action:pan-y;
min-height:clamp(430px,42vw,560px);display:flex;align-items:flex-end;
background:#12131a;border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 50px 110px -46px rgba(0,0,0,.95)}
.pk__stage::after{content:"";position:absolute;inset:-1px;border-radius:31px;padding:1.4px;
pointer-events:none;z-index:6;opacity:.8;
background:conic-gradient(from var(--pkb),
transparent 0 12%,var(--k-red2) 22%,rgba(255,255,255,.95) 28%,var(--k-red2) 34%,
transparent 46% 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:pkSpin 8s linear infinite}
@keyframes pkSpin{to{--pkb:360deg}}
.pk__ph{position:absolute;inset:0;
background:
radial-gradient(80% 60% at 70% 20%,#232430,transparent 70%),
linear-gradient(160deg,#1a1b24,#0e0f15)}
.pk__imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;scale:1.06;filter:blur(3px);
transition:opacity .7s var(--k-ease),scale 1.3s var(--k-ease),filter .7s var(--k-ease)}
.pk__imgs img.on{opacity:1;scale:1;filter:blur(0)}
.pk__shade{position:absolute;inset:0;
background:linear-gradient(100deg,rgba(7,7,11,.6) 0%,rgba(7,7,11,.28) 46%,
rgba(7,7,11,.08) 72%,rgba(7,7,11,.32) 100%)}
.pk__scan{position:absolute;top:-6%;bottom:-6%;left:0;width:20%;z-index:4;opacity:0;
pointer-events:none;mix-blend-mode:screen;filter:blur(.5px);
background:linear-gradient(90deg,transparent,rgba(255,70,35,.30) 44%,
rgba(255,255,255,.55) 50%,rgba(255,70,35,.30) 56%,transparent)}
.pk__glass{position:relative;z-index:3;margin:clamp(16px,2.4vw,30px);
width:min(620px,calc(100% - clamp(32px,4.8vw,60px)));
border-radius:24px;padding:clamp(20px,2.4vw,30px);
display:grid;gap:12px;justify-items:start;
background:linear-gradient(160deg,rgba(18,18,25,.62),rgba(18,18,25,.34));
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px -30px rgba(0,0,0,.8);
backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.pk__chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:#ffc0ae;
padding:9px 14px;border-radius:999px;border:1px solid rgba(240,45,18,.6);
background:rgba(240,45,18,.16)}
.pk__chip i{width:7px;height:7px;border-radius:50%;background:var(--k-red2);
box-shadow:0 0 10px var(--k-red2);animation:pkBlink 1.8s ease infinite}
@keyframes pkBlink{50%{opacity:.35}}
.pk__val{font-family:var(--k-fd);font-weight:500;line-height:1;letter-spacing:-.02em;
font-size:clamp(48px,7.4vw,84px);
background:linear-gradient(115deg,#ffab84,#ff3d1c 42%,#e11500 80%,#ff6a45);
background-size:220% 220%;
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 16px 44px rgba(240,45,18,.5));
animation:pkIri 5.5s var(--k-ease) infinite alternate}
@keyframes pkIri{to{background-position:100% 100%}}
.pk__val.gift{font-size:clamp(34px,4.8vw,54px)}
.pk__sub{font-size:clamp(15px,1.8vw,17.5px);font-weight:600;color:rgba(244,246,250,.9)}
/* визуализация подарков */
.pk__viz{display:flex;align-items:center;gap:12px;min-height:24px}
.pk__viz[hidden]{display:none}
.pk__spots{display:flex;gap:9px}
.pk__spots i{width:15px;height:15px;border-radius:50%;
background:radial-gradient(circle at 38% 32%,#fff,#ffe0d4 26%,#ff5a38 62%,#c01500);
box-shadow:0 0 16px rgba(255,90,56,.95);
opacity:.16;scale:.65;
transition:opacity .35s var(--k-ease),scale .5s var(--k-ease)}
.pk__spots i.on{opacity:1;scale:1}
.pk__lline{position:relative;width:min(230px,54vw);height:10px;border-radius:99px;
background:#15161d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pk__lline i{position:absolute;inset:2px;border-radius:99px;background:var(--k-grad);
transform-origin:left center;
box-shadow:0 0 18px rgba(255,70,35,.95);
animation:pkGlow 2.2s ease infinite alternate}
@keyframes pkGlow{to{box-shadow:0 0 32px rgba(255,110,70,1)}}
.pk__ex{display:flex;flex-wrap:wrap;align-items:center;gap:9px 11px;margin-top:2px}
.pk__ex small{width:100%;font-size:12px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--k-ink3)}
.pk__was{font-size:17px;font-weight:600;color:rgba(244,246,250,.5);
text-decoration:line-through;text-decoration-color:rgba(255,90,56,.85);
text-decoration-thickness:2px}
.pk__ex svg{width:15px;height:15px;stroke:var(--k-red2);stroke-width:2.4;fill:none}
.pk__now{font-family:var(--k-fd);font-weight:500;font-size:clamp(20px,2vw,25px);color:#fff}
.pk__save{font-size:12.5px;font-weight:600;color:#fff;padding:10px 13px;border-radius:999px;
background:var(--k-grad);box-shadow:0 14px 34px -10px rgba(240,45,18,.85);
animation:pkSavePulse 2.6s var(--k-ease) infinite}
@keyframes pkSavePulse{50%{box-shadow:0 14px 44px -8px rgba(255,70,35,.95)}}
.pk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:4px}
.pk__cond{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
color:var(--k-ink2);padding:12px 15px;border-radius:999px;
border:1px solid var(--k-line);background:rgba(255,255,255,.06);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pk__cond svg{width:14px;height:14px;flex:none;stroke:var(--k-red2);stroke-width:2.2;fill:none}
.pk__cta{appearance:none;cursor:pointer;padding:16px 26px;border-radius:16px;border:0;
background:var(--k-grad);color:#fff;font-family:var(--k-fb);font-weight:600;font-size:15.5px;
display:inline-flex;align-items:center;gap:9px;
box-shadow:0 20px 50px -14px rgba(240,45,18,.85);
transition:transform .3s var(--k-ease),box-shadow .3s var(--k-ease)}
.pk__cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.pk__cta:hover{transform:translateY(-2px);box-shadow:0 26px 62px -14px rgba(255,70,35,.95)}
/* ─── РУЛЕТКА-СЕЛЕКТОР ─────────────────────────────────────── */
.pk__caption{width:var(--k-w);display:flex;justify-content:space-between;align-items:baseline;
margin-bottom:-10px;padding:0 6px}
.pk__caption b{font-family:var(--k-fd);font-weight:500;font-size:15px;color:var(--k-ink2)}
.pk__caption .pk__hintt{font-size:12.5px;font-weight:600;color:var(--k-ink3)}
.pk__count{font-family:var(--k-fd);font-weight:500;font-size:14px;color:var(--k-ink3);
margin-left:14px}
.pk__count b{color:var(--k-red2);font-weight:500}
.pk__tapewrap{position:relative;width:var(--k-w)}
.pk__needle{position:absolute;left:50%;top:-10px;z-index:6;height:104px;width:0;
pointer-events:none;transition:left .6s var(--k-ease)}
.pk__needle.no-t{transition:none}
.pk__needle::before{content:"";position:absolute;left:-1.5px;top:13px;bottom:0;width:3px;
border-radius:2px;background:var(--k-grad);box-shadow:0 0 18px rgba(240,45,18,.95)}
.pk__needle::after{content:"";position:absolute;left:-8px;top:0;
border-left:8px solid transparent;border-right:8px solid transparent;
border-top:12px solid var(--k-red)}
.pk__tapewrap::before,.pk__tapewrap::after{content:"";position:absolute;top:0;bottom:0;
width:clamp(34px,5vw,72px);z-index:5;pointer-events:none}
.pk__tapewrap::before{left:0;background:linear-gradient(90deg,#0b0c10,rgba(11,12,16,0))}
.pk__tapewrap::after{right:0;background:linear-gradient(-90deg,#0b0c10,rgba(11,12,16,0))}
.pk__ghint{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:center;
gap:8px;font-size:12px;font-weight:600;letter-spacing:.05em;color:#fff;
padding:9px 13px;border-radius:999px;background:rgba(12,13,18,.5);
border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);
transition:opacity .5s var(--k-ease),translate .5s var(--k-ease)}
.pk__ghint svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none}
.pk__ghint.gone{opacity:0;translate:0 -8px;pointer-events:none}
.pk__tape{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
scrollbar-width:none;cursor:grab;padding:8px calc(50% - 94px) 6px}
.pk__tape::-webkit-scrollbar{display:none}
.pk__tape.is-drag,.pk__tape.is-anim{scroll-snap-type:none}
.pk__tape.is-drag{cursor:grabbing}
.pk__row{position:relative;display:inline-flex;align-items:flex-start}
.pk__ribbon{position:absolute;top:0;left:-14px;right:-70px;height:64px;border-radius:6px;
background:
linear-gradient(#f02d12,#f02d12) 0 0/100% 4px no-repeat,
linear-gradient(180deg,#f8f3e8,#e9e2d1);
box-shadow:inset 0 -3px 0 rgba(60,40,20,.18),inset 0 4px 0 rgba(255,255,255,.55),
0 18px 38px -14px rgba(0,0,0,.8)}
.pk__ribbon::before{content:"";position:absolute;left:0;right:0;top:9px;height:21px;
background:repeating-linear-gradient(90deg,#2b2c33 0 2px,transparent 2px 59px)}
.pk__ribbon::after{content:"";position:absolute;left:0;right:0;top:9px;height:12px;
background:repeating-linear-gradient(90deg,rgba(43,44,51,.75) 0 1.5px,transparent 1.5px 11.8px)}
.pk__hook{position:relative;flex:0 0 24px;height:64px}
.pk__hook::before{content:"";position:absolute;left:2px;top:-8px;width:10px;height:80px;
border-radius:3px;background:linear-gradient(90deg,#e8ecf3,#9aa1ad 60%,#c8cdd6);
box-shadow:0 6px 14px rgba(0,0,0,.6)}
.pk__hook::after{content:"";position:absolute;left:2px;top:-8px;width:22px;height:10px;
border-radius:3px;background:linear-gradient(180deg,#e8ecf3,#9aa1ad)}
.pkstop{position:relative;scroll-snap-align:center;flex:0 0 188px;
appearance:none;border:0;background:0;cursor:pointer;
display:grid;justify-items:center;padding:0}
.pkstop .num{position:relative;z-index:2;margin-top:31px;height:33px;
font-family:var(--k-fd);font-weight:500;font-size:16px;color:#c8200a;line-height:1}
.pkstop .lbl{position:relative;z-index:2;margin-top:16px;
display:inline-flex;align-items:center;gap:8px;font-family:var(--k-fb);font-weight:600;
font-size:13.5px;color:var(--k-ink2);padding:12px 15px;border-radius:999px;
border:1px solid var(--k-line);background:rgba(18,19,26,.88);
backdrop-filter:blur(10px);transition:.35s var(--k-ease);white-space:nowrap}
.pkstop .lbl svg{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:1.9;fill:none}
.pkstop:hover .lbl{border-color:rgba(255,255,255,.28)}
.pkstop.on .lbl{color:#fff;background:var(--k-grad);border-color:transparent;
box-shadow:0 16px 38px -10px rgba(240,45,18,.9)}
/* ─── ГЕРО-АКЦЕНТ · бесплатный дизайн-проект ────────────────── */
.pkstop--hero .lbl{border-color:rgba(255,90,56,.55);
box-shadow:0 0 0 1px rgba(255,90,56,.3),0 12px 30px -14px rgba(240,45,18,.85)}
.pkstop--hero.on .lbl{box-shadow:0 16px 38px -10px rgba(240,45,18,.95)}
.pk__flag{display:none;align-items:center;gap:8px;
font-family:var(--k-fb);font-size:12.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:#fff;padding:9px 15px;border-radius:999px;
background:var(--k-grad);box-shadow:0 14px 34px -12px rgba(240,45,18,.9);
animation:pkSavePulse 2.6s var(--k-ease) infinite}
.pk__flag svg{width:15px;height:15px;fill:#fff;flex:none}
.pk__glass.is-hero .pk__flag{display:inline-flex}
.pk__glass.is-hero{border-color:rgba(255,90,56,.42);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 80px -28px rgba(240,45,18,.55),
0 0 0 1px rgba(255,90,56,.16)}
.pk__glass.is-hero .pk__val{font-size:clamp(31px,4.6vw,50px);letter-spacing:-.01em}
/* у дизайн-проекта нет цены: прячем чип-дубль и строку «было→стало» */
.pk__glass.is-hero .pk__chip,.pk__glass.is-hero .pk__ex{display:none}
/* «Подарок» со стеклянным переливом (иризирующая кромка + бегущий блик) */
@property --pkg{syntax:'';initial-value:0deg;inherits:false}
.pk__gift{display:none;position:relative;align-self:start;overflow:hidden;margin-top:2px;
font-family:var(--k-fd);font-weight:500;font-size:clamp(19px,2.3vw,26px);letter-spacing:-.01em;
color:#fff;padding:12px 30px;border-radius:16px;
background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 22px 54px -22px rgba(240,45,18,.5)}
.pk__glass.is-hero .pk__gift{display:inline-flex;align-items:center}
.pk__gift::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1.6px;
background:conic-gradient(from var(--pkg),#ff5a38,#ffd7a8,#a98cff,#7fa8ff,#ff5a38);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;animation:pkgSpin 4.5s linear infinite}
@keyframes pkgSpin{to{--pkg:360deg}}
.pk__gift::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 48%,transparent 60%);
transform:translateX(-130%);animation:pkgShine 3.6s ease-in-out infinite}
@keyframes pkgShine{0%,58%{transform:translateX(-130%)}100%{transform:translateX(240%)}}
@media(prefers-reduced-motion:reduce){.pk__gift::before{animation:none}.pk__gift::after{display:none}}
.pk__note{position:relative;z-index:2;font-size:13px;font-weight:600;color:var(--k-ink3);
text-align:center;max-width:56ch;margin:0 auto;padding:0 16px}
/* ── ДЕСКТОП: линейка статична во всю ширину, ездит игла ──── */
@media(min-width:861px){
.pk__tape{overflow:visible;padding:8px 0 6px;cursor:default;scroll-snap-type:none}
.pk__row{display:flex;width:100%}
.pk__ribbon{left:-4px;right:-4px}
.pkstop{flex:1 1 0;min-width:0}
.pkstop .num{font-size:17px}
.pk__tapewrap{cursor:grab}
.pk__tapewrap.is-drag{cursor:grabbing}
.pk__tapewrap::before,.pk__tapewrap::after{display:none}
}
/* ─── ВХОД ─────────────────────────────────────────────────── */
.pk.pre .pk__stage{opacity:0;translate:0 28px;scale:1 .92;filter:blur(10px);
transition:opacity .8s var(--k-ease),translate .8s var(--k-ease),
scale .9s var(--k-ease),filter .8s var(--k-ease)}
.pk.pre.lit .pk__stage{opacity:1;translate:0 0;scale:1 1;filter:blur(0)}
.pk.pre .pk__caption,.pk.pre .pk__note{opacity:0;translate:0 14px;
transition:opacity .6s var(--k-ease) .35s,translate .6s var(--k-ease) .35s}
.pk.pre.lit .pk__caption,.pk.pre.lit .pk__note{opacity:1;translate:0 0}
.pk.pre .pk__tapewrap{opacity:0;translate:70px 0;filter:blur(8px);
transition:opacity .7s var(--k-ease) .25s,translate .7s var(--k-ease) .25s,
filter .7s var(--k-ease) .25s}
.pk.pre.lit .pk__tapewrap{opacity:1;translate:0 0;filter:blur(0)}
@media(max-width:640px){
.pk{padding:52px 0 58px}
.pk__stage{min-height:500px}
.pk__glass{margin:12px;width:calc(100% - 24px);padding:17px;gap:10px}
.pk__cta{width:100%;justify-content:center}
.pk__was{font-size:15.5px}
.pk__now{font-size:19px}
.pk__save{padding:9px 12px;font-size:12px}
.pk__caption b{font-size:14px}
.pk__caption .pk__hintt .pk__hlabel{display:none}
}
@media(prefers-reduced-motion:reduce){
.pk__stage::after,.pk__val,.pk__save,.pk__chip i,.pk__lline i{animation:none!important}
.pk.pre .pk__stage,.pk.pre .pk__caption,.pk.pre .pk__note,.pk.pre .pk__tapewrap{
opacity:1;translate:0 0;scale:1 1;filter:none}
}
/* ══════════════════════════════════════════════════════════════════
14 · НАМ ДОВЕРЯЮТ · барабан объектов · .vp
══════════════════════════════════════════════════════════════════ */
/* ─── ТОКЕНЫ ───────────────────────────────────────────────── */
.vp{
--w-ink:#15151b; --w-ink2:#585866; --w-ink3:#8e8e9d;
--w-line:rgba(21,21,32,.10);
--w-grad:linear-gradient(115deg,#6a56d6,#a98cff 55%,#7fa8ff);
--w-acc:#7e6ce0;
--w-sh:0 30px 70px -32px rgba(40,34,90,.32);
--w-sh2:0 16px 40px -18px rgba(40,34,90,.26);
--w-ease:cubic-bezier(.22,1,.36,1);
--w-fd:'Unbounded',system-ui,sans-serif;
--w-fb:'Onest','Inter',system-ui,sans-serif;
position:relative;overflow:clip;color:var(--w-ink);font-family:var(--w-fb);
padding:clamp(56px,7vw,100px) 0;
background:
radial-gradient(46% 32% at 10% 8%,rgba(140,120,255,.15),transparent 70%),
radial-gradient(42% 30% at 92% 12%,rgba(120,170,255,.13),transparent 70%),
radial-gradient(50% 36% at 50% 106%,rgba(190,150,255,.10),transparent 72%),
#f5f6f8;
}
.vp *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.vp [hidden]{display:none!important}
.vp .sec__head{position:relative;z-index:2}
.vp__row{position:relative;z-index:2;display:flex;justify-content:center;align-items:stretch;
gap:clamp(16px,2.2vw,28px);padding:0 16px;width:min(1220px,100%);margin:0 auto}
/* гигантский фоновый номер объекта */
.vp__big{position:absolute;z-index:0;left:-1%;top:-6%;pointer-events:none;user-select:none;
font-family:var(--w-fd);font-weight:500;line-height:1;
font-size:clamp(200px,24vw,330px);color:rgba(106,86,214,.07)}
/* ─── КОЛОНКА БАРАБАНА ─────────────────────────────────────── */
.vp__pickcol{position:relative;z-index:2;width:300px;flex:none;border-radius:28px;
padding:20px;display:flex;flex-direction:column;gap:12px;
background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
border:1px solid rgba(255,255,255,.95);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--w-sh);
backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
.vp__top{display:flex;align-items:center;justify-content:space-between}
.vp__top b{font-family:var(--w-fd);font-weight:500;font-size:14px;color:var(--w-ink2)}
.vp__count{font-family:var(--w-fd);font-weight:500;font-size:14px;color:var(--w-ink3)}
.vp__count b{color:var(--w-acc);font-weight:500}
.vp__drumwrap{position:relative;flex:1;display:flex;gap:10px;align-items:center;min-height:0}
.vp__drum{position:relative;flex:1;height:clamp(280px,32vh,330px);
perspective:900px;touch-action:none;cursor:grab;user-select:none;
-webkit-mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.vp__drum.is-drag{cursor:grabbing}
.vp__list{position:absolute;inset:0;transform-style:preserve-3d}
.vp__o{position:absolute;left:0;right:0;top:50%;height:56px;margin-top:-28px;
appearance:none;border:0;background:0;cursor:pointer;padding:0 8px;
display:flex;align-items:center;gap:11px;will-change:transform;
backface-visibility:hidden;opacity:0}
.vp__o i{font-style:normal;font-family:var(--w-fd);font-weight:500;font-size:12px;
color:var(--w-ink3);letter-spacing:.06em;flex:none;width:22px}
.vp__o b{font-family:var(--w-fd);font-weight:500;font-size:21px;letter-spacing:-.01em;
color:var(--w-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .3s;
/* без min-width:0 длинное название распирает флекс-строку и вылезает
за край барабана вместо того, чтобы ужаться */
flex:1 1 auto;min-width:0}
.vp__o.c b{background:var(--w-grad);-webkit-background-clip:text;background-clip:text;
color:transparent}
.vp__o.c i{color:var(--w-acc)}
/* стеклянная линза активной строки */
.vp__lens{position:absolute;left:2px;right:2px;top:calc(50% - 30px);height:60px;
border-radius:14px;pointer-events:none;
border:1px solid rgba(126,108,224,.35);background:rgba(126,108,224,.06)}
.vp__updown{display:none;flex-direction:column;justify-content:center;gap:10px}
.vp__ud{width:42px;height:42px;border-radius:50%;appearance:none;cursor:pointer;
border:1px solid var(--w-line);background:rgba(255,255,255,.8);color:var(--w-ink);
display:grid;place-items:center;box-shadow:var(--w-sh2);transition:.3s var(--w-ease)}
.vp__ud svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none;
transition:rotate .3s}
.vp__ud:hover{transform:translateY(-2px);color:var(--w-acc)}
.vp__hintd{font-size:12.5px;font-weight:600;color:var(--w-ink3);text-align:center}
/* ─── ВИДЕО ────────────────────────────────────────────────── */
.vp__stagecol{position:relative;z-index:2;flex:none;display:flex;align-items:center}
.vp__video{position:relative;width:clamp(320px,29vw,400px);aspect-ratio:9/16;
border-radius:28px;overflow:hidden;touch-action:pan-y;cursor:pointer;
background:
radial-gradient(80% 55% at 35% 15%,#232430,transparent 70%),
linear-gradient(165deg,#1a1b24,#0e0f15);
border:1px solid rgba(255,255,255,.9);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 50px 110px -42px rgba(40,34,90,.6)}
.vp__it{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--w-ease)}
.vp__it.on{opacity:1}
.vp__it img,.vp__it video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp__it video{opacity:0;transition:opacity .4s}
.vp__it.playing video{opacity:1}
.vp__shade{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(8,8,12,.34),transparent 26%,transparent 70%,rgba(8,8,12,.62))}
.vp__prog{position:absolute;top:12px;left:14px;right:14px;z-index:4;height:3px;
border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.vp__prog i{display:block;height:100%;width:0;border-radius:99px;background:var(--w-grad)}
.vp__tag{position:absolute;top:24px;left:14px;z-index:4;display:inline-flex;align-items:center;
gap:7px;font-family:'Inter',var(--w-fb);font-size:11px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:#fff;
padding:7px 11px;border-radius:999px;background:rgba(14,15,22,.5);
border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px)}
.vp__ctr{position:absolute;right:12px;bottom:14px;z-index:4;display:flex;flex-direction:column;gap:8px}
.vp__btn{width:42px;height:42px;border-radius:50%;appearance:none;cursor:pointer;color:#fff;
border:1px solid rgba(255,255,255,.3);background:rgba(14,15,22,.5);
backdrop-filter:blur(10px);display:grid;place-items:center;transition:.3s var(--w-ease)}
.vp__btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none}
.vp__btn.on{background:#fff;color:#15151b;border-color:#fff}
.vp__vt{position:absolute;left:16px;bottom:16px;right:66px;z-index:4;color:#fff}
.vp__vt b{display:block;font-family:var(--w-fd);font-weight:500;font-size:16px}
.vp__vt span{display:block;margin-top:4px;font-size:13px;font-weight:600;
color:rgba(255,255,255,.8)}
.vp__slats{position:absolute;inset:0;z-index:5;display:flex;pointer-events:none}
.vp__slats i{flex:1;background:var(--w-grad);transform:scaleY(0);transform-origin:top}
.vp__slats i:nth-child(even){transform-origin:bottom}
/* оверлей «подробнее» поверх видео (мобайл) */
.vp__ov{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
padding:16px;overflow:auto;opacity:0;visibility:hidden;translate:0 14px;
background:linear-gradient(180deg,rgba(10,11,16,.62),rgba(10,11,16,.82));
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
transition:opacity .4s var(--w-ease),translate .4s var(--w-ease),visibility .4s}
.vp__video.ov-open .vp__ov{opacity:1;visibility:visible;translate:0 0}
.vp__ovclose{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;
border-radius:50%;appearance:none;cursor:pointer;color:#fff;
border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);
display:grid;place-items:center}
.vp__ovclose svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.vp__ov .vp__detin{margin-top:34px}
.vp__ov .vp__t,.vp__ov .vp__st b{color:#fff}
.vp__ov .vp__addr,.vp__ov .vp__desc{color:rgba(255,255,255,.86)}
.vp__ov .vp__st{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.vp__ov .vp__st small{color:rgba(255,255,255,.55)}
.vp__ov .vp__chips i{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);
color:rgba(255,255,255,.86)}
.vp__lens.nt{transition:none!important}
/* ─── ИНФО-КАРТОЧКА ────────────────────────────────────────── */
.vp__infocol{position:relative;z-index:2;width:350px;flex:none;border-radius:28px;
padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;
background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
border:1px solid rgba(255,255,255,.95);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--w-sh);
backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
.vp__morebar{display:none}
.vp__detail{display:grid;grid-template-rows:1fr;min-height:0}
.vp__detin{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:12px}
.vp__t{font-family:var(--w-fd);font-weight:500;font-size:clamp(19px,1.9vw,23px);
letter-spacing:-.01em}
.vp__addr{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
color:var(--w-ink2)}
.vp__addr svg{width:15px;height:15px;flex:none;stroke:var(--w-acc);stroke-width:2;fill:none}
.vp__desc{font-size:14.5px;line-height:1.6;color:var(--w-ink2)}
.vp__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vp__st{border:1px solid var(--w-line);border-radius:16px;padding:12px 14px;
background:rgba(255,255,255,.6)}
.vp__st small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--w-ink3)}
.vp__st b{display:block;margin-top:4px;font-family:var(--w-fd);font-weight:500;
font-size:18px;color:var(--w-ink)}
.vp__chips{display:flex;flex-wrap:wrap;gap:7px}
.vp__chips i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--w-ink2);
padding:8px 12px;border-radius:999px;border:1px solid var(--w-line);
background:rgba(255,255,255,.65)}
.vp__cta{appearance:none;cursor:pointer;margin-top:auto;padding:15px 22px;border-radius:16px;
border:0;background:var(--w-grad);color:#fff;
font-family:var(--w-fb);font-weight:600;font-size:15px;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
box-shadow:0 18px 44px -14px rgba(106,86,214,.7);
transition:transform .3s var(--w-ease),box-shadow .3s var(--w-ease)}
.vp__cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.vp__cta:hover{transform:translateY(-2px);box-shadow:0 24px 54px -14px rgba(106,86,214,.85)}
/* ─── ВХОД ─────────────────────────────────────────────────── */
.vp.pre .vp__pickcol{opacity:0;translate:-28px 0;filter:blur(8px);
transition:opacity .7s var(--w-ease),translate .7s var(--w-ease),filter .7s var(--w-ease)}
.vp.pre .vp__stagecol{opacity:0;scale:.94;filter:blur(8px);
transition:opacity .7s var(--w-ease) .1s,scale .8s var(--w-ease) .1s,filter .7s var(--w-ease) .1s}
.vp.pre .vp__infocol{opacity:0;translate:28px 0;filter:blur(8px);
transition:opacity .7s var(--w-ease) .2s,translate .7s var(--w-ease) .2s,filter .7s var(--w-ease) .2s}
.vp.pre .vp__big{opacity:0;transition:opacity 1s var(--w-ease) .3s}
.vp.pre.lit .vp__pickcol,.vp.pre.lit .vp__infocol{opacity:1;translate:0 0;filter:blur(0)}
.vp.pre.lit .vp__stagecol{opacity:1;scale:1;filter:blur(0)}
.vp.pre.lit .vp__big{opacity:1}
/* ─── МОБИЛЬНЫЙ: видео сверху, барабан горизонтальный ──────── */
/* ── ДЕСКТОП: все объекты сразу, ездит линза ── */
@media(min-width:901px){
.vp__ibtn,.vp__ov{display:none!important}
.vp__drumwrap{align-items:stretch}
.vp__drum{height:auto;flex:1;min-height:380px;perspective:none;
-webkit-mask:none;mask:none}
.vp__list{position:relative;inset:auto;height:100%;display:flex;
flex-direction:column;justify-content:space-evenly}
/* Колонка была жёстко 300px, и «Гостиница Витебск» / «ВИТЕБСКАВТОДОР»
в 20px не влезали — обрезались правым краем. Теперь колонка тянется
по ширине экрана, шрифт названия адаптивный, а длинное имя переносится
на вторую строку вместо обрезки. */
.vp__pickcol{width:clamp(300px,25vw,368px)}
.vp__o{position:relative;left:auto;right:auto;top:auto;height:auto;margin:0;
padding:9px 12px;gap:9px;opacity:1!important;transform:none!important;
pointer-events:auto!important}
.vp__o i{width:20px}
.vp__o b{font-size:clamp(15px,1.24vw,19px);white-space:normal;text-align:left;
overflow:visible;text-overflow:clip;line-height:1.16;overflow-wrap:break-word;
text-wrap:balance}
.vp__lens{height:52px;top:0;transition:top .55s var(--w-ease),height .55s var(--w-ease)}
.vp.pre .vp__o{opacity:0!important;translate:-12px 0;
transition:opacity .5s var(--w-ease),translate .5s var(--w-ease)}
.vp.pre .vp__o:nth-child(2){transition-delay:.06s}
.vp.pre .vp__o:nth-child(3){transition-delay:.12s}
.vp.pre .vp__o:nth-child(4){transition-delay:.18s}
.vp.pre .vp__o:nth-child(5){transition-delay:.24s}
.vp.pre.lit .vp__o{opacity:1!important;translate:0 0}
}
@media(max-width:900px){
.vp__row{flex-direction:column;align-items:center}
.vp__big{display:none}
.vp__stagecol{order:1}
.vp__video{width:min(360px,88vw)}
.vp__pickcol{order:2;width:min(520px,94vw);padding:16px 14px;gap:10px}
.vp__drumwrap{gap:0}
.vp__drum{min-height:0;height:76px;touch-action:pan-y;
-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
/* Барабан горизонтальный, шаг между объектами задан в js = 170px.
Ячейка была без ширины (по содержимому), поэтому длинные названия
наезжали на соседние. Теперь ячейка уже шага — соседи физически
не могут пересечься, а длинное имя переносится на вторую строку.
Вертикальное центрирование через translate (не transform!) —
transform занят анимацией барабана. */
.vp__o{left:50%;right:auto;top:50%;height:auto;width:150px;margin:0;
padding:0 2px;gap:8px;justify-content:center;translate:0 -50%}
.vp__o b{font-size:15px;line-height:1.14;white-space:normal;text-align:center;
overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.vp__o i{display:none}
.vp__lens{left:50%;right:auto;top:6px;bottom:6px;height:auto;width:166px;
translate:-50% 0}
.vp__updown{display:flex;position:absolute;inset:0;flex-direction:row;justify-content:space-between;
align-items:center;pointer-events:none;z-index:3}
.vp__ud{width:38px;height:38px;pointer-events:auto;background:rgba(255,255,255,.92)}
.vp__ud svg{rotate:-90deg}
.vp__hintd{display:none}
.vp__infocol{display:none}
}
@media(prefers-reduced-motion:reduce){
.vp.pre .vp__pickcol,.vp.pre .vp__stagecol,.vp.pre .vp__infocol,.vp.pre .vp__big{
opacity:1;translate:0 0;scale:1;filter:none}
}
/* ══════════════════════════════════════════════════════════════════
12 · ОТЗЫВЫ · coverflow + рилсы · .rvx
══════════════════════════════════════════════════════════════════ */
/* ─── ТОКЕНЫ БЛОКА ОТЗЫВОВ ─────────────────────────────────── */
.rvx{
--v-ink:#15151b; --v-ink2:#585866; --v-ink3:#8e8e9d;
--v-card:#ffffff; --v-line:rgba(21,21,32,.09);
--v-acc:#7e6ce0; --v-acc2:#b39dff; --v-gold:#f2b01e;
--v-grad:linear-gradient(115deg,#6a56d6,#a98cff 55%,#7fa8ff);
--v-sh:0 34px 80px -34px rgba(40,34,90,.35);
--v-sh2:0 16px 40px -18px rgba(40,34,90,.30);
--v-ease:cubic-bezier(.22,1,.36,1);
--v-fd:'Unbounded',system-ui,sans-serif;
--v-fb:'Onest','Inter',system-ui,sans-serif;
position:relative;overflow:clip;color:var(--v-ink);font-family:var(--v-fb);
padding:clamp(52px,7vw,96px) 0 clamp(56px,7vw,100px);
background:
radial-gradient(52% 34% at 12% 6%,rgba(150,130,255,.14),transparent 70%),
radial-gradient(46% 30% at 90% 10%,rgba(120,190,255,.12),transparent 70%),
radial-gradient(50% 36% at 50% 100%,rgba(190,150,255,.10),transparent 72%),
#f5f5f7;
}
.rvx *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.rvx [hidden]{display:none!important}
.rvx img{user-select:none;-webkit-user-drag:none}
/* гигантские плавающие кавычки на фоне */
.rvx__q{position:absolute;z-index:0;font-family:var(--v-fd);font-weight:600;line-height:1;
color:rgba(106,86,214,.06);pointer-events:none;user-select:none}
.rvx__q--a{font-size:clamp(180px,26vw,360px);top:2%;left:-1%;
animation:rvFloat 18s var(--v-ease) infinite alternate}
.rvx__q--b{font-size:clamp(150px,22vw,320px);bottom:0;right:0;rotate:180deg;
animation:rvFloat 23s var(--v-ease) -9s infinite alternate}
@keyframes rvFloat{to{translate:0 28px}}
/* ─── ШАПКА ────────────────────────────────────────────────── */
.rvx__head{position:relative;z-index:2;text-align:center;max-width:780px;
margin:0 auto clamp(16px,2.6vw,24px);padding:0 18px}
.rvx__eyebrow{font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--v-acc)}
.rvx__title{font-family:var(--v-fd);font-weight:500;margin:12px 0 10px;
font-size:clamp(29px,6.2vw,54px);line-height:1.06;letter-spacing:-.02em;
background:var(--v-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rvx__sub{margin:0 auto;font-size:clamp(15.5px,2vw,18px);line-height:1.55;color:var(--v-ink2);max-width:56ch}
/* ─── «ПИШЕТСЯ КАРАНДАШОМ» ─────────────────────────────────── */
.rvx__eyebrow i{font-style:normal;display:inline-block}
.rvx__eyebrow i.h0{opacity:0;translate:0 5px}
.rvx__eyebrow i.hw{opacity:1;translate:0 0;transition:opacity .18s ease,translate .18s ease}
.rvx__uline{display:block;width:min(340px,68vw);height:20px;margin:8px auto 2px;overflow:visible}
.rvx__uline path{fill:none;stroke:url(#rvGradU);stroke-width:5;stroke-linecap:round}
.rvx__pencil{position:absolute;left:0;top:0;z-index:40;width:clamp(64px,9vw,92px);height:auto;
pointer-events:none;opacity:0;will-change:transform;transform-origin:4.5% 50%;
filter:drop-shadow(0 12px 20px rgba(40,34,90,.4))}
.rvx__dust{position:absolute;z-index:39;width:3px;height:3px;border-radius:50%;
background:#5d5d6a;pointer-events:none}
.rvx__pencil svg{display:block;width:100%;height:auto}
/* элементы, которые перо «отрисовывает» по пути */
.rvx .ink0{opacity:0;translate:0 16px;rotate:-1.2deg;
transition:opacity .32s var(--v-ease),translate .32s var(--v-ease),rotate .32s var(--v-ease)}
.rvx .ink0.inked{opacity:1;translate:0 0;rotate:0deg}
/* ─── РЕЙТИНГ-ХАБ ──────────────────────────────────────────── */
.rvx__hub{position:relative;z-index:2;display:flex;justify-content:center;
padding:0 16px;margin-bottom:clamp(12px,2vw,18px)}
.rvx__score{display:flex;align-items:center;gap:16px;background:var(--v-card);
border-radius:24px;box-shadow:var(--v-sh2);padding:14px 22px}
.rvx__score>b{font-family:var(--v-fd);font-weight:500;line-height:1;
font-size:clamp(32px,5.4vw,42px);letter-spacing:-.02em;min-width:2.4ch;text-align:center;
background:var(--v-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rvx__sc{display:flex;flex-direction:column;gap:5px}
.rvx__stars{position:relative;display:flex;gap:4px;overflow:hidden;border-radius:6px;width:max-content}
.rvx__stars svg{width:20px;height:20px;fill:var(--v-gold)}
.rvx__stars::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.9) 50%,transparent 68%)}
.rvx.lit .rvx__stars::after{animation:rvShine 1.3s var(--v-ease) .55s forwards}
@keyframes rvShine{to{transform:translateX(140%)}}
.rvx__sc small{font-size:13.5px;font-weight:600;color:var(--v-ink3)}
/* ─── ТАБЫ РЕЖИМА ──────────────────────────────────────────── */
.rvx__tabs{position:relative;z-index:2;display:flex;justify-content:center;margin-bottom:clamp(12px,2vw,18px)}
.rvx__tabs-in{position:relative;display:inline-flex;padding:6px;border-radius:999px;
background:var(--v-card);box-shadow:var(--v-sh2)}
.rvx__tabs-in button{position:relative;z-index:2;appearance:none;border:0;background:0;cursor:pointer;
font-family:var(--v-fb);font-weight:600;font-size:15px;color:var(--v-ink2);
padding:13px 24px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;
transition:color .35s var(--v-ease)}
.rvx__tabs-in button svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.rvx__tabs-in button.on{color:#fff}
.rvx__pill{position:absolute;z-index:1;top:6px;bottom:6px;border-radius:999px;background:var(--v-ink);
transition:left .5s var(--v-ease),width .5s var(--v-ease)}
/* ─── ФИЛЬТР ИСТОЧНИКОВ (сворачивается в видео-режиме) ─────── */
.rvx__srcwrap{position:relative;z-index:2;display:grid;grid-template-rows:1fr;
transition:grid-template-rows .5s var(--v-ease),opacity .4s var(--v-ease),margin .5s var(--v-ease);
margin-bottom:clamp(4px,1vw,8px)}
.rvx__srcwrap.off{grid-template-rows:0fr;opacity:0;margin-bottom:0}
.rvx__src{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
padding:2px 16px;overflow:hidden;min-height:0}
.rvchip{--c:var(--v-acc);appearance:none;cursor:pointer;font-family:var(--v-fb);font-weight:600;
font-size:14.5px;color:var(--v-ink2);display:inline-flex;align-items:center;gap:9px;
padding:12px 17px;border-radius:999px;background:var(--v-card);
border:1.5px solid var(--v-line);box-shadow:var(--v-sh2);transition:.3s var(--v-ease)}
.rvchip i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.rvchip small{font-size:13px;font-weight:600;color:var(--v-ink3)}
.rvchip:hover{transform:translateY(-2px)}
.rvchip.on{border-color:var(--c);color:var(--v-ink)}
.rvchip.on small{color:var(--c)}
/* ─── СЦЕНА КАРУСЕЛИ ───────────────────────────────────────── */
.rvx__stage{position:relative;z-index:2}
.rvx__glow{position:absolute;left:50%;bottom:10px;translate:-50% 0;z-index:0;pointer-events:none;
width:min(560px,72vw);height:110px;filter:blur(10px);
background:radial-gradient(50% 100% at 50% 100%,rgba(126,108,224,.20),transparent 70%)}
.rvx__track{position:relative;z-index:1;display:flex;gap:clamp(14px,2vw,22px);
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
scrollbar-width:none;padding:26px clamp(18px,4vw,48px) 30px;cursor:grab}
.rvx__track::-webkit-scrollbar{display:none}
.rvx__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.rvx__track>.rvcell:first-child{margin-left:auto}
.rvx__track>.rvcell:last-child{margin-right:auto}
.rvcell{flex:0 0 clamp(286px,78vw,380px);scroll-snap-align:center;will-change:transform}
.rvx__track[data-mode=video] .rvcell{flex-basis:clamp(218px,58vw,292px)}
/* стрелки (десктоп) */
.rvx__arr{display:none;position:absolute;top:50%;translate:0 -50%;z-index:5;
width:52px;height:52px;border-radius:50%;appearance:none;border:0;cursor:pointer;
background:var(--v-card);box-shadow:var(--v-sh2);color:var(--v-ink);
place-items:center;transition:.3s var(--v-ease)}
.rvx__arr:hover{transform:translateY(-2px)}
.rvx__arr svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.2;fill:none}
.rvx__arr--l{left:clamp(10px,2vw,26px)}
.rvx__arr--r{right:clamp(10px,2vw,26px)}
@media(min-width:900px){.rvx__arr{display:grid}}
/* подсказка */
.rvx__hint{position:relative;z-index:2;display:flex;justify-content:center;margin-top:2px;
transition:opacity .5s,translate .5s}
.rvx__hint.gone{opacity:0;translate:0 8px;pointer-events:none}
.rvx__hint span{font-size:13.5px;font-weight:600;color:var(--v-ink3);
background:var(--v-card);border-radius:999px;box-shadow:var(--v-sh2);padding:11px 18px}
.rvx__hint b{color:var(--v-ink);font-weight:600}
/* ссылки на площадки — чтобы счётчики можно было проверить */
.rvx__links{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;
justify-content:center;gap:9px 10px;margin:18px auto 0;max-width:920px;padding:0 18px;
font-family:var(--v-fb)}
.rvx__links>span{font-size:13px;font-weight:600;color:var(--v-ink3)}
.rvx__links a{--c:var(--v-acc);display:inline-flex;align-items:center;gap:7px;
padding:8px 13px;border-radius:999px;border:1px solid rgba(20,24,40,.12);
background:var(--v-card);font-size:13px;font-weight:600;color:var(--v-ink2);
text-decoration:none;transition:border-color .22s,transform .22s,box-shadow .22s}
.rvx__links a i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.rvx__links a b{font-weight:700;color:var(--c)}
.rvx__links a:hover{border-color:var(--c);transform:translateY(-2px);
box-shadow:0 12px 26px -16px rgba(20,24,40,.5)}
@media(max-width:520px){
.rvx__links{gap:7px 8px;margin-top:14px}
.rvx__links>span{flex:1 1 100%;text-align:center}
.rvx__links a{padding:7px 11px;font-size:12.5px}
}
/* ─── КАРТОЧКА ТЕКСТОВОГО ОТЗЫВА ───────────────────────────── */
.rvc{position:relative;background:var(--v-card);border-radius:26px;box-shadow:var(--v-sh2);
padding:clamp(20px,3vw,26px);display:flex;flex-direction:column;gap:12px;
min-height:clamp(350px,44svh,420px);transition:box-shadow .45s var(--v-ease)}
.rvcell.is-c .rvc{box-shadow:0 32px 74px -26px rgba(40,34,90,.42)}
.rvc::before{content:"\201C";position:absolute;top:0;right:18px;z-index:0;pointer-events:none;
font-family:var(--v-fd);font-weight:600;font-size:96px;line-height:1.1;color:rgba(106,86,214,.10)}
.rvc__top{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.rvc__ava{position:relative;width:48px;height:48px;flex:none;border-radius:50%;overflow:hidden;
display:grid;place-items:center;color:#fff;font-weight:600;font-size:18px;
background:var(--av,linear-gradient(135deg,#8b7bd8,#b39dff))}
.rvc__ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rvc__who{flex:1;min-width:0}
.rvc__who b{display:block;font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvc__who span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
overflow:hidden;margin-top:2px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--v-ink3)}
/* карточка узкая на любом экране: плашка площадки встаёт справа от аватара,
имя и подпись получают всю ширину — длинные названия объектов не рвутся */
.rvc__top{flex-wrap:wrap;row-gap:9px}
.rvc__ava{order:1}
.rvc__badge{order:2;margin-left:auto}
.rvc__who{order:3;flex:1 1 100%;min-width:0}
.rvc__badge{--c:var(--v-acc);flex:none;display:inline-flex;align-items:center;gap:7px;
font-size:12.5px;font-weight:600;color:var(--v-ink2);padding:8px 11px;border-radius:999px;
background:#f2f1f8;border:1px solid var(--v-line);white-space:nowrap}
.rvc__badge i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.rvc__stars{position:relative;z-index:1;display:flex;gap:3px}
.rvc__stars svg{width:16px;height:16px;fill:var(--v-gold)}
.rvc__txt{position:relative;z-index:1;font-size:15.5px;line-height:1.6;color:var(--v-ink2);
max-height:9.7em;overflow:hidden;transition:max-height .55s var(--v-ease)}
.rvc__txt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2em;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%);transition:opacity .3s}
.rvc.open .rvc__txt{max-height:70em}
.rvc.open .rvc__txt::after{opacity:0}
.rvc.nofade .rvc__txt::after{opacity:0}
.rvc__more{position:relative;z-index:1;align-self:flex-start;appearance:none;border:0;background:0;
cursor:pointer;padding:2px 0;font-family:var(--v-fb);font-weight:600;font-size:14px;color:var(--v-acc);
display:inline-flex;align-items:center;gap:6px}
.rvc__more svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;
transition:transform .3s var(--v-ease)}
.rvc.open .rvc__more svg{transform:rotate(180deg)}
.rvc__date{position:relative;z-index:1;margin-top:auto;font-size:13.5px;font-weight:600;color:var(--v-ink3)}
/* ─── КАРТОЧКА ВИДЕООТЗЫВА (рилс 9:16) ─────────────────────── */
.rvv{position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;cursor:pointer;
box-shadow:var(--v-sh2);transition:box-shadow .45s var(--v-ease);
background:
radial-gradient(90% 60% at 30% 15%,#232030,transparent 70%),
linear-gradient(160deg,#191722,#0d0d13 60%,#15131d)}
.rvcell.is-c .rvv{box-shadow:0 36px 84px -28px rgba(20,16,50,.55)}
.rvv__poster,.rvv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rvv video{opacity:0;transition:opacity .4s}
.rvv.playing video,.rvv.noposter video{opacity:1}
.rvv__shade{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(8,8,12,.30),transparent 30%,transparent 58%,rgba(8,8,12,.80))}
.rvv__prog{position:absolute;top:12px;left:14px;right:14px;z-index:3;height:3px;border-radius:99px;
background:rgba(255,255,255,.25);overflow:hidden}
.rvv__prog i{display:block;height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,#cfc0ff,#8fb4ff)}
.rvv__tag{position:absolute;top:24px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;
font-family:'Inter',var(--v-fb);font-size:11.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:#fff;padding:7px 11px;border-radius:999px;
background:rgba(16,16,24,.45);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22)}
.rvv__tag i{width:6px;height:6px;border-radius:50%;background:#ff5b4d;box-shadow:0 0 8px #ff5b4d;
animation:rvRec 1.6s ease infinite}
@keyframes rvRec{50%{opacity:.3}}
.rvv__cap{position:absolute;left:16px;right:64px;bottom:16px;z-index:3;color:#fff;pointer-events:none}
.rvv__cap b{display:block;font-family:var(--v-fd);font-weight:500;font-size:16.5px;
letter-spacing:-.01em;line-height:1.25}
.rvv__cap span{display:block;margin-top:5px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82)}
.rvv__snd{position:absolute;right:12px;bottom:14px;z-index:4;width:44px;height:44px;border-radius:50%;
appearance:none;border:1px solid rgba(255,255,255,.28);cursor:pointer;color:#fff;
background:rgba(16,16,24,.45);backdrop-filter:blur(10px);display:grid;place-items:center;
transition:.3s var(--v-ease)}
.rvv__snd svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.rvv__snd.on{background:#fff;color:#15151b;border-color:#fff}
.rvv__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;width:58px;height:58px;
border-radius:50%;display:grid;place-items:center;pointer-events:none;opacity:0;
transition:opacity .3s;background:rgba(16,16,24,.42);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.3)}
.rvv.paused .rvv__play{opacity:1}
.rvv__play svg{width:22px;height:22px;fill:#fff;margin-left:2px}
/* ─── АДАПТИВ ──────────────────────────────────────────────── */
@media(max-width:640px){
.rvx{padding:48px 0 56px}
.rvx__score{gap:12px;padding:12px 18px}
.rvx__tabs-in{width:min(420px,94%)}
.rvx__tabs-in button{flex:1;justify-content:center;padding:12px 10px;font-size:14px}
.rvchip{padding:11px 14px;font-size:14px}
.rvcell{flex-basis:min(78vw,340px)}
.rvx__track[data-mode=video] .rvcell{flex-basis:min(62vw,270px)}
.rvc{min-height:340px}
}
@media(prefers-reduced-motion:reduce){
.rvx__q,.rvv__tag i{animation:none!important}
}
/* ══════════════════════════════════════════════════════════════════
16 · ВОПРОС-ОТВЕТ · чат с технологом · .qa / .qc / .qx
══════════════════════════════════════════════════════════════════ */
/* ═══════════ БЛОК «СПРОСИТЕ ТЕХНОЛОГА» · ЧАТ · .qa- ═══════════ */
.qa{
--i:#13161B; --i2:#565E6B; --i3:#9199A5;
--ln:rgba(19,22,27,.09); --ln2:rgba(19,22,27,.16);
--acc:#5b74e0; --acc2:#8fa2ee; --accs:rgba(96,120,230,.14);
position:relative;background:#EEF0F3;color:var(--i);
border-radius:clamp(28px,5vw,52px);overflow:hidden;
padding:clamp(30px,5vw,80px) 0 clamp(30px,5vw,84px)}
.qa::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(46% 34% at 88% 4%,rgba(96,120,230,.09),transparent 70%),
radial-gradient(42% 30% at 6% 98%,rgba(96,120,230,.07),transparent 70%)}
.qa .wrap{position:relative;z-index:2}
.qa__head{max-width:640px;margin-bottom:clamp(16px,2.6vw,30px)}
.qa__eyebrow{font-family:'Inter';font-size:11px;font-weight:600;letter-spacing:.26em;
text-transform:uppercase;color:var(--i3);display:inline-flex;align-items:center;gap:11px}
.qa__eyebrow::before{content:"";width:24px;height:1px;background:var(--acc);box-shadow:0 0 8px var(--accs)}
.qa__head h2{font-family:'Unbounded';font-weight:300;font-size:clamp(23px,5.4vw,44px);
line-height:1.06;letter-spacing:-.015em;margin:11px 0 9px;color:var(--i)}
.qa__head h2 b{font-weight:500;background:linear-gradient(120deg,#2c3350,#5b74e0 65%,#8fa2ee);
-webkit-background-clip:text;background-clip:text;color:transparent}
.qa__head p{color:var(--i2);font-size:15px;max-width:52ch}
@media(max-width:880px){.qa__head p{display:none}}
.qa__grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media(min-width:881px){.qa__grid{grid-template-columns:.82fr 1.18fr;gap:36px}}
/* ══ ФРЕЙМ СПЕЦИАЛИСТА · ФОТО НА ВЕСЬ ФРЕЙМ ══ */
.qx{position:relative;border-radius:26px;overflow:hidden;
background:linear-gradient(165deg,#d7dcee,#b9c2de 60%,#ccd3e8);
border:1px solid var(--ln);
box-shadow:0 34px 74px -36px rgba(30,38,80,.4),0 2px 0 rgba(255,255,255,.85) inset}
@media(min-width:881px){
.qx{position:sticky;top:96px;height:min(72vh,620px)}
}
@media(max-width:880px){.qx{height:auto}}
/* фото/силуэт-плейсхолдер на весь фрейм */
.qx__photo{position:absolute;inset:0}
.qx__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.qx__sil{position:absolute;left:50%;bottom:-4%;width:78%;aspect-ratio:1/1.15;
transform:translateX(-50%);border-radius:46% 46% 0 0;
background:linear-gradient(180deg,#9aa6c8,#7a86ab)}
.qx__sil::before{content:"";position:absolute;left:50%;top:-30%;width:44%;aspect-ratio:1;
transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#aab5d4,#8a96ba)}
.qx__photo::after{content:"";position:absolute;inset:0;
background:
radial-gradient(80% 50% at 50% 0,rgba(255,255,255,.4),transparent 60%),
linear-gradient(180deg,transparent 42%,rgba(20,24,40,.16) 68%,rgba(16,19,34,.78))}
/* пузырь-статус — «говорит» сверху фрейма */
.qx__bub{position:absolute;top:16px;left:16px;right:16px;z-index:5;
padding:12px 16px;border-radius:18px 18px 18px 5px;min-height:45px;
display:flex;align-items:center;
background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 16px 36px -16px rgba(30,38,80,.45);
font-size:13.5px;line-height:1.4;color:var(--i2);
transition:transform .45s var(--spring)}
.qx__bub b{color:var(--acc);font-weight:600}
.qx__bub.pop{animation:qxPop .5s var(--spring)}
@keyframes qxPop{0%{transform:scale(.94)}55%{transform:scale(1.03)}100%{transform:scale(1)}}
.qx__dots{display:none;gap:5px;align-items:center;padding:3px 0}
.qx__dots i{width:7px;height:7px;border-radius:50%;background:var(--acc);opacity:.4;
animation:qxDot 1s ease-in-out infinite}
.qx__dots i:nth-child(2){animation-delay:.15s}
.qx__dots i:nth-child(3){animation-delay:.3s}
@keyframes qxDot{40%{opacity:1;transform:translateY(-4px)}}
.qx__bub.typing .qx__tx{display:none}
.qx__bub.typing .qx__dots{display:inline-flex}
/* подпись на фото: имя · роль · стаж */
.qx__meta{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:18px 18px 18px;
display:flex;flex-direction:column;gap:10px}
.qx__name{font-family:'Unbounded';font-weight:500;font-size:clamp(21px,2.4vw,27px);
letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(10,14,30,.5)}
.qx__role{font-family:'Inter';font-size:10px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.75)}
.qx__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.qx__chip{display:inline-flex;align-items:baseline;gap:6px;padding:8px 13px;border-radius:100px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
color:#fff;font-size:12px;font-weight:600}
.qx__chip b{font-family:'Unbounded';font-weight:500;font-size:14px}
/* мобайл: фрейм → шапка чата (фото-круг + имя + пузырь) */
@media(max-width:880px){
.qx{display:grid;grid-template-columns:60px 1fr;gap:2px 13px;align-items:center;
padding:12px 14px;border-radius:20px}
.qx__photo{position:relative;grid-row:1/3;width:60px;height:60px;border-radius:50%;
overflow:hidden;border:2px solid #fff;box-shadow:0 6px 16px -6px rgba(30,38,80,.4)}
.qx__photo::after{display:none}
.qx__sil{width:92%;bottom:-12%}
.qx__meta{position:relative;inset:auto;padding:0;gap:2px}
.qx__name{font-size:15px;color:var(--i);text-shadow:none}
.qx__role{color:var(--i3);font-size:8.5px}
.qx__chips{display:none}
.qx__bub{position:relative;inset:auto;grid-column:2;margin-top:7px;
padding:8px 12px;min-height:36px;font-size:12px;border-radius:13px 13px 13px 3px;
background:#fff;border-color:var(--ln2);backdrop-filter:none;-webkit-backdrop-filter:none;
box-shadow:0 8px 20px -12px rgba(30,38,80,.3)}
}
/* ══ ЧАТ ══ */
.qc{position:relative;display:flex;flex-direction:column;height:min(72vh,620px);
background:#fff;border:1px solid var(--ln);border-radius:26px;overflow:hidden;
box-shadow:0 30px 70px -36px rgba(30,38,80,.35)}
@media(max-width:880px){.qc{height:calc(100svh - 262px);min-height:380px;border-radius:22px}}
/* лента сообщений */
.qc__log{flex:1;overflow-y:auto;padding:18px 16px 12px;display:flex;flex-direction:column;gap:10px;
background:
radial-gradient(60% 40% at 100% 0,rgba(96,120,230,.05),transparent 70%),
#F6F7FA;scrollbar-width:thin;scrollbar-color:rgba(19,22,27,.15) transparent}
.qc__log::-webkit-scrollbar{width:4px}
.qc__log::-webkit-scrollbar-thumb{background:rgba(19,22,27,.15);border-radius:4px}
.msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.55;
opacity:0;transform:translateY(10px) scale(.97);
transition:opacity .4s var(--ease),transform .45s var(--spring)}
.msg.in{opacity:1;transform:none}
.msg--out{align-self:flex-end;border-radius:16px 16px 4px 16px;color:#fff;
background:linear-gradient(135deg,#5b74e0,#8fa2ee);
box-shadow:0 12px 26px -14px rgba(91,116,224,.55)}
.msg--in{align-self:flex-start;border-radius:16px 16px 16px 4px;color:var(--i2);
background:#fff;border:1px solid var(--ln2);
box-shadow:0 10px 24px -16px rgba(30,38,80,.25)}
.msg--in .msg__who{display:block;margin-bottom:5px;font-family:'Inter';font-size:9px;
font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.msg__dots{display:inline-flex;gap:5px;align-items:center;padding:4px 2px}
.msg__dots i{width:7px;height:7px;border-radius:50%;background:var(--i3);opacity:.4;
animation:qxDot 1s ease-in-out infinite}
.msg__dots i:nth-child(2){animation-delay:.15s}
.msg__dots i:nth-child(3){animation-delay:.3s}
/* мигающая каретка при посимвольном наборе */
.msg__tx.caret::after{content:"▍";color:var(--acc);margin-left:1px;animation:qcCaret .8s steps(1) infinite}
@keyframes qcCaret{50%{opacity:0}}
.msg--flash{animation:qcFlash 1.1s var(--ease)}
@keyframes qcFlash{0%,60%{box-shadow:0 0 0 3px rgba(91,116,224,.4)}100%{box-shadow:0 0 0 0 rgba(91,116,224,0)}}
/* ══ ЛОТОК ВОПРОСОВ (доска → док) ══ */
.qc__tray{flex:none;border-top:1px solid var(--ln);background:#fff}
.tray__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:11px 16px 0}
.tray__label{font-family:'Inter';font-size:9.5px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--i3)}
.tray__toggle{display:none;align-items:center;gap:6px;font-family:'Inter';font-size:10px;
font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);padding:4px 2px}
.tray__toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;
transition:transform .4s var(--spring)}
.qc__tray.dock .tray__toggle{display:inline-flex}
.qc__tray.peek .tray__toggle svg{transform:rotate(180deg)}
.tray__pills{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 14px;
max-height:172px;overflow-y:auto;scrollbar-width:none;transition:max-height .45s var(--ease)}
.tray__pills::-webkit-scrollbar{display:none}
/* док: одна строка с горизонтальной прокруткой */
.qc__tray.dock:not(.peek) .tray__pills{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
max-height:64px;padding:10px 16px 13px;-webkit-overflow-scrolling:touch}
.qc__tray.dock:not(.peek) .pill{flex:0 0 auto}
.qc__tray.dock:not(.peek) .pill span{max-width:168px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;display:block}
.pill{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:100px;
background:#F4F5F7;border:1px solid var(--ln2);text-align:left;
font-size:12.5px;font-weight:600;color:var(--i);line-height:1.3;
transition:transform .45s var(--spring),background .3s,border-color .3s,opacity .35s,box-shadow .4s}
.pill:hover{border-color:rgba(91,116,224,.45);background:#fff;transform:translateY(-2px);
box-shadow:0 10px 22px -12px rgba(50,66,140,.3)}
.pill i{flex:none;font-style:normal;font-family:'Inter';font-size:9px;font-weight:600;
letter-spacing:.1em;color:var(--acc)}
.pill.asked{opacity:.45}
.pill.asked i{color:#3fbf8f}
/* «сбор» доски в док */
.pill.fly{opacity:0;transform:translateY(26px) scale(.55)}
.qc__tray.dock .pill{animation:pillIn .5s var(--spring) backwards}
@keyframes pillIn{from{opacity:0;transform:translateY(14px) scale(.8)}}
/* CTA после всех вопросов */
.tray__cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;
font-size:12.5px;font-weight:600;color:#fff;flex:0 0 auto;
background:linear-gradient(135deg,#5b74e0,#8fa2ee);
box-shadow:0 12px 26px -12px rgba(91,116,224,.55)}
.tray__cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
@media(max-width:880px){
.tray__pills{max-height:148px}
.msg{font-size:13.5px;max-width:92%}
}
/* ══ ТАБЫ РЕЖИМА · чат ↔ классический вопрос-ответ ══ */
.qa__tabs{display:inline-flex;gap:4px;padding:5px;margin-bottom:clamp(16px,2.4vw,26px);
border-radius:100px;background:#fff;border:1px solid var(--ln);
box-shadow:0 12px 30px -20px rgba(30,38,80,.35),0 1px 0 rgba(255,255,255,.9) inset}
.qa__tab{display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:46px;padding:0 clamp(16px,2.2vw,22px);border-radius:100px;
font-family:'Inter';font-size:13px;font-weight:600;letter-spacing:.01em;
color:var(--i2);white-space:nowrap;cursor:pointer;
transition:color .3s,background .45s var(--spring),box-shadow .45s var(--spring)}
.qa__tab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;flex:none}
.qa__tab:not(.on):hover{color:var(--i)}
.qa__tab.on{color:#fff;background:linear-gradient(135deg,#5b74e0,#8fa2ee);
box-shadow:0 14px 28px -14px rgba(91,116,224,.6)}
@media(max-width:880px){
.qa__tabs{display:flex;width:100%}
.qa__tab{flex:1;min-width:0;padding:0 10px}
}
/* ══ КЛАССИЧЕСКИЙ ВОПРОС-ОТВЕТ · аккордеон (те же данные, что в чате) ══ */
.qa__classic{display:none}
.qa.mode-list .qa__grid{display:none}
.qa.mode-list .qa__classic{display:block}
.qa__acc{display:grid;gap:10px;max-width:840px}
.qa__ai{border:1px solid var(--ln2);border-radius:18px;background:#fff;
box-shadow:0 14px 34px -26px rgba(30,38,80,.4);
transition:border-color .35s,box-shadow .35s}
.qa__ai.on{border-color:rgba(91,116,224,.4);box-shadow:0 20px 46px -24px rgba(91,116,224,.4)}
.qa__qbtn{width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
padding:16px 18px;min-height:64px;color:var(--i);font-family:'Onest';
font-size:clamp(15px,1.6vw,16.5px);font-weight:600;line-height:1.35;transition:color .3s}
.qa__qbtn:hover{color:var(--acc)}
.qa__qn{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.02em;
color:var(--acc);background:var(--accs);border:1px solid rgba(91,116,224,.2)}
.qa__qt{flex:1;min-width:0}
.qa__qx{flex:none;position:relative;width:24px;height:24px}
.qa__qx::before,.qa__qx::after{content:"";position:absolute;left:50%;top:50%;
width:13px;height:2px;border-radius:2px;background:var(--acc);
translate:-50% -50%;transition:transform .4s var(--spring),opacity .3s}
.qa__qx::after{transform:rotate(90deg)}
.qa__ai.on .qa__qx::after{transform:rotate(0);opacity:0}
.qa__ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.qa__ai.on .qa__ans{grid-template-rows:1fr}
.qa__ans>div{overflow:hidden}
.qa__ans p{margin:0;padding:0 20px 18px 66px;color:var(--i2);font-size:15px;line-height:1.6}
@media(max-width:880px){
.qa__ans p{padding:0 18px 16px 18px}
}
/* ══════════════════════════════════════════════════════════
17 · ПРЕДСТАВИТЕЛЬСТВА · тёмный «пульт присутствия» + футер · .hq
Карта Беларуси: города — точки света, зажигаются по выбору. Стеклянная
панель-читалка контактов. Витебск → витрина шоурума. Лид → openSheet().
══════════════════════════════════════════════════════════ */
.hq{
--q-fb:'Onest','Inter',system-ui,sans-serif;
--q-fd:'Unbounded',system-ui,sans-serif;
--q-bg:#0A0C0F;
--q-txt:#EAEEF3; --q-dim:#A2ACBA; --q-mute:#6C7683;
--q-vio:#a98cff;
--q-grad:linear-gradient(115deg,#8f7bff,#b79cff 55%,#8fb6ff);
--q-glass:rgba(22,26,34,.62);
--q-ln:rgba(255,255,255,.09); --q-ln2:rgba(255,255,255,.15);
--q-ease:cubic-bezier(.22,.61,.36,1);
--q-spring:cubic-bezier(.34,1.4,.5,1);
position:relative;width:100%;
background:
radial-gradient(90% 62% at 82% -8%, rgba(120,96,230,.16), transparent 60%),
radial-gradient(72% 52% at 2% 108%, rgba(96,120,230,.12), transparent 62%),
var(--q-bg);
color:var(--q-txt);font-family:var(--q-fb);
border-radius:clamp(26px,4.6vw,48px) clamp(26px,4.6vw,48px) 0 0;
padding:clamp(54px,7.4vw,104px) 0 0;
overflow:hidden;scroll-margin-top:84px;
}
.hq [hidden]{display:none!important}
.hq__wrap{width:min(1180px,94vw);margin:0 auto}
.hq :focus{outline:none}
.hq :focus-visible{outline:none;box-shadow:0 0 0 4px rgba(169,140,255,.35);border-radius:14px}
/* появление */
.hq .hq-rv{opacity:0;translate:0 26px;filter:blur(9px);
transition:opacity .8s var(--q-ease),translate .8s var(--q-ease),filter .8s var(--q-ease)}
.hq .hq-rv.in{opacity:1;translate:0 0;filter:blur(0)}
.hq .hq-rv.d1{transition-delay:.08s}.hq .hq-rv.d2{transition-delay:.16s}.hq .hq-rv.d3{transition-delay:.24s}
/* шапка */
.hq__head{max-width:640px;margin-bottom:clamp(22px,3.2vw,40px)}
.hq__kick{display:inline-flex;align-items:center;gap:10px;font-family:'Inter';
font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--q-mute)}
.hq__kick i{width:8px;height:8px;border-radius:50%;background:#7be3a0;
box-shadow:0 0 12px 3px rgba(123,227,160,.5);animation:hqPulse 2.6s infinite}
@keyframes hqPulse{0%,100%{opacity:1}50%{opacity:.4}}
.hq__head h2{font-family:var(--q-fd);font-weight:300;margin:13px 0 10px;
font-size:clamp(28px,6.6vw,50px);line-height:1.05;letter-spacing:-.02em}
.hq__head h2 b{font-weight:500;background:var(--q-grad);
-webkit-background-clip:text;background-clip:text;color:transparent}
.hq__head p{font-size:clamp(15px,4vw,17px);line-height:1.6;color:var(--q-dim);max-width:52ch}
/* ══ ГЕОГРАФИЯ · области-ссылки ↔ контакты + шоурум ══
Главная: перечень и ССЫЛКИ на областные города (регулирование ссылочной
массы). Мелкие города — на областных страницах, не здесь. Панель — контакты
области + заметный флагманский шоурум. Города без шоурума → логотип в панели. */
.hq__geo{display:grid;gap:16px}
@media(min-width:920px){
.hq__geo{grid-template-columns:.82fr 1.18fr;gap:clamp(26px,3.4vw,52px);align-items:start}
}
/* области — ссылки */
.hq__reg{display:grid;gap:7px;align-content:start}
.hq__rg{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 15px;
border-radius:16px;cursor:pointer;text-align:left;color:var(--q-dim);
background:rgba(255,255,255,.03);border:1px solid var(--q-ln);
transition:background .3s,border-color .3s,color .3s,padding-left .3s var(--q-spring)}
.hq__rg:hover{background:rgba(255,255,255,.06);color:var(--q-txt)}
.hq__rg.on{background:linear-gradient(120deg,rgba(143,123,255,.16),rgba(143,182,255,.08));
border-color:rgba(169,140,255,.45);color:var(--q-txt)}
.hq__rg-t{display:grid;gap:2px;min-width:0}
.hq__rg-city{font-family:var(--q-fd);font-weight:400;font-size:clamp(18px,2vw,22px);
letter-spacing:-.01em;line-height:1.12}
.hq__rg.on .hq__rg-city{font-weight:500}
.hq__rg-sub{font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--q-mute)}
.hq__rg-flag{margin-left:auto;flex:none;font-family:'Inter';font-size:12px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--q-vio)}
.hq__rg-go{margin-left:auto;flex:none;width:22px;height:22px;stroke:currentColor;fill:none;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;
transition:transform .3s var(--q-spring),opacity .3s}
.hq__rg.on .hq__rg-go{opacity:1;transform:translateX(3px)}
.hq__rg-flag+.hq__rg-go{margin-left:12px}
/* панель контактов области */
.hq__panel{position:relative;border-radius:24px;padding:clamp(22px,3vw,32px);
background:var(--q-glass);border:1px solid var(--q-ln2);
backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
box-shadow:0 44px 96px -52px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.08);
display:grid;gap:15px;align-content:start}
.hq__panel.swap{animation:hqSwap .4s var(--q-ease)}
@keyframes hqSwap{from{opacity:.5;filter:blur(5px)}}
.hq__phead{display:flex;align-items:center;gap:15px}
.hq__pthumb{flex:none;width:60px;height:78px;border-radius:14px;overflow:hidden;
background:#12151b;border:1px solid var(--q-ln2)}
.hq__pthumb img{width:100%;height:100%;display:block}
.hq__pthumb img.photo{object-fit:cover}
.hq__pthumb img.logo{object-fit:contain;padding:12px;filter:drop-shadow(0 0 10px rgba(169,140,255,.35))}
.hq__phead-t{display:grid;gap:5px;min-width:0}
.hq__st{display:inline-flex;align-items:center;gap:9px;font-family:'Inter';
font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--q-mute)}
.hq__st i{width:8px;height:8px;border-radius:50%;background:#7be3a0;
box-shadow:0 0 10px 2px rgba(123,227,160,.5);transition:background .4s,box-shadow .4s}
.hq__st.off i{background:#ff8577;box-shadow:0 0 10px 2px rgba(255,120,110,.45)}
.hq__phead h3{font-family:var(--q-fd);font-weight:500;font-size:clamp(20px,4.2vw,27px);
letter-spacing:-.015em;line-height:1.1}
.hq__pcat{font-family:'Inter';font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--q-mute)}
.hq__tel{display:inline-block;width:fit-content;font-family:var(--q-fd);font-weight:500;
font-size:clamp(21px,5vw,29px);letter-spacing:-.02em;
background:var(--q-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 10px 26px rgba(140,120,255,.3));transition:filter .35s}
.hq__tel:hover{filter:drop-shadow(0 12px 32px rgba(150,130,255,.6))}
.hq__row{display:flex;align-items:flex-start;gap:11px;font-size:15px;font-weight:500;
line-height:1.5;color:var(--q-dim)}
.hq__row b{color:var(--q-txt);font-weight:600}
.hq__row .ok{color:#8fe0b0;font-weight:500}
.hq__row svg{width:18px;height:18px;stroke:var(--q-vio);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
/* ЗАМЕТНЫЙ ШОУРУМ */
.hq__show{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
padding:13px 15px;border-radius:18px;
background:linear-gradient(120deg,rgba(143,123,255,.2),rgba(143,182,255,.1));
border:1px solid rgba(169,140,255,.5);
box-shadow:0 0 30px -12px rgba(140,120,255,.5) inset;
transition:border-color .3s,box-shadow .3s,translate .3s var(--q-spring)}
.hq__show:hover{border-color:rgba(169,140,255,.8);translate:0 -2px;
box-shadow:0 18px 38px -18px rgba(140,120,255,.7)}
.hq__show-ic{flex:none;width:46px;height:58px;border-radius:11px;overflow:hidden;
background:#12151b;border:1px solid var(--q-ln2)}
.hq__show-ic img{width:100%;height:100%;object-fit:cover;display:block}
.hq__show-t{display:grid;gap:3px;min-width:0}
.hq__show-t b{font-family:var(--q-fd);font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--q-txt);line-height:1.12}
.hq__show-t span{font-size:13px;color:var(--q-dim);line-height:1.4}
.hq__show-go{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;
padding:9px 16px;border-radius:100px;background:var(--q-grad);color:#fff;
font-family:'Inter';font-size:13.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
box-shadow:0 12px 26px -12px rgba(130,108,240,.8)}
.hq__show-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hq__panel-act{display:flex;flex-wrap:wrap;align-items:center;gap:13px 16px;margin-top:2px}
/* переход на страницу области — «в блоке самого города» (и ссылочная масса) */
.hq__pglink{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:100px;
font-family:'Inter';font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--q-txt);
background:rgba(255,255,255,.04);border:1px solid var(--q-ln2);
transition:background .3s,border-color .3s,color .3s}
.hq__pglink:hover{background:rgba(255,255,255,.07);border-color:rgba(169,140,255,.5);color:#fff}
.hq__pglink svg{width:16px;height:16px;stroke:var(--q-vio);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--q-spring)}
.hq__pglink:hover svg{transform:translateX(3px)}
@media(max-width:919px){
.hq__reg{grid-template-columns:repeat(3,1fr);gap:8px}
.hq__rg{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
min-height:62px;padding:10px 12px;position:relative}
.hq__rg-sub{display:none}
.hq__rg-flag{order:-1;margin:0;font-size:12px;letter-spacing:.03em;line-height:1}
.hq__rg-go{position:absolute;top:8px;right:9px;margin:0;width:16px;height:16px}
.hq__rg-flag+.hq__rg-go{display:none}
}
@media(max-width:759px){
.hq__show{flex-wrap:wrap;gap:11px}
.hq__show-go{margin-left:0;width:100%;justify-content:center}
.hq__panel-act .hq__cta,.hq__panel-act .hq__pglink{width:100%;justify-content:center}
}
/* ══════════════ КНОПКИ ══════════════ */
.hq__cta{display:inline-flex;align-items:center;justify-content:center;gap:11px;
min-height:58px;padding:0 clamp(24px,4vw,32px);border-radius:999px;
font-size:clamp(16.5px,4.2vw,18px);font-weight:700;letter-spacing:.01em;color:#fff;
background:var(--q-grad);
box-shadow:0 24px 54px -20px rgba(130,108,240,.85);
transition:box-shadow .35s,translate .35s var(--q-spring)}
.hq__cta:active{translate:0 2px}
.hq__cta:hover{box-shadow:0 30px 66px -20px rgba(140,118,250,.95)}
.hq__cta svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.hq__link{display:inline-flex;align-items:center;gap:10px;min-height:48px;
font-size:clamp(16px,4.2vw,17.5px);font-weight:600;color:var(--q-txt);
transition:filter .3s,gap .35s var(--q-spring)}
.hq__link:hover{filter:drop-shadow(0 0 14px rgba(255,255,255,.45));gap:14px}
.hq__link svg{width:19px;height:19px;stroke:var(--q-vio);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.hq__link{color:var(--q-txt)}
.hq__link:hover{filter:none;color:var(--q-vio)}
.hq__link{color:var(--q-txt)}
.hq__link:hover{filter:drop-shadow(0 0 14px rgba(169,140,255,.5));color:var(--q-txt)}
/* ══════════════ ОВЕРЛЕИ · общее ══════════════ */
.hq__ov{position:fixed;inset:0;z-index:120;
background:rgba(6,8,11,.72);backdrop-filter:blur(18px) saturate(1.3);
-webkit-backdrop-filter:blur(18px) saturate(1.3);
opacity:0;pointer-events:none;transition:opacity .35s var(--q-ease)}
.hq__ov.on{opacity:1;pointer-events:auto}
.hq__ov-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:3;
width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
background:rgba(255,255,255,.07);transition:background .3s}
.hq__ov-x:hover{background:rgba(255,255,255,.15)}
.hq__ov-x svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
/* оверлеи остаются тёмными — свет показываем в темноте */
.hq__ov{--q-txt:#EAEEF3;--q-dim:#A7B0BD;--q-mute:#6E7783;--q-vio:#a98cff;color:var(--q-txt)}
.hq__ov .hq__link{color:var(--q-txt)}
/* ── витрина шоурума Витебска ── */
.hq__vt{overflow:auto;-webkit-overflow-scrolling:touch}
.hq__vt-in{width:min(1080px,94vw);margin:0 auto;
padding:max(24px,env(safe-area-inset-top)) 0 max(40px,env(safe-area-inset-bottom));
opacity:0;translate:0 34px;transition:opacity .5s var(--q-ease),translate .55s var(--q-spring)}
.hq__ov.on .hq__vt-in{opacity:1;translate:0 0}
.hq__vt-head{display:grid;gap:12px;margin:clamp(18px,3vw,30px) 0 clamp(20px,3.4vw,30px);
max-width:680px}
.hq__vt-k{display:inline-flex;align-items:center;gap:10px;
font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--q-mute)}
.hq__vt-k .mp{display:block;width:28px;height:auto;border-radius:8px;
filter:drop-shadow(0 0 12px rgba(169,140,255,.4))}
.hq__vt-k .on{display:inline-flex;align-items:center;gap:8px;margin-left:12px}
.hq__vt-k .on i{width:8px;height:8px;border-radius:50%;background:#7be3a0;
box-shadow:0 0 12px 3px rgba(123,227,160,.5);transition:background .4s,box-shadow .4s}
.hq__vt-k .on.off i{background:#ff8577;box-shadow:0 0 12px 3px rgba(255,120,110,.45)}
.hq__vt-t{font-size:clamp(30px,7.6vw,50px);font-weight:700;letter-spacing:-.015em;line-height:1.06}
.hq__vt-t b{font-weight:700;background:var(--q-grad);
-webkit-background-clip:text;background-clip:text;color:transparent}
.hq__addr{display:flex;align-items:flex-start;gap:11px;
font-size:clamp(16.5px,4.4vw,18px);font-weight:600;line-height:1.5;color:var(--q-txt)}
.hq__addr svg{width:19px;height:19px;stroke:var(--q-vio);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:3px}
.hq__vt-p{font-size:clamp(16.5px,4.4vw,18px);line-height:1.65;color:var(--q-dim);max-width:56ch}
.hq__vt-p b{color:var(--q-txt);font-weight:600}
/* медиа-мозаика: видео и фото парят на тенях */
.hq__mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2vw,16px)}
.hq__tile{position:relative;border-radius:22px;overflow:hidden;background:#12151b;padding:0;
aspect-ratio:3/4;text-align:left;
box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
transition:translate .45s var(--q-spring),box-shadow .45s}
.hq__tile:hover{translate:0 -7px;box-shadow:0 54px 116px -44px rgba(0,0,0,1)}
.hq__tile img,.hq__tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
user-select:none;-webkit-user-drag:none}
.hq__tile::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(8,10,14,.78) 0%,transparent 42%)}
.hq__tile .cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;pointer-events:none}
.hq__tile .cap small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:rgba(196,214,240,.85);margin-bottom:4px}
.hq__tile .cap b{display:block;font-size:clamp(15.5px,4vw,17.5px);font-weight:600;line-height:1.3;color:#fff}
.hq__tile .mark{position:absolute;right:13px;top:13px;z-index:1;width:44px;height:44px;
display:grid;place-items:center;border-radius:50%;pointer-events:none;
background:rgba(10,12,16,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hq__tile .mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.hq__tile .mark.play svg{fill:#fff;stroke:none;margin-left:2px}
.hq__tile.is-video{grid-column:1 / -1;aspect-ratio:16/10}
/* инфо после мозаики */
.hq__vt-grid{display:grid;gap:clamp(20px,3.4vw,30px);margin-top:clamp(22px,3.6vw,32px)}
.hq__perks{display:grid;gap:15px;align-content:start}
.hq__perk{display:flex;align-items:flex-start;gap:13px;
font-size:clamp(16.5px,4.4vw,18px);font-weight:500;line-height:1.5;color:var(--q-dim)}
.hq__perk b{color:var(--q-txt);font-weight:600}
.hq__perk svg{width:20px;height:20px;stroke:var(--q-vio);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:3px;
filter:drop-shadow(0 0 8px rgba(169,140,255,.4))}
.hq__vt-meta{display:grid;gap:12px;align-content:start}
.hq__vt-act{display:flex;align-items:center;gap:clamp(16px,3vw,26px);flex-wrap:wrap}
@media(min-width:860px){
.hq__mosaic{grid-template-columns:repeat(4,1fr)}
.hq__tile.is-video{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.hq__vt-grid{grid-template-columns:1.1fr .9fr;column-gap:clamp(30px,4vw,56px)}
}
/* ══════════════ ЛАЙТБОКС (фото + видео) ══════════════ */
.hq__lb{z-index:140;display:grid;place-items:center}
.hq__lb-frame{position:relative;width:min(88vw,520px)}
.hq__lb-media{position:relative;border-radius:28px;overflow:hidden;background:#0e1116;
box-shadow:0 70px 160px -50px rgba(0,0,0,1)}
.hq__lb-media img,.hq__lb-media video{display:block;width:100%;max-height:76dvh;object-fit:contain}
.hq__ov.on .hq__lb-frame{animation:hqLbIn .5s var(--q-spring) both}
@keyframes hqLbIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.hq__lb-cap{margin-top:15px;text-align:center}
.hq__lb-cap small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:rgba(196,214,240,.8);margin-bottom:4px}
.hq__lb-cap b{font-size:clamp(16.5px,4.4vw,19px);font-weight:600;color:#fff}
.hq__lb-nav{position:absolute;top:50%;translate:0 -50%;width:54px;height:54px;
display:grid;place-items:center;border-radius:50%;
background:rgba(255,255,255,.07);transition:background .3s}
.hq__lb-nav:hover{background:rgba(255,255,255,.15)}
.hq__lb-nav svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.hq__lb-nav.prev{left:-70px}
.hq__lb-nav.next{right:-70px}
@media(max-width:760px){
.hq__lb-nav.prev{left:6px;top:auto;bottom:-72px;translate:0 0}
.hq__lb-nav.next{right:6px;top:auto;bottom:-72px;translate:0 0}
}
/* ══════════════ ДЕМО-ФОЛЛБЕК ФОРМЫ (в шаблоне — глобальный openSheet) ══════════════ */
.hq__dsheet{z-index:150;display:grid;align-items:end;justify-items:center}
.hq__dsheet-p{position:relative;width:min(560px,100%);border-radius:30px 30px 0 0;
background:linear-gradient(to bottom,#151922,#0e1116);
box-shadow:0 -30px 90px -30px rgba(0,0,0,.9);
padding:28px 22px max(26px,env(safe-area-inset-bottom));
display:grid;gap:14px;translate:0 40px;transition:translate .45s var(--q-spring)}
.hq__ov.on .hq__dsheet-p{translate:0 0}
.hq__dsheet-p h3{font-size:clamp(22px,5.6vw,26px);font-weight:700;letter-spacing:-.01em}
.hq__dsheet-p p{font-size:15px;color:var(--q-dim);line-height:1.5}
.hq__fld{display:grid;gap:9px}
.hq__fld span{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--q-mute)}
.hq__fld input{width:100%;min-height:58px;padding:0 20px;border-radius:18px;
background:rgba(255,255,255,.06);color:var(--q-txt);font-family:var(--q-fb);
font-size:17px;font-weight:600;transition:background .3s,box-shadow .3s}
.hq__fld input::placeholder{color:var(--q-mute);font-weight:500}
.hq__fld input:focus{background:rgba(255,255,255,.09);
box-shadow:0 0 0 4px rgba(169,140,255,.22)}
.hq__done{display:grid;justify-items:center;gap:12px;padding:14px 0;text-align:center}
.hq__done-ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 50% 40%,rgba(123,227,160,.16),rgba(123,227,160,.05));
box-shadow:0 0 60px -6px rgba(123,227,160,.4)}
.hq__done-ic svg{width:34px;height:34px;stroke:#7be3a0;fill:none;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
.hq__done b{font-size:clamp(22px,5vw,25px);font-weight:700}
.hq__done p{font-size:15px;color:var(--q-dim);line-height:1.5;max-width:38ch}
/* ══ ФУТЕР · тёмный, световой ══ */
.hq__sys{position:relative;margin-top:clamp(46px,6vw,88px);
padding:clamp(40px,5vw,66px) 0 clamp(22px,3vw,32px)}
.hq__sys::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;
width:min(760px,86vw);height:1px;
background:linear-gradient(90deg,transparent,rgba(196,214,240,.5),transparent);
box-shadow:0 0 24px 2px rgba(180,196,230,.25)}
.hq__ft{width:min(1180px,94vw);margin:0 auto;display:grid;gap:clamp(26px,4vw,44px)}
.hq__ft-hero{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,4vw,44px)}
.hq__ft-tel{font-family:var(--q-fd);font-weight:500;letter-spacing:-.025em;line-height:1.02;
font-size:clamp(26px,6vw,50px);
background:var(--q-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 14px 40px rgba(140,120,255,.34));transition:filter .35s}
.hq__ft-tel:hover{filter:drop-shadow(0 16px 48px rgba(150,130,255,.6))}
.hq__ft-note{display:grid;gap:3px;font-size:14.5px;line-height:1.5;color:var(--q-mute)}
.hq__ft-note b{color:var(--q-txt);font-weight:600;font-size:15.5px}
.hq__ft-hero .hq__cta{margin-left:auto}
.hq__ft-grid{display:grid;gap:26px;border-top:1px solid var(--q-ln);padding-top:clamp(24px,3.4vw,38px)}
@media(min-width:760px){.hq__ft-grid{grid-template-columns:1.3fr .85fr .85fr;gap:clamp(20px,3vw,40px)}}
.hq__brand{display:grid;gap:13px;align-content:start;justify-items:start}
.hq__brand-row{display:inline-flex;align-items:center;gap:11px}
.hq__brand-row img{display:block;width:34px;height:auto;border-radius:9px;
filter:drop-shadow(0 0 12px rgba(169,140,255,.4))}
.hq__brand-row b{font-family:var(--q-fd);font-weight:500;font-size:16px;letter-spacing:.08em}
.hq__brand p{font-size:14.5px;line-height:1.6;color:var(--q-mute);max-width:32ch}
.hq__soc{display:flex;gap:10px}
.hq__soc a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.05);border:1px solid var(--q-ln2);
transition:border-color .3s,box-shadow .3s,translate .3s var(--q-spring)}
.hq__soc a:hover{border-color:rgba(169,140,255,.6);translate:0 -2px;
box-shadow:0 12px 26px -14px rgba(140,120,255,.6)}
.hq__soc svg{width:20px;height:20px;stroke:var(--q-dim);fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.hq__col{display:grid;align-content:start;gap:2px}
.hq__col small{font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--q-mute);margin-bottom:8px}
.hq__col a{display:flex;align-items:center;min-height:40px;font-size:15.5px;font-weight:500;
color:var(--q-dim);transition:color .3s,padding-left .3s var(--q-spring)}
.hq__col a:hover{color:var(--q-txt);padding-left:6px}
.hq__ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;
border-top:1px solid var(--q-ln);padding-top:18px;font-size:13.5px;color:var(--q-mute)}
.hq__wink{font-style:italic}
@media(max-width:759px){
.hq__ft-hero{flex-direction:column;align-items:flex-start;gap:12px}
.hq__ft-hero .hq__cta{margin-left:0;width:100%;justify-content:center}
.hq__brand{grid-column:1/-1;justify-items:center;text-align:center;margin-bottom:4px}
.hq__ft-grid{grid-template-columns:1fr 1fr}
.hq__col{justify-items:center;text-align:center}
.hq__ft-bottom{flex-direction:column;align-items:center;text-align:center;gap:6px;
padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
/* ══════════════ REDUCED MOTION ══════════════ */
@media(prefers-reduced-motion:reduce){
.hq *{animation:none!important;transition:none!important}
.hq .hq-rv{opacity:1;translate:0 0;filter:none}
}
/* ══════════════════════════════════════════════════════════════════
БАЗА · UI · МОБ. ПАНЕЛЬ, МОДАЛКА «ЗАМЕР», КНОПКА НАВЕРХ, REVEAL
══════════════════════════════════════════════════════════════════ */
/* ═══════════════ МЕДИА-ЗАГРУЗЧИК · логотип вместо негруженого контента ═══════════════
Пока фото/видео не загрузилось (или не загрузилось вовсе) — в его боксе
логотип М+ на нейтральной подложке. Класс вешает и снимает JS-модуль в конце скрипта. */
img.mld,video.mld{background:rgba(138,152,190,.16)
url('/assets/img/logo/logo-smoll.png') center/clamp(30px,16%,54px) no-repeat!important}
/* проявление через blur: не трогаем opacity — стеки-переключатели
(полотна/свет/карнизы в квизе) прячут варианты именно через opacity:0,
и анимация с fill:both их перекрывала бы навсегда */
img.mld-in,video.mld-in{animation:mldIn .55s var(--ease)}
@keyframes mldIn{from{filter:blur(9px)}}
/* ═══════════════ МОБ. НИЖНЯЯ ПАНЕЛЬ ═══════════════ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:8px;padding:10px 14px;
padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--glass);border-top:1px solid var(--line);
backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transform:translateY(120%);transition:transform .5s var(--ease)}
.mbar.show{transform:none}
.mbar .btn{flex:1;height:52px;font-size:14px;padding:0 14px}
.mbar__call{color:var(--txt)}
.mbar__call svg{width:17px;height:17px}
/* ═══════════════ МОДАЛКА-КАПСУЛА «ЗАМЕР» ═══════════════ */
@property --sha{syntax:'';initial-value:0deg;inherits:false}
.sheet{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
padding:20px;visibility:hidden}
.sheet__bg{position:absolute;inset:0;background:rgba(6,7,10,.66);opacity:0;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
transition:opacity .45s var(--ease)}
.sheet.on{visibility:visible}
.sheet.on .sheet__bg{opacity:1}
.sheet__panel{position:relative;width:min(440px,100%);max-height:calc(100vh - 40px);
overflow:auto;scrollbar-width:none;border-radius:30px;
padding:26px 24px calc(24px + env(safe-area-inset-bottom));
background:linear-gradient(170deg,rgba(26,29,38,.94),rgba(14,16,22,.97));
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 60px 140px -40px rgba(0,0,0,.95);
opacity:0}
.sheet__panel::-webkit-scrollbar{display:none}
.sheet__panel::before{content:"";position:absolute;inset:-1px;border-radius:31px;padding:1.4px;
pointer-events:none;opacity:.9;
background:conic-gradient(from var(--sha),transparent 0 18%,var(--glow) 30%,
rgba(255,255,255,.9) 36%,var(--glow) 42%,transparent 56% 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:shSpin 9s linear infinite}
@keyframes shSpin{to{--sha:360deg}}
.sheet.rm .sheet__panel{opacity:1;transition:opacity .35s}
.sheet__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--glow);margin-bottom:10px}
.sheet__eyebrow::before{content:"";width:16px;height:1.5px;background:var(--glow)}
.sheet h3{font-family:'Unbounded';font-weight:400;font-size:clamp(22px,5vw,26px);margin-bottom:6px}
.sheet p{color:var(--txt-dim);font-size:14px;margin-bottom:18px}
.sheet__x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;
border-radius:50%;appearance:none;cursor:pointer;color:var(--txt);
border:1px solid var(--line);background:rgba(255,255,255,.06);
display:grid;place-items:center;transition:.3s}
.sheet__x:hover{background:rgba(255,255,255,.14)}
.sheet__x svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.fld{display:block;margin-bottom:12px}
.fld span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--txt-dim);margin:0 2px 7px}
.frm--sheet input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);
border-radius:16px;padding:15px 16px;color:var(--txt);
font:500 15px 'Onest',sans-serif;transition:border-color .3s,background .3s}
.frm--sheet input:focus{outline:0;border-color:var(--glow);background:rgba(255,255,255,.08)}
.fld--tel input{font-family:'Unbounded';font-weight:400;font-size:19px;
letter-spacing:.02em;padding:16px}
.sheet__when{margin:2px 0 16px}
.sheet__when small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--txt-dim);margin:0 2px 8px}
.sheet__when div{display:flex;gap:7px}
.sheet__when button{flex:1;appearance:none;cursor:pointer;
font:600 13px 'Onest',sans-serif;color:var(--txt-dim);
padding:11px 8px;border-radius:12px;border:1px solid var(--line);
background:rgba(255,255,255,.04);transition:.3s}
.sheet__when button.on{color:#0f1116;background:linear-gradient(135deg,#cfe0ff,#a08cff);
border-color:transparent}
.sheet__ok{text-align:center;padding:16px 4px 8px}
.sheet__okring{position:relative;display:grid;place-items:center;width:78px;height:78px;
margin:0 auto 16px;border-radius:50%;border:1.5px solid rgba(139,123,216,.5);
box-shadow:0 0 40px -8px var(--glow-soft)}
.sheet__okring svg{width:34px;height:34px;stroke:#cfe0ff;stroke-width:2.6;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.sheet__okring path{stroke-dasharray:1;stroke-dashoffset:1;
animation:shCheck .7s var(--ease) .15s forwards}
@keyframes shCheck{to{stroke-dashoffset:0}}
.sheet__ok h3{margin-bottom:8px}
.sheet__ok p{margin-bottom:14px}
.sheet__ok p b{color:#cfe0ff;font-family:'Unbounded';font-weight:500}
.sheet__oknum{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--txt-dim);padding:8px 13px;border-radius:999px;
border:1px dashed var(--line-2)}
@media(max-width:640px){
.sheet{align-items:flex-end;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
.sheet__panel{width:100%;border-radius:26px}
}
/* ─── ДЕСКТОП · ПЛАВАЮЩИЕ ДЕЙСТВИЯ (.fdock / .fbtn) ───
Две независимые кнопки-пилюли справа. Общего контейнера нет:
каждая живёт сама и раскрывается только под своим курсором.
Функции РАЗНЫЕ: замер — заявка с формой; вопрос — живой чат технолога.
Кнопка «наверх» осталась в правом нижнем углу (.toTop). */
.fdock{display:none}
@media(min-width:1024px){
.fdock{position:fixed;right:20px;top:50%;translate:0 -50%;z-index:95;
display:flex;flex-direction:column;align-items:flex-end;gap:12px;
pointer-events:none}
.fdock .fbtn{pointer-events:auto}
}
.fbtn{position:relative;display:flex;align-items:center;
height:58px;width:58px;padding:0;border-radius:29px;overflow:hidden;
cursor:pointer;white-space:nowrap;text-decoration:none;
opacity:0;translate:26px 0;
transition:width .5s var(--ease),background .3s,border-color .3s,
box-shadow .35s var(--ease),opacity .45s var(--ease),translate .45s var(--ease),
transform .25s var(--ease)}
.fdock.show .fbtn{opacity:1;translate:0 0}
.fdock.show .fbtn--ask{transition-delay:.07s}
.fbtn:hover{width:232px}
.fbtn:active{transform:scale(.96)}
.fbtn__ic{flex:none;width:58px;height:58px;display:grid;place-items:center}
.fbtn__ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.fbtn__lbl{flex:1;min-width:0;padding-right:22px;text-align:left;
font-size:15px;font-weight:600;letter-spacing:-.01em;
opacity:0;translate:-8px 0;
transition:opacity .3s var(--ease) .1s,translate .35s var(--ease) .1s}
.fbtn:hover .fbtn__lbl{opacity:1;translate:0 0}
/* 1 · Замер — светлая, ведущее действие */
.fbtn--measure{color:#0B0D10;border:1px solid transparent;
background:linear-gradient(135deg,#EDEFF4,#B7C0CD 55%,#E4E8EF);
box-shadow:0 16px 38px -14px rgba(200,215,240,.6)}
.fbtn--measure:hover{box-shadow:0 22px 48px -14px rgba(200,215,240,.8)}
/* 2 · Вопрос — стеклянная, второстепенная */
.fbtn--ask{color:var(--txt);
background:rgba(15,17,23,.72);border:1px solid var(--line-2);
backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
box-shadow:0 16px 38px -16px rgba(0,0,0,.85)}
.fbtn--ask:hover{background:rgba(28,32,42,.9);border-color:var(--glow)}
.fbtn--ask .fbtn__ic svg{stroke:var(--glow)}
/* живой индикатор: технолог на связи */
.fbtn__dot{position:absolute;top:15px;right:15px;width:9px;height:9px;border-radius:50%;
background:#3fbf8f;box-shadow:0 0 0 2px rgba(15,17,23,.9),0 0 10px rgba(63,191,143,.9);
animation:fbPulse 2.4s ease-in-out infinite}
@keyframes fbPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){
.fbtn,.fbtn__lbl{transition:none}
.fbtn__dot{animation:none}
}
/* ─── КНОПКА «НАВЕРХ» ─── *//* ─── КНОПКА «НАВЕРХ» ─── */
.toTop{position:fixed;right:18px;bottom:24px;z-index:96;width:50px;height:50px;
border-radius:50%;appearance:none;cursor:pointer;color:#fff;
border:1px solid rgba(255,255,255,.18);background:rgba(15,17,23,.72);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
box-shadow:0 16px 40px -14px rgba(0,0,0,.8);
display:grid;place-items:center;opacity:0;translate:0 14px;pointer-events:none;
transition:opacity .4s var(--ease),translate .4s var(--ease),border-color .3s}
.toTop svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none}
.toTop:hover{border-color:var(--glow)}
.toTop.show{opacity:1;translate:0 0;pointer-events:auto}
@media(max-width:640px){
.toTop{right:14px;bottom:calc(86px + env(safe-area-inset-bottom));width:46px;height:46px}}
/* ═══════════════ REVEAL ═══════════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ═══════════════ ПЛАНШЕТ / ДЕСКТОП ═══════════════ */
/* ══════════════════════════════════════════════════════════════════
БАЗА · МЕДИА-ПРАВИЛА · ПЛАНШЕТ И ДЕСКТОП
══════════════════════════════════════════════════════════════════ */
/* ═══════════════ ПЛАНШЕТ / ДЕСКТОП ═══════════════ */
@media(min-width:768px){
.hero__inner{padding: 0% 0% 0% 15%}
.wrap{padding:0 32px}
.nav__menu,.nav__phone{display:flex}
.nav__burger{display:none}
.nav__logo .lg-full{display:block}
.nav__logo .lg-mini{display:none}
.sec{padding:92px 0}
.sec--light{padding:96px 0}
.pg{padding:96px 0 0}
.pg-scene{height:min(88vh,820px)}
.pg-lb__meta{padding:34px 40px 38px}
.pg-btn{width:52px;height:52px}
.pg-btn svg{width:22px;height:22px}
.techcard{grid-template-columns:1.1fr .9fr}
.tech__vis{min-height:480px}
.tech__info{padding:38px 40px}
.lead{padding:56px 48px}
.mbar{display:none}
}
/* HERO · мобильная посадка контента над кнопками */
@media(max-width:767px){
.hero__adv{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
/* ══════════════════════════════════════════════════════════════════
15 · SEO-ГИД · редакционный лонгрид со шкалой чтения · .sx
══════════════════════════════════════════════════════════════════ */
.sx__wrap{width:min(1180px,94vw);margin:0 auto}
.sx__meta{display:flex;align-items:center;gap:14px;margin-top:14px;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mute)}
.sx__meta i{font-style:normal;width:26px;height:1px;background:var(--line-2)}
.sx__grid{margin-top:34px}
@media(min-width:1020px){.sx__grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:76px;align-items:start}}
/* ── пульт чтения: липкое оглавление (десктоп) ── */
.sx__toc{display:none}
@media(min-width:1020px){.sx__toc{display:block;position:sticky;top:96px}}
.sx__tocHead{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:16px}
.sx__tocList{position:relative;display:flex;flex-direction:column;padding-left:20px}
.sx__tocList::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line)}
.sx__bar{position:absolute;left:0;top:8px;width:1px;height:0;background:linear-gradient(180deg,rgba(210,225,245,.9),rgba(210,225,245,.25));box-shadow:0 0 14px var(--glow-soft)}
.sx__tl{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 10px;border:0;background:none;cursor:pointer;text-align:left;color:var(--txt-mute);font-family:'Onest','Inter',system-ui,sans-serif;font-size:15px;line-height:1.3;transition:color .35s var(--ease)}
.sx__tl i{font-style:normal;font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--txt-mute);transition:color .35s var(--ease)}
.sx__tl:hover{color:var(--txt-dim)}
.sx__tl.on{color:var(--txt)}
.sx__tl.on i{color:var(--glow)}
/* ── мобильное оглавление: горизонтальная лента якорей ── */
.sx__tocM{display:flex;gap:10px;overflow-x:auto;margin:0 0 6px;padding:2px 2px 12px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 86%,transparent);mask:linear-gradient(90deg,#000 86%,transparent)}
.sx__tocM::-webkit-scrollbar{display:none}
.sx__cm{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 17px;border:1px solid var(--line-2);border-radius:999px;background:none;color:var(--txt-dim);font-family:'Inter',system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.sx__cm i{font-style:normal;font-weight:600;color:var(--glow)}
@media(min-width:1020px){.sx__tocM{display:none}}
/* ── статья ── */
.sx__art{max-width:660px}
.sx__intro p{font-family:'Onest','Inter',system-ui,sans-serif;font-size:clamp(16px,4vw,18px);line-height:1.72;color:var(--txt-dim);margin:0 0 18px;max-width:62ch}
.sx__intro b{color:var(--txt);font-weight:600}
.sx__ch{margin-top:38px;padding-top:38px;border-top:1px solid var(--line)}
.sx__k{display:flex;align-items:center;gap:12px;font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--txt-mute)}
.sx__k b{color:var(--glow);font-weight:600}
.sx__chTtl{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin:14px 0 18px}
.sx__no{font-family:'Unbounded',system-ui,sans-serif;font-weight:300;font-size:clamp(46px,10vw,66px);line-height:.9;letter-spacing:-.03em;color:rgba(210,225,245,.07);-webkit-text-stroke:1px rgba(210,225,245,.30)}
.sx__ch h3{flex:1;min-width:200px;font-family:'Unbounded',system-ui,sans-serif;font-weight:400;font-size:clamp(21px,4.9vw,27px);letter-spacing:-.01em;line-height:1.28;color:var(--txt);margin:0}
.sx__ch p{font-family:'Onest','Inter',system-ui,sans-serif;font-size:clamp(15px,3.8vw,16.5px);line-height:1.78;color:var(--txt-dim);margin:0 0 16px;max-width:62ch}
.sx__ch p:last-child{margin-bottom:0}
.sx__ch b{color:var(--txt);font-weight:600}
.sx a.sx__ln{color:#DFE9F7;text-decoration:none;border-bottom:1px solid rgba(210,225,245,.35);transition:color .3s var(--ease),border-color .3s var(--ease)}
.sx a.sx__ln:hover{color:#fff;border-color:rgba(210,225,245,.85)}
.qa .pill__a{display:none}
.rvx__seo{display:none}
.hq__seo{display:none}
/* ══════════════════════════════════════════════════════════════════
АВАРИЙНАЯ ВИДИМОСТЬ КОНТЕНТА
───────────────────────────────────────────────────────────────
Весь контент страницы лежит в разметке, но по умолчанию скрыт
(opacity:0) и раскрывается классами из JS. Если JS отключён
(html.no-js) или упал (html.js-failed) — контент ОБЯЗАН остаться
видимым: футер, контакты, телефоны и тексты не должны исчезать
ни при каких обстоятельствах.
══════════════════════════════════════════════════════════════════ */
.no-js .reveal,.js-failed .reveal,
.no-js .hq .hq-rv,.js-failed .hq .hq-rv,
.no-js .ezs [data-a],.js-failed .ezs [data-a],
.no-js .wx .pre,.js-failed .wx .pre,
.no-js [class*="reveal"],.js-failed [class*="reveal"]{
opacity:1!important;filter:none!important;transform:none!important;visibility:visible!important;clip-path:none!important}
.no-js .qa .pill__a,.js-failed .qa .pill__a{display:block}
.no-js .rvx__seo,.js-failed .rvx__seo,
.no-js .hq__seo,.js-failed .hq__seo{display:block}
.no-js .hq__ft,.js-failed .hq__ft{opacity:1!important;transform:none!important}