/* Start:/local/templates/podtapochki/css/main.css?1790538562105000*/
/* ============================================================
   ПодТапочки — дизайн-система v2
   Композиция и анимации — по референсу architector-s.ru,
   glass-стилистика — windowfix.ge / goryavatara.capitaltour.ru.
   Шрифт — Manrope (фирменный, по логотипу клиента).
   ============================================================ */

:root {
    --color-accent: #d97706;
    --color-accent-hover: #b45309;
    --color-on-accent: #ffffff;
    --color-bg: #faf5f2;
    --color-fg: #1c1917;
    --color-fg-soft: #57534e;
    /* Приглушённый текст: подписи, крошка текущей страницы, служебные
       маркеры. Переменная использовалась в восьми местах раньше, чем
       была объявлена, — и все они молча наследовали цвет. */
    --color-fg-muted: #a8a29e;
    --color-muted: #f4ece6;
    --color-border: #ebe5df;
    --color-error: #dc2626;

    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-bg-strong: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-shadow: 0 8px 32px rgba(28, 25, 23, 0.1);
    --glass-dark-bg: rgba(24, 20, 17, 0.42);
    --glass-dark-border: rgba(255, 255, 255, 0.22);
    --glass-blur: 18px;

    --font: 'Manrope', system-ui, -apple-system, sans-serif;

    --radius-lg: 28px;
    --radius: 18px;
    --radius-sm: 12px;
    --container: 1280px;

    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 36px;
    --sp-5: 56px;
    --sp-6: 68px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-fg);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 {
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-3);
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.3rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-3); }

.section { padding: var(--sp-6) 0; }
.section--muted { background: var(--color-muted); }
.section__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--sp-2);
}
.section__kicker::before { content: ''; width: 26px; height: 2px; background: var(--color-accent); }
.section__lead { max-width: 660px; color: var(--color-fg-soft); margin: -8px 0 var(--sp-4); font-size: 1.05rem; }

/* ---------- Иконки ---------- */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon--lg { width: 32px; height: 32px; }
.icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(217, 119, 6, .16), rgba(217, 119, 6, .05));
    color: var(--color-accent);
    margin-bottom: var(--sp-2);
}

/* ---------- Glass ---------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
}
.glass--strong { background: var(--glass-bg-strong); }
.glass-dark {
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-dark-border);
    border-radius: var(--radius);
    color: #fff;
}

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 14px 28px;
    border: 0;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn .icon { width: 20px; height: 20px; }
.btn--accent {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 10px 24px rgba(217, 119, 6, .35);
}
.btn--accent:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--color-fg); border: 1px solid var(--color-border); }
.btn--ghost:hover { border-color: var(--color-fg-soft); transform: translateY(-2px); }
.btn--white {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn--white:hover { background: rgba(255, 255, 255, .24); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .92rem; border-radius: 12px; }
.btn:focus-visible { outline: 3px solid rgba(217, 119, 6, .5); outline-offset: 2px; }

/* ---------- Шапка: плавающий glass-бар ---------- */
.header {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 0 var(--sp-3);
    pointer-events: none;
}
.header__bar {
    pointer-events: auto;
    max-width: calc(var(--container) - var(--sp-3) * 2);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 64px;
    padding: 8px 12px 8px 18px;
    border-radius: 20px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(28, 25, 23, .12);
}
.header__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.header__logo img { width: 34px; height: 34px; }
.header__logo b { color: var(--color-accent); font-weight: 800; }
.header__nav { display: flex; gap: clamp(12px, 1.6vw, 24px); margin: 0 auto; }
.header__nav a {
    text-decoration: none;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-fg-soft);
    transition: color .2s;
}
.header__nav a:hover { color: var(--color-accent); }
.header__contacts { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.header__phone { font-weight: 800; text-decoration: none; white-space: nowrap; font-size: .98rem; }
.header__burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; }
.header__burger span { display: block; height: 2px; border-radius: 2px; background: var(--color-fg); margin: 5px 0; }

main { padding-top: 86px; }

/* ---------- Hero: фото-рамка, белый текст ---------- */
.hero-frame { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-3); }
.hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: min(86vh, 760px);
    display: flex;
    align-items: center;
    padding: 72px 0 56px;
    background-size: cover;
    background-position: center;
}
.hero .container { padding: 0 var(--sp-4); }
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(15, 12, 10, .74) 0%, rgba(15, 12, 10, .5) 45%, rgba(15, 12, 10, .12) 100%);
}
.hero .container { position: relative; width: 100%; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--sp-5); align-items: center; }
.hero__content { color: #fff; animation: hero-in .7s ease both; }
/* Чип над H1 (гео у H-01/H-02, фраза клиента у H-04) скрыт на всех страницах
   по решению оператора 27.09.2026; разметка в блоках осталась — вернуть одной строкой. */
.hero__topchip { display: none; }
.hero h1 { color: #fff; margin-bottom: var(--sp-2); }
.hero h1 span { color: #ffb356; }
.hero__subtitle { font-size: 1.12rem; color: rgba(255, 255, 255, .85); margin: 0 0 var(--sp-3); max-width: 560px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hero__note { font-size: .85rem; color: rgba(255, 255, 255, .7); margin-top: 12px; max-width: 480px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--sp-3); font-size: .9rem; font-weight: 700; color: rgba(255, 255, 255, .92); }
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .icon { width: 18px; height: 18px; color: #ffb356; }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

/* Чипы */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-dark-border);
    color: #fff;
}
.chip .icon { width: 17px; height: 17px; color: #ffb356; }
.chip--light { background: var(--glass-bg-strong); border-color: var(--glass-border); color: var(--color-fg); }
.chip--light .icon { color: var(--color-accent); }

/* Карточка расчёта в hero */
.hero__card {
    padding: var(--sp-3);
    border-radius: var(--radius-lg);
    animation: hero-in .7s .15s ease both;
}
.hero__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    margin-bottom: var(--sp-2);
}
.hero__card-head b { color: #ffb356; }
.hero__card-rows { display: grid; gap: 12px; margin-bottom: var(--sp-3); }
.hero__card-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px dashed rgba(255,255,255,.18); padding-bottom: 10px; }
.hero__card-row span { color: rgba(255, 255, 255, .72); font-size: .9rem; }
.hero__card-row b { font-size: 1.05rem; white-space: nowrap; }
.hero__card .btn { width: 100%; }
.hero__card-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: .82rem; color: rgba(255,255,255,.72); margin-top: 10px; }
.hero__card-note .icon { width: 16px; height: 16px; color: #ffb356; }

/* ---------- Карточки ---------- */
.cards { display: grid; gap: var(--sp-3); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { padding: var(--sp-3); }
.card__title { margin-bottom: 8px; }
.card__text { color: var(--color-fg-soft); font-size: .95rem; margin: 0; }

/* Карточка с фото сверху */
.media-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.media-card__img { aspect-ratio: 4/3; overflow: hidden; }
.media-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.media-card:hover .media-card__img img { transform: scale(1.06); }
.media-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.media-card__link { color: var(--color-accent); font-weight: 800; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.media-card__link .icon { width: 18px; height: 18px; transition: transform .2s; }
.media-card:hover .media-card__link .icon { transform: translateX(4px); }

/* Карточка на фото (кейсы, JTBD) */
.photo-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.photo-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,25,23,.18); }
.photo-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,10,0) 35%, rgba(15,12,10,.55) 100%); }
.photo-card__panel { position: relative; margin: var(--sp-2); padding: var(--sp-2) var(--sp-3); width: calc(100% - var(--sp-4)); }
.photo-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--color-fg-soft); margin: 6px 0; }
.photo-card__meta b { color: var(--color-fg); }

/* Цифры-факты */
.stat { text-align: center; padding: var(--sp-3); }
.stat__num { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-accent); line-height: 1.1; }
.stat__text { color: var(--color-fg-soft); font-size: .92rem; margin-top: 6px; }

/* ---------- Галерея-мозаика ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--sp-2); }
.mosaic a { border-radius: var(--radius); overflow: hidden; display: block; position: relative; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mosaic a:hover img { transform: scale(1.06); }
.mosaic a:nth-child(1) { grid-column: span 2; grid-row: span 2; }

/* ---------- Этапы ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); counter-reset: step; }
.step { padding: var(--sp-3); position: relative; }
.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--sp-1);
}

/* ---------- Акция ---------- */
.promo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    padding: var(--sp-5) var(--sp-4);
    color: #fff;
}
.promo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(15,12,10,.8), rgba(15,12,10,.35)); }
.promo__inner { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.promo h2 { color: #fff; margin-bottom: 8px; }
.promo p { color: rgba(255,255,255,.82); margin: 0; max-width: 560px; }

/* ---------- Формы ---------- */
.lead-form { display: grid; gap: var(--sp-2); }
.lead-form__row { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr auto; align-items: end; }
.field label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.field input, .field textarea {
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    color: var(--color-fg);
}
.field input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; }
.field--error input { border-color: var(--color-error); }
.field__error { color: var(--color-error); font-size: .82rem; margin-top: 4px; min-height: 1em; }
.lead-form__agree { font-size: .8rem; color: var(--color-fg-soft); }
.lead-form__agree a { color: inherit; }
.form-success { text-align: center; padding: var(--sp-4); }

.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- Модалка ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2);
    background: rgba(20, 16, 13, .5);
}
.modal.is-open { display: flex; }
.modal__panel { width: 100%; max-width: 440px; padding: var(--sp-4); position: relative; animation: hero-in .25s ease both; }
.modal__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--color-fg-soft); }
.modal__title { margin-bottom: var(--sp-1); }
.modal__hint { color: var(--color-fg-soft); font-size: .9rem; margin: 0 0 var(--sp-3); }

