/* ═══════════════════════════════════════════════════
   КЕЙСЫ — карусель, рамки устройств и сцены
   ═══════════════════════════════════════════════════ */

.cases{position:relative;overflow:hidden}
.cases__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,48px)}
.cases__meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cases__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--mut-2)}
.cases__count b{color:var(--acc);font-size:1.7em;font-weight:500}

.cases__stage{position:relative}
.cases__viewport{overflow:hidden;border-radius:var(--r)}
.cases__track{
  display:flex;will-change:transform;
  transition:transform .8s var(--ease);
  touch-action:pan-y;              /* горизонтальный свайп наш, вертикальный — странице */
  cursor:grab;
}
.cases__track.is-drag{transition:none;cursor:grabbing}

.case{flex:0 0 100%;min-width:0;opacity:.3;transition:opacity .65s var(--ease);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3.2vw,52px);align-items:center;padding:4px}
@media (max-width:960px){.case{grid-template-columns:1fr;gap:24px}}

.case.is-active{opacity:1}
.case__visual{display:grid;place-items:center;min-height:clamp(240px,31vw,344px);user-select:none}
.case__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--mut-2);display:block;margin-bottom:12px}
.case__tag{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);border:1px solid rgba(217,255,53,.35);border-radius:99px;padding:5px 11px;margin-bottom:14px;
}
.case__body h3{font-family:var(--dsp);font-weight:600;letter-spacing:-.035em;line-height:1.1;font-size:clamp(21px,2.5vw,36px);margin-bottom:13px}
.case__body p{color:var(--mut);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.6;max-width:52ch}

/* бейдж с цифрой результата */
.case__metric{
  display:inline-flex;align-items:baseline;gap:9px;margin-top:16px;
  padding:9px 15px;border-radius:12px;
  background:linear-gradient(120deg,rgba(217,255,53,.14),rgba(110,123,255,.08));
  border:1px solid rgba(217,255,53,.3);
}
.case__metric b{font-family:var(--dsp);font-weight:700;font-size:clamp(17px,1.9vw,25px);color:var(--acc);letter-spacing:-.03em;line-height:1}
.case__metric span{font-size:12.5px;color:var(--mut);line-height:1.35;max-width:19ch}

.case__pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.case__pills li{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mut);border:1px solid var(--line);border-radius:7px;padding:5px 9px;background:rgba(255,255,255,.02)}
.case__more{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;color:var(--acc);font-size:14px;font-weight:500;
  border-bottom:1px solid rgba(217,255,53,.3);padding-bottom:3px;transition:gap .35s var(--ease),border-color .35s;
}
.case__more:hover{gap:15px;border-color:var(--acc)}
.case__more i{font-style:normal}

/* тег направления + кто клиент: посетитель должен узнать в кейсе себя */
.case__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:14px}
.case__eyebrow .case__tag{margin-bottom:0}
.case__client{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mut-2)}
.case__client::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--mut-2);opacity:.6}
/* выгоды вместо стека технологий */
.case__pts{display:grid;gap:8px;margin-top:16px}
.case__pts li{position:relative;padding-left:24px;color:#c3c7d0;font-size:14px;line-height:1.45}
.case__pts li::before{
  content:'✓';position:absolute;left:0;top:.05em;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#07080a;background:var(--acc);
}
.case__ctas{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:22px}
.case__ctas .case__more{margin-top:0}
.case__tg{
  display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:99px;
  border:1px solid var(--line-2);font-size:13.5px;font-weight:500;color:var(--txt);
  transition:background-color .35s,border-color .35s,color .35s,transform .45s var(--ease);
}
.case__tg::after{content:'';width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.5 2.8 10.7c-1 .4-1 1.8.03 2.1l4.7 1.4 1.8 5.6c.3.9 1.4 1.1 2 .4l2.6-2.8 4.7 3.5c.8.6 1.9.2 2.1-.8l3.3-15.3c.2-1-.8-1.8-1.7-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.5 2.8 10.7c-1 .4-1 1.8.03 2.1l4.7 1.4 1.8 5.6c.3.9 1.4 1.1 2 .4l2.6-2.8 4.7 3.5c.8.6 1.9.2 2.1-.8l3.3-15.3c.2-1-.8-1.8-1.7-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.case__tg:hover{background:var(--acc);border-color:var(--acc);color:#07080a;transform:translateY(-2px)}

/* ─── управление: стрелки живут под заголовком ─── */
.cases__head{align-items:flex-end}
.cases__title{min-width:0}
.cases__nav{display:flex;align-items:center;gap:10px;margin-top:clamp(18px,2.4vw,26px)}
.cases__all{flex:none}

.cases__arrow{
  width:clamp(44px,3.2vw,50px);aspect-ratio:1;border-radius:50%;flex:none;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  display:grid;place-items:center;color:var(--txt);font-size:17px;
  transition:transform .45s var(--ease),background-color .35s,border-color .35s,color .35s,opacity .35s;
}
.cases__arrow:hover{background:var(--acc);border-color:var(--acc);color:#07080a;transform:translateY(-2px)}
.cases__arrow:active{transform:translateY(0) scale(.94)}
.cases__arrow:disabled{opacity:.24;pointer-events:none}
.cases__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--mut-2);margin-left:6px}
.cases__count b{color:var(--acc);font-size:1.7em;font-weight:500}

.cases__dots{display:flex;justify-content:center;gap:7px;margin-top:clamp(20px,3vw,32px);flex-wrap:wrap}
.cases__dot{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.2);transition:.45s var(--ease)}
.cases__dot.is-on{background:var(--acc);width:26px}
.cases__swipe{display:none;text-align:center;margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--mut-2)}
@media (pointer:coarse){.cases__swipe{display:block}}

/* ═══════════════════════════════════════════════════
   РАМКИ УСТРОЙСТВ — настоящее 3D
   Размеры внутри рамок — в cqw: 1cqw = 1% ширины устройства,
   поэтому геометрия одинаково собирается на любой ширине.
   --px / --py (−1…1) выставляет скрипт по курсору — устройство поворачивается следом.
   ═══════════════════════════════════════════════════ */
