/*
 * ad.css — рекламная главная leo-wend.ru (01.11.2026).
 *
 * 01.11 вечер: блок «Как проходит игра» владелец убрал («этого не надо») — историю рассказывает облёт.
 * Владелец: «сайт выглядит плохо, очень плохо — пройдись по дизайнерским сайтам и сделай красивый рекламный сайт;
 * фотки, которые сейчас, не устраивают — есть фото с белым фоном, убери фон, замени на прозрачный и сделай красоту;
 * посмотри топ-сайты, которые считаются крутыми по анимациям, по дизайну, по продаже».
 * Образцы: сайт года Awwwards 2025 (landonorris.com — огромная кинетическая типографика, вырезанный объект, один
 * акцент, текст проявляется по прокрутке) и продуктовые страницы Apple (закреплённая сцена, камера «наезжает» на
 * части изделия, выбор цвета).
 * 01.11.2026 днём владелец: «сайт только в белой теме, без переключения; фона не хватает — склада сзади, обыграть со
 * складом, типа круто»; «не пиши «ростом с человека» — глупо»; «фото платы 4.0 надо, а не 3.0»; снимки терминала
 * карт и купюроприёмника — «убери, некрасиво». Поэтому всё светлое, а склад (static/images/site/real/bg/warehouse.webp
 * — нарисованный светлый склад с синими стеллажами) — фон первого экрана, сцены игры, ряда цветов, карточек и
 * последнего экрана: аппараты стоят на его полу. При наезде камеры в сцене игры склад приближается вместе с аппаратом.
 * Чего нет намеренно (владелец считает признаками «сайта из нейросети»): градиентного текста, свечений, стекла, сеток,
 * «таблеток»-значков, моно-номеров «01», фиолетового. Цвет — только бренд: синий, белый, тёмно-синий.
 *
 * Аппараты — настоящие фото с вырезанным фоном (deploy/site_ad_20261101: cut.py, assets.py), static/images/site/ad/.
 * Движение — static/js/ad.js. При «уменьшить движение» в системе всё сразу на месте и не двигается.
 */

.ad-home {
    --a-navy: #0a1f4d;
    --a-ink-2: #2b4272;
    --a-blue: #1f63ff;
    --a-blue-dk: #1552e6;
    --a-mute: #5d6f97;
    --a-line: #d5e1f8;
    --a-paper: #ffffff;
    --a-tint: #eef4ff;
    --a-wh: url('../images/site/real/bg/warehouse.webp');
    --a-wh-s: url('../images/site/real/bg/warehouse-1280.webp');
    --a-wh-card: url('../images/site/real/bg/card.webp');
    --a-display: 'LW Sans', 'Ubuntu', 'Arial Narrow', sans-serif;
    --a-ease: cubic-bezier(.16, 1, .3, 1);
    --a-ease-io: cubic-bezier(.65, 0, .35, 1);
    --a-pad: clamp(96px, 12vw, 180px);
    background: #fff;
}
.ad-home main { overflow-x: clip; }
.ad-home .site-pic { display: none; }

/* склад: общий слой фона блока (картинка + медленное «дыхание»), белая дымка там, где текст */
.ad-wh { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #e7ebf0; }
.ad-wh i {
    position: absolute; inset: -5%; background: var(--a-wh) 50% 45% / cover no-repeat;
    animation: ad-breathe 40s ease-in-out infinite alternate; will-change: transform;
}
@keyframes ad-breathe { from { transform: scale(1.02) translate3d(-1%, 0, 0); } to { transform: scale(1.09) translate3d(1.2%, .8%, 0); } }

/* ------------------------------------------------------------------ общие куски */
.ad-kicker {
    display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px;
    font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--a-blue);
}
.ad-kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; }

.ad-h2 {
    font-family: var(--a-display); font-weight: 800; font-stretch: 75%;
    font-size: clamp(44px, 7.4vw, 124px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase;
    color: var(--a-navy); margin: 0;
}
.ad-h2 em { font-style: normal; color: var(--a-blue); }
.ad-sub { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--a-mute); max-width: 560px; }