/* ---------- Квиз ---------- */
.quiz-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--sp-3); align-items: stretch; }
.quiz { padding: var(--sp-4); }
.quiz__progress { height: 6px; border-radius: 3px; background: var(--color-border); margin-bottom: var(--sp-3); overflow: hidden; }
.quiz__progress-bar { height: 100%; width: 0; background: var(--color-accent); transition: width .3s ease; }
.quiz__step { display: none; }
.quiz__step.is-active { display: block; animation: hero-in .3s ease both; }
.quiz__question { font-size: 1.25rem; font-weight: 800; margin-bottom: var(--sp-3); }
.quiz__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.quiz__option {
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    text-align: left;
    font-weight: 700;
    transition: border-color .15s, background .15s, transform .15s;
}
.quiz__option:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.quiz__option.is-selected { border-color: var(--color-accent); background: rgba(217, 119, 6, .07); }
.quiz__nav { display: flex; justify-content: space-between; gap: var(--sp-2); }
.quiz-aside { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.quiz-aside__img { flex: 1; min-height: 220px; }
.quiz-aside__img img { width: 100%; height: 100%; object-fit: cover; }
.quiz-aside__body { padding: var(--sp-3); }
.quiz-aside__body b { display: block; margin-bottom: 4px; }
.quiz-aside__body span { font-size: .88rem; color: var(--color-fg-soft); }

/* ---------- Аккордеон (FAQ) ---------- */
.accordion { display: grid; gap: var(--sp-2); }
.accordion__item { overflow: hidden; }
.accordion__btn {
    width: 100%;
    color: var(--color-fg);
    -webkit-text-fill-color: currentColor;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: none;
    border: 0;
    font-weight: 800;
    font-size: 1rem;
    text-align: left;
    min-height: 56px;
}
.accordion__btn::after { content: '+'; font-size: 1.5rem; color: var(--color-accent); transition: transform .2s; flex: 0 0 auto; }
.accordion__item.is-open .accordion__btn::after { transform: rotate(45deg); }
.accordion__body {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 var(--sp-3);
    color: var(--color-fg-soft);
    transition: grid-template-rows .4s ease, padding-bottom .35s ease;
}
.accordion__body > * { min-height: 0; overflow: hidden; display: block; }
.accordion__item.is-open .accordion__body { grid-template-rows: 1fr; padding-bottom: var(--sp-3); }

/* ---------- Отзывы ---------- */
.review { padding: var(--sp-3); display: flex; flex-direction: column; }
.review__stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: 10px; }
.review__text { color: var(--color-fg-soft); font-size: .95rem; margin: 0; }
.review__author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--sp-2); font-weight: 800; }
.review__source { font-size: .8rem; color: var(--color-fg-soft); font-weight: 400; }

/* ---------- Сплит-блоки (основатель, мебелировка) ---------- */
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-4); align-items: center; padding: 0; overflow: hidden; }
.split--rev { grid-template-columns: 1.4fr 1fr; }
.split__img { height: 100%; min-height: 320px; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: var(--sp-4); }

/* ---------- Карта ---------- */
.map-block { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 440px; }
.map-block iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.map-block__card { position: absolute; top: var(--sp-3); left: var(--sp-3); max-width: 380px; padding: var(--sp-3); z-index: 2; }

/* ---------- Sticky bar (mobile) ---------- */
.sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: none;
    gap: var(--sp-1);
    /* 57 px вместо 75 (оператор 27.09: больше рабочего места): кнопки 44 px —
       минимальная цель для пальца, поля 6 px */
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    border-radius: 0;
    border-top: 1px solid var(--color-border);
}
.sticky-bar .btn { flex: 1; min-height: 44px; padding: 0 16px; font-size: .95rem; border-radius: 12px; }
.sticky-bar__icon {
    flex: 0 0 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-fg);
}
.sticky-bar__icon .icon { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.footer { background: #1c1917; color: #d6d1cc; padding: var(--sp-5) 0 var(--sp-3); font-size: .92rem; margin-top: var(--sp-2); }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.footer__logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1.15rem; font-weight: 800; color: #fff; text-decoration: none;
    letter-spacing: -0.02em; margin-bottom: var(--sp-2);
}
.footer__logo img { width: 34px; height: 34px; filter: invert(1); }
.footer__logo b { color: #ffb356; font-weight: 800; }
/* Подпись под названием — как в шапке */
.footer__logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.footer__logo-text small { font-size: .68rem; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.62); margin-top: 2px; }
.footer__title { font-weight: 800; color: #fff; margin-bottom: var(--sp-2); }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; }

/* ---------- Анимации появления ---------- */
html.has-js .reveal { opacity: 0; transform: translateY(38px); transition: opacity .65s cubic-bezier(.22,.8,.36,1), transform .65s cubic-bezier(.22,.8,.36,1); transition-delay: var(--d, 0ms); }
html.has-js .reveal.is-visible { opacity: 1; transform: none; }
html.has-js .reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity .55s ease, transform .55s ease; transition-delay: var(--d, 0ms); }
html.has-js .reveal-zoom.is-visible { opacity: 1; transform: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1080px) {
    .cards--4 { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    /* minmax(0,1fr), не 1fr: `1fr` = minmax(auto,1fr), и колонка растягивается
       под min-content содержимого — на 390 px hero резался справа (луп-стенд 2026-09-06) */
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
    .hero__content { min-width: 0; }
    .hero__card { max-width: 460px; }
    .header__nav { display: none; }
    .header__burger { display: block; }
    .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}

@media (max-width: 768px) {
    :root { --sp-6: 46px; --sp-5: 40px; }
    main { padding-top: 78px; }
    .header { top: 8px; padding: 0 10px; }
    .header__bar { min-height: 58px; border-radius: 16px; padding: 6px 8px 6px 14px; }
    .header__phone { display: none; }
    .header__callback { display: none; }
    .hero-frame { padding: 0 10px; }
    .header { padding: 0 10px; }
    .header__bar { max-width: none; }
    .hero .container { padding: 0 var(--sp-3); }
    .hero { padding: 40px 0; min-height: auto; border-radius: 22px; }
    /* значения карточки «что фиксируем договором» на узком экране переносятся,
       иначе длинное значение вылезает за карточку (стенд 390, 2026-09-06) */
    .hero__card-row b { white-space: normal; text-align: right; min-width: 0; }
    /* на телефоне кнопка hero идёт сразу после подзаголовка, маркеры — под ней:
       иначе с длинным H1 кнопка уезжает за первый экран (стенд 390: 900–960 px) */
    .hero__content { display: flex; flex-direction: column; }
    .hero__cta { order: 1; }
    .hero__chips { order: 2; margin: var(--sp-3) 0 0; }
    .hero__note { order: 3; }
    .hero__trust { order: 4; }
    .hero::before { background: linear-gradient(180deg, rgba(15,12,10,.72), rgba(15,12,10,.45)); }
    .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .lead-form__row { grid-template-columns: 1fr; }
    .quiz__options { grid-template-columns: 1fr; }
    .quiz-wrap { grid-template-columns: 1fr; }
    .quiz-aside { flex-direction: row; align-items: center; }
    .quiz-aside__img { min-height: 0; width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; overflow: hidden; margin: var(--sp-2); }
    .split, .split--rev { grid-template-columns: 1fr; }
    .split__img { min-height: 220px; }
    .split__body { padding: var(--sp-3); }
    .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 8px; }
    .promo { padding: var(--sp-4) var(--sp-3); }
    .map-block__card { position: static; max-width: none; }
    .map-block { display: flex; flex-direction: column; }
    .map-block iframe { position: static; min-height: 320px; }
    .sticky-bar { display: flex; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
    .footer__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ---------- v2.1: экраны по референсу ---------- */

/* Квиз: варианты с картинками */
.quiz__options--img { grid-template-columns: repeat(4, 1fr); }
.quiz__option--img { padding: 0; overflow: hidden; text-align: center; }
.quiz__option--img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.quiz__option--img span { display: block; padding: 10px 8px; font-size: .9rem; }

/* Реплика эксперта */
.quiz-aside__say { font-size: .88rem; color: var(--color-fg-soft); border-top: 1px dashed var(--color-border); margin-top: 10px; padding-top: 10px; }

/* Спойлер (список работ) */
.spoiler { margin-top: var(--sp-3); }

/* Команда */
.team-card { padding: 0; overflow: hidden; text-align: center; }
.team-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.team-card__role { font-weight: 800; }
.team-card__exp { font-size: .85rem; color: var(--color-fg-soft); }

/* Макро-качество */
.macro-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.macro-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,10,0) 40%, rgba(15,12,10,.6) 100%); }
.macro-card b { position: relative; color: #fff; padding: var(--sp-2) var(--sp-3); font-size: 1.05rem; }

/* Оплата по этапам */
/* Нумерованная лента шагов. `.pay-steps` — оплата (P-02), `.flow` — тот же
   визуальный ряд для любого другого порядка действий (P-08). */
.pay-steps, .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); counter-reset: pay; }
.pay-step, .flow__item { padding: var(--sp-2) var(--sp-3); position: relative; }
.pay-step::before, .flow__item::before { counter-increment: pay; content: counter(pay); position: absolute; top: -14px; left: var(--sp-3); width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pay-step b, .flow__item b { display: block; margin: 14px 0 4px; }
.pay-step span, .flow__item span { font-size: .88rem; color: var(--color-fg-soft); }

/* Мессенджер-кнопки */
.msg-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.msg-btns .btn { min-height: 48px; }

/* Форма экскурсии: select */
.field select { width: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font: inherit; color: var(--color-fg); }

@media (max-width: 1080px) {
    .quiz__options--img { grid-template-columns: repeat(2, 1fr); }
    .pay-steps, .flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .quiz__options--img { grid-template-columns: repeat(2, 1fr); }
    .pay-steps, .flow { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* Водяное слово за заголовком секции (как на референсе) */
.section { position: relative; overflow: hidden; }
/* Секция с боковой колонкой: overflow: hidden у родителя ломает position: sticky
   (липкий элемент цепляется за ближайший скролл-контейнер, а он не скроллится).
   Водяного слова здесь нет, обрезать нечего. */
.section--flow { overflow: visible; }
.section[data-wm]::before {
    content: attr(data-wm);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(28, 25, 23, 0.045);
    white-space: nowrap;
    pointer-events: none;
}

/* Сетка кадров видеоотчёта */
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.report-grid figure { margin: 0; position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 3px solid #fff; box-shadow: var(--glass-shadow); }
.report-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.report-grid figcaption { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.report-grid figcaption::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }

/* Q&A: вопрос клиента → ответ основателя */
.qa { display: grid; gap: var(--sp-2); max-width: 860px; }
.qa__q { padding: var(--sp-2) var(--sp-3); font-weight: 700; display: flex; gap: 12px; align-items: center; }
.qa__q .icon-badge { margin: 0; flex: 0 0 44px; width: 44px; height: 44px; }
.qa__a { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-2); padding: var(--sp-3); }
.qa__a img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.qa__a-name { font-size: .82rem; color: var(--color-fg-soft); margin-top: 6px; }
@media (max-width: 768px) {
    .report-grid { grid-template-columns: repeat(2, 1fr); }
    .qa__a { grid-template-columns: 1fr; }
    .qa__a img { width: 72px; height: 72px; }
    .section[data-wm]::before { display: none; }
}

/* ---------- v3: проработка блоков ---------- */

/* Фоновые текстуры секций */
.section--paper { background: linear-gradient(rgba(250,245,242,.93), rgba(250,245,242,.93)), url('/upload/stock/blueprint.jpg') center/cover fixed; }
.section--photo { background: linear-gradient(rgba(244,236,230,.94), rgba(244,236,230,.94)), url('/upload/stock/interior-1.jpg') center/cover fixed; }

/* Галерея: плотная укладка без дыр */
.mosaic { grid-auto-flow: dense; }
.mosaic a { cursor: zoom-in; }

/* Лайтбокс */
.lightbox {
    position: fixed; inset: 0; z-index: 120; display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 12, 10, .88); padding: 48px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.lightbox__close { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; opacity: .8; }
.lightbox__close:hover { opacity: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__caption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: .95rem; font-weight: 700; }
[data-lightbox] { cursor: zoom-in; }

/* Истории ремонта (лента вертикальных карточек) */
.stories { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--sp-2); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.story { position: relative; aspect-ratio: 9/15; border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-2); cursor: zoom-in; }
.story::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,10,.35), rgba(15,12,10,0) 30%, rgba(15,12,10,0) 60%, rgba(15,12,10,.6)); }
.story__ring { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--color-accent); padding: 2px; background: rgba(255,255,255,.15); }
.story__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.story b { position: relative; color: #fff; font-size: .95rem; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* Сравнение до/после */
.ba { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/8; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.4); pointer-events: none; }
.ba__handle::after { content: '⇄'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__label { position: absolute; top: 16px; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #fff; background: rgba(15,12,10,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ba__label--before { left: 16px; }
.ba__label--after { right: 16px; }

/* Планшет с кадрами отчётов */
.device { background: #1c1917; border-radius: 26px; padding: 18px; box-shadow: 0 24px 60px rgba(28,25,23,.3); }
.device__screen { background: #0d0b0a; border-radius: 14px; padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.device__screen figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; }
.device__screen img,
.device__screen video { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.device__screen video { cursor: pointer; }
.device__screen figcaption { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; justify-content: space-between; font-size: .62rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.device__screen figcaption i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.device__screen figcaption i::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
    animation: rec-blink 1.1s steps(1) infinite;
}
@keyframes rec-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(239,68,68,.9); } 50% { opacity: .1; box-shadow: none; } }
.device__bar { display: flex; justify-content: space-between; align-items: center; color: #a8a29e; font-size: .78rem; font-weight: 700; padding: 12px 6px 0; }

/* Отзывы: аватар-инициалы и фото */
.review__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent), #b45309); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 44px; }
.review__photos { display: flex; gap: 8px; margin-top: var(--sp-2); }
.review__photos img { width: 74px; height: 74px; border-radius: 10px; object-fit: cover; }

/* Карта объектов + список */
.objects { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-3); align-items: stretch; }
.objects__map { border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; position: relative; }
.objects__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.objects__list { display: grid; gap: var(--sp-2); align-content: start; }
.object-row { display: flex; gap: 14px; align-items: center; padding: var(--sp-2) var(--sp-3); }
.object-row img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.object-row b { display: block; }
.object-row span { font-size: .85rem; color: var(--color-fg-soft); }
.object-row .icon { color: var(--color-accent); margin-left: auto; }

@media (max-width: 1080px) {
    .device__screen { grid-template-columns: repeat(2, 1fr); }
    .objects { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .stories { grid-auto-columns: 62%; }
    .ba { aspect-ratio: 4/3; }
    .lightbox { padding: 12px; }
    .lightbox__nav { width: 44px; height: 44px; }
    .section--paper, .section--photo { background-attachment: scroll; }
}

/* ---------- v4: дизайнерские элементы ---------- */

/* Плавающие размытые сферы */
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; z-index: 0; }
.orb--amber { background: radial-gradient(circle, rgba(217,119,6,.55), transparent 70%); }
.orb--warm { background: radial-gradient(circle, rgba(255,179,86,.5), transparent 70%); }
.orb--float { animation: orb-float 9s ease-in-out infinite; }
.orb--float2 { animation: orb-float 12s 2s ease-in-out infinite reverse; }
@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(24px, -30px) scale(1.08); }
}

