/* VELURA - components.css | hero, examples, how, seo, why, faq, cta, plans, landing, SHARED gen-*, reveal, global responsive | after layout.css */

/* =====================================================================
   HERO — две колонки
   ===================================================================== */
.hero { padding: 64px 0 80px; overflow: hidden; }
.hero__glow {
    position: absolute; top: -120px; left: 72%; transform: translateX(-50%);
    width: 620px; height: 460px;
    background: radial-gradient(closest-side, rgba(255, 77, 109, 0.18), transparent);
    filter: blur(18px); pointer-events: none; z-index: -1;
}
.hero__grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    grid-template-areas:
        "copy tool"
        "extra tool";
    column-gap: 56px;
    row-gap: 24px;
    align-items: start;
}
.hero__copy  { grid-area: copy; align-self: center; min-width: 0; }
.hero__tool  { grid-area: tool; align-self: start; min-width: 0; margin-top: 52px; }
.hero__extra { grid-area: extra; align-self: end; min-width: 0; }

/* главная: единый левый блок (текст+преимущества), выровнен по верху с инструментом */
.hero--home .hero__grid {
    grid-template-areas: "copy tool";
    /* текст чуть шире, инструмент уже — чтобы карточка не выглядела «бандурой»
       (на ≤880px сетка всё равно переопределяется в 1 колонку) */
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
}
.hero--home .hero__copy { align-self: start; }
.hero--home .hero__tool { margin-top: 0; }
.hero--home .hero__extra { margin-top: 30px; }

.hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 17px;
    border-radius: 999px;
    border-color: var(--line);
    font-size: 13.5px; color: var(--ink-soft);
    margin-bottom: 22px;
}
.hero__badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 12px var(--acc);
    animation: pulse 2.2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.hero__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(36px, 4.8vw, 60px);
    line-height: 1.06;
    letter-spacing: -1px;
    margin-bottom: 18px;
}
.hero__title .acc-text { display: block; }
.hero__subtitle {
    max-width: 560px;
    color: var(--ink-soft);
    font-size: clamp(16px, 1.7vw, 18.5px);
}

/* features — компактные glass-чипы «ключевое слово — пояснение», формат в 1 строку */
.hero__features {
    display: grid;
    /* minmax(0, 1fr) — разрешаем колонкам сжиматься ниже min-content,
       иначе на узких экранах (≤320px) сетка вылезает за контейнер */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.hero__features li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px;
    border-radius: 12px;
    background: var(--glass);
    border: 1px solid var(--line-soft);
    /* тонкий внутренний блик сверху — стекло выглядит «дороже» */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.hero__features li:hover {
    transform: translateY(-2px);
    border-color: var(--line);
    background: var(--glass-2);
    /* мягкое неоновое свечение акцентом сайта (коралл→оранж) */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px var(--acc-glow);
}
.hero__feat-ico {
    width: 28px; height: 28px; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 14px;
    border-radius: 8px;
    color: var(--acc-2);
    background: rgba(255, 138, 61, 0.12);
    border: 1px solid var(--line);
    box-shadow: 0 0 10px rgba(255, 138, 61, 0.10);
}
/* текст чипа: ключевое слово контрастное, пояснение — приглушённое */
.hero__feat-txt {
    min-width: 0;
    font-size: 13.5px; font-weight: 500; line-height: 1.3;
    color: var(--ink-mute);
}
.hero__feat-txt b { color: var(--ink); font-weight: 600; }
.hero__rating { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.hero__stars { color: var(--acc-2); letter-spacing: 2px; font-size: 16px; }
.hero__rating-text { color: var(--ink-mute); font-size: 14px; }
.hero__rating-text strong { color: var(--acc-soft); }

/* мини-чипы доверия под рейтингом (немного контента для симметрии) */
.hero__trust { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.hero__trust-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 13px; color: var(--ink-soft);
    background: var(--glass); border: 1px solid var(--line-soft);
}
.hero__trust-item b { color: var(--acc-soft); font-weight: 600; }


/* =====================================================================
   EXAMPLES
   ===================================================================== */
.examples__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.example { border-radius: var(--radius); overflow: hidden; border-color: var(--line-soft); }
.example__pair { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 3 / 2; }
.example__before, .example__after { position: relative; overflow: hidden; }
/* градиенты-заглушки под фото — видны, пока изображение подгружается */
.example__before { background: radial-gradient(120% 120% at 30% 20%, #3a3340, #1d1b22); }
.example__after { background: radial-gradient(120% 120% at 70% 30%, rgba(255,77,109,0.40), #2a161b); }
.example__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.example__tag {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    padding: 4px 10px; border-radius: 8px;
    background: rgba(0,0,0,0.4); color: var(--ink-soft);
    backdrop-filter: blur(4px);
}
.example__tag--acc { background: var(--acc); color: var(--on-acc); left: auto; right: 10px; }
.example figcaption {
    padding: 15px 17px; font-size: 14.5px; color: var(--ink-soft);
    border-top: 1px solid var(--line-soft);
}
.examples__note { text-align: center; color: var(--ink-mute); font-size: 12.5px; margin-top: 22px; }

/* =====================================================================
   HOW IT WORKS — чередующийся timeline (4 шага)
   ===================================================================== */
.how__timeline { position: relative; max-width: 880px; margin: 0 auto; }
.how__timeline::before {
    content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%;
    width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--acc), var(--acc-2));
    opacity: .35; border-radius: 2px;
}
.how__step { position: relative; width: 50%; box-sizing: border-box; margin-bottom: 26px; }
.how__step:last-child { margin-bottom: 0; }
.how__step--left  { left: 0;   padding-right: 42px; }
.how__step--right { left: 50%; padding-left: 42px; }

.how__node {
    position: absolute; top: 6px;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 700; font-size: 17px;
    color: var(--on-acc); background: var(--acc-grad);
    box-shadow: var(--shadow-acc);
    z-index: 2;
}
.how__step--left  .how__node { right: -23px; }
.how__step--right .how__node { left: -23px; }

.how__card {
    padding: 26px 28px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 77, 109, 0.30);
    box-shadow: 0 0 18px rgba(255, 77, 109, 0.08), inset 0 0 0 1px rgba(255, 122, 144, 0.05);
    transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.how__card:hover {
    transform: translateY(-3px);
    border-color: var(--acc);
    box-shadow: 0 0 26px rgba(255, 77, 109, 0.18);
}
.how__ico {
    width: 42px; height: 42px; margin-bottom: 14px;
    display: grid; place-items: center; font-size: 19px;
    border-radius: 12px;
    color: var(--acc-2);
    background: rgba(255, 138, 61, 0.09);
    border: 1px solid var(--line);
}
.how__title { font-family: var(--font-head); font-size: 18.5px; font-weight: 600; margin-bottom: 8px; }
.how__opt {
    font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--ink-mute);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 2px 7px; margin-left: 6px; vertical-align: middle;
}
.how__text { color: var(--ink-soft); font-size: 15px; }

@media (max-width: 700px) {
    .how__timeline::before { left: 23px; }
    .how__step, .how__step--left, .how__step--right {
        width: 100%; left: 0;
        padding-left: 60px; padding-right: 0;
        margin-bottom: 16px;
    }
    .how__step--left .how__node, .how__step--right .how__node { left: 0; right: auto; }
}

@media (max-width: 480px) {
    .how__timeline::before { left: 19px; }
    .how__step, .how__step--left, .how__step--right { padding-left: 52px; }
    .how__node { width: 40px; height: 40px; font-size: 15px; top: 4px; }
    .how__card { padding: 20px 18px; }
    .how__title { font-size: 17px; }
    .how__text { font-size: 14px; }
}

/* =====================================================================
   SEO TEXT — «журнальный» блок
   ===================================================================== */
.seo__card {
    position: relative;
    max-width: 980px; margin: 0 auto;
    padding: 48px 52px;
    border-radius: var(--radius-lg);
    border-color: var(--line);
    box-shadow: var(--shadow);
}
.seo__kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: var(--acc-2);
    margin-bottom: 14px;
}
.seo__kicker::before { content: ""; width: 24px; height: 2px; background: var(--acc-grad); border-radius: 2px; }
.seo__title {
    font-family: var(--font-head);
    font-size: clamp(25px, 3.1vw, 34px);
    font-weight: 700; line-height: 1.18; letter-spacing: -.4px;
    margin-bottom: 20px;
}
/* сплошной текст одной колонкой сверху вниз */
.seo__body p {
    margin-bottom: 18px;
    color: var(--ink-soft); font-size: 16.5px; line-height: 1.78;
}
.seo__body p:last-child { margin-bottom: 0; }
.seo__body p:first-of-type::first-letter {
    font-family: var(--font-head);
    font-size: 52px; font-weight: 700; line-height: .82;
    float: left; margin: 6px 12px 0 0;
    color: transparent;
    background: linear-gradient(135deg, var(--acc-2), var(--acc));
    -webkit-background-clip: text; background-clip: text;
}

@media (max-width: 700px) {
    .seo__card { padding: 28px 22px; }
}
@media (max-width: 480px) {
    .seo__card { padding: 24px 18px; }
    .seo__body p { font-size: 15.5px; line-height: 1.7; }
    .seo__body p:first-of-type::first-letter { font-size: 42px; margin: 5px 9px 0 0; }
}

/* =====================================================================
   WHY US
   ===================================================================== */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why__card {
    padding: 30px 26px;
    border-radius: var(--radius);
    border-color: var(--line-soft);
    transition: transform .3s var(--ease), border-color .3s;
}
.why__card:hover { transform: translateY(-4px); border-color: var(--line); }
.why__ico {
    width: 46px; height: 46px; margin-bottom: 16px;
    display: grid; place-items: center; font-size: 20px;
    border-radius: 12px;
    background: rgba(255, 77, 109, 0.08);
    border: 1px solid var(--line);
}
.why__card h3 { font-size: 18px; font-weight: 600; margin-bottom: 9px; }
.why__card p { color: var(--ink-soft); font-size: 15px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
    border-radius: var(--radius-sm);
    border-color: var(--line-soft);
    overflow: hidden;
    transition: border-color .25s;
}
.faq__item[open] { border-color: var(--line); }
.faq__q {
    list-style: none;
    cursor: pointer;
    padding: 19px 22px;
    font-size: 16.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    font-size: 22px; font-weight: 400; color: var(--acc);
    transition: transform .3s var(--ease);
    flex-shrink: 0;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a {
    padding: 0 22px 21px;
    color: var(--ink-soft);
    font-size: 15.5px;
}

/* =====================================================================
   CTA
   ===================================================================== */
.cta__card {
    position: relative; overflow: hidden;
    text-align: center;
    padding: 64px 36px;
    border-radius: var(--radius-lg);
    border-color: var(--line);
    box-shadow: var(--shadow);
}
.cta__glow {
    position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
    width: 560px; height: 380px;
    background: radial-gradient(closest-side, rgba(255,77,109,0.18), transparent);
    pointer-events: none;
}
.cta__title { font-family: var(--font-head); font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; margin-bottom: 14px; position: relative; }
.cta__text { color: var(--ink-soft); font-size: 16px; margin-bottom: 30px; position: relative; }
.cta__card .btn { position: relative; }


/* =====================================================================
   LANDING COMPONENTS — переиспользуемые блоки для лендингов
   (центр-hero, возможности-ряды, слайдер до/после, таблица сравнения,
    горизонтальные шаги, галерея-фильтр, сценарии)
   ===================================================================== */

/* ---------- Hero: центрированный вариант (tool-first) ---------- */
.hero--center { text-align: center; padding: 72px 0 88px; }
.hero--center .container { max-width: 980px; }
.hero--center .hero__badge { margin: 0 auto 22px; }
.hero--center .hero__title { margin-left: auto; margin-right: auto; }
.hero--center .hero__subtitle { max-width: 760px; margin: 0 auto 30px; }
.hero--center .hero__tool { max-width: 760px; margin: 0 auto; }
.hero--center .hero__glow { left: 50%; top: -110px; }

/* полоса метрик-возможностей — уникальна для pro-страницы «студия»:
   заполняет пространство между текстом и инструментом и подчёркивает
   позиционирование «полный контроль над результатом» */
.hero--center .hero__stats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px 18px;
    max-width: 780px; margin: 0 auto 34px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 77, 109, 0.04);
}
.hero__stat {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; flex: 1 1 130px; min-width: 120px;
    position: relative;
}
/* тонкий вертикальный разделитель между метриками */
.hero__stat + .hero__stat::before {
    content: ""; position: absolute; left: -9px; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 34px; background: var(--line);
}
.hero__stat-ico { font-size: 20px; line-height: 1; }
.hero__stat-num {
    font-family: var(--font-head); font-weight: 700;
    font-size: 18px; color: var(--acc-soft); white-space: nowrap;
}
.hero__stat-label {
    font-size: 12.5px; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .4px;
}

.hero--center .hero__chips {
    display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
    margin-top: 22px;
}
.hero__chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 999px;
    font-size: 14px; color: var(--ink-soft);
    border: 1px solid var(--line); background: rgba(255,77,109,0.05);
}
.hero__chip b { color: var(--acc-soft); font-weight: 600; }