.ad-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 60px; padding: 0 30px; border-radius: 999px; border: 1.5px solid transparent;
    font: 700 16.5px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .3s, color .3s, border-color .3s;
    will-change: transform;
}
.ad-btn svg { width: 18px; height: 18px; transition: transform .45s var(--a-ease); }
.ad-btn:hover svg { transform: translateX(4px); }
.ad-btn--blue { background: var(--a-blue); color: #fff; }
.ad-btn--blue:hover { background: var(--a-navy); color: #fff; }
.ad-btn--line { border-color: rgba(10, 31, 77, .22); color: var(--a-navy); background: rgba(255, 255, 255, .7); }
.ad-btn--line:hover { border-color: var(--a-blue); background: var(--a-blue); color: #fff; }
.ad-btn:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 3px; }

.ad-link {
    display: inline-flex; align-items: center; gap: 10px; color: var(--a-blue); font-weight: 700;
    text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.ad-link svg { width: 16px; height: 16px; transition: transform .45s var(--a-ease); }
.ad-link:hover svg { transform: translateX(4px); }

.ad-light { background: #fff; color: var(--a-navy); }
.ad-tint { background: var(--a-tint); color: var(--a-navy); }
.ad-sec { position: relative; padding: var(--a-pad) 0; }

/* ------------------------------------------------------------------ появление (ad.js ставит .is-in) */
.js .ad-home [data-a] { transition: opacity 1s var(--a-ease), transform 1.2s var(--a-ease); transition-delay: var(--d, 0s); }
.js .ad-home [data-a="up"]:not(.is-in) { opacity: 0; transform: translateY(48px); }
.js .ad-home [data-a="fade"]:not(.is-in) { opacity: 0; }
.js .ad-home [data-a="rise"]:not(.is-in) { opacity: 0; transform: translateY(18%) scale(.96); }
/* шторка — на картинке внутри: clip-path на самом блоке Chrome считает «не видно», и IntersectionObserver молчит */
.js .ad-home [data-a="clip"] > img { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--a-ease); transition-delay: var(--d, 0s); }
.js .ad-home [data-a="clip"]:not(.is-in) > img { clip-path: inset(100% 0 0 0); }
/* строки заголовков выезжают снизу из-под маски */
.ad-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ad-line > span { display: inline-block; transition: transform 1.3s var(--a-ease); transition-delay: var(--d, 0s); }
.js .ad-home [data-lines]:not(.is-in) .ad-line > span { transform: translateY(105%); }

/* ------------------------------------------------------------------ 1. облёт аппарата (закреплённая сцена на складе)
 * Владелец, 01.11 днём: «при листании красиво осмотрен силомер по кругу, потом открывается дверь — показывается
 * электроника». ad.js по прокрутке меняет прозрачность кадров (плавный поворот), наезжает камерой в дверной проём,
 * показывает внутренность и плату. Начало — первый экран: заголовок слева, аппарат справа. */
.ad-tour { position: relative; height: calc(8 * 72vh + 100vh); color: var(--a-navy); }
.ad-tour__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.ad-tour .ad-wh i { background-position: 50% 42%; }
/* белая дымка слева под текстом и снизу — без неё синие стеллажи спорят с заголовком */
.ad-tour__sticky::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(248, 250, 252, .94) 0%, rgba(248, 250, 252, .78) 34%, rgba(248, 250, 252, 0) 58%),
        linear-gradient(0deg, rgba(248, 250, 252, .85) 0%, rgba(248, 250, 252, 0) 20%);
}
/* аппарат прижат к правому краю экрана (центр — 76vw); край аппарата слева — --mach-l. Заголовок и текст первого
   экрана считают свою ширину от него (01.11 вечер, владелец: «текст чуть закрывает силомер»). */
.ad-tour {
    --m: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    --mach-l: calc(76vw - .37 * (97vh - 92px));
}
.ad-tour__stage {
    position: absolute; z-index: 1; top: 92px; bottom: 3vh; width: 44vw; right: 2vw;
    transition: top .9s var(--a-ease), bottom .9s var(--a-ease);
}
.ad-tour__cam { position: absolute; inset: 0; will-change: transform; }
.ad-tour__f {
    position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none;
    transform: translateX(-50%); opacity: 0; will-change: opacity, transform;
}
.ad-tour__f.is-on { opacity: 1; }
.ad-tour__floor {
    position: absolute; left: 50%; bottom: -1%; width: 46%; height: 7%; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(20, 28, 40, .36), rgba(20, 28, 40, 0)); z-index: -1;
}
.ad-tour__panel {
    position: absolute; left: 50%; top: 50%; margin: 0; border-radius: 22px; overflow: hidden; z-index: 2;
    box-shadow: 0 40px 80px -36px rgba(10, 31, 77, .55); opacity: 0; pointer-events: none;
    transform: translate(var(--bx, -50%), -50%) scale(var(--sc, 1.08)); will-change: opacity, transform;
}
.ad-tour__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-tour__inside { height: 86%; aspect-ratio: 3 / 4; }
/* плата шире сцены аппарата: центр левее, чтобы целиком влезала в экран справа (сцена прижата к правому краю) */
.ad-tour__board { width: 50vw; --bx: -62%; aspect-ratio: 3 / 2; overflow: visible; background: #0b0f14; box-shadow: 0 24px 50px -30px rgba(10, 31, 77, .45); }
.ad-tour__board img { border-radius: 22px; }
/* подписи разъёмов: точка и ярлык, появляются по очереди */
.ad-pin {
    position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px;
    transform: translate(-7px, -50%); opacity: 0; transition: opacity .45s ease, transform .6s var(--a-ease);
    transition-delay: calc(var(--d) * 90ms); pointer-events: none;
}
.ad-pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.ad-pin i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--a-blue); border: 3px solid #fff; }
.ad-pin b { background: #fff; color: var(--a-navy); font-size: 13.5px; font-weight: 700; line-height: 1.2; padding: 7px 11px; border-radius: 9px; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.ad-tour__board.pins-on .ad-pin { opacity: 1; }

.ad-tour__ui { position: relative; z-index: 3; height: 100%; display: grid; align-items: center; pointer-events: none; }
.ad-tour__ui > * { grid-area: 1 / 1; pointer-events: auto; }
.ad-tour__intro { max-width: calc(var(--mach-l) - var(--m) - 30px); padding-top: 70px; will-change: opacity, transform; }
.ad-tour__intro .ad-h1 { font-size: clamp(52px, min(8.4vw, calc((var(--mach-l) - var(--m) - 30px) / 4.8)), 150px); }
.ad-tour__intro .ad-lead { max-width: min(520px, 100%); }
.ad-h1 {
    font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--a-navy);
    font-size: clamp(64px, 8.4vw, 150px); line-height: .86; letter-spacing: -.012em; margin: 0 0 30px;
}
.ad-h1 .ad-blue { color: var(--a-blue); }
.ad-lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--a-ink-2); max-width: 520px; margin: 0 0 36px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ad-hero__facts { display: flex; gap: clamp(22px, 3vw, 48px); margin: 52px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(10, 31, 77, .14); }
.ad-hero__facts div { display: grid; gap: 4px; }
.ad-hero__facts dt { font-family: var(--a-display); font-weight: 800; font-stretch: 75%; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; color: var(--a-navy); }
.ad-hero__facts dd { margin: 0; font-size: 14px; color: var(--a-mute); }
.ad-tour__caps { list-style: none; margin: 0; padding: 0; position: relative; width: min(440px, 100%); align-self: center; height: 0; }
.ad-tour__caps li {
    position: absolute; left: 0; right: 0; top: 0; transform: translateY(-40%); opacity: 0; pointer-events: none;
    background: #fff; border-radius: 22px; padding: 32px 34px 30px; box-shadow: 0 30px 70px -40px rgba(10, 31, 77, .5);
    transition: opacity .5s var(--a-ease), transform .8s var(--a-ease);
}
.ad-tour__caps li.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.ad-tour__caps .ad-kicker { margin-bottom: 14px; }
.ad-tour__caps h2 { font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(32px, 3.2vw, 48px); line-height: .95; color: var(--a-navy); margin: 0 0 14px; }
.ad-tour__caps p { font-size: 17px; line-height: 1.6; color: var(--a-ink-2); margin: 0; }
.ad-tour__caps .ad-link { margin-top: 18px; }
.ad-tour__bar { position: absolute; left: 0; bottom: 34px; width: 200px; height: 3px; border-radius: 3px; background: rgba(10, 31, 77, .12); overflow: hidden; align-self: end; transition: opacity .4s; }
.ad-tour__sticky.is-end .ad-tour__bar { opacity: 0; }
.ad-tour__bar i { display: block; height: 100%; width: 0; background: var(--a-blue); }

