/* Новые блоки лендинга v3. Переменные — из основной страницы (--blue, --lime, --line, --muted, --bg-soft …). */


/* Первый экран: сцена вместо прежней картинки. */
.hero-scene{max-width:560px;justify-self:end;width:100%}
@media (max-width:900px){.hero-scene{justify-self:center;max-width:520px}}

/* Ролик. */
.video-sec{padding-top:56px;padding-bottom:24px}
.video-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
.video-in p{color:var(--muted);margin-top:12px}
.video{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:#f7f8fa;box-shadow:0 10px 30px rgba(24,56,77,.08)}
@media (max-width:900px){.video-in{grid-template-columns:1fr;gap:18px}}

/* Вторая группа возможностей. */
.subhead{margin:42px 0 16px;font-size:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fcard.soon{position:relative;border-style:dashed}
.soon-badge{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;background:#fff9dd;color:#6b5b00;font-size:12.5px;font-weight:600}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}

/* «Как это выглядит»: сцена + текст, строки чередуются. */
.scenes-sec{padding-top:72px}
.scene-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:44px;align-items:center;margin-top:36px}
.scene-row.rev{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.scene-row.rev .scene{order:2}
.scene-row h3{font-size:22px;line-height:1.25}
.scene-row p{color:var(--muted);margin-top:10px}
.scene-row .scene{margin:0}
@media (max-width:900px){.scene-row,.scene-row.rev{grid-template-columns:1fr;gap:14px;margin-top:28px}.scene-row.rev .scene{order:0}}

/* Окно cookie. Текст согласия не меняется (только оформление). Кнопки одинаковые по размеру и виду — без подталкивания
   к согласию. Окно не закрывает главную кнопку первого экрана: на компьютере стоит справа внизу (кнопка — в левой колонке),
   на планшете — внизу по центру (кнопка выше), на телефоне — сверху под шапкой (кнопка ниже). display задаёт скрипт страницы. */
#cookiebar{position:fixed;z-index:99;right:24px;bottom:24px;left:auto;width:min(600px,calc(100% - 48px));max-width:none;margin:0;
  display:none;flex-wrap:nowrap;gap:16px;align-items:flex-start;padding:18px 20px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 16px 44px rgba(24,56,77,.16);color:var(--muted);font-size:13px;line-height:1.5}
#cookiebar .ck-art{flex:none;width:56px;height:56px}
#cookiebar .ck-body{flex:1;min-width:0}
#cookiebar .ck-title{margin:0 0 4px;font-size:15.5px;line-height:1.3;font-weight:800;letter-spacing:-.01em;color:var(--text)}
#cookiebar .ck-text{margin:0}
#cookiebar a{color:var(--blue);text-decoration:underline}
#cookiebar .ck-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:max-content;max-width:100%;margin:14px 0 0 auto}
#cookiebar .ck-btn{margin:0;min-height:42px;padding:9px 16px;border-radius:9px;border:1.5px solid var(--blue);background:#fff;color:var(--blue);
  font-family:inherit;font-weight:700;font-size:14px;line-height:1.2;cursor:pointer;white-space:nowrap}
#cookiebar .ck-btn:hover{background:#eef5fa}
#cookiebar .ck-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media (max-width:900px){#cookiebar{left:0;right:0;bottom:16px;margin-inline:auto;width:min(640px,calc(100% - 32px))}}
@media (max-width:600px){
  #cookiebar{top:72px;bottom:auto;width:calc(100% - 16px);padding:14px 14px 12px;gap:10px;font-size:12.5px;line-height:1.45;
    max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow:auto;flex-wrap:wrap}
  #cookiebar .ck-art{width:36px;height:36px}
  #cookiebar .ck-body{display:contents}
  #cookiebar .ck-title{align-self:center;flex:1;margin:0;font-size:15px}
  #cookiebar .ck-text{flex-basis:100%}
  #cookiebar .ck-actions{flex-basis:100%;grid-template-columns:1fr;width:100%;margin:2px 0 0;gap:8px}
}



/* «Чего пока нет» — спокойная плашка под таблицей покрытия. */
.notyet{margin-top:22px;padding:18px 22px;border:1px dashed var(--line);border-radius:14px;background:#fff}
.notyet h3{font-size:16px;margin-bottom:8px}
.notyet ul{margin:0;padding-left:18px;color:var(--muted)}
.notyet li+li{margin-top:4px}

/* Цифры первого экрана: после уточнения «~15 минут на подключение по мастеру» три пункта снова в одну строку на компьютере. */
@media (min-width:1000px){.hero-proof{gap:22px;flex-wrap:nowrap}.hero-proof div{padding-right:22px}}

/* «Всё связано», вариант со значками: пункты справа, у каждого линейный значок 24 px в мягком круге. */
.icon-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.icon-list li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.5}
.icon-list .ico,.steps-row .ico{flex:none;width:24px;height:24px;color:var(--blue)}
.icon-list .ico{box-sizing:content-box;padding:8px;border-radius:50%;background:#e8f1f8;margin-top:-4px}

/* «Три шага»: без большой картинки, шаги в ряд (на телефоне — столбцом). Номер — главный ориентир. */
.steps-sec .section-head{margin-bottom:8px}
.steps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.steps-row .step{display:block;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.steps-row .step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.steps-row .step h3{font-size:18px;line-height:1.3;margin:0 0 6px}
.steps-row .step p{margin:0}
@media (max-width:900px){.steps-row{grid-template-columns:1fr;gap:12px}}

/* Полоса под первым экраном: названия площадок текстом, без логотипов (решение Дениса 24.09, AUDIT.md §15).
   Прежнее «рассыпание» на телефоне: подпись была таким же элементом ряда, что и значки, а промежуток 40 px действовал
   и между строками. Пустота над полосой — нижний отступ первого экрана 56 px плюс пустые поля картинки героев
   (сверху 8 %, снизу 10 % высоты): поля компенсируются отрицательными отступами, картинку не режем — на ней SVG-слой сцены. */
.strip-text .strip-in{gap:14px}
.strip-text .pchip+.pchip::before{content:"·";margin-right:14px;color:var(--muted);font-weight:400}
@media (max-width:600px){
  .hero{padding-bottom:12px}
  /* картинка первого экрана обрезана по рисунку — отрицательные поля прежней картинки не нужны */
  .strip-text .strip-in{gap:6px 20px;padding:14px 0}
  .strip-text .strip-in>span:first-child{flex-basis:100%;text-align:center}
  .strip-text .pchip{font-size:14px}
  .strip-text .pchip+.pchip::before{content:none}
}

/* Узкие экраны (320 px, и в окне с полосой прокрутки): «Склад не отстаёт.» не переносится (white-space:nowrap из production)
   и при 34 px выходила за поле страницы на 8 px — заголовок чуть меньше. */
@media (max-width:360px){.hero h1{font-size:30px}.hero-actions .btn-lime{padding-inline:14px;font-size:15px;white-space:nowrap}}

/* Иллюстрации без теней и ореолов (правило Дениса): production даёт картинкам в .split drop-shadow. */
.split img{filter:none}