/*
 * Стили ТОЛЬКО главной страницы.
 *
 * ⚠️ Грузятся ПОСЛЕ общих site.css: шапку и подвал рисует общая
 * обвязка, а свой вид блоков главной остаётся за этим файлом.
 *
 * ⚠️ Сюда НЕ добавлять правила шапки, меню, подвала, выпадашки
 * поиска и кнопки «наверх». Их вторая копия здесь уже приводила к
 * тому, что общая правка молча не доезжала до главной.
 */
:root{
    --ink:#0B1220; --dim:#4E5768; --line:#E6E9F0;
    --bg:#F6F7FB; --card:#FFFFFF; --blue:#0B5E90; --blue2:#0E76B3; --soft:#EAF4FB;
    /* ⚠️ Зелёный тут отставал от site.css: там его затемнили ради контраста
       (прежний #0E9F6E давал 3,39 на белом), а здесь остался старый. Главная
       свёрстана отдельно, и такие расхождения живут незамеченными. */
    --good:#0A6B4A; --warn:#8A3F07;
    /* Цвета знака — только для фигур, буквами они не читаются. */
    --brand-orange:#FF7A00; --brand-blue:#00A6FF; --brand-green:#00C721;
    --brand-ink:#A34A00;
    /* ⚠️ var(--brand) на этой странице используется в четырёх местах, а
       объявления не было НИ ОДНОГО. Неизвестная переменная не ломает вёрстку
       с грохотом: правило просто отменяется — и значки в карточках
       «Разобраться самому» рисовались обычным тёмным, а не цветом марки.
       На глаз это неотличимо от замысла. */
    --brand:var(--blue);
}
/*
 * Полоса прокрутки.
 *
 * ⚠️ Своя, а не системная. Страница светлая и очень длинная (шесть с лишним
 * тысяч точек), и стандартная светло-серая полоса на светлом фоне теряется —
 * владелец так и сказал: «прокрутки не видно». Человек не понимает, что
 * страница продолжается, и уходит с первого экрана.
 *
 * ⚠️ Цвет ползунка — не самый бледный из палитры: полоса должна читаться и
 * тогда, когда на неё не смотрят в упор.
 *
 * ⚠️ Ленты внутри страницы (лента экранов) прячут свою полосу намеренно, и их
 * правила весят больше — они остаются как были.
 */
/*
 * ⚠️ Правило обязано стоять И НА body. Полоса окна берёт оформление
 * не всегда у html: когда у html переполнение visible, а у body нет (у нас
 * overflow-x:hidden — он держит страницу от съезжания вбок), прокручиваемым
 * ящиком становится body — и цвет берётся у него. Правило только на html
 * не дало НИЧЕГО: ползунок остался системным и так же невидимым.
 */
html,body{scrollbar-color:#8C99AD var(--soft);scrollbar-width:auto}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--soft)}
::-webkit-scrollbar-thumb{background:#8C99AD;border-radius:8px;
    border:3px solid var(--soft)}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* ⚠️ clip вместо hidden: hidden делает body прокручиваемым ящиком, и липкая
   шапка считается относительно НЕГО — то есть уезжает вверх. hidden оставлен
   первым как запасной путь для старых браузеров. */
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;overflow-x:clip;
    font:400 17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue)}
@keyframes spin{to{transform:rotate(360deg)}}
/* ⚠️ Значок пункта оформляем и здесь, вне мобильного медиа-запроса: без этого
   на широком экране SVG показывался в полный рост и чёрной заливкой — шапка
   превращалась в ряд огромных чёрных фигур. На широком экране он не нужен. */
.mi{display:none;width:22px;height:22px;flex:none;fill:none;stroke:var(--blue);
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/*
 * Группы меню с выпадающими списками.
 *
 * ⚠️ Стили ОБЯЗАНЫ быть здесь, а не только в site.css: главная его не
 * подключает — у неё свой набор внутри страницы. Разметку групп я перенёс, а
 * стили забыл, и в шапке появились огромные чёрные треугольники (стрелка без
 * правил рисуется в полный рост и с заливкой), а пункты вывалились текстом
 * поверх содержимого. Ровно та же беда уже была со значками пунктов.
 */
.grp{position:relative;order:1}

/* Сведения о продавце на главной. ⚠️ Требование банка; стили здесь же —
   главная не подключает site.css.

   ⚠️ Не список «поле: значение» в три колонки: так это читалось выпиской из
   базы. Подпись мелкая и приглушённая — над значением, значение крупнее и
   контрастнее; сведения разложены по смыслу на три группы. */
.sellercard{margin-top:24px;background:var(--card);border:1px solid var(--line);
    border-radius:22px;overflow:hidden}
.sctop{padding:22px 26px;background:linear-gradient(180deg,var(--soft),transparent);
    border-bottom:1px solid var(--line)}
.scname{font-size:19px;font-weight:650;letter-spacing:-.01em}
.scrole{margin-top:5px;color:var(--dim);font-size:14px;line-height:1.5}
.scgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.scgroup{padding:22px 26px;border-right:1px solid var(--line)}
.scgroup:last-child{border-right:0}
.scgroup h3{display:flex;align-items:center;gap:8px;margin:0 0 16px;
    font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--dim)}
.scgroup h3 svg{width:16px;height:16px;color:var(--brand);flex:none}
.scgroup dl{margin:0;display:grid;gap:14px}
.scgroup dt{font-size:12px;color:var(--dim);line-height:1.3}
.scgroup dd{margin:2px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.scgroup dd.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    font-size:13.5px;letter-spacing:.01em;overflow-wrap:anywhere}
.scgroup dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.scgroup dd a:hover{color:var(--brand);border-color:currentColor}
@media (max-width:900px){
    .scgroup{border-right:0;border-bottom:1px solid var(--line)}
    .scgroup:last-child{border-bottom:0}}
@media (max-width:640px){
    .sctop{padding:18px 20px}
    .scgroup{padding:18px 20px}}

/* Разобраться самому: ходы в справочники и руководства.
   ⚠️ Стили здесь же — главная не подключает site.css. */
.learn{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px}
.lcard{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--card);
    border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lcard:hover{transform:translateY(-2px);border-color:var(--brand);
    box-shadow:0 16px 38px rgba(16,26,51,.10);text-decoration:none}
.lico{flex:none;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;
    justify-content:center;background:var(--soft);color:var(--brand)}
.lico svg{width:22px;height:22px}
@media (hover:hover){
    .lcard:hover .lico svg{animation:lnudge .5s ease}}
