/* ==========================================================================
   VAK Marketing — секции. У каждой своя сетка и свой тип взаимодействия,
   чтобы страница не читалась как лента одинаковых карточек.
   ========================================================================== */

/* ═══ 2. HERO ═══════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(30px,7vh,80px));
  padding-bottom:clamp(96px,14vh,150px)}
.hero__in{max-width:min(var(--wrap),100%)}

.hero__h1{font-size:clamp(30px,3.85vw,55px);font-weight:360;line-height:1.09;letter-spacing:-.036em;
  /* Две трети экрана занимает содержательный оффер; правое поле оставляем
     оптическому объекту, чтобы заголовок не превращался в узкую колонку. */
  max-width:15.8em;margin:0 0 clamp(20px,2.2vw,30px);
  opacity:0;transform:translateY(26px);
  animation:rise 1.15s var(--e-out) .12s forwards}
.hero__accent{color:#fff;font-size:1.01em;line-height:inherit;font-family:var(--f);font-style:normal;font-weight:650;
  background:linear-gradient(96deg,#B6A7FF,#FF78C8 72%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.hero__sub{max-width:47ch;margin:0 0 clamp(26px,3vw,38px);color:var(--ink-2);
  font-size:clamp(16px,1.05vw,18.5px);line-height:1.62;
  opacity:0;transform:translateY(20px);animation:rise 1.1s var(--e-out) .3s forwards}

.hero__act{display:flex;flex-wrap:wrap;gap:13px;
  opacity:0;transform:translateY(18px);animation:rise 1.1s var(--e-out) .44s forwards}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero__h1,.hero__sub,.hero__act{animation:none;opacity:1;transform:none}
}
@media (max-width:640px){
  .hero{min-height:auto;padding-bottom:clamp(120px,20vh,170px)}
}
@media (max-width:560px){
  .hero__act{flex-direction:column;align-items:stretch}
  .hero__act .btn{width:100%}
}
/* Телефон: первый экран целиком в одном кадре. Текст наверху, прибор
   по центру под кнопками (его ставит сцена).
   Заголовок проявляется из-под маски, акцентные слова медленно
   переливаются, кнопки стоят в ряд. */
@media (max-width:560px){
  .hero{min-height:100svh;align-items:flex-start;padding-top:calc(var(--nav-h) + 30px);padding-bottom:0}
  .hero__h1{font-size:clamp(30px,8.4vw,40px);line-height:1.08;margin-bottom:16px;
    clip-path:inset(0 0 100% 0);transform:translateY(18px);animation:hero-unmask 1.2s var(--e-out) .1s forwards}
  .hero__accent{background:linear-gradient(96deg,#B6A7FF,#FF78C8 35%,#B6A7FF 70%,#FF78C8) 0 0/220% 100%;
    -webkit-background-clip:text;background-clip:text;animation:hero-accent 7s ease-in-out 1.2s infinite alternate}
  .hero__sub{font-size:15.5px;line-height:1.55;margin-bottom:22px}
  .hero__act{flex-direction:row;align-items:stretch;gap:10px}
  .hero__act .btn{flex:1 1 0;width:auto;min-width:0;height:50px;padding:0 12px;font-size:14px}
}
@media (max-width:359px){
  .hero__act{flex-direction:column}
  .hero__act .btn{flex:none;width:100%}
}
@keyframes hero-unmask{to{clip-path:inset(0 0 -12% 0);opacity:1;transform:none}}
@keyframes hero-accent{to{background-position:100% 0}}
.hero__nowrap{white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .hero__h1{clip-path:none}
  .hero__accent{animation:none}
}
/* В коротком landscape-окне герой остаётся обычным читаемым блоком, а не
   пытается втиснуть текст, кнопки и фиксированную сцену в одну высоту. */
@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;align-items:flex-start;padding-top:calc(var(--nav-h) + 24px);padding-bottom:52px}
  .hero__h1{max-width:17.5em;margin-bottom:14px;font-size:clamp(28px,4vw,36px)}
  .hero__sub{max-width:58ch;margin-bottom:18px;font-size:15px;line-height:1.5}
  .hero__act{gap:10px}
  .hero__act .btn{height:46px}
}

