/* Витрина ППР: два окна с живой прокруткой — ТОЛЬКО для ppr.szbi.ru.
   Отдельным файлом намеренно: landing.css общий для семейства сервисов и
   по контракту (tests/test_ui_parity_with_id.py) обязан быть байт в байт
   как у донора ИД. Своё складывать туда нельзя.

   Движение — на CSS-анимации, без JS-таймеров: цикл на таймере сажает
   батарею телефона и продолжает крутиться в фоновой вкладке. Ленты внутри
   продублированы в разметке, поэтому сдвиг на -50 % даёт бесшовное кольцо. */

.duo{
    display:flex;
    gap:28px;
    justify-content:center;
    align-items:flex-start;
    margin-top:34px;
}

/* Оба окна — один размер, как два одинаковых экрана рядом. */
.okno{
    flex:0 0 min(520px, 46vw);
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    box-shadow:0 18px 46px rgba(15,33,55,.13);
    overflow:hidden;
}
.okno-shapka{
    display:flex;align-items:center;gap:9px;
    padding:12px 16px;
    background:#0f2137;
    color:#e2e8f0;
    font-size:12.5px;letter-spacing:.03em;
}
.okno-tochka{
    width:8px;height:8px;border-radius:50%;
    background:#4ade80;flex-shrink:0;
    animation:okno-puls 2s infinite;
}
@keyframes okno-puls{0%,100%{opacity:1}50%{opacity:.25}}