.ad-scroll {
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
    display: grid; justify-items: center; gap: 10px; color: var(--a-mute); text-decoration: none;
    font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: opacity .4s;
}
.ad-scroll i { position: relative; width: 1.5px; height: 34px; background: rgba(10, 31, 77, .15); overflow: hidden; }
.ad-scroll i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--a-blue); animation: ad-drop 2s var(--a-ease-io) infinite; }
@keyframes ad-drop { to { top: 100%; } }
.ad-tour__sticky.is-touring .ad-scroll { opacity: 0; pointer-events: none; }
.ad-run { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.ad-run span { font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; }

/* первый показ: аппарат поднимается */
.js .ad-tour:not(.is-ready) .ad-tour__cam { opacity: 0; transform: translateY(50px) scale(.97); }
.ad-tour .ad-tour__cam { transition: opacity 1.2s var(--a-ease) .2s; }
.ad-tour.is-ready .ad-tour__cam { transition: opacity 1.2s var(--a-ease) .2s, transform 1.4s var(--a-ease) .2s; }
.ad-tour.is-moving .ad-tour__cam { transition: none; }

/* ------------------------------------------------------------------ 2. лента */
/* 01.11 вечер, владелец: «это место выглядит не очень» — большая ярко-синяя полоса (на его экране — фиолетовая)
   после облёта. Теперь белая лента с тонкими линиями: тёмно-синие слова, синие звёзды. */
.ad-band { position: relative; z-index: 2; background: #fff; color: var(--a-navy); overflow: hidden; padding: 22px 0; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); }
.ad-band .ad-run span {
    font-size: clamp(30px, 3.4vw, 54px); line-height: 1; color: var(--a-navy); -webkit-text-stroke: 0; padding-right: 0;
}
.ad-band .ad-run span i { font-style: normal; display: inline-block; margin: 0 .5em; color: var(--a-blue); font-size: .7em; transform: translateY(-.12em); }

/* ------------------------------------------------------------------ 5. цвета: четыре аппарата на полу склада */
.ad-colors__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; margin-bottom: 56px; }
.ad-colors__head .ad-sub { justify-self: end; }
.ad-colors__hall { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; padding: clamp(40px, 6vw, 90px) clamp(16px, 3vw, 48px) 0; }
.ad-colors__hall .ad-wh i { background-position: 50% 30%; }
.ad-colors__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 32px); align-items: end; }
.ad-colors__item { position: relative; margin: 0; display: grid; justify-items: center; gap: 18px; padding-bottom: 26px; }
.ad-colors__item::before {   /* тень на полу */
    content: ''; position: absolute; left: 50%; bottom: 52px; width: 80%; height: 26px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(20, 28, 40, .35), rgba(20, 28, 40, 0)); z-index: -1;
}
.ad-colors__item img { width: auto; height: min(58vh, 560px); max-width: 100%; object-fit: contain; transition: transform .8s var(--a-ease), opacity .5s; }
.ad-colors__row:hover .ad-colors__item img { opacity: .55; }
.ad-colors__row .ad-colors__item:hover img { opacity: 1; transform: translateY(-14px); }
.ad-colors__item figcaption { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--a-navy); background: #fff; border-radius: 999px; padding: 8px 16px 8px 10px; box-shadow: 0 8px 20px -12px rgba(10, 31, 77, .4); }
.ad-colors__item figcaption i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.ad-colors__foot { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; margin-top: 40px; }
.ad-colors__foot p { color: var(--a-mute); max-width: 680px; }