/* ═══ 3. О НАС ══════════════════════════════════════════════════════════ */
.about__grid{display:grid;gap:clamp(26px,3vw,56px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.about{overflow:clip}
/* На широком экране About — не пролетающий мимо иллюстрации блок, а короткая
   инженерная сцена: пока текст объясняет систему, левый объект можно спокойно
   рассмотреть в разобранном и собранном состояниях. На телефоне sticky не
   используется — там остаётся обычная короткая прокрутка. */
@media (min-width:901px){
  /* Дополнительная длина — не пустота: она даёт детали время спокойно
     собраться и увести цельный объект вправо-вниз одной непрерывной дугой. */
  .about__grid{min-height:clamp(980px,154svh,1240px)}
  /* Визуальная колонка не участвует своей полной высотой в расчёте sticky:
     тогда сама сцена остаётся в пределах About почти до его нижней границы,
     а не уезжает вверх сразу после текста справа. */
  .about__side{position:sticky;top:calc(var(--nav-h) + 22px);align-self:start;
    height:clamp(52px,4vw,62px)}
  /* Ширина совпадает с реальным размахом раскрытого объектива: каждая
     подпись остаётся под своим модулем, включая переднюю корону справа. */
  .about .about__stage{position:absolute;top:clamp(74px,5vw,92px);left:var(--about-stage-center,50%);width:min(88vw,1320px);min-height:clamp(500px,42vw,620px);margin:0;transform:translateX(-50%)}
}
.about__side .h2{max-width:12ch;color:#D3C9FF;font-weight:580}
.about__stage{position:relative;width:min(100%,580px);min-height:clamp(320px,32vw,450px);
  margin:clamp(18px,2.4vw,34px) 0 0;pointer-events:none}
.about__module-labels{position:absolute;z-index:2;inset:0;opacity:0}
.about--labels .about__module-labels{opacity:1}
/* Это не шкала и не HUD: каждая подпись получает X-позицию от реального
   3D-якоря своего узла. Поэтому при раскрытии она остаётся под своей
   механической частью, а при обратной сборке возвращается вместе с ней. */
.about__module-label{position:absolute;left:50%;bottom:clamp(14px,1.5vw,26px);width:clamp(124px,10vw,150px);
  min-width:0;text-align:center;opacity:var(--module-opacity,0);
  transform:translate3d(calc(-50% + var(--module-x,0px)),var(--module-offset,6px),0);will-change:opacity,transform;
  text-shadow:0 2px 10px rgba(5,3,16,.9)}
.about__module-label span{display:block;color:#F0ECFF;font-size:clamp(13px,1vw,16px);font-weight:680;letter-spacing:.008em;
  line-height:1.15;text-transform:uppercase;overflow-wrap:anywhere}
.about__module-label small{display:block;margin-top:4px;color:#C7C1D7;font-size:clamp(10.5px,.78vw,12.5px);font-weight:540;
  line-height:1.2;letter-spacing:.005em;overflow-wrap:anywhere}
.about__module-label--result span{color:#D8EEFF}
.about__flow-line{position:absolute;z-index:3;left:50%;bottom:-44px;display:flex;align-items:center;justify-content:center;
  gap:clamp(9px,1.2vw,18px);width:max-content;max-width:calc(100% - 14px);margin:0;opacity:0;transform:translateX(-50%) translateY(8px);filter:blur(1.2px);
  color:#E5E0F4;font-size:clamp(11px,.9vw,14px);font-weight:620;letter-spacing:.045em;line-height:1.2;text-transform:uppercase;
  text-align:center;text-shadow:0 2px 14px rgba(5,3,16,.9);pointer-events:none;
  transition:opacity .58s var(--e),transform .72s var(--e-out),filter .58s var(--e)}
/* Степпер этапов под модулями. Этап = группа модулей: Стратегия (Рынок,
   Позиция), Тактика (Каналы, Контент), Оптимизация (Лиды), Результат.
   Луч заполняет отрезок между словами; слово загорается целиком, когда
   луч дошёл, и вместе с ним загораются подписи его модулей. Состояния и
   --fill задаёт сцена от той же прокрутки, что и механика. */
.about--flow-intro .about__flow-line{opacity:1;transform:translateX(-50%);filter:none}
.about__flow-line span{position:relative;color:rgba(229,224,244,.40);transition:color .45s var(--e),text-shadow .45s var(--e)}
.about__flow-line span[data-state="done"]{color:#F1EEFF}
.about__flow-line span[data-state="active"]{color:#FFFFFF;text-shadow:0 0 18px rgba(160,190,255,.55)}
.about__flow-line span::before{content:'';position:absolute;left:50%;top:-11px;width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:0;transform:translateX(-50%) scale(.4);transition:opacity .45s var(--e),transform .45s var(--e)}
.about__flow-line span[data-state="active"]::before{opacity:1;transform:translateX(-50%) scale(1);background:#9EE6FF;box-shadow:0 0 10px #62E4FF}
.about__flow-line i{--fill:0;position:relative;display:block;flex:0 0 auto;width:clamp(34px,4.2vw,70px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,#9B84FF,#62E4FF) 0 0/calc(var(--fill) * 100%) 100% no-repeat,rgba(255,255,255,.12)}
.about__flow-line i::after{content:'';position:absolute;top:50%;left:calc(var(--fill) * 100%);width:8px;height:8px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 12px 2px rgba(120,210,255,.9);transform:translate(-50%,-50%);
  opacity:calc(min(var(--fill) * 12, 1) * min((1 - var(--fill)) * 12, 1))}
/* Одна строка вместо трёх: подписи модулей не показываются, этапы сами
   ведут историю разборки и сборки. Строка поднята к объективу, крупнее,
   луч между словами длиннее и ярче. */
.about__module-labels{display:none}
.about__flow-line{bottom:clamp(-4px,.4vw,10px);gap:clamp(12px,1.5vw,24px);font-size:clamp(12.5px,1.08vw,16.5px);letter-spacing:.07em}
.about__flow-line i{width:clamp(48px,5.4vw,96px);height:2px}
.about__flow-line i::after{width:10px;height:10px;box-shadow:0 0 16px 3px rgba(120,210,255,.95)}
.about__flow-line span[data-state="done"]{color:#DCD5F7}
.about__flow-line span[data-state="active"]{color:#FFFFFF;text-shadow:0 0 22px rgba(170,190,255,.8),0 0 2px rgba(255,255,255,.6)}
.about__flow-line span::before{top:-14px;width:6px;height:6px}
@media (max-width:900px){.about__flow-line i{width:clamp(18px,5.4vw,44px)}}
@media (max-width:480px){.about .about__flow-line{font-size:10.5px;gap:6px;letter-spacing:.02em}}
@media (max-width:370px){.about .about__flow-line{font-size:9.5px;gap:5px}.about .about__flow-line i{width:16px}}
.about__body{position:relative;isolation:isolate;max-width:46ch;color:var(--ink-2)}
.about__body::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-30px -52px -38px -30px;
  background:radial-gradient(92% 96% at 31% 44%,rgba(6,5,12,.94) 0%,rgba(6,5,12,.82) 49%,rgba(6,5,12,0) 100%);
  filter:blur(2px)}
.about__body .lead{margin-bottom:1.15em}
.about__body .link-arrow{margin-top:16px;padding:0 19px;height:45px;border-radius:999px;color:#fff;
  background:linear-gradient(101deg,#7958F8,#B849FF 53%,#F85BB8);
  box-shadow:0 13px 34px -18px rgba(181,85,255,.95)}
.about__body .link-arrow:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 42px -17px rgba(181,85,255,1)}
@media (max-width:900px){.about__grid{grid-template-columns:minmax(0,1fr)}.about__side{padding-bottom:50px}.about__body{min-width:0}.about__stage{min-height:clamp(310px,72vw,390px);width:min(100%,520px);margin-inline:auto}.about__module-labels{display:none}
  .about__module-label{bottom:-52px;width:70px}.about__module-label span{font-size:8.5px;line-height:1.1}.about__module-label small{display:none}
  .about__flow-line{bottom:-36px;gap:clamp(6px,2vw,11px);font-size:clamp(9px,2.15vw,12px);letter-spacing:.025em;white-space:nowrap}}
@media (max-width:390px){.about__flow-line{font-size:8.5px;gap:5px;letter-spacing:.012em}}

/* ═══ 4. ЦИФРЫ ══════════════════════════════════════════════════════════ */
.figures{padding-block:clamp(60px,7vw,110px)}
.fig{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line)}
.fig li{padding:clamp(26px,3vw,44px) clamp(14px,2vw,34px) 6px;position:relative}
.fig li+li{border-left:1px solid var(--line)}
.fig__n{display:block;font-size:clamp(38px,5vw,74px);font-weight:200;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:linear-gradient(168deg,#FFFFFF 18%,#C9B9FF 72%,#8E7BE0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fig__l{display:block;margin-top:14px;font-size:15px;color:var(--ink)}
.fig__d{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--ink-3);
  max-width:24ch}
@media (max-width:820px){
  .fig{grid-template-columns:1fr 1fr}
  .fig li:nth-child(3){border-left:0}
  .fig li:nth-child(n+3){border-top:1px solid var(--line)}
  .fig li{padding-inline:0 clamp(14px,4vw,30px)}
  .fig li+li{padding-left:clamp(14px,4vw,30px)}
  .fig li:nth-child(3){padding-left:0}
}

/* ═══ 5. С КЕМ РАБОТАЕМ — четыре самостоятельные сцены ═══════════════ */
.aud>.wrap{max-width:1440px}
.slats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.slat{width:100%;min-width:0;position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;aspect-ratio:2.35;min-height:280px;
  padding:clamp(24px,2.3vw,34px);overflow:hidden;isolation:isolate;
  border:1px solid rgba(163,137,234,.22);border-radius:8px;background:#05050e;
  contain:layout paint}
.slat__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:75% center;pointer-events:none;opacity:.94;
  transform:scale(1.005);transition:transform .85s var(--e-out)}
.slat::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,4,13,.75),rgba(4,4,13,.4) 46%,rgba(4,4,13,.04) 78%),
    linear-gradient(0deg,rgba(4,4,13,.62),transparent 70%)}
.slat__t,.slat__d{position:relative;z-index:2}
.slat__t{margin:0;font-size:clamp(20px,1.65vw,24px);font-weight:400;line-height:1.24;
  letter-spacing:-.026em;color:#f5f3fb;text-wrap:balance}
.slat__d{margin:14px 0 0;width:68%;max-width:38ch;min-height:4.65em;font-size:14px;line-height:1.55;color:#d9d6e4}
@media (hover:hover) and (pointer:fine){.slat:hover .slat__photo{transform:scale(1.03)}}
@media (min-width:701px) and (max-width:1199px){.slat__d{min-height:6.2em}}
@media (max-width:1000px) and (min-width:701px){
  .slat{min-height:290px;padding:24px}
  .slat__d{width:84%}
}
@media (max-width:700px){
  .slats{grid-template-columns:1fr;gap:12px}
  .slat{aspect-ratio:auto;min-height:280px;padding:24px 22px}
  .slat__photo{object-position:65% center}
  .slat::before{background:linear-gradient(90deg,rgba(4,4,13,.75),rgba(4,4,13,.14)),linear-gradient(0deg,rgba(4,4,13,.8),transparent 90%)}
  .slat__t{font-size:22px}
  .slat__d{width:92%;max-width:38ch;min-height:0}
}
@media (prefers-reduced-motion:reduce){.slat__photo{transition:none;transform:none!important}}

/* ═══ 6. УСЛУГИ ═════════════════════════════════════════════════════════ */
.srv__grid{display:grid;gap:clamp(24px,3.4vw,64px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}

/* Колода. Базовое состояние (без JS, при prefers-reduced-motion и до сборки) —
   просто шесть карточек друг под другом: всё содержимое доступно, ничего
   не перекрывается, прокрутка обычная. */
.srv__deck{display:flex;flex-direction:column;gap:16px}
.srv__card{min-height:clamp(320px,30vw,392px);display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate}
/* В карточке остаётся только один предметный слой — 3D-объект. Убираем
   прежнюю фоновую фотографию: она спорила с объектом и дробила композицию. */
.srv__card::before{z-index:0;
  background:
    radial-gradient(68% 110% at 94% 50%,rgba(115,91,218,.20),transparent 66%),
    linear-gradient(115deg,rgba(18,14,36,.98),rgba(10,8,21,.95) 58%,rgba(18,12,34,.88))}
.srv__card::after{content:'';position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,18,.14),rgba(8,7,18,.78) 28%,rgba(8,7,18,.82) 68%,rgba(8,7,18,.24))}
.srv__body{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;min-height:0;
  color:#f7f5ff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.srv__art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  max-width:none;pointer-events:none;opacity:.60;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 90%,transparent 100%);
  transform:scale(1.02);transform-origin:74% 50%;
  will-change:transform,opacity,filter;
  transition:transform .82s var(--e-out),opacity .46s ease,filter .46s ease}
.srv__card:hover .srv__art{opacity:.60;filter:none;
  transform:scale(1.045)}
.srv__card:hover::before{filter:brightness(1.06)}
.srv__t{margin:0 0 12px;font-size:clamp(21px,1.9vw,28px);font-weight:360;
  letter-spacing:-.028em;line-height:1.16}
.srv__d{margin:0 0 20px;color:#efedf7;font-size:15px;font-weight:400;line-height:1.6;max-width:42ch}
.srv__body .link-arrow{color:#f7f5ff}

/* ─── рабочее состояние: закреплённая колода ─────────────────────────────
   Секции задаётся прокручиваемая длина (её считает main.js), а сцена внутри
   липкая — пока эта длина идёт, колода стоит на экране. Позиции карточек
   в 3D считает main.js от доли прокрутки: уходящая карточка вылетает
   на зрителя и заваливается назад, следующая поднимается из стопки. */
.srv.is-deck .srv__stage{position:sticky;top:0;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;padding-block:var(--nav-h) 0;
  /* Карточка, вылетающая на зрителя, уезжает по Z далеко вперёд, и её
     видимый бокс становится огромным. Браузер считает это переполнением
     и добавляет к документу прокрутку — на широком экране набегало больше
     четырёх тысяч пикселей пустоты под подвалом, и вся привязка сцены
     к секциям съезжала. Обрезка по сцене (она ровно во весь экран)
     ничего не режет на глаз и убирает переполнение.
     Именно clip, а не hidden: hidden сделал бы этот блок скролл-контейнером
     и сломал бы липкость. */
  overflow:clip}
.srv.is-deck .srv__grid{align-items:center}
.srv.is-deck .srv__deck{position:relative;display:block;
  height:clamp(330px,44vh,430px);perspective:1500px;perspective-origin:50% 42%;
  touch-action:pan-y;cursor:grab}
.srv.is-deck .srv__deck.is-drag{cursor:grabbing}
.srv.is-deck .srv__card{position:absolute;inset:0;margin:0;min-height:0;
  transform-origin:50% 76%;backface-visibility:hidden;
  transition:none;
  /* Слой держим постоянно. Переключать will-change по видимости казалось
     экономией, но замер показал обратное: создание и уничтожение слоя
     на лету давало единственные пропуски кадров на всей секции. */
  will-change:transform,opacity,filter}
.srv.is-deck .srv__body{transition:opacity .22s var(--e-out)}
/* Карточку под курсором не поднимаем: в колоде это спорит с 3D-раскладкой. */

/* Список-оглавление тоже становится стеклом. Замер по холсту показал, что
   на закреплённой секции прибор стоит рядом с ним пять экранов подряд и
   роняет строки до 1.54:1. Уводить прибор к полю на всё это время жалко —
   он здесь главный, поэтому плотность добирает панель: те же brightness()
   и тёмная подложка, что у карточек кейсов. Прибор сквозь неё виден. */
.srv.is-deck .srv__list{padding:clamp(10px,1.4vw,20px) clamp(16px,1.8vw,26px);
  border-radius:20px;border:1px solid var(--line);border-top:1px solid var(--line);
  background:
    linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 54%,rgba(255,255,255,.024)),
    linear-gradient(180deg,rgba(11,8,22,.80),rgba(8,6,17,.86))}
.srv.is-deck .srv__list li:first-child .srv__row{border-top:0}

@media (max-width:900px){
  .srv.is-deck .srv__stage{padding-block:calc(var(--nav-h) + 8px) 0}
  .srv.is-deck .srv__deck{height:clamp(340px,52vh,440px)}
}

.srv__list{border-top:1px solid var(--line)}
.srv__row{display:flex;align-items:baseline;width:100%;
  padding:clamp(17px,1.9vw,25px) 0;text-align:left;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .55s var(--e-slat)}
/* бегущая подчёркивающая линия */
.srv__row::before{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background:linear-gradient(90deg,var(--vio-2),var(--mag));transition:width .55s var(--e-slat)}
/* вертикальный акцент вместо номера */
.srv__row::after{content:'';position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--vio-2),var(--mag));transform:translateY(-50%);
  transition:height .45s var(--e-slat)}
.srv__rt{font-size:clamp(16px,1.35vw,21px);font-weight:360;letter-spacing:-.024em;
  color:var(--ink-2);line-height:1.32;
  transition:color .35s ease,transform .45s var(--e-slat)}
.srv__row:hover .srv__rt{color:var(--ink);transform:translateX(5px)}
.srv__row.is-on .srv__rt{color:var(--ink);transform:none}
.srv__row.is-on{padding-left:clamp(14px,1.5vw,22px)}
.srv__row.is-on::before{width:100%}
.srv__row.is-on::after{height:calc(100% - 30px)}
.srv__row:active .srv__rt{transform:translateX(2px)}
@media (max-width:900px){
  .srv__grid{grid-template-columns:1fr}
  .srv__panel{position:static}
  .srv__panel .card{min-height:0}
  .srv__grid{gap:20px}
  .srv__deck{gap:14px}
  .srv__card{min-height:clamp(276px,70vw,340px);padding:clamp(22px,5.5vw,32px);border-radius:20px}
  .srv__art{object-position:72% center;opacity:.47}
  .srv__t{margin-bottom:11px;font-size:clamp(23px,6.2vw,29px);line-height:1.14}
  .srv__d{margin-bottom:0;max-width:36ch;font-size:15px;line-height:1.58}
  .srv__body .link-arrow{min-height:44px;margin-top:auto;padding-top:14px}
  /* На телефоне карточки уже содержат полный текст и действие. Дублирующая
     шкала добавляла шесть одинаковых строк без нового сценария. */
  .srv__list{display:none}
}

/* ─── десктоп: колода по центру ──────────────────────────────────────────
   На широком экране двухколонка «карточка слева, список справа» проигрывала:
   карточка мелкая, а половину внимания забирала стеклянная панель. Здесь
   колода выходит на середину и становится крупной, список превращается
   в узкую шкалу под ней, а глубину даёт не только 3D, но и расфокус —
   тот же приём, что и у прибора на странице. Мобильная раскладка ниже
   осталась прежней. */
@media (min-width:901px){
  .srv.is-deck .head{text-align:center}
  .srv.is-deck .head .h2{max-width:none;margin-inline:auto}

  .srv.is-deck .srv__grid{grid-template-columns:minmax(0,1fr);justify-items:center;
    gap:clamp(24px,3vw,44px)}
  .srv.is-deck .srv__deck{width:min(1010px,74vw);height:clamp(392px,52vh,540px);
    perspective:2000px;perspective-origin:50% 47%}
  .srv.is-deck .srv__card{border-radius:26px;padding:clamp(34px,3.4vw,58px);
    /* Прибор проходит вплотную за колодой и на просвет спорит с текстом.
       Раньше его гасило размытие подложки, теперь — плотность самой карточки.
       Силуэт остаётся виден призраком, читаемость не страдает. */
    background:
      linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.016) 46%,rgba(255,255,255,.038)),
      linear-gradient(180deg,rgba(21,16,41,.92),rgba(11,8,23,.95))}
  .srv.is-deck .srv__card::before{transition:filter .46s ease}
  .srv.is-deck .srv__art{opacity:.52}
  .srv.is-deck .srv__card.is-on{border-color:rgba(197,182,255,.30);box-shadow:inset 0 1px 0 rgba(218,207,255,.13),0 30px 68px -52px rgba(124,92,255,.50)}

  /* Крупная карточка: заголовок слева, описание и ссылка справа. */
  .srv.is-deck .srv__body{display:grid;align-content:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(30px,3.8vw,70px);row-gap:clamp(16px,2vw,28px)}
  .srv.is-deck .srv__t{grid-area:1/1/3/2;margin:0;align-self:start;
    font-size:clamp(25px,2.5vw,40px);line-height:1.1;letter-spacing:-.032em}
  .srv.is-deck .srv__d{grid-area:1/2/2/3;margin:0;max-width:46ch;
    font-size:clamp(15px,1.02vw,17.5px);line-height:1.62}
  .srv.is-deck .srv__body .link-arrow{grid-area:2/2/3/3;justify-self:start;align-self:start}

  /* Постоянный тёмный слой под текстом сохраняет контраст и при наведении. */

  /* Шкала услуг под колодой — одна спокойная ось, а не progress bar.
     Единый маркер идёт за реальной прокруткой колоды: названия остаются
     лёгкими, а смена услуги не создаёт двух встречных ярких полос. */
  .srv.is-deck .srv__list{--srv-nav-x:8.333%;position:relative;isolation:isolate;
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
    gap:0;width:min(1010px,74vw);padding:0;border:0;border-radius:0;
    background:none;background-color:transparent;backdrop-filter:none;
    -webkit-backdrop-filter:none;border-top:1px solid rgba(226,220,249,.14)}
  .srv.is-deck .srv__list::before{content:'';position:absolute;z-index:3;
    top:0;left:var(--srv-nav-x);width:7px;height:7px;border-radius:50%;
    pointer-events:none;transform:translate(-50%,-50%);
    background:radial-gradient(circle at 35% 30%,#fff 0 12%,#DED7FF 36%,#9F8CF3 100%);
    box-shadow:0 0 0 4px rgba(174,157,255,.055),0 0 18px rgba(177,159,255,.30);
    will-change:left}
  .srv.is-deck .srv__list::after{content:'';position:absolute;z-index:2;
    top:-1px;left:var(--srv-nav-x);width:clamp(34px,3.4vw,50px);height:1px;
    pointer-events:none;transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(169,181,255,.30) 23%,rgba(222,216,255,.78) 50%,rgba(169,181,255,.30) 77%,transparent);
    will-change:left}
  .srv.is-deck .srv__list li{position:relative;z-index:1;flex:1 1 0;min-width:0}
  .srv.is-deck .srv__row{display:flex;justify-content:center;align-items:center;
    min-height:55px;padding:17px 10px 15px;border-bottom:0;transition:none}
  .srv.is-deck .srv__rt{display:none}
  .srv.is-deck .srv__short{display:block;font-size:13.5px;font-weight:400;
    letter-spacing:-.004em;color:rgba(166,160,194,.66);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    transition:color .42s var(--e),text-shadow .42s var(--e)}
  .srv.is-deck .srv__row:hover .srv__short{color:rgba(222,216,246,.86);transform:none}
  .srv.is-deck .srv__row.is-on .srv__short{color:rgba(245,242,255,.98);transform:none;
    text-shadow:0 0 16px rgba(180,164,255,.16)}
  .srv.is-deck .srv__row::before,.srv.is-deck .srv__row::after{display:none}
  .srv.is-deck .srv__row:active .srv__short{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .srv.is-deck .srv__short{transition:none}
}
@media (max-width:900px){
  .srv__short{display:none}
}

/* ═══ 7. КЛИЕНТЫ: лента «Нам доверяют» вынесена в ring.css — она общая
   с блоком «Доверие» на страницах услуг. ═══ */

/* Между гармошкой направлений и закреплённой колодой услуг раньше складывались
   два полных вертикальных отступа секций. Эта пара блоков читается как единый
   сценарий, поэтому ритм здесь компактнее; остальные разделы не затрагиваем. */
.aud{padding-bottom:clamp(54px,5vw,76px)}
.aud + .srv{padding-top:clamp(54px,5vw,76px)}

/* ─── партнёры: стена логотипов ──────────────────────────────────────────
   Логотипы остаются в исходных цветах и без отдельных карточек. Свет здесь
   работает как мягкая оптическая подложка: тёмные фирменные знаки читаются,
   а сама секция спокойно растворяется в следующей, без жёсткой границы. */
.ptn{position:relative;isolation:isolate;overflow:clip}
.ptn::before{content:'';position:absolute;z-index:0;inset:0;pointer-events:none;
  background:
    radial-gradient(64% 86% at 10% 48%,rgba(124,92,255,.13),transparent 76%),
    radial-gradient(72% 62% at 51% 52%,rgba(222,217,240,.06),transparent 78%),
    radial-gradient(50% 76% at 101% 21%,rgba(255,82,184,.065),transparent 77%),
    radial-gradient(46% 58% at 53% 92%,rgba(98,228,255,.05),transparent 78%);
  --ptn-fade:clamp(64px,9vw,132px);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--ptn-fade)),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--ptn-fade)),transparent 100%)}