/* Параллакс-слой фона hero */
.hero__bg { position: absolute; inset: -20% 0 -8%; background-size: cover; background-position: center; will-change: transform; z-index: 0; }
.hero::before { z-index: 1; }
.hero .container { z-index: 2; }

/* Индикатор скролла */
.hero__scroll {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    z-index: 2; color: rgba(255,255,255,.75); display: flex; flex-direction: column;
    align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; text-decoration: none;
}
.hero__scroll .icon { width: 18px; height: 18px; transform: rotate(90deg); animation: scroll-hint 1.6s infinite; }
@keyframes scroll-hint { 50% { transform: rotate(90deg) translateX(6px); } }

/* Счётчики внахлёст на hero */
.stats-overlap { margin-top: -46px; position: relative; z-index: 3; }
.stats-overlap .stat { background: var(--glass-bg-strong); }

/* Сертификат в акции */
.cert {
    position: relative; background: #fffdf9; color: var(--color-fg);
    border-radius: 14px; padding: 26px 30px; max-width: 320px;
    box-shadow: 0 18px 44px rgba(0,0,0,.3); transform: rotate(-3deg);
    transition: transform .3s ease; border: 1px solid #eadfce;
}
.cert:hover { transform: rotate(0); }
.cert::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid rgba(217,119,6,.45); border-radius: 10px; pointer-events: none; }
.cert__title { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-fg-soft); text-align: center; }
.cert__sum { font-size: 1.7rem; font-weight: 800; text-align: center; margin: 8px 0 2px; }
.cert__sub { font-size: .8rem; color: var(--color-fg-soft); text-align: center; }
.cert__seal {
    position: absolute; right: -18px; bottom: -18px; width: 84px; height: 84px;
    animation: seal-spin 14s linear infinite;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* Вращающийся круглый бейдж (гарантия) */
.spin-badge { position: relative; width: 130px; height: 130px; flex: 0 0 130px; }
.spin-badge svg { width: 100%; height: 100%; animation: seal-spin 16s linear infinite; }
.spin-badge__center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; font-weight: 800; line-height: 1.05;
}
.spin-badge__center b { font-size: 1.9rem; color: var(--color-accent); }
.spin-badge__center span { font-size: .72rem; color: var(--color-fg-soft); }

/* Дорожка между этапами */
.steps { position: relative; }
.steps .step { z-index: 1; transition: transform .3s ease; }
.steps .step:hover { transform: translateY(-6px); }
@media (min-width: 1081px) {
    .steps .step:nth-child(2), .steps .step:nth-child(5) { top: 18px; }
}

/* Bento-сетка преимуществ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.bento .card:nth-child(1) { grid-column: span 2; background: linear-gradient(135deg, rgba(217,119,6,.14), rgba(255,255,255,.6)); }
.bento .card:nth-child(4) { grid-column: span 2; }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .card:nth-child(n) { grid-column: auto; } }
@media (max-width: 768px) { .bento { grid-template-columns: 1fr; } }

/* Чат-пузыри вокруг планшета */
.device-wrap { position: relative; }
.chat-bubble {
    position: absolute; z-index: 2; padding: 12px 18px; font-size: .88rem; font-weight: 700;
    max-width: 240px; animation: orb-float 7s ease-in-out infinite;
}
.chat-bubble--1 { top: -24px; right: 4%; }
.chat-bubble--2 { bottom: 10%; left: -14px; animation-delay: 1.6s; }
.chat-bubble .icon { width: 16px; height: 16px; color: var(--color-accent); vertical-align: -3px; }
@media (max-width: 1080px) { .chat-bubble { display: none; } }

/* Подпись основателя */
.signature { font-family: 'Caveat', cursive; font-size: 2rem; color: var(--color-accent); transform: rotate(-2deg); display: inline-block; margin-top: 12px; }

/* Групповое фото команды */
.team-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-3); }
.team-hero img { width: 100%; max-height: 420px; object-fit: cover; }
.team-hero__panel { position: absolute; left: var(--sp-3); bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); max-width: 460px; }

/* Тапочки-акцент в заголовке */
.h-slipper { display: inline-flex; align-items: center; gap: 10px; }
.h-slipper img { width: 40px; height: 40px; transform: rotate(-12deg); }

/* ---------- v4.1: цикл 2 ---------- */

/* Бегущая строка */
.marquee { overflow: hidden; padding: 18px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: #fff; }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 28s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.05rem; white-space: nowrap; color: var(--color-fg-soft); }
.marquee .icon { width: 20px; height: 20px; color: var(--color-accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Кен-бёрнс на hero-фоне */
.hero__bg { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { scale: 1; } to { scale: 1.08; } }

/* Бейдж срока на фото кейса */
.media-card__img { position: relative; }
.media-card__badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 7px 14px; border-radius: 999px; font-size: .78rem; font-weight: 800;
    background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--color-fg); display: inline-flex; gap: 6px; align-items: center;
}
.media-card__badge .icon { width: 14px; height: 14px; color: var(--color-accent); }

/* Водяной знак футера */
.footer { position: relative; overflow: hidden; }
.footer::after {
    content: 'ПодТапочки'; position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
    font-size: clamp(5rem, 14vw, 12rem); font-weight: 800; letter-spacing: -0.04em;
    color: rgba(255,255,255,.035); white-space: nowrap; pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }

@media (max-width: 768px) {
    .orb { display: none; }
    .hero__bg { animation: none; }
}

/* ---------- v5: живость и визуал ---------- */

/* SVG-звёзды в отзывах */
.icon--fill { fill: currentColor; stroke: none; }
.review__stars { display: inline-flex; gap: 3px; }
.review__stars .icon { width: 18px; height: 18px; color: var(--color-accent); filter: drop-shadow(0 1px 2px rgba(217,119,6,.35)); }

/* Пульс главного CTA */
.btn--pulse { animation: btn-glow 2.6s ease-in-out infinite; }
@keyframes btn-glow {
    0%, 100% { box-shadow: 0 10px 24px rgba(217,119,6,.35); }
    50% { box-shadow: 0 10px 34px rgba(217,119,6,.65), 0 0 0 8px rgba(217,119,6,.12); }
}

/* Онлайн-точка */
.online { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800; color: #16a34a; }
.dot-online { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; position: relative; }
.dot-online::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(34,197,94,.5); animation: dot-ping 1.6s ease-out infinite; }
@keyframes dot-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* Иконки покачиваются при наведении на карточку */
.card:hover .icon-badge, .media-card:hover .icon-badge { transform: rotate(-8deg) scale(1.08); }
.icon-badge { transition: transform .25s ease; }

/* Квиз: иконки в текстовых опциях, галочка на выбранном */
.quiz__option { position: relative; display: flex; align-items: center; gap: 10px; }
.quiz__option .icon { width: 20px; height: 20px; color: var(--color-accent); }
.quiz__option.is-selected::after {
    content: '✓'; position: absolute; top: -9px; right: -9px; width: 26px; height: 26px;
    border-radius: 50%; background: var(--color-accent); color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
    box-shadow: 0 4px 10px rgba(217,119,6,.4);
}
.quiz__option--img { flex-direction: column; align-items: stretch; gap: 0; }
.quiz__progress-bar { background: linear-gradient(90deg, #ffb356, var(--color-accent)); }

/* Палитры-свотчи в дизайн-квизе */
.swatch { display: flex; gap: 6px; margin-bottom: 10px; }
.swatch i { flex: 1; height: 44px; border-radius: 8px; }

/* Истории: стрелки на ПК */
.stories-wrap { position: relative; }
.stories-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--color-border);
    background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow); font-size: 1.2rem; display: none;
    align-items: center; justify-content: center;
}
.stories-nav--prev { left: -14px; }
.stories-nav--next { right: -14px; }
@media (min-width: 1081px) {
    .stories-nav { display: flex; }
    .stories { overflow-x: hidden; scroll-behavior: smooth; }
}