/* ------------------------------------------------------------------ 6. модели: подложка — тот же склад */
.ad-models__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 56px; }
.ad-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ad-model {
    position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    border-radius: 20px; background: #fff; border: 1px solid var(--a-line); text-decoration: none; color: var(--a-navy);
    transition: border-color .4s, box-shadow .4s;
}
.ad-model:hover { border-color: transparent; box-shadow: 0 30px 60px -34px rgba(10, 31, 77, .45); }
/* картинка — абсолютно внутри своей области: процентная высота в строке сетки «auto» не срабатывает */
.ad-model__pic { position: relative; display: block; height: 380px; overflow: hidden; background: #e7ebf0 var(--a-wh-card) 50% 60% / cover no-repeat; }
.ad-model__pic::after {   /* тень на полу */
    content: ''; position: absolute; left: 50%; bottom: 4px; width: 70%; height: 22px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(20, 28, 40, .32), rgba(20, 28, 40, 0)); z-index: 0;
}
.ad-model__pic img {
    position: absolute; left: 4%; right: 4%; top: 26px; bottom: 6px; width: 92%; height: calc(100% - 32px); z-index: 1;
    object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transition: transform .9s var(--a-ease);
}
.ad-model:hover .ad-model__pic img { transform: translateY(-6px) scale(1.04); }
.ad-model__body { display: grid; gap: 10px; padding: 24px 26px 26px; border-top: 1px solid var(--a-line); }
.ad-model__name { font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 34px; line-height: 1; }
.ad-model__kind { font-size: 14.5px; color: var(--a-mute); }
.ad-model__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.ad-model__price { font-weight: 800; font-size: 20px; color: var(--a-blue); }
.ad-model__go {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--a-line);
    color: var(--a-navy); transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--a-ease);
}
.ad-model__go svg { width: 18px; height: 18px; }
.ad-model:hover .ad-model__go { background: var(--a-blue); border-color: var(--a-blue); color: #fff; transform: rotate(-45deg); }
.ad-model__spec { font-size: 13.5px; color: var(--a-mute); }

/* ------------------------------------------------------------------ 7. габариты */
.ad-size__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.ad-size__stage { position: relative; isolation: isolate; height: min(88vh, 860px); border-radius: 24px; overflow: hidden; }
.ad-size__stage .ad-wh i { background-position: 35% 40%; animation-duration: 55s; }
.ad-size__stage picture img { position: absolute; left: 46%; bottom: 3%; height: 90%; width: auto; max-width: none; transform: translateX(-50%); opacity: 0; transition: opacity .6s var(--a-ease); }
.ad-size__stage picture img.is-on { opacity: 1; }
/* размерная линия — рисуется по прокрутке (--p от ad.js) */
.ad-dim { position: absolute; right: 7%; top: 9.5%; bottom: 3.6%; width: 70px; color: var(--a-blue); }
.ad-dim::before, .ad-dim::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.ad-dim::before { top: 0; }
.ad-dim::after { bottom: 0; }
.ad-dim i { position: absolute; left: 10px; top: 0; width: 2px; height: 100%; background: currentColor; transform-origin: 50% 100%; transform: scaleY(var(--p, 1)); }
.ad-dim b {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; rotate: 180deg;
    font-family: var(--a-display); font-weight: 800; font-stretch: 75%; font-size: 30px; color: var(--a-navy); white-space: nowrap;
    background: #fff; padding: 8px 4px; border-radius: 6px;
}
.ad-size__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 48px 0 40px; border-top: 1px solid var(--a-line); }
.ad-size__specs div { padding: 26px 0; border-bottom: 1px solid var(--a-line); display: grid; gap: 6px; }
.ad-size__specs dt { font-family: var(--a-display); font-weight: 800; font-stretch: 75%; font-size: clamp(44px, 4.6vw, 72px); line-height: .95; color: var(--a-navy); }
.ad-size__specs dt small { font-size: .42em; margin-left: 6px; color: var(--a-blue); }
.ad-size__specs dd { margin: 0; font-size: 14.5px; color: var(--a-mute); }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-tabs button {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 12px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--a-line); background: #fff; color: var(--a-ink-2); font-weight: 700; font-size: 14.5px;
    transition: border-color .3s, color .3s, background-color .3s;
}
.ad-tabs button i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.ad-tabs button[aria-selected="true"] { border-color: var(--a-navy); color: var(--a-navy); }