.ptn>.wrap{position:relative;z-index:1}
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin:0;padding:0;list-style:none}
.logos li{min-width:0}
.logos a{--logo-shadow:drop-shadow(0 4px 12px rgba(4,3,12,.30));position:relative;isolation:isolate;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)}
.logos a::before{content:'';position:absolute;inset:0;background:linear-gradient(108deg,rgba(124,92,255,.055),transparent 48%,rgba(255,82,184,.035));opacity:0;transition:opacity .35s var(--e)}
.logos img{position:relative;z-index:1;width:auto;height:clamp(30px,3vw,42px);max-width:94%;object-fit:contain;filter:var(--logo-shadow);
  transition:filter .35s var(--e),transform .45s var(--e-out)}
.logos a[href*="finance.yahoo.com"] img,.logos a[href*="benzinga.com"] img{filter:grayscale(1) brightness(2.5) contrast(.94) var(--logo-shadow)}
.logos span{position:relative;z-index:1;font-size:11px;font-weight:650;line-height:1.1;letter-spacing:.04em;text-align:center;text-transform:uppercase}

@media (hover:hover){
  .logos a:hover{border-color:rgba(196,183,255,.42);color:#fff;transform:translateY(-3px)}
  .logos a:hover::before{opacity:1}
  .logos a:hover img{transform:translateY(-2px);filter:var(--logo-shadow) drop-shadow(0 0 10px rgba(184,167,255,.28))}
}
@media (min-width:620px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.logos{grid-template-columns:repeat(5,minmax(0,1fr))}.logos a{min-height:132px}}
@media (min-width:1180px){.logos{grid-template-columns:repeat(9,minmax(0,1fr));gap:22px 18px}.logos a{min-height:118px;padding:16px 8px}.logos img{height:clamp(22px,2.25vw,34px)}.logos span{font-size:9.5px}}
@media (max-width:619px){.logos{gap:14px 12px}.logos a{min-height:108px;padding:14px 8px}.logos img{height:clamp(28px,8vw,36px)}.logos span{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){
  .logos a,.logos img{transition:none}
}

/* ═══ 8. КЕЙСЫ ══════════════════════════════════════════════════════════ */
.cs{overflow:clip}
.rail{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail__track{display:flex;gap:clamp(14px,1.6vw,22px);
  padding-inline:var(--gut);padding-block:4px 6px}

/* Прибор проходит прямо за карточками (кадр t=0.548 — мы внутри тубуса, масштаб
   1.32, самый крупный на странице). Стекло из одного светлого градиента пропускало
   его насквозь: замер по холсту дал под подписями яркость L=0.295 против L=0.144
   у самого текста — фон становился ярче букв, контраст падал до 1.8:1, а у
   основного текста до 1.12:1, то есть до полного совпадения с фоном.
   Лечится двумя слоями: brightness() гасит пересвет ещё до стекла, собственная
   тёмная подложка задаёт нижний предел плотности. Прибор при этом остаётся виден
   и цветным — гасится только яркость, не сам силуэт. */
.case{flex:0 0 auto;width:clamp(276px,25vw,380px);scroll-snap-align:start;
  display:flex;flex-direction:column;border-radius:22px;
  padding:clamp(22px,2.3vw,32px);border:1px solid var(--line);
  background:
    linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 52%,rgba(255,255,255,.026)),
    linear-gradient(180deg,rgba(11,8,22,.80),rgba(8,6,17,.86));
  transition:border-color .45s var(--e),transform .5s var(--e)}
.case:hover{border-color:rgba(255,255,255,.2);transform:translateY(-4px)}
.case__h{display:flex;align-items:center;gap:14px;min-height:68px}
.case__logo{width:64px;height:64px;flex:0 0 64px;object-fit:contain;border-radius:11px}
.case__logo--wordmark{width:96px;height:46px;flex-basis:96px;border-radius:7px}
.case__t{font-size:clamp(22px,2vw,30px);font-weight:360;letter-spacing:-.03em}
.case__meta{display:block;margin-top:8px;font-size:13px;color:#A794FF}
.case__b{margin-top:20px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.case__b b{font-weight:500;color:var(--ink)}
.case__b p{margin-bottom:.8em}
.res{margin-top:auto;padding-top:22px;display:grid;grid-template-columns:1fr 1fr}
.res li{padding:16px 0;border-top:1px solid var(--line)}
.res li:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
.res b{display:block;font-size:clamp(21px,2vw,28px);font-weight:200;letter-spacing:-.035em;
  line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.res b i{font-style:normal;font-size:.5em;font-weight:300;color:var(--ink-2);letter-spacing:0}
/* --ink-3 здесь не годится в принципе: даже на чистом фоне он даёт 3.75:1
   при 12.5 px, то есть ниже нормы ещё до всякого прибора. */
.res span{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:#C3BDD4}

.rail__foot{margin-top:clamp(24px,3vw,40px);display:flex;align-items:center;
  gap:clamp(18px,3vw,44px);flex-wrap:wrap}
.rail__bar{flex:1 1 200px;height:1px;background:var(--line);position:relative;min-width:120px}
.rail__bar i{position:absolute;left:0;top:-1px;height:3px;border-radius:2px;width:20%;
  background:linear-gradient(90deg,var(--vio),var(--mag));
  transition:width .3s var(--e),transform .3s var(--e)}
.rail__nav{display:flex;align-items:center;gap:12px}
.rail__nav .link-arrow{margin-left:clamp(6px,1.4vw,18px)}
@media (max-width:640px){.rail__nav .rnd{display:none}}

/* ═══ 9. ОСНОВАТЕЛЬ ═════════════════════════════════════════════════════ */
.fnd__grid{display:grid;gap:clamp(28px,4vw,74px);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.fnd__pic{position:relative;width:min(100%,400px);aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(124,92,255,.12),rgba(255,82,184,.06));
  box-shadow:0 30px 70px -52px rgba(120,87,255,.72)}
.fnd__pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:saturate(.92) contrast(1.02) brightness(.92)}
.fnd__pic::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,5,12,.55))}
.fnd__body{max-width:62ch;color:var(--ink-2)}
.fnd__name{margin:0 0 8px;max-width:none}
.fnd__role{margin:0 0 1.1em;color:var(--ink-2);font-size:15.5px}
.fnd__body > p:not(.fnd__role){margin-bottom:.85em}
.fnd__links{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){
  .fnd__grid{grid-template-columns:1fr}
  .fnd__pic{width:min(100%,340px)}
}

/* ═══ 10. КОМАНДА ═══════════════════════════════════════════════════════ */
.team__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
  gap:clamp(30px,4vw,64px) clamp(20px,3vw,46px)}
.team__card{min-width:0;display:flex;flex-direction:column}
.team__portrait{position:relative;aspect-ratio:5/6;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(145deg,rgba(124,92,255,.14),rgba(255,82,184,.07))}
.team__portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--portrait-position,50% 50%);
  filter:saturate(.88) contrast(1.035) brightness(.92)}
