/* v5 (06.10.2026): стартовая страница в несколько экранов поверх зацикленного видео.
   Видео обложки закреплено на весь экран, экраны идут поверх него обычной прокруткой;
   последний экран открывает самодиагностику. Работает с диска и на сайте. */

/* видео и затемнение обложки — фон всей страницы */
.st-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:#05090f;overflow:hidden}
.st-bg .mag-video,.st-bg .mag-field{position:absolute;inset:0;width:100%;height:100%}
.st-bg .mag-field{z-index:1}
.experience,.mag-mode .cover,.mag .cover{background:transparent!important}
body{background:#05090f}
/* затемнение видео одно на всю страницу: такое же, как на обложке (решение Романа 06.10) */
.st-bg .mag-field{transition:opacity .5s ease}
/* 06.10 (Роман): затемнение видео на всех экранах такое же, как в начале прокрутки; не светлеет */
html{scroll-behavior:auto}

/* экраны: шрифтовая палитра обложки — PT Sans Narrow во всем: рубрики как «Для компаний»,
   заголовки прописными как «Повышаем…», текст как подзаголовок обложки. Полупрозрачно поверх видео. */
.story{position:relative;z-index:4;color:#e9f0f5;font:400 clamp(17px,1.5vw,21px)/1.45 "PT Sans Narrow","Arial Narrow",sans-serif;
  --sb-pad:clamp(20px,4.4vw,64px);--sb-rule:rgba(220,238,249,.18);--sb-mut:#b9c8d4;--sb-gold:#8cdafa;--sb-txt:#c3d1dc;
  transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.sb{position:relative;padding:clamp(48px,7vh,84px) var(--sb-pad);background:rgba(4,8,14,.5);
  border-top:1px solid var(--sb-rule);text-shadow:0 1px 10px rgba(0,0,0,.3)}
.sb-wrap{max-width:1240px;margin:0 auto}
.sb-rub,.sb .sb-rub{margin:0 0 12px;font:700 clamp(14px,min(1.2vw,2vh),18px)/1.1 "PT Sans Narrow",sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sb-gold)}
.sb h2{margin:0 0 18px;font:400 clamp(28px,min(3vw,5vh),42px)/1.12 "PT Sans Narrow","Arial Narrow",sans-serif;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;text-wrap:balance}
.sb p{margin:0 0 12px;color:var(--sb-txt)}
.sb-lead{font-size:clamp(19px,1.7vw,23px);line-height:1.4;color:#dfe8ee!important}
.sb-small{margin-top:14px!important;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:var(--sb-mut)!important}
.sb-small b{color:#fff}
.sb b{font-weight:700}
/* два блока рядом, как разворот журнала */
.sb-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.sb-cols--wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sb-rows,.sb-steps{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--sb-rule)}
.sb-rows li,.sb-steps li{padding:11px 0;border-bottom:1px solid var(--sb-rule);font-size:clamp(16px,1.35vw,19px);line-height:1.45;color:var(--sb-txt)}
.sb-rows b,.sb-steps b{color:#fff}
.sb-steps{counter-reset:sb}
.sb-steps li{counter-increment:sb;position:relative;padding-left:40px}
.sb-steps li::before{content:counter(sb,decimal-leading-zero);position:absolute;left:0;top:12px;
  font:700 14px/1.4 "PT Sans Narrow",sans-serif;letter-spacing:.12em;color:var(--sb-gold)}
.sb-link{display:inline-block;margin-top:6px;color:var(--sb-gold);text-decoration:none;
  font:700 14px/1.2 "PT Sans Narrow",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(140,218,250,.45);padding-bottom:4px}
.sb-link:hover{color:#fff;border-color:#fff}
/* кнопки как «На связи» в шапке: капсула с тонкой рамкой и голубой круг со стрелкой */
.sb-btn{display:inline-flex;align-items:center;gap:16px;margin-top:22px;padding:4px 4px 4px 22px;
  border:1px solid rgba(224,241,251,.52);border-radius:30px;color:#f7fbfc;background:rgba(5,16,29,.48);text-decoration:none;
  font:700 14px/1 "PT Sans Narrow","Arial Narrow",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:none;
  transition:background .2s,border-color .2s}
.sb-btn .cta-arrow{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#8cdafa;color:#07121d;
  font:24px Arial,sans-serif;letter-spacing:0}
.sb-btn:hover{background:rgba(54,98,126,.28);border-color:#8cdafa}
.sb-final{padding-bottom:0}
.sb-foot{margin:clamp(40px,6vh,72px) calc(-1*var(--sb-pad)) 0;padding:26px var(--sb-pad) 30px;border-top:1px solid var(--sb-rule);background:rgba(4,8,14,.35)}
.sb-foot-about{max-width:120ch;font-size:16px!important;line-height:1.6;color:#b9c7d2!important}
.sb-foot-row{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:14px;font:700 13px/1.3 "PT Sans Narrow",sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sb-mut)}
.sb-foot-row a{color:var(--sb-mut);text-decoration:none}
.sb-foot-row a:hover{color:#fff}
/* ворота самодиагностики: короткий экран, на котором модель раскрывается */
/* второй экран: обращение крупно на две трети ширины, по ширине; «Узнаете себя?» как заголовок обложки;
   ниже блок «Метод» буквой Г: верх на всю ширину, под ним текст слева, справа в образовавшемся углу кнопка */
.sb-second{min-height:100svh;display:flex;align-items:center;padding-top:clamp(100px,13vh,128px)}
.sb-second>.sb-wrap{width:100%}
.sit{width:66.6%}
.sit p{text-align:justify;hyphens:none;-webkit-hyphens:none}
.sb .sit-big{margin:0 0 .6em;font-size:clamp(23px,2.2vw,32px);line-height:1.32;color:#eef4f8}
.sb .sit-sub{margin:0;font-size:clamp(17px,1.5vw,21.85px);line-height:1.42;color:var(--sb-txt)}
.sb .sit-ask{margin:clamp(22px,3.4vh,36px) 0 0;text-align:left;font:400 clamp(34px,min(3.7vw,5.9vh),52px)/1.05 "PT Sans Narrow",sans-serif;
  letter-spacing:.03em;text-transform:uppercase;color:#8cdafa}
.sit-g{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);
  margin-top:clamp(36px,6vh,64px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--sb-rule)}
.sit-g p{text-align:justify;hyphens:none;-webkit-hyphens:none}
.sit-g-top{grid-column:1/-1}
.sit-g-stem{grid-column:1}
.sit-g-act{grid-column:2;display:flex;align-items:flex-end;justify-content:flex-start}
.sit-g-act .btn-sd{margin-top:0}
.sb .sit-g-pull{margin:16px 0;padding-left:20px;border-left:2px solid #8cdafa;font-size:clamp(19px,1.7vw,24px);line-height:1.35;color:#fff;text-align:left}
@media(max-width:980px){
  .sb-second{min-height:0;display:block}
  .sit{width:auto}
  .sit-g{grid-template-columns:1fr}
  .sit-g-act{grid-column:1;margin-top:22px}
}
.sb-last{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:0 20px}
.sb-last-h{margin:0;font:400 clamp(28px,min(3vw,5vh),42px)/1.15 "PT Sans Narrow",sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
/* плавные переходы между страницей и самодиагностикой */
html.st-leaving .story{opacity:0}
html.st-leaving .mag-in{opacity:0!important;transition:opacity .9s cubic-bezier(.4,0,.2,1)}

@media(max-width:980px){
  .sb-cols,.sb-cols--wide{grid-template-columns:1fr;gap:44px}
}
@media(max-width:600px){
  .sb{padding:48px 20px}
  .sb-second{padding-top:96px}
  .sb-text p{text-align:left}
  .sb-foot{margin-left:-20px;margin-right:-20px;padding:24px 20px 28px}
}

/* шапка закреплена всегда: стоит на том же месте, что на обложке, и не уезжает с прокруткой.
   Подложка появляется, как только страница сдвинулась; высота шапки при этом не меняется. */
html:not(.st-model) .topbar{position:fixed;z-index:6;transition:padding .3s ease}
.topbar::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;
  background:rgba(5,9,15,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(220,238,249,.12);opacity:0;transition:opacity .3s ease;pointer-events:none}
html.st-hdr:not(.st-model) .topbar{padding-top:14px;padding-bottom:12px}
html.st-hdr:not(.st-model) .topbar::before{opacity:1}
.menu{position:fixed}

/* пока открыта самодиагностика, страница стоит, экраны спрятаны */
html.st-model,html.st-model body{overflow:hidden}
html.st-model .story{visibility:hidden}
/* пришли прямо по адресу самодиагностики: экраны не мелькают */
html.st-direct .story{visibility:hidden}

/* кнопка самодиагностики на обложке не показывается: ее нажимает скрипт, сама кнопка стоит на втором экране */
#start.st-start-hidden{display:none!important}

/* модель открыта: стекло REACH и обложка не рисуются, пока их не видно */
html.st-model .mag .masthead,html.st-model .masthead-glass{display:none!important}

/* пакеты консалтинга в меню обложки */
.menu .menu-sub{display:flex;flex-direction:column;padding:4px 0 10px 34px;border-bottom:1px solid #ffffff2b}
.menu .menu-sub a{display:block;padding:6px 0;border:0;font:16px/1.3 Arial,sans-serif;letter-spacing:0;color:#cfe0ea}
.menu .menu-sub a:hover{color:#fff}

/* самодиагностика открыта: под моделью ее собственный темно-синий фон, видео обложки не просвечивает
   ни по краям рамки, ни сквозь панели (как было в v4) */
.st-bg{transition:opacity .6s ease,visibility 0s linear 0s}
html.st-model .st-bg{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
html.st-model,html.st-model body,html.st-model .experience{background:#0a1322!important}

/* обложка как в v4: «Киев · Лондон» справа внизу, на месте строки с кнопками */
.mag-foot{justify-content:flex-end}

/* Правило набора сайта (устав «Дизайн-система», журнал v4): переносов слов нет нигде,
   основной текст по двум краям; по левому краю только лиды, примечания, вопрос перед кнопкой. */
.story,.story *{-webkit-hyphens:none!important;hyphens:none!important}
.sb-rows li,.sb-steps li,.sb-col>p:not(.sb-lead):not(.sb-small):not(.sb-rub){text-align:justify}
/* телефон (решение Романа 06.10, как во всем сайте с 30.09): по двум краям с переносами, иначе дыры между словами */
@media(max-width:640px){
  .story .sit p,.story .sit-g p:not(.sit-g-pull),.sb-rows li,.sb-steps li,.sb-col>p:not(.sb-lead):not(.sb-small):not(.sb-rub){text-align:justify!important;-webkit-hyphens:auto!important;hyphens:auto!important}
}

/* Кнопка самодиагностики — одна на весь сайт (06.10, Роман): лазурная капсула, круг со стрелкой,
   как кнопка «Пройти самодиагностику» на обложке опубликованного сайта. Класс .btn-sd */
.story .btn-sd{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;
  padding:4px 4px 4px 22px;min-height:52px;border:1px solid #8cdafa;border-radius:30px;background:#8cdafa;color:#0a1322;
  text-decoration:none;cursor:pointer;font:700 13px/1.2 "PT Sans Narrow","Arial Narrow",Arial,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;text-shadow:none;box-shadow:0 6px 18px -10px rgba(10,19,34,.45);transition:background .2s,color .2s,border-color .2s}
.btn-sd .cta-arrow{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;
  background:#0a1322;color:#8cdafa;font:20px/1 Arial,sans-serif;letter-spacing:0;transition:background .2s,color .2s}
.btn-sd:hover,.btn-sd:focus-visible{background:#0a1322;border-color:#0a1322;color:#8cdafa}
.btn-sd:hover .cta-arrow,.btn-sd:focus-visible .cta-arrow{background:#8cdafa;color:#0a1322}
.dark .btn-sd:hover,.hero-shot .btn-sd:hover,.story .btn-sd:hover,.dark .btn-sd:focus-visible,.story .btn-sd:focus-visible{background:#f4f1e9;border-color:#f4f1e9;color:#0a1322}
.dark .btn-sd:hover .cta-arrow,.hero-shot .btn-sd:hover .cta-arrow,.story .btn-sd:hover .cta-arrow{background:#0a1322;color:#8cdafa}
@media(max-width:640px){.btn-sd{white-space:normal;text-align:left}}
.story .btn-sd{font-size:13px}

/* прямоугольные кнопки к пакетам на экране «Что делать с картой» (Роман, 06.10): как .btn внутренних страниц на темном */
.st-rects{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
.st-rect{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:13px 16px 13px 20px;
  border:1px solid #8cdafa;background:#8cdafa;color:#0a1322;text-decoration:none;text-shadow:none;
  font:700 13px/1.2 "PT Sans Narrow","Arial Narrow",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 6px 18px -10px rgba(10,19,34,.45);transition:background .2s,color .2s,border-color .2s}
.st-rect .ar{font-size:15px;transition:transform .2s}
.st-rect:hover,.st-rect:focus-visible{background:#f4f1e9;border-color:#f4f1e9;color:#0a1322}
.st-rect:hover .ar{transform:translate(3px,0)}

/* второй экран: правая колонка буквы Г по ширине кнопки, текст слева занимает остальное (кнопка обычного размера, 06.10) */
.sit-g{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:980px){.sit-g{grid-template-columns:1fr}}

/* Текст экранов стартовой — Roboto Condensed 200 (Роман, 06.10: «только к тексту»). Заголовки, рубрики,
   «Узнаете себя?», кнопки и обложка остаются PT Sans Narrow. Кегль крупнее на ступень, цвет светлее:
   тонкий штрих на темном фоне иначе тает. Полужирные зачины — 500. */
.story .sit-big,.story .sit-sub,.story .sit-g p,.story .sb-col>p:not(.sb-rub),.story .sb-rows li,.story .sb-steps li,.story .sb-foot-about{
  font-family:"Roboto Condensed","PT Sans Narrow","Arial Narrow",sans-serif;font-weight:200;letter-spacing:0}
.story b{font-weight:500}
/* Три ступени текста на всех экранах стартовой (Роман, 06.10: «заголовок, подзаголовок, основной текст —
   ритм идентичный»):
   1) заголовок — PT Sans Narrow прописными, один кегль (h2 и «Узнаете себя?»);
   2) подзаголовок — Roboto Condensed 200, один кегль: крупное обращение, лид над списком, врезка;
   3) основной текст — Roboto Condensed 200, один кегль: абзацы, пункты, примечания.
   Подвал остается мельче — это служебная строка. */
.story{--t-head:clamp(30px,min(3vw,5vh),42px);--t-sub:clamp(23px,2vw,29px);--t-body:clamp(18px,1.45vw,21px)}
.sb h2,.sb .sit-ask{font-size:var(--t-head)!important;line-height:1.12!important}
.sb .sit-ask{margin-top:clamp(22px,3.4vh,36px)!important}
.sb .sit-big,.story .sb-lead,.sb .sit-g-pull{font-size:var(--t-sub)!important;line-height:1.34!important;color:#f4f8fb!important}
.sb .sit-sub,.story .sit-g p:not(.sit-g-pull),.story .sb-col>p:not(.sb-rub):not(.sb-lead),.story .sb-rows li,.story .sb-steps li,.story .sb-small{
  font-size:var(--t-body)!important;line-height:1.48!important}
.sb .sit-sub,.story .sit-g p:not(.sit-g-pull),.story .sb-col>p:not(.sb-rub):not(.sb-lead):not(.sb-small),.story .sb-rows li,.story .sb-steps li{color:#dfe8ee!important}
.story .sb-small{color:#c2cfd9!important}
.story .sb-foot-about{font-size:16px!important;color:#c9d6df!important}
@media(max-width:640px){.story{--t-head:28px;--t-sub:22px;--t-body:18px}}

/* «Что делать с картой» / «Начните с карты»: кнопки обеих колонок стоят на одной линии — внизу колонки */
.sb-final .sb-cols{align-items:stretch}
.sb-final .sb-col{display:flex;flex-direction:column}
.sb-final .sb-col>.st-rects,.sb-final .sb-col>.btn-sd{margin-top:auto}
.sb-final .sb-col>p:last-of-type{margin-bottom:22px}
.sb-final .sb-col>.btn-sd{align-self:flex-start}
@media(max-width:980px){.sb-final .sb-col>.st-rects,.sb-final .sb-col>.btn-sd{margin-top:8px}}

/* Обложка (Роман, 06.10): текст обложки тоже Roboto Condensed 200 — подзаголовок «Возвращаем управляемость…»,
   «С годовым оборотом от» и критерии. Заголовок «Повышаем…», «Для компаний», «5 млн €» и «Киев · Лондон»
   остаются PT Sans Narrow. Кегли прежние, цвет светлее: тонкий штрих на видео иначе тает. */
.mag-title--say .mag-say--sub,.acc-num .acc-in,.acc .acc-text,.acc .acc-text span{
  font-family:"Roboto Condensed","PT Sans Narrow","Arial Narrow",sans-serif!important;font-weight:200!important;letter-spacing:0!important}
.mag-title--say .mag-say--sub{color:#e3ebf1!important}
.acc .acc-text,.acc-num .acc-in{color:#eef3f7!important}

/* 06.10: самодиагностика не зависит от прокрутки. В Safari инерция трекпада продолжала двигать страницу
   после перехода наверх, модель оставалась выше окна и был виден только темно-синий фон. Пока модель
   открыта, весь блок обложки с моделью закреплен на экране, куда бы ни ушла прокрутка. */
html.st-model .experience{position:fixed!important;top:0;left:0;right:0;bottom:0;height:auto!important;min-height:0!important;z-index:20}

/* 06.10: шапка над открытой самодиагностикой. В Safari шапка пропадала: модель в iframe с WebGL рисуется
   отдельным слоем, и обычный элемент оказывался под ним, несмотря на z-index. Шапке и меню дан свой слой,
   подложка шапки с размытием (backdrop-filter) под моделью не рисуется. */
html.st-model .topbar{z-index:30!important;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}
html.st-model .topbar::before{display:none}
.menu{-webkit-transform:translateZ(0);transform:translateZ(0)}
html.st-model .menu{z-index:31}

/* 06.10: модель проявляется мягче (было 1,25 с) */
.mag-mode #model{transition:opacity 1.8s cubic-bezier(.4,0,.2,1)!important}