/* ------------------------------------------------------------------ 8. внутри: плата, дверь, CRM */
.ad-inside__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-top: 70px; }
.ad-tile { position: relative; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--a-line); display: grid; }
.ad-tile__txt { position: relative; z-index: 2; padding: 30px 32px; display: grid; gap: 12px; align-content: start; justify-items: start; }
.ad-tile__txt h3 { font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; color: var(--a-navy); }
.ad-tile__txt p { color: var(--a-ink-2); font-size: 16px; line-height: 1.55; max-width: 440px; }
.ad-tile--board { grid-column: span 7; min-height: 560px; grid-template-rows: auto 1fr; }
.ad-tile__photo { position: relative; margin: 0 22px 22px; border-radius: 14px; overflow: hidden; align-self: stretch; min-height: 300px; }
.ad-tile__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--a-ease); }
.ad-tile--board:hover .ad-tile__photo img { transform: scale(1.04); }
.ad-tile--door { grid-column: span 5; min-height: 560px; grid-template-rows: auto 1fr; background: #e7ebf0 var(--a-wh-card) 50% 70% / cover no-repeat; }
.ad-tile--door .ad-tile__txt { background: #fff; margin: 18px 18px 0; border-radius: 14px; padding: 24px 26px; }
.ad-tile--door img { align-self: end; justify-self: center; height: 360px; width: auto; margin-bottom: 10px; }
.ad-tile--crm { grid-column: span 12; min-height: 0; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; background: var(--a-tint); border-color: transparent; }
.ad-tile--crm .ad-tile__txt { padding: 48px; gap: 18px; }
.ad-crm-shot { position: relative; padding: 40px 40px 0 0; align-self: end; }
.ad-crm-shot .ad-crm-pc { width: 100%; border-radius: 12px 12px 0 0; display: block; box-shadow: 0 -10px 50px -24px rgba(10, 31, 77, .45); }
.ad-crm-shot .ad-crm-phone { position: absolute; left: -6%; bottom: 0; width: 26%; border-radius: 20px 20px 0 0; border: 5px solid #0a1f4d; border-bottom: 0; }
.ad-checks { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.ad-checks li { position: relative; padding-left: 30px; color: var(--a-ink-2); }
.ad-checks li::before { content: ''; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 2px solid var(--a-blue); border-bottom: 2px solid var(--a-blue); transform: rotate(-45deg); }

/* ------------------------------------------------------------------ 9. производство */
.ad-prod__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-top: 64px; }
.ad-prod__pic { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--a-tint); }
.ad-prod__pic img { width: 100%; height: 118%; object-fit: cover; display: block; transform: translateY(calc(var(--p, .5) * -15%)); will-change: transform; }
.ad-prod__pic--a { grid-column: span 8; aspect-ratio: 16 / 10; }
.ad-prod__pic--b { grid-column: span 4; }
.ad-prod__links { grid-column: span 12; display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 22px 0 0; }
.ad-prod__list { grid-column: span 12; list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--a-line); }
.ad-prod__list li { padding: 28px 28px 0 0; display: grid; gap: 8px; }
.ad-prod__list b { font-size: 19px; }
.ad-prod__list span { color: var(--a-mute); font-size: 15.5px; line-height: 1.55; }

/* ------------------------------------------------------------------ 10. путь покупки */
.ad-buy { list-style: none; margin: 64px 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ad-buy::before { content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--a-line); }
.ad-buy::after { content: ''; position: absolute; left: 0; top: 23px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--a-blue); }
.ad-buy li { position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; }
.ad-buy li::before {
    content: ''; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--a-line);
    transition: background-color .4s, border-color .4s;
}
.ad-buy li.is-done::before { background: var(--a-blue); border-color: var(--a-blue); }
.ad-buy b { font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 30px; line-height: 1; margin-top: 12px; }
.ad-buy span { color: var(--a-mute); line-height: 1.55; font-size: 16px; }

