/* ==========================================================================
   VAK Marketing — доработки по разбору дизайна (презентация «Анализ сайта»,
   слайды 15–24). Отдельный файл поверх основных стилей: правки видны одним
   списком и не смешиваются с исходной вёрсткой секций.
   ========================================================================== */

/* ---------- 15. Кейсы: пять карточек ровно по центру, без слайдера ------
   Кейсов пять, и на desktop они помещаются целиком: ленту, её полосу
   прогресса и стрелки убрали (правки ч. 3, п. 2), ряд стоит симметрично,
   как в среднем положении прежнего слайдера. Внутри узкой карточки чуть
   компактнее логотип, заголовок и цифры. На 901–1399 px — 3 + 2 по центру.
   «Смотреть все кейсы» — круглая стеклянная кнопка в духе карточек цифр.
   Телефон по-прежнему листает ленту пальцем. */
.rail__nav .rnd{display:none}
@media (min-width:901px){
  /* Заголовок и описание стоят по центру панели по вертикали: общая
     раскладка .head--split прижимает их к низу, и в панели заголовок
     казался съехавшим вниз, а описание — прилипшим к верху. */
  .cs .head--veil{padding:clamp(28px,3vw,40px) clamp(28px,3vw,44px);margin-bottom:clamp(22px,2.4vw,32px);align-items:center}
  .cs .head--veil .h2{margin:0;line-height:1.05}
  .cs .head--veil .head__note{padding-bottom:0}
  .cs .head--veil::before{inset:0;border-radius:24px;border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 52%,rgba(255,255,255,.024)),
               linear-gradient(180deg,rgba(11,8,22,.78),rgba(8,6,17,.84))}
  .cs .rail{overflow:visible;scroll-snap-type:none}
  .cs .rail__track{--cs-gap:clamp(14px,1.3vw,22px);flex-wrap:wrap;justify-content:center;gap:var(--cs-gap);
    width:100%;max-width:1760px;margin-inline:auto;padding-inline:clamp(20px,2.2vw,40px)}
  .cs .case{flex:0 1 calc((100% - 2 * var(--cs-gap)) / 3);width:auto;min-width:0;max-width:380px;
    padding:clamp(20px,1.6vw,30px)}
  .cs .case__h{gap:12px;min-height:56px}
  .cs .case__logo{width:48px;height:48px;flex-basis:48px;border-radius:10px}
  .cs .case__logo--wordmark{width:78px;height:38px;flex-basis:78px}
  .cs .case__t{font-size:clamp(20px,1.55vw,28px)}
  .cs .case__meta{margin-top:6px;font-size:12.5px}
  .cs .case__b{margin-top:18px;font-size:14px;line-height:1.55}
  .cs .res b{font-size:clamp(19px,1.5vw,27px)}
  .cs .res li:nth-child(even){padding-left:12px}
  /* «Смотреть все кейсы» убрана (правки ч. 4): в меню для этого есть пункт. */
  .cs .rail__foot{display:none}
}
@media (min-width:1400px){
  .cs .case{flex-basis:calc((100% - 4 * var(--cs-gap)) / 5)}
  /* Панель-шапка ровно по ширине ряда из пяти карточек под ней. */
  .cs > .wrap:first-child{max-width:1760px;padding-inline:clamp(20px,2.2vw,40px)}
}

/* ---------- Услуги (колода): весь текст карточки — в левой половине ------
   Справа стоит визуал услуги, слева было пусто, а описание с кнопкой
   ложились поверх картинки. Теперь название, описание и «Подробнее» идут
   одной колонкой слева. */
@media (min-width:901px){
  .srv.is-deck .srv__body{grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);grid-template-rows:auto auto auto;
    align-content:center;row-gap:0}
  .srv.is-deck .srv__t{grid-area:1/1/2/2}
  .srv.is-deck .srv__d{grid-area:2/1/3/2;max-width:40ch;margin-top:clamp(16px,1.6vw,24px)}
  .srv.is-deck .srv__body .link-arrow{grid-area:3/1/4/2;margin-top:clamp(20px,2vw,30px)}
}

/* Кейсы, правки ч. 4: подпись «Ключевые результаты» над цифрами, главный
   результат каждого кейса — акцентным градиентом. */