.team__portrait::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,5,14,.04),rgba(7,5,14,.12) 54%,rgba(7,5,14,.62)),
    linear-gradient(105deg,rgba(116,83,204,.15),transparent 56%)}
.team__portrait--absent{display:grid;place-items:center;
  background:radial-gradient(78% 76% at 20% 12%,rgba(117,83,229,.22),rgba(117,83,229,0) 66%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 52%,rgba(163,127,255,.08))}
.team__portrait--absent::before{content:attr(data-mark);position:relative;z-index:1;color:rgba(230,221,255,.82);
  font-size:clamp(54px,6vw,82px);font-weight:250;letter-spacing:-.07em;line-height:1}
.team__portrait--absent::after{inset:18px;border:1px solid rgba(216,202,255,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.018),rgba(255,255,255,0))}
.team__copy{padding:14px 2px 2px}
.team__role{min-height:2em;margin:0 0 6px!important;font-size:12px!important;font-weight:600;color:var(--vio-2)!important;
  letter-spacing:.005em;line-height:1.35}
.team__grid h3{min-height:0;font-size:clamp(18px,1.4vw,21px);font-weight:520;letter-spacing:-.024em;line-height:1.3}
.team__copy > p:not(.team__role){margin:8px 0 0;min-height:2.4em;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:34ch}
@media (max-width:1100px){.team__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px clamp(20px,4vw,40px)}}
@media (max-width:560px){.team__grid{grid-template-columns:1fr;gap:28px}.team__copy > p:not(.team__role){min-height:0}}