@keyframes lnudge{50%{transform:scale(1.14) rotate(-6deg)}}
/*
 * ⚠️ Раньше значки оживали ТОЛЬКО при наведении — на телефоне, где наведения
 * нет вовсе, карточки стояли мёртвыми. Теперь дышат всегда, но по очереди:
 * задержка растёт по --i, и пять значков не пульсируют разом, как гирлянда.
 * Ход медленный (5 с) и мелкий (4% размера) — движение ловится краем глаза и
 * не мешает читать сами карточки.
 */
.lico svg{animation:lbreathe 5s calc(var(--i,0) * .4s) ease-in-out infinite}
@keyframes lbreathe{
    0%,100%{transform:scale(1) rotate(0)}
    45%{transform:scale(1.04) rotate(-3deg)}}
/*
 * Подложка значка — из его же цвета, чтобы карточки не были одинаковыми.
 *
 * ⚠️ Правил ровно столько, сколько карточек. Когда их стало семь, шестая и
 * седьмая остались без --fc и взяли запасной синий: две соседние карточки
 * оказались одного цвета, и замысел «у каждой свой» тихо развалился. Такое
 * не видно в разметке — только глазами и только если приглядеться.
 */
.learn .lcard:nth-child(1){--fc:var(--brand-ink)}
.learn .lcard:nth-child(2){--fc:var(--blue)}
.learn .lcard:nth-child(3){--fc:var(--brand-green)}
.learn .lcard:nth-child(4){--fc:var(--brand-ink)}
.learn .lcard:nth-child(5){--fc:var(--blue)}
.learn .lcard:nth-child(6){--fc:var(--brand-green)}
.learn .lcard:nth-child(7){--fc:var(--brand-ink)}
.lcard .lico{background:color-mix(in srgb,var(--fc,var(--brand)) 12%,var(--card));
    color:var(--fc,var(--brand))}
.lcard:hover{border-color:var(--fc,var(--brand))}
.lbody{display:flex;flex-direction:column;gap:5px;min-width:0}
.ltitle{font-weight:650;line-height:1.35}
.lwhy{color:var(--dim);font-size:14px;line-height:1.5}
.larrow{flex:none;color:var(--dim);opacity:.6;transition:transform .2s ease,opacity .2s ease}
.larrow svg{width:20px;height:20px}
.lcard:hover .larrow{transform:translateX(4px);opacity:1}
@media (prefers-reduced-motion:reduce){
    .lcard,.larrow{transition:none}
    .lcard:hover .lico svg{animation:none}}

/* Вошедший: имя и список разделов. ⚠️ Стили здесь же — главная не подключает
   site.css. Обёртка .mebox задаёт точку отсчёта, иначе список висит у края
   шапки, а не под кнопкой. */
.mebox{order:1;position:relative;display:flex;align-items:center}

/*
 * Подвал столбцами.
 *
 * ⚠️ Стили ОБЯЗАНЫ быть здесь: главная не подключает site.css — у неё свой
 * набор внутри страницы. Разметку столбцов я перенёс, а стили забыл, и ссылки
 * слиплись в сплошную строку «Коды ошибокДатчикиСловарь». Это уже третий раз
 * на одни и те же грабли: меню, значки, теперь подвал.
 */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 24px;border-radius:980px;text-decoration:none;font-weight:600;font-size:16px;
    border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:#1d3a86}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:#c7d0e0}

/* ---------- фон на тему диагностики ---------- */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgl{position:absolute;inset:-14% 0;will-change:transform}

/* Миллиметровка прибора: та же сетка, что на экране осциллографа. */
.bg-grid{background-image:
    linear-gradient(color-mix(in srgb,var(--blue) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--blue) 6%,transparent) 1px,transparent 1px);
    background-size:58px 58px}