/* ---------- Hero: зеркальный вариант (tool слева, текст справа) ---------- */
.hero--mirror .hero__grid {
    grid-template-areas: "tool copy" "tool extra";
    grid-template-rows: auto 1fr;   /* copy = по контенту, extra-строка тянется вниз */
}
/* текст прижат к верху → между H1/подзаголовком и плитками нет «дыры»,
   лишнее место (из-за высокого инструмента) уходит вниз столбца */
.hero--mirror .hero__copy  { align-self: start; }
.hero--mirror .hero__extra { align-self: start; }

/* ---------- Hero: «насыщенный» правый блок (scoped, только razdet-devushku.html) ----------
   инструмент duo высокий → добавляем контент справа, чтобы убрать перекос */
/* мини чек-лист с маркерами-галочками под подзаголовком */
.hero--mirror-rich .hero__points {
    margin-top: 20px;
    display: flex; flex-direction: column; gap: 11px;
    max-width: 560px;
}
.hero--mirror-rich .hero__points li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14.5px; line-height: 1.45; color: var(--ink-soft);
}
.hero--mirror-rich .hero__point-ico {
    flex-shrink: 0; margin-top: 1px;
    width: 21px; height: 21px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: var(--on-acc);
    background: var(--acc-grad);
    box-shadow: 0 2px 10px var(--acc-glow);
}

/* чипы доверия — в один ряд на ПК (ужимаем, чтобы влезли все три) */
.hero--mirror-rich .hero__trust { flex-wrap: nowrap; gap: 7px; }
.hero--mirror-rich .hero__trust-item {
    padding: 7px 11px; font-size: 12.5px; gap: 5px;
    white-space: nowrap;
}

/* фичи-плитки на этой странице — с тёплой градиентной окантовкой иконки,
   чтобы визуально отличались от других страниц */
.hero--mirror-rich .hero__feat-ico {
    color: var(--acc-soft);
    background: rgba(255, 77, 109, 0.10);
    border-color: transparent;
    background-image:
        linear-gradient(rgba(255, 77, 109, 0.10), rgba(255, 138, 61, 0.10)),
        var(--acc-grad);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 12px rgba(255, 77, 109, 0.14);
}


/* ---------- Возможности — bento-раскладка (только razdevator.html) ---------- */
.rzf {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
}
.rzf__cell {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 26px;
    border-radius: var(--radius-lg);
    border-color: var(--line-soft);
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
/* тонкая градиентная «нить» по верхней кромке — появляется на hover */
.rzf__cell::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--acc-grad);
    opacity: 0; transition: opacity .35s var(--ease);
}
.rzf__cell:hover {
    transform: translateY(-4px);
    border-color: var(--line);
    box-shadow: var(--shadow);
}
.rzf__cell:hover::before { opacity: .9; }

/* крупная широкая плитка (span 2) */
.rzf__cell--wide { grid-column: span 2; }
.rzf__cell--wide::before { opacity: .5; }

