/* ==========================================================================
   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:300;line-height:1.09;letter-spacing:-.036em;
  max-width:13.4em;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%}
}

/* ═══ 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(1500px,290svh,2700px)}
  /* Визуальная колонка не участвует своей полной высотой в расчёте 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:#AFA4C8;font-size:clamp(10.5px,.78vw,12.5px);font-weight:500;
  line-height:1.2;letter-spacing:.005em;overflow-wrap:anywhere}
.about__module-label--result span{color:#D8EEFF}
.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__body{min-width:0}.about__stage{min-height:clamp(310px,72vw,390px);width:min(100%,520px)}.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}}

/* ═══ 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. С КЕМ РАБОТАЕМ (горизонтальная гармошка) ═══════════════════════ */
.slats{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:clamp(300px,32vw,400px);contain:layout paint}
.slat{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,30px);
  cursor:pointer;overflow:hidden;
  /* flex-grow неизбежно меняет геометрию колонок. Изолируем этот расчёт
     внутри каждой панели и не держим лишние слои на всех четырёх карточках. */
  contain:layout paint;transition:flex-grow .46s var(--e-slat)}
.slat+.slat{border-left:1px solid var(--line)}
.slat__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  pointer-events:none;opacity:.47;filter:saturate(.72) brightness(.88) contrast(1.03);
  transform:scale(1.025);will-change:opacity,transform;
  transition:opacity .34s ease,transform .52s var(--e-out)}
.slat:nth-child(1) .slat__photo{object-position:74% center}
.slat:nth-child(2) .slat__photo{object-position:70% center}
.slat:nth-child(3) .slat__photo{object-position:78% center}
.slat:nth-child(4) .slat__photo{object-position:74% center}
.slat::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,5,13,.16) 0%,rgba(6,5,13,.76) 82%,rgba(6,5,13,.92) 100%),
    linear-gradient(90deg,rgba(6,5,13,.38),rgba(6,5,13,.08));}
.slat::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  z-index:3;background:linear-gradient(90deg,var(--vio-2),var(--mag));
  transform:scaleX(0);transform-origin:left;transition:transform .26s ease}
.slat.is-open{flex-grow:2.2}
.slat.is-open .slat__photo{opacity:.72;transform:scale(1.055);transition:opacity .42s ease .04s,transform .62s var(--e-out)}
.slat.is-open::after{transform:scaleX(1);transition:transform .48s var(--e-slat) .02s}
.slat__t,.slat__d{z-index:2}
/* высота заголовка зарезервирована под три строки и текст прижат к низу:
   при смене ширины он переносится, но ничего под ним не подпрыгивает.
   balance красиво раскладывает строку, но пересчитывается на каждом кадре
   изменения ширины — для интерактивной гармошки это лишняя работа. */
.slat__t{display:flex;align-items:flex-end;min-height:3.7em;
  font-size:clamp(16px,1.4vw,22px);font-weight:300;line-height:1.24;
  letter-spacing:-.026em;position:relative}
/* закрывается быстро, раскрывается неспешно — иначе уходящая панель «залипает» */
.slat__d{position:relative;margin:12px 0 0;max-width:38ch;font-size:14.5px;line-height:1.6;
  color:var(--ink-2);opacity:0;transform:translateY(10px);
  transition:opacity .15s ease,transform .18s ease}
.slat.is-open .slat__d{opacity:1;transform:none;
  transition:opacity .34s ease .10s,transform .40s var(--e-out) .10s}
@media (max-width:900px){
  .slats{display:block;min-height:0;border-bottom:0}
  .slat{min-height:220px;padding-inline:clamp(18px,4vw,30px);padding-block:22px;border-bottom:1px solid var(--line)}
  .slat+.slat{border-left:0}
  .slat__photo{opacity:.54}
  .slat.is-open .slat__photo{opacity:.65}
  .slat__t{min-height:0}
  .slat__d{opacity:1;transform:none;max-width:100%}
  .slat.is-open{flex-grow:1}
  .slat::after{display:none}
}

/* ═══ 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{--srv-photo:none;min-height:clamp(320px,30vw,392px);display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate}
/* У каждой услуги свой сдержанный фотофон. Плотное затемнение сохраняет
   контраст и превращает шесть кадров в единую серию, а не в набор баннеров. */
.srv__card::before{z-index:0;
  background:
    linear-gradient(90deg,rgba(10,8,21,.94) 0%,rgba(11,8,23,.74) 45%,rgba(11,8,23,.28) 100%),
    linear-gradient(180deg,rgba(24,18,45,.12),rgba(8,6,18,.34)),
    var(--srv-photo) 72% 50%/cover no-repeat}
.srv__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0}
.srv__t{margin:0 0 12px;font-size:clamp(21px,1.9vw,28px);font-weight:300;
  letter-spacing:-.028em;line-height:1.16}
.srv__d{margin:0 0 20px;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:42ch}