/* ═══ 12. ФОРМА ═════════════════════════════════════════════════════════ */
.cta__grid{display:grid;gap:clamp(28px,4vw,72px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
.cta__sub{margin:18px 0 0;color:var(--ink-2);max-width:40ch}
.contacts{margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line);max-width:380px}
.contacts a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 2px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2);
  transition:color .35s,padding-left .4s var(--e-out)}
.contacts a i{width:18px;height:1px;background:currentColor;opacity:.5;position:relative;
  transition:width .4s var(--e-out),opacity .35s}
.contacts a i::after{content:'';position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}
.contacts a:hover{color:var(--ink);padding-left:8px}
.contacts a:hover i{width:30px;opacity:1}
@media (max-width:900px){.cta__grid{grid-template-columns:1fr}}

/* ═══ 13. ПОДВАЛ ════════════════════════════════════════════════════════ */
.foot{padding-block:clamp(56px,6vw,88px) 34px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(9,7,18,.5),rgba(9,7,18,.9))}
.foot__top{display:grid;gap:clamp(30px,3vw,52px);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.foot__brand p{margin:20px 0 0;font-size:14px;line-height:1.6;color:var(--ink-3);max-width:36ch}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.foot__col h4{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:5px;
  letter-spacing:-.008em}
.foot__col .foot__h2{margin-top:24px}
.foot__col a{font-size:14px;color:var(--ink-3);transition:color .3s}
.foot__col a:hover{color:var(--ink)}
.foot__bot{margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-3)}
.foot__bot a{color:var(--ink-3);transition:color .3s}.foot__bot a:hover{color:var(--ink)}
@media (max-width:900px){
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:520px){.foot__top{grid-template-columns:1fr}}