/* высокая плитка (span 2 строки) с мягкой заливкой */
.rzf__cell--tall {
    grid-row: span 2;
    background: linear-gradient(180deg, rgba(255, 77, 109, 0.10), rgba(255, 255, 255, 0.02));
}

/* иконки с разными акцентными заливками */
.rzf__ico {
    width: 48px; height: 48px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 22px;
    border-radius: 14px; margin-bottom: 15px;
    border: 1px solid var(--line);
}
.rzf__ico--coral { color: var(--acc);      background: rgba(255, 77, 109, 0.12); }
.rzf__ico--oran  { color: var(--acc-2);     background: rgba(255, 138, 61, 0.12); }
.rzf__ico--pink  { color: var(--acc-soft);  background: rgba(255, 122, 144, 0.12); }
.rzf__ico--gold  { color: #ffb347;          background: rgba(255, 166, 46, 0.12); }
.rzf__ico--mint  { color: var(--ok-soft);   background: var(--ok-glow); border-color: rgba(52, 211, 153, 0.28); }
.rzf__cell--wide .rzf__ico { width: 56px; height: 56px; font-size: 26px; border-radius: 16px; }

.rzf__cell h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.rzf__cell p  { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.rzf__cell--wide h3 { font-size: 21px; font-weight: 700; }
.rzf__cell--wide p  { font-size: 15px; }

/* большая цифра-акцент в высокой плитке */
.rzf__num {
    position: absolute; top: 20px; right: 24px;
    font-family: var(--font-head); font-weight: 800;
    font-size: 46px; line-height: 1;
    background: var(--acc-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: .9;
}

/* чипы настроек внутри широких плиток */
.rzf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.rzf__chip {
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
}

/* вертикальная шкала размеров в высокой плитке */
.rzf__scale { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 18px; }
.rzf__scale-item {
    position: relative;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    padding: 9px 14px 9px 34px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-soft);
    transition: color .25s, border-color .25s, background .25s;
}
.rzf__scale-item::before {
    content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--line); transition: background .25s, box-shadow .25s;
}
.rzf__scale-item.is-active {
    color: var(--ink); border-color: var(--line);
    background: rgba(255, 77, 109, 0.08);
}
.rzf__scale-item.is-active::before {
    background: var(--acc); box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.18);
}

/* ---------- Слайдер «до / после» (drag) ---------- */
.compare {
    /* портретные фото 3:4 — узкий вертикальный формат, чтобы не обрезать кадр */
    position: relative; max-width: 470px; margin: 0 auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow);
    user-select: none;
    --pos: 50%;
}
.compare__layer { position: absolute; inset: 0; }
/* градиенты — фон-заглушки под фото на время загрузки */
.compare__before { background: radial-gradient(120% 120% at 30% 20%, #3a3340, #1b1920); }
.compare__after {
    background: radial-gradient(120% 120% at 70% 30%, rgba(255,77,109,0.42), #2a161b);
    /* «После» открывается справа от ползунка → совпадает с подписями До(слева)/После(справа) */
    clip-path: inset(0 0 0 var(--pos));
}
/* реальные фото поверх градиента */
.compare__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
    pointer-events: none;
}
/* Выравнивание «после» под «до» запечено в самих файлах (ORB-совмещение,
   одинаковый размер). Дополнительный масштаб/сдвиг слоя не нужен. */
.compare__tag {
    position: absolute; top: 12px; z-index: 4;
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    padding: 5px 11px; border-radius: 8px;
    background: rgba(0,0,0,0.45); color: var(--ink-soft);
    backdrop-filter: blur(4px);
}
.compare__tag--before { left: 12px; }
.compare__tag--after { right: 12px; background: var(--acc); color: var(--on-acc); }
.compare__handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos);
    width: 2px; background: var(--acc); transform: translateX(-1px);
    z-index: 5; box-shadow: 0 0 12px var(--acc-glow);
    /* линия не ловит нажатия — на телефоне свайп по ней скроллит страницу */
    pointer-events: none;
}
.compare__grip {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--acc-grad); color: var(--on-acc);
    font-size: 15px; font-weight: 700;
    box-shadow: var(--shadow-acc);
    /* тянуть «до/после» можно ТОЛЬКО за этот кружок */
    pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.compare__hint { text-align: center; color: var(--ink-mute); font-size: 12.5px; margin-top: 14px; }


/* ---------- Таблица сравнения (мы / другие) ---------- */
.cmp-table {
    max-width: 880px; margin: 0 auto;
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line-soft);
}
.cmp-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
.cmp-row + .cmp-row .cmp-cell { border-top: 1px solid var(--line-soft); }
/* min-width:0 — чтобы длинные слова не распирали колонки (иначе fr «плывут» и таблица переполняется);
   overflow-wrap — переносим длинные слова внутри ячейки вместо горизонтального скролла */
.cmp-cell { padding: 16px 20px; font-size: 15px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: break-word; }
.cmp-cell--feat { color: var(--ink); font-weight: 500; }
.cmp-cell--us { background: rgba(255,77,109,0.06); color: var(--ink); font-weight: 600; justify-content: center; text-align: center; }
.cmp-cell--them { color: var(--ink-mute); justify-content: center; text-align: center; }
.cmp-row--head .cmp-cell {
    font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink);
    background: rgba(255,255,255,0.03);
}
.cmp-row--head .cmp-cell--us { color: var(--acc-soft); background: rgba(255,77,109,0.10); }
.cmp-yes { color: var(--acc); font-weight: 700; }
.cmp-no { color: var(--ink-mute); }