/* ─── рабочее состояние: закреплённая колода ─────────────────────────────
   Секции задаётся прокручиваемая длина (её считает 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:300;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}
}

/* ─── десктоп: колода по центру ──────────────────────────────────────────
   На широком экране двухколонка «карточка слева, список справа» проигрывала:
   карточка мелкая, а половину внимания забирала стеклянная панель. Здесь
   колода выходит на середину и становится крупной, список превращается
   в узкую шкалу под ней, а глубину даёт не только 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__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}

  /* блик под курсором: живёт только на верхней карточке */
  .srv.is-deck .srv__card::after{content:'';position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;opacity:0;transition:opacity .45s ease;
    background:radial-gradient(38% 46% at var(--mx,50%) var(--my,40%),
      rgba(190,165,255,.20),transparent 70%)}
  .srv.is-deck .srv__deck:hover .srv__card.is-on::after{opacity:1}

  /* шкала услуг под колодой вместо стеклянной панели */
  .srv.is-deck .srv__list{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 var(--line)}
  .srv.is-deck .srv__list li{flex:1 1 0;min-width:0}
  .srv.is-deck .srv__row{display:flex;justify-content:center;align-items:center;
    padding:16px 10px 14px;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:var(--ink-3);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    transition:color .35s ease,transform .45s var(--e-slat)}
  .srv.is-deck .srv__row:hover .srv__short{color:var(--ink-2);transform:translateY(-2px)}
  .srv.is-deck .srv__row.is-on .srv__short{color:var(--ink);transform:translateY(-2px)}
  /* деление шкалы: тонкая риска, у активной услуги она горит и удлиняется */
  .srv.is-deck .srv__row::before{content:'';position:absolute;left:50%;top:-1px;
    width:0;height:2px;transform:translateX(-50%);border-radius:2px;
    background:linear-gradient(90deg,var(--vio-2),var(--mag));
    transition:width .5s var(--e-slat)}
  .srv.is-deck .srv__row.is-on::before{width:100%}
  .srv.is-deck .srv__row::after{content:'';position:absolute;left:50%;top:-1px;
    width:1px;height:7px;transform:translateX(-50%);border-radius:0;
    background:var(--line-2);transition:height .4s var(--e-slat),background .4s ease}
  .srv.is-deck .srv__row:hover::after{height:11px;background:var(--ink-3)}
  .srv.is-deck .srv__row.is-on::after{height:0}
  .srv.is-deck .srv__row:active .srv__short{transform:translateY(0)}
}
@media (max-width:900px){
  .srv__short{display:none}
}

/* ═══ 7. КЛИЕНТЫ ════════════════════════════════════════════════════════ */
/* Кольцо шкалы объектива, а не бегущая строка. Имена едут мимо неподвижной
   фокальной плоскости и резкие только в ней; края полосы гасит расфокус, а не
   градиентная маска (маска здесь лишь снимает жёсткий срез размытия). Размеры
   имён и промежутки заданы поимённо, поэтому лента читается композицией.
   Позиции, резкость и цвет считает main.js — CSS задаёт только исходное
   состояние и запасной вариант.

   Базовый вид (без JS, при prefers-reduced-motion и до инициализации) —
   прежняя стена имён с наводкой на резкость по наведению. */
.ring__set{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(10px,1.4vw,22px) clamp(20px,2.8vw,46px);
  margin:0;padding:clamp(6px,1vw,18px) 0;list-style:none}
.ring__i{font-size:calc(clamp(19px, 2.05vw, 34px) * var(--k, 1));
  font-weight:200;letter-spacing:-.032em;line-height:1.24;color:var(--ink-2);
  white-space:nowrap}