.dev{position:relative;width:100%;max-width:520px;--px:0;--py:0;--dir:1}
.kcase--flip .dev{--dir:-1}
/* на странице кейсов ноутбук чуть отодвинут от текста; в одну колонку зеркалить незачем */
@media (min-width:961px){.kcase .dev--laptop{translate:calc(var(--dir) * -6%) 0}}
@media (max-width:960px){.kcase--flip .dev{--dir:1}}
.dev__screen{position:relative;overflow:hidden;background:#07080b;container-type:inline-size}

/* экран «выключен», пока устройство не открылось (только при включённом JS) */
.dev__screen::after{
  content:'';position:absolute;inset:0;z-index:20;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 0%,#10131b,#030305 70%);
  opacity:0;transition:opacity .3s;
}
.dev-ready .dev__screen::after{opacity:1}
.dev-ready .is-open .dev__screen::after{opacity:0;transition:opacity .7s .75s}

@keyframes devFloat{0%,100%{translate:0 0}50%{translate:0 -1.3cqw}}

/* ─── ноутбук ─── */
.dev--laptop{container-type:inline-size;perspective:2600px;perspective-origin:50% 58%;max-width:430px}
.lap{
  --lid:19deg;
  position:relative;transform-style:preserve-3d;margin:0 0 36cqw;
  transform:rotateX(calc(-19deg + var(--py) * 4deg)) rotateY(calc(var(--dir) * 17deg + var(--px) * 13deg));
  transition:transform .9s var(--ease);
  animation:devFloat 7s ease-in-out infinite;
}
.dev-ready .lap{--lid:-87deg}
.dev-ready .is-open .lap{--lid:19deg}

/* крышка: петля по нижнему краю */
.lap__lid{
  position:relative;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:rotateX(var(--lid));
  transition:transform 1.45s cubic-bezier(.2,.85,.25,1.04);
}
.lap__face{
  position:relative;backface-visibility:hidden;
  padding:2.1cqw 2cqw 2.9cqw;border-radius:2.6cqw 2.6cqw .7cqw .7cqw;
  background:linear-gradient(172deg,#1a1f2c,#07080c 62%);
  box-shadow:inset 0 0 0 .25cqw #2e3444,inset 0 .4cqw 0 -.1cqw rgba(255,255,255,.18);
}
.lap__face .dev__screen{aspect-ratio:16/10;border-radius:.8cqw}
.lap__cam{position:absolute;top:.75cqw;left:50%;width:.75cqw;height:.75cqw;margin-left:-.375cqw;border-radius:50%;background:#252a35;box-shadow:0 0 0 .28cqw rgba(255,255,255,.04)}
/* блик на стекле */
.lap__glare{
  position:absolute;inset:2.1cqw 2cqw 2.9cqw;border-radius:.8cqw;pointer-events:none;z-index:21;
  background:linear-gradient(118deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 26%,transparent 27%,transparent 100%);
}
/* обратная сторона крышки — видна, пока ноутбук закрыт */
.lap__back{
  position:absolute;inset:0;display:grid;place-items:center;
  border-radius:2.6cqw 2.6cqw .7cqw .7cqw;
  transform:rotateY(180deg);backface-visibility:hidden;
  background:linear-gradient(160deg,#454d60,#262b37 48%,#1a1e27);
  box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.12);
}
.lap__logo{
  width:11cqw;aspect-ratio:1;border-radius:24%;
  background:url(/assets/img/icon-192.png) center/cover;
  box-shadow:0 0 5cqw rgba(255,184,40,.5);opacity:.95;
}
/* толщина крышки справа */
.lap__edge{
  position:absolute;left:100%;top:1.4cqw;bottom:.3cqw;width:.9cqw;
  transform-origin:0 50%;transform:rotateY(90deg);
  background:linear-gradient(#5a6276,#262b36);
}

.lap__edge--l{left:auto;right:100%;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(#5a6276,#262b36)}

/* основание: лежит горизонтально и уходит к зрителю от петли */
.lap__base{
  position:absolute;left:-.5%;right:-.5%;top:100%;height:46cqw;
  transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;
  border-radius:.5cqw .5cqw 2.6cqw 2.6cqw;
  background:linear-gradient(180deg,#39414f,#2a303d 44%,#20252f);
  box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.11),inset 0 -.8cqw 1.4cqw -.8cqw rgba(255,255,255,.2);
}
.lap__kb{position:absolute;left:6.5%;right:6.5%;top:6%;height:45%;width:87%}
.lap__keys rect{fill:#161a22;stroke:rgba(255,255,255,.13);stroke-width:.55}
.lap__kglow rect{fill:none;stroke:rgba(217,255,53,.5);stroke-width:2.6;opacity:.32}
.lap__pad{
  position:absolute;left:31%;right:31%;top:58%;height:31%;border-radius:1.5cqw;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 .22cqw rgba(255,255,255,.12);
}
/* свет от экрана на клавиатуре */
.lap__light{
  position:absolute;inset:0 0 38%;pointer-events:none;
  background:radial-gradient(64% 100% at 50% 0%,rgba(130,140,255,.22),transparent 72%);
  mix-blend-mode:screen;
}
/* толщина основания: передний торец и правый бок */
.lap__front{
  position:absolute;left:1.2cqw;right:1.2cqw;top:100%;height:2.3cqw;
  transform-origin:50% 0;transform:rotateX(-90deg);
  border-radius:0 0 1.2cqw 1.2cqw;
  background:linear-gradient(#4b5366,#1c2029);
}
.lap__front::after{content:'';position:absolute;left:44%;right:44%;top:0;height:42%;border-radius:0 0 1cqw 1cqw;background:#12151c}
.lap__side{
  position:absolute;left:100%;top:1.5cqw;bottom:2.4cqw;width:2.3cqw;
  transform-origin:0 50%;transform:rotateY(90deg);
  background:linear-gradient(90deg,#39404f,#1a1e27);
}
.lap__side--l{left:auto;right:100%;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(270deg,#39404f,#1a1e27)}
/* тень и подсветка под ноутбуком */
.dev--laptop .dev__shadow{
  bottom:2cqw;width:96%;height:14cqw;filter:blur(14px);
  background:radial-gradient(closest-side,rgba(110,123,255,.42),rgba(217,255,53,.08) 60%,transparent);
}

/* ─── телефон: корпус выдавлен слоями ─── */
.dev--phone{
  container-type:inline-size;width:auto;max-width:100%;
  height:clamp(320px,46vh,468px);aspect-ratio:9/19.3;perspective:1400px;
}
.ph{
  --rx0:6deg;--ry0:21deg;
  position:relative;height:100%;transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx0) + var(--py) * -6deg)) rotateY(calc(var(--dir) * var(--ry0) + var(--px) * 16deg));
  transition:transform 1.3s cubic-bezier(.2,.85,.25,1.03);
  animation:devFloat 6.5s ease-in-out infinite;
}
.dev-ready .ph{--rx0:16deg;--ry0:44deg}
.dev-ready .is-open .ph{--rx0:6deg;--ry0:21deg}
.ph__slab{
  position:absolute;inset:0;border-radius:16cqw;
  transform:translateZ(calc(var(--i) * -1.1cqw));
  background:linear-gradient(112deg,#6a7388 0%,#2b303c 34%,#4c5468 62%,#1c2029 100%);
}
.ph__slab:nth-of-type(6){background:#121419;box-shadow:0 0 9cqw rgba(110,123,255,.25)}
.ph__btn{
  position:absolute;left:100%;top:24%;height:12%;width:2.6cqw;border-radius:.6cqw;
  transform-origin:0 50%;transform:translateZ(-2cqw) rotateY(90deg) translateZ(.5cqw);
  background:linear-gradient(90deg,#2a2f3b,#5b6376);
}
.ph__btn--l{left:auto;right:100%;top:19%;height:7%;transform-origin:100% 50%;transform:translateZ(-2cqw) rotateY(-90deg) translateZ(.5cqw)}
.ph__btn--l2{top:28.5%}
.ph__body{
  position:absolute;inset:0;display:flex;padding:3.3cqw;border-radius:16cqw;
  background:#050608;
  box-shadow:inset 0 0 0 .55cqw #5d6579,inset 0 0 0 .9cqw #0a0b0f,inset 0 1cqw 1.2cqw -.6cqw rgba(255,255,255,.25);
}
.ph__body .dev__screen{flex:1;border-radius:13cqw}
.ph__island{position:absolute;top:5.4cqw;left:50%;width:30cqw;height:8.4cqw;margin-left:-15cqw;border-radius:99px;background:#000;z-index:22}
.ph__glare{
  position:absolute;inset:3.3cqw;border-radius:13cqw;pointer-events:none;z-index:21;
  background:linear-gradient(125deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.025) 30%,transparent 31%,transparent 78%,rgba(255,255,255,.04) 100%);
}
.dev--phone .dev__shadow{bottom:-5%;width:80%;height:12%;filter:blur(22px);background:radial-gradient(closest-side,rgba(110,123,255,.5),transparent)}

/* ─── окно браузера: стекло над светящейся подложкой ─── */
.dev--browser{container-type:inline-size;perspective:1600px;max-width:540px}
.br{
  --rx0:9deg;--ry0:15deg;
  position:relative;transform-style:preserve-3d;margin-bottom:13cqw;
  transform:rotateX(calc(var(--rx0) + var(--py) * -5deg)) rotateY(calc(var(--dir) * var(--ry0) + var(--px) * 12deg));
  transition:transform 1.2s cubic-bezier(.2,.85,.25,1.03);
  animation:devFloat 7s ease-in-out infinite;
}
.dev-ready .br{--rx0:26deg;--ry0:36deg}
.dev-ready .is-open .br{--rx0:9deg;--ry0:15deg}
.br__plate{
  position:absolute;inset:5cqw -3.5cqw -4.5cqw 4cqw;border-radius:3cqw;
  transform:translateZ(-8cqw);
  background:linear-gradient(135deg,rgba(110,123,255,.5),rgba(217,255,53,.22) 70%);
  box-shadow:0 0 10cqw rgba(110,123,255,.45);
}
.br__win{
  position:relative;overflow:hidden;border-radius:2.2cqw;background:#0c0e13;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 5cqw 10cqw -5cqw rgba(0,0,0,.95);
}
.br__glare{position:absolute;inset:0;pointer-events:none;z-index:21;background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 28%)}
.dev--browser .dev__bar{display:flex;align-items:center;gap:1.3cqw;padding:2.1cqw 2.6cqw;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.dev--browser .dev__bar i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#2a2d36}
.dev--browser .dev__bar i:first-child{background:#ff5f57}
.dev--browser .dev__bar i:nth-child(2){background:#febc2e}
.dev--browser .dev__bar i:nth-child(3){background:#28c840}
.dev--browser .dev__bar span{margin-left:1.6cqw;font-family:var(--mono);font-size:max(8px,1.8cqw);color:var(--mut-2)}
.dev--browser .dev__screen{aspect-ratio:16/10.4}

.dev__shadow{position:absolute;left:50%;bottom:-18px;translate:-50%;width:72%;height:30px;border-radius:50%;background:rgba(110,123,255,.36);filter:blur(30px);pointer-events:none}

/* ═══════════════════════════════════════════════════
   СЦЕНЫ
   ═══════════════════════════════════════════════════ */
.sc{position:absolute;inset:0;font-family:var(--body);overflow:hidden}
.cases .sc *{animation-play-state:paused}
.cases .case.is-active .sc *{animation-play-state:running}
.kcase .sc *{animation-play-state:running}
/* закрытое устройство — сцена на паузе: не тратим батарею на то, чего не видно */
.cases.dev-ready .case:not(.is-open) .sc *,.kcases.dev-ready .kcase:not(.is-open) .sc *{animation-play-state:paused}

/* ─── 1. биометрия: 3D-облако точек лица ─── */
.sc--bio{display:grid;grid-template-columns:58% 1fr;background:radial-gradient(70% 90% at 30% 42%,rgba(110,123,255,.18),transparent 66%),#06070a}
.bio-cam{position:relative;overflow:hidden;border-right:1px solid rgba(255,255,255,.06)}
.bio-view{position:absolute;inset:0;perspective:80cqw;display:grid;place-items:center}
.bio-head{
  --u:1cqw;position:relative;width:0;height:0;transform-style:preserve-3d;
  animation:bfTurn 9s ease-in-out infinite;
}
@keyframes bfTurn{
  0%,14%{transform:translateY(1.5cqw) rotateX(-8deg) rotateY(0)}
  24%,30%{transform:translateY(1.5cqw) rotateX(-5deg) rotateY(-36deg)}
  41%,47%{transform:translateY(1.5cqw) rotateX(-5deg) rotateY(34deg)}
  57%,100%{transform:translateY(1.5cqw) rotateX(-8deg) rotateY(0)}
}
.bf-p{
  position:absolute;left:0;top:0;border-radius:50%;
  width:calc(.66cqw * var(--s));height:calc(.66cqw * var(--s));margin:calc(-.33cqw * var(--s)) 0 0 calc(-.33cqw * var(--s));
  background:#a7b6ff;opacity:.78;
  transform:translate3d(calc(var(--x) * var(--u)),calc(var(--y) * var(--u)),calc(var(--z) * var(--u)));
  animation:bfOk 9s ease-in-out infinite;
}
.bf-p.lm{width:1cqw;height:1cqw;margin:-.5cqw 0 0 -.5cqw;background:var(--acc);opacity:1;box-shadow:0 0 1cqw rgba(217,255,53,.9);animation:none}
@keyframes bfOk{0%,64%{background:#a7b6ff}70%,90%{background:var(--acc)}96%,100%{background:#a7b6ff}}

.bio-scan{
  position:absolute;left:12%;right:12%;height:2px;top:14%;opacity:0;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);box-shadow:0 0 1.8cqw rgba(217,255,53,.8);
  animation:bioScan 9s ease-in-out infinite;
}
@keyframes bioScan{0%{top:14%;opacity:0}2%{opacity:1}12%{top:84%;opacity:1}14%{opacity:0;top:84%}51%{top:14%;opacity:0}53%{opacity:1}64%{top:84%;opacity:1}66%,100%{opacity:0;top:84%}}
.bio-c{position:absolute;width:5.5cqw;height:5.5cqw;border:2px solid rgba(167,182,255,.7);animation:bioCorner 9s ease-in-out infinite}
.bio-c--tl{top:9%;left:13%;border-right:0;border-bottom:0;border-top-left-radius:1cqw}
.bio-c--tr{top:9%;right:13%;border-left:0;border-bottom:0;border-top-right-radius:1cqw}
.bio-c--bl{bottom:9%;left:13%;border-right:0;border-top:0;border-bottom-left-radius:1cqw}
.bio-c--br{bottom:9%;right:13%;border-left:0;border-top:0;border-bottom-right-radius:1cqw}
@keyframes bioCorner{0%,64%{border-color:rgba(167,182,255,.7)}68%,92%{border-color:var(--acc)}97%,100%{border-color:rgba(167,182,255,.7)}}
.bio-rec{position:absolute;left:5%;top:5%;display:flex;align-items:center;gap:.8cqw;font-family:var(--mono);font-size:max(5.5px,1.35cqw);color:var(--mut-2);letter-spacing:.06em}
.bio-rec i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#ff5d7a;animation:fnLive 1.2s ease-in-out infinite}
.bio-hint{
  position:absolute;left:50%;bottom:4%;translate:-50%;white-space:nowrap;
  padding:.7cqw 1.6cqw;border-radius:99px;background:rgba(7,8,10,.8);border:1px solid rgba(217,255,53,.4);
  font-family:var(--mono);font-size:max(5.5px,1.4cqw);color:var(--acc);
  opacity:0;animation:bioHint 9s ease-in-out infinite;
}
@keyframes bioHint{0%,14%{opacity:0;transform:translateY(1cqw)}17%,49%{opacity:1;transform:none}52%,100%{opacity:0}}

.bio-panel{display:flex;flex-direction:column;gap:1.25cqw;padding:4.6cqw 3.6cqw 3.6cqw}
.bio-ttl{font-family:var(--mono);font-size:max(5.5px,1.35cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2)}
.bio-emp{display:flex;align-items:center;gap:1.5cqw;padding:1.5cqw;border-radius:1.4cqw;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.bio-ava{width:4.8cqw;height:4.8cqw;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 38%,#c9d0ff 0 22%,transparent 23%),radial-gradient(circle at 50% 100%,#c9d0ff 0 44%,transparent 45%),linear-gradient(140deg,#6E7BFF,#2b3350)}
.bio-emp span{display:flex;flex-direction:column;min-width:0}
.bio-emp b{font-size:max(6.5px,1.7cqw);color:var(--txt);font-weight:600;white-space:nowrap}
.bio-emp em{font-style:normal;font-size:max(5.5px,1.4cqw);color:var(--mut-2)}
.bio-st{display:flex;align-items:center;gap:1.2cqw;font-size:max(6px,1.55cqw);color:#c3c7d0}
.bio-st i{position:relative;width:2.4cqw;height:2.4cqw;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);flex:none}
.bio-st i::after{
  content:'✓';position:absolute;inset:-1.5px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc);color:#07080a;font-size:max(5px,1.4cqw);font-weight:700;opacity:0;transform:scale(.4);
}
.bio-st b{margin-left:auto;font-family:var(--mono);font-weight:500;color:var(--acc);opacity:0}
.bio-st--1 i::after{animation:bs1 9s var(--ease) infinite}
.bio-st--2 i{animation:bsWait 9s ease-in-out infinite}
.bio-st--2 i::after{animation:bs2 9s var(--ease) infinite}
.bio-st--3 i::after,.bio-st--3 b{animation:bs3 9s var(--ease) infinite}
@keyframes bs1{0%,11%{opacity:0;transform:scale(.4)}13%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes bs2{0%,50%{opacity:0;transform:scale(.4)}52%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes bs3{0%,65%{opacity:0;transform:scale(.4)}67%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes bsWait{0%,14%{border-color:rgba(255,255,255,.18);box-shadow:none}20%,30%,40%{border-color:var(--acc);box-shadow:0 0 1.2cqw rgba(217,255,53,.6)}25%,35%,45%{border-color:rgba(217,255,53,.4);box-shadow:none}52%,100%{border-color:rgba(255,255,255,.18);box-shadow:none}}
.bio-bar{height:.7cqw;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bio-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#6E7BFF,var(--acc));animation:bioBar 9s ease-in-out infinite}
@keyframes bioBar{0%,52%{width:0}66%,93%{width:99.2%}97%,100%{width:0}}
.bio-ok{
  padding:1.3cqw;border-radius:1.2cqw;text-align:center;background:var(--acc);color:#07080a;
  font-size:max(6.5px,1.65cqw);font-weight:700;box-shadow:0 0 3cqw rgba(217,255,53,.35);
  opacity:0;transform:translateY(1cqw) scale(.96);animation:bioOk 9s var(--ease) infinite;
}
@keyframes bioOk{0%,67%{opacity:0;transform:translateY(1cqw) scale(.96)}70%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
.bio-cnt{margin-top:auto;display:flex;align-items:baseline;gap:1cqw}
.bio-cnt b{font-family:var(--dsp);font-weight:700;font-size:max(12px,3.8cqw);color:var(--acc);letter-spacing:-.03em;line-height:1}
.bio-cnt span{font-size:max(5.5px,1.4cqw);color:var(--mut-2);line-height:1.3}

/* ─── 2. магазин одежды ─── */
.sc--shop{background:#07080b}
.sc-shop__s{position:absolute;inset:0;padding:15% 8% 8%;opacity:0;animation:shopS 16s linear infinite;display:flex;flex-direction:column}
.sc-shop__s--1{animation-delay:0s}
.sc-shop__s--2{animation-delay:4s}
.sc-shop__s--3{animation-delay:8s}
.sc-shop__s--4{animation-delay:12s}
@keyframes shopS{0%{opacity:0;transform:translateX(14px)}3%{opacity:1;transform:none}22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateX(-14px)}}
.sc-shop__hdr{font-size:clamp(8px,3.6cqw,11px);font-weight:600;color:var(--txt);margin-bottom:8px}
.sc-shop__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;flex:1}
.sc-shop__grid i{
  position:relative;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(150deg,hsl(var(--h) 38% 24%),hsl(var(--h) 28% 13%));
  border:1px solid rgba(255,255,255,.07);
}
.sc-shop__grid i svg{width:46%;fill:none;stroke:rgba(255,255,255,.82);stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}
.sc-shop__grid i b{position:absolute;left:5px;bottom:4px;font-family:var(--mono);font-size:clamp(5px,2.2cqw,7px);color:var(--acc)}
.sc-shop__hero{
  flex:1;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;
  background:linear-gradient(150deg,#2e3757,#141826);border:1px solid rgba(255,255,255,.07);
}
.sc-shop__hero svg{width:44%;fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sc-shop__name{font-size:clamp(8px,3.8cqw,11px);color:var(--txt);font-weight:500}
.sc-shop__price{font-size:clamp(10px,4.4cqw,13px);color:var(--acc);font-weight:600;margin-top:2px}
.sc-shop__sizes{display:flex;gap:5px;margin-top:9px}
.sc-shop__sizes b{flex:1;text-align:center;font-size:clamp(6px,2.8cqw,9px);padding:5px 0;border-radius:5px;border:1px solid var(--line);color:var(--mut)}
.sc-shop__sizes b.on{background:var(--acc);color:#07080a;border-color:var(--acc)}
.sc-shop__row{display:flex;justify-content:space-between;gap:8px;font-size:clamp(6.5px,3cqw,9px);color:var(--mut);padding:6px 0;border-bottom:1px solid var(--line)}
.sc-shop__row b{color:var(--txt);white-space:nowrap}
.sc-shop__total{display:flex;justify-content:space-between;font-size:clamp(8px,3.6cqw,11px);color:var(--txt);padding:9px 0;font-weight:600}
.sc-shop__total b{color:var(--acc)}
.sc-shop__pay{margin-top:auto;text-align:center;background:var(--acc);color:#07080a;font-size:clamp(7.5px,3.4cqw,10px);font-weight:600;padding:9px;border-radius:99px}
.sc-shop__s--4{justify-content:center;align-items:center;text-align:center}
.sc-shop__ok{width:38px;height:38px;border-radius:50%;background:var(--acc);color:#07080a;display:grid;place-items:center;font-size:19px;font-weight:700;margin-bottom:12px;animation:shopOk 16s ease-out infinite;animation-delay:12.2s}
@keyframes shopOk{0%{transform:scale(.5);opacity:0}3%{transform:scale(1.12);opacity:1}6%,22%{transform:scale(1);opacity:1}26%,100%{opacity:0}}
.sc-shop__thx{font-size:clamp(9px,4cqw,12px);color:var(--txt);font-weight:600}
.sc-shop__sub{font-size:clamp(6.5px,3cqw,9px);color:var(--mut-2);margin-top:5px}

/* ─── 3. трансформатор: 3D-модель, которая разбирается на узлы ─── */
.sc--tx{--u:.8cqw;background:radial-gradient(58% 80% at 32% 64%,rgba(110,123,255,.22),transparent 70%),linear-gradient(180deg,#07080c,#0b0d15)}
.tx-stage{position:absolute;left:0;top:0;width:64%;height:100%;perspective:150cqw;perspective-origin:50% 26%}
.tx-rig{position:absolute;left:50%;top:69%;width:0;height:0;transform-style:preserve-3d;animation:txSway 16s ease-in-out infinite}
@keyframes txSway{0%,100%{transform:rotateX(-19deg) rotateY(24deg)}50%{transform:rotateX(-19deg) rotateY(46deg)}}
.tx-rig i{position:absolute;left:0;top:0;display:block}
.tx-p{
  position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:translate3d(calc(var(--u) * var(--x)),calc(var(--u) * var(--y)),calc(var(--u) * var(--z)));
  animation:txExp 10s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes txExp{
  0%,16%{transform:translate3d(calc(var(--u) * var(--x)),calc(var(--u) * var(--y)),calc(var(--u) * var(--z)))}
  34%,72%{transform:translate3d(calc(var(--u) * (var(--x) + var(--ex))),calc(var(--u) * (var(--y) + var(--ey))),calc(var(--u) * (var(--z) + var(--ez))))}
  90%,100%{transform:translate3d(calc(var(--u) * var(--x)),calc(var(--u) * var(--y)),calc(var(--u) * var(--z)))}
}
.tx-floor{
  width:calc(var(--u) * 72);height:calc(var(--u) * 72);margin:calc(var(--u) * -36) 0 0 calc(var(--u) * -36);border-radius:50%;
  transform:translateY(calc(var(--u) * 7.6)) rotateX(90deg);
  background:
    radial-gradient(closest-side,rgba(110,123,255,.34),rgba(110,123,255,.08) 58%,transparent),
    repeating-radial-gradient(circle,rgba(217,255,53,.16) 0 1px,transparent 1px calc(var(--u) * 4.5));
  -webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);
}
/* материалы */
.tx-tank{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 calc(var(--u) * .32),transparent calc(var(--u) * .32) calc(var(--u) * 1.35)),
             linear-gradient(180deg,#4a566d,#28303f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.tx-tank.f-left,.tx-tank.f-right{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 calc(var(--u) * .32),transparent calc(var(--u) * .32) calc(var(--u) * 1.35)),
             linear-gradient(180deg,#343d50,#1c222d);
}
.tx-tank.f-back{background:linear-gradient(180deg,#232a37,#12161d)}
.tx-tank.f-bottom{background:#0f1218}
.tx-lid{background:linear-gradient(180deg,#5d6a85,#3b465b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.tx-lid.f-top{background:linear-gradient(135deg,#76839f,#46526a)}
.tx-lid.f-left,.tx-lid.f-right{background:#353e51}
.tx-bush{
  background:repeating-linear-gradient(180deg,#f1eadb 0 calc(var(--u) * .62),#968e7e calc(var(--u) * .62) calc(var(--u) * 1.05));
  clip-path:polygon(33% 0,67% 0,100% 100%,0 100%);
}
.tx-term{background:var(--acc);box-shadow:0 0 calc(var(--u) * 1.6) rgba(217,255,53,.95)}
.tx-yoke{background:repeating-linear-gradient(0deg,#737c8d 0 1px,#3c424f 1px 2.6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tx-yoke.f-top,.tx-yoke.f-bottom{background:#5a6474}
.tx-coil{
  background:linear-gradient(rgba(0,0,0,var(--sh)),rgba(0,0,0,var(--sh))),
             repeating-linear-gradient(0deg,rgba(70,24,0,.42) 0 1px,transparent 1px calc(var(--u) * .5)),
             linear-gradient(180deg,#ffbd7d,#dc7a31 46%,#9a4c17);
}
.tx-coil-cap{border-radius:50%;background:radial-gradient(circle,#1a1d24 27%,#eb9a52 29%,#bd662c 70%,#8a4414)}
.tx-fin{
  border-radius:calc(var(--u) * .4);
  background:linear-gradient(90deg,#28303f,#5e6a85 50%,#28303f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
/* «активная часть» светится, пока модель разобрана */
.tx-glow{
  width:calc(var(--u) * 34);height:calc(var(--u) * 22);margin:calc(var(--u) * -11) 0 0 calc(var(--u) * -17);
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,150,60,.45),transparent);
  opacity:0;animation:txGlow 10s ease-in-out infinite;
}
@keyframes txGlow{0%,22%{opacity:0}36%,70%{opacity:1}86%,100%{opacity:0}}

.tx-hud{position:absolute;left:4%;top:5.5%;display:flex;align-items:center;gap:1.2cqw;font-family:var(--mono);font-size:max(6px,1.45cqw);color:var(--mut-2);letter-spacing:.05em}
.tx-tag{padding:.35cqw 1cqw;border-radius:.6cqw;background:var(--acc);color:#07080a;font-weight:600}
.tx-labs{position:absolute;right:2.5%;top:0;bottom:0;width:33%}
.tx-lab{
  position:absolute;left:0;top:var(--t);display:flex;flex-direction:column;gap:.25cqw;
  padding-left:1.8cqw;border-left:1px solid rgba(217,255,53,.55);
  opacity:0;transform:translateX(2cqw);animation:txLab 10s var(--ease) infinite;animation-delay:var(--d);
}
.tx-lab i{position:absolute;right:100%;top:50%;width:12cqw;height:1px;background:linear-gradient(90deg,var(--acc),rgba(217,255,53,.25))}
.tx-lab i::before{content:'';position:absolute;left:-.45cqw;top:-.45cqw;width:.9cqw;height:.9cqw;border-radius:50%;background:var(--acc);box-shadow:0 0 1cqw var(--acc)}
.tx-lab b{font-size:max(7px,1.75cqw);color:var(--txt);font-weight:600;line-height:1.1}
.tx-lab em{font-style:normal;font-family:var(--mono);font-size:max(5.5px,1.3cqw);color:var(--mut-2)}
@keyframes txLab{0%,33%{opacity:0;transform:translateX(2cqw)}39%,70%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateX(2cqw)}}
.tx-scroll{position:absolute;left:4%;bottom:5.5%;display:flex;align-items:center;gap:1.4cqw;font-family:var(--mono);font-size:max(5.5px,1.3cqw);color:var(--mut-2)}
.tx-mouse{position:relative;width:2.4cqw;height:3.6cqw;border-radius:1.2cqw;border:1px solid rgba(255,255,255,.25)}
.tx-mouse i{position:absolute;left:50%;top:.6cqw;width:.35cqw;height:.8cqw;margin-left:-.175cqw;border-radius:1cqw;background:var(--acc);animation:txWheel 1.6s ease-in-out infinite}
@keyframes txWheel{0%{transform:none;opacity:1}70%{transform:translateY(1.2cqw);opacity:0}100%{opacity:0}}
.tx-prog{width:13cqw;height:.5cqw;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.tx-prog i{display:block;height:100%;width:0;background:var(--acc);animation:txProg 10s cubic-bezier(.65,0,.35,1) infinite}
@keyframes txProg{0%,16%{width:0}34%,72%{width:100%}90%,100%{width:0}}

/* ─── 4. крипто-терминал ─── */
.sc--cr{display:flex;flex-direction:column;background:#07080c}
.cr-top{display:flex;align-items:center;gap:2cqw;padding:2.2cqw 3cqw;border-bottom:1px solid rgba(255,255,255,.06)}
.cr-pair{display:flex;align-items:center;gap:1cqw;font-size:max(7px,1.75cqw);font-weight:600;color:var(--txt);white-space:nowrap}
.cr-pair i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd27a,#e88a1a)}
.cr-price{display:flex;align-items:center;font-family:var(--mono);font-size:max(8px,2.15cqw);color:var(--txt);font-weight:500;white-space:nowrap}
.cr-odo{display:inline-flex;--dh:1.25em}
.cr-odo i{display:block;height:var(--dh);overflow:hidden}
.cr-odo em{display:block;font-style:normal;animation:gmOdo var(--sp) steps(10) infinite}
.cr-odo b{display:block;height:var(--dh);line-height:var(--dh);font-weight:500}
.cr-chg{font-family:var(--mono);font-size:max(5.5px,1.4cqw);color:#07080a;background:var(--acc);padding:.35cqw .9cqw;border-radius:.6cqw;font-weight:600;white-space:nowrap}
.cr-tf{margin-left:auto;display:flex;gap:.5cqw}
.cr-tf b{font-family:var(--mono);font-size:max(5.5px,1.3cqw);color:var(--mut-2);padding:.35cqw .8cqw;border-radius:.6cqw;font-weight:400}
.cr-tf b.on{background:rgba(255,255,255,.09);color:var(--txt)}
.cr-body{flex:1;display:grid;grid-template-columns:1fr 27%;min-height:0}
.cr-chart{position:relative;min-height:0;padding:1.4cqw .6cqw 1cqw 2cqw}
.cr-svg{display:block;width:100%;height:100%;overflow:hidden}
.cr-grid line{stroke:rgba(255,255,255,.05);stroke-width:1;vector-effect:non-scaling-stroke}
.cr-candles .up rect{fill:var(--acc)}
.cr-candles .up line{stroke:var(--acc)}
.cr-candles .dn rect{fill:#ff5d7a}
.cr-candles .dn line{stroke:#ff5d7a}
.cr-candles line{stroke-width:1;vector-effect:non-scaling-stroke}
.cr-vol rect{opacity:.2}
.cr-vol .up{fill:var(--acc)}
.cr-vol .dn{fill:#ff5d7a}
.cr-ema{fill:none;stroke:#8d98ff;stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.95}
.cr-roll{animation:crRoll 28s linear infinite}
@keyframes crRoll{to{transform:translateX(-360px)}}
.cr-sig path{fill:var(--acc)}
.cr-sig text{fill:var(--acc);font:600 9px var(--mono);text-anchor:middle}
.cr-sig__ring{fill:none;stroke:var(--acc);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:crPing 1.8s ease-out infinite}
@keyframes crPing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
.cr-sup{stroke:rgba(141,152,255,.85);stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.cr-sup__t{fill:#8d98ff;font:8px var(--mono)}
.cr-axis text{fill:rgba(255,255,255,.34);font:8px var(--mono)}
.cr-live{position:absolute;right:14%;top:2.2cqw;display:flex;align-items:center;gap:.6cqw;font-family:var(--mono);font-size:max(5.5px,1.25cqw);color:var(--acc)}
.cr-live i{width:1cqw;height:1cqw;border-radius:50%;background:var(--acc);box-shadow:0 0 1cqw var(--acc);animation:fnLive 1.4s ease-in-out infinite}
.cr-side{display:flex;flex-direction:column;gap:1cqw;padding:2cqw 2.2cqw;border-left:1px solid rgba(255,255,255,.06);min-height:0}
.cr-side__t{font-family:var(--mono);font-size:max(5.5px,1.3cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--mut-2)}
.cr-row{display:grid;grid-template-columns:auto 1fr;gap:.25cqw 1cqw;padding:1.1cqw 1.2cqw;border-radius:1.1cqw;background:rgba(255,255,255,.035);font-size:max(5.5px,1.35cqw)}
.cr-row b{color:var(--txt);font-weight:600}
.cr-row span{color:var(--mut-2);text-align:right;font-family:var(--mono);font-size:.9em}
.cr-row u{grid-column:1/-1;text-decoration:none;font-family:var(--mono);font-size:.9em;color:var(--mut-2)}
.cr-row--on{background:rgba(217,255,53,.1);box-shadow:inset 0 0 0 1px rgba(217,255,53,.38)}
.cr-row--on u{color:var(--acc)}
.cr-row--wait u{color:#8d98ff;animation:fnLive 1.6s ease-in-out infinite}
.cr-acc{margin-top:auto;padding:1.3cqw 1.4cqw;border-radius:1.2cqw;background:linear-gradient(135deg,rgba(217,255,53,.15),rgba(110,123,255,.1));border:1px solid rgba(217,255,53,.32)}
.cr-acc span{display:block;font-family:var(--mono);font-size:max(5px,1.2cqw);color:var(--mut-2)}
.cr-acc b{font-family:var(--dsp);font-weight:700;font-size:max(10px,2.8cqw);color:var(--acc);letter-spacing:-.03em}
.cr-toast{
  position:absolute;left:22%;top:15%;z-index:3;display:flex;gap:1.2cqw;align-items:center;max-width:46%;
  padding:1.3cqw 1.7cqw;border-radius:1.6cqw;background:rgba(20,24,34,.95);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 2cqw 5cqw rgba(0,0,0,.6);
  opacity:0;transform:translateY(-2cqw);animation:crToast 9s var(--ease) infinite;
}
.cr-toast i{width:3.2cqw;height:3.2cqw;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#5ec4f0,#1e8fc0)}
.cr-toast span{display:flex;flex-direction:column;font-size:max(5.5px,1.3cqw);color:#c3c7d0;line-height:1.35}
.cr-toast b{color:var(--txt);font-weight:600}
@keyframes crToast{0%,38%{opacity:0;transform:translateY(-2cqw)}42%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-1cqw)}}

/* ─── 5. ИИ-секретарь: документ → агент → база ─── */
.sc--ai{
  display:grid;grid-template-columns:28% 21% 1fr;grid-template-rows:1fr auto;gap:0 2.2cqw;padding:3.6cqw 3.4cqw 2.4cqw;
  background:radial-gradient(60% 70% at 45% 40%,rgba(110,123,255,.15),transparent 70%),#07080c;
}
.ai-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ai-flow__l{fill:none;stroke:var(--acc);stroke-width:.32;stroke-dasharray:1.1 1.1;opacity:.18;animation:aiDash 1.1s linear infinite}
.ai-flow__l--1{animation:aiDash 1.1s linear infinite,aiL1 10s ease-in-out infinite}
.ai-flow__l--2{animation:aiDash 1.1s linear infinite,aiL2 10s ease-in-out infinite}
.ai-flow__l--3{animation:aiDash 1.1s linear infinite,aiL3 10s ease-in-out infinite}
@keyframes aiDash{to{stroke-dashoffset:-2.2}}
@keyframes aiL1{0%,10%{opacity:.18}16%,40%{opacity:1}46%,100%{opacity:.18}}
@keyframes aiL2{0%,36%{opacity:.18}40%,62%{opacity:1}66%,100%{opacity:.18}}
@keyframes aiL3{0%,60%{opacity:.18}64%,76%{opacity:1}80%,100%{opacity:.18}}

.ai-docs{position:relative}
.ai-paper{position:absolute;left:8%;right:8%;top:10%;height:70%;border-radius:1cqw;background:#e9ecf3}
.ai-paper--b2{transform:rotate(-8deg) translate(-1.6cqw,.8cqw);background:#7d8499;opacity:.55}
.ai-paper--b1{transform:rotate(4.5deg) translate(1.2cqw,.4cqw);background:#b8bdcb;opacity:.75}
.ai-paper--main{display:flex;flex-direction:column;gap:1.25cqw;padding:2.3cqw 2.1cqw;overflow:hidden;box-shadow:0 2cqw 4cqw rgba(0,0,0,.55)}
.ai-paper__t{font-family:var(--mono);font-size:max(5.5px,1.35cqw);font-weight:700;color:#1a1e29;letter-spacing:.04em;margin-bottom:.4cqw}
.ai-ln{display:block;height:.7cqw;border-radius:99px;background:#c5cad6}
.ai-ln--s{width:60%}
.ai-ln--m{width:82%}
.ai-ocr{position:absolute;left:1.2cqw;right:1.2cqw;height:2.6cqw;border:1.5px solid #9dc400;border-radius:.6cqw;background:rgba(190,240,40,.2);opacity:0;animation:aiOcr 10s var(--ease) infinite}
.ai-ocr--1{top:1.5cqw}
.ai-ocr--2{top:6.9cqw;animation-delay:.45s}
.ai-ocr--3{top:11.8cqw;animation-delay:.9s}
@keyframes aiOcr{0%,5%{opacity:0;transform:scale(1.1)}9%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
.ai-beam{position:absolute;left:0;right:0;height:4cqw;top:-4cqw;background:linear-gradient(180deg,transparent,rgba(170,220,0,.4),transparent);animation:aiBeam 10s linear infinite}
@keyframes aiBeam{0%{top:-4cqw}15%{top:100%}100%{top:100%}}
.ai-cap{position:absolute;left:0;right:0;bottom:3%;text-align:center;font-family:var(--mono);font-size:max(5px,1.25cqw);color:var(--mut-2)}

.ai-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.4cqw}
.ai-orb{position:relative;width:10.5cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#2e3668,#10131f 70%);
  box-shadow:0 0 0 1px rgba(110,123,255,.55),0 0 5cqw rgba(110,123,255,.5);animation:aiBreath 3s ease-in-out infinite}
@keyframes aiBreath{0%,100%{box-shadow:0 0 0 1px rgba(110,123,255,.55),0 0 4cqw rgba(110,123,255,.4)}50%{box-shadow:0 0 0 1px rgba(217,255,53,.6),0 0 6cqw rgba(110,123,255,.65)}}
.ai-orb b{position:relative;font-family:var(--dsp);font-size:max(8px,2.3cqw);color:var(--acc);letter-spacing:-.02em}
.ai-orb i{position:absolute;border-radius:50%}
.ai-orb i:nth-child(1){inset:-1.4cqw;border:1px dashed rgba(217,255,53,.45);animation:aiSpin 8s linear infinite}
.ai-orb i:nth-child(2){inset:-2.8cqw;border:1px solid rgba(110,123,255,.28);animation:aiSpin 14s linear infinite reverse}
.ai-orb i:nth-child(3){inset:-.1cqw;background:conic-gradient(from 0deg,transparent 0 78%,rgba(217,255,53,.75) 92%,transparent);
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 88%);mask:radial-gradient(closest-side,transparent 86%,#000 88%);
  animation:aiSpin 1.8s linear infinite}
@keyframes aiSpin{to{transform:rotate(1turn)}}
.ai-status{position:relative;width:130%;height:3cqw}
.ai-s{position:absolute;inset:0;text-align:center;white-space:nowrap;font-family:var(--mono);font-size:max(5.5px,1.3cqw);color:var(--acc);opacity:0;animation:aiS 10s linear infinite}
.ai-s--2{animation-delay:2.5s}
.ai-s--3{animation-delay:5s}
.ai-s--4{animation-delay:7.5s}
@keyframes aiS{0%{opacity:0;transform:translateY(.6cqw)}2%,22%{opacity:1;transform:none}25%,100%{opacity:0}}

.ai-out{display:flex;flex-direction:column;justify-content:center;gap:2cqw;min-width:0}
.ai-fields{display:flex;flex-direction:column;gap:.8cqw}
.ai-f{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2cqw;padding:1cqw 1.4cqw;border-radius:1cqw;
  background:rgba(255,255,255,.045);border:1px solid var(--line);font-size:max(5.5px,1.38cqw);
  opacity:0;transform:translateX(-2cqw);animation:aiF 10s var(--ease) infinite;
}
.ai-f span{color:var(--mut-2);font-family:var(--mono);font-size:.9em}
.ai-f b{color:var(--txt);font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-f i{font-style:normal;color:var(--acc);font-weight:700}
.ai-f--1{animation-delay:3.9s}
.ai-f--2{animation-delay:4.4s}
.ai-f--3{animation-delay:4.9s}
.ai-f--4{animation-delay:5.4s}
@keyframes aiF{0%{opacity:0;transform:translateX(-2cqw)}3%,47%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
.ai-db{display:flex;flex-direction:column;gap:.5cqw;padding:1.3cqw;border-radius:1.2cqw;background:rgba(255,255,255,.03);border:1px solid var(--line);overflow:hidden}
.ai-db__t{font-family:var(--mono);font-size:max(5px,1.2cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2);margin-bottom:.3cqw}
.ai-db__r{display:grid;grid-template-columns:auto 1fr auto;gap:1.2cqw;font-size:max(5.5px,1.3cqw);color:var(--mut-2);padding:.6cqw .8cqw;border-radius:.7cqw;white-space:nowrap}
.ai-db__r b{font-family:var(--mono);font-weight:400}
.ai-db__r span{overflow:hidden;text-overflow:ellipsis}
.ai-db__r u{text-decoration:none;font-family:var(--mono)}
.ai-db__r--new{background:rgba(217,255,53,.13);color:var(--txt);box-shadow:inset 0 0 0 1px rgba(217,255,53,.42);animation:aiRow 10s var(--ease) infinite}
.ai-db__r--new u{color:var(--acc)}
@keyframes aiRow{
  0%,64%{opacity:0;max-height:0;padding-block:0;margin-bottom:-.5cqw}
  69%,92%{opacity:1;max-height:4cqw;padding-block:.6cqw;margin-bottom:0}
  97%,100%{opacity:0;max-height:0;padding-block:0;margin-bottom:-.5cqw}
}
.ai-foot{grid-column:1/-1;display:flex;align-items:center;gap:2.4cqw;padding-top:1.5cqw;border-top:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:max(5px,1.25cqw);color:var(--mut-2);white-space:nowrap}
.ai-foot span{display:flex;align-items:center;gap:.8cqw}
.ai-foot i{width:1cqw;height:1cqw;border-radius:50%;background:var(--acc)}
.ai-foot b{margin-left:auto;color:#07080a;background:var(--acc);padding:.5cqw 1.2cqw;border-radius:.7cqw;font-weight:600}

/* ─── 6. SEO: сайт поднимается в выдаче ─── */
.sc--seo{display:flex;flex-direction:column;gap:2.2cqw;padding:3.4cqw 3.8cqw;background:#08090d}
.seo-q{display:flex;align-items:center;gap:1.4cqw;padding:1.5cqw 2.2cqw;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:max(7px,1.75cqw);color:var(--txt)}
.seo-q > i{width:2cqw;height:2cqw;border-radius:50%;border:1.5px solid var(--mut-2);flex:none}
.seo-caret{width:1px;height:2.2cqw;background:var(--acc);animation:fnLive 1s steps(2) infinite}
.seo-body{flex:1;display:grid;grid-template-columns:1fr 29%;gap:3cqw;min-height:0}
.seo-list{--rh:6.3cqw;position:relative}
.seo-r{
  position:absolute;left:0;right:0;height:calc(var(--rh) - 1cqw);top:calc(var(--s) * var(--rh));
  display:flex;flex-direction:column;justify-content:center;gap:.8cqw;padding:0 1.8cqw;border-radius:1cqw;background:rgba(255,255,255,.035);
}
.seo-r > b{height:1cqw;width:52%;border-radius:99px;background:rgba(255,255,255,.17)}
.seo-r > i{height:.7cqw;width:86%;border-radius:99px;background:rgba(255,255,255,.075)}
.seo-r--c{--s:2;animation:seoC 9s var(--ease) infinite}
.seo-r--d{--s:3;animation:seoD 9s var(--ease) infinite}
.seo-r--e{--s:4;animation:seoE 9s var(--ease) infinite}
@keyframes seoE{0%,26%{top:calc(4 * var(--rh))}34%,94%{top:calc(5 * var(--rh))}99%,100%{top:calc(4 * var(--rh))}}
@keyframes seoC{0%,52%{top:calc(2 * var(--rh))}62%,94%{top:calc(3 * var(--rh))}99%,100%{top:calc(2 * var(--rh))}}
@keyframes seoD{0%,52%{top:calc(3 * var(--rh))}62%,94%{top:calc(4 * var(--rh))}99%,100%{top:calc(3 * var(--rh))}}
.seo-r--you{
  --s:5;z-index:2;flex-direction:row;align-items:center;gap:1.5cqw;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  animation:seoYou 9s var(--ease) infinite;
}
@keyframes seoYou{
  0%,26%{top:calc(5 * var(--rh));opacity:.55;transform:none}
  34%,52%{top:calc(4 * var(--rh));opacity:.85;transform:none;background:rgba(255,255,255,.05);border-color:var(--line);box-shadow:none}
  62%,92%{top:calc(2 * var(--rh));opacity:1;transform:scale(1.035);background:rgba(217,255,53,.12);border-color:rgba(217,255,53,.6);box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.55),0 0 3cqw rgba(217,255,53,.2)}
  96%{top:calc(2 * var(--rh));opacity:0}
  98%,100%{top:calc(5 * var(--rh));opacity:0;transform:none;background:rgba(255,255,255,.05);border-color:var(--line);box-shadow:none}
}
.seo-pos{position:relative;flex:none;width:4.2cqw;height:4.2cqw;border-radius:1cqw;background:rgba(255,255,255,.09);font-family:var(--dsp);font-weight:700;font-size:max(7px,1.9cqw);animation:seoPosBg 9s infinite}
@keyframes seoPosBg{0%,56%{background:rgba(255,255,255,.09)}60%,94%{background:var(--acc)}98%,100%{background:rgba(255,255,255,.09)}}
.seo-pos em,.seo-big em{position:absolute;font-style:normal;opacity:0}
.seo-pos em{inset:0;display:grid;place-items:center;color:var(--txt)}
.seo-pos em:nth-child(3){color:#07080a}
.seo-pos em:nth-child(1),.seo-big em:nth-child(1){animation:seoP1 9s infinite}
.seo-pos em:nth-child(2),.seo-big em:nth-child(2){animation:seoP2 9s infinite}
.seo-pos em:nth-child(3),.seo-big em:nth-child(3){animation:seoP3 9s infinite}
@keyframes seoP1{0%,28%{opacity:1}31%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes seoP2{0%,29%{opacity:0}32%,54%{opacity:1}57%,100%{opacity:0}}
@keyframes seoP3{0%,55%{opacity:0}58%,94%{opacity:1}97%,100%{opacity:0}}
.seo-you{display:flex;flex-direction:column;gap:.4cqw;min-width:0;flex:1}
.seo-you b{font-size:max(6.5px,1.6cqw);color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-you i{font-style:normal;font-size:max(5.5px,1.28cqw);color:var(--mut-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-up{color:var(--acc);font-size:max(7px,1.8cqw);opacity:0;animation:seoUp 9s infinite}
@keyframes seoUp{0%,27%{opacity:0;transform:translateY(1cqw)}30%,38%{opacity:1;transform:none}42%,53%{opacity:0}56%,66%{opacity:1;transform:none}72%,100%{opacity:0}}
.seo-page2{position:absolute;left:0;right:0;top:calc(5 * var(--rh) - 1.1cqw);text-align:center;font-family:var(--mono);font-size:max(5px,1.1cqw);color:var(--mut-2);letter-spacing:.1em;text-transform:uppercase;animation:seoPg 9s infinite}
@keyframes seoPg{0%,25%{opacity:.8}30%,96%{opacity:0}100%{opacity:.8}}
.seo-side{display:flex;flex-direction:column;gap:1cqw;min-width:0}
.seo-side__t{font-family:var(--mono);font-size:max(5px,1.2cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2)}
.seo-big{position:relative;height:8.4cqw;font-family:var(--dsp);font-weight:700;font-size:max(20px,7.6cqw);line-height:1;letter-spacing:-.05em}
.seo-big em{left:0;top:0;color:var(--txt)}
.seo-big em:nth-child(3){color:var(--acc);text-shadow:0 0 3cqw rgba(217,255,53,.5)}
.seo-spark{display:block;width:100%;height:9cqw;overflow:visible}
.seo-spark__a{fill:rgba(217,255,53,.12);opacity:0;animation:seoArea 9s infinite}
.seo-spark__l{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:seoLine 9s var(--ease) infinite}
@keyframes seoArea{0%,40%{opacity:0}80%,94%{opacity:1}100%{opacity:0}}
@keyframes seoLine{0%,20%{stroke-dashoffset:1}80%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.seo-grow{font-family:var(--dsp);font-weight:700;font-size:max(12px,3.6cqw);color:var(--acc);letter-spacing:-.03em;opacity:0;animation:seoGrow 9s infinite}
.seo-badge{align-self:flex-start;margin-top:auto;padding:.7cqw 1.4cqw;border-radius:99px;background:var(--acc);color:#07080a;font-family:var(--mono);font-size:max(5.5px,1.3cqw);font-weight:600;white-space:nowrap;opacity:0;animation:seoGrow 9s infinite;animation-delay:.3s}
@keyframes seoGrow{0%,66%{opacity:0;transform:translateY(1cqw)}72%,94%{opacity:1;transform:none}100%{opacity:0}}

/* ─── 7. VPN ─── */
.sc--vpn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;background:radial-gradient(70% 52% at 50% 34%,rgba(110,123,255,.26),transparent 66%),#07080b;padding:13% 9%}
.sc-vpn__globe{position:relative;display:grid;place-items:center;width:48%;aspect-ratio:1}
.sc-vpn__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(217,255,53,.36);animation:vpnR 3s ease-out infinite}
.sc-vpn__ring--2{animation-delay:1s}
.sc-vpn__ring--3{animation-delay:2s}
@keyframes vpnR{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.55);opacity:0}}
.sc-vpn__btn{
  width:70%;aspect-ratio:1;border-radius:50%;background:var(--acc);display:grid;place-items:center;
  box-shadow:0 0 30px rgba(217,255,53,.5);animation:vpnPulse 3s ease-in-out infinite;
}
@keyframes vpnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.sc-vpn__shield{width:52%;fill:none;stroke:#07080a;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.sc-vpn__check{stroke-dasharray:22;stroke-dashoffset:22;animation:vpnCheck 3s ease-out infinite}
@keyframes vpnCheck{0%,20%{stroke-dashoffset:22}45%,100%{stroke-dashoffset:0}}
.sc-vpn__state{position:relative;height:1.5em;width:100%}
.sc-vpn__st{position:absolute;inset:0;text-align:center;font-family:var(--mono);font-size:clamp(7px,3cqw,11px);letter-spacing:.08em;text-transform:uppercase;opacity:0;animation:vpnSt 6s linear infinite}
.sc-vpn__st--1{color:var(--mut);animation-delay:0s}
.sc-vpn__st--2{color:var(--acc);animation-delay:3s}
@keyframes vpnSt{0%{opacity:0}5%,45%{opacity:1}52%,100%{opacity:0}}
.sc-vpn__speed{display:flex;gap:6px;width:100%}
.sc-vpn__speed span{flex:1;text-align:center;font-family:var(--mono);font-size:clamp(5.5px,2.2cqw,8px);color:var(--mut-2);background:rgba(255,255,255,.04);border-radius:6px;padding:5px 2px}
.sc-vpn__speed b{color:var(--txt);font-size:1.25em}
.sc-vpn__nodes{display:flex;flex-direction:column;gap:4px;width:100%}
.sc-vpn__nodes span{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:clamp(5.5px,2.2cqw,8px);color:var(--mut-2);padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.03)}
.sc-vpn__nodes span i{width:5px;height:5px;border-radius:50%;background:var(--mut-2);flex:none}
.sc-vpn__nodes span b{margin-left:auto;font-weight:400}
.sc-vpn__nodes span.on{color:var(--acc);background:rgba(217,255,53,.1)}
.sc-vpn__nodes span.on i{background:var(--acc);box-shadow:0 0 7px rgba(217,255,53,.9)}

/* ─── 8. чат-менеджер ─── */
.sc--chat{display:flex;flex-direction:column;background:#07080b;padding-top:14%}
.sc-chat__hdr{display:flex;align-items:center;gap:6px;padding:7px 8%;border-bottom:1px solid var(--line);font-size:clamp(6.5px,2.6cqw,9px);color:var(--mut)}
.sc-chat__hdr i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#6E7BFF,#D9FF35);flex:none}
.sc-chat__msgs{flex:1;padding:8px 8%;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.sc-chat__m{
  max-width:86%;padding:6px 9px;border-radius:12px;font-size:clamp(6px,2.4cqw,8.5px);line-height:1.45;
  opacity:0;animation:chatIn 11s ease-out infinite;
}
.sc-chat__m--in{background:rgba(255,255,255,.07);color:#dfe2e8;align-self:flex-start;border-bottom-left-radius:4px}
.sc-chat__m--out{background:var(--acc);color:#07080a;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
.sc-chat__m--1{animation-delay:.2s}
.sc-chat__m--2{animation-delay:1.9s}
.sc-chat__m--3{animation-delay:3.1s}
.sc-chat__m--4{animation-delay:4.8s}
.sc-chat__m--5{animation-delay:6s}
@keyframes chatIn{0%{opacity:0;transform:translateY(7px)}6%{opacity:1;transform:none}82%{opacity:1}92%,100%{opacity:0}}
.sc-chat__lead{margin:0 8% 6%;text-align:center;font-family:var(--mono);font-size:clamp(5.5px,2.2cqw,8px);letter-spacing:.04em;color:var(--acc);border:1px solid rgba(217,255,53,.34);border-radius:99px;padding:5px;opacity:0;animation:chatIn 11s ease-out infinite;animation-delay:7s}

/* ─── 9. рассылка ─── */
.sc--send{padding:7%;display:flex;flex-direction:column;background:#07080b}
.sc-send__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.sc-send__top span{font-size:clamp(7px,2.7cqw,10px);color:var(--txt);font-weight:500}
.sc-send__cnt{font-family:var(--mono);font-size:clamp(9px,3.6cqw,14px);color:var(--acc)}
.sc-send__list{flex:1;display:flex;flex-direction:column;gap:4px}
.sc-send__row{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.035);border-radius:6px;padding:5px 7px}
.sc-send__row > i{
  width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#3f4a68,#232a3c);font-style:normal;
  font-family:var(--mono);font-size:clamp(4.5px,1.8cqw,6.5px);color:#c3c7d0;
}
.sc-send__row > span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sc-send__row b{font-size:clamp(5.5px,2.2cqw,8px);color:var(--txt);font-weight:500}
.sc-send__row em{font-style:normal;font-size:clamp(5px,2cqw,7.5px);color:var(--mut-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-send__row u{text-decoration:none;font-size:clamp(6px,2.3cqw,8px);color:var(--acc);opacity:0;animation:sendOk 5s ease-out infinite}
.sc-send__row--1 u{animation-delay:.4s}
.sc-send__row--2 u{animation-delay:1s}
.sc-send__row--3 u{animation-delay:1.6s}
.sc-send__row--4 u{animation-delay:2.2s}
.sc-send__row--5 u{animation-delay:2.8s}
@keyframes sendOk{0%,8%{opacity:0;transform:scale(.6)}16%,88%{opacity:1;transform:none}100%{opacity:0}}
.sc-send__bar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:7px;overflow:hidden}
.sc-send__bar i{display:block;height:100%;width:0;background:var(--acc);animation:sendBar 5s ease-out infinite}
@keyframes sendBar{0%{width:0}75%,100%{width:100%}}
.sc-send__foot{margin-top:6px;font-family:var(--mono);font-size:clamp(5px,1.9cqw,7.5px);color:var(--mut-2);letter-spacing:.04em}

/* ─── 10. игра в Telegram ─── */
.sc--game{background:radial-gradient(82% 46% at 50% 8%,rgba(110,123,255,.3),transparent 64%),#06070a}
.sc-gm__aura{
  position:absolute;left:50%;bottom:-24%;translate:-50%;width:150%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(217,255,53,.2),transparent 62%);animation:gmAura 4.2s ease-in-out infinite;
}
@keyframes gmAura{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.06)}}
.sc-gm__s{position:absolute;inset:0;padding:20% 7% 7%;display:flex;flex-direction:column;opacity:0;animation:gmS 13s linear infinite}
.sc-gm__s--play{animation-delay:0s}
.sc-gm__s--board{animation-delay:6.5s;justify-content:center;gap:4px;padding-top:16%}
@keyframes gmS{0%{opacity:0;transform:scale(.97)}3%{opacity:1;transform:none}46%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(1.03)}}

.sc-gm__hud{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:clamp(5.5px,2.3cqw,8px);letter-spacing:.1em}
.sc-gm__lvl{color:var(--mut-2)}
.sc-gm__combo{color:var(--acc);animation:gmCombo 1.5s ease-in-out infinite}
@keyframes gmCombo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

.sc-gm__score{display:flex;flex-direction:column;align-items:center;gap:2px;margin:7px 0 9px}
.sc-gm__sl{font-family:var(--mono);font-size:clamp(4.5px,1.9cqw,6.5px);letter-spacing:.24em;color:var(--mut-2)}
.gm-odo{
  display:flex;gap:2px;font-family:var(--dsp);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,9.5cqw,30px);line-height:1;color:var(--acc);
  text-shadow:0 0 18px rgba(217,255,53,.55);
}
.gm-odo{--dh:1.1em}
.gm-odo i{display:block;height:var(--dh);overflow:hidden}
.gm-odo em{display:block;font-style:normal;animation:gmOdo var(--sp) steps(10) infinite}
.gm-odo b{display:block;height:var(--dh);line-height:var(--dh);text-align:center;min-width:.62em}
/* лента из 11 цифр (0…9 и снова 0): уезжает ровно на 10 позиций и повторяется без шва */
@keyframes gmOdo{from{transform:translateY(0)}to{transform:translateY(calc(-10 * var(--dh)))}}

.sc-gm__field{position:relative;flex:1;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(110,123,255,.12),rgba(6,7,10,0) 58%)}
.sc-gm__road{
  position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(217,255,53,.13) 1px,transparent 1px),
                   linear-gradient(0deg,rgba(217,255,53,.13) 1px,transparent 1px);
  background-size:16% 16%;animation:gmRoad 1.1s linear infinite;
}
@keyframes gmRoad{from{background-position:0 0}to{background-position:0 16%}}
.sc-gm__coin,.sc-gm__rock{position:absolute;left:var(--x);top:-14%;translate:-50% 0}
.sc-gm__coin{
  width:11%;aspect-ratio:1;border-radius:50%;background:var(--acc);
  box-shadow:0 0 12px rgba(217,255,53,.8);animation:gmFall 3.2s linear infinite var(--d);
}
.sc-gm__rock{
  width:13%;aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);animation:gmFall 3.2s linear infinite var(--d);
}
@keyframes gmFall{0%{top:-14%;opacity:0}8%{opacity:1}78%{opacity:1}88%,100%{top:74%;opacity:0}}
.sc-gm__pop{
  position:absolute;left:var(--x);bottom:24%;translate:-50% 0;opacity:0;
  font-family:var(--dsp);font-weight:700;font-size:clamp(7px,3.4cqw,11px);color:var(--acc);
  text-shadow:0 0 10px rgba(217,255,53,.8);animation:gmPop 3.2s ease-out infinite var(--d);
}
@keyframes gmPop{0%{opacity:0;transform:translateY(0) scale(.7)}8%{opacity:1;transform:translateY(-8%) scale(1)}34%,100%{opacity:0;transform:translateY(-44%) scale(1)}}
.sc-gm__hero{
  position:absolute;left:50%;bottom:9%;translate:-50% 0;width:20%;aspect-ratio:1;border-radius:26%;
  background:linear-gradient(160deg,#fff,#c9d2ff);display:flex;align-items:center;justify-content:center;gap:16%;
  box-shadow:0 0 22px rgba(110,123,255,.75);animation:gmHero 1.6s ease-in-out infinite;
}
.sc-gm__hero u{width:14%;aspect-ratio:1;border-radius:50%;background:#0a0b12}
@keyframes gmHero{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14%) rotate(4deg)}}
.sc-gm__wave{
  position:absolute;left:50%;bottom:7%;translate:-50% 0;width:26%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(217,255,53,.7);animation:gmWave 1.6s ease-out infinite;
}
@keyframes gmWave{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.sc-gm__pad{
  margin-top:7px;display:flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--mono);font-size:clamp(5px,2.1cqw,7.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2);
}
.sc-gm__pad i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--acc);animation:gmTap 1.6s ease-out infinite}
@keyframes gmTap{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.15);opacity:1}}

.sc-gm__bt{font-family:var(--mono);font-size:clamp(5.5px,2.3cqw,8px);letter-spacing:.11em;text-transform:uppercase;color:var(--mut-2);margin-bottom:5px}
.sc-gm__r{
  display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:8px;
  background:rgba(255,255,255,.04);font-size:clamp(5.5px,2.4cqw,8.5px);color:var(--mut);
}
.sc-gm__r b{font-family:var(--mono);color:var(--mut-2);width:1em;flex:none}
.sc-gm__r i{
  width:16%;max-width:20px;aspect-ratio:1;border-radius:50%;flex:none;display:grid;place-items:center;
  font-style:normal;font-family:var(--mono);font-size:.82em;background:rgba(110,123,255,.28);color:#dfe3ff;
}
.sc-gm__r span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-gm__r u{text-decoration:none;font-family:var(--mono);color:#c3c7d0}
.sc-gm__r--you{background:rgba(217,255,53,.14);border:1px solid rgba(217,255,53,.4);color:var(--txt)}
.sc-gm__r--you i{background:var(--acc);color:#07080a}
.sc-gm__r--you u{color:var(--acc)}
.sc-gm__players{
  margin-top:9px;display:flex;align-items:baseline;justify-content:center;gap:6px;padding:7px 0;
  border-radius:10px;background:linear-gradient(120deg,rgba(217,255,53,.16),rgba(110,123,255,.08));
  border:1px solid rgba(217,255,53,.3);
}
.sc-gm__players b{font-family:var(--dsp);font-weight:700;font-size:clamp(12px,5.6cqw,19px);color:var(--acc);letter-spacing:-.03em}
.sc-gm__players span{font-size:clamp(5.5px,2.3cqw,8px);color:#c3c7d0}

/* ─── 11. воронка блогера ─── */
.sc--fn{display:flex;flex-direction:column;padding:20% 8% 7%;background:radial-gradient(76% 44% at 50% 4%,rgba(110,123,255,.24),transparent 66%),#06070a}
.sc-fn__hdr{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:clamp(5px,2.1cqw,7.5px);letter-spacing:.07em;color:var(--mut-2)}
.sc-fn__hdr i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px rgba(217,255,53,.9);animation:fnLive 2s ease-in-out infinite}
@keyframes fnLive{0%,100%{opacity:.4}50%{opacity:1}}

.sc-fn__src{
  display:flex;align-items:center;gap:7px;margin-top:8px;padding:6px 8px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.sc-fn__ava{
  width:17%;max-width:22px;aspect-ratio:1;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--acc),#6E7BFF);box-shadow:0 0 12px rgba(217,255,53,.35);
}
.sc-fn__srct{display:flex;flex-direction:column;gap:1px;min-width:0}
.sc-fn__srct b{font-size:clamp(5.5px,2.4cqw,8.5px);color:var(--txt);font-weight:600}
.sc-fn__srct em{font-style:normal;font-family:var(--mono);font-size:clamp(4.5px,1.9cqw,6.5px);color:var(--mut-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sc-fn__body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:clamp(3px,1.2cqw,6px);margin:9px 0}
.sc-fn__drop{
  position:absolute;left:var(--x);top:-4%;width:5px;height:5px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 9px rgba(217,255,53,.9);opacity:0;animation:fnDrop 2.8s ease-in infinite var(--d);
}
@keyframes fnDrop{0%{top:-4%;opacity:0}10%{opacity:1}70%{opacity:.85}100%{top:96%;opacity:0;left:50%}}

.sc-fn__st{
  position:relative;width:var(--w);padding:clamp(5px,2cqw,9px) 9px;border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  animation:fnStep 6.5s ease-in-out infinite;animation-delay:calc(var(--i) * .42s);
}
.sc-fn__st span{position:relative;z-index:1;display:block;text-align:center;font-size:clamp(5.5px,2.4cqw,8.5px);color:#c3c7d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-fn__st::before{
  content:'';position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(90deg,rgba(110,123,255,.5),rgba(217,255,53,.28));
  animation:fnFill 6.5s ease-in-out infinite;animation-delay:calc(var(--i) * .42s);
}
@keyframes fnStep{0%,4%{opacity:.4}14%,86%{opacity:1}100%{opacity:.4}}
@keyframes fnFill{0%,4%{transform:translateX(-101%)}20%,86%{transform:translateX(0)}100%{transform:translateX(101%)}}
.sc-fn__st--win{border-color:rgba(217,255,53,.55);box-shadow:0 0 20px rgba(217,255,53,.2)}
.sc-fn__st--win span{color:#07080a;font-weight:600}
.sc-fn__st--win::before{background:var(--acc)}

.sc-fn__res{
  display:flex;align-items:baseline;justify-content:center;gap:7px;padding:8px 0;border-radius:10px;
  background:linear-gradient(120deg,rgba(217,255,53,.16),rgba(110,123,255,.08));border:1px solid rgba(217,255,53,.3);
}
.sc-fn__res b{font-family:var(--dsp);font-weight:700;font-size:clamp(13px,6cqw,21px);color:var(--acc);letter-spacing:-.03em}
.sc-fn__res span{font-size:clamp(5.5px,2.3cqw,8px);color:#c3c7d0}

/* ─── доработки: палец-тап, оплата, конфетти, карта VPN, «печатает…» ─── */
.sc-tap{
  position:absolute;z-index:6;left:30%;top:36%;width:9cqw;height:9cqw;margin:-4.5cqw 0 0 -4.5cqw;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.2);opacity:0;animation:shopTap 16s var(--ease) infinite;
}
@keyframes shopTap{
  0%,15%{left:30%;top:36%;opacity:0;transform:scale(1.5)}
  18%{left:30%;top:36%;opacity:1;transform:scale(.8)}
  21%{left:30%;top:36%;opacity:0;transform:scale(1.35)}
  40%{left:40%;top:85%;opacity:0;transform:scale(1.5)}
  43%{left:40%;top:85%;opacity:1;transform:scale(.8)}
  46%{left:40%;top:85%;opacity:0;transform:scale(1.35)}
  65%{left:50%;top:89%;opacity:0;transform:scale(1.5)}
  68%{left:50%;top:89%;opacity:1;transform:scale(.8)}
  71%,100%{left:50%;top:89%;opacity:0;transform:scale(1.35)}
}
.sc-shop__hero{perspective:70cqw}
.sc-shop__hero span{display:grid;place-items:center;width:100%;height:100%;animation:shopHero 4s ease-in-out infinite}
@keyframes shopHero{0%,100%{transform:rotateY(-24deg) translateY(0)}50%{transform:rotateY(24deg) translateY(-2cqw)}}
/* после тапа по «Оплатить» — короткое ожидание платежа */
.sc-shop__pay{position:relative}
.sc-shop__pay i{
  position:absolute;right:5cqw;top:50%;width:3cqw;height:3cqw;margin-top:-1.5cqw;border-radius:50%;
  border:2px solid rgba(7,8,10,.25);border-top-color:#07080a;opacity:0;
  animation:aiSpin .7s linear infinite,shopSpin 16s linear infinite;
}
@keyframes shopSpin{0%,68%{opacity:0}69%,75%{opacity:1}76%,100%{opacity:0}}
/* конфетти на экране «Спасибо»: стартует вместе с ним, на 12-й секунде цикла */
.sc-shop__cf{
  position:absolute;left:50%;top:38%;width:1.8cqw;height:3.2cqw;margin:-1.6cqw 0 0 -.9cqw;border-radius:.4cqw;
  background:var(--c);opacity:0;animation:shopCf 16s cubic-bezier(.2,.7,.3,1) infinite;animation-delay:12s;
}
@keyframes shopCf{
  0%,1%{opacity:0;transform:rotate(var(--a)) translateY(0) rotate(0)}
  3%{opacity:1}
  14%{opacity:1;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(260deg)}
  20%,100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1.12)) rotate(330deg)}
}

.sc-vpn__map{position:absolute;left:0;right:0;top:9%;height:44%;width:100%;opacity:.95}
.sc-vpn__dots circle{fill:rgba(167,182,255,.2)}
.sc-vpn__arc{fill:none;stroke:var(--acc);stroke-width:.45;stroke-dasharray:1.4 1.1;opacity:.75;animation:aiDash 1.1s linear infinite}
.sc-vpn__you{fill:#fff}
.sc-vpn__srv{fill:var(--acc)}
.sc-vpn__pkt{fill:var(--acc)}
.sc-vpn__globe,.sc-vpn__speed,.sc-vpn__nodes{position:relative;z-index:1}

.sc-chat__hdr span{display:flex;flex-direction:column;gap:1px;min-width:0}
.sc-chat__hdr b{font-weight:600;color:var(--txt)}
.sc-chat__hdr em{font-style:normal;font-size:.86em;color:var(--acc)}
.sc-chat__typing{
  align-self:flex-end;display:flex;gap:3px;border-radius:12px;background:rgba(217,255,53,.16);
  padding:0 9px;height:0;overflow:hidden;opacity:0;animation:chatType 11s ease-out infinite;
}
.sc-chat__typing i{width:4px;height:4px;margin-top:6px;border-radius:50%;background:var(--acc);animation:chatDot 1s ease-in-out infinite}
.sc-chat__typing i:nth-child(2){animation-delay:.15s}
.sc-chat__typing i:nth-child(3){animation-delay:.3s}
.sc-chat__typing--1{animation-delay:.8s}
.sc-chat__typing--2{animation-delay:3.6s}
@keyframes chatType{0%{opacity:0;height:0}2%,8%{opacity:1;height:16px}10%,100%{opacity:0;height:0}}
@keyframes chatDot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-3px);opacity:1}}

.sc-send__seg{display:flex;gap:3px;margin-left:auto;margin-right:8px}
.sc-send__seg b{font-size:clamp(4.5px,1.6cqw,6.5px);font-weight:400;color:var(--mut-2);padding:2px 6px;border-radius:99px;border:1px solid var(--line)}
.sc-send__seg b.on{background:var(--acc);color:#07080a;border-color:var(--acc)}

/* ═══════ СТРАНИЦА КЕЙСОВ ═══════ */
.kcases{padding-top:clamp(56px,8vh,96px)}
.kcase{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,68px);align-items:center;
  padding:clamp(40px,6vh,84px) 0;border-bottom:1px solid var(--line);scroll-margin-top:90px;
}
.kcase:last-child{border-bottom:0}
.kcase--flip .kcase__visual{order:2}
@media (max-width:960px){
  .kcase{grid-template-columns:1fr;gap:26px}
  .kcase--flip .kcase__visual{order:0}
}
.kcase__visual{display:grid;place-items:center;min-height:clamp(250px,29vw,350px)}
.kcase__n{display:block;color:var(--mut-2);margin-bottom:12px}
.kcase__body h2{font-family:var(--dsp);font-weight:600;letter-spacing:-.035em;line-height:1.08;font-size:clamp(22px,2.9vw,40px);margin-bottom:16px}
.kcase__body p{color:var(--mut);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.65;margin-bottom:13px;max-width:56ch}
/* Задача → Решение → Результат: историю кейса читают по подписям, не продираясь сквозь текст */
.kcase__step{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline}
.kcase__lbl{position:relative;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut-2);padding-top:.3em}
.kcase__step:last-of-type .kcase__lbl{color:var(--acc)}
@media (max-width:560px){.kcase__step{grid-template-columns:1fr;gap:4px}}
.kcase__metric{
  display:flex;align-items:center;gap:14px;margin:20px 0;padding:16px 20px;border-radius:14px;
  background:linear-gradient(120deg,rgba(217,255,53,.15),rgba(110,123,255,.07));
  border:1px solid rgba(217,255,53,.32);
}
.kcase__metric b{font-family:var(--dsp);font-weight:700;font-size:clamp(24px,3.1vw,40px);color:var(--acc);letter-spacing:-.035em;line-height:1}
.kcase__metric span{font-size:14px;color:#c3c7d0;line-height:1.4}
.kcase__res{margin:20px 0 18px;display:grid;gap:9px}
.kcase__res li{position:relative;padding-left:24px;color:#c3c7d0;font-size:14.5px;line-height:1.5}
.kcase__res li::before{content:'';position:absolute;left:0;top:.48em;width:11px;height:2px;background:var(--acc);border-radius:2px}
.kcase__stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.kcase__stack .chip{font-size:11px;padding:7px 12px;border-radius:9px}
.kcase__cta{
  display:inline-flex;align-items:center;gap:9px;color:var(--acc);font-size:14.5px;font-weight:500;
  border-bottom:1px solid rgba(217,255,53,.3);padding-bottom:3px;transition:gap .35s var(--ease),border-color .35s;
}
.kcase__cta:hover{gap:15px;border-color:var(--acc)}
.kcase__cta i{font-style:normal}

/* ═══════════════════════════════════════════════════
   МОБИЛЬНАЯ РАСКЛАДКА
   ═══════════════════════════════════════════════════ */
@media (max-width:760px){
  .cases__nav{margin-top:18px;width:100%}
  .cases__arrow{width:50px}
  .cases__all{width:100%;justify-content:center}

  .case{gap:20px}
  .case__visual{min-height:0}
  /* в 3/4 основание ноутбука выходит вправо за крышку — на узком экране
     уменьшаем и сдвигаем, чтобы угол не срезался рамкой карусели */
  .dev--laptop{max-width:74%;translate:-13% 0}
  .dev--browser{max-width:92%;translate:-3% 0}
  .case__body h3{font-size:clamp(20px,5.6vw,26px)}
  .case__body p{font-size:15px;max-width:none}
  .case__pills li{font-size:11px;padding:6px 10px}
  .case__metric{width:100%;gap:12px}
  .case__metric span{max-width:none;font-size:13px}
  .case__more{font-size:15px;margin-top:18px}

  .cases__head{gap:16px;margin-bottom:24px}
  .cases__meta{width:100%;justify-content:space-between}

  /* страница кейсов */
  .kcase{padding:36px 0;gap:22px}
  .kcase__visual{min-height:0}
  .kcase__body h2{font-size:clamp(21px,6vw,28px)}
  .kcase__body p{font-size:15px;max-width:none}
  .kcase__metric{padding:14px 16px;gap:12px}
  .kcase__metric b{font-size:28px}
  .kcase__metric span{font-size:13.5px}
  .kcase__res li{font-size:15px}
  .kcase__stack .chip{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .cases .sc *,.kcase .sc *{animation:none!important}
  .cases__track{transition:none}
}