/* Несколько сравнений в сетке */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ba-grid .ba { aspect-ratio: 16/10; }
.ba-grid .ba__label { font-size: .72rem; padding: 5px 10px; }
.ba-grid .ba__handle::after { width: 40px; height: 40px; font-size: 1rem; }
@media (max-width: 768px) { .ba-grid { grid-template-columns: 1fr; } }

/* Иконки в оплате по этапам */
.pay-step .icon-badge, .flow__item .icon-badge { width: 44px; height: 44px; margin: 10px 0 0; }

/* Акция: мигающий бейдж лимита */
.blink-badge { animation: blink-soft 2s ease-in-out infinite; }
@keyframes blink-soft { 50% { opacity: .55; } }

/* Полиш, проход 2 */
.quiz-wrap { align-items: start; }
.object-row { transition: transform .2s ease, box-shadow .2s ease; }
.object-row:hover { transform: translateX(6px); box-shadow: 0 12px 30px rgba(28,25,23,.12); }
.marquee:hover .marquee__track { animation-play-state: paused; }
.story__ring { animation: ring-pulse 2.6s ease-in-out infinite; }
@keyframes ring-pulse { 50% { box-shadow: 0 0 0 6px rgba(217,119,6,.18); } }
.accordion__item { transition: box-shadow .2s ease; }
.accordion__item.is-open { box-shadow: 0 12px 32px rgba(28,25,23,.12); }

/* Полиш, проход 3 */
@media (max-width: 768px) {
    .objects__map { min-height: 300px; }
    .team-hero__panel { position: static; margin: 0; border-radius: 0; }
}
.mosaic a { position: relative; }
.mosaic a::after {
    content: attr(data-caption);
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 28px 14px 12px; color: #fff; font-size: .85rem; font-weight: 700;
    background: linear-gradient(180deg, transparent, rgba(15,12,10,.7));
    opacity: 0; transition: opacity .25s ease;
}
.mosaic a:hover::after { opacity: 1; }


/* Полиш, проход финальный: живость */
.card.glass, .stat.glass, .review.glass, .media-card.glass, .step.glass, .pay-step.glass, .team-card.glass {
    transition: transform .25s ease, box-shadow .25s ease;
}
.card.glass:hover, .stat.glass:hover, .review.glass:hover, .media-card.glass:hover, .step.glass:hover, .pay-step.glass:hover, .team-card.glass:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(28, 25, 23, .16);
}
@keyframes btn-glow {
    0%, 100% { box-shadow: 0 10px 24px rgba(217,119,6,.35); transform: none; }
    50% { box-shadow: 0 12px 38px rgba(217,119,6,.72), 0 0 0 10px rgba(217,119,6,.14); transform: translateY(-1px); }
}
/* Дизайн-квиз: компактный aside, колонки одной высоты */
/* Фикс высоты нужен только на широких экранах: на мобиле карточка
   разворачивается в строку с круглым портретом (см. медиазапрос ниже). */
@media (min-width: 769px) {
    .quiz-aside__img { flex: 0 0 auto; height: 250px; min-height: 0; overflow: hidden; }
    .quiz-aside__img img { height: 100%; }
}
.quiz__hint { font-size: .84rem; color: var(--color-fg-soft); margin-top: 4px; }

/* ---------- v6: карусели и чат-отзывы ---------- */
.carousel { position: relative; }
.carousel__track {
    display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border);
    background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow); display: flex; align-items: center; justify-content: center;
}
.carousel__nav--prev { left: -12px; }
.carousel__nav--next { right: -12px; }
.carousel__nav .icon { width: 18px; height: 18px; }

/* Слайдер отзывов */
.carousel__track--reviews > * { width: min(400px, 86vw); }

/* Карусель фото в карточке кейса */
.case-slider { position: relative; height: 100%; }
.case-slider .carousel__track { gap: 0; height: 100%; padding: 0; scroll-snap-type: x mandatory; }
.case-slider img { width: 100%; height: 100%; object-fit: cover; flex: 0 0 100%; }
.case-slider .carousel__nav { width: 40px; height: 40px; opacity: 0; transition: opacity .2s; }
.case-slider .carousel__nav--prev { left: 10px; }
.case-slider .carousel__nav--next { right: 10px; }
.media-card:hover .case-slider .carousel__nav { opacity: 1; }
.case-slider__count {
    position: absolute; bottom: 10px; right: 12px; z-index: 3;
    padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
    color: #fff; background: rgba(15,12,10,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Чат-отзывы (вертикальные, как скрины переписок) */
.chats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 320px); gap: var(--sp-3); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.chatshot {
    scroll-snap-align: start; border-radius: 22px; overflow: hidden;
    background: #e8dfd5; border: 1px solid var(--color-border); box-shadow: var(--glass-shadow);
    display: flex; flex-direction: column; min-height: 420px;
}
.chatshot__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f7f2ec; border-bottom: 1px solid var(--color-border); }
.chatshot__head b { font-size: .95rem; }
.chatshot__head span { font-size: .75rem; color: var(--color-fg-soft); display: block; }
.chatshot__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.chatshot__msg {
    max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 14px 4px;
    background: #fff; font-size: .88rem; line-height: 1.45; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.chatshot__msg--out { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #dcf1cd; }
.chatshot__time { font-size: .68rem; color: var(--color-fg-soft); text-align: right; margin-top: 4px; }
.chatshot__photo { border-radius: 12px; overflow: hidden; max-width: 88%; }
.chatshot__photo img { width: 100%; display: block; }
.chats-note { font-size: .78rem; color: var(--color-fg-soft); margin-top: 10px; }
@media (max-width: 768px) { .chats { grid-auto-columns: 78%; } }

/* Шапка: дескриптор, инфо, мессенджеры */
.header__logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.header__logo-text small { font-size: .66rem; font-weight: 600; color: var(--color-fg-soft); letter-spacing: .02em; }
.header__info { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 700; color: var(--color-fg-soft); white-space: nowrap; }
.header__info .icon { width: 13px; height: 13px; color: var(--color-accent); vertical-align: -2px; margin-right: 4px; }
.header__msgrs { display: flex; gap: 6px; }
.header__msgrs a {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex;
    align-items: center; justify-content: center; border: 1px solid var(--color-border);
    background: #fff; color: var(--color-accent); transition: transform .2s, background .2s;
}
.header__msgrs a:hover { transform: translateY(-2px); background: rgba(217,119,6,.08); }
.header__msgrs .icon { width: 19px; height: 19px; }
@media (max-width: 1400px) { .header__info { display: none; } }
@media (max-width: 1200px) { .header__msgrs { display: none; } }

/* Шапка: воздух между лого и меню */
.header__logo { margin-right: clamp(8px, 2vw, 28px); }
.header__nav { margin: 0 auto 0 0; }
.header__contacts { gap: 12px; }

/* ---------- Шапка v2: две строки + подменю услуг ---------- */
.header__bar { flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; }
.header__top {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 7px 2px; border-bottom: 1px solid var(--color-border);
}
.header__top-right { display: flex; align-items: center; gap: 14px; }
.header__info { flex-direction: row; gap: 18px; }
.header__msgrs { display: flex; }
.header__msgrs a { width: 30px; height: 30px; border-radius: 9px; }
.header__msgrs .icon { width: 15px; height: 15px; }
.header__phone { font-size: .92rem; }
.header__main { display: flex; align-items: center; gap: var(--sp-3); min-height: 58px; padding: 4px 0 8px; }
.header__nav { margin: 0 auto; }

/* Подменю услуг */
.has-sub { position: relative; }
.has-sub__link::after {
    content: ''; display: inline-block; width: 6px; height: 6px;
    border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg); margin-left: 8px; vertical-align: 2px;
    transition: transform .2s ease;
}
.has-sub:hover .has-sub__link::after { transform: rotate(225deg); vertical-align: -2px; }
.has-sub::before { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 16px; }
.header__sub {
    position: absolute; top: calc(100% + 12px); left: -14px; z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 460px;
    padding: 12px; border-radius: 16px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.has-sub:hover .header__sub, .has-sub:focus-within .header__sub {
    opacity: 1; visibility: visible; transform: none;
}
.header__sub a {
    display: block; padding: 9px 12px; border-radius: 10px;
    font-size: .9rem; font-weight: 600; color: var(--color-fg); text-decoration: none;
    transition: background .15s, color .15s;
}
.header__sub a:hover { background: rgba(217, 119, 6, .09); color: var(--color-accent); }
.header__sub-all { grid-column: 1 / -1; color: var(--color-accent) !important; font-weight: 800 !important; }
.header__sub--mega { grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 6px 10px; min-width: 900px; left: 50%; transform: translate(-50%, 10px); }
.has-sub:hover .header__sub--mega, .has-sub:focus-within .header__sub--mega { transform: translate(-50%, 0); }
.header__sub-col { display: flex; flex-direction: column; gap: 1px; }
.header__sub-col > b { padding: 8px 12px 4px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-fg-muted); }
.header__sub-col a { padding: 7px 12px; font-size: .86rem; }

main { padding-top: 112px; }

@media (max-width: 1200px) { .header__msgrs { display: flex; } }
@media (max-width: 1400px) { .header__info { display: flex; } }
@media (max-width: 900px) { .header__info span:first-child { display: none; } }
@media (max-width: 768px) {
    .header__top { padding: 6px 0; }
    .header__main { min-height: 52px; }
    main { padding-top: 104px; }
}