.ring__i span{display:inline-block}
.ring__i--logo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;height:78px;width:max-content;min-width:calc(var(--lw,56px) + 22px)}
.ring__logo{width:var(--lw,56px);height:43px;fill:currentColor}
.ring__logo--stroke{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ring__name{display:block;font-family:var(--f);font-size:10px;font-weight:500;
  letter-spacing:.015em;line-height:1.1;color:currentColor;white-space:nowrap}
.ring__i--brand{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;height:78px;min-width:82px}
.ring__brand{display:block;width:54px;height:42px;object-fit:contain;filter:none;opacity:1}
.ring__brand--small{width:32px;height:32px;image-rendering:auto}
.ring__name small{display:block;margin-top:2px;font-size:8px;font-weight:400;opacity:.68;white-space:nowrap}
@media (hover:hover){
  .ring:not(.is-live) .ring__i{
    transition:color .45s var(--e),opacity .45s var(--e),filter .45s var(--e)}
  .ring:not(.is-live):hover .ring__i{opacity:.34;filter:blur(3.5px)}
  .ring:not(.is-live) .ring__i:hover{opacity:1;filter:none;color:#fff;
    text-shadow:0 0 42px rgba(180,150,255,.55)}
}
@media (max-width:640px){
  .ring__set{gap:clamp(8px,2vw,16px) clamp(16px,4vw,28px)}
}

/* Рабочее состояние: полоса с обрезкой, имена расставлены абсолютно. */
.ring.is-live{position:relative;overflow:hidden;height:var(--ring-h,116px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 clamp(20px,4vw,54px),
    #000 calc(100% - clamp(20px,4vw,54px)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 clamp(20px,4vw,54px),
    #000 calc(100% - clamp(20px,4vw,54px)),transparent)}
.ring.is-live .ring__set{display:block;padding:0;gap:0;height:100%}
.ring.is-live .ring__i{position:absolute;top:50%;left:0;
  transform-origin:50% 50%;transition:none;will-change:transform;
  backface-visibility:hidden}

/* Гравированные штрихи в промежутках — шкала на кольце, а не точки-разделители.
   Ритм 4n+1 не кратен девяти именам, поэтому между копиями набора он смещается
   и рисунок штрихов не повторяется. Штрих лежит внутри имени, значит уходит
   в расфокус вместе с ним. */
.ring.is-live .ring__i::after{content:'';position:absolute;left:100%;top:50%;
  width:1px;height:9px;margin:-4.5px 0 0 var(--gh,26px);
  background:currentColor;opacity:.26}
.ring.is-live .ring__i:nth-child(4n+1)::after{height:17px;margin-top:-8.5px;opacity:.4}

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

/* ─── партнёры: стена логотипов ──────────────────────────────────────────
   В сетке остаются официальные логотипы. Для исходников без цветной версии
   используется читаемый светлый вариант; переданные брендовые файлы ниже не
   перекрашиваются и сохраняют собственную палитру. Размеры нормализованы по
   оптическому, а не по пиксельному габариту. */
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos li{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(88px,9vw,124px);padding:18px 20px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  color:rgba(255,255,255,.46);
  transition:color .45s var(--e),background .45s var(--e)}
.logos img{height:var(--h,26px);width:auto;max-width:82%;object-fit:contain;opacity:.46;
  filter:brightness(0) invert(1);
  transition:opacity .45s var(--e),filter .45s var(--e),transform .5s var(--e-out)}
.logos li.logos__brand{background:rgba(255,255,255,.018)}
.logos li.logos__brand img{height:var(--h,26px);max-width:72%;opacity:1;filter:none;position:relative;z-index:1}
.logos li.logos__asset img{height:clamp(34px,4.3vw,58px)}
/* У официальных файлов CoinDesk / BeInCrypto / ForkLog тёмный леттеринг.
   Светлая компактная плашка сохраняет исходные цвета и даёт им контраст, не
   превращая всю ячейку в белую карточку. */
.logos li.logos__light::before{content:'';position:absolute;width:min(78%,230px);height:46px;
  border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.logos li.logos__light img{opacity:1;filter:none}
/* Cointelegraph передан в светлой выворотке: сохраняем оригинальную марку,
   но задаём ей фирменный янтарный цвет вместо нейтрального серого. */
.logos li.logos__cointelegraph img{opacity:1;
  filter:brightness(0) saturate(100%) invert(72%) sepia(83%) saturate(775%) hue-rotate(1deg) brightness(104%) contrast(103%)}
/* Benzinga — белая аббревиатура на фирменном синем поле из присланного знака. */
.logos li.logos__benzinga::before{content:'';position:absolute;width:80px;height:48px;border-radius:8px;background:#102A50}
.logos li.logos__benzinga img{max-width:56px}
/* пока официального файла нет — имя набрано нашим шрифтом в той же краске */
.logos li[data-logo-todo] span{font-size:clamp(15px,1.35vw,19px);font-weight:500;
  letter-spacing:-.012em;white-space:nowrap;
  transition:transform .5s var(--e-out)}

@media (hover:hover){
  .logos li:hover{color:#fff;background:rgba(124,92,255,.055)}
  .logos li:hover img{opacity:1;transform:translateY(-2px);
    filter:brightness(0) invert(1)
           drop-shadow(-1.5px 0 rgba(124,92,255,.60))
           drop-shadow(1.5px 0 rgba(98,228,255,.55))}
  .logos li.logos__brand:hover img{filter:none;transform:translateY(-2px) scale(1.025)}
  .logos li.logos__cointelegraph:hover img{filter:brightness(0) saturate(100%) invert(72%) sepia(83%) saturate(775%) hue-rotate(1deg) brightness(104%) contrast(103%)}
  .logos li[data-logo-todo]:hover span{transform:translateY(-2px)}
}
/* тонкая подсветка кромки ячейки под курсором */
.logos li::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--vio-2),var(--mag),transparent);
  opacity:0;transition:opacity .45s var(--e)}
@media (hover:hover){.logos li:hover::after{opacity:.9}}

@media (min-width:620px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1180px){.logos{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .logos li,.logos img,.logos li span{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,74vw,470px);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:58px}
.case__logo{width:52px;height:52px;flex:0 0 52px;object-fit:contain;border-radius:11px}
.case__t{font-size:clamp(22px,2vw,30px);font-weight:300;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:#A29BC0}

.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:16px 2px 2px}
.team__role{min-height:2.7em;margin:0 0 8px!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:2.6em;font-size:clamp(18px,1.4vw,21px);font-weight:520;letter-spacing:-.024em;line-height:1.3}
.team__copy > p:not(.team__role){margin:10px 0 0;min-height:4.65em;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)}
@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}}