.okno-ekran{
    position:relative;
    height:520px;
    overflow:hidden;
    background:#f8fafc;
}
.okno-ekran:focus-visible{outline:2px solid #0f2137;outline-offset:-2px;}

/* ─── Левое окно: записка едет вверх ─── */
.okno-vert{
    display:flex;flex-direction:column;gap:14px;
    padding:14px;
    animation:okno-vverh 42s linear infinite;
    will-change:transform;
}
@keyframes okno-vverh{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.okno-list{
    background:#fff;
    border:1px solid #e8eef5;
    border-radius:10px;
    padding:18px 20px 16px;
    flex-shrink:0;
}
.okno-list-shapka{
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:#94a3b8;margin-bottom:10px;
}
.okno-list h3{font-size:16px;line-height:1.35;margin:0 0 10px;color:#0f2137;font-weight:700;}
.okno-list p{font-size:13.5px;line-height:1.6;color:#475569;margin:0 0 8px;}
.okno-list-osn{
    margin-top:10px;padding-top:9px;border-top:1px solid #eef2f7;
    font-size:12px;font-style:italic;color:#94a3b8;
}

/* ─── Правое окно: схемы едут влево ─── */
.okno-goriz{
    display:flex;align-items:center;gap:14px;
    padding:14px;height:100%;
    /* gap между листами учитывается в ширине: иначе кольцо «дёргается». */
    box-sizing:border-box;
    animation:okno-vlevo 36s linear infinite;
    will-change:transform;
}
@keyframes okno-vlevo{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Лист вписывается по ШИРИНЕ окна: при подгонке по высоте чертёж
   становился шире окна и обрезался по правому краю — половина схемы
   уезжала за рамку. */
.okno-shema{
    flex:0 0 100%;margin:0;
    background:#fff;
    border:1px solid #e8eef5;
    border-radius:10px;
    padding:8px;
    align-self:center;
}
.okno-shema img{width:100%;height:auto;display:block;}


.vitrina-niz{margin-top:26px;}

/* Прокрутка руками остаётся всегда: анимация — приятная мелочь, а не
   единственный способ посмотреть. */
.okno-ekran{overflow:auto;scrollbar-width:none;}
.okno-ekran::-webkit-scrollbar{display:none;}

@media (prefers-reduced-motion:reduce){
    .okno-vert,.okno-goriz,.okno-tochka{animation:none;}
}

@media (max-width:820px){
    .duo{flex-direction:column;align-items:center;gap:22px;}
    .okno{flex-basis:auto;width:min(520px,92vw);}
    .okno-ekran{height:440px;}
    /* Схема вписана по ширине, и в окне высотой 440 px она занимала половину —
       остальное белое поле. Графическому окну высота по самому листу:
       ширина окна / 1,414 (пропорция листа) плюс поля. */
    .okno-ekran.goriz{height:calc(92vw / 1.414 + 40px);max-height:440px;}
}

/* Липкая шапка сайта перекрывала заголовок секции при переходе по якорю. */
#vitrina{scroll-margin-top:92px;}

/* ═══════════ Первый экран ужат под витрину ═══════════
   Правила .hero живут в общем landing.css, который по контракту сверки с
   донором ИД правится нельзя. Перекрываем здесь: этот файл подключается
   после и относится только к ППР. */
.hero{
    min-height:auto;
    padding-top:calc(var(--l-nav-h) + 22px);
    padding-bottom:26px;
}
.hero h1{font-size:clamp(23px,3.1vw,34px);margin-bottom:12px;}
.hero-sub{margin-bottom:14px;font-size:15px;}
/* Четыре плитки под кнопками съедали ~180 px первого экрана, а всё то же
   самое подробно разобрано ниже по странице (разделы «порядок работы» и
   «возможности»). Убираем: место отдано витрине, ради которой человек и
   принимает решение — он видит документ, а не читает о нём. */
.hero-stats{display:none;}
.hero-trust{margin-top:12px;font-size:12px;}
.vitrina{padding-top:18px;padding-bottom:34px;}
.vitrina .section-h{margin-bottom:6px;}
.vitrina .section-line{margin-bottom:10px;}

/* Стили имитации листа (.pdf-list, .pdf-tit, .pdf-sod, .pdf-tab и прочее)
   удалены вместе с самой имитацией: витрина показывает страницы настоящего
   документа картинками. Мёртвый CSS в общем файле хуже отсутствия стиля —
   его начинают править, думая, что он работает. */

/* ═══════════ Правое окно: меньше и впятеро быстрее ═══════════ */
.okno-shemy{flex:0 0 min(430px,40vw);}
.okno-shemy .okno-ekran{height:330px;}
/* Цикл растянут: при 7 с схемы мелькали и кольцо повторялось почти сразу.
   Схем стало семь, шаг — около 2,6 с на лист. */
/* Одиннадцать схем: шаг тот же (около 2,6 с на лист), кольцо повторяется
   почти вдвое реже прежнего. */
.okno-goriz{animation-duration:37s;}

@media (max-width:820px){
    .okno-doc .okno-ekran{height:520px;}
    .okno-shemy{width:min(430px,92vw);}
    .okno-shemy .okno-ekran{height:auto;}
    .hero-stats{display:none;}
}

/* ═══════════ Окна внутри первого экрана ═══════════
   Ниже кнопок и выше строки доверия: человек видит документ, не прокручивая.
   Размеры подобраны замером — вся связка «шапка + заголовок + кнопки + окна
   + строка доверия» обязана уместиться в 900 px вместе с липкой шапкой. */
.hero-duo{margin:22px auto 4px;}
.hero .okno{box-shadow:0 22px 60px rgba(0,0,0,.35);}
.hero .okno-doc .okno-ekran{height:360px;}
.hero .okno-shemy .okno-ekran{height:240px;}
.hero .okno-shemy{align-self:flex-start;}
.hero-trust{margin-top:14px;}

@media (max-width:820px){
    .hero-duo{margin-top:18px;}
    .hero .okno-doc .okno-ekran{height:320px;}
    .hero .okno-shemy .okno-ekran{height:auto;}
}

/* Схема тоже целиком: окно по высоте самого чертежа (ширина / 1,414 + поля). */
.hero .okno-shemy .okno-ekran{height:318px;}
.hero .okno-shemy .okno-shema{align-self:center;}

/* ═══════════ Окна браузера: одинаковые и меньше ═══════════
   Раньше это были «панели документа» разной высоты — левая 360, правая 318,
   и ширина тоже разная. Теперь оба окна одного размера и узнаются как окна
   браузера: три кнопки и адресная строка. */
.hero .okno,
.hero .okno-doc,
.hero .okno-shemy{
    flex:0 0 min(392px, 34vw);
    width:min(392px, 34vw);
    border-radius:10px;
    border:1px solid rgba(255,255,255,.14);
}
.hero .okno-shapka{
    background:#eef2f7;
    color:#64748b;
    padding:8px 12px;
    gap:12px;
    border-bottom:1px solid #dbe3ec;
}
.okno-knopki{display:inline-flex;gap:6px;flex-shrink:0;}
.okno-knopki i{width:9px;height:9px;border-radius:50%;display:block;}
.okno-knopki i:nth-child(1){background:#ff5f57;}
.okno-knopki i:nth-child(2){background:#febc2e;}
.okno-knopki i:nth-child(3){background:#28c840;}
.okno-adres{
    flex:1;
    background:#fff;
    border:1px solid #dbe3ec;
    border-radius:100px;
    padding:3px 12px;
    font-size:11px;
    color:#64748b;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Экран у обоих окон одинаковый. Высота — по чертежу: ширина листа схемы
   делится на 1,414, иначе в графическом окне остаётся белое поле. */
.hero .okno-doc .okno-ekran,
.hero .okno-shemy .okno-ekran{height:268px;}
.hero .okno-vert{gap:12px;padding:12px;}
.hero .okno-goriz{gap:10px;padding:10px;}
.hero .okno-shemy{align-self:auto;}
.hero-duo{gap:20px;}

@media (max-width:820px){
    .hero .okno,
    .hero .okno-doc,
    .hero .okno-shemy{flex-basis:auto;width:min(392px,92vw);}
    .hero .okno-doc .okno-ekran,
    .hero .okno-shemy .okno-ekran{height:250px;}
}

/* ═══════════ Настоящие страницы документа ═══════════
   Витрина показывает страницы, собранные боевым рендером (рамка по ГОСТ,
   боковые штампы, основная надпись со стадией и числом листов), а не их
   имитацию вёрсткой. Подделка «похожего листа» и была причиной ощущения
   «не точь-в-точь настоящий документ» — потому что и правда не он.
   Генератор: scripts/sobrat_vitrinu.py */
.pdf-str{
    display:block;width:100%;height:auto;
    background:#fff;
    border-radius:2px;
    box-shadow:0 1px 2px rgba(15,33,55,.14), 0 8px 20px rgba(15,33,55,.16);
}
.hero .okno-vert{gap:14px;padding:14px;background:#94a3b8;}

/* ═══════════ Глубина окон ═══════════
   Плоские блоки на градиенте выглядели наклейками. Тень многослойная: узкая
   контактная, средняя и дальняя мягкая — так предмет читается лежащим над
   фоном, а не нарисованным на нём. */
.hero .okno{
    border:1px solid rgba(255,255,255,.22);
    box-shadow:
        0 1px 2px rgba(2,8,20,.30),
        0 8px 18px rgba(2,8,20,.34),
        0 28px 54px rgba(2,8,20,.42),
        inset 0 1px 0 rgba(255,255,255,.35);
}
.hero .okno-shapka{
    background:linear-gradient(180deg,#f6f8fb,#e6ecf4);
    box-shadow:inset 0 -1px 0 #d5dfea;
}

/* Страница видна ЦЕЛИКОМ и по центру, как в PDF-вьювере в режиме «страница»:
   серое поле вокруг листа — часть узнаваемого образа. Кусок страницы в кадре
   читался как обрывок, а не как документ. */
.hero .okno-vert{align-items:center;}
.hero .pdf-str{
    width:auto;
    height:calc(307px - 28px - 2px);
    max-width:none;
}

/* Остановка при наведении убрана по просьбе владельца: движение не должно
   прерываться, когда курсор проходит мимо окна. Прокрутка руками осталась. */

/* ═══════════ Справка «что такое ППР»: вопросами, а не портянкой ═══════════
   Было четыре плотных абзаца подряд, в каждом по три-четыре ссылки на пункты
   нормативов. Такой текст не читают — его пролистывают. Разбито на короткие
   вопросы: заголовок ловит взгляд, ответ укладывается в одну-две фразы. */
.exam-lid{font-size:16px;line-height:1.65;margin-bottom:22px;}
.exam-qa{display:grid;gap:14px;margin-bottom:22px;}
.exam-q{
    border-left:3px solid rgba(255,255,255,.22);
    padding:2px 0 2px 16px;
}
.exam-q h3{
    font-size:15px;font-weight:800;margin:0 0 5px;
    color:#fff;letter-spacing:.01em;
}
.exam-q p{margin:0;font-size:14.5px;line-height:1.6;}

/* Одна колонка: левая часть секции узкая, и в две колонки строки ломались
   через слово. Дублирующие вопросы («полный и неполный объём», «работы на
   высоте») убраны из текста — они уже стоят карточками справа. */