/* ------------------------------------------------------------------ 11. последний экран: призыв и ряд аппаратов на складе */
.ad-final { position: relative; isolation: isolate; overflow: hidden; color: var(--a-navy); padding: clamp(100px, 10vw, 150px) 0 0; }
.ad-final .ad-wh i { background-position: 50% 40%; }
.ad-final::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(248, 250, 252, .95) 0%, rgba(248, 250, 252, .82) 38%, rgba(248, 250, 252, 0) 62%);
}
.ad-final__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px 64px; align-items: end; }
.ad-final__big {
    font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--a-navy);
    font-size: clamp(60px, 8vw, 132px); line-height: .86; letter-spacing: -.012em; margin: 0; white-space: nowrap;
}
.ad-final__big .ad-blue { color: var(--a-blue); }
.ad-final__lead { font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.6; color: var(--a-ink-2); max-width: 470px; margin: 0 0 22px; }
.ad-final__phone { display: inline-block; font-family: var(--a-display); font-weight: 800; font-stretch: 75%; font-size: clamp(38px, 4vw, 62px); color: var(--a-navy); text-decoration: none; line-height: 1; }
.ad-final__phone:hover { color: var(--a-blue); }
.ad-final__meta { display: grid; gap: 4px; margin: 12px 0 26px; color: var(--a-ink-2); font-size: 15.5px; }
.ad-final__meta a { color: var(--a-navy); }
/* четыре аппарата в ряд на полу склада, целиком */
.ad-final__row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 2vw, 40px);
    max-width: 1500px; margin: clamp(48px, 6vw, 90px) auto 0; padding: 0 var(--gutter) clamp(28px, 3vw, 44px);
}
.ad-final__m { position: relative; margin: 0; height: min(52vh, 520px); }
.ad-final__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform .8s var(--a-ease); }
.ad-final__m:hover img { transform: translateY(-10px); }
.ad-final__m::after {   /* тень на полу */
    content: ''; position: absolute; left: 4%; right: 4%; bottom: -10px; height: 26px; z-index: -1;
    background: radial-gradient(closest-side, rgba(20, 28, 40, .34), rgba(20, 28, 40, 0));
}

/* ------------------------------------------------------------------ вопросы (01.11 вечер: «блок выглядит плохо» —
   огромный заголовок рвал слова, вопросы в коробках). Слева — заголовок по размеру колонки и кнопки, справа — вопросы
   строками с линиями, знак «плюс» превращается в «минус». */