.case .res__h{margin:auto 0 0;padding-top:20px;color:#A794FF;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.case .res__h + .res{margin-top:10px;padding-top:0}
.res .res__key b{background:linear-gradient(96deg,#B6A7FF,#FF78C8 72%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:400}
.res .res__key b i{-webkit-text-fill-color:#CFC9DF}
.res .res__key span{color:#E6E1F5}

/* ---------- 16. Партнёры: логотипы крупнее на широком экране ------------
   Масштаб 1.15 на пункте списка, как в разборе. Появление (data-reveal)
   висит на самом списке, поэтому transform пунктов с ним не спорит; зазор
   между рядами увеличен ровно на прирост высоты. */
@media (min-width:1180px){
  .ptn .logos{row-gap:44px}
  .ptn .logos li{transform:scale(1.15)}
}
/* Правки ч. 3, п. 3: собственная цветная подложка секции обрывалась по
   бокам заметными швами. Убрана — партнёры лежат на общем фоне страницы.
   Правки ч. 4: на телефоне и планшете та же подложка давала жёсткий верхний
   край после «Команды», поэтому убрана на всех ширинах. */
.ptn::before{content:none}

/* ---------- 17. «О нас» ---------------------------------------------------
   Правки ч. 4: блок «О VAK Marketing» вернули как было — цифры снова
   идут полосой из четырёх колонок под сценой, без стеклянных квадратов.
   Объектив после сборки уходит вправо и растворяется до этой полосы. */

/* ---------- 18. Основатель: роль акцентом, ховер кнопок ---------------- */
.fnd__role{color:var(--vio-2)}
@media (hover:hover){.btn--ghost:hover{background:var(--vio-2);border-color:var(--vio-2);color:#fff}}

/* ---------- 19. Стратегия: «Не набор услуг…» --------------------------------
   Панель вокруг заголовка убрана (просьба 20.10): это обычный заголовок
   раздела, просто текст, как во всех остальных блоках. Свечение за ним
   обрезалось верхним краем блока и читалось полосой — тоже убрано. */
.sp[data-service="strategy"] .sp-decision-frame::before{content:none}

/* ---------- 20. Стратегия: две колонки «Рабочей карты» на одном уровне ----
   «Что делаем на каждом этапе» — настоящий h2 (правки ч. 4), того же
   размера, что и заголовок слева, и на одной линии с ним. Подпись «На
   выходе вы получаете» убрана: список сразу под заголовком. */
@media (min-width:901px){
  .sp[data-service="strategy"] .sp-strategy-workmap__title{
    margin:calc(13.5px * 1.45 + 18px) 0 clamp(26px,2.4vw,36px);
    color:var(--ink);font-size:clamp(27px,2.8vw,40px);font-weight:340;line-height:1.08;letter-spacing:-.032em}
  .sp[data-service="strategy"] .sp-strategy-scope__intro h2{font-size:clamp(27px,2.8vw,40px)}
  .sp[data-service="strategy"] .sp-strategy-deliverables{margin-top:clamp(26px,2.4vw,36px)}
}

/* ---------- 21. Блок доверия / медиасеть: фон как у всей страницы -------
   На всех услугах у блока был свой градиент, и он читался отдельной
   светлой полосой. Логотипы стоят в одну линию: знаки и словесные логотипы
   занимают одинаковую полосу высотой, подписи — строкой ниже. */
.sp .sp-trust,.sp .sp-trust.sp-media-network,.sp .sp-trust--strategy,
.sp .sp-trust.sp-trust--linkedin,.sp .sp-trust.sp-trust--seo,.sp .sp-trust.sp-trust--localization{background:none}
.sp .sp-logo{grid-template-rows:52px 20px;align-content:center;row-gap:10px}
.sp .sp-logo img{align-self:center;justify-self:center;max-height:44px;width:auto}
.sp .sp-logo--wide img,.sp .sp-logo:not(.sp-logo--mark) img{max-height:32px}
.sp .sp-logo.sp-logo--mark img{height:44px;max-height:44px}
/* Правки ч. 3, п. 4 и ч. 4: название стоит под каждым логотипом, включая
   словесные ZENEX и 1GHS, — и на компьютере, и на телефоне. */
/* Медиасеть PR — тот же блок, что «Наши партнёры и медиасеть» на главной:
   те же 18 изданий сразу, тонкие линии сверху и снизу, название капсом.
   Сетка как там: телефон — три колонки плиток, планшет — шесть, компьютер —
   пять, широкий экран — девять с увеличенными на 1.15 логотипами. */
.sp .sp-media-network .sp-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);padding-block:0;align-items:stretch}
.sp .sp-media-network .sp-logo-grid::before{content:none}
.sp .sp-media-network .sp-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:126px;padding:18px 12px;border-top:1px solid rgba(255,255,255,.075);border-bottom:1px solid rgba(255,255,255,.075);
  color:rgba(229,224,244,.68);transition:border-color .35s var(--e),color .35s var(--e),transform .45s var(--e-out)}
.sp .sp-media-network .sp-logo::before{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:0;
  background:linear-gradient(108deg,rgba(124,92,255,.055),transparent 48%,rgba(255,82,184,.035))}
.sp .sp-media-network .sp-logo img,.sp .sp-media-network .sp-logo.sp-logo--mark img{
  height:clamp(30px,3vw,42px);max-height:none;width:auto;max-width:94%;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(4,3,12,.3));transition:filter .35s var(--e),transform .45s var(--e-out)}
.sp .sp-media-network .sp-logo img[src*="yahoo-finance"],.sp .sp-media-network .sp-logo img[src*="benzinga"]{
  filter:grayscale(1) brightness(2.5) contrast(.94) drop-shadow(0 4px 12px rgba(4,3,12,.3))}
.sp .sp-media-network .sp-logo__name{color:inherit;font-size:11px;font-weight:650;line-height:1.1;letter-spacing:.04em;text-align:center;text-transform:uppercase}
@media (min-width:900px){.sp .sp-media-network .sp-logo-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.sp .sp-media-network .sp-logo{min-height:132px}}
@media (min-width:1180px){
  .sp .sp-media-network .sp-logo-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:44px 18px}
  .sp .sp-media-network .sp-logo{min-height:118px;padding:16px 8px;transform:scale(1.15)}
  .sp .sp-media-network .sp-logo img,.sp .sp-media-network .sp-logo.sp-logo--mark img{height:clamp(22px,2.25vw,34px)}
  .sp .sp-media-network .sp-logo__name{font-size:9.5px}
}
/* В service-page.css на узких экранах колонки сетки логотипов заданы с
   !important (1fr 1fr и 3), поэтому для телефона и планшета — тоже с ним. */
@media (min-width:600px) and (max-width:900px){.sp .sp-media-network .sp-logo-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px}}
@media (max-width:619px){
  .sp .sp-media-network .sp-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
  .sp .sp-media-network .sp-logo{min-height:84px;padding:12px 6px;gap:8px;border-radius:18px}
  .sp .sp-media-network .sp-logo img,.sp .sp-media-network .sp-logo.sp-logo--mark img{height:26px}
  .sp .sp-media-network .sp-logo__name{font-size:9px;letter-spacing:.03em}
}
@media (max-width:900px){
  .sp .sp-media-network .sp-logo img{filter:none}
  .sp .sp-media-network .sp-logo img[src*="yahoo-finance"],.sp .sp-media-network .sp-logo img[src*="benzinga"]{filter:grayscale(1) brightness(2.5)}
}
@media (hover:hover){
  .sp .sp-media-network .sp-logo:hover{border-color:rgba(196,183,255,.42);color:#fff;transform:translateY(-3px)}
  .sp .sp-media-network .sp-logo:hover::before{opacity:1}
  .sp .sp-media-network .sp-logo:hover img{transform:translateY(-2px);filter:drop-shadow(0 4px 12px rgba(4,3,12,.3)) drop-shadow(0 0 10px rgba(184,167,255,.28))}
}
@media (min-width:1180px) and (hover:hover){
  .sp .sp-media-network .sp-logo:hover{transform:scale(1.15) translateY(-3px)}
}

/* Правки ч. 4: подписи «Доверие» и «Консультация» на всех услугах —
   акцентным цветом страницы, как уже было на LinkedIn. */
.sp .sp-trust .sp-caption,.sp .sp-cta .sp-caption{color:var(--sp-accent)}

/* ---------- 22. LinkedIn: ховер ступени подсвечивает и её подпись ------- */
.sp-linkedin-funnel li{cursor:default}
.sp-linkedin-funnel__copy h3,.sp-linkedin-funnel__copy p,.sp-linkedin-funnel__copy::before{transition:color .3s var(--e),opacity .3s var(--e)}
.sp-linkedin-funnel li:hover .sp-linkedin-funnel__copy h3{color:currentColor}
.sp-linkedin-funnel li:hover .sp-linkedin-funnel__copy p{color:var(--ink)}
.sp-linkedin-funnel li:hover .sp-linkedin-funnel__copy::before{opacity:1}

/* ---------- 23. PR: цепочка без номеров --------------------------------- */
.sp-pr-chain__num{display:none}

/* ---------- 22. «Наши услуги» без колоды ----------------------------------
   Если колода не включилась (широкий экран без точного указателя), справа
   остаётся список услуг: короткое название в нём лишнее — раньше оно
   прилипало к полному («…ведение проектаСтратегия»). */
@media (min-width:901px){
  .srv:not(.is-deck) .srv__short{display:none}
}

/* ---------- 23. «Форматы» (PR) и «Что можно передать в работу» (локализация)
   на компьютере: объём без номеров и плашек (выбор 20.10). Пункты встают
   из лёгкого наклона, а под курсором приподнимаются, точка разгорается. */
@media (min-width:901px){
  .sp .sp-index{perspective:900px}
  .sp .sp-index__item{transform:rotateX(18deg) translateY(16px);transform-origin:50% 100%}
  .sp .sp-index.is-in .sp-index__item{transform:none}
  .sp .sp-index__item::before{transition:box-shadow .35s var(--e),transform .35s var(--e)}
}
@media (min-width:901px) and (hover:hover){
  .sp .sp-index.is-in .sp-index__item:hover{transform:translateY(-3px);transition-delay:0s}
  .sp .sp-index__item:hover::before{transform:scale(1.25);box-shadow:0 0 0 3px var(--bg),0 0 0 6px rgba(var(--sp-index-rgb),.16),0 0 20px rgba(var(--sp-index-rgb),.6)}
}

/* ---------- 24. Компьютер: движение по прокрутке на страницах услуг ------------
   Просьба 20.10 «в меру»: по 2–4 блока на страницу, у каждого своё движение.
   Значения --fill, --p, --dz/--da и классы is-on / is-cur / is-focus ставит
   service-mobile.js; первые экраны, ленты «Доверие», формы не затронуты. */
@media (min-width:901px){
  /* Свет по ряду: линии над колонками прорисовываются, точки загораются,
     заголовки по очереди заливаются градиентом страницы. */
  .sp .sp-proof.d-sweep .sp-proof__item{border-top-color:rgba(255,255,255,.08)}
  .sp .sp-proof.d-sweep .sp-proof__item::after{left:0;right:0;width:auto;top:-1px;height:1px;transform-origin:left;
    transform:scaleX(var(--fill,0));background:linear-gradient(90deg,rgba(var(--sp-proof-rgb),.95),rgba(var(--sp-proof-rgb),.25))}
  .sp .sp-proof.d-sweep .sp-proof__item::before{background:rgba(var(--sp-proof-rgb),var(--fill,0));
    box-shadow:0 0 0 4px rgba(var(--sp-proof-rgb),calc(var(--fill,0) * .12)),0 0 calc(var(--fill,0) * 16px) rgba(var(--sp-proof-rgb),.7)}
  .sp[data-service] .sp-main .sp-decision-frame__items.d-sweep > li::after{content:'';position:absolute;left:0;right:0;top:-1px;width:auto;height:1px;
    transform-origin:left;transform:scaleX(var(--fill,0));background:linear-gradient(90deg,rgba(var(--sp-decision-rgb),.95),rgba(var(--sp-decision-rgb),.25))}
  .sp .d-sweep > * h3{
    background:linear-gradient(90deg,transparent calc(var(--fill,0) * 110% - 10%),#4A4560 calc(var(--fill,0) * 110%)),
               linear-gradient(96deg,var(--sp-title-start,#C9BCFF),var(--sp-title-end,#FF8BCB));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .sp .d-sweep > * p{opacity:calc(.35 + var(--fill,0) * .65)}

  /* Барабан: пункт в середине экрана прямой и яркий, выше и ниже — отклонены
     и приглушены; заголовок в фокусе — градиентом. */
  .sp[data-service] .sp-main .m-drum{position:relative;perspective:1000px}
  .sp[data-service] .sp-main .m-drum.m-drum > *{opacity:calc(1 - var(--da,0) * .62);transform-origin:0 50%;
    transform:rotateX(calc(var(--dz,0) * -30deg)) scale(calc(1 - var(--da,0) * .08));transition:color .3s;will-change:transform}
  .sp[data-service] .sp-main .sp-index.m-drum{display:block}
  .sp[data-service] .sp-main .sp-index.m-drum > .sp-index__item{padding:16px 0}
  .sp[data-service] .sp-main .sp-index.m-drum > .sp-index__item::before,
  .sp[data-service] .sp-main .sp-index.m-drum > .sp-index__item::after{display:none}
  .sp[data-service] .sp-main .sp-index.m-drum > .sp-index__item > span{display:block;color:var(--ink);font-size:clamp(22px,1.9vw,28px);font-weight:360;line-height:1.25;letter-spacing:-.03em}
  .sp[data-service] .sp-main .m-drum > .is-focus :is(dt,h3),.sp[data-service] .sp-main .m-drum > .is-focus.sp-index__item > span{
    background:linear-gradient(96deg,var(--sp-title-start,#C9BCFF),var(--sp-title-end,#FF8BCB));-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}

  /* Подсветка по шагам: текущий шаг приподнят, заголовок градиентом,
     пройденные яркие, следующие приглушены. Номера шагов в этом режиме скрыты. */
  .sp[data-service] .sp-main .d-walk.d-walk > li{opacity:.38;transform:none;transition:opacity .45s var(--e-out),transform .5s var(--e-out)}
  .sp[data-service] .sp-main .d-walk.d-walk > li.is-on{opacity:1}
  .sp[data-service] .sp-main .d-walk.d-walk > li.is-cur{transform:translateY(-8px)}
  .sp[data-service] .sp-main .d-walk > li.is-cur h3{
    background:linear-gradient(96deg,var(--sp-title-start,#C9BCFF),var(--sp-title-end,#FF8BCB));-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  .sp .d-walk .sp-linkedin-phase__number,.sp .sp-loc-steps.d-walk > li > span{display:none}
  .sp .sp-seo-steps.d-walk > li.is-on .sp-seo-steps__ring{box-shadow:0 0 22px -4px rgba(var(--step-rgb),.9),inset 0 0 14px -8px rgba(var(--step-rgb),.9)}

  /* Линия этапов (LinkedIn «От составления профиля…», локализация «Адаптация
     контента…»): тусклая дорожка видна всегда, яркая линия растёт прокруткой,
     точки загораются, когда линия до них доходит. */
  .sp .sp-linkedin-icp.d-hline::after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.1)}
  .sp .sp-linkedin-icp.d-hline::before{z-index:1;transform-origin:left;transform:scaleX(var(--p,0))!important}
  .sp .sp-linkedin-icp.d-hline li::before{z-index:2;background:#06050C;border:2px solid rgba(255,255,255,.22);box-sizing:border-box;box-shadow:none;transition:background .4s,border-color .4s,box-shadow .4s}
  .sp .sp-linkedin-icp.d-hline li.is-on::before{background:var(--sp-accent);border-color:var(--sp-accent);box-shadow:0 0 12px rgba(var(--sp-accent-rgb),.6)}
  .sp .sp-linkedin-icp.d-hline li h3,.sp .sp-loc-relay.d-hline li h3{transition:color .4s}
  .sp .sp-linkedin-icp.d-hline li:not(.is-on) h3,.sp .sp-loc-relay.d-hline li:not(.is-on) h3{color:#8F88A6}
  .sp .sp-loc-relay.d-hline::after{content:'';position:absolute;left:5px;right:0;top:5px;height:1px;background:rgba(255,255,255,.12)}
  .sp .sp-loc-relay.d-hline::before{z-index:1;transform:scaleX(var(--p,0))!important;transition:none}
  .sp .sp-loc-relay.d-hline li>i{position:relative;z-index:2;transition:background .4s,box-shadow .4s}
  .sp .sp-loc-relay.d-hline li:not(.is-on)>i{background:#06050C;box-shadow:0 0 0 4px var(--bg),inset 0 0 0 2px rgba(255,255,255,.25)}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .sp[data-service] .sp-main .d-walk.d-walk > li{transition:opacity .2s}
}