/* ---------- «Как нейросеть раздевает фото» — конвейер (scoped, razdet-devushku.html) ---------- */
.rzflow-section { position: relative; overflow: hidden; }
.rzflow-section__glow {
    position: absolute; top: 40%; left: 50%;
    width: 860px; height: 400px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--acc-glow), transparent 70%);
    filter: blur(30px); opacity: .5; pointer-events: none; z-index: 0;
}
.rzflow-section .container { position: relative; z-index: 1; }
.rzflow {
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px;
    max-width: 1020px; margin: 0 auto; align-items: start;
}
.rzflow__pipe { padding: 30px 30px 26px; border-radius: var(--radius-lg); border-color: var(--line-soft); }
.rzflow__badge {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .3px;
    color: var(--acc-2); background: rgba(255,138,61,0.10);
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; margin-bottom: 16px;
}
.rzflow__pipe-title { font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; color: var(--ink); margin-bottom: 24px; }
.rzflow__stages { list-style: none; display: flex; flex-direction: column; gap: 20px; position: relative; }
/* вертикальный градиентный коннектор между стадиями */
.rzflow__stages::before {
    content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg, var(--acc), var(--acc-2)); opacity: .35; border-radius: 2px;
}
.rzflow__stage { display: flex; gap: 16px; align-items: flex-start; position: relative; }
.rzflow__ico {
    width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; font-size: 20px;
    border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line);
    box-shadow: 0 0 0 4px var(--bg); position: relative; z-index: 1;
}
.rzflow__stage-txt { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.rzflow__stage-txt b { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); }
.rzflow__stage-txt i { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
/* акцентная плитка-обещание */
.rzflow__promise {
    padding: 28px 26px; border-radius: var(--radius-lg); border-color: var(--line);
    background: linear-gradient(160deg, rgba(255,77,109,0.07), var(--glass));
    display: flex; flex-direction: column;
}
.rzflow__promise-title { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.rzflow__promise-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 18px; }
.rzflow__facts { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.rzflow__facts li { display: flex; align-items: baseline; gap: 12px; }
.rzflow__fact-num {
    font-family: var(--font-head); font-weight: 800; font-size: 24px;
    min-width: 56px; text-align: right; flex-shrink: 0;
    color: transparent; background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; line-height: 1;
}
.rzflow__fact-txt { font-size: 14px; color: var(--ink-soft); }
.rzflow__bridge {
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft);
    font-size: 13.5px; line-height: 1.6; color: var(--ink-mute);
}
.rzflow__bridge b { color: var(--acc-soft); }

/* ---------- «Оживить фото» — единая карта: кино-лента + функции (scoped, razdet-devushku.html) ---------- */
.liven {
    max-width: 1020px; margin: 0 auto; padding: 34px 34px 32px;
    border-radius: var(--radius-lg); border-color: var(--line);
    display: flex; flex-direction: column;
}
/* шапка карты */
.liven__top {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line-soft);
}
.liven__badge {
    font-size: 12px; font-weight: 600; letter-spacing: .3px;
    color: var(--acc-2); background: rgba(255,138,61,0.10);
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; margin-bottom: 22px;
}
/* кино-лента «фото → видео» */
.liven__strip { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; margin: 4px 0 22px; }
.liven__frame {
    width: 68px; height: 68px; flex-shrink: 0; display: grid; place-items: center; font-size: 28px;
    border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line);
    box-shadow: var(--shadow); transition: transform .3s var(--ease);
}
.liven__frame--play {
    color: var(--on-acc); background: var(--acc-grad); border: none;
    box-shadow: 0 0 0 4px rgba(255,77,109,0.14), var(--shadow-acc);
    animation: livenPulse 2.4s var(--ease) infinite;
}
.liven:hover .liven__frame { transform: translateY(-3px); }
.liven__arrow { color: var(--acc-2); font-size: 20px; opacity: .8; flex-shrink: 0; }
@keyframes livenPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,77,109,0.14), var(--shadow-acc); }
    50% { box-shadow: 0 0 0 8px rgba(255,77,109,0.05), var(--shadow-acc); }
}
.liven__reel-title { font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.liven__reel-sub { max-width: 620px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
/* панель функций — сетка 3×2 (десктоп) */
.liven__feats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.liven__feat {
    display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 16px 16px;
    border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--glass);
    transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.liven__feat:hover { transform: translateY(-3px); border-color: var(--line); background: var(--glass-2); }
.liven__feat-ico {
    width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; font-size: 19px;
    border-radius: 11px; color: var(--acc-2); background: rgba(255,138,61,0.10); border: 1px solid var(--line);
}
.liven__feat-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.liven__feat-txt b { font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.liven__feat-txt i { font-style: normal; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- «Пример оживления» — видео-демо (scoped, razdet-devushku.html) ---------- */
.livedemo { display: grid; grid-template-columns: 0.72fr 1fr; gap: 24px; max-width: 1020px; margin: 0 auto; align-items: stretch; }
/* левая колонка: вертикальное видео в рамке */
.livedemo__player {
    position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--bg-3);
    aspect-ratio: 834 / 1112; width: 100%; max-width: 340px; justify-self: center; align-self: center;
}
.livedemo__video { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .5s var(--ease), transform .6s var(--ease); }
.is-photo .livedemo__video { filter: saturate(.92) brightness(.98); transform: scale(1.015); }
.is-video .livedemo__video { filter: none; transform: none; }
.livedemo__badge {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .3px;
    padding: 5px 11px; border-radius: 999px;
    transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.is-photo .livedemo__badge {
    background: rgba(18,18,24,.62); color: var(--ink);
    border: 1px solid var(--line-soft); box-shadow: none;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.is-video .livedemo__badge {
    background: var(--acc); color: var(--on-acc);
    box-shadow: var(--shadow-acc); border: 1px solid transparent;
}
.livedemo__badge::before { content: "❚❚"; font-size: 8px; letter-spacing: -1px; }
.is-video .livedemo__badge::before { content: "▶"; font-size: 9px; letter-spacing: 0; }
.livedemo__badge-lbl { display: none; }
.is-photo .livedemo__badge-lbl--photo { display: inline; }
.is-video .livedemo__badge-lbl--video { display: inline; }
/* световой свайп «оживления» — один прогон при переходе фото → видео */
.livedemo__sweep {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    transform: translateX(-120%);
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.30) 48%, rgba(255,180,120,.38) 53%, transparent 68%);
}
.is-revealing .livedemo__sweep { animation: ldSweep .7s var(--ease) forwards; }
@keyframes ldSweep {
    0%   { transform: translateX(-120%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}
.livedemo__cap {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 22px 14px 12px; font-size: 12px; color: var(--ink-soft);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
}
.livedemo__cap-lbl { display: none; }
.is-photo .livedemo__cap-lbl--photo { display: block; }
.is-video .livedemo__cap-lbl--video { display: block; }
/* правая колонка: glass-панель, по высоте вровень с видео */
.livedemo__body {
    display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
    padding: 36px 34px; border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft); background: var(--glass);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.livedemo__head { display: flex; flex-direction: column; }
.livedemo__kicker {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: var(--acc-2); margin-bottom: 14px;
}
/* заголовок + текст держим как единую группу — небольшой фикс. отступ между ними */
.livedemo__title { font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 29px); font-weight: 700; color: var(--ink); margin-bottom: 12px; line-height: 1.25; }
.livedemo__text { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
/* мини-факты об оживлении — маркеры-галочки в акцентном кружке */
.livedemo__points { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.livedemo__points li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.livedemo__pt-ico {
    flex-shrink: 0; margin-top: 1px;
    width: 21px; height: 21px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: var(--on-acc);
    background: var(--acc-grad); box-shadow: 0 2px 10px var(--acc-glow);
}
.livedemo__source {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
    padding: 13px 18px; border-radius: 16px;
    border: 1px solid rgba(255,120,80,.35); background: rgba(255,120,80,.08);
    color: var(--ink); text-decoration: none;
    transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.livedemo__source:hover { transform: translateY(-2px); border-color: rgba(255,120,80,.6); background: rgba(255,77,109,0.12); }
.livedemo__source-ico { font-size: 20px; line-height: 1; }
.livedemo__source-txt { display: flex; flex-direction: column; gap: 1px; }
.livedemo__source-txt b { font-family: var(--font-head); font-size: 14.5px; font-weight: 600; }
.livedemo__source-txt span { font-size: 12.5px; color: var(--ink-soft); }
.livedemo__source-go { margin-left: 4px; color: var(--acc-soft); font-size: 18px; font-weight: 700; }
/* бегущее свечение по обводке (по часовой) — как у кнопки «Улучшить промпт» */
@property --ld-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.livedemo__source::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--ld-angle),
        rgba(255,138,61,0) 0deg,
        rgba(255,138,61,0) 210deg,
        #ff8a3d 290deg,
        #ff4d6d 335deg,
        rgba(255,77,109,0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    filter: drop-shadow(0 0 5px rgba(255,120,80,.75));
    pointer-events: none;
    animation: ldBeam 2.8s linear infinite;
}
@keyframes ldBeam { to { --ld-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .livedemo__source::after { animation: none; } }
@media (prefers-reduced-motion: reduce) {
    .livedemo__sweep { display: none; }
    .livedemo__video { transition: none; }
    .is-photo .livedemo__video { transform: none; }
}

/* ---------- «Идеальное оживление» — маршрут из 3 шагов с развилкой (scoped, razdet-devushku.html) ---------- */
.liveflow-section { position: relative; overflow: hidden; }
.liveflow-section__glow {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
    width: 920px; height: 440px; max-width: 120%;
    background: radial-gradient(ellipse at center, rgba(255,77,109,0.12), rgba(255,138,61,0.05) 46%, transparent 72%);
    filter: blur(30px); pointer-events: none; z-index: 0;
}
.liveflow-section .container { position: relative; z-index: 1; }

/* маршрут: 3 карты в ряд, соединённые рельсой с бегущим лучом */
.liveflow {
    list-style: none; position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    max-width: 1040px; margin: 0 auto; padding-top: 26px;
}
/* соединительная рельса (десктоп) — проходит через узлы у верхней кромки карт */
.liveflow::before {
    content: ""; position: absolute; z-index: 0;
    top: 26px; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,138,61,.5) 12%, rgba(255,77,109,.5) 88%, transparent);
    border-radius: 2px;
}
/* бегущий по рельсе луч-комета */
.liveflow::after {
    content: ""; position: absolute; z-index: 1;
    top: 22px; left: 8%; width: 90px; height: 10px; border-radius: 10px;
    background: radial-gradient(ellipse at center, rgba(255,150,90,.95), rgba(255,77,109,.35) 55%, transparent 75%);
    filter: blur(1px); pointer-events: none;
    animation: liveflowBeam 4.5s var(--ease) infinite;
}
@keyframes liveflowBeam {
    0%   { left: 8%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: calc(92% - 90px); opacity: 0; }
}
/* вертикальный вариант луча — для планшета/мобилы (рельса слева) */
@keyframes liveflowBeamV {
    0%   { top: 0; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: calc(100% - 70px); opacity: 0; }
}

/* карта-шаг — «горит» по умолчанию: акцентная рамка + мягкое свечение */
.liveflow__step {
    position: relative; z-index: 2; overflow: hidden;
    padding: 30px 26px 26px; border-radius: var(--radius-lg); border: 1px solid var(--acc);
    background: var(--glass-2);
    box-shadow: 0 12px 34px rgba(0,0,0,0.4), 0 0 22px rgba(255,77,109,0.14);
    display: flex; flex-direction: column; min-width: 0;
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
/* градиентная нить по верхней кромке — видна по умолчанию, усиливается на hover */
.liveflow__step::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--acc-grad); opacity: .9; transition: opacity .35s var(--ease); z-index: 3;
}
/* призрачная watermark-цифра в фоне */
.liveflow__step::after {
    content: attr(data-num);
    position: absolute; right: 12px; bottom: -22px; z-index: 0;
    font-family: var(--font-head); font-weight: 800; font-size: 120px; line-height: 1; letter-spacing: -4px;
    color: rgba(255,122,144,0.06); pointer-events: none;
    transition: color .35s var(--ease), transform .35s var(--ease);
}
.liveflow__step > * { position: relative; z-index: 1; }

/* узел-точка на рельсе (у верхней кромки карты) */
.liveflow__node {
    position: absolute; top: -6px; left: 30px; z-index: 4;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 4px rgba(255,77,109,0.15), 0 0 16px var(--acc-glow);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.liveflow__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.liveflow__num {
    font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1; flex-shrink: 0;
    color: transparent; background: var(--acc-grad); -webkit-background-clip: text; background-clip: text;
}
.liveflow__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); }
.liveflow__text { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* hover — лёгкая надстройка поверх «горящего» состояния: подъём и усиление */
.liveflow__step:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 34px rgba(255,77,109,0.24);
}
.liveflow__step:hover::before { opacity: 1; }
.liveflow__step:hover::after { color: rgba(255,122,144,0.09); transform: translateY(-5px); }
.liveflow__step:hover .liveflow__node {
    transform: scale(1.18);
    box-shadow: 0 0 0 5px rgba(255,77,109,0.20), 0 0 22px var(--acc-glow);
}
@media (prefers-reduced-motion: reduce) { .liveflow::after { animation: none; opacity: 0; } }
/* каскадное появление шагов (использует общий .reveal/.is-visible из main.js) */
.liveflow__step:nth-child(2).reveal { transition-delay: .1s; }
.liveflow__step:nth-child(3).reveal { transition-delay: .2s; }


/* ---------- Горизонтальные шаги ---------- */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1020px; margin: 0 auto; }
.step-card {
    position: relative; padding: 34px 28px 28px;
    border-radius: var(--radius); border-color: var(--line-soft);
    transition: transform .3s var(--ease), border-color .3s;
}
.step-card:hover { transform: translateY(-4px); border-color: var(--line); }
.step-card__num {
    font-family: var(--font-head); font-weight: 700; font-size: 34px;
    color: transparent; background: var(--acc-grad);
    -webkit-background-clip: text; background-clip: text;
    line-height: 1; margin-bottom: 12px;
}
.step-card h3 { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.step-card p { color: var(--ink-soft); font-size: 15px; }

/* ---------- «Как работает» — вариант с потоком (scoped, только razdevator.html) ---------- */
.steps-section--flow { position: relative; overflow: hidden; }

/* мягкий тёплый ambient-свет за секцией */
.steps-section__glow {
    position: absolute; top: 50%; left: 50%;
    width: 900px; height: 420px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255, 77, 109, 0.12), rgba(255, 138, 61, 0.05) 45%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.steps-section--flow .container { position: relative; z-index: 1; }

/* горизонтальная линия-поток за карточками (десктоп) */
.steps-section--flow .steps-row { position: relative; }
.steps-section--flow .steps-row::before {
    content: "";
    position: absolute; top: 52px; left: 12%; right: 12%;
    height: 2px; z-index: 0;
    background: linear-gradient(90deg, transparent, var(--acc) 18%, var(--acc-2) 82%, transparent);
    opacity: .5;
}

/* карточки поверх линии + плавные детали */
.steps-section--flow .step-card {
    z-index: 1;
    overflow: hidden;
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}

/* тонкая градиентная «нить» по верхней кромке — разгорается на hover */
.steps-section--flow .step-card::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--acc-grad);
    opacity: 0; transition: opacity .35s var(--ease);
}

/* призрачная крупная цифра-watermark в фоне карточки */
.steps-section--flow .step-card::before {
    content: attr(data-num);
    position: absolute; right: 14px; bottom: -18px;
    font-family: var(--font-head); font-weight: 800; font-size: 128px;
    line-height: 1; letter-spacing: -4px;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none; z-index: 0;
    transition: color .35s var(--ease), transform .35s var(--ease);
}
/* содержимое карточки — поверх watermark */
.steps-section--flow .step-card > * { position: relative; z-index: 1; }

/* узел-точка на линии-потоке (у верхнего края номера) */
.steps-section--flow .step-card__num { position: relative; display: inline-block; }
.steps-section--flow .step-card__num::before {
    content: "";
    position: absolute; top: -30px; left: 2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.15), 0 0 14px var(--acc-glow);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* живой hover: подъём, свечение контура и «разгорание» деталей */
.steps-section--flow .step-card:hover {
    transform: translateY(-6px);
    border-color: var(--acc);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45), 0 0 28px rgba(255, 77, 109, 0.20);
}
.steps-section--flow .step-card:hover::after { opacity: .9; }
.steps-section--flow .step-card:hover::before { color: rgba(255, 122, 144, 0.07); transform: translateY(-4px); }
.steps-section--flow .step-card:hover .step-card__num::before {
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(255, 77, 109, 0.20), 0 0 20px var(--acc-glow);
}