.ad-faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ad-faq__side { position: sticky; top: 110px; display: grid; gap: 22px; justify-items: start; }
.ad-faq__side .ad-kicker { margin: 0; }
.ad-faq__title {
    font-family: var(--a-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--a-navy);
    font-size: clamp(40px, 4.4vw, 72px); line-height: .92; letter-spacing: -.01em; margin: 0;
}
.ad-faq__title em { font-style: normal; color: var(--a-blue); }
.ad-faq__side .ad-sub { max-width: 440px; }
.ad-home .ad-faq__list { max-width: none; gap: 0; border-top: 1px solid var(--a-line); }
.ad-home .ad-faq__list .faq__item { border: 0; border-bottom: 1px solid var(--a-line); border-radius: 0; background: transparent; }
.ad-home .ad-faq__list .faq__item summary { padding: 26px 64px 26px 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; color: var(--a-navy); transition: color .25s; }
.ad-home .ad-faq__list .faq__item summary:hover { color: var(--a-blue); }
.ad-home .ad-faq__list .faq__item summary::after {
    content: '+'; right: 0; top: 50%; width: 40px; height: 40px; border: 1.5px solid var(--a-line); border-radius: 50%;
    display: grid; place-items: center; font: 400 24px/1 var(--sans); color: var(--a-navy);
    transform: translateY(-50%); transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--a-ease);
}
.ad-home .ad-faq__list .faq__item[open] summary::after { content: '−'; background: var(--a-blue); border-color: var(--a-blue); color: #fff; transform: translateY(-50%) rotate(180deg); }
.ad-home .ad-faq__list .faq__item p { padding: 0 64px 28px 0; font-size: 16.5px; line-height: 1.65; color: var(--a-ink-2); max-width: 720px; }
.ad-home #proverka { padding: 0 0 var(--a-pad); }

/* ------------------------------------------------------------------ планшет */
@media (max-width: 1100px) {
    .ad-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-tile--board, .ad-tile--door { grid-column: span 12; min-height: 0; }
    .ad-tile__photo { min-height: 0; aspect-ratio: 3 / 2; }
    .ad-tile--door { grid-template-columns: 1fr auto; grid-template-rows: none; align-items: end; }
    .ad-tile--door .ad-tile__txt { align-self: start; margin: 18px; }
    .ad-tile--door img { height: 320px; margin: 18px 30px 0 0; }
    .ad-tile--crm { grid-template-columns: 1fr; }
    .ad-crm-shot { padding: 0 24px 0 60px; }
    .ad-prod__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-faq__grid { grid-template-columns: 1fr; gap: 32px; }
    .ad-faq__side { position: static; }
}

/* ------------------------------------------------------------------ телефон: всё одной колонкой, только вниз */
@media (max-width: 760px) {
    .ad-home { --a-wh: var(--a-wh-s); --a-pad: 88px; }

    .ad-colors__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
    .ad-colors__head .ad-sub { justify-self: start; }
    .ad-colors__hall { border-radius: 18px; padding-top: 30px; }
    .ad-colors__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
    .ad-colors__item img { height: 270px; }
    .ad-colors__row:hover .ad-colors__item img { opacity: 1; }
    .ad-colors__foot .ad-btn { width: 100%; }

    .ad-models__head { margin-bottom: 32px; }
    .ad-models { grid-template-columns: 1fr; gap: 14px; }
    .ad-model { grid-template-columns: 42% 1fr; grid-template-rows: none; }
    .ad-model__pic { height: 230px; }
    .ad-model__pic img { top: 14px; height: calc(100% - 20px); }
    .ad-model__body { border-top: 0; border-left: 1px solid var(--a-line); padding: 18px 16px; align-content: center; }
    .ad-model__name { font-size: 26px; }
    .ad-model__price { font-size: 17px; }
    .ad-model__go { width: 40px; height: 40px; }

    .ad-size__grid { grid-template-columns: 1fr; gap: 24px; }
    .ad-size__stage { height: 64vh; height: 64svh; order: 2; border-radius: 18px; }
    .ad-size__specs { margin: 30px 0 26px; }
    .ad-size__specs dt { font-size: 44px; }
    .ad-dim b { font-size: 22px; }

    .ad-inside__grid { margin-top: 40px; gap: 14px; }
    .ad-tile__txt { padding: 24px 22px; }
    .ad-tile__photo { margin: 0 14px 14px; }
    .ad-tile--door { grid-template-columns: 1fr; }
    .ad-tile--door img { height: 300px; margin: 10px 0 0; justify-self: center; }
    .ad-tile--crm .ad-tile__txt { padding: 26px 22px; }
    .ad-crm-shot { padding: 0 0 0 40px; }
    .ad-tile--crm .ad-btn { width: 100%; }

    .ad-prod__grid { margin-top: 40px; gap: 12px; }
    .ad-prod__pic--a, .ad-prod__pic--b { grid-column: span 12; aspect-ratio: 4 / 3; }
    .ad-prod__list { grid-template-columns: 1fr; }
    .ad-prod__list li { padding: 20px 0 0; }

    .ad-buy { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding-left: 64px; }
    .ad-buy::before, .ad-buy::after { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .ad-buy::after { height: calc(var(--p, 0) * 100%); bottom: auto; }
    .ad-buy li::before { position: absolute; left: -64px; top: -6px; }
    .ad-buy b { margin-top: 0; font-size: 26px; }

    .ad-faq__title { font-size: 40px; }
    .ad-faq__side .ad-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .ad-faq__side .ad-btn { width: 100%; }
    .ad-home .ad-faq__list .faq__item summary { padding: 20px 52px 20px 0; font-size: 16.5px; }
    .ad-home .ad-faq__list .faq__item summary::after { width: 34px; height: 34px; font-size: 20px; }
    .ad-home .ad-faq__list .faq__item p { padding: 0 0 22px; font-size: 15px; }
    .ad-band { padding: 14px 0; }
    .ad-band .ad-run span { font-size: 26px; }
    .ad-final { padding-top: 88px; }
    .ad-final__top { grid-template-columns: 1fr; gap: 26px; }
    .ad-final .ad-actions { display: grid; grid-template-columns: 1fr; }
    .ad-final .ad-btn { width: 100%; }
    .ad-final__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; margin-top: 44px; }
    .ad-final__m { height: 260px; }
}


/* облёт на телефоне и на планшете в портрете: заголовок сверху, аппарат под ним, подпись шага — карточкой снизу */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
    .ad-tour { height: calc(8 * 68vh + 100vh); }
    .ad-tour__sticky::before { background: linear-gradient(180deg, rgba(248, 250, 252, .93) 0%, rgba(248, 250, 252, .7) 30%, rgba(248, 250, 252, 0) 48%), linear-gradient(0deg, rgba(248, 250, 252, .8) 0%, rgba(248, 250, 252, 0) 18%); }
    .ad-tour .ad-wh i { background-position: 62% 40%; }
    .ad-tour__stage { left: 0; right: 0; width: auto; top: 47%; bottom: 2%; }
    .ad-tour__sticky.is-touring .ad-tour__stage { top: 72px; bottom: 30%; }
    .ad-tour__floor { width: 60%; }
    .ad-tour__inside { height: 92%; }
    .ad-tour__board { width: calc(100vw - 24px); --bx: -50%; }
    .ad-tour__board img { border-radius: 14px; }
    .ad-pin { gap: 5px; }
    .ad-pin i { width: 11px; height: 11px; border-width: 2px; }
    .ad-pin b { font-size: 10.5px; padding: 4px 7px; border-radius: 6px; }
    .ad-tour__ui { align-items: start; }
    .ad-tour__intro { padding-top: 84px; max-width: none; }
    .ad-tour__intro .ad-h1 { font-size: clamp(52px, 15vw, 96px); }
    .ad-tour__intro .ad-lead { max-width: 34ch; }
    .ad-tour .ad-kicker { margin-bottom: 12px; }
    .ad-h1 { font-size: clamp(52px, 15vw, 80px); margin-bottom: 14px; }
    .ad-lead { font-size: 15px; line-height: 1.5; margin-bottom: 16px; max-width: 34ch; }
    .ad-tour__intro .ad-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; }
    .ad-tour__intro .ad-btn { min-height: 50px; padding: 0 12px; font-size: 14.5px; }
    .ad-tour__intro .ad-btn svg { display: none; }
    .ad-hero__facts { display: none; }
    .ad-tour__caps { align-self: end; width: 100%; height: auto; min-height: 0; margin-bottom: 16px; }
    .ad-tour__caps li { top: auto; bottom: 0; transform: translateY(20px); padding: 18px 20px; border-radius: 18px; }
    .ad-tour__caps li.is-on { transform: none; }
    .ad-tour__caps .ad-kicker { margin-bottom: 8px; font-size: 11.5px; }
    .ad-tour__caps h2 { font-size: 27px; margin-bottom: 8px; }
    .ad-tour__caps p { font-size: 14.5px; line-height: 1.5; }
    .ad-tour__caps .ad-link { margin-top: 10px; font-size: 14.5px; }
    .ad-tour__bar { display: none; }
    .ad-scroll { display: none; }
}

/* ------------------------------------------------------------------ «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    .ad-home *, .ad-home *::before, .ad-home *::after { transition-duration: .01ms !important; animation: none !important; }
    .js .ad-home [data-a]:not(.is-in), .js .ad-home [data-lines]:not(.is-in) .ad-line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}