/* ⚠️ Сетка гаснет к краям, иначе страница выглядит расчерченной тетрадью. */
.bg-grid{-webkit-mask-image:radial-gradient(120% 80% at 50% 30%,#000 30%,transparent 78%);
    mask-image:radial-gradient(120% 80% at 50% 30%,#000 30%,transparent 78%)}

/* Осциллограмма: линия идёт слева направо, как показания на живом графике. */
.bg-wave{top:14%;bottom:auto;height:52vh}
.bg-wave .drift{width:200%;height:100%;
    animation:bgdrift 46s linear infinite}
.bg-wave svg{width:50%;height:100%;float:left}
.bg-wave path{fill:none;stroke:color-mix(in srgb,var(--blue) 9%,transparent);
    stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke}
@keyframes bgdrift{to{transform:translateX(-50%)}}

/* Разъём OBD-II: крупно, в правом нижнем углу, почти на пределе видимости. */
.bg-plug{left:auto;right:-40px;top:auto;bottom:-6%;width:min(420px,42vw);height:auto;
    inset:auto -40px -6% auto}
.bg-plug svg{width:100%;height:auto;display:block}
.bg-plug .shell{fill:none;stroke:color-mix(in srgb,var(--ink) 7%,transparent);
    stroke-width:3}
.bg-plug .pins rect{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.bg-plug .wire{fill:none;stroke:color-mix(in srgb,var(--blue) 7%,transparent);
    stroke-width:2;stroke-dasharray:7 9}
/*
 * ⚠️ Гнёзда оживают волной слева направо — как опрос блоков при подключении.
 * Задержка считается от порядкового номера: руками её пришлось бы вписать
 * шестнадцать раз, и после правки сетки гнёзд она разъехалась бы.
 */
.bg-plug .pins rect{animation:pinlit 6s ease-in-out infinite}
.bg-plug .pins rect:nth-child(n){animation-delay:calc(var(--pd,0) * 1s)}
@keyframes pinlit{
    0%,70%,100%{opacity:1} 78%{opacity:.25} 86%{opacity:1}}

/* ---------- появление ---------- */
/*
 * Появление блока — движением, без прозрачности.
 *
 * ⚠️ Полупрозрачный текст в середине анимации даёт контраст 3.86 при
 * требуемых 4.5: доли секунды страница нечитаема, и Lighthouse справедливо
 * это засчитывает. Движение так же заметно, а текст читается всегда — в том
 * числе теми, кому контраст и правда нужен.
 */
.reveal{transform:translateY(18px)}
.reveal.in{transform:none;
    transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
/* ⚠️ Кому движение мешает — тому его не показываем. Для части людей это не
   вкусовщина, а головокружение и тошнота. */
/* ---------- тёмная тема ---------- */
/* ⚠️ По настройке системы, без переключателя: человек уже сказал телефону,
   какой вид ему удобен. Меняем только переменные — второй набор правил под
   тёмный вид разъехался бы со светлым при первой доработке. */
@media (prefers-color-scheme:dark){
    /* ⚠️ Светлая кнопка осталась белой и в темноте: текст на ней стал почти
       невидимым. Видно это только на снимке — правила в стилях выглядели
       безупречно, потому что цвет фона был задан отдельно от переменных. */
    /* ⚠️ Кнопки. В тёмной теме переменная --blue стала светлой (так задумано —
       ссылки на тёмном фоне должны быть светлее), а белый текст на кнопке
       остался белым: контраст упал до 1.07 при нужных 4.5, надпись почти
       исчезла. Задаём кнопке свой насыщенный синий, а не тот, что для ссылок.
       Переменная поменялась — а цвет текста на ней нет: это и есть ловушка. */
    .btn.primary{background:#3E6BD6;color:#fff}
    .btn.primary:hover{background:#4E7BE6}
    .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
    .btn.ghost:hover{border-color:var(--blue2)}
    :root{
        --ink:#E7ECF5; --dim:#A6B0C2; --line:#242D3E;
        --bg:#0B1220; --card:#131C2C; --blue:#6EC6FF; --blue2:#4FB6F7;
        --soft:#14263A; --good:#34C77B; --warn:#E8A54F;
        --brand-orange:#FF9330; --brand-blue:#4FC3FF; --brand-green:#3ADB57;
        --brand-ink:#F0A868; --brand:var(--blue);
    }
    /* ⚠️ На тёмной теме светлый ползунок слепит, а тёмный сливается
       с фоном: нужен свой, средний по светлоте. */
    html,body{scrollbar-color:#3E4C63 #131C2C}
    ::-webkit-scrollbar-track{background:#131C2C}
    ::-webkit-scrollbar-thumb{background:#3E4C63;border-color:#131C2C}
    .hero{background:linear-gradient(180deg,#101A2C,#0B1220)}
    .shot,.live,.flow,.honest{background:var(--card)}
    .honest{background:linear-gradient(180deg,var(--card),#0F1726)}
    .shot img{filter:brightness(.9)}
    /* ⚠️ Значки способов оплаты НЕ перекрашиваем даже в тёмной теме:
       перекрашенный логотип платёжной системы нарушает правила их
       использования, а банк засчитывает только сами знаки. Кладём их на
       светлую подложку — так они читаются и на тёмном фоне. */
    .paymethods img{background:#fff;border-radius:4px;padding:2px 4px}
    .glare{opacity:.25}
}

@media (prefers-reduced-motion:reduce){
    .ico svg path,.ico svg circle,.ico svg line,.ico svg rect{stroke-dashoffset:0!important;
        animation:none!important}
    /* ⚠️ И сам значок целиком: у одного из них качается вся фигура, а не
       отдельные линии — прежнее правило до него не доставало. */
    .ico svg,.card:hover .ico svg{animation:none!important}
    /* ⚠️ Каждая новая анимация обязана попадать сюда же. Забытая — и человек,
       которого укачивает, увидит ровно то, от чего отказался в настройках. */
    .fico,.lico svg{animation:none!important}
    /* ⚠️ Фон тоже. Он мелкий и бледный, но бегущая линия во весь экран — это
       именно то движение, от которого человек и отказался в настройках. */
    .bg-wave .drift,.bg-plug .pins rect{animation:none!important}
    .fact{transition:none}
    .reveal{transform:none}
    .screen-inner,.mark,.spark{animation:none!important}}

/* ---------- герой ---------- */
.hero{position:relative;padding:76px 0 26px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
/* ⚠️ Пятна остались от прежней палитры — числами, мимо переменных: синий
   76,111,216 и зелёный 14,159,110 не менялись ни при смене цветов под знак,
   ни на тёмной теме. */
.b1{width:620px;height:620px;right:-140px;top:-180px;
    background:radial-gradient(circle,
        color-mix(in srgb,var(--brand-blue) 26%,transparent),transparent 65%)}
.b2{width:520px;height:520px;left:-160px;top:60px;
    background:radial-gradient(circle,
        color-mix(in srgb,var(--brand-green) 18%,transparent),transparent 65%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;
    gap:40px;align-items:center}
h1{margin:0 0 18px;font-size:clamp(34px,5.2vw,62px);line-height:1.04;letter-spacing:-1.6px;font-weight:700}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue),var(--blue2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:0 0 26px;font-size:clamp(17px,2.05vw,21px);color:var(--dim);max-width:37ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.under{font-size:14px;color:var(--dim)}

/* ---------- телефон ---------- */
.stage{perspective:1500px;display:flex;justify-content:center}
.device{position:relative;width:300px;height:610px;border-radius:44px;
    background:linear-gradient(160deg,#232833,#0C0F15);padding:11px;
    box-shadow:0 44px 90px rgba(11,18,32,.30),0 0 0 1px rgba(255,255,255,.07) inset;
    transform:rotateY(-16deg) rotateX(5deg) rotateZ(.6deg);
    transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.device:hover{transform:rotateY(-5deg) rotateX(1deg)}
.device:before{content:"";position:absolute;left:50%;top:15px;transform:translateX(-50%);
    width:104px;height:24px;border-radius:14px;background:#0C0F15;z-index:3}
/* ⚠️ Снимки лежат стопкой и позиционируются от верха экрана, поэтому
   отступ им не поможет — каждый отодвинут на высоту строки состояния
   сам. Строка стоит поверх: снимок под ней едет и утащил бы её. */
.screen{position:relative;height:100%;border-radius:34px;overflow:hidden;
    background:#fff}
/*
 * «Живой экран»: четыре снимка по очереди, каждый прокручивается вниз и назад.
 *
 * ⚠️ Сдвигом картинок, а не видео: видео — это мегабайты, автозапуск, свои
 * правила в каждом браузере и чёрный кадр при загрузке. Здесь то же ощущение
 * за четверть мегабайта, уже загруженную для ленты ниже.
 *
 * ⚠️ Ключевой кадр ОДИН на все четыре, а каждому снимку даётся отрицательная
 * задержка в свою четверть круга. Четыре разных набора кадров разъехались бы
 * при первой правке длительности — и заметил бы это не я.
 *
 * ⚠️ --sh: сколько видно экрана. 610 высота рамки − 22 её поля − 29 строка
 * состояния = 559. Число живёт здесь, а не в кадрах: в кадрах его пришлось бы
 * помнить в двух местах.
 */
/*
 * ⚠️ 108% ширины — не украшение. Снимок это ОДИН экран приложения: в
 * натуральную величину он ровно равен экрану рамки, и запас на
 * прокрутку — четыре пикселя (замерено). Восемь процентов увеличения
 * дают 49 пикселей хода и заодно делают буквы читаемыми; по бокам
 * срезается по 4% — там поля приложения, содержимого в них нет.
 */
.screen-inner{--sh:559px;--cycle:19.2s;
    position:absolute;left:-4%;top:29px;width:108%;opacity:0;
    animation:shot-show var(--cycle) linear infinite,
              shot-roll var(--cycle) ease-in-out infinite;
    animation-delay:calc(var(--i) * var(--cycle) / -4)}

/* Кто сейчас на виду: своя четверть круга, по краям короткое растворение. */
@keyframes shot-show{
    0%{opacity:1} 23%{opacity:1} 25%{opacity:0}
    98%{opacity:0} 100%{opacity:1}
}
/* ⚠️ Задержка вверху и внизу обязательна: без неё экран разворачивается и
   тут же уезжает обратно, и прочитать на нём ничего нельзя. */
@keyframes shot-roll{
    0%,5%{transform:translateY(0)}
    12%{transform:translateY(calc(-100% + var(--sh)))}
    18%{transform:translateY(calc(-100% + var(--sh)))}
    23%,100%{transform:translateY(0)}
}

/* ⚠️ Попросили меньше движения — показываем первый экран неподвижно, а не
   «то же самое, только медленнее». */
@media (prefers-reduced-motion: reduce){
    /* ⛔ Именно «animation:none», а не «нарисовать до конца»: кадры midraw
       больше не задают пунктир в обычном состоянии, поэтому отсутствие
       анимации само по себе даёт целый контур. */
    .reveal.in .ico svg *,.reveal.in .fico svg *,.reveal.in .hico svg *,
    .card:hover .ico svg *{animation:none}
    .screen-inner{animation:none;opacity:0}
    .screen-inner[style*="--i:0"]{opacity:1}
}
.glare{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.20) 0 16%,transparent 32% 100%)}

/* ---------- цифры ---------- */
.facts{position:relative;z-index:1;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:46px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.fact b{display:block;font-size:30px;letter-spacing:-1px;line-height:1.1}
.fact span{color:var(--dim);font-size:15px}

/* ---------- секции ---------- */
/*
 * ⛔ Разделы ниже первого экрана браузер не размечает, пока до них не дошли.
 *
 * Замер 07.09.2026 (телефон средней руки, 4G): до первой отрисовки главный
 * поток работал 2740 мс, и 1661 мс из них — РАСКЛАДКА. Стили к тому моменту
 * давно скачаны (1569 мс против первой отрисовки в 3848 мс), поэтому ни
 * критические стили, ни ускорение сети здесь ничего не дали бы. Дело в том,
 * что страница высотой 11 756 пикселей размечается целиком ради первого
 * экрана в 915.
 *
 * ⚠️ Предполагаемая высота — из замера настоящих высот, и разная по ширине:
 * на телефоне разделы 425–1407 пикселей при полях 58+58, на настольном
 * 413–726 при полях 82+82. Отсюда 710 и 420 для содержимого. Первое число я
 * взял «в среднем по странице» (860) — заглушки вышли по 977, и страница стала
 * на 1520 пикселей длиннее правды: прокрутка врала на 13%.
 *
 * ⚠️ Дёрганья при этом не было и нет: замерял, прокручивая страницу как
 * человек, — CLS 0,001 при пороге 0,1, ни одного заметного скачка. Разделы
 * успевают разметиться до входа в кадр. Слово auto просит помнить настоящий
 * размер после первой отрисовки, поэтому остаток ошибки живёт один экран.
 *
 * ⚠️ Правило не касается первого экрана: он лежит в .hero, а не в section.
 *
 * ⛔ При печати выключаем. На бумаге «за кадром» не существует, и без этой
 * оговорки половина страницы ушла бы из распечатки в пустоту.
 */
main > section, body > footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 420px}
@media (max-width:700px){
    main > section, body > footer{contain-intrinsic-size:auto 710px}}
@media print{
    main > section, body > footer{content-visibility:visible}}

section{padding:82px 0}
section + section{border-top:1px solid rgba(230,233,240,.75)}
h2{margin:0 0 12px;font-size:clamp(27px,3.6vw,40px);line-height:1.12;letter-spacing:-1px}
.sub{margin:0 0 34px;color:var(--dim);font-size:18px;max-width:62ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;
    transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,18,32,.08)}
.card h3{margin:16px 0 8px;font-size:19px}
.card p{margin:0;color:var(--dim);font-size:16px}
/* Текст только для читалки экрана: не видно глазом, слышно голосом. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/*
 * Полоска из трёх цветов знака под заголовком раздела — та же, что на
 * внутренних страницах. ⚠️ Только у заголовков разделов (h2 внутри section):
 * в карточках свои заголовки, и полоска под каждым превратила бы страницу
 * в частокол.
 */
section > .wrap > h2::after{content:"";display:block;width:64px;height:4px;
    margin-top:12px;border-radius:2px;
    background:linear-gradient(90deg,var(--brand-orange) 0 33%,
        var(--brand-blue) 33% 66%,var(--brand-green) 66% 100%)}

.ico{width:44px;height:44px;border-radius:14px;background:var(--soft);
    color:var(--blue);
    display:flex;align-items:center;justify-content:center;
    transition:background .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1)}
/*
 * ⚠️ Четыре карточки — три цвета знака по кругу. Взяты ЗАТЕМНЁННЫЕ варианты:
 * чистый оранжевый знака даёт на светлой плитке 2,33, а рисунок, который
 * что-то значит, обязан различаться не хуже 3. Здесь 5,3 и выше.
 */
.cards .card:nth-child(1) .ico{color:var(--brand-ink)}
.cards .card:nth-child(2) .ico{color:var(--blue)}
.cards .card:nth-child(3) .ico{color:var(--good)}
.cards .card:nth-child(4) .ico{color:var(--blue)}

/* Значок рисуется штрихом, когда блок появляется в поле зрения.
   ⚠️ Только при появлении и один раз: значок, который «рисуется» заново при
   каждой прокрутке мимо, превращает страницу в мигалку и мешает читать.

   ⛔ Пунктир живёт ТОЛЬКО в кадрах midraw (объявлены в site.css). Раньше здесь
   стояло «stroke-dasharray:90;stroke-dashoffset:90» в обычном состоянии — то
   есть значок по умолчанию нарисован на ноль процентов, и запускал его класс
   .in от скрипта. Скрипт не отработал — четыре значка плиток невидимы вовсе,
   при целом тексте и безупречной разметке.

   ⚠️ И длина 90 была подобрана наугад: у контура длиннее «прочерчивание»
   показывало часть пути, и это выглядело недорисованным значком, а не
   задумкой. pathLength="1" в разметке нормирует любой контур к единице. */
.reveal.in .ico svg path,.reveal.in .ico svg circle,
.reveal.in .ico svg line,.reveal.in .ico svg rect{
    animation:midraw .9s cubic-bezier(.4,0,.2,1) backwards}
.reveal.in .ico svg *:nth-child(2){animation-delay:.12s}
.reveal.in .ico svg *:nth-child(3){animation-delay:.24s}

/* Значки в строке чисел и в списке оговорок — теми же кадрами.
   ⚠️ Стояли неподвижно, пока соседние плитки прочерчивались: на одной странице
   два семейства значков вели себя по-разному, и это читалось как недоделка. */
.reveal.in .fico svg path,.reveal.in .fico svg circle,
.reveal.in .hico svg path,.reveal.in .hico svg circle{
    animation:midraw .6s cubic-bezier(.3,.8,.3,1) backwards}
.reveal.in .fico svg *:nth-child(2),
.reveal.in .hico svg *:nth-child(2){animation-delay:.1s}
.reveal.in .fico svg *:nth-child(3),
.reveal.in .hico svg *:nth-child(3){animation-delay:.2s}
/* ⚠️ Задержка по порядку в строке: четыре значка чисел, вспыхнувшие разом,
   выглядят как сбой отрисовки, а не как движение. */
.facts .fact:nth-child(2) .fico svg *{animation-delay:.08s}
.facts .fact:nth-child(3) .fico svg *{animation-delay:.16s}
.facts .fact:nth-child(4) .fico svg *{animation-delay:.24s}

/* Наведение: значок чуть подаётся вперёд, плитка теплеет. */
/* Подложка при наведении — из цвета самого значка, поэтому у каждой
   карточки она своя и следует за темой. */
.card:hover .ico{background:color-mix(in srgb, currentColor 14%, var(--card));
    transform:translateY(-2px) scale(1.06)}
.card:hover .ico svg{animation:nudge .5s ease}
/*
 * ⚠️ Значок ПЕРЕРИСОВЫВАЕТСЯ при наведении. Штрих рисуется один раз, когда
 * блок появляется в поле зрения, — и человек, пришедший из поиска сразу в
 * середину страницы, этого не увидит вовсе. Повтор по наведению делает
 * движение поводом задержаться, а не разовым фокусом при загрузке.
 */
.card:hover .ico svg path,.card:hover .ico svg circle,
.card:hover .ico svg line,.card:hover .ico svg rect{
    animation:midraw .7s cubic-bezier(.4,0,.2,1) backwards}
/* Карточка отзывается цветом СВОЕГО значка — тем, что взят из знака. */
.card{border-top:3px solid transparent;
    transition:border-color .25s,transform .25s,box-shadow .25s}
.cards .card:nth-child(1):hover{border-top-color:var(--brand-orange)}
.cards .card:nth-child(2):hover{border-top-color:var(--brand-blue)}
.cards .card:nth-child(3):hover{border-top-color:var(--brand-green)}
.cards .card:nth-child(4):hover{border-top-color:var(--brand-blue)}
@keyframes nudge{
    0%{transform:rotate(0)} 30%{transform:rotate(-7deg)}
    60%{transform:rotate(5deg)} 100%{transform:rotate(0)}}

/* ---------- значки живут постоянно ----------
 *
 * ⚠️ Движение у каждого значка СВОЁ и по смыслу, а не «покачаем всё подряд».
 * Одинаковая анимация на четырёх плитках читается как неисправность страницы;
 * осмысленная — как признак, что программа работает прямо сейчас.
 *
 * ⚠️ Медленно и мелко: цикл 2,5–5 секунд, амплитуда в один-два пиксела. Быстрое
 * мельтешение рядом с текстом мешает читать, а читать здесь и приходят.
 *
 * ⚠️ Анимации перечислены ПАРОЙ (midraw + своя): правило появления задаёт
 * animation целиком, и вторая, объявленная отдельно, просто затёрла бы первую —
 * значок перестал бы прорисовываться при появлении.
 *
 * ⚠️ Класс .in навешивается на САМУ карточку (.card.reveal), а не на предка
 * блока. Поэтому «.reveal.in .cards .card:nth-child(N)» не совпадает ни с чем:
 * .cards — родитель этой карточки, а не потомок. Верный порядок —
 * «.cards .card:nth-child(N).reveal.in». Три правила из четырёх молчали именно
 * так, и на глаз это неотличимо от «анимация ещё не началась».
 */

/* 1. Ошибки: точка под восклицательным знаком мигает, как лампа на панели. */
.cards .card:nth-child(1).reveal.in .ico circle{
    animation:midraw .9s cubic-bezier(.4,0,.2,1) backwards,
              lampblink 2.6s 1s ease-in-out infinite}
@keyframes lampblink{
    0%,72%,100%{opacity:1} 80%{opacity:.25} 88%{opacity:1} 94%{opacity:.35}}

/* 2. Живые показания: линия графика прочерчивается заново — данные идут. */
.cards .card:nth-child(2).reveal.in .ico svg path:nth-child(2){
    animation:midraw .9s cubic-bezier(.4,0,.2,1) backwards,
              liveline 4.5s 1.4s ease-in-out infinite}
/* ⛔ Единицы НОРМИРОВАННЫЕ: контуры получили pathLength="1", и прежние «90»
   означали бы девяносто длин пути — значок гас бы навсегда. Пунктир задаём
   внутри кадров целиком, чтобы вне анимации контур оставался целым. */
@keyframes liveline{
    0%{stroke-dasharray:1;stroke-dashoffset:1} 45%{stroke-dasharray:1;stroke-dashoffset:0}
    80%{stroke-dasharray:1;stroke-dashoffset:0} 100%{stroke-dasharray:1;stroke-dashoffset:1}}

/* 3. Сброс сервисного: лупа ведёт поиск — качается влево-вправо. */
.cards .card:nth-child(3) .ico svg{
    animation:sweep 3.8s 1.2s ease-in-out infinite;transform-origin:60% 60%}
@keyframes sweep{
    0%,100%{transform:translateX(0) rotate(0)}
    35%{transform:translateX(-1.5px) rotate(-8deg)}
    65%{transform:translateX(1.5px) rotate(8deg)}}

/* 4. Отчёт: строчки дописываются одна за другой. */
.cards .card:nth-child(4).reveal.in .ico svg path:nth-child(3){
    animation:midraw .9s cubic-bezier(.4,0,.2,1) backwards,
              writing 5s 1.6s ease-in-out infinite}
@keyframes writing{
    0%{stroke-dasharray:1;stroke-dashoffset:1} 40%{stroke-dasharray:1;stroke-dashoffset:0}
    85%{stroke-dasharray:1;stroke-dashoffset:0} 100%{stroke-dasharray:1;stroke-dashoffset:1}}

/* ---------- верхние плитки с числами ---------- */
/*
 * ⚠️ Плитки были ровно белыми прямоугольниками — числа в них терялись. Тонкая
 * полоска цветом знака сверху даёт им принадлежность, не отвлекая: цвет
 * чередуется по кругу, как три треугольника в самом знаке.
 */
/*
 * ⚠️ Плитки были ровно белыми прямоугольниками с числом. Теперь у каждой свой
 * цвет знака: полоска сверху, еле заметный уклон фона в тот же тон и крупный
 * бледный значок в углу. Значок водяной, а не иллюстрация: он подсказывает,
 * про что число, не отнимая у самого числа внимания.
 *
 * ⚠️ Цвет живёт в своей переменной --fc, а НЕ в color самой плитки: иначе его
 * унаследовало бы число, и «298» стало бы оранжевым. Крупные цифры цветом
 * знака на светлом фоне не проходят по различимости.
 */
.facts .fact:nth-child(1){--fc:var(--brand-orange)}
.facts .fact:nth-child(2){--fc:var(--brand-blue)}
.facts .fact:nth-child(3){--fc:var(--brand-green)}
.facts .fact:nth-child(4){--fc:var(--blue)}
.fact{position:relative;overflow:hidden;padding-right:58px;
    background:linear-gradient(150deg,
        color-mix(in srgb,var(--fc) 10%,var(--card)) 0%,var(--card) 60%);
    transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.fact::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:var(--fc)}
/*
 * ⚠️ Сначала значок был крупным «водяным» в углу плитки. Выглядело это плохо:
 * он вылезал за край, а подпись из двух строк наезжала прямо на рисунок —
 * получалась грязь, а не оформление. Теперь это аккуратная метка в верхнем
 * правом углу, а плитке добавлено поле справа, чтобы текст под неё не заходил
 * вовсе. Столкнуться им больше негде.
 */
.fico{position:absolute;right:14px;top:16px;width:30px;height:30px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--fc) 14%,var(--card));
    color:var(--fc);pointer-events:none}
.fico svg{width:17px;height:17px;display:block}
/* Медленное дыхание: движение есть, но заметить его можно, только задержав
   взгляд. Рядом с текстом это единственная допустимая громкость. */
.fico{animation:breathe 7s ease-in-out infinite}
.facts .fact:nth-child(2) .fico{animation-delay:.9s}
.facts .fact:nth-child(3) .fico{animation-delay:1.8s}
.facts .fact:nth-child(4) .fico{animation-delay:2.7s}
@keyframes breathe{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.09)}}
.fact:hover .fico{background:color-mix(in srgb,var(--fc) 24%,var(--card))}
/*
 * ⚠️ Число и подпись — над водяным значком: иначе он перечёркивает подпись.
 *
 * ⚠️ И ОБЯЗАТЕЛЬНО «:not(.fico)». Сам значок обёрнут в span, и правило без
 * исключения накрывало его тоже: position:relative отменял привязку к углу, и
 * водяной значок разворачивался обычным блоком 212×298 впереди числа. Правило
 * стоит ниже и весит больше — своё же оформление и ломало. Поймала проверка;
 * глазами это выглядит просто как «плитка распухла», а не как ошибка.
 */
.fact b,.fact span:not(.fico){position:relative;z-index:1}
.fact:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,26,51,.10)}
.fact b{font-variant-numeric:tabular-nums}

/* ---------- живой график ---------- */
.live{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px}
.gauges{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/*
 * Четыре прибора — четыре тона. ⚠️ Тон здесь не украшение: обороты,
 * температура, нагрузка и напряжение читают на бегу, и цветная кромка слева
 * позволяет найти нужный, не перечитывая подписи.
 */
.gauge{position:relative;overflow:hidden;background:var(--soft);border-radius:16px;
    padding:16px 18px 16px 22px}
.gauge::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--fc)}
.gauges .gauge:nth-child(1){--fc:var(--blue)}
.gauges .gauge:nth-child(2){--fc:var(--brand-orange)}
.gauges .gauge:nth-child(3){--fc:var(--brand-green)}
.gauges .gauge:nth-child(4){--fc:var(--brand-blue)}
.gauge .val{font-size:30px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.gauge .val i{font-style:normal;font-size:14px;font-weight:600;color:var(--dim);margin-left:5px}
.gauge .cap{color:var(--dim);font-size:14px;margin-top:2px}
.chart{width:100%;height:200px}
.spark{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- схема ---------- */
.flow{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px 24px}
.flow svg{width:100%;height:auto;max-width:940px;margin:0 auto;display:block}

.honest{background:linear-gradient(180deg,#fff,#FAFBFE);border:1px solid var(--line);
    border-radius:26px;padding:32px}
/*
 * ⚠️ Значки здесь помогают, а не украшают: раздел признаётся в ограничениях, и
 * читают его настороженно. Разъём, знак внимания и перечёркнутый динамик
 * показывают, о чём каждое признание, ещё до чтения строки.
 */
.honest ul{margin:0;padding-left:0;list-style:none;color:var(--dim)}
.honest li{margin:16px 0;position:relative;padding-left:44px;line-height:1.55}
.honest .hico{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--fc) 15%,var(--card));color:var(--fc)}
.honest .hico svg{width:17px;height:17px}
.honest li:nth-child(1){--fc:var(--blue)}
.honest li:nth-child(2){--fc:var(--brand-ink)}
.honest li:nth-child(3){--fc:var(--brand-ink)}
.honest b{color:var(--ink)}

/* ---------- галерея ---------- */
.slider{position:relative}
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.shots::-webkit-scrollbar{display:none}
.shots>.shot{flex:0 0 clamp(200px,25%,260px);scroll-snap-align:start}
/* ⚠️ Курсор-рука — единственный намёк, что ленту можно тянуть мышью: полосу
   прокрутки мы прячем, и без него человек за десктопом видит ряд, который
   ничем не выдаёт, что листается. */
.shots{cursor:grab}
.shots.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.shots.dragging>.shot{pointer-events:none}
.shots.dragging .shot:hover{transform:none;box-shadow:none}
/* Стрелки поверх ленты. ⚠️ Прячем их, когда листать некуда: стрелка, которая
   ничего не делает, читается как поломка.

   ⚠️ position:absolute здесь ОБЯЗАТЕЛЕН. Без него стрелка становится строчным
   значком в начале слайдера — маленькой «›» в левом верхнем углу. В site.css
   про .sarrow сказана только подкраска тёмной темы, и понадеяться на общий
   файл нельзя. */
.sarrow{position:absolute;top:38%;z-index:5;width:44px;height:44px;border-radius:50%;
    border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);
    font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;
    justify-content:center;box-shadow:0 8px 24px rgba(11,18,32,.12);
    transition:opacity .2s,transform .2s;backdrop-filter:blur(6px)}
.sarrow:hover{transform:scale(1.06)}
.sarrow[hidden]{display:none}
.sprev{left:-14px}
.snext{right:-14px}

.sdots{display:flex;gap:7px;justify-content:center;margin-top:6px}
.sdots i{width:7px;height:7px;border-radius:50%;background:var(--line);
    transition:width .25s,background .25s}
.sdots i.on{width:22px;background:var(--blue2)}

@media (max-width:700px){
    .sarrow{display:none}
    .shots>.shot{flex:0 0 74%}}
/* ⚠️ Своего фона и обводки у карточки НЕТ: внутри стоит белый корпус
   телефона, и вторая белая плоскость вокруг него превращала всё в
   карточку в карточке — телефон переставал читаться. */
.shot{margin:0;cursor:zoom-in;background:none;border:0;
    transition:transform .25s ease}
/* ⚠️ Подъём — на карточке целиком, вместе с подписью: повесь его на
   рамку, и снимок поедет от собственной подписи. Тень при этом растёт у
   корпуса, а не у прозрачной карточки. */
.shot:hover .phone{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(16,26,51,.12),0 22px 44px rgba(11,18,32,.16)}
.shot:hover{transform:translateY(-4px)}
.shot figcaption{padding:13px 4px 0;font-size:14px;color:var(--dim)}

/* ⚠️ Столбиком: телефон, под ним подпись. Пока подпись висела прижатой к
   низу окна, она пряталась ПОД рамкой — рамка выше картинки. */
.viewer{position:fixed;inset:0;z-index:80;background:rgba(9,13,20,.88);
    backdrop-filter:blur(6px);display:none;flex-direction:column;gap:14px;
    align-items:center;justify-content:center;padding:22px}
.viewer.on{display:flex}
/* ⚠️ Тень и скругление ушли на корпус телефона: на самой картинке
   они рисовали второй контур поверх рамки. */
.viewer .phone-big{box-shadow:0 0 0 1px rgba(255,255,255,.12),
    0 30px 80px rgba(0,0,0,.55)}
.viewer .cap{text-align:center;color:#fff;font-size:15px;opacity:.85;
    max-width:min(92vw,420px)}
.vbtn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
    border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.vbtn:hover{background:rgba(255,255,255,.24)}
.vprev{left:18px} .vnext{right:18px}
.vclose{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;
    border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer}

/* ---------- цены ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:22px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;
    transition:transform .25s ease,box-shadow .25s ease}
.plan:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,18,32,.08)}
/* ⚠️ Здесь оставался прежний синий числом (39,72,161): палитру привели к
   знаку, а выделенный тариф остался обведён старым. На тёмной теме он и вовсе
   не подстраивался — число не знает про тему. */
.plan.best{border-color:color-mix(in srgb,var(--blue) 45%,transparent);
    box-shadow:0 16px 40px color-mix(in srgb,var(--blue) 16%,transparent);
    background:linear-gradient(170deg,
        color-mix(in srgb,var(--blue) 7%,var(--card)),var(--card) 55%)}
.plan .name{font-weight:600;font-size:18px}
.plan .why{color:var(--dim);font-size:15px;margin:6px 0 18px}
.plan .sum{font-size:40px;font-weight:700;letter-spacing:-1.4px}
.plan .sum span{font-size:16px;font-weight:600;color:var(--dim);margin-left:6px}
.tag{display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:999px;
    background:var(--soft);color:var(--blue);font-size:13px;font-weight:600}

details{background:var(--card);border:1px solid var(--line);border-radius:18px;
    padding:20px 22px;margin-bottom:12px}
summary{cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";float:right;color:var(--dim);font-weight:400;font-size:20px;line-height:1}
details[open] summary:after{content:"−"}
details p{margin:14px 0 0;color:var(--dim)}

footer{border-top:1px solid var(--line);padding:38px 0 52px;color:var(--dim);font-size:15px}
footer a{color:var(--dim)}
.frow{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.frow .auto{margin-left:auto}

@media (max-width:900px){
    .hero{padding:44px 0 18px}
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .device{width:262px;height:534px;transform:rotateY(-8deg) rotateX(3deg)}
    .screen-inner{--sh:483px}
    section{padding:58px 0}

    /* ⚠️ Спрятанная за краем панель расширяла страницу ровно на свою ширину —
       главная ехала вбок на 320 точек при каждом касании. */
    #navtoggle:checked ~ nav{transform:none;visibility:visible;
        transition:transform .28s cubic-bezier(.2,.7,.3,1),visibility 0s}
    html{overflow-x:hidden;overflow-x:clip}
    .mi{display:block}
    @keyframes navin{from{opacity:0;transform:translateX(14px)}}

    .shot img{height:280px}
    .live{grid-template-columns:1fr}}
/*
 * Свежее на главной.
 *
 * ⚠️ Стили СТОЯТ ЗДЕСЬ, а не в site.css: главная его не подключает.
 * Первая версия блока ушла туда и вышла голой колонкой с огромными
 * картинками — в разметке всё было цело, видно только на снимке.
 */
.freshgrid{display:grid;gap:14px;margin-top:18px}
@media (min-width:760px){.freshgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ⚠️ text-decoration:none нужен ВСЕГДА, а не только при наведении: на
   главной ссылки подчёркнуты по умолчанию, и весь текст карточки —
   заголовок и вступление — вышел подчёркнутым. Видно только на снимке. */
.freshcard{display:flex;flex-direction:column;overflow:hidden;background:var(--card);
    border:1px solid var(--line);border-radius:16px;text-decoration:none;
    transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
.freshcard b,.freshcard span{text-decoration:none}
.freshcard:hover{text-decoration:none;transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(16,26,51,.12)}
/* ⚠️ Пропорция задана здесь, размеры — в разметке: без этого блок
   прыгает при загрузке, и Lighthouse честно снимает за это баллы. */
.freshcard img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.freshkind{align-self:flex-start;margin:12px 14px 0;padding:2px 9px;border-radius:999px;
    background:var(--soft);color:var(--blue);font-size:12px;letter-spacing:.02em}
.freshcard b{margin:8px 14px 4px;font-size:16px;color:var(--ink);line-height:1.3}
.freshcard>span:last-child{margin:0 14px 14px;font-size:14px;color:var(--dim)}
.freshcard:hover b{color:var(--blue)}

/* ---------- заголовок раздела с кнопкой справа ---------- */
/* ⚠️ align-items:baseline, а не center: заголовок крупный, кнопка мелкая, и по
   середине они выглядят съехавшими друг относительно друга. */
.sechead{display:flex;align-items:baseline;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin:0 0 6px}
.sechead h2{margin:0}
.secgo{display:flex;gap:8px;flex-wrap:wrap}
.secgo a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
    padding:8px 15px;border:1px solid var(--line);border-radius:999px;
    background:var(--card);color:var(--ink);font-size:14px;font-weight:500;
    text-decoration:none;transition:border-color .15s,color .15s,transform .15s}
.secgo a:hover{border-color:var(--blue2);color:var(--blue);text-decoration:none;
    transform:translateY(-1px)}
.secgo svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.secgo a:hover svg{transform:translateX(3px)}

/* ⚠️ На узком экране кнопка уходит ПОД заголовок: прижатая справа, она
   оставляет заголовку полосу в два слова и ломает его в столбик. */
@media (max-width:640px){
    .sechead{flex-direction:column;align-items:flex-start;gap:10px}
    .secgo a{font-size:13px;padding:7px 13px}
}

/* ⚠️ Человеку, попросившему меньше движения, стрелку не двигаем. */
@media (prefers-reduced-motion: reduce){
    .secgo a,.secgo svg{transition:none}
    .secgo a:hover{transform:none}
    .secgo a:hover svg{transform:none}
}

/* ---------- белая рамка телефона под снимками экранов ---------- */
/*
 * ⚠️ Вёрсткой, а не картинкой: подложка-картинка это лишний запрос, вес и два
 * размера под разную плотность экрана.
 *
 * ⚠️ Белая, а не чёрная как у первого экрана. Одна тёмная рамка на светлом
 * фоне держит внимание, а шесть подряд в ленте сливаются в чёрную полосу.
 */
.phone{position:relative;border-radius:34px;padding:10px;
    background:linear-gradient(160deg,#FFFFFF,#EDEFF3);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
        0 0 0 1px rgba(16,26,51,.10),
        0 10px 26px rgba(11,18,32,.10)}
/*
 * ⚠️ Своего «островка динамика» здесь НЕТ и быть не должно. На снимках уже
 * есть настоящая строка состояния телефона со своим вырезом под камеру, и
 * нарисованный поверх островок ложится прямо на неё: получается два выреза
 * подряд, а в ленте он ещё и накрывает заголовок приложения.
 *
 * Форму телефона держат скругление, светлый корпус и тонкая черта по краю —
 * этого достаточно.
 */
.phone-scr{position:relative;border-radius:25px;overflow:hidden;background:#F1F3F6;
    line-height:0}
.phone-scr img{display:block;width:100%}

/* ⚠️ В ленте кадр обрезаем сверху: самое важное на экране приложения — верхняя
   треть, а целиком телефон в карточку не влезает. */
/* ⚠️ От самого верха: андроидная полоса теперь срезана при сборке, и
   прятать сверху нечего. Отступ в 12% съедал первую строку приложения. */
.shot .phone-scr img{height:330px;object-fit:cover;object-position:center top}

/* ⚠️ В окне просмотра рамка крупнее и БЕЗ обрезки: туда и приходят, чтобы
   рассмотреть экран целиком. */
.phone-big{padding:11px;border-radius:40px;max-width:min(92vw,392px)}
.phone-big .phone-scr{border-radius:30px}
.phone-big .phone-scr img{max-height:calc(84vh - 128px);width:auto;max-width:100%;
    margin:0 auto}

/* ⚠️ Тёмная тема: белый корпус на тёмном фоне слепит. Делаем его светло-серым
   и оставляем чёрточку по краю, чтобы форма телефона осталась читаемой. */
@media (prefers-color-scheme: dark){
    .phone{background:linear-gradient(160deg,#E7EAF0,#C9CFDA);
        box-shadow:0 0 0 1px rgba(255,255,255,.10),0 12px 30px rgba(0,0,0,.45)}
}

/* ---------- нарисованная строка состояния айфона ---------- */
/*
 * ⚠️ Стоит НАД снимком, а не поверх него: наложение съедало бы заголовок
 * приложения — на этих снимках это первое, что читают.
 *
 * ⚠️ Фон белый — ровно такой же, как у приложения под срезанной андроидной
 * полосой (проверено по пикселям исходника). Иначе виден шов.
 */
.phone-bar{display:flex;align-items:center;justify-content:space-between;
    background:#fff;color:#0B1220;padding:7px 16px 5px;
    font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1}
.pb-time{font-variant-numeric:tabular-nums}
.pb-ico{display:flex;align-items:center;gap:5px}
.pb-ico svg{height:10px;width:auto;fill:currentColor}

/* Полоска «домой»: без неё низ рамки обрывается ровным краем. */
.phone-home{background:#fff;padding:7px 0 9px;line-height:0;text-align:center}
.phone-home::before{content:"";display:inline-block;width:34%;height:4px;
    border-radius:3px;background:#0B1220;opacity:.72}

/* ⚠️ В ленте строка мельче: рамка там шириной 260 точек, и полноразмерная
   строка занимала бы у неё десятую часть высоты. */
.shot .phone-bar{padding:5px 12px 4px;font-size:10px}
.shot .pb-ico svg{height:8px}

/* ⚠️ У первого экрана снимок ЕДЕТ, и строка обязана стоять поверх: иначе она
   уедет вместе с ним. Здесь наложение уместно — сверху всё равно край. */
.screen .phone-bar{position:absolute;left:0;right:0;top:0;z-index:2;
    padding:9px 18px 7px;font-size:13px}

/* ---------- ход автопрокрутки в самой отметке ---------- */
/*
 * ⚠️ Полоса во всю ширину ленты читалась как случайная черта поперёк страницы:
 * глазу не к чему её привязать. Ход переносим в точку, которая и так
 * показывает, где мы, — она наливается цветом и в конце переключает кадр.
 *
 * ⚠️ Наливаем ФОНОМ, а не вложенным кирпичиком: точки рисует скрипт ленты,
 * и вложенный элемент пришлось бы создавать там же — то есть править
 * перерисовку ради украшения.
 */
.slider{--tick:3.6s}
.sdots i.on{
    background-color:var(--line);
    background-image:linear-gradient(var(--blue2),var(--blue2));
    background-repeat:no-repeat;
    background-size:0 100%;
    animation:dotfill var(--tick) linear infinite}
@keyframes dotfill{from{background-size:0 100%}to{background-size:100% 100%}}

/* ⚠️ Лента стоит — отметка просто закрашена. Наливающаяся точка над
   неподвижной лентой обещает то, чего не будет. */
.slider.hold .sdots i.on,
.slider.off .sdots i.on{animation:none;background-size:100% 100%}
@media (prefers-reduced-motion: reduce){
    .sdots i.on{animation:none;background-size:100% 100%}
}