/* каскадное появление шагов (использует общий .reveal/.is-visible из main.js) */
.steps-section--flow .step-card:nth-child(2).reveal { transition-delay: .12s; }
.steps-section--flow .step-card:nth-child(3).reveal { transition-delay: .24s; }

/* на планшете/мобиле линия-поток и узлы не нужны (карточки идут в столбик/2 колонки) */
@media (max-width: 880px) {
    .steps-section--flow .steps-row::before { display: none; }
    .steps-section--flow .step-card__num::before { display: none; }
    .steps-section__glow { width: 620px; height: 340px; }
}

/* ---------- Галерея «до / после» (страница «раздеть девушку») ---------- */
.ba-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ba-card {
    border-radius: var(--radius); overflow: hidden; border-color: var(--line-soft);
    transition: transform .3s var(--ease), border-color .3s;
}
.ba-card:hover { transform: translateY(-3px); border-color: var(--line); }
/* внутри карточки слайдер занимает всю ширину — сбрасываем центрирование и рамку одиночного .compare */
.ba-gallery .compare {
    max-width: none; margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
}
/* бейдж категории — в нижнем-левом углу, вне пути вертикальной линии ползунка */
.ba-card__cat {
    position: absolute; bottom: 12px; left: 12px; z-index: 6;
    font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 4px 10px; border-radius: 8px;
    background: var(--acc); color: var(--on-acc); box-shadow: var(--shadow-acc);
}
.ba-card figcaption { padding: 14px 16px; font-size: 14.5px; color: var(--ink-soft); border-top: 1px solid var(--line-soft); }