/* Рейтинг в hero */
.hero__rating { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__rating-stars { display: inline-flex; gap: 2px; }
.hero__rating-stars .icon { width: 14px; height: 14px; color: #ffb356; }
.hero__rating b { color: #ffb356; }

/* Hero: крупнее и читабельнее */
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero__subtitle { font-size: 1.22rem; color: rgba(255,255,255,.95); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero::before {
    background: linear-gradient(95deg, rgba(15, 12, 10, .82) 0%, rgba(15, 12, 10, .55) 48%, rgba(15, 12, 10, .14) 100%);
}
.hero .chip { font-size: .92rem; }
.hero__note { color: rgba(255,255,255,.8); }

/* Список объектов: скролл */
.objects__col { display: flex; flex-direction: column; min-height: 0; }
.objects__list--scroll {
    max-height: 400px; overflow-y: auto; padding-right: 8px;
    scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-border);
}
.objects__list--scroll::-webkit-scrollbar { width: 6px; }
.objects__list--scroll::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }
.objects__list--scroll::-webkit-scrollbar-track { background: var(--color-border); border-radius: 3px; }
@media (max-width: 768px) { .objects__list--scroll { max-height: 320px; } }

/* Дропдаун услуг: плотный фон */
.header__sub {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 50px rgba(28, 25, 23, .18);
    border: 1px solid var(--color-border);
}


/* Статья блога */
.article-body { font-size: 1.05rem; line-height: 1.75; }
.article-body h2 { margin-top: var(--sp-5); }
.article-body h3 { margin-top: var(--sp-4); }
.article-body img { border-radius: var(--radius); margin: var(--sp-3) 0; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
    margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
    border-left: 4px solid var(--color-accent);
    background: var(--color-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-weight: 600;
}


/* ---------- Мобильная вёрстка: разбор колонок и системных цветов ---------- */

/* Кнопки без явного цвета мобильные браузеры красят системным синим.
   :where() — нулевая специфичность: иначе правило, стоящее ниже по файлу,
   перебивало цвет классов (.btn--accent на <button type="button"> — тёмный
   текст на оранжевом: «Принять» в cookie, заявка в мобильном меню). */
:where(button, [type="button"], [type="submit"], summary) {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    font-family: inherit;
}

@media (max-width: 768px) {
    /* Два столбца там, где содержимое в них не помещается */
    .split, .split--rev { grid-template-columns: 1fr; }
    .split__img { min-height: 0; aspect-ratio: 4 / 3; max-height: 60vh; }
    .split__body { padding: var(--sp-3); }
    .quiz__options--img { grid-template-columns: 1fr 1fr; gap: 10px; }
    .device__screen { grid-template-columns: 1fr 1fr; gap: 8px; }
    .device__screen figcaption { font-size: .55rem; top: 4px; left: 4px; right: 4px; }
    /* Подпись под «экраном»: в две колонки строки рвутся и наезжают */
    .device__bar { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }

    /* Галерея: подписи по тапу не показать — держим их видимыми */
    .mosaic a::after { opacity: 1; padding: 22px 10px 8px; font-size: .78rem; }

    /* Горизонтальные ленты: убираем системную полосу прокрутки */
    .stories-wrap, .chats, .stories { scrollbar-width: none; }
    .stories::-webkit-scrollbar, .chats::-webkit-scrollbar { display: none; }
}

/* ---------- Истории: лента и плеер ---------- */

.stories { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.story {
    position: relative; flex: 0 0 auto; width: 190px; aspect-ratio: 9 / 14;
    border-radius: 20px; overflow: hidden; cursor: pointer; scroll-snap-align: start;
    background: var(--color-muted) center/cover no-repeat;
    box-shadow: 0 10px 28px rgba(28, 25, 23, .16);
    transition: transform .25s ease, box-shadow .25s ease;
}
.story:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(28, 25, 23, .22); }
.story::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,12,10,.45) 0%, rgba(15,12,10,0) 38%, rgba(15,12,10,.72) 100%);
}
.story__ring {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    width: 46px; height: 46px; border-radius: 50%; padding: 2px;
    background: conic-gradient(from 210deg, #f0a04b, #d97706, #ffb356, #d97706);
}
.story--seen .story__ring { background: rgba(255, 255, 255, .55); }
.story__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.story__meta {
    position: absolute; top: 16px; right: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff;
    background: rgba(15, 12, 10, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.story__meta .icon { width: 13px; height: 13px; }
.story b {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
    color: #fff; font-size: .92rem; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.story__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, .7);
}
.story__play::before {
    content: ''; width: 0; height: 0; margin-left: 4px;
    border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.story__play .icon { display: none; }

/* Плеер */
.sv { position: fixed; inset: 0; z-index: 120; display: none; background: rgba(10, 9, 8, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sv.is-open { display: grid; place-items: center; }
.sv__frame { position: relative; width: min(430px, 100vw); height: min(88vh, calc(100vw * 16 / 9)); background: #000; border-radius: 22px; overflow: hidden; }
.sv__media { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.sv__bars { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; z-index: 3; display: flex; gap: 4px; }
.sv__bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.32); overflow: hidden; }
.sv__bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.sv__bar.is-done i { width: 100%; }
.sv__head { position: absolute; top: calc(26px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; color: #fff; }
.sv__head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); }
.sv__head b { font-size: .9rem; }
.sv__head span { font-size: .76rem; opacity: .75; display: block; font-weight: 600; }
.sv__close { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sv__nav { position: absolute; inset: 0; z-index: 2; display: flex; }
.sv__nav button { flex: 1; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv__cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 60px 18px 18px; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(10,9,8,.85));
}
.sv__cap p { margin: 0 0 12px; font-size: .95rem; line-height: 1.4; }
.sv__cap .btn { width: 100%; }
@media (max-width: 768px) {
    .story { width: 148px; border-radius: 16px; }
    .story b { font-size: .82rem; left: 10px; right: 10px; bottom: 10px; }
    .story__ring { width: 38px; height: 38px; top: 9px; left: 9px; }
    .sv__frame { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* ---------- Видеолента: вертикальные ролики с объектов ---------- */
.vreel { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vreel::-webkit-scrollbar { display: none; }
.vreel__item {
    position: relative; flex: 0 0 auto; width: 232px; aspect-ratio: 9 / 16;
    border-radius: 20px; overflow: hidden; background: #14110f; scroll-snap-align: start;
    box-shadow: 0 12px 32px rgba(28, 25, 23, .18);
}
.vreel__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vreel__item::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(15,12,10,.25) 0%, transparent 30%, rgba(15,12,10,.78) 100%);
}
.vreel__cap {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; color: #fff;
}
.vreel__cap b { display: block; font-size: .95rem; line-height: 1.25; }
.vreel__cap span { display: block; margin-top: 4px; font-size: .8rem; opacity: .85; font-weight: 600; }
.vreel__tag {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff;
    background: rgba(15, 12, 10, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vreel__mute {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center;
    background: rgba(15, 12, 10, .5); color: #fff; font-size: .8rem; cursor: pointer;
}
@media (max-width: 768px) {
    .vreel__item { width: 190px; border-radius: 16px; }
    .vreel__cap b { font-size: .86rem; }
}

/* Ростовой портрет в широком кадре: держим лицо в верхней части, а не центр груди */
.split__img--person img { object-position: 50% 8%; }
@media (max-width: 768px) { .split__img--person { aspect-ratio: 3 / 4; max-height: 68vh; } }

/* Секция «качество в деталях»: раскладка была инлайн-стилем и не поддавалась
   мобильным правилам — держим её классом. */
.split--plain {
    background: none; border: 0; box-shadow: none; overflow: visible;
    align-items: start; grid-template-columns: 1.2fr 1fr; gap: var(--sp-4);
}
@media (max-width: 900px) { .split--plain { grid-template-columns: 1fr; } }

/* Портрет в боковой карточке квиза: широкий кадр, лицо держим в верхней трети;
   на мобиле блок превращается в круг 96 px — там кадр смещаем ещё выше. */
.quiz-aside__img img { object-position: 50% 18%; }
@media (max-width: 768px) { .quiz-aside__img img { object-position: 50% 22%; } }

@media (max-width: 768px) {
    /* Круглый портрет рядом с текстом — правило идёт последним, чтобы его
       не перебивала фиксированная высота из десктопного блока. */
    .quiz-aside__img {
        flex: 0 0 88px; width: 88px; height: 88px; min-height: 0;
        border-radius: 50%; overflow: hidden; margin: var(--sp-2); align-self: flex-start;
    }
    .quiz-aside__img img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Мегаменю: не шире экрана ---------- */
/* min-width: 900px делал выпадашку шире вьюпорта на ноутбуках и планшетах —
   страница получала горизонтальный скролл, а меню «уезжало» вбок. */
.header__sub--mega {
    min-width: min(900px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-width: 1180px) {
    .header__sub--mega { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}
/* overflow-x: hidden делает html и body скролл-контейнерами и ломает
   position: sticky внутри страницы (липкий элемент цепляется за контейнер,
   который сам не скроллится). clip обрезает так же, но контейнер не создаёт;
   строка с hidden оставлена запасной для браузеров без поддержки clip. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* ---------- Уведомление о cookie ---------- */
.cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 130;
    display: none; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
    max-width: 880px; margin: 0 auto; padding: 16px 18px;
    border-radius: var(--radius); background: rgba(255, 255, 255, .97);
    border: 1px solid var(--color-border); box-shadow: 0 18px 44px rgba(28, 25, 23, .18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cookie.is-visible { display: flex; }
.cookie__text { flex: 1 1 420px; font-size: .9rem; line-height: 1.45; color: var(--color-fg-soft); }
.cookie__text a { color: var(--color-accent); font-weight: 700; }
.cookie__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie__actions .btn { padding: 10px 18px; font-size: .9rem; }
@media (max-width: 768px) {
    .cookie { left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 14px; }
    .cookie__actions { width: 100%; }
    .cookie__actions .btn { flex: 1; }
}

/* Скрыто визуально, но остаётся в HTML — для скринридеров и ботов */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Видеолента: стрелки на ПК — на тач-устройствах лента и так листается свайпом */
.vreel-wrap { position: relative; }
@media (min-width: 1081px) {
    .vreel-wrap .stories-nav { display: flex; }
    .vreel { overflow-x: hidden; scroll-behavior: smooth; }
}

/* ===== N-04 · Хлебные крошки ===== */
.crumbs { padding: 14px 0 0; font-size: .85rem; color: var(--color-fg-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--color-border); }
.crumbs a { color: var(--color-fg-soft); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs [aria-current="page"] { color: var(--color-fg-muted); }
/* Метрики наезжают на первый экран (.stats-overlap). Если между ними встали
   крошки — наезжать не на что, иначе полоса навигации уходит под карточки. */
.crumbs + .section .stats-overlap { margin-top: var(--sp-2); }

/* ===== S-03 · N-03 · N-05 · карточка-ссылка ===== */
.card--link { display: flex; flex-direction: column; text-decoration: none; }
.card--link .card__text { margin-bottom: 14px; }
.card--link .btn { margin-top: auto; align-self: flex-start; }

/* ===== V-07 · Частник против команды ===== */
.compare { display: grid; gap: 10px; margin-top: var(--sp-3); }
.compare__head {
    display: grid; grid-template-columns: minmax(150px, .8fr) 1fr 1fr;
    gap: var(--sp-2); padding: 0 18px;
}
.compare__col { font-weight: 700; font-size: .95rem; }
.compare__col--bad { color: var(--color-fg-soft); }
.compare__col--good { color: var(--color-accent); }
.compare__row {
    display: grid; grid-template-columns: minmax(150px, .8fr) 1fr 1fr;
    gap: var(--sp-2); align-items: start; padding: 18px;
}
.compare__label { align-self: center; }
.compare__cell p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--color-fg-soft); }
.compare__cell--good p { color: var(--color-fg); }
.compare__tag { display: none; }
.compare__cell { position: relative; padding-left: 26px; }
.compare__cell::before {
    position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .78rem; font-weight: 700; line-height: 1;
}
.compare__cell--bad::before { content: "−"; background: var(--color-border); color: var(--color-fg-soft); }
.compare__cell--good::before { content: "✓"; background: var(--color-accent); color: #fff; }
/* tone=neutral: колонки не «плохо/хорошо», а «известно/неизвестно» —
   правая помечается вопросом, потому что там как раз неизвестность. */
.compare__col--a { color: var(--color-fg-soft); }
.compare__col--b { color: var(--color-accent); }
.compare__cell--b p { color: var(--color-fg); }
.compare__cell--a::before { content: "✓"; background: var(--color-border); color: var(--color-fg-soft); }
.compare__cell--b::before { content: "?"; background: var(--color-accent); color: #fff; }
@media (max-width: 860px) {
    .compare__head { display: none; }
    .compare__row { grid-template-columns: 1fr; gap: 12px; }
    .compare__label { font-size: 1.02rem; }
    .compare__tag {
        display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em; color: var(--color-fg-muted);
    }
    .compare__cell--good .compare__tag,
    .compare__cell--b .compare__tag { color: var(--color-accent); }
}

/* ===== E-04 · Выбор технологии ===== */
.tech__row {
    margin: 0 0 10px; padding-left: 20px; position: relative;
    font-size: .93rem; line-height: 1.5; color: var(--color-fg-soft);
}
.tech__row:last-child { margin-bottom: 0; }
.tech__row b { color: var(--color-fg); font-weight: 700; }
.tech__row::before {
    position: absolute; left: 0; top: 0; font-weight: 700; line-height: 1.5;
}
.tech__row--plus::before { content: "+"; color: var(--color-accent); }
.tech__row--watch::before { content: "!"; color: var(--color-fg-muted); }
.tech__row--when::before { content: "→"; color: var(--color-accent); }

/* ===== P-07 · Чек-лист приёмки ===== */
.checklist {
    display: grid; gap: 10px; margin: var(--sp-3) 0 0;
    padding: 0; list-style: none; counter-reset: none;
}
.checklist__item { padding: 16px 18px; }
.checklist__what { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.checklist__what .icon { width: 18px; height: 18px; color: var(--color-accent); flex: 0 0 auto; }
.checklist__expect { display: block; font-size: .93rem; line-height: 1.5; color: var(--color-fg-soft); }
@media (max-width: 560px) {
    .checklist__item { grid-template-columns: 28px 1fr; gap: 10px; padding: 14px; }
    }

/* ===== V-09 · Красные флаги подрядчика ===== */
.flags { display: grid; gap: 12px; margin-top: var(--sp-3); }
@media (min-width: 900px) { .flags { grid-template-columns: 1fr 1fr; } }
.flag { padding: 18px 20px 18px 22px; position: relative; }
.flag::before {
    content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
    width: 3px; border-radius: 3px; background: var(--color-fg-muted);
}
.flag__title {
    display: block; margin-bottom: 10px; color: var(--color-fg);
    font-size: 1.02rem; line-height: 1.35;
}
.flag__row {
    margin: 0 0 8px; padding-left: 20px; position: relative;
    font-size: .93rem; line-height: 1.5; color: var(--color-fg-soft);
}
.flag__row:last-child { margin-bottom: 0; }
.flag__row b { color: var(--color-fg); font-weight: 700; }
.flag__row::before { position: absolute; left: 0; top: 0; font-weight: 700; line-height: 1.5; }
.flag__row--bad::before { content: "!"; color: var(--color-fg-muted); }
.flag__row--good::before { content: "\2192"; color: var(--color-accent); }

/* ===== Блог · статья с боковой колонкой ===== */
.article-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 860px);
    gap: 48px;
    justify-content: center;
}
/* Колонка тянется на всю высоту строки — иначе sticky внутри неё «залипать»
   негде: он ограничен высотой своего контейнера, а не экрана */
.article-side { align-self: stretch; }
.article-main { min-width: 0; }
.article-meta {
    display: flex; gap: 14px; align-items: center;
    margin-bottom: var(--sp-3); font-size: .9rem; color: var(--color-fg-soft);
}
/* Колонка едет за экраном: под шапкой, которая fixed на 10px сверху */
.article-side__inner { position: sticky; top: 130px; display: grid; gap: var(--sp-2); }

.toc {
    padding: 18px 20px; border: 1px solid var(--color-border);
    border-radius: var(--radius); background: var(--color-muted);
}
.toc__title {
    display: block; margin-bottom: 12px; font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-fg-muted);
}
.toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc__list li { counter-increment: toc; margin-bottom: 10px; line-height: 1.4; }
.toc__list li:last-child { margin-bottom: 0; }
.toc__list a {
    display: block; padding-left: 22px; position: relative;
    font-size: .92rem; color: var(--color-fg-soft); text-decoration: none;
    border-left: 2px solid transparent; margin-left: -2px; padding-block: 2px;
    transition: color .15s ease, border-color .15s ease;
}
.toc__list a::before {
    content: counter(toc); position: absolute; left: 6px; top: 2px;
    font-size: .78rem; font-weight: 700; color: var(--color-fg-muted);
}
.toc__list a:hover { color: var(--color-accent); }
.toc__list a.is-current {
    color: var(--color-accent); font-weight: 700; border-left-color: var(--color-accent);
}
.toc__list a.is-current::before { color: var(--color-accent); }

.side-offer { padding: 20px; display: grid; gap: 10px; }
.side-offer__title { font-size: 1.02rem; line-height: 1.3; }
.side-offer__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--color-fg-soft); }
.side-offer .btn { width: 100%; justify-content: center; }
.side-offer__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .88rem; font-weight: 700; color: var(--color-accent); text-decoration: none;
}
.side-offer__link .icon { width: 15px; height: 15px; }

@media (max-width: 1100px) {
    .article-layout { grid-template-columns: minmax(0, 860px); gap: var(--sp-3); }
    .article-side__inner { position: static; }
    /* Оффер в колонке дублировал бы блок с формой под статьёй — на узком
       экране он не «сбоку», а просто вторая такая же карточка подряд */
    .side-offer { display: none; }
}
/* Автор статьи: фото (у Андрея — upload/team, как в V-04) и две строки
   подписи. Раньше стоял кружок с буквой, а на телефоне он уезжал отдельной
   строкой над именем. */
.article-meta__avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; }
.article-meta__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.article-meta__who b { color: var(--color-fg); font-size: .98rem; }

/* ===== K-05 · Лента из трёх роликов и меньше: по центру, без стрелок ===== */
.vreel-wrap--few .vreel { justify-content: center; }
.vreel-wrap--few .stories-nav { display: none; }

/* ===== S-01 · Добивка хвоста: группа из 13 или 11 карточек без дыры =====
   Сетка на шесть дорожек, карточка занимает две; последняя одиночная — всю
   строку, последние две — по половине. Только на десктопе: ниже 768 сетка
   одноколоночная (стенд 2026-09-06, 00-METHOD §8). */
@media (min-width: 769px) {
    [data-wm="Услуги"] .cards--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    [data-wm="Услуги"] .cards--3 > * { grid-column: span 2; }
    [data-wm="Услуги"] .cards--3 > :last-child:nth-child(3n+1) { grid-column: span 6; }
    [data-wm="Услуги"] .cards--3 > :nth-last-child(2):nth-child(3n+1),
    [data-wm="Услуги"] .cards--3 > :last-child:nth-child(3n+2) { grid-column: span 3; }
}


/* ---------- Мобильная шапка v3 и меню на весь экран (до 1080 px) ----------
   По образцу starostoff.ru: одна строка 56 px вместо двух ярусов по 101 px,
   ниже первого экрана шапка уезжает при прокрутке вниз и возвращается
   при прокрутке вверх (js/main.js), меню — панель на весь экран со своей
   шапкой, аккордеонами услуг и заявкой внизу (include/mobile-menu.php).
   Десктоп (от 1081 px) не меняется. */
.header__call { display: none; }
.mmenu { display: none; }
html.is-locked, html.is-locked body { overflow: hidden; }

@media (max-width: 1080px) {
    main { padding-top: 76px; }
    .header { top: 8px; padding: 0 10px; transition: transform .3s ease; will-change: transform; }
    .header.is-hidden { transform: translateY(calc(-100% - 12px)); }
    .header__bar { max-width: none; min-height: 0; padding: 0 8px 0 14px; border-radius: 16px; }
    .header.is-stuck .header__bar { box-shadow: 0 12px 30px rgba(28, 25, 23, .16); }
    .header__top { display: none; }
    .header__main { min-height: 58px; padding: 0; gap: 8px; }
    .header__logo { margin-right: auto; }
    .header__callback { display: none; }
    .header__call,
    .header__burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: 0 0 44px; margin: 0; padding: 0;
        border-radius: 12px; border: 1px solid var(--color-border); background: #fff;
        color: var(--color-fg); cursor: pointer;
    }
    .header__call .icon { width: 19px; height: 19px; color: var(--color-accent); }
    .header__burger { flex-direction: column; gap: 4px; }
    .header__burger span { width: 18px; height: 2px; margin: 0; border-radius: 2px; background: var(--color-fg); }

    .mmenu {
        position: fixed; inset: 0; z-index: 95;
        display: flex; flex-direction: column;
        background: var(--color-bg);
        overflow-y: auto; overscroll-behavior: contain;
        opacity: 0; transform: translateY(12px);
        transition: opacity .24s ease, transform .24s ease;
    }
    .mmenu[hidden] { display: none; }
    .mmenu.is-open { opacity: 1; transform: none; }
    .mmenu__head {
        position: sticky; top: 0; z-index: 1;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        min-height: 64px; padding: 0 18px 0 24px; padding-top: env(safe-area-inset-top);
        background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    }
    .mmenu__close {
        position: relative; width: 44px; height: 44px; flex: 0 0 44px;
        border-radius: 12px; border: 1px solid var(--color-border); background: #fff; cursor: pointer;
    }
    .mmenu__close span {
        position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px;
        border-radius: 2px; background: var(--color-fg);
    }
    .mmenu__close span:first-child { transform: rotate(45deg); }
    .mmenu__close span:last-child { transform: rotate(-45deg); }

    .mmenu__body { padding: 6px 24px 0; }
    .mmenu__row { border-bottom: 1px solid var(--color-border); }
    .mmenu.is-open .mmenu__row { animation: mmenuIn .3s ease backwards; }
    .mmenu.is-open .mmenu__row:nth-child(2) { animation-delay: .04s; }
    .mmenu.is-open .mmenu__row:nth-child(3) { animation-delay: .08s; }
    .mmenu.is-open .mmenu__row:nth-child(4) { animation-delay: .12s; }
    .mmenu.is-open .mmenu__row:nth-child(5) { animation-delay: .16s; }
    .mmenu.is-open .mmenu__row:nth-child(6) { animation-delay: .20s; }
    .mmenu__link {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        width: 100%; min-height: 58px; padding: 0; border: 0; background: none;
        font: inherit; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em;
        color: var(--color-fg); text-decoration: none; text-align: left; cursor: pointer;
    }
    .mmenu__link .icon { width: 20px; height: 20px; color: var(--color-fg-muted); transform: rotate(-45deg); transition: transform .2s ease, color .2s ease; }
    button.mmenu__link .icon { transform: rotate(90deg); }
    button.mmenu__link[aria-expanded="true"] .icon { transform: rotate(-90deg); color: var(--color-accent); }

    /* аккордеон без замера высоты: 0fr → 1fr */
    .mmenu__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .26s ease, visibility 0s linear .26s; }
    .mmenu__sub > * { overflow: hidden; min-height: 0; }
    .mmenu__sub.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
    .mmenu__subin { padding-bottom: 10px; }
    .mmenu__group { border-top: 1px solid var(--color-border); }
    .mmenu__group-btn {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        width: 100%; min-height: 50px; padding: 0 0 0 2px; border: 0; background: none;
        font: inherit; font-size: 1.02rem; font-weight: 700; color: var(--color-fg); text-align: left; cursor: pointer;
    }
    .mmenu__group-btn small {
        display: inline-block; min-width: 24px; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
        background: var(--color-muted); font-size: .74rem; font-weight: 700; color: var(--color-fg-soft); text-align: center;
    }
    .mmenu__group-btn .icon { width: 18px; height: 18px; color: var(--color-fg-muted); transform: rotate(90deg); transition: transform .2s ease; }
    .mmenu__group-btn[aria-expanded="true"] .icon { transform: rotate(-90deg); color: var(--color-accent); }
    .mmenu__sublink {
        display: flex; align-items: center; min-height: 44px; padding-left: 14px;
        border-left: 2px solid var(--color-border);
        font-size: .98rem; font-weight: 600; color: var(--color-fg-soft); text-decoration: none;
    }
    .mmenu__sublink:active { color: var(--color-accent); }
    .mmenu__sublink--all { margin-top: 6px; border-left: 0; padding-left: 2px; color: var(--color-accent); font-weight: 800; }

    .mmenu__foot { display: grid; gap: 10px; padding: 20px 24px calc(24px + env(safe-area-inset-bottom)); }
    .btn--block { width: 100%; justify-content: center; }
    .mmenu__msgrs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .mmenu__msgrs a {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
        border-radius: 12px; border: 1px solid var(--color-border); background: #fff;
        font-weight: 700; color: var(--color-fg); text-decoration: none;
    }
    .mmenu__msgrs .icon { width: 18px; height: 18px; color: var(--color-accent); }
    .mmenu__note { margin: 4px 0 0; font-size: .82rem; color: var(--color-fg-soft); text-align: center; }
}
@media (max-width: 374px) {
    .header__logo-text small { display: none; }
}
@keyframes mmenuIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
    .header, .mmenu, .mmenu__sub { transition: none; }
    .mmenu.is-open .mmenu__row { animation: none; }
}

/* ---------- Правки мобильной вёрстки 27.09 ---------- */
/* Бегущая строка X-01 стоит сразу за метриками M-02, у секции которых нижний
   отступ 0 — полоса прилипала к последней карточке. */
.section + .marquee { margin-top: var(--sp-4); }
.card--link .media-card__link, .media-card__link:hover { text-decoration: none; }

@media (max-width: 560px) {
    /* обе кнопки hero — на ширину колонки; с padding 28px «Рассчитать стоимость
       ремонта» переносилась и росла до 78 px. Обычные подписи теперь в одну
       строку, самые длинные (≥ 33 знаков) на 360 px — в две ровные, до 70 px */
    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .btn { width: 100%; padding: 12px 16px; gap: 8px; font-size: .95rem; line-height: 1.25; text-wrap: balance; }
    .hero__cta .btn .icon { width: 18px; height: 18px; }
    /* C-02: два мессенджера в строку, звонок — на всю ширину */
    .msg-btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
    .msg-btns .btn { width: 100%; padding: 12px 10px; }
    .msg-btns .btn--accent { grid-column: 1 / -1; }
}
@media (max-width: 374px) {
    .hero__cta .btn { font-size: .92rem; padding: 12px 14px; }
}

/* ---------- Крошки → заголовок страницы ----------
   На страницах, где крошки стоят первыми (блог, портфолио, контакты, статья),
   следом шла секция с полным верхним отступом: 46 px на телефоне и 68 на
   десктопе между «Главная / Блог» и H1 — крошки отрывались от заголовка.
   Теперь 12 px (оператор 27.09: «ещё ближе»).
   :has(h1) — только секция с заголовком страницы; у посадочных крошки
   стоят под hero, и следующий экран сохраняет свой отступ. */
.crumbs + .section:has(h1) { padding-top: 12px; }

@media (max-width: 640px) {
    /* в одну строку: длинное название статьи переносилось, а «/» оставался
       один на строке; текущая страница — это и так H1 ниже */
    .crumbs ol { flex-wrap: nowrap; }
    .crumbs li { flex: none; white-space: nowrap; }
    .crumbs li:last-child { flex: 1 1 auto; min-width: 0; }
    .crumbs li:last-child [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Статья на узком экране: заголовок раньше оглавления ----------
   В одну колонку боковая колонка (оглавление) стояла выше H1 — заголовок
   начинался на 705 px, почти на втором экране. Порядок: H1 → автор →
   обложка → «В статье» → текст. */
@media (max-width: 1100px) {
    .article-layout { row-gap: 0; }
    .article-main { display: contents; }
    .article-main > h1 { order: 1; }
    .article-main > .article-meta { order: 2; }
    .article-main > img { order: 3; }
    .article-side { order: 4; margin-bottom: var(--sp-4); }
    .article-main > .article-body { order: 5; }
}

/* ---------- Метрики M-02 под hero ----------
   Карточки наезжают на hero (.stats-overlap, margin-top: -46px). В одну
   колонку hero кончается карточкой расчёта, и наезд выходил на 8 px — край
   метрики ложился на скругление фото, как ошибка вёрстки. До 1024 px метрики
   стоят отдельно, в 24 px от hero. Шире — наезд остаётся, но hero получает
   нижний отступ под него: иначе карточки упирались в строку доверия
   («14+ лет · Гарантия · Avito»), между ними было 12 px. */
@media (max-width: 1024px) {
    /* у секции M-02 padding-top: 0 задан в разметке — отступ даёт сама полоса */
    .hero-frame + .section .stats-overlap { margin-top: var(--sp-3); }
}
@media (min-width: 1025px) {
    .hero-frame:has(+ .section .stats-overlap) .hero { padding-bottom: calc(var(--sp-5) + 46px); }
}

/* ---------- Нижняя панель сворачивается ----------
   Маленький язычок над левым краем панели (оператор 27.09: «свернуть,
   где-нибудь слева, защита от случайного нажатия»): стоит отдельно от кнопок,
   поэтому пальцем по нему случайно не попасть. Свёрнутая панель уезжает вниз,
   на экране остаётся только язычок. Выбор помнит браузер (js/main.js). */
.sticky-bar { transition: transform .25s ease; }
.sticky-bar__toggle {
    position: absolute; left: 14px; bottom: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 18px; padding: 0; margin-bottom: -1px;
    border: 1px solid var(--color-border); border-bottom: 0; border-radius: 9px 9px 0 0;
    /* сплошной фон: полупрозрачный язычок поверх полупрозрачной панели давал
       видимое наложение на стыке (оператор 27.09) */
    background: #fff; color: var(--color-fg-muted); cursor: pointer;
}
/* панель плотнее стеклянного фона — чтобы совпасть по цвету с язычком */
.sticky-bar.glass--strong { background: rgba(255, 255, 255, .94); }
/* зона нажатия чуть больше видимого язычка, но не заходит на кнопки панели */
.sticky-bar__toggle::after { content: ''; position: absolute; inset: -8px -6px 0; }
.sticky-bar__toggle .icon { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .25s ease; }
/* уезжает на свою высоту без safe-area: язычок остаётся над полосой «домой» на iPhone */
html.bar-collapsed .sticky-bar { transform: translateY(calc(100% - env(safe-area-inset-bottom) - 3px)); }
html.bar-collapsed .sticky-bar__toggle { color: var(--color-accent); }
html.bar-collapsed .sticky-bar__toggle .icon { transform: rotate(-90deg); }
@media (max-width: 768px) {
    html.bar-collapsed body { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .sticky-bar, .sticky-bar__toggle .icon { transition: none; }
}

/* ---------- Без кружков с цифрами (оператор 27.09: «не смотрятся») ----------
   Номера шагов оплаты P-02 и порядка P-10 рисовались ::before-кружком над
   карточкой; у P-06, P-07 и H-04 кружок-span убран из разметки. Порядок
   остаётся: это <ol>, номера читает экранный диктор. */
.pay-step::before, .flow__item::before { content: none; }

/* ---------- Горизонтальные ленты не ловят вертикальное колесо ----------
   overflow-x: auto без overflow-y превращает и ось Y в auto. Картинки в ленте
   на доли пикселя выше самой ленты (338,6 против 339 у слайдера кейсов), и
   Firefox/Safari видят вертикальную прокрутку: колесо мыши над слайдером
   крутило картинку, страница стояла (оператор 27.09, K-01 «Посмотрите примеры
   выполненных работ»). Ось Y у всех лент закрыта явно. */
.carousel__track, .stories, .chats, .vreel, .design-promo__cards { overflow-y: hidden; }

/* ---------- Квиз: «Пропустить» на шаге с вводом ----------
   Точную площадь знают не все (оператор 27.09) — ссылка рядом с «Дальше»,
   тише основной кнопки, чтобы не спорить с ней. */
.quiz__nav-next { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.quiz__skip {
    padding: 10px 4px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .92rem; font-weight: 700; color: var(--color-fg-soft);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border);
}
.quiz__skip:hover { color: var(--color-accent); text-decoration-color: currentColor; }
@media (max-width: 560px) {
    /* «Назад» + «Пропустить» + «Дальше» в строку — 363 px при 270 внутри
       карточки: квиз распирало шире экрана. Сверху «Дальше» во всю ширину
       и «Пропустить» рядом, «Назад» — строкой ниже. */
    .quiz-wrap { grid-template-columns: minmax(0, 1fr); }
    .quiz__nav:has(.quiz__nav-next) { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .quiz__nav-next { margin-left: 0; flex-direction: row-reverse; }
    .quiz__nav-next .btn { flex: 1; }
    .quiz__nav:has(.quiz__nav-next) > [data-quiz-prev] { align-self: flex-start; }
}

/* ---------- Приподнимается при наведении только то, что нажимается ----------
   Все стеклянные плашки поднимались на 5 px при наведении — и карточки состава,
   цифры, этапы выглядели кликабельными, а нажатие «ничего не открывало»
   (оператор 27.09 на коммерции). Подъём остаётся у ссылок и карточек кейсов
   с галереей, у остального — нет. */
.card.glass:not(a):hover, .stat.glass:hover, .review.glass:hover, .step.glass:hover,
.pay-step.glass:hover, .team-card.glass:hover {
    transform: none;
    box-shadow: var(--glass-shadow);
}

/* End */


/* Start:/local/templates/podtapochki/vendor/fancybox/fancybox.css?178812804125343*/
:root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, 0.1);--f-spinner-color-2: rgba(17, 24, 28, 0.8);--f-spinner-stroke: 2.75}.f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}.f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}.f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}.f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}.f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.f-throwOutUp{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0, var(--f-throw-out-distance, 150px), 0);opacity:0}}.f-zoomInUp{animation:var(--f-transition-duration, 0.2s) ease .1s both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, 0.2s) ease both f-zoomOutDown}@keyframes f-zoomInUp{from{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}}.f-fadeIn{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeOut{100%{opacity:0}}.f-fadeFastIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn;z-index:2}.f-fadeFastOut{animation:var(--f-transition-duration, 0.1s) ease-out both f-fadeFastOut;z-index:2}@keyframes f-fadeFastIn{0%{opacity:.75}100%{opacity:1}}@keyframes f-fadeFastOut{100%{opacity:0}}.f-fadeSlowIn{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn;z-index:2}.f-fadeSlowOut{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut;z-index:1}@keyframes f-fadeSlowIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeSlowOut{100%{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, 0.2s)*.5) linear .1s both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-crossfadeOut{100%{opacity:0}}.f-slideIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext}.f-slideIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev}.f-slideOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext}.f-slideOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev}@keyframes f-slideInPrev{0%{transform:translateX(100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideInNext{0%{transform:translateX(-100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideOutNext{100%{transform:translateX(-100%)}}@keyframes f-slideOutPrev{100%{transform:translateX(100%)}}.f-classicIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;z-index:2}.f-classicIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;z-index:2}.f-classicOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;z-index:1}.f-classicOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;z-index:1}@keyframes f-classicInNext{0%{transform:translateX(-75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translateX(75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicOutNext{100%{transform:translateX(-75px);opacity:0}}@keyframes f-classicOutPrev{100%{transform:translateX(75px);opacity:0}}:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: 0.65}.f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)}@media(hover: hover){.f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}}.f-button:active:not([disabled]){background-color:var(--f-button-active-bg)}.f-button:focus:not(:focus-visible){outline:none}.f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none}.f-button[disabled]{cursor:default}.f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}.f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next{position:absolute;z-index:1}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)}.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translateX(-50%)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)}.f-carousel__nav .f-button:disabled,.fancybox__nav .f-button:disabled{pointer-events:none}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body{touch-action:none}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden !important;overscroll-behavior-y:none}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, 0.98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, 0.1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:var(--fancybox-zIndex, 1050);outline:none;transform-origin:top left;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container::backdrop{background-color:rgba(0,0,0,0)}.fancybox__backdrop{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity}.fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__viewport{width:100%;height:100%}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__track{display:flex;margin:0 auto;height:100%}.fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;overscroll-behavior:contain;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px}.fancybox__slide.has-iframe,.fancybox__slide.has-video,.fancybox__slide.has-html5video{overflow:hidden}.fancybox__slide.has-image{overflow:hidden}.fancybox__slide.has-image.is-animating,.fancybox__slide.has-image.is-selected{overflow:visible}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}.fancybox__backdrop:empty,.fancybox__viewport:empty,.fancybox__track:empty,.fancybox__slide:empty{display:block}.fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20}.is-loading .fancybox__content{opacity:0}.is-draggable .fancybox__content{cursor:move;cursor:grab}.can-zoom_in .fancybox__content{cursor:zoom-in}.can-zoom_out .fancybox__content{cursor:zoom-out}.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__content [data-selectable],.fancybox__content [contenteditable]{cursor:auto}.fancybox__slide.has-image>.fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__slide.has-image>.fancybox__content>picture>img{width:100%;height:auto;max-height:100%}.is-animating .fancybox__content,.is-dragging .fancybox__content{will-change:transform,width,height}.fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none;filter:blur(0px)}.fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px 0;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible}.is-loading .fancybox__caption,.is-closing .fancybox__caption{opacity:0;visibility:hidden}.is-compact .fancybox__caption{padding-bottom:0}.f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40}.fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75}.is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden}.is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden}.fancybox__content>.f-button.is-close-btn:hover{opacity:1}.fancybox__footer{padding:0;margin:0;position:relative}.fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease}.is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:rgba(24,24,27,.5)}.is-compact .fancybox__footer .fancybox__caption{padding:12px}.is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, 0.6);--f-button-active-bg: rgba(0, 0, 0, 0.6);--f-button-hover-bg: rgba(0, 0, 0, 0.6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px}.fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, 0.3);--f-button-active-bg: rgba(24, 24, 27, 0.5);--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));--f-button-svg-disabled-opacity: 0.65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)}.fancybox__nav .f-button:before{position:absolute;content:"";top:-30px;right:-20px;left:-20px;bottom:-30px;z-index:1}.is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut}.is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));z-index:30;cursor:pointer}.fancybox-protected{position:absolute;top:0;left:0;right:0;bottom:0;z-index:40;user-select:none}.fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;user-select:none;pointer-events:none}.fancybox-focus-guard{outline:none;opacity:0;position:fixed;pointer-events:none}.fancybox__container:not([aria-hidden]){opacity:0}.fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-enter-duration, 0.25s) ease .1s backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:var(--f-backdrop-enter-duration, 0.35s) ease backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-exit-duration, 0.15s) ease forwards f-fadeOut}.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:var(--f-backdrop-exit-duration, 0.35s) ease forwards f-fadeOut}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content{width:calc(100% - 120px);height:90%}.fancybox__container.is-compact .has-iframe .fancybox__content,.fancybox__container.is-compact .has-map .fancybox__content,.fancybox__container.is-compact .has-pdf .fancybox__content{width:100%;height:100%}.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}.f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}.f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px}.f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)}.f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1}.f-thumbs .f-spinner svg{display:none}.f-thumbs.is-vertical{height:100%}.f-thumbs__viewport{width:100%;height:auto;overflow:hidden;transform:translate3d(0, 0, 0)}.f-thumbs__track{display:flex}.f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}.f-thumbs__slide.is-loading img{opacity:0}.is-classic .f-thumbs__viewport{height:100%}.is-modern .f-thumbs__track{width:max-content}.is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc((var(--f-thumb-clip-width, 0))*-0.5);width:calc(var(--width, 0)*1px + var(--f-thumb-clip-width, 0));cursor:pointer}.is-modern .f-thumbs__slide{width:var(--f-thumb-clip-width);transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}.is-modern.is-resting .f-thumbs__slide{transition:transform .33s ease}.is-modern.is-resting .f-thumbs__slide__button{transition:clip-path .33s ease}.is-using-tab .is-modern .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}.f-thumbs__slide__button{appearance:none;width:var(--f-thumb-width);height:100%;margin:0 -100% 0 -100%;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}.f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}.f-thumbs__slide__button:focus:not(:focus-visible){outline:none}.f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}.is-modern .f-thumbs__slide__button{--clip-path: inset( 0 calc( ((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * 0.5 ) round var(--f-thumb-border-radius, 0) );clip-path:var(--clip-path)}.is-classic .is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}.is-classic .is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}.f-thumbs__slide__img{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover;border-radius:var(--f-thumb-border-radius)}.f-thumbs.is-horizontal .f-thumbs__track{padding:8px 0 12px 0}.f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}.f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;padding:0 8px}.f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}.fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(0.23, 1, 0.32, 1)}.fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)}.fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0}.is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px}.fancybox__thumbs.is-masked{max-height:0px !important}.is-closing .fancybox__thumbs{transition:none !important}.fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, 0.65);--f-button-hover-bg: rgba(70, 70, 73, 0.65);--f-button-active-bg: rgba(90, 90, 93, 0.65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: 0.65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));pointer-events:none;z-index:20}.fancybox__toolbar :focus-visible{z-index:1}.fancybox__toolbar.is-absolute,.is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0}.is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.fancybox__toolbar__column.is-left,.fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0}.fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap}.fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;user-select:none}.fancybox__infobar span{padding:0 5px}.fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)}[data-fancybox-toggle-slideshow]{position:relative}[data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3}[data-fancybox-toggle-slideshow] svg g:first-child{display:flex}[data-fancybox-toggle-slideshow] svg g:last-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:first-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:last-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}.f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;user-select:none;pointer-events:none}
/* End */
/* /local/templates/podtapochki/css/main.css?1790538562105000 */
/* /local/templates/podtapochki/vendor/fancybox/fancybox.css?178812804125343 */