@media (max-width: 880px) {
    .hero--mirror .hero__grid { grid-template-areas: "copy" "tool" "extra"; }
    /* на узких экранах чипам можно переноситься */
    .hero--mirror-rich .hero__trust { flex-wrap: wrap; }
    .feats { grid-template-columns: 1fr; }
    .ba-gallery, .steps-row { grid-template-columns: 1fr 1fr; }
    .rzflow { grid-template-columns: 1fr; }
    /* маршрут оживления → вертикальный: рельса слева, карты в столбик */
    .liveflow { grid-template-columns: 1fr; gap: 16px; padding-top: 0; padding-left: 30px; }
    .liveflow::before { top: 8px; bottom: 8px; left: 5px; right: auto; width: 2px; height: auto;
        background: linear-gradient(180deg, transparent, rgba(255,138,61,.5) 10%, rgba(255,77,109,.5) 90%, transparent); }
    .liveflow::after { top: 0; left: 0; width: 10px; height: 70px; animation: liveflowBeamV 4.5s var(--ease) infinite; }
    .liveflow__step { padding: 24px 22px 22px; }
    .liveflow__node { top: 26px; left: -30px; }
    .liven { padding: 28px 24px 26px; }
    .liven__feats { grid-template-columns: repeat(2, 1fr); }
    .livedemo { grid-template-columns: 1fr; gap: 24px; }
    .livedemo__body { text-align: center; align-items: center; padding: 26px 22px; }
    .livedemo__kicker, .livedemo__source { align-self: center; }
    .livedemo__source { text-align: left; }
    .livedemo__points { text-align: left; }
}
@media (max-width: 560px) {
    .ba-gallery, .steps-row { grid-template-columns: 1fr; }
    /* колонки значений равны между собой (симметрия «Lovice» и «Обычные»); шапку тоже ужимаем */
    .cmp-row { grid-template-columns: 1.3fr 1fr 1fr; }
    .cmp-cell { padding: 12px 10px; font-size: 13px; gap: 6px; }
    .cmp-row--head .cmp-cell { font-size: 13.5px; }
    .liven__feats { grid-template-columns: 1fr; }
}


/* ---- SHARED gen-* (used by both generator and anime) ---- */
/* ---------- HERO: генератор 18+ (простой центрированный) ---------- */
.gen-hero { position: relative; padding: 60px 0 46px; overflow: hidden; }
.gen-hero__aura {
    position: absolute; top: -190px; left: 50%; right: auto; transform: translateX(-50%);
    width: 940px; height: 620px;
    background: radial-gradient(closest-side, rgba(255,77,109,0.18), transparent);
    filter: blur(28px); pointer-events: none; z-index: -1;
}
.gen-hero__inner {
    max-width: 840px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.gen-hero__copy {
    min-width: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center;
}
.gen-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 17px; border-radius: 999px; border-color: var(--line);
    font-size: 13.5px; color: var(--ink-soft); margin-bottom: 24px;
}
.gen-hero__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--acc); box-shadow: 0 0 12px var(--acc);
    animation: pulse 2.2s infinite;
}
.gen-hero__title {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08;
    letter-spacing: -.6px; margin-bottom: 18px;
}
.gen-hero__title .acc-text { display: block; }
.gen-hero__lead {
    max-width: 640px; margin: 0 auto 30px;
    color: var(--ink-soft); font-size: clamp(15.5px, 1.5vw, 17.5px);
}
.gen-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; justify-content: center; }

/* HERO аниме: двухколоночный на десктопе, компактный на мобилке */
.gen-hero__split {
    display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 46px; align-items: center;
    max-width: 1120px; margin: 0 auto;
}
.gen-hero__split .gen-hero__copy { align-items: flex-start; text-align: left; }
.gen-hero__split .gen-hero__badge { margin-left: 0; }
.gen-hero__split .gen-hero__title { margin-left: 0; margin-right: 0; }
.gen-hero__split .gen-hero__lead { margin-left: 0; margin-right: 0; }
.gen-hero__split .gen-hero__cta,
.gen-hero__split .gen-hero__meta { justify-content: flex-start; }

/* мини-рейтинг (соц-доказательство) */
.gen-hero__rating { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.gen-hero__stars { color: var(--acc-2); letter-spacing: 2px; font-size: 15px; }
.gen-hero__rating-text { font-size: 13.5px; color: var(--ink-mute); }
.gen-hero__rating-text b { color: var(--acc-soft); font-weight: 700; }

/* блочки-преимущества под кнопками hero */
.gen-hero__perks {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    width: 100%; max-width: 720px; margin: 6px auto 0;
}
.gen-hero__perk {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
    border: 1px solid var(--line-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.gen-hero__perk:hover {
    transform: translateY(-3px); border-color: var(--acc);
    box-shadow: 0 18px 36px -24px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,0.06);
}
.gen-hero__perk-ico {
    flex: none; width: 42px; height: 42px; display: grid; place-items: center;
    font-size: 20px; line-height: 1; border-radius: 12px;
    background: rgba(12, 12, 16, 0.55);
    border: 1px solid rgba(255,122,144,0.35);
    box-shadow: inset 0 0 14px rgba(255,77,109,0.14), 0 6px 16px -10px rgba(255,77,109,0.5);
}
.gen-hero__perk-txt { min-width: 0; }
.gen-hero__perk b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.gen-hero__perk span { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
@media (max-width: 640px) {
    .gen-hero__perks { grid-template-columns: 1fr; max-width: 360px; gap: 10px; }
}

@media (max-width: 900px) {
    .gen-hero__split { grid-template-columns: 1fr; gap: 22px; max-width: 640px; }
    .gen-hero__split .gen-hero__copy { align-items: center; text-align: center; }
    .gen-hero__split .gen-hero__cta,
    .gen-hero__split .gen-hero__meta,
    .gen-hero__rating { justify-content: center; }
    .gen-hero__showcase { display: none; }   /* мобилка — визуал скрыт, до инструмента близко */
}

/* ---------- HERO showcase: живая консоль «промпт → превью» ---------- */
.gen-hero__showcase { position: relative; min-width: 0; }
.gen-console {
    position: relative; width: 100%; margin: 0;
    border-radius: var(--radius-lg); border-color: var(--line);
    box-shadow: var(--shadow); overflow: hidden; text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.gen-console::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(120% 90% at 82% 0%, rgba(255,77,109,0.16), transparent 60%);
    pointer-events: none;
}
.gen-console > * { position: relative; z-index: 1; }
.gen-console__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
    background: rgba(255,255,255,0.03);
}
.gen-console__dots { display: flex; gap: 6px; }
.gen-console__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.gen-console__dots i:first-child { background: var(--acc); }
.gen-console__label { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-mute); }
.gen-console__soon {
    margin-left: auto; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--acc-soft);
    background: rgba(255,77,109,0.12); border: 1px solid rgba(255,77,109,0.28);
    padding: 4px 10px; border-radius: 999px;
}
.gen-console__prompt {
    padding: 22px 20px; min-height: 92px;
    font-family: var(--font-mono); font-size: 14.5px; line-height: 1.7; color: var(--ink);
}
.gen-console__prompt::before { content: "> "; color: var(--acc-soft); }
.gen-console__mono { color: var(--ink-soft); }
.gen-console__caret {
    display: inline-block; width: 9px; height: 18px; margin-left: 2px;
    vertical-align: -3px; background: var(--acc);
    animation: genCaret 1.05s steps(1) infinite;
}
@keyframes genCaret { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }
.gen-console__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; padding: 0 20px 18px;
}
.gen-console__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.gen-chip {
    font-size: 13px; font-weight: 600; color: var(--ink-soft);
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--line-soft); background: rgba(255,255,255,0.04);
}
.gen-chip.is-on { background: var(--acc-grad); color: var(--on-acc); border-color: transparent; }
.gen-console__out {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; padding: 0 20px 20px;
}
.gen-tile {
    position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--line-soft);
    background: linear-gradient(135deg, #241620, #1a1620);
}
.gen-tile__badge {
    position: absolute; top: 8px; left: 8px;
    width: 20px; height: 20px; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; border-radius: 6px;
    color: var(--on-acc); background: var(--acc-grad);
}
.gen-tile--gen::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,138,61,0.22) 40%, rgba(255,77,109,0.25) 50%, transparent 70%);
    background-size: 250% 100%;
    animation: genShimmer 2.4s var(--ease) infinite;
}
.gen-tile:nth-child(2).gen-tile--gen::after { animation-delay: .3s; }
.gen-tile:nth-child(3).gen-tile--gen::after { animation-delay: .6s; }
.gen-tile:nth-child(4).gen-tile--gen::after { animation-delay: .9s; }
@keyframes genShimmer { 0%{background-position:130% 0;} 100%{background-position:-130% 0;} }

.gen-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; justify-content: center; }
.gen-hero__meta span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--ink-soft);
    border: 1px solid var(--line); background: rgba(255,77,109,0.05);
}

/* индикатор live в шапке консоли */
.gen-console__live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--acc-soft);
}
.gen-console__live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #46d17b; box-shadow: 0 0 10px #46d17b; animation: pulse 2s infinite;
}

/* область превью: крупная плитка + парящие мини-превью */
.gen-console__preview { position: relative; margin: 4px 20px 8px; }
.gen-hero-shot {
    position: relative; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line-soft);
}
.gen-hero-shot__badge {
    position: absolute; top: 9px; left: 9px; z-index: 3;
    padding: 3px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 700;
    color: var(--on-acc); background: var(--acc-grad);
}
.gen-hero-shot__style {
    position: absolute; left: 10px; bottom: 10px; z-index: 3;
    padding: 5px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
    color: var(--ink); background: rgba(12,12,16,0.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line-soft);
}
.gen-hero-shot--main { aspect-ratio: 5 / 4; }
.gen-hero-shot--main::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.16) 48%, transparent 66%);
    background-size: 250% 100%; animation: genShimmer 3.2s var(--ease) infinite;
}
.gen-hero-shot--mini {
    position: absolute; width: 32%; aspect-ratio: 3 / 4; z-index: 4;
    box-shadow: var(--shadow);
}
.gen-hero-shot--mini .gen-hero-shot__badge { top: 6px; left: 6px; padding: 2px 6px; font-size: 9.5px; }
.gen-hero-shot--m1 { right: 10px; top: 12%; animation: genFloat 5s ease-in-out infinite; }
.gen-hero-shot--m2 { right: 15%; bottom: 8px; width: 26%; animation: genFloat 6.5s ease-in-out infinite reverse; }
@keyframes genFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

/* нижняя строка консоли */
.gen-console__time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .gen-hero-shot--main::after, .gen-hero-shot--m1, .gen-hero-shot--m2 { animation: none !important; }
}

.gen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; }
.gen-shot {
    position: relative; aspect-ratio: 3 / 4;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--acc-soft);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 20px 44px -30px var(--acc-glow);
    transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.gen-shot:hover {
    border-color: var(--acc);
    box-shadow: 0 28px 54px -26px var(--acc-glow);
    transform: translateY(-3px);
}
.gen-shot__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s var(--ease);
}
.gen-shot:hover .gen-shot__img { transform: scale(1.05); }
.gen-shot__cap {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    padding: 14px; display: flex; flex-direction: column; gap: 8px;
    background: linear-gradient(180deg, transparent, rgba(8,8,11,0.85));
}
.gen-shot__tag {
    align-self: flex-start; font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 7px; background: var(--acc); color: var(--on-acc);
}
.gen-shot__prompt {
    font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-soft);
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .35s var(--ease), opacity .3s;
}
.gen-shot:hover .gen-shot__prompt { max-height: 120px; opacity: 1; }

/* галерея: клик-зум + NSFW-страховка (карточки 18+) */
.gen-shot { cursor: zoom-in; }
.gen-shot__18 {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 8px;
    color: var(--on-acc); background: var(--acc-grad);
}
.gen-shot--nsfw .gen-shot__img { filter: blur(22px) brightness(.7); transform: scale(1.08); }
.gen-shot--nsfw.is-revealed .gen-shot__img {
    filter: none; transform: none;
    transition: filter .4s var(--ease), transform .5s var(--ease);
}
.gen-shot__nsfw {
    position: absolute; inset: 0; z-index: 3; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    cursor: pointer; border: none; background: rgba(8,8,11,0.30);
    font-family: var(--font-body); color: var(--ink);
}
.gen-shot--nsfw.is-revealed .gen-shot__nsfw { display: none; }
.gen-shot__nsfw-ico { font-size: 28px; line-height: 1; }
.gen-shot__nsfw-txt {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink);
    background: rgba(12,12,16,0.66); border: 1px solid var(--line);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}


/* ---- responsive for shared gen-* ---- */
@media (max-width: 880px) {
    .gen-hero__aura { top: -140px; }
    .gen-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
@media (max-width: 560px) {
    .gen-hero { padding: 36px 0 28px; }
    .gen-hero__cta .btn { width: 100%; justify-content: center; }
    .gen-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* =====================================================================
   REVEAL ANIMATION (scroll)
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
    .navbar__nav { display: none; }
    .navbar__burger { display: flex; }
    /* Профиль-чип — только для десктопа. На планшете/мобилке (виден бургер) весь
       функционал профиля живёт в drawer (группа «Профиль»), поэтому чип прячем. */
    #navProfile { display: none !important; }
}

@media (max-width: 880px) {
    /* hero → одна колонка: заголовок, инструмент сразу, потом преимущества.
       Селекторы через .hero--home, чтобы перебить десктопное правило
       «.hero--home .hero__grid» (2 колонки) — медиазапрос не повышает
       специфичность, поэтому веса должны совпадать. */
    .hero__grid,
    .hero--home .hero__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "copy" "tool" "extra";
        row-gap: 22px;
    }
    .hero--home .hero__copy  { align-self: start; }
    .hero--home .hero__tool  { margin-top: 0; }
    .hero--home .hero__extra { margin-top: 0; }
    .hero { padding: 32px 0 52px; }
    .hero__subtitle { max-width: 600px; }
    .hero__tool { max-width: 560px; width: 100%; margin: 0 auto; }
    .hero__features { max-width: 560px; margin-left: auto; margin-right: auto; }
    .hero__glow { left: 50%; top: -90px; }
    .examples__grid, .how__steps, .why__grid { grid-template-columns: 1fr 1fr; }
    .footer__inner { grid-template-columns: repeat(3, 1fr); }
    .footer__col--brand { grid-column: 1 / -1; }
    /* bento «Возможности» → 2 колонки, спаны сбрасываем */
    .rzf { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
    .rzf__cell--wide, .rzf__cell--tall { grid-column: auto; grid-row: auto; }
}

@media (max-width: 560px) {
    section { padding: 48px 0; }
    .container { padding: 0 18px; }
    .credits { display: none; }
    .navbar__actions .btn--sm { display: none; }
    .examples__grid, .how__steps, .why__grid { grid-template-columns: 1fr; }
    /* bento «Возможности» → одна колонка на телефоне */
    .rzf { grid-template-columns: 1fr; max-width: 460px; }
    /* .hero__features — оставляем 2×2 (компактно по высоте), не переводим в 1 колонку */
    .tool__card { padding: 18px; }
    .modal__dialog { padding: 26px 18px; }
    .footer__inner { grid-template-columns: 1fr; }
    .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
    /* CTA — компактнее на телефоне + кнопка на всю ширину */
    .cta__card { padding: 44px 22px; }
    .cta__text { font-size: 15px; margin-bottom: 24px; }
    .cta__card .btn { width: 100%; }
    /* примеры «до/после» в 1 колонку — ограничиваем ширину, чтобы фото не растягивалось */
    .examples__grid, .why__grid { max-width: 420px; margin-left: auto; margin-right: auto; }
    /* полоса метрик студии → сетка 2×2 (в один ряд из 4 не влезает на телефоне) */
    .hero--center .hero__stats { gap: 16px 0; padding: 18px 16px; }
    .hero__stat { flex: 0 0 50%; min-width: 0; }
    /* на 2×2 вертикальный разделитель убираем (иначе он «висит» слева у 3-й ячейки) */
    .hero__stat + .hero__stat::before { display: none; }
}

@media (max-width: 480px) {
    section { padding: 40px 0; }
    .section-sub { margin-bottom: 34px; font-size: 15.5px; }
    /* hero — плотнее */
    .hero__badge { font-size: 12.5px; padding: 7px 14px; margin-bottom: 18px; }
    .hero__title { font-size: clamp(30px, 8.5vw, 40px); letter-spacing: -0.5px; }
    .hero__subtitle { font-size: 15.5px; }
    /* плитки преимуществ — на телефоне чуть меньше текст (база уже компактная) */
    .hero__feat-txt { font-size: 12.5px; }
    /* рейтинг: звёзды + текст одним инлайновым потоком (без «рваного» переноса), по центру */
    .hero__rating { display: block; text-align: center; }
    .hero__stars { font-size: 15px; letter-spacing: 1px; margin-right: 6px; vertical-align: middle; }
    .hero__rating-text { font-size: 13.5px; }
    /* чипы доверия — компактнее и по центру (одинокий чип во 2-м ряду встаёт по середине) */
    .hero__trust { gap: 7px; justify-content: center; }
    .hero__trust-item { font-size: 11.5px; padding: 6px 10px; gap: 5px; }
    /* карточки why/faq/cta — меньше внутренние отступы */
    .why__card { padding: 24px 20px; }
    .why__ico { width: 42px; height: 42px; font-size: 18px; margin-bottom: 13px; }
    .why__card h3 { font-size: 17px; }
    .why__card p { font-size: 14.5px; }
    .faq__q { padding: 16px 16px; font-size: 15.5px; gap: 12px; }
    .faq__q::after { font-size: 20px; }
    .faq__a { padding: 0 16px 18px; font-size: 14.5px; }
    .cta__card { padding: 40px 18px; }
    .cta__title { margin-bottom: 12px; }
}

/* Таблица сравнения на узких телефонах (375/320px): ещё компактнее, колонки значений остаются равными.
   Шапку уменьшаем, длинный заголовок «Обычные генераторы» при необходимости переносится на 2 строки. */
@media (max-width: 400px) {
    .cmp-row { grid-template-columns: 1.25fr 1fr 1fr; }
    .cmp-cell { padding: 10px 7px; font-size: 12px; gap: 4px; }
    .cmp-row--head .cmp-cell { font-size: 12.5px; }
}

@media (max-width: 380px) {
    .container { padding: 0 14px; }
    /* «Оживить фото»: ужимаем кино-ленту и карту, чтобы влезало в 320px без горизонтального скролла */
    .liven { padding: 24px 16px; }
    .liven__strip { gap: 7px; }
    .liven__frame { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
    .liven__arrow { font-size: 16px; }
    .liven__feat { padding: 14px 13px; }
    .hero__title { font-size: clamp(26px, 8vw, 34px); }
    .hero__badge { font-size: 12px; }
    .btn--xl { padding: 16px 22px; font-size: 16px; }
    .btn--lg { padding: 14px 24px; font-size: 15px; }
    .section-title { font-size: clamp(24px, 7vw, 30px); }
    .why__card { padding: 20px 16px; }
    .seo__title { font-size: clamp(22px, 6.5vw, 27px); }
    .cta__title { font-size: clamp(26px, 8vw, 34px); }
    /* плитки — на самых узких ужимаем отступ/промежуток (текст короткий, влезает в 2×2) */
    .hero__features { gap: 8px; }
    .hero__features li { padding: 9px 10px; gap: 8px; }
    .hero__feat-txt { font-size: 12px; }
}

/* =====================================================================
   RELATED TOOLS — карусель внутренней перелинковки (все 5 страниц)
   Карточка-ссылка на другой инструмент; у раздевающих внутри — авто-эффект
   «до → световой блик → после» (механика из livedemo), у генераторов — фото.
   ===================================================================== */
.related { padding: 84px 0; position: relative; overflow: hidden; }
/* мягкое коралловое свечение за каруселью — фирменный glow сайта */
.related__glow {
    position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
    width: min(1000px, 92%); height: 520px; pointer-events: none; z-index: 0;
    background:
        radial-gradient(closest-side, rgba(255,77,109,0.16), transparent 70%),
        radial-gradient(closest-side, rgba(255,138,61,0.08), transparent 72%);
    filter: blur(26px);
}
.related .container { position: relative; z-index: 1; }
.related__viewport { position: relative; max-width: 1120px; margin: 0 auto; }
.related__track {
    display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scroll-padding: 0 4px; padding: 10px 4px 16px;
    scrollbar-width: none;
}
.related__track::-webkit-scrollbar { display: none; }
/* карточка = цельная «афиша»: фото на всю площадь, текст оверлеем снизу */
.related__card {
    flex: 0 0 calc((100% - 44px) / 3.2); scroll-snap-align: start;
    position: relative; display: block; text-decoration: none;
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow);
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.related__card:hover {
    transform: translateY(-5px);
    border-color: var(--acc);
    box-shadow: 0 30px 60px -26px var(--acc-glow), 0 18px 40px rgba(0,0,0,.5);
}
.related__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-2); }
.related__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.related__card:hover .related__img { transform: scale(1.05); }
/* авто-эффект «до/после»: два кадра друг над другом + кроссфейд */
.related-reveal .related__img { position: absolute; inset: 0; transition: opacity .45s var(--ease), transform .5s var(--ease); }
.related-reveal .related__img--a { opacity: 1; }
.related-reveal .related__img--b { opacity: 0; }
.related-reveal.is-b .related__img--a { opacity: 0; }
.related-reveal.is-b .related__img--b { opacity: 1; }
/* световой свайп — тот же приём, что в livedemo (ldSweep) */
.related__sweep {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    transform: translateX(-120%);
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.30) 48%, rgba(255,180,120,.38) 53%, transparent 68%);
}
.related-reveal.is-revealing .related__sweep { animation: ldSweep .7s var(--ease) forwards; }
/* тег-плашка сверху */
.related__tag {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--ink);
    padding: 5px 11px; border-radius: 999px; background: rgba(10,10,14,.62);
    border: 1px solid var(--line-soft);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.related__tag--gen { background: var(--acc-grad); color: var(--on-acc); border-color: transparent; box-shadow: 0 2px 10px var(--acc-glow); }
/* текстовый оверлей поверх фото снизу (стиль gen-shot) */
.related__overlay {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 5px;
    padding: 42px 16px 16px;
    background: linear-gradient(180deg, transparent, rgba(8,8,11,0.55) 42%, rgba(8,8,11,0.92));
}
.related__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.related__sub { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.related__go { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--acc-soft); display: inline-flex; align-items: center; gap: 6px; }
.related__arr { transition: transform .25s var(--ease); }
.related__card:hover .related__arr { transform: translateX(4px); }
/* стрелки — SVG-шеврон, ровно по центру круга */
.related__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 48px; height: 48px; border-radius: 999px; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; color: var(--ink);
    background: rgba(14,14,19,.78); border: 1px solid var(--line-soft);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.related__chev { display: block; }
.related__nav:hover { background: var(--acc-grad); color: var(--on-acc); border-color: transparent; box-shadow: 0 10px 26px var(--acc-glow); }
.related__nav:active { transform: translateY(-50%) scale(.94); }
.related__nav--prev { left: -10px; }
.related__nav--next { right: -10px; }
.related__nav[hidden] { display: none; }
/* точки-пагинация */
.related__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.related__dot {
    width: 8px; height: 8px; border-radius: 999px; padding: 0; cursor: pointer;
    background: var(--line); border: none; transition: background .25s var(--ease), transform .25s var(--ease);
}
.related__dot.is-active { background: var(--acc); transform: scale(1.3); box-shadow: 0 0 10px var(--acc-glow); }
@media (max-width: 900px) {
    .related { padding: 64px 0; }
    .related__card { flex-basis: calc((100% - 22px) / 2.2); }
    .related__nav { display: none; }
}
@media (max-width: 560px) {
    .related__card { flex-basis: 82%; }
    .related__title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .related__sweep { display: none; }
    .related-reveal .related__img { transition: none; }
    .related__card:hover .related__img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}