/* ============================================================
   Майоров Консалтинг — Битрикс24 + ИИ
   Дизайн-система: SF Pro, фиолетовый градиент, 3D-сцены
   Опорный вьюпорт 1440 × 1026
   ============================================================ */

:root{
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ink:      #0a0a0a;
  --paper:    #fdfdfd;

  --v-900:    #08040f;
  --v-800:    #150a35;
  --v-600:    #2c1874;
  --v-400:    #6b31d6;
  --v-300:    #8e4bff;
  --v-200:    #d681fc;

  --line:     rgba(255,255,255,.13);
  --dim:      rgba(255,255,255,.62);
  --dim-2:    rgba(255,255,255,.42);

  --inset:    26px;
  --radius:   26px;
  --gutter:   4%;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--paper);
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
a,button,[role="button"]{ touch-action:manipulation; }
.btn,.nav__cta,.nav__link,.tile,.cv__steps li{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
h1,h2,h3,h4,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }

.u-purple-card{
  background:radial-gradient(40% 24% at 50% 103%, rgba(255,232,255,.5), rgba(255,214,255,0) 70%),
    radial-gradient(78% 88% at 50% 112%,
      #fff0ff 0%, #eda0ff 20%, #c274f6 30%, #8544e4 42%,
      #3c1d92 56%, rgba(40,18,100,0) 76%),
    linear-gradient(180deg,
      #08040f 0%, #0e0722 14%, #1a0d46 28%, #2e187c 40%,
      #3b1f9a 55%, #4a26b8 74%, #5a2fcc 100%);
}

/* ───────────────────────────── NAV ───────────────────────────── */
.nav{
  position:fixed; z-index:100;
  top:20px; left:50%; transform:translateX(-50%);
  display:flex; align-items:stretch;
  padding:4px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 30px rgba(0,0,0,.10);
}
.nav__mark{
  display:flex; align-items:center; gap:8px;
  height:37px; padding:0 14px 0 11px; border-radius:8px;
  background:#f1f1f1; white-space:nowrap;
  font-size:14px; font-weight:600; letter-spacing:-.022em; color:#111;
}
.nav__mark svg{ width:16px; height:16px; fill:#111; flex:none; }
.nav__link,.nav__cta{
  display:flex; align-items:center;
  height:37px; padding:0 15px;
  font-size:14.5px; letter-spacing:-.01em; color:#131313;
  white-space:nowrap;
  border-radius:8px;
  transition:background .18s ease, color .18s ease;
}
.nav__link{ border-left:1px solid #ededed; margin-left:1px; }
.nav__mark + .nav__link{ border-left:0; margin-left:4px; }
@media (hover:hover) and (pointer:fine){ .nav__link:hover{ background:#f4f4f4; } }
.nav__link[aria-current]{ background:#f1f1f1; font-weight:500; }
.nav__cta{ margin-left:5px; background:#111; color:#fff; padding:0 20px; }
.nav__burger{ display:none; }
@media (hover:hover) and (pointer:fine){ .nav__cta:hover{ background:#2a2a2a; } }

/* ───────────────────────────── BUTTONS ───────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 24px;
  border-radius:10px;
  font-size:15.5px; letter-spacing:-.01em;
  transition:transform .2s cubic-bezier(.22,1,.36,1), background .2s ease, opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn--ghost{
  color:#efeaf6;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
}
@media (hover:hover) and (pointer:fine){ .btn--ghost:hover{ background:rgba(255,255,255,.10); } }
.btn--light{ background:#f2f0f6; color:#16121f; font-weight:500; }
@media (hover:hover) and (pointer:fine){ .btn--light:hover{ background:#fff; } }
.btn--dark{ background:#101018; color:#fff; height:47px; padding:0 28px; }
@media (hover:hover) and (pointer:fine){ .btn--dark:hover{ background:#25252f; } }
.btn--lilac{
  background:rgba(232,225,247,.85); color:#241a3a; font-weight:500;
  height:48px; padding:0 26px;
}
@media (hover:hover) and (pointer:fine){ .btn--lilac:hover{ background:#fff; } }

/* ═══════════════════════════ 1 · HERO ═══════════════════════════ */
.hero{ height:100vh; }
.hero__stage{
  position:fixed; inset:0; z-index:4;
  perspective:1400px;
  perspective-origin:50% 42%;
  pointer-events:none;
}
.hero__card{
  position:absolute;
  inset:var(--inset);
  border-radius:var(--radius);
  overflow:hidden;
  transform-origin:50% 50%;
  will-change:transform;
  pointer-events:auto;
}

.hero__title{
  position:absolute; left:var(--gutter); top:6.2%;
  z-index:1;
  font-size:clamp(36px, 5.1vw, 76px);
  line-height:1.03;
  font-weight:500;
  letter-spacing:-.034em;
  display:flex; flex-direction:column;
  max-width:66%;
}
.hero__title .l1{ color:#e9e5ef; }
.hero__title .l2{ color:rgba(233,229,239,.36); }

.hero__lead{
  position:absolute; z-index:1;
  left:var(--gutter); top:64%;
  width:34%;
}
.hero__lead p{
  font-size:clamp(13px,1.06vw,15.6px);
  line-height:1.72;
  letter-spacing:-.005em;
  color:var(--dim);
}
.hero__actions{ display:flex; gap:14px; margin-top:26px; }

.hero__rule{
  position:absolute; z-index:3;
  left:var(--gutter); right:var(--gutter); top:85.2%;
  height:1px; background:var(--line);
}
.hero__foot{
  position:absolute; z-index:3;
  left:var(--gutter); right:var(--gutter); bottom:5.4%;
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
}
.facts{ display:flex; gap:34px; flex-wrap:wrap; }
.facts b{
  display:block;
  font-size:clamp(19px,1.7vw,25px); font-weight:500; letter-spacing:-.02em;
  color:#f0ecf7;
}
.facts span{
  display:block; margin-top:3px; max-width:24ch;
  font-size:13px; line-height:1.4; color:rgba(255,255,255,.5); letter-spacing:-.005em;
}
.hero__note{
  text-align:right;
  font-size:clamp(12px,.98vw,14.2px);
  line-height:1.62;
  color:rgba(255,255,255,.58);
  letter-spacing:-.005em;
  max-width:36ch;
}

/* — макет портала внутри hero — */
.portal{
  position:absolute; z-index:2;
  left:43%; top:25%;
  width:52%; height:43%;
  border-radius:16px;
  background:linear-gradient(155deg, rgba(22,12,44,.92), rgba(12,7,26,.88));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 48px rgba(8,2,26,.5);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.portal__bar{
  display:flex; align-items:center; gap:8px;
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.portal__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.portal__crumb{
  margin-left:8px; font-size:11.5px; color:rgba(255,255,255,.44); letter-spacing:-.005em;
}
.portal__live{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:11px; color:#9ff0b6;
}
.portal__live i{ width:6px; height:6px; border-radius:50%; background:#5ee08a; display:block; }

.portal__kpi{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.portal__kpi div{ padding:14px 16px; border-right:1px solid rgba(255,255,255,.06); }
.portal__kpi div:last-child{ border-right:0; }
.portal__kpi b{
  display:block; font-size:clamp(15px,1.5vw,22px); font-weight:500;
  letter-spacing:-.02em; color:#efeaf7;
}
.portal__kpi span{ display:block; margin-top:2px; font-size:10.5px; color:rgba(255,255,255,.42); }
.portal__kpi em{ font-style:normal; color:#8ceaa6; }

.portal__board{
  flex:1; display:grid; grid-template-columns:repeat(4,1fr);
  gap:9px; padding:14px 16px; min-height:0;
}
.lane{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.lane__h{
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; letter-spacing:.02em; text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.lane__h b{ font-weight:500; color:rgba(255,255,255,.55); }
.deal{
  border-radius:8px; padding:8px 9px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
}
.deal i{ display:block; height:5px; width:38%; border-radius:3px; background:rgba(255,255,255,.22); }
.deal i + i{ margin-top:5px; width:62%; background:rgba(255,255,255,.12); }
.deal--hot{ background:linear-gradient(140deg, rgba(190,120,255,.35), rgba(120,60,230,.18)); border-color:rgba(220,170,255,.3); }
.deal--ai{ background:linear-gradient(140deg, rgba(120,235,170,.22), rgba(60,180,120,.10)); border-color:rgba(150,240,190,.28); }
.deal small{
  display:block; margin-top:6px; font-size:9.5px; letter-spacing:-.005em;
  color:rgba(255,255,255,.55);
}

/* ═══════════════════ 2 · НАПРАВЛЕНИЯ (3D-кольцо) ═══════════════════ */
/* — живой mini-CRM: карточки и цикл рисует app.js (heroLive) — */
.hero__stage.is-off *{ animation-play-state:paused !important; }
.portal__live{ padding:4px 10px 4px 8px; border-radius:99px; background:rgba(94,224,138,.12); border:1px solid rgba(94,224,138,.25); }
.portal__live i{ animation:crmLive 1.6s ease-in-out infinite; box-shadow:0 0 8px #5ee08a; }
@keyframes crmLive{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

/* ключевые кадры канбана в кейсах */
@keyframes crmType{ from{ transform:scaleX(.55) } to{ transform:scaleX(1) } }
@keyframes crmOut{
  0%,30%{ opacity:1; transform:translateX(0) }
  38%,90%{ opacity:0; transform:translateX(20px) }
  97%,100%{ opacity:1; transform:translateX(0) }
}
@keyframes crmRecv{
  0%,36%{ opacity:0; transform:translateX(-20px) }
  44%,100%{ opacity:1; transform:translateX(0) }
}

.portal .deal{
  padding:8px 9px 7px;
  transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.portal .deal b{
  display:flex; align-items:center; gap:6px; min-width:0;
  font-size:11.5px; font-weight:500; letter-spacing:-.01em; color:#f1edf8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.portal .deal small{ margin-top:4px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; }
.ch{ flex:none; width:12px; height:12px; border-radius:4px; }
.portal .deal[data-s="new"]{ background:rgba(90,170,255,.16); border-color:rgba(130,195,255,.55); box-shadow:0 0 0 3px rgba(90,170,255,.14), 0 0 18px rgba(90,170,255,.3); }
.portal .deal[data-s="new"] small{ color:#a9d6ff; }
.portal .deal[data-s="ai"],
.portal .deal[data-s="paid"]{ background:linear-gradient(140deg, rgba(120,235,170,.22), rgba(60,180,120,.10)); border-color:rgba(150,240,190,.32); }
.portal .deal[data-s="ai"] small,
.portal .deal[data-s="paid"] small{ color:#9ff0b6; }
.portal .deal[data-s="done"] small em{ font-style:normal; color:#8ceaa6; }
.portal .deal[data-s="hot"]{ background:linear-gradient(140deg, rgba(190,120,255,.32), rgba(120,60,230,.16)); border-color:rgba(220,170,255,.32); }
.portal .deal[data-s="hot"] small{ color:#e2c4ff; }
.portal .deal.is-flash{ box-shadow:0 0 0 3px rgba(140,234,166,.28), 0 0 22px rgba(94,224,138,.45); }
.dots{ display:inline-flex; gap:3px; }
.portal .dots i{ width:4px; height:4px; margin:0; border-radius:50%; background:#9ff0b6; animation:crmDot 1s ease-in-out infinite; }
.portal .dots i:nth-child(2){ animation-delay:.15s } .portal .dots i:nth-child(3){ animation-delay:.3s }
@keyframes crmDot{ 0%,100%{ opacity:.3; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-2px) } }
.lane__h span{ display:inline-block; font-variant-numeric:tabular-nums; }

/* иконки каналов */
.ic--tg{ background:linear-gradient(#37bbfe,#007dbb); }
.ic--wa{ background:linear-gradient(#5ffc7b,#28d146); }
.ic--call{ background:linear-gradient(#65dd70,#2fb548); }
.ic--site{ background:linear-gradient(135deg,#b07cff,#6b31d6); }
.ic--mail{ background:linear-gradient(#3ea8ff,#0a60ff); }
.ic--avito{ background:#fff; }

/* сияние в стиле Apple Intelligence по рамке портала */
.halo{
  position:absolute; z-index:1;
  left:calc(43% - 2px); top:calc(25% - 2px);
  width:calc(52% + 4px); height:calc(43% + 4px);
  border-radius:18px; padding:2px; overflow:hidden;
  opacity:.55; transition:opacity .6s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.halo::before{
  content:''; position:absolute; left:50%; top:50%;
  width:160%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(#bc82f3, #f5b9ea, #8d9fff, #aa6eee, #ff6778, #ffba71, #c686ff, #bc82f3);
  animation:haloSpin 6s linear infinite;
}
.halo--soft{
  padding:0; -webkit-mask:none; mask:none;
  left:calc(43% - 14px); top:calc(25% - 14px);
  width:calc(52% + 28px); height:calc(43% + 28px);
  border-radius:30px; filter:blur(26px); opacity:.28;
}
.halo--soft::before{ animation:none; }
.hero__card.is-flare .halo{ opacity:1; }
.hero__card.is-flare .halo--soft{ opacity:.7; }
@keyframes haloSpin{ to{ rotate:360deg } }

/* переливающийся фон под входящими */
.aurora{
  position:absolute; z-index:1; left:-6%; top:14%; width:52%; height:62%;
  pointer-events:none; opacity:.75;
}
.aurora i{
  position:absolute; width:62%; aspect-ratio:1; border-radius:50%;
  animation:auroraDrift 14s ease-in-out infinite alternate;
}
.aurora i:nth-child(1){ left:8%; top:4%; background:radial-gradient(closest-side, rgba(255,120,200,.42), transparent); }
.aurora i:nth-child(2){ left:38%; top:26%; background:radial-gradient(closest-side, rgba(110,150,255,.4), transparent); animation-duration:17s; animation-delay:-6s; }
.aurora i:nth-child(3){ left:14%; top:44%; background:radial-gradient(closest-side, rgba(255,186,113,.28), transparent); animation-duration:20s; animation-delay:-11s; }
@keyframes auroraDrift{
  0%{ transform:translate(0,0) scale(1) }
  50%{ transform:translate(12%,-8%) scale(1.15) }
  100%{ transform:translate(-8%,10%) scale(.92) }
}

/* уведомления: стекло как в iOS */
.inbox{
  position:absolute; z-index:2;
  left:var(--gutter); top:27%;
  width:min(31%, 390px);
  display:flex; flex-direction:column; gap:10px;
}
.inbox__cap{
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
  font-size:12.5px; letter-spacing:-.005em; color:rgba(255,255,255,.6);
}
.inbox__cap i{ width:6px; height:6px; border-radius:50%; background:#8d9fff; box-shadow:0 0 8px #8d9fff; animation:crmLive 1.6s ease-in-out infinite; }
.nt{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 32px rgba(12,2,40,.28);
  color:#fff;
}
.nt__ic{ flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; }
.nt__ic svg{ width:22px; height:22px; display:block; }
.nt__body{ flex:1; min-width:0; }
.nt__top{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
}
.nt__top b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nt__top time{ flex:none; font-size:12px; font-weight:400; color:rgba(255,255,255,.55); }
.nt p{
  margin:2px 0 0; font-size:13px; line-height:1.36; letter-spacing:-.005em;
  color:rgba(255,255,255,.84);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nt--fly{ position:absolute; z-index:5; margin:0; transform-origin:0 0; box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 30px rgba(170,160,255,.55); }

@media (prefers-reduced-motion: reduce){
  .halo::before,.aurora i,.portal .dots i{ animation:none; }
}

.dirs{
  /* выше hero__stage (z-index:4): секция накрывает первый экран, а не просвечивает под ним */
  position:relative; z-index:5;
  height:540vh;
  background:var(--paper);
}
.dirs__pin{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  display:grid; place-items:center;
}
.dirs__pin:not(.is-live) .ring-wrap,
.dirs__pin:not(.is-live) .marquee{ visibility:hidden; }
.marquee{
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  overflow:hidden; pointer-events:none;
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__set{
  display:flex; align-items:center; gap:44px; padding-right:44px;
  font-size:clamp(40px,5.4vw,80px);
  font-weight:400; letter-spacing:-.035em; line-height:1;
  white-space:nowrap; color:#0a0a0a;
}
.marquee__set em{ font-style:normal; }
.dot{
  display:inline-block; width:15px; height:15px; border-radius:50%;
  border:1.6px solid #0a0a0a; flex:none;
}

.ring-wrap{
  position:absolute; inset:7vh 0 0 0;
  display:grid; place-items:center;
  perspective:1600px;
}
.ring{
  position:relative;
  width:17vw; height:61vh;
  transform-style:preserve-3d;
  will-change:transform;
}
.tile{
  position:absolute; inset:0;
  border-radius:22px; overflow:hidden;
  transform:rotateY(calc(var(--i) * 90deg)) translateZ(22.5vw);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.34);
  padding:22px 20px;
  display:flex; flex-direction:column;
  color:#fff;
  transition:box-shadow .3s ease;
}
@media (hover:hover) and (pointer:fine){ .tile:hover{ box-shadow:0 18px 40px rgba(60,10,120,.45); } }
/* слой под арт плашки. --art выставляет скрипт и только если файл реально
   загрузился: нет файла — нет ни арта, ни затемнения, плашка как раньше. */
.tile__fig{
  position:absolute; left:0; right:0; top:0; height:52%;
  display:flex; align-items:center; justify-content:center;
  padding:42px 14px 0;
  pointer-events:none;
}
.tile__fig svg{ width:100%; height:100%; }
.tile > *:not(.tile__fig){ position:relative; }
.tile__no{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.tile__name{
  margin-top:auto;
  font-size:clamp(20px,2.05vw,30px);
  font-weight:500; letter-spacing:-.028em; line-height:1.08;
}
.tile__desc{
  margin-top:10px;
  font-size:clamp(11px,1.02vw,14.5px); line-height:1.5;
  color:rgba(255,255,255,.74); letter-spacing:-.008em;
}
.tile__list{
  margin-top:14px; display:flex; flex-direction:column; gap:5px;
  font-size:clamp(10px,.92vw,13px); color:rgba(255,255,255,.62);
}
.tile__list li::before{ content:"— "; opacity:.5; }
.tile__go{
  margin-top:16px; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:#fff;
  padding-top:12px; border-top:1px solid rgba(255,255,255,.18);
}
.tile__mark{
  position:absolute; right:18px; top:20px;
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.tile__mark svg{ width:17px; height:17px; fill:#fff; }

/* однотонные плашки: лёгкий градиент сверху вниз + мягкое свечение за фигурой */
.tile--b24{ background:radial-gradient(92% 46% at 50% 10%, rgba(124,92,255,.40), transparent 72%),
            linear-gradient(180deg,#2b1a63 0%,#1b0f42 56%,#120a2e 100%); }
.tile--ai{  background:radial-gradient(92% 46% at 50% 10%, rgba(200,142,255,.42), transparent 72%),
            linear-gradient(180deg,#42219c 0%,#2c1468 56%,#1c0c48 100%); }
.tile--proc{background:radial-gradient(92% 46% at 50% 10%, rgba(234,146,255,.40), transparent 72%),
            linear-gradient(180deg,#5c2196 0%,#3c1468 56%,#260d48 100%); }
.tile--sales{background:radial-gradient(92% 46% at 50% 10%, rgba(116,235,168,.34), transparent 72%),
             linear-gradient(180deg,#1c6b40 0%,#124228 56%,#0b2818 100%); }

/* ── анимации фигур на плашках ─────────────────────────────
   непрерывные живут, пока секция на экране (.is-live);
   входные проигрываются, когда плашка поворачивается лицом (.is-front, ставит JS) */
@keyframes tPop{ 0%{ transform:scale(0); opacity:0 } 60%{ opacity:1 } 100%{ transform:scale(1); opacity:1 } }
@keyframes tFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes tDraw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
@keyframes tBarUp{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes taSpin{ to{ transform:rotate(360deg) } }
@keyframes taPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.3) } }
@keyframes tbPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@keyframes tbFloat{ from{ transform:translateY(2.5px) } to{ transform:translateY(-2.5px) } }
@keyframes tbRise{ from{ transform:translateY(9px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

.tb-chip,.tb-plate,.ta-node,.ta-core,.tp-n,.ts-bar,.ts-dot,.ts-end{
  transform-box:fill-box; transform-origin:center;
}
.ts-bar{ transform-origin:center bottom; }
.ta-orbit{ transform-box:view-box; transform-origin:50% 47.8%; }

/* непрерывные */
.dirs__pin.is-live .tile.is-front .ta-orbit{ animation:taSpin 16s linear infinite; }
.dirs__pin.is-live .tile.is-front .ta-core{ animation:taPulse 2.8s ease-in-out infinite; }
.dirs__pin.is-live .tile.is-front .tb-dot{ animation:tbPulse 2.2s ease-in-out infinite; }
.dirs__pin.is-live .tile.is-front .tb-chip{ animation:tbFloat 4.5s ease-in-out infinite alternate; }
.dirs__pin.is-live .tile.is-front .tb-chip--b{ animation-delay:-2.2s; }

/* Битрикс24: подложка с логотипом поднимается */
.tile.is-front .tb-plate{ animation:tbRise .65s .1s cubic-bezier(.22,1,.36,1) both; }

/* Нейросети: узлы-лучи прорастают */
.tile.is-front .ta-node{ animation:tPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.tile.is-front .ta-n0{ animation-delay:.15s } .tile.is-front .ta-n1{ animation-delay:.3s }
.tile.is-front .ta-n2{ animation-delay:.45s } .tile.is-front .ta-n3{ animation-delay:.6s }

/* Процессы: узел → стрелка → узел, по шагам */
.tile.is-front .tp-n{ animation:tPop .35s cubic-bezier(.34,1.56,.64,1) both; }
.tile.is-front .tp-c{ stroke-dasharray:1; animation:tDraw .24s ease-out both; }
.tile.is-front .tp-a{ animation:tFade .2s ease both; }
.tile.is-front .tp-n0{ animation-delay:.05s }
.tile.is-front .tp-c0{ animation-delay:.35s } .tile.is-front .tp-a0{ animation-delay:.55s }
.tile.is-front .tp-n1{ animation-delay:.55s }
.tile.is-front .tp-c1{ animation-delay:.85s } .tile.is-front .tp-a1{ animation-delay:1.05s }
.tile.is-front .tp-n2{ animation-delay:1.05s }
.tile.is-front .tp-c2{ animation-delay:1.35s } .tile.is-front .tp-a2{ animation-delay:1.55s }
.tile.is-front .tp-n3{ animation-delay:1.55s }

/* Продажи: столбики → линия → точки-сделки → финальная точка → заливка */
.tile.is-front .ts-bar{ animation:tBarUp .45s cubic-bezier(.22,1,.36,1) both; }
.tile.is-front .ts-b0{ animation-delay:0s } .tile.is-front .ts-b1{ animation-delay:.06s }
.tile.is-front .ts-b2{ animation-delay:.12s } .tile.is-front .ts-b3{ animation-delay:.18s }
.tile.is-front .ts-b4{ animation-delay:.24s }
.tile.is-front .ts-line{ stroke-dasharray:1; animation:tDraw .9s .25s cubic-bezier(.4,0,.2,1) both; }
.tile.is-front .ts-dot{ animation:tPop .35s cubic-bezier(.34,1.56,.64,1) both; }
.tile.is-front .ts-d0{ animation-delay:.25s } .tile.is-front .ts-d1{ animation-delay:.44s }
.tile.is-front .ts-d2{ animation-delay:.62s } .tile.is-front .ts-d3{ animation-delay:.86s }
.tile.is-front .ts-end{ animation:tPop .4s 1.12s cubic-bezier(.34,1.56,.64,1) both; }
.tile.is-front .ts-area{ animation:tFade .55s .95s ease both; }

.dirs__btn{
  position:absolute; left:50%; bottom:5.2vh; transform:translateX(-50%);
  z-index:5;
}

/* заполнение сцены: заголовок, оглавление, цветное сияние под активное направление */
.dirs__glow i{
  position:absolute; left:50%; top:50%;
  width:86vmin; height:86vmin; margin:-43vmin 0 0 -43vmin; border-radius:50%;
  opacity:0; transition:opacity .9s ease; pointer-events:none;
}
.dirs__glow i:nth-child(1){ background:radial-gradient(closest-side, rgba(124,92,255,.42), transparent); }
.dirs__glow i:nth-child(2){ background:radial-gradient(closest-side, rgba(200,142,255,.44), transparent); }
.dirs__glow i:nth-child(3){ background:radial-gradient(closest-side, rgba(234,146,255,.42), transparent); }
.dirs__glow i:nth-child(4){ background:radial-gradient(closest-side, rgba(70,200,130,.38), transparent); }
.dirs__pin[data-front="0"] .dirs__glow i:nth-child(1),
.dirs__pin[data-front="1"] .dirs__glow i:nth-child(2),
.dirs__pin[data-front="2"] .dirs__glow i:nth-child(3),
.dirs__pin[data-front="3"] .dirs__glow i:nth-child(4){ opacity:1; }

.dirs__head{ position:absolute; z-index:3; left:var(--gutter); top:13vh; max-width:30vw; pointer-events:none; }
.dirs__eyebrow{ margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8e4bff; }
.dirs__head h2{
  margin:0; font-size:clamp(28px,2.9vw,46px); line-height:1.06;
  font-weight:600; letter-spacing:-.035em; color:#1d1d1f;
}
.dirs__head h2 span{ color:#86868b; }

.dirs__nav{ position:absolute; z-index:3; left:var(--gutter); bottom:7vh; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.dirs__nav a{
  display:flex; align-items:baseline; gap:12px;
  font-size:15px; font-weight:500; letter-spacing:-.01em; color:#a1a1a6; text-decoration:none;
  transition:color .35s ease;
}
.dirs__nav b{ font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; color:inherit; }
.dirs__nav a::before{
  content:""; align-self:center; width:18px; height:2px; border-radius:2px; background:currentColor;
  transform:scaleX(.35); transform-origin:left; transition:transform .45s cubic-bezier(.23,1,.32,1);
}
.dirs__pin[data-front="0"] .dirs__nav li:nth-child(1) a,
.dirs__pin[data-front="1"] .dirs__nav li:nth-child(2) a,
.dirs__pin[data-front="2"] .dirs__nav li:nth-child(3) a,
.dirs__pin[data-front="3"] .dirs__nav li:nth-child(4) a{ color:#1d1d1f; }
.dirs__pin[data-front="0"] .dirs__nav li:nth-child(1) a::before,
.dirs__pin[data-front="1"] .dirs__nav li:nth-child(2) a::before,
.dirs__pin[data-front="2"] .dirs__nav li:nth-child(3) a::before,
.dirs__pin[data-front="3"] .dirs__nav li:nth-child(4) a::before{ transform:none; }
@media (hover:hover) and (pointer:fine){ .dirs__nav a:hover{ color:#1d1d1f; } }

/* ═══════════════════ 3 · КОНВЕЙЕР (5 шагов, пин) ═══════════════════ */
/* наезжает поверх белой карусели: выше по слою и на 100vh внахлёст */
.pipe{ position:relative; z-index:6; margin-top:-100vh; height:360vh; background:#000; }
.pipe__pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.pipe__pin::before{
  content:""; position:absolute; right:-10vw; top:10vh; width:70vw; height:80vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(120,60,230,.28), transparent 70%);
  pointer-events:none;
}

.cv{
  position:absolute; inset:0;
  display:grid; grid-template-columns:minmax(0,36%) minmax(0,1fr); gap:5vw;
  align-items:start;
  padding:18vh var(--gutter) 6vh;
}
.cv__eyebrow{
  margin:0 0 18px; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:#b49cff;
}
.cv__title{
  margin:0; font-size:clamp(34px,3.7vw,58px); line-height:1.02;
  font-weight:500; letter-spacing:-.035em; color:#ece8f3;
}
.cv__title span{ color:rgba(236,232,243,.4); }

.cv__steps{
  --p:0;
  position:relative; list-style:none; margin:5.5vh 0 0; padding:0 0 0 24px;
}
.cv__steps::before,.cv__steps::after{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:2px;
  background:rgba(255,255,255,.1);
}
.cv__steps::after{
  background:linear-gradient(#8d9fff,#bc82f3,#ff6778);
  transform:scaleY(var(--p)); transform-origin:top;
}
.cv__steps li{ padding:9px 0; cursor:pointer; }
.cv__steps b{
  display:block; font-size:clamp(15px,1.25vw,18px); font-weight:500; letter-spacing:-.015em;
  color:rgba(255,255,255,.34); transition:color .35s ease;
}
.cv__steps span{
  display:grid; grid-template-rows:0fr; opacity:0;
  font-size:14px; line-height:1.5; color:rgba(255,255,255,.6); letter-spacing:-.005em;
  transition:grid-template-rows .45s cubic-bezier(.23,1,.32,1), opacity .35s ease, margin .45s cubic-bezier(.23,1,.32,1);
  overflow:hidden; max-width:44ch;
}
.cv__steps li.is-on b{ color:#fff; }
.cv__steps li.is-on span{ grid-template-rows:1fr; opacity:1; margin-top:6px; }
.cv__steps span > em{ min-height:0; overflow:hidden; font-style:normal; }
@media (hover:hover) and (pointer:fine){ .cv__steps li:not(.is-on):hover b{ color:rgba(255,255,255,.62); } }

/* окно портала */
.cv__stage{ position:relative; height:min(64vh, 560px); }
.cv__win{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  border-radius:22px;
  background:linear-gradient(155deg, rgba(30,18,60,.94), rgba(10,6,22,.96));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.cv__glow{
  position:absolute; inset:-4px; z-index:0; border-radius:26px;
  background:conic-gradient(#bc82f3, #f5b9ea, #8d9fff, #aa6eee, #ff6778, #ffba71, #c686ff, #bc82f3);
  filter:blur(22px); opacity:.12; transition:opacity .9s ease;
}
.cv__stage[data-step="5"] .cv__glow{ opacity:.85; }
.cv__bar{
  display:flex; align-items:center; gap:8px; height:48px; padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03);
}
.cv__crumb{ margin-left:8px; font-size:12px; color:rgba(255,255,255,.46); }
.cv__stepno{ margin-left:auto; font-size:12px; color:rgba(255,255,255,.4); font-variant-numeric:tabular-nums; }
.cv__stepno b{ color:#fff; font-weight:500; }

.scn{
  position:absolute; inset:48px 0 0; padding:6% 6.5%;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(18px) scale(.985); filter:blur(6px);
  transition:opacity .45s ease, transform .6s cubic-bezier(.23,1,.32,1), filter .45s ease;
  pointer-events:none;
}
.scn.is-on{ opacity:1; transform:none; filter:blur(0); }
/* элементы внутри сцены входят каскадом */
.scn [data-in]{
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.23,1,.32,1);
  transition-delay:calc(var(--i, 0) * 90ms + 120ms);
}
.scn.is-on [data-in]{ opacity:1; transform:none; }

/* 1 · карта процесса */
.scn--map{ --node-h:clamp(68px,6.2vw,88px); --gap:clamp(40px,4vw,58px); }
.scn::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:32px 32px; background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%);
}
.map__scan{
  position:absolute; top:0; bottom:0; left:-25%; width:22%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(188,130,243,.14) 70%, rgba(214,190,255,.5) 99%, transparent);
  opacity:0;
}
.scn.is-on .map__scan{ animation:mapScan 1.5s cubic-bezier(.55,0,.25,1) .15s both; }
@keyframes mapScan{ 0%{ left:-25%; opacity:1 } 85%{ opacity:1 } 100%{ left:105%; opacity:0 } }

.map{
  position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center;
}
.map__rail{
  position:absolute; left:10%; right:10%; top:50%; height:2px; margin-top:-1px;
}
.map__rail::before{
  content:""; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(90deg,#8d9fff,#bc82f3 45%,#ff6778 50%,rgba(255,103,120,.35) 56%,rgba(255,255,255,.14));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s cubic-bezier(.77,0,.175,1) .25s;
}
.scn.is-on .map__rail::before{ transform:scaleX(1); }
.map__dot{
  position:absolute; top:50%; left:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:#d6dcff; box-shadow:0 0 10px 2px rgba(141,159,255,.75);
  opacity:0;
}
.scn.is-on .map__dot{ animation:dotGo 4.8s linear calc(var(--d) * .6s + 1.3s) infinite; }
.scn.is-on .map__dot--lost{ animation-name:dotLost; }
@keyframes dotGo{
  0%{ left:0; opacity:0 } 4%{ opacity:1 } 96%{ opacity:1 } 100%{ left:100%; opacity:0 }
}
@keyframes dotLost{
  0%{ left:0; opacity:0; transform:none }
  4%{ opacity:1 }
  50%{ left:50%; transform:none; background:#d6dcff; box-shadow:0 0 10px 2px rgba(141,159,255,.75) }
  64%{ left:50%; transform:translateY(calc(var(--node-h) / 2 + var(--gap))); opacity:1;
       background:#ff6778; box-shadow:0 0 12px 3px rgba(255,103,120,.8) }
  74%,100%{ left:50%; transform:translateY(calc(var(--node-h) / 2 + var(--gap))); opacity:0;
       background:#ff6778; box-shadow:0 0 12px 3px rgba(255,103,120,.8) }
}

.map__node{
  position:relative; z-index:1; justify-self:center;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  height:var(--node-h); box-sizing:border-box; min-width:74%; padding:0 12px;
  border-radius:14px; text-align:center;
  background:linear-gradient(180deg,#22163f,#170f2c); border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.map__node span{ font-size:clamp(11px,.9vw,13px); color:rgba(239,234,247,.55); white-space:nowrap; }
.map__node b{
  font-size:clamp(19px,2vw,30px); font-weight:500; letter-spacing:-.02em; color:#f4f0fb;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.map__node--leak{ border-color:rgba(255,103,120,.75); box-shadow:0 0 0 4px rgba(255,103,120,.12), 0 0 36px rgba(255,103,120,.22); }
.map__node--leak b{ color:#ffb3bc; }
.map__node--leak em{
  position:absolute; top:-10px; right:-12px;
  padding:2px 8px; border-radius:99px; background:#ff6778; color:#2a0710;
  font-style:normal; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;
  box-shadow:0 4px 14px rgba(255,103,120,.45);
}
.scn.is-on .map__node--leak{ animation:leak 1.8s ease-in-out 1.2s infinite; }
@keyframes leak{
  0%,100%{ box-shadow:0 0 0 4px rgba(255,103,120,.12), 0 0 36px rgba(255,103,120,.22) }
  50%{ box-shadow:0 0 0 10px rgba(255,103,120,.04), 0 0 48px rgba(255,103,120,.32) }
}

.map__sub{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:var(--gap);
}
.map__sub span{
  grid-column:var(--c); grid-row:1; justify-self:center; position:relative;
  display:flex; flex-direction:column; gap:2px; text-align:center;
  padding:9px 14px; border-radius:12px; border:1px dashed rgba(255,255,255,.22);
  background:rgba(12,7,26,.7);
  font-size:11.5px; color:rgba(255,255,255,.45); white-space:nowrap;
}
.map__sub span b{ font-size:13.5px; font-weight:500; color:rgba(255,255,255,.78); }
.map__sub span::before{
  content:""; position:absolute; left:50%; bottom:100%; height:var(--gap);
  border-left:1px dashed rgba(255,255,255,.2);
}
.map__sub .is-leak{ border-color:rgba(255,103,120,.6); background:rgba(60,12,28,.55); color:#ff8b98; }
.map__sub .is-leak::before{ border-left-color:rgba(255,103,120,.55); }
.map__note{
  margin:clamp(28px,3vw,44px) auto 0; max-width:48ch; text-align:center;
  font-size:14px; line-height:1.5; color:rgba(255,255,255,.55);
}
.map__note b{ color:#fff; font-weight:500; }

/* 2 · библиотека блоков */
.lib{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.blk{
  position:relative; padding:14px 13px 13px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  font-size:clamp(11.5px,.95vw,13.5px); line-height:1.3; color:#e9e4f2;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .4s ease, transform .5s cubic-bezier(.23,1,.32,1), border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.blk i{ display:block; width:26px; height:26px; border-radius:8px; margin-bottom:12px; }
.blk:nth-child(1) i{ background:linear-gradient(135deg,#b07cff,#6b31d6); }
.blk:nth-child(3) i{ background:linear-gradient(135deg,#8d9fff,#4b5ee6); }
.blk:nth-child(4) i{ background:linear-gradient(135deg,#6fe3a6,#26a86a); }
.blk:nth-child(5) i{ background:linear-gradient(135deg,#ffd36b,#f59e0b); }
.blk:nth-child(7) i{ background:linear-gradient(135deg,#37bbfe,#007dbb); }
.scn.is-on .blk{ opacity:1; transform:none; }
.blk.is-pick{ transition-delay:calc(var(--k) * 140ms + 150ms); }
.scn.is-on .blk.is-pick{
  border-color:rgba(188,130,243,.55); background-color:rgba(142,75,255,.13);
  box-shadow:0 10px 30px -12px rgba(142,75,255,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
.blk.is-pick::after{
  content:"✓"; position:absolute; right:10px; top:10px;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#0b2a17; background:#5ee08a;
  opacity:0; transform:scale(.4);
  transition:opacity .25s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--k) * 140ms + 450ms);
}
.scn.is-on .blk.is-pick::after{ opacity:1; transform:none; }
.blk.is-new{
  border:1px dashed rgba(188,130,243,.4); background:rgba(142,75,255,.04); color:rgba(233,228,242,.72);
  transition-delay:950ms;
}
.blk.is-new i{ border:1.5px dashed rgba(188,130,243,.55); }
.blk.is-new em{
  display:block; margin-top:6px; font-style:normal; font-size:11px; color:#c7a6ff;
}
.lib__bar{ display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-top:7%; }
.lib__bar i{
  height:6px; border-radius:3px; background:rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.lib__bar i::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,#8d9fff,#bc82f3);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.23,1,.32,1) calc(var(--k) * 140ms + 450ms);
}
.scn.is-on .lib__bar i::before{ transform:scaleX(1); }
.lib__bar i.is-new::before{
  background:repeating-linear-gradient(-45deg, rgba(188,130,243,.55) 0 5px, rgba(188,130,243,.15) 5px 10px);
  background-size:200% 100%; transition-delay:1.1s;
}
.scn.is-on .lib__bar i.is-new::before{ animation:stripes 1.2s linear infinite; }
@keyframes stripes{ to{ background-position:-14px 0 } }
.lib__note{ margin:16px 0 0; font-size:14px; color:rgba(255,255,255,.6); }
.lib__note b{ color:#fff; font-weight:500; }
.lib__note span{ color:#c7a6ff; }

/* 3 · ИИ-агенты */
.log__head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.42);
}
.log__head em{ display:flex; align-items:center; gap:7px; font-style:normal; color:#9ff0b6; letter-spacing:.02em; text-transform:none; }
.log__head em i{ width:7px; height:7px; border-radius:50%; background:#5ee08a; box-shadow:0 0 10px #5ee08a; animation:crmLive 1.6s ease-in-out infinite; }
.log{ list-style:none; margin:0; padding:0; }
.log li{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:16px 4px;
  font-size:clamp(13px,1.1vw,15.5px); color:#e9e4f2; letter-spacing:-.01em;
}
.log__who{
  flex:none; min-width:118px; box-sizing:border-box; display:flex; align-items:center; gap:7px; padding:4px 10px 4px 5px; border-radius:99px;
  background:rgba(142,75,255,.16); border:1px solid rgba(188,130,243,.32);
  font-size:11.5px; color:#d9c4ff;
}
.log__who::before{
  content:""; width:16px; height:16px; border-radius:50%;
  background:conic-gradient(from 200deg,#8d9fff,#bc82f3,#ff6778,#ffba71,#8d9fff);
  box-shadow:0 0 10px rgba(188,130,243,.6);
}
.log__what{ flex:1; min-width:0; }
.log__what s{
  position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.08);
}
.log__what s::before{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,#8d9fff,#bc82f3,#ff6778);
  transform:scaleX(0); transform-origin:left;
}
.scn.is-on .log__what s::before{ animation:logBar 1.1s cubic-bezier(.33,0,.25,1) calc(var(--k) * .45s + .25s) both; }
@keyframes logBar{ to{ transform:scaleX(1) } }
.log b{
  font-size:clamp(20px,1.9vw,28px); font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:#fff; min-width:3.2ch; text-align:right;
}
.log u{
  flex:none; position:relative; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(188,130,243,.25); border-top-color:#bc82f3;
}
.scn.is-on .log u{ animation:spin .7s linear infinite, logDone .3s ease calc(var(--k) * .45s + 1.35s) forwards; }
.log u::after{
  content:"✓"; position:absolute; inset:-2px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#0b2a17; background:#5ee08a; text-decoration:none;
  opacity:0; transform:scale(.4); transition:none;
}
.scn.is-on .log u::after{ animation:logCheck .45s cubic-bezier(.34,1.56,.64,1) calc(var(--k) * .45s + 1.35s) forwards; }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes logDone{ to{ border-color:transparent; transform:none } }
@keyframes logCheck{ to{ opacity:1; transform:rotate(0) scale(1) } }
.log__note{ margin:18px 0 0; font-size:13px; color:rgba(255,255,255,.5); }

/* 4 · проверка человеком */
.qa__head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08); position:relative;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.42);
}
.qa__head::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,#5ee08a,#8d9fff); transform:scaleX(0); transform-origin:left;
  transition:transform 1.3s cubic-bezier(.45,0,.25,1) .4s;
}
.scn.is-on .qa__head::after{ transform:scaleX(1); }
.qa__head em{ font-style:normal; font-size:13px; letter-spacing:0; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
.qa__head em b{ color:#7ff0a6; font-weight:500; }
.qa__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.qa__list li{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  font-size:clamp(13px,1.1vw,15.5px); color:#e9e4f2;
  opacity:0; transform:translateY(8px); background-color:rgba(94,224,138,0);
  transition:opacity .35s ease, transform .5s cubic-bezier(.23,1,.32,1), background-color .5s ease;
  transition-delay:calc(var(--i, 0) * 280ms + 250ms);
}
.scn.is-on .qa__list li{ opacity:1; transform:none; background-color:rgba(94,224,138,.06); }
.qa__list li::before{
  content:"✓"; flex:none; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  color:transparent; border:1.5px solid rgba(255,255,255,.25); transform:scale(.8);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i, 0) * 280ms + 400ms);
}
.scn.is-on .qa__list li::before{ background-color:#5ee08a; border-color:#5ee08a; color:#0b2a17; transform:none; box-shadow:0 0 14px rgba(94,224,138,.45); }
.qa__who{
  position:relative; display:flex; align-items:center; gap:12px;
  margin-top:7%; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
}
.qa__who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:50% 12%; filter:grayscale(1); }
.qa__who b{ display:block; font-size:14.5px; font-weight:500; color:#fff; }
.qa__who span{ font-size:12.5px; color:rgba(255,255,255,.55); }
.qa__sign{ width:96px; height:32px; margin-left:auto; overflow:visible; }
.qa__sign path{
  fill:none; stroke:#d9c4ff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:260; stroke-dashoffset:260;
}
.scn.is-on .qa__sign path{ transition:stroke-dashoffset 1s cubic-bezier(.45,0,.25,1) 1.6s; stroke-dashoffset:0; }
.qa__stamp{
  margin-left:18px; padding:7px 14px; border-radius:10px;
  font-style:normal; font-size:14px; font-weight:600; letter-spacing:.02em;
  color:#7ff0a6; border:2px solid #5ee08a; box-shadow:0 0 0 0 rgba(94,224,138,.4);
  opacity:0; transform:rotate(-8deg) scale(1.6);
  transition:opacity .2s ease 2.5s, transform .35s cubic-bezier(.23,1,.32,1) 2.5s;
}
.scn.is-on .qa__stamp{ opacity:1; transform:rotate(-8deg) scale(1); animation:stampHit .7s ease-out 2.75s; }
@keyframes stampHit{ from{ box-shadow:0 0 0 0 rgba(94,224,138,.45) } to{ box-shadow:0 0 0 16px rgba(94,224,138,0) } }

/* 5 · запуск */
.go{ display:flex; flex-direction:column; gap:10%; }
.cmp{ display:flex; flex-direction:column; gap:26px; }
.cmp__row{ display:grid; grid-template-columns:52px 1fr; align-items:center; gap:14px; }
.cmp__k{ font-size:13px; color:rgba(255,255,255,.5); }
.cmp__bars{ display:flex; flex-direction:column; gap:8px; padding-right:96px; }
.cmp__bars i{
  position:relative; display:flex; align-items:center; height:34px; padding:0 14px; border-radius:10px;
  font-style:normal; font-size:12.5px; white-space:nowrap;
}
.cmp__mkt{ width:100%; background:rgba(255,255,255,.07); color:rgba(255,255,255,.45); }
.cmp__us{
  width:100%; color:#fff; font-weight:500;
  background:linear-gradient(90deg,#8d9fff,#bc82f3 60%,#ff6778);
  box-shadow:0 10px 30px -10px rgba(188,130,243,.7);
  transition:width 1.3s cubic-bezier(.65,0,.25,1) .6s;
}
.scn.is-on .cmp__us{ width:var(--w); }
.cmp__us b{
  position:absolute; left:calc(100% + 12px); font-size:clamp(17px,1.6vw,24px); font-weight:600; letter-spacing:-.02em;
  color:#fff; opacity:0; transform:translateX(-8px);
  transition:opacity .4s ease 1.7s, transform .5s cubic-bezier(.23,1,.32,1) 1.7s;
}
.scn.is-on .cmp__us b{ opacity:1; transform:none; }
.go__line{
  align-self:flex-start; margin:0; display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 12px; border-radius:99px; background:rgba(94,224,138,.08); border:1px solid rgba(94,224,138,.3);
  font-size:14px; color:#9ff0b6;
}
.go__line i{ position:relative; width:8px; height:8px; border-radius:50%; background:#5ee08a; box-shadow:0 0 10px #5ee08a; }
.go__line i::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #5ee08a;
  animation:ripple 1.8s ease-out infinite;
}
@keyframes ripple{ from{ transform:scale(.6); opacity:.9 } to{ transform:scale(2.4); opacity:0 } }

/* ═══════════════════════ 4 · КЕЙСЫ ═══════════════════════ */
.cases{ position:relative; z-index:2; background:#000; height:330vh; }
.cases::before{
  content:""; position:absolute; left:-10vw; top:-6vh;
  width:46vw; height:28vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(190,90,255,.5), rgba(190,90,255,0) 72%);
  pointer-events:none;
}
.cases__pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center;
}
.cases__track{ display:flex; gap:26px; padding:0 2.2vw; }
.case{
  position:relative; flex:none;
  width:62vw; height:82vh;
  border-radius:14px;
  overflow:hidden;
  color:#fff;
}
.case__bg{ position:absolute; inset:0; }
/* — кейсы: тематические сцены — */
.case__scene{ position:absolute; inset:0; overflow:hidden; }

/* Домодедово: ночная полоса */
.case--dmd .case__bg{
  background:
    radial-gradient(56% 42% at 78% 20%, rgba(90,180,255,.30), transparent 62%),
    radial-gradient(50% 45% at 18% 80%, rgba(60,110,255,.22), transparent 66%),
    linear-gradient(160deg,#04070f 0%,#0a1226 48%,#13224a 100%);
}
.dmd-run{
  position:absolute; left:-4%; right:-4%; top:31%;
  height:4px; transform:rotate(-7deg);
  background:repeating-linear-gradient(90deg, rgba(215,235,255,.75) 0 30px, transparent 30px 62px);
  border-radius:2px;
}
.dmd-lights{
  position:absolute; left:-4%; right:-4%;
  height:6px; transform:rotate(-7deg);
  background:radial-gradient(circle at 3px 3px, rgba(150,215,255,.9) 2.2px, transparent 3.2px);
  background-size:58px 6px;
}
.dmd-lights--a{ top:calc(31% - 34px); }
.dmd-lights--b{ top:calc(31% + 38px); }
.case.is-on .dmd-run{ animation:dmdRun 1.4s linear infinite; }
.case.is-on .dmd-lights{ animation:dmdRun 1.4s linear infinite, dmdBlink 2.8s ease-in-out infinite; }
@keyframes dmdRun{ to{ background-position-x:-62px } }
@keyframes dmdBlink{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.dmd-jet{ position:absolute; left:0; top:0; width:44px; opacity:0; }
.dmd-jet svg{ width:100%; height:auto; transform:rotate(48deg); }
.dmd-jet::before{
  content:""; position:absolute; top:54%; right:82%;
  width:150px; height:1.5px;
  background:linear-gradient(270deg, rgba(200,230,255,.7), transparent);
  transform:rotate(24deg); transform-origin:right center;
}
.case.is-on .dmd-jet{ animation:dmdJet 8.5s cubic-bezier(.3,.2,.6,.8) infinite; }
@keyframes dmdJet{
  0%{ transform:translate(-6vw,66vh); opacity:0 }
  10%{ opacity:1 }
  78%{ opacity:1 }
  100%{ transform:translate(64vw,-14vh); opacity:0 }
}

/* Wildberries: лента коробок и штабели */
.case--wb .case__bg{
  background:
    radial-gradient(60% 45% at 74% 24%, rgba(214,110,255,.36), transparent 62%),
    radial-gradient(52% 48% at 22% 82%, rgba(130,60,230,.34), transparent 66%),
    linear-gradient(160deg,#12061f 0%,#2a0d4e 52%,#421468 100%);
}
.wbx{
  position:relative; display:block;
  width:38px; height:30px; border-radius:6px; flex:none;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.30);
}
.wbx::before{
  content:""; position:absolute; left:0; right:0; top:9px;
  height:4px; background:rgba(255,255,255,.22);
}
.wbx::after{
  content:""; position:absolute; right:5px; bottom:4px;
  width:12px; height:7px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 3.5px);
}
.wb-line{
  position:absolute; left:0; right:0; top:33.5%;
  height:2px; background:rgba(255,255,255,.20);
}
.wb-flow{
  position:absolute; left:0; top:calc(33.5% - 32px);
  display:flex; width:max-content;
}
.wb-set{ display:flex; gap:46px; padding-right:46px; }
.case.is-on .wb-flow{ animation:wbFlow 12s linear infinite; }
@keyframes wbFlow{ to{ transform:translateX(-50%) } }
.wb-stacks{
  position:absolute; right:7%; bottom:47%;
  display:flex; align-items:flex-end; gap:14px;
}
.wb-stack{ display:flex; flex-direction:column; gap:5px; }
.wb-stack .wbx{
  opacity:0; transform:translateY(-26px) scale(.85);
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.case.is-on .wb-stack .wbx{ opacity:1; transform:none; }
.case.is-on .wb-stack .wbx:nth-child(1){ transition-delay:calc(var(--nd) + .10s) }
.case.is-on .wb-stack .wbx:nth-child(2){ transition-delay:calc(var(--nd) + .22s) }
.case.is-on .wb-stack .wbx:nth-child(3){ transition-delay:calc(var(--nd) + .34s) }
.case.is-on .wb-stack .wbx:nth-child(4){ transition-delay:calc(var(--nd) + .46s) }

/* Разные ниши: мозаика тегов */
.case--mix .case__bg{
  background:
    radial-gradient(56% 44% at 76% 22%, rgba(255,170,120,.20), transparent 62%),
    radial-gradient(52% 46% at 20% 78%, rgba(150,90,255,.26), transparent 64%),
    linear-gradient(160deg,#0a0912 0%,#161226 52%,#241a3c 100%);
}
/* мозаика ниш: диагональная волна подсветки в свободной зоне */
.mix-grid{
  position:absolute; left:6%; top:11%;
  display:grid; grid-template-columns:repeat(5,26px); gap:11px;
}
.mix-grid i{
  width:26px; height:26px; border-radius:8px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
}
.case.is-on .mix-grid i{ animation:mixWave 3.6s ease-in-out infinite; animation-delay:var(--wd); }
@keyframes mixWave{
  0%,42%,100%{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); transform:scale(1) }
  16%{ background:rgba(200,140,255,.34); border-color:rgba(220,180,255,.45); transform:scale(1.12) }
}
.mix-cloud{
  position:absolute; right:5%; top:9%; width:56%;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end;
}
.case.is-on .mix-cloud{ animation:cloudFloat 7s ease-in-out infinite alternate; }
@keyframes cloudFloat{ from{ transform:translateY(4px) } to{ transform:translateY(-5px) } }
.nchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:22px;
  font-size:14.5px; letter-spacing:-.01em; color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(.7);
  opacity:0;
  transition:transform .8s cubic-bezier(.22,1,.36,1) var(--dd), opacity .6s ease var(--dd);
}
.case.is-on .nchip{ transform:translate(0,0) rotate(0) scale(1); opacity:1; }
.nchip svg{ width:15px; height:15px; color:rgba(255,255,255,.8); flex:none; }

/* сборка контента карточки при выезде в центр */
.case__body > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.case.is-on .case__body > *{ opacity:1; transform:none; }
.case.is-on .case__name{ transition-delay:.05s }
.case.is-on .case__task{ transition-delay:.16s }
.case.is-on .case__nums{ transition-delay:.28s }

.case__in{ position:relative; }
.case__in{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:36px 36px 26px;
}
.case__meta{
  display:flex; align-items:center; gap:11px;
  font-size:15px; letter-spacing:-.01em; color:rgba(255,255,255,.92);
}
.case__meta i{ font-style:normal; color:rgba(255,255,255,.45); }
.case__tag{
  margin-left:auto; padding:5px 11px; border-radius:14px;
  font-size:12px; letter-spacing:-.005em;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.8);
}
.case__name{
  font-size:clamp(40px,5.4vw,80px);
  font-weight:400; letter-spacing:-.035em; line-height:1;
}
.case__task{
  margin-top:14px; max-width:44ch;
  font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.72);
}
.case__nums{ display:flex; gap:46px; margin-top:26px; }
.case__nums b{
  display:block; font-size:clamp(26px,2.9vw,42px); font-weight:500;
  letter-spacing:-.03em; color:#fff;
}
.case__nums b.na{ color:rgba(255,255,255,.3); }
.case__nums span{ display:block; margin-top:4px; font-size:13px; color:rgba(255,255,255,.58); }

/* ═══════════════════ 5 · ИНТЕГРАЦИИ (сетка Apple) ═══════════════════ */
.integr{
  position:relative; z-index:2;
  background:#f5f5f7; color:#1d1d1f;
  padding:16vh var(--gutter) 14vh;
}
.integr__in{ max-width:1240px; margin:0 auto; }
.integr__head{
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end;
  margin-bottom:56px;
}
.integr__head h2{
  margin:0; font-size:clamp(38px,4.6vw,72px); line-height:1.02;
  font-weight:600; letter-spacing:-.04em; color:#1d1d1f;
}
.integr__head p{ margin:0; max-width:40ch; font-size:clamp(16px,1.3vw,19px); line-height:1.5; color:#6e6e73; letter-spacing:-.01em; }

.bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.bt{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:28px; border-radius:28px;
  background:#fff;
  opacity:0; transform:translateY(28px) scale(.98);
  transition:opacity .7s cubic-bezier(.23,1,.32,1), transform .8s cubic-bezier(.23,1,.32,1), box-shadow .4s ease;
  transition-delay:calc(var(--i, 0) * 60ms);
}
.bt.is-in{ opacity:1; transform:none; }
@media (hover:hover) and (pointer:fine){
  .bt.is-in:hover{ transform:translateY(-3px); box-shadow:0 22px 44px rgba(0,0,0,.07); transition-delay:0s; }
}
.bt--hub{ grid-column:1 / span 6; grid-row:1 / span 2; background:radial-gradient(120% 90% at 50% 40%, #2a1463 0%, #120a2a 55%, #07040f 100%); color:#fff; }
.bt--1c{ grid-column:7 / span 3; }
.bt--call{ grid-column:10 / span 3; }
.bt--chat{ grid-column:7 / span 6; }
.bt--s{ grid-column:span 3; }
.bt--w{ grid-column:span 6; }

.bt h3{ margin:4px 0 0; font-size:clamp(19px,1.55vw,23px); font-weight:600; letter-spacing:-.025em; line-height:1.15; }
.bt__cat{ margin:18px 0 0; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:#8e4bff; }
.bt__txt{ margin:8px 0 0; font-size:15px; line-height:1.45; color:#6e6e73; letter-spacing:-.005em; }
.bt__row{ display:flex; gap:8px; }
.bt__foot{ margin-top:auto; }
.bt--hub .bt__txt{ color:rgba(255,255,255,.62); }

/* иконки-«приложения» */
.bi{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.bi svg{ width:22px; height:22px; display:block; }
.bi--1c{ background:linear-gradient(135deg,#ffd36b,#f5a623); }
.bi--call{ background:linear-gradient(135deg,#65dd70,#2fb548); }
.bi--tg{ background:linear-gradient(135deg,#37bbfe,#007dbb); }
.bi--wa{ background:linear-gradient(135deg,#5ffc7b,#28d146); }
.bi--site{ background:linear-gradient(135deg,#b07cff,#6b31d6); }
.bi--avito{ background:linear-gradient(135deg,#4cc3ff,#0077ff); }
.bi--mp{ background:linear-gradient(135deg,#ff6fb3,#a02bd6); }
.bi--pay{ background:linear-gradient(135deg,#1c1c1e,#3a3a3c); }
.bi--edo{ background:linear-gradient(135deg,#ff8a65,#e0452b); }
.bi--bi{ background:linear-gradient(135deg,#8d9fff,#4b5ee6); }

/* хаб: каналы стекаются в Битрикс24 */
.hub{ position:relative; flex:1; min-height:320px; --R:150px; }
.hub__sp,.hub__n,.hub__core{ position:absolute; left:50%; top:50%; }
.hub__sp{
  width:var(--R); height:1px; transform-origin:0 50%; transform:rotate(var(--a));
  background:linear-gradient(90deg, rgba(188,130,243,.55), rgba(255,255,255,.07));
}
.hub__sp i{
  position:absolute; left:0; top:-2px; width:5px; height:5px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px #d9b8ff; opacity:0;
  animation:hubFlow 3.6s cubic-bezier(.55,0,.45,1) infinite; animation-delay:var(--d);
}
@keyframes hubFlow{
  0%{ transform:translateX(var(--R)); opacity:0 }
  10%{ opacity:1 }
  55%{ transform:translateX(0); opacity:1 }
  60%,100%{ transform:translateX(0); opacity:0 }
}
.hub__n{ transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))); }
.hub__n .bi{ width:46px; height:46px; box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.hub__core{
  transform:translate(-50%,-50%);
  width:clamp(104px,11vw,140px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  font-size:clamp(14px,1.2vw,17px); font-weight:600; letter-spacing:-.02em; color:#fff;
  background:radial-gradient(60% 60% at 38% 30%, rgba(255,255,255,.28), transparent 62%), radial-gradient(90% 90% at 50% 62%, #8e4bff 0%, #4a22b0 60%, #22105a 100%);
  border:1px solid rgba(220,190,255,.45);
  box-shadow:0 0 50px rgba(142,75,255,.55);
  animation:hubCore 1.8s ease-in-out infinite;
}
@keyframes hubCore{ 0%,100%{ box-shadow:0 0 44px rgba(142,75,255,.45) } 50%{ box-shadow:0 0 70px rgba(170,110,255,.75) } }

/* 1С: счёт уходит в учёт */
.sync{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; color:#1d1d1f;
}
.sync__doc{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sync__st{ position:relative; flex:none; width:86px; height:26px; }
.sync__st em{
  position:absolute; inset:0; display:grid; place-items:center; border-radius:99px;
  font-style:normal; font-size:12px; font-weight:600;
}
.sync__a{ background:#f2f2f7; color:#8e8e93; animation:syncA 4s ease infinite; }
.sync__b{ background:#e3f9e9; color:#1f9d4d; animation:syncB 4s ease infinite; }
@keyframes syncA{ 0%,40%{ opacity:1 } 50%,90%{ opacity:0 } 100%{ opacity:1 } }
@keyframes syncB{ 0%,40%{ opacity:0; transform:scale(.9) } 50%,90%{ opacity:1; transform:none } 100%{ opacity:0 } }

/* телефония: дорожка звонка */
.wave{ margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:3px; height:62px; }
.wave i{
  flex:1; height:100%; border-radius:3px; background:linear-gradient(#5ee08a,#2fb548);
  transform:scaleY(var(--h)); animation:wave 1.1s ease-in-out infinite alternate; animation-delay:var(--d);
}
@keyframes wave{ from{ transform:scaleY(calc(var(--h) * .25)) } to{ transform:scaleY(var(--h)) } }

/* мессенджеры: переписка в сделке */
.chat{ margin-top:auto; padding-top:18px; display:flex; flex-direction:column; gap:8px; }
.chat__m,.chat__sys{ opacity:0; animation:chatIn 7s cubic-bezier(.23,1,.32,1) infinite; }
.chat__m{ max-width:78%; padding:9px 14px; border-radius:18px; font-size:14px; line-height:1.35; }
.chat__m--in{ align-self:flex-start; background:#e9e9eb; color:#1d1d1f; border-bottom-left-radius:6px; }
.chat__m--out{ align-self:flex-end; background:#0a84ff; color:#fff; border-bottom-right-radius:6px; animation-delay:.9s; }
.chat__sys{ align-self:center; padding:5px 12px; border-radius:99px; background:#e3f9e9; color:#1f9d4d; font-size:12px; font-weight:600; animation-delay:1.8s; }
@keyframes chatIn{
  0%{ opacity:0; transform:translateY(8px) scale(.97) }
  7%,80%{ opacity:1; transform:none }
  90%,100%{ opacity:0; transform:none }
}

/* ЭДО */
.doc{
  margin-top:auto; padding:14px 16px; margin-top:22px; border-radius:16px; background:#f5f5f7;
  display:flex; align-items:center; justify-content:space-between; font-size:14px;
}
.doc em{ font-style:normal; font-size:12.5px; font-weight:600; color:#1f9d4d; animation:docIn 5s ease infinite; }
@keyframes docIn{ 0%,30%{ opacity:0; transform:scale(1.25) } 38%,90%{ opacity:1; transform:none } 100%{ opacity:0 } }

/* аналитика: каналы по деньгам */
.chan{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.chan li{ display:grid; grid-template-columns:76px 1fr; align-items:center; gap:10px; font-size:13px; color:#6e6e73; }
.chan b{ font-weight:500; }
.chan i{
  height:8px; border-radius:4px; background:linear-gradient(90deg,#8d9fff,#bc82f3);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.23,1,.32,1) .4s;
}
.bt.is-in .chan i{ transform:scaleX(var(--w)); }

/* бесконечные циклы — только пока секция на экране */
.integr:not(.is-live) *{ animation-play-state:paused !important; }

/* ═══════════════════ 6 · ТАРИФЫ (пролёт карточек) ═══════════════════ */
/* ═══════════════════ 6 · ОСНОВАТЕЛЬ И ПАРТНЁРСТВО ═══════════════════ */
.founder{ position:relative; z-index:2; background:#05030c; padding:15vh var(--gutter) 16vh; overflow:hidden; }
.founder__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(56% 42% at 82% 100%, rgba(190,110,255,.26), transparent 70%),
    radial-gradient(44% 40% at 12% 0%, rgba(90,50,200,.2), transparent 66%);
}
.founder__in{
  position:relative; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.35fr .65fr; gap:56px; align-items:center;
}
.founder__person{ display:flex; gap:40px; align-items:center; }
.founder__ava{
  position:relative; flex:none;
  width:230px; height:280px; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(160,90,255,.5), transparent 70%),
    linear-gradient(170deg,#241247 0%,#120a26 100%);
  border:1px solid rgba(255,255,255,.14);
  display:grid; place-items:end center;
}
.founder__ava img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 12%;
  filter:grayscale(1) contrast(1.04);
}
.founder__eyebrow{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.founder__name{
  margin-top:12px; font-size:clamp(30px,3.4vw,50px); font-weight:500;
  letter-spacing:-.03em; color:#efecf5;
}
.founder__role{ margin-top:8px; font-size:15.5px; color:rgba(255,255,255,.58); }
.founder__facts{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.founder__facts li{ display:flex; gap:14px; align-items:baseline; }
.founder__facts b{
  flex:none; min-width:172px;
  font-size:16.5px; font-weight:500; letter-spacing:-.015em; color:#fff;
}
.founder__facts span{ font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.55); }

.founder__cert{ display:flex; justify-content:flex-end; }
.cert{
  position:relative; width:min(400px,100%); margin:0;
  transform:rotate(1.6deg);
}
.cert img{
  width:100%; border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(20,5,60,.55);
}
.cert figcaption{
  margin-top:14px; text-align:center;
  font-size:12.5px; color:rgba(255,255,255,.5);
}

.cta{ position:relative; z-index:2; height:100vh; background:#000; padding:var(--inset); }
.cta__card{
  position:relative; width:100%; height:100%;
  border-radius:var(--radius); overflow:hidden;
  background:
    radial-gradient(96% 66% at 46% 112%,
      #ffc9ff 0%, #e18cfd 8%, #b164f4 18%, #7a3ade 32%,
      #401f9c 52%, rgba(24,11,58,0) 76%),
    linear-gradient(176deg, #0a0518 0%, #170b3c 30%, #2c1874 66%, #4a25aa 100%);
}
.cta__glow{
  position:absolute; inset:0;
  background:radial-gradient(46% 26% at 44% 100%, rgba(255,214,255,.42), rgba(255,206,255,0) 70%);
}
#gl-star{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cta__copy{
  position:absolute; left:var(--gutter); top:46%;
  transform:translateY(-50%);
  z-index:3; max-width:38%;
}
.cta__copy h2{
  display:flex; flex-direction:column;
  font-size:clamp(38px,5.4vw,80px);
  font-weight:500; line-height:1.03; letter-spacing:-.035em;
}
.cta__copy h2 .l1{ color:#e9e5ef; }
.cta__copy h2 .l2{ color:rgba(233,229,239,.42); }
.cta__copy p{
  margin:22px 0 30px;
  font-size:clamp(13px,1.06vw,15.6px); line-height:1.72;
  color:rgba(255,255,255,.72); max-width:32ch;
}
.cta__row{ display:flex; align-items:center; gap:16px; }
.cta__row small{ font-size:13px; color:rgba(255,255,255,.5); }

/* ═══════════════════════ ПОДВАЛ ═══════════════════════ */
.foot{
  position:relative; z-index:2;
  background:#08070c; color:#e7e5ee;
  padding:70px var(--gutter) 40px;
}
.foot__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.09);
}
.foot__brand b{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.foot__brand p{ margin-top:12px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.5); max-width:34ch; }
.foot h4{ font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.38); font-weight:500; }
.foot ul{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.foot ul a{ font-size:14.5px; color:rgba(255,255,255,.74); letter-spacing:-.01em; }
.foot ul a:hover{ color:#fff; }
.foot__bot{
  display:flex; justify-content:space-between; gap:20px;
  padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.36);
}

/* ═══════════════ ВНУТРЕННИЕ СТРАНИЦЫ ═══════════════ */
.sub{ padding:var(--inset); background:var(--paper); }
.sub__hero{
  position:relative; min-height:76vh;
  border-radius:var(--radius); overflow:hidden;
  padding:20vh var(--gutter) 7vh;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.sub__eyebrow{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.sub__hero h1{
  margin-top:16px; max-width:17ch;
  font-size:clamp(38px,5.4vw,82px); font-weight:500;
  letter-spacing:-.035em; line-height:1.02; color:#efecf5;
}
.sub__hero p{
  margin-top:22px; max-width:52ch;
  font-size:clamp(14px,1.14vw,17px); line-height:1.68; color:var(--dim);
}
.sub__actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.sub__stats{
  display:flex; gap:44px; margin-top:44px; padding-top:26px;
  border-top:1px solid var(--line);
}

.wrap{ max-width:1280px; margin:0 auto; padding:0 4vw; }
.sec{ padding:108px 0; }
.sec:not(.sec--dark){ background:#f5f5f7; }
.sec--dark{ background:#08070c; color:#eeecf3; }
.sec__h{
  font-size:clamp(30px,3.6vw,54px); font-weight:600;
  letter-spacing:-.04em; line-height:1.05;
}
.sec__sub{ margin-top:16px; max-width:62ch; font-size:16.5px; line-height:1.68; color:#6d6a78; }
.sec--dark .sec__sub{ color:rgba(255,255,255,.55); }

.prods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:44px; }
.prod{
  display:flex; flex-direction:column;
  padding:28px 28px 24px;
  border-radius:24px; border:1px solid transparent;
  background:#fff;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s;
}
@media (hover:hover) and (pointer:fine){ .prod:hover{ transform:translateY(-3px); box-shadow:0 20px 50px rgba(30,10,70,.10); border-color:#d8d3e6; } }
.sec--dark .prod{ background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.09); }
@media (hover:hover) and (pointer:fine){ .sec--dark .prod:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); } }
.prod__t{ font-size:21px; font-weight:600; letter-spacing:-.028em; color:#1d1d1f; }
.prod__for{ margin-top:9px; font-size:14.5px; line-height:1.55; color:#77748a; }
.sec--dark .prod__for{ color:rgba(255,255,255,.55); }
.prod__meta{
  margin-top:auto; padding-top:20px; display:flex; align-items:baseline; gap:16px;
  font-size:14px; color:#8a8798;
}
.prod__meta b{ font-size:19px; font-weight:600; color:#1d1d1f; letter-spacing:-.025em; }
.sec--dark .prod__meta b{ color:#fff; }
.sec--dark .prod__meta{ color:rgba(255,255,255,.45); }
.prod__go{ margin-left:auto; font-size:14px; color:#6f3ae0; }
.sec--dark .prod__go{ color:#c3a4ff; }

.steps{ counter-reset:s; margin-top:44px; display:grid; gap:1px; background:#e8e6ee; border-radius:16px; overflow:hidden; }
.sec--dark .steps{ background:rgba(255,255,255,.09); }
.step{ background:#fff; padding:26px 28px; display:grid; grid-template-columns:56px 1fr 150px; gap:20px; align-items:baseline; }
.sec--dark .step{ background:#08070c; }
.step::before{ counter-increment:s; content:"0" counter(s); font-size:13px; color:#a8a5b6; }
.step b{ font-size:18px; font-weight:500; letter-spacing:-.02em; }
.step p{ grid-column:2; margin-top:7px; font-size:15px; line-height:1.6; color:#77748a; }
.sec--dark .step p{ color:rgba(255,255,255,.55); }
.step span{ font-size:14px; color:#8a8798; text-align:right; }

.band{
  margin-top:0; border-radius:var(--radius); overflow:hidden;
  padding:64px 6% 60px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.band h3{ font-size:clamp(24px,2.7vw,38px); font-weight:400; letter-spacing:-.03em; line-height:1.1; max-width:22ch; }
.band p{ margin-top:14px; font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.66); max-width:46ch; }

/* ═══════════════════════ АДАПТИВ ═══════════════════════ */
/* ═══════════════ ВНУТРЕННИЕ СТРАНИЦЫ: пакет «Сбалансированный» ═══════════════ */
:root{ --dir:#8e4bff; --dir-glow:rgba(142,75,255,.5); }

/* нить направления под меню и точка у активного пункта */
.nav__progress{
  position:fixed; z-index:101; left:0; top:0; height:2px; width:100%;
  background:var(--dir); transform-origin:left; transform:scaleX(0);
  opacity:.9; pointer-events:none;
}
.nav__link[aria-current]{ position:relative; }
.nav__link[aria-current]::before{
  content:""; position:absolute; left:7px; top:50%; margin-top:-2px;
  width:5px; height:5px; border-radius:50%; background:var(--dir);
}
.nav__link[aria-current]{ padding-left:19px; }
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .32s ease both; }
::view-transition-new(root){ animation:vtIn .42s ease both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(12px) } }

/* — обложка: «Было → Станет» — */
.sub__hero{ padding-right:46%; }
.sub__eyebrow{ position:relative; display:inline-block; padding-bottom:6px; }
.sub__eyebrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:rgba(255,255,255,.55); transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .3s;
}
.sub__hero.is-in .sub__eyebrow::after{ transform:scaleX(1); }
.sub__hero h1 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.sub__hero h1 .w > span{ display:inline-block; transform:translateY(108%); transition:transform .9s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i) * 70ms); }
.sub__hero.is-in h1 .w > span{ transform:none; }



/* — продукты: веер, наклон, свечение, полоска срока — */
.prods{ perspective:1400px; }
.prod{
  position:relative; transform-style:preserve-3d;
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s;
}
.prod::before{
  content:""; position:absolute; inset:-1px; border-radius:25px; padding:1px;
  background:radial-gradient(220px circle at var(--mx) var(--my), var(--dir), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){ .prod:hover::before{ opacity:.9; } }
@media (hover:hover) and (pointer:fine){ .prod:hover{ transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px); } }
.prod__meta{ position:relative; }
.prod__meta > span:first-child{ position:relative; padding-bottom:6px; }
.prod__meta > span:first-child::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; border-radius:1px;
  width:calc(var(--w, .3) * 100%); min-width:10px; max-width:100%;
  background:var(--dir); opacity:.85;
  transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.22,1,.36,1) .2s;
}
.prod.is-in .prod__meta > span:first-child::after{ transform:scaleX(1); }

/* — конвейер этапов — */
.conv{ position:relative; margin-top:44px; }
.conv__pin{ position:relative; display:grid; grid-template-columns:46px 1fr 1fr; gap:0 28px; min-height:78vh; align-items:center; }
.conv__rail{ position:relative; width:2px; height:100%; min-height:60vh; margin:0 auto; background:rgba(255,255,255,.12); border-radius:1px; }
.conv__bead{
  position:absolute; left:50%; top:0; width:14px; height:14px; margin-left:-7px; margin-top:-7px; border-radius:50%;
  background:var(--dir); box-shadow:0 0 0 6px color-mix(in srgb, var(--dir) 22%, transparent), 0 0 24px var(--dir-glow);
}
.conv .steps{ margin-top:0; display:flex; flex-direction:column; gap:10px; background:none; border-radius:0; overflow:visible; counter-reset:s; }
.conv .step{
  padding:15px 20px; grid-template-columns:40px 1fr 104px; gap:14px;
  border-radius:14px; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035) !important;
  transform:translateX(-8px) scale(.97); opacity:.45;
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .5s ease, border-color .4s, background .4s;
}
.conv .step.is-active{
  transform:none; opacity:1; border-color:color-mix(in srgb, var(--dir) 55%, transparent);
  background:rgba(255,255,255,.06) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--dir) 25%, transparent) inset;
}
.conv .step::before{ font-size:19px; font-weight:500; color:rgba(255,255,255,.18); letter-spacing:-.02em; }
.conv .step b{ font-size:16.5px; }
.conv .step p{ margin-top:5px; font-size:13.5px; line-height:1.5; }
.conv .step span{ font-size:13px; }
.conv .step.is-active::before{ color:var(--dir); }

.conv__stage{ position:relative; min-height:380px; }
.cs{
  position:absolute; inset:0; padding:26px 26px 22px; border-radius:18px;
  background:linear-gradient(160deg, rgba(26,16,48,.92), rgba(10,6,22,.96));
  border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.45);
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; gap:16px; color:#fff;
}
.cs.is-on{ opacity:1; transform:none; }
.cs__t{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:10px; }
.cs__note{ margin-top:auto; font-size:13px; color:rgba(255,255,255,.55); }
.cs svg{ width:100%; height:auto; }
/* 1 · диагностика: воронка прорисовывается, точки потерь вспыхивают */
.fb{ fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.45); stroke-width:1.2; transform-box:fill-box; transform-origin:left center; transform:scaleX(0); }
.cs.is-on .fb{ animation:csFun .7s cubic-bezier(.22,1,.36,1) both; }
.cs.is-on .fb:nth-child(2){ animation-delay:.15s } .cs.is-on .fb:nth-child(3){ animation-delay:.3s } .cs.is-on .fb:nth-child(4){ animation-delay:.45s }
@keyframes csFun{ to{ transform:scaleX(1) } }
.cs-leak circle{ fill:#ff6b6b; opacity:0; transform-box:fill-box; transform-origin:center; }
.cs.is-on .cs-leak circle{ animation:tPop .4s .9s cubic-bezier(.34,1.56,.64,1) both, crmLive 1.8s 1.4s ease-in-out infinite; }
.cs.is-on .cs-leak circle:nth-child(2){ animation-delay:1.05s,1.5s } .cs.is-on .cs-leak circle:nth-child(3){ animation-delay:1.2s,1.6s }
/* 2 · аудит: карта потерь */
.cs-bars{ display:flex; flex-direction:column; gap:12px; }
.cs-bars li{ display:grid; grid-template-columns:150px 1fr; align-items:center; gap:12px; font-size:13px; color:rgba(255,255,255,.75); }
.cs-bars i{ display:block; height:10px; border-radius:5px; background:linear-gradient(90deg, var(--dir), #ff6b6b); width:calc(var(--w) * 100%); transform:scaleX(0); transform-origin:left; }
.cs.is-on .cs-bars i{ animation:csFun .8s cubic-bezier(.22,1,.36,1) both; }
.cs.is-on .cs-bars li:nth-child(2) i{ animation-delay:.12s } .cs.is-on .cs-bars li:nth-child(3) i{ animation-delay:.24s }
.cs.is-on .cs-bars li:nth-child(4) i{ animation-delay:.36s } .cs.is-on .cs-bars li:nth-child(5) i{ animation-delay:.48s }
/* 3 · сборка: мини-канбан, сделка переезжает, штамп демо */
.cs-kan{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cs-lane{ display:flex; flex-direction:column; gap:7px; }
.cs-lane b{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:500; }
.cs.is-on .cs-out{ animation:crmOut 7s ease-in-out infinite; }
.cs.is-on .cs-recv{ animation:crmRecv 7s ease-in-out infinite; }
.cs.is-on .deal--ai i:first-child{ animation:crmType 2.6s ease-in-out infinite alternate; }
.cs-stamp{
  align-self:flex-end; margin-top:auto; padding:7px 12px; border-radius:9px;
  font-size:12.5px; font-weight:500; color:#7ff0a6; border:1.5px solid #5ee08a;
  transform:rotate(-6deg) scale(.6); opacity:0;
}
.cs.is-on .cs-stamp{ animation:tPop .45s 1.3s cubic-bezier(.34,1.56,.64,1) both; }
/* 4 · передача: чек-лист */
.cs-check{ display:flex; flex-direction:column; gap:12px; }
.cs-check li{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); font-size:14px; }
.cs-check i{ width:20px; height:20px; border-radius:6px; border:1px solid rgba(255,255,255,.3); position:relative; flex:none; }
.cs-check i::after{ content:""; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid #7ff0a6; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transform-origin:center; }
.cs.is-on .cs-check i::after{ animation:csCheck .35s cubic-bezier(.34,1.56,.64,1) both; }
.cs.is-on .cs-check li:nth-child(1) i::after{ animation-delay:.3s } .cs.is-on .cs-check li:nth-child(2) i::after{ animation-delay:.7s }
.cs.is-on .cs-check li:nth-child(3) i::after{ animation-delay:1.1s } .cs.is-on .cs-check li:nth-child(4) i::after{ animation-delay:1.5s }
@keyframes csCheck{ to{ transform:rotate(45deg) scale(1) } }
.cs.is-on .cs-check i{ transition:background .3s, border-color .3s; }
/* 5 · сопровождение: live и график */
.cs-live{ display:inline-flex; align-items:center; gap:6px; font-style:normal; color:#7ff0a6; }
.cs-live i{ width:7px; height:7px; border-radius:50%; background:#5ee08a; }
.cs.is-on .cs-live i{ animation:crmLive 2s ease-in-out infinite; }
.cs-line{ stroke:#eafff2; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.cs.is-on .cs-line{ animation:tDraw 1.2s .2s cubic-bezier(.4,0,.2,1) both; }
.cs-dot{ fill:#fff; opacity:0; transform-box:fill-box; transform-origin:center; }
.cs.is-on .cs-dot{ animation:tPop .4s 1.3s cubic-bezier(.34,1.56,.64,1) both; }

/* — CTA-полоса: циферблат и план — */
.band{ display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:36px; }
.band__clock svg{ width:120px; height:120px; }
.band__arc{ stroke-dasharray:1; stroke-dashoffset:1; }
.band.is-in .band__arc{ animation:tDraw 2.4s .2s cubic-bezier(.4,0,.2,1) both; }
.band__plan{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.band__plan li{ font-size:14.5px; color:rgba(255,255,255,.78); opacity:0; transform:translateX(-8px); transition:opacity .5s, transform .6s cubic-bezier(.22,1,.36,1); }
.band.is-in .band__plan li{ opacity:1; transform:none; }
.band.is-in .band__plan li:nth-child(1){ transition-delay:.6s } .band.is-in .band__plan li:nth-child(2){ transition-delay:1.3s } .band.is-in .band__plan li:nth-child(3){ transition-delay:2s }
.band__btn{ will-change:transform; }


/* ═══════════════ СТРАНИЦЫ НАПРАВЛЕНИЙ: обложка, сцены, цены (23.09) ═══════════════ */
main[data-dir="b24"]{ --a1:rgba(120,160,255,.55); --a2:rgba(160,110,255,.5); --a3:rgba(90,210,255,.35); --g1:#b4ccff; --g2:#c9a8ff; }
main[data-dir="ai"]{ --a1:rgba(255,120,200,.5); --a2:rgba(141,159,255,.5); --a3:rgba(255,186,113,.35); --g1:#8d9fff; --g2:#ff6778; }
main[data-dir="proc"]{ --a1:rgba(255,140,210,.5); --a2:rgba(185,140,255,.45); --a3:rgba(255,190,240,.3); --g1:#ffb3e6; --g2:#b98cff; }
main[data-dir="sales"]{ --a1:rgba(94,224,138,.45); --a2:rgba(60,200,200,.35); --a3:rgba(200,255,150,.3); --g1:#a6ffc9; --g2:#3ec38a; }

/* сияние обложки */
.sub__aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.sub__aurora i{ position:absolute; width:58%; aspect-ratio:1; border-radius:50%; animation:auroraDrift 16s ease-in-out infinite alternate; }
.sub__aurora i:nth-child(1){ left:-8%; top:-18%; background:radial-gradient(closest-side, var(--a1), transparent); }
.sub__aurora i:nth-child(2){ right:-6%; top:6%; background:radial-gradient(closest-side, var(--a2), transparent); animation-duration:19s; animation-delay:-7s; }
.sub__aurora i:nth-child(3){ left:30%; bottom:-30%; background:radial-gradient(closest-side, var(--a3), transparent); animation-duration:22s; animation-delay:-12s; }
.sub__hero > :not(.sub__aurora):not(.viz){ position:relative; z-index:1; }
.sub__hero:not(.is-live) *{ animation-play-state:paused !important; }

/* заголовок: акцентная фраза — свой шрифт у каждой страницы */
.sub__hero h1{ font-weight:600; letter-spacing:-.04em; }
.sub__hero h1 .w--acc{ padding-right:.1em; margin-right:-.1em; }
main[data-dir="b24"] .sub__hero h1 .w--acc > span{
  font-family:ui-serif,"New York","Iowan Old Style",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.025em;
  background:linear-gradient(90deg,var(--g1),var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
main[data-dir="ai"] .sub__hero h1 .w--acc > span{
  background:linear-gradient(90deg,#8d9fff,#bc82f3,#ff6778,#ffba71,#8d9fff); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{ to{ background-position:-300% 0 } }
main[data-dir="proc"] .sub__hero h1 .w--acc > span{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-weight:500; letter-spacing:-.1em; color:#ffb3e6;
}
main[data-dir="proc"] .sub__hero h1 .w--acc:last-child > span::after{
  content:""; display:inline-block; width:.09em; height:.86em; margin-left:.08em; vertical-align:-.06em;
  background:currentColor; animation:caret 1.05s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }
main[data-dir="sales"] .sub__hero h1 .w--acc > span{
  font-family:ui-rounded,"SF Pro Rounded",var(--font); font-weight:700;
  background:linear-gradient(90deg,var(--g1),var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* сцена справа — общая рамка */
.viz{ position:absolute; z-index:2; right:4.5%; top:50%; width:40%; max-width:540px; transform:translateY(-50%); }
.viz__win{
  border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, rgba(26,16,54,.9), rgba(9,5,22,.94));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.viz__bar{ display:flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.viz__bar i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); }
.viz__bar span{ margin-left:8px; font-size:11.5px; color:rgba(255,255,255,.5); }
.viz__cap{ margin-top:16px; text-align:center; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.72); }
.viz__cap b{ color:#fff; font-weight:600; }
.viz__cap i{ font-style:normal; color:var(--g1); margin:0 4px; }

/* Битрикс24: хаос → воронка */
.kb{ position:relative; aspect-ratio:1/.74; }
.kb__h{
  position:absolute; left:0; right:0; top:4%; display:grid; grid-template-columns:repeat(3,1fr); padding:0 2%;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.45);
  animation:kbH 9s ease-in-out infinite;
}
.kb__h span{ padding-left:4%; }
@keyframes kbH{ 0%,22%{ opacity:0 } 32%,72%{ opacity:1 } 82%,100%{ opacity:0 } }
.kc{
  position:absolute; left:0; top:0; width:30%; height:15%; border-radius:10px;
  font-size:clamp(10px,.82vw,12px); line-height:1.2; font-weight:500;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  transform:translate(calc(var(--cx) * 100%), calc(var(--cy) * 100%)) rotate(var(--cr));
  background:var(--bg); color:#2a2310;
  animation:kcMove 9s cubic-bezier(.65,0,.35,1) infinite; animation-delay:var(--d);
}
.kc:nth-of-type(3n+1){ --bg:#ffe58a; } .kc:nth-of-type(3n+2){ --bg:#ffc9dd; } .kc:nth-of-type(3n){ --bg:#c9ecff; }
.kc em{ position:absolute; inset:0; display:flex; align-items:center; padding:0 10px; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc__a{ animation:kcA 9s ease infinite; animation-delay:var(--d); }
.kc__b{ opacity:0; color:#f1edf8; animation:kcB 9s ease infinite; animation-delay:var(--d); }
@keyframes kcMove{
  0%,18%{ transform:translate(calc(var(--cx) * 100%), calc(var(--cy) * 100%)) rotate(var(--cr)); background:var(--bg); }
  32%,72%{ transform:translate(calc(var(--ox) * 100%), calc(var(--oy) * 100%)) rotate(0deg); background:rgba(255,255,255,.09); }
  86%,100%{ transform:translate(calc(var(--cx) * 100%), calc(var(--cy) * 100%)) rotate(var(--cr)); background:var(--bg); }
}
.kc--paid{ animation-name:kcPaid; }
@keyframes kcPaid{
  0%,18%{ transform:translate(calc(var(--cx) * 100%), calc(var(--cy) * 100%)) rotate(var(--cr)); background:var(--bg); }
  32%,72%{ transform:translate(calc(var(--ox) * 100%), calc(var(--oy) * 100%)) rotate(0deg); background:rgba(94,224,138,.28); }
  86%,100%{ transform:translate(calc(var(--cx) * 100%), calc(var(--cy) * 100%)) rotate(var(--cr)); background:var(--bg); }
}
@keyframes kcA{ 0%,22%{ opacity:1 } 28%,76%{ opacity:0 } 84%,100%{ opacity:1 } }
@keyframes kcB{ 0%,24%{ opacity:0 } 30%,74%{ opacity:1 } 80%,100%{ opacity:0 } }

/* Нейросети: ночной чат и сфера */
.phone{
  width:80%; margin:0 auto; padding:24px 18px 22px; border-radius:36px;
  background:linear-gradient(170deg, rgba(20,12,44,.94), rgba(8,5,20,.96));
  border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 80px rgba(0,0,0,.45);
}
.orb{ position:relative; width:76px; height:76px; margin:0 auto; border-radius:50%; overflow:hidden; background:#0b0620; box-shadow:0 0 44px rgba(188,130,243,.65); }
.orb i{ position:absolute; inset:-25%; border-radius:50%; animation:orbSpin 5s linear infinite; }
.orb i:nth-child(1){ background:radial-gradient(circle at 30% 30%, #ff6778 0, transparent 42%); }
.orb i:nth-child(2){ background:radial-gradient(circle at 70% 40%, #8d9fff 0, transparent 45%); animation-duration:7s; animation-direction:reverse; }
.orb i:nth-child(3){ background:radial-gradient(circle at 45% 75%, #ffba71 0, transparent 40%); animation-duration:9s; }
@keyframes orbSpin{ to{ transform:rotate(360deg) } }
.phone__time{ margin:14px 0 16px; text-align:center; font-size:11.5px; color:rgba(255,255,255,.5); }
.chat2{ display:grid; gap:8px; min-height:200px; align-content:start; }
.m{ margin:0; align-self:start; max-width:84%; padding:9px 13px; border-radius:18px; font-size:13px; line-height:1.35; opacity:0; }
.m--in{ justify-self:start; background:rgba(255,255,255,.12); color:#fff; border-bottom-left-radius:6px; }
.m--out,.m--typing{ justify-self:end; background:linear-gradient(135deg,#8d6bff,#c46bff); color:#fff; border-bottom-right-radius:6px; }
.m1{ grid-row:1; animation:m1 10s ease infinite; }
.m--typing{ grid-row:2; display:flex; gap:4px; padding:12px 14px; animation:mT 10s ease infinite; }
.m--typing i{ width:6px; height:6px; border-radius:50%; background:#fff; animation:crmDot 1s ease-in-out infinite; }
.m--typing i:nth-child(2){ animation-delay:.15s } .m--typing i:nth-child(3){ animation-delay:.3s }
.m2{ grid-row:2; animation:m2 10s ease infinite; }
.m3{ grid-row:3; animation:m3 10s ease infinite; }
.m--sys{ grid-row:4; justify-self:center; padding:5px 12px; border-radius:99px; background:rgba(94,224,138,.16); color:#9ff0b6; font-size:12px; font-weight:600; animation:mS 10s ease infinite; }
@keyframes m1{ 0%{ opacity:0; transform:translateY(8px) } 4%,88%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }
@keyframes mT{ 0%,12%{ opacity:0 } 15%,25%{ opacity:1 } 27%,100%{ opacity:0 } }
@keyframes m2{ 0%,25%{ opacity:0; transform:translateY(8px) } 29%,88%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }
@keyframes m3{ 0%,44%{ opacity:0; transform:translateY(8px) } 48%,88%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }
@keyframes mS{ 0%,58%{ opacity:0; transform:scale(.9) } 62%,88%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }

/* Процессы: документ идёт по отделам */
.flow{ display:block; width:100%; height:auto; padding:12px 10px 16px; }
.flow__base{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:2; stroke-dasharray:4 6; animation:flowDash 1s linear infinite; }
@keyframes flowDash{ to{ stroke-dashoffset:-10 } }
.flow__done{ fill:none; stroke:url(#fg); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.nd rect{ fill:#1c1236; stroke:rgba(255,255,255,.16); stroke-width:1.2; }
.nd text{ fill:#fff; font-family:var(--font); font-size:13px; font-weight:500; }
.tok circle{ fill:#fff; }
.tok path{ fill:#8e4bff; }

/* Продажи: дашборд руководителя */
.dash{ padding:18px 20px 20px; }
.dash__top{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:rgba(255,255,255,.5); }
.dash__top em{ font-style:normal; padding:4px 10px; border-radius:99px; background:rgba(94,224,138,.16); color:#9ff0b6; font-weight:600; }
.dash__num{
  display:block; margin-top:8px; font-family:ui-rounded,"SF Pro Rounded",var(--font);
  font-size:clamp(28px,2.9vw,44px); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:#fff;
}
.dash__chart{ display:block; width:100%; height:96px; margin-top:10px; }
.dash__line{ fill:none; stroke:#5ee08a; stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; animation:dLine 9s ease-in-out infinite .6s; }
.dash__area{ fill:url(#dg); opacity:0; animation:dArea 9s ease infinite .6s; }
@keyframes dLine{ 0%{ stroke-dashoffset:100 } 30%,90%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:100 } }
@keyframes dArea{ 0%,18%{ opacity:0 } 34%,90%{ opacity:1 } 100%{ opacity:0 } }
.fun{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.fun li{ display:grid; grid-template-columns:96px 1fr 34px; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.6); }
.fun i{ height:8px; border-radius:4px; background:linear-gradient(90deg,#5ee08a,#3ec38a); transform-origin:left; transform:scaleX(0); animation:funG 9s cubic-bezier(.23,1,.32,1) infinite .6s; }
.fun li:nth-child(2) i{ animation-delay:.75s } .fun li:nth-child(3) i{ animation-delay:.9s } .fun li:nth-child(4) i{ animation-delay:1.05s }
.fun b{ text-align:right; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
@keyframes funG{ 0%{ transform:scaleX(0) } 20%,90%{ transform:scaleX(var(--w)) } 100%{ transform:scaleX(0) } }

/* цены: как «Сравнить модели» у Apple */
.prods{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.prod--hero{ overflow:hidden; grid-column:span 2; background:linear-gradient(150deg,#1b1136,#0a0616); color:#fff; }
.prod--hero::after{
  content:""; position:absolute; right:-10%; top:-40%; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, var(--a2), transparent); pointer-events:none;
}
.prod--hero > *{ position:relative; z-index:1; }
.prod--hero .prod__t{ color:#fff; font-size:clamp(24px,2vw,30px); }
.prod--hero .prod__for{ color:rgba(255,255,255,.62); font-size:15.5px; }
.prod__badge{
  align-self:flex-start; margin-bottom:16px; padding:5px 12px; border-radius:99px;
  font-size:12px; font-weight:600; letter-spacing:.01em; color:#140a2a;
  background:linear-gradient(90deg,var(--g1),var(--g2));
}
.prod__meta{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px 12px; padding-top:22px; }
.prod__meta b{
  grid-column:1 / -1; order:-1;
  font-size:clamp(26px,2.2vw,34px); font-weight:700; letter-spacing:-.035em; line-height:1;
  background:linear-gradient(90deg,#1d1d1f 30%,#6e6e73); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prod--hero .prod__meta b{ background-image:linear-gradient(90deg,var(--g1),var(--g2)); }
.prod__meta b small{ font-size:.5em; font-weight:500; letter-spacing:0; -webkit-text-fill-color:#86868b; margin-right:4px; }
.prod--hero .prod__meta b small{ -webkit-text-fill-color:rgba(255,255,255,.55); }
.prod__meta > span:first-child{ padding:5px 11px; border-radius:99px; background:#f2f2f7; color:#1d1d1f; font-size:12.5px; font-weight:500; }
.prod__meta > span:first-child::after{ display:none; }
.prod--hero .prod__meta > span:first-child{ background:rgba(255,255,255,.12); color:#fff; }
.prod__go{ grid-column:3; padding:8px 15px; border-radius:99px; background:#1d1d1f; color:#fff !important; font-size:13px; font-weight:500; }
.prod--hero .prod__go{ background:#fff; color:#1d1d1f !important; }


/* ═══════════ «Как проходит работа»: сцены под тему страницы (23.09) ═══════════ */
.conv .step{ background:transparent; border-color:transparent; }
.conv .step.is-active{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.conv__stage{ min-height:400px; }
.cs{ border-radius:22px; padding:0 24px 22px; background:linear-gradient(160deg, rgba(28,18,56,.94), rgba(9,6,20,.97)); }
.cs__t{ margin:0 -24px; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); letter-spacing:.04em; font-size:11.5px; }
.cs__t::before{ content:""; flex:none; width:32px; height:8px; background:radial-gradient(circle, rgba(255,255,255,.22) 3.5px, transparent 4px) 0 0/12px 8px repeat-x; }
.cs-bars li.hot{ color:#ff9a9a; }
.cs-bars li.hot i{ background:linear-gradient(90deg,#ff6b6b,#ff9a8a); box-shadow:0 0 14px rgba(255,107,107,.5); }
.cs-bars i{ background:linear-gradient(90deg, var(--dir), color-mix(in srgb, var(--dir) 55%, #fff)); }
.xr{ align-self:flex-start; display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:99px; background:rgba(255,214,10,.12); color:#ffd60a; font-size:12px; opacity:0; }
.cs.is-on .xr{ animation:tPop .45s 1.6s cubic-bezier(.34,1.56,.64,1) both; }

/* сканер */
.xs{ position:relative; }
.xs ul{ list-style:none; margin:0; padding:0; }
.xs li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13.5px; color:rgba(255,255,255,.82); }
.xs em{ font-style:normal; font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; opacity:0; transform:translateX(8px); }
.xs em.bad{ background:rgba(255,107,107,.16); color:#ff9a9a; }
.xs em.warn{ background:rgba(255,186,113,.16); color:#ffc98f; }
.cs.is-on .xs em{ animation:xsIn .4s cubic-bezier(.23,1,.32,1) both; animation-delay:calc(var(--i) * .22s + .15s); }
@keyframes xsIn{ to{ opacity:1; transform:none } }
.xs__beam{ position:absolute; left:-8px; right:-8px; top:0; height:42px; border-radius:10px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--dir) 35%, transparent), transparent); }
.cs.is-on .xs__beam{ animation:xsBeam 2.4s .2s ease-in-out both; }
@keyframes xsBeam{ 0%{ opacity:0; transform:translateY(0) } 10%{ opacity:1 } 90%{ opacity:1 } 100%{ opacity:0; transform:translateY(210px) } }

/* ИИ: база знаний и тест-диалог */
.xk{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.6); }
.xk i{ height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.xk b{ display:block; height:100%; width:86%; border-radius:3px; background:linear-gradient(90deg,#8d9fff,#bc82f3,#ff6778); transform:scaleX(0); transform-origin:left; }
.cs.is-on .xk b{ animation:csFun 1.2s .2s cubic-bezier(.23,1,.32,1) both; }
.xk em{ font-style:normal; color:#fff; font-weight:600; }
.xm{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.xm p{ margin:0; max-width:80%; padding:10px 14px; border-radius:18px; font-size:13.5px; line-height:1.35; opacity:0; transform:translateY(8px); }
.xm__in{ align-self:flex-start; background:rgba(255,255,255,.12); color:#fff; border-bottom-left-radius:6px; }
.xm__out{ align-self:flex-end; background:linear-gradient(135deg,#8d6bff,#c46bff); color:#fff; border-bottom-right-radius:6px; }
.xm__chip{ align-self:center; padding:5px 12px !important; border-radius:99px !important; background:rgba(94,224,138,.16); color:#9ff0b6; font-size:12px !important; font-weight:600; }
.cs.is-on .xm p{ animation:xsIn .45s cubic-bezier(.23,1,.32,1) both; animation-delay:calc(var(--i) * .55s + .25s); }

/* ИИ: сетка тестов */
.xg{ display:grid; grid-template-columns:repeat(10,1fr); gap:8px; margin-top:4px; }
.xg i{ aspect-ratio:1; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); }
.cs.is-on .xg i{ animation:xgOk .35s ease both; animation-delay:calc(var(--i) * .05s + .1s); }
.cs.is-on .xg i.w{ animation-name:xgWarn; }
@keyframes xgOk{ to{ background:rgba(94,224,138,.55); border-color:rgba(94,224,138,.8); } }
@keyframes xgWarn{ to{ background:rgba(255,186,113,.55); border-color:rgba(255,186,113,.8); } }

/* Процессы: клубок */
.xt{ width:100%; height:auto; }
.xt > path{ stroke:rgba(255,107,107,.55); stroke-width:1.6; stroke-dasharray:320; stroke-dashoffset:320; }
.cs.is-on .xt > path{ animation:xtDraw 1s ease both; }
.cs.is-on .xt > path:nth-of-type(2){ animation-delay:.15s } .cs.is-on .xt > path:nth-of-type(3){ animation-delay:.3s }
.cs.is-on .xt > path:nth-of-type(4){ animation-delay:.45s } .cs.is-on .xt > path:nth-of-type(5){ animation-delay:.6s } .cs.is-on .xt > path:nth-of-type(6){ animation-delay:.75s }
@keyframes xtDraw{ to{ stroke-dashoffset:0 } }
.xt__n circle{ fill:#1c1236; stroke:rgba(255,255,255,.25); }
.xt__l text{ fill:#fff; font:600 9.5px var(--font); text-anchor:middle; }
.xt__x text{ fill:#ff6b6b; font:700 14px var(--font); opacity:0; }
.cs.is-on .xt__x text{ animation:tFade .3s .9s both, crmLive 1.6s 1.2s ease-in-out infinite; }
.cs.is-on .xt__x text:nth-child(2){ animation-delay:1.05s, 1.35s } .cs.is-on .xt__x text:nth-child(3){ animation-delay:1.2s, 1.5s }

/* Процессы: как сейчас → как будет */
.xa{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:start; }
.xa b{ display:block; margin-bottom:10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.45); }
.xa ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.xa li{ padding:10px 12px; border-radius:11px; font-size:13px; line-height:1.3; }
.xa__l li{ background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.25); color:rgba(255,255,255,.7); }
.cs.is-on .xa__l li{ animation:xaOut .5s ease both; animation-delay:calc(var(--i) * .2s + .35s); }
@keyframes xaOut{ to{ opacity:.35; text-decoration:line-through; } }
.xa__r li{ background:rgba(94,224,138,.12); border:1px solid rgba(94,224,138,.35); color:#fff; opacity:0; transform:translateX(-10px); }
.cs.is-on .xa__r li{ animation:xsIn .5s cubic-bezier(.23,1,.32,1) both; animation-delay:calc(var(--i) * .2s + .45s); }
.xa__arr{ align-self:center; font-size:20px; color:var(--dir); }

/* Процессы: мини-схема */
.xf{ width:100%; height:auto; margin-top:10px; }
.xf__base{ stroke:rgba(255,255,255,.16); stroke-width:2; stroke-dasharray:4 6; }
.xf__done{ stroke:var(--dir); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.cs.is-on .xf__done{ animation:xfDone 4s linear infinite; }
@keyframes xfDone{ 0%{ stroke-dashoffset:100 } 85%,100%{ stroke-dashoffset:0 } }
.xf__n rect{ fill:#1c1236; stroke:rgba(255,255,255,.22); }
.xf__l text{ fill:#fff; font:500 10px var(--font); text-anchor:middle; }
.xf__tok circle{ fill:#fff; }
.xf__ok{ fill:#9ff0b6; font:600 10px var(--font); text-anchor:middle; }

/* Процессы: было / стало */
.xp{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.xp li{ display:grid; grid-template-columns:78px 1fr; grid-template-rows:auto auto; column-gap:12px; row-gap:5px; align-items:center; font-size:13px; color:rgba(255,255,255,.75); }
.xp span{ grid-row:1 / span 2; }
.xp i{ height:7px; border-radius:4px; width:calc(var(--w) * 100%); transform:scaleX(0); transform-origin:left; }
.xp i.was{ background:rgba(255,107,107,.6); }
.xp i.now{ background:linear-gradient(90deg,#5ee08a,#3ec38a); }
.cs.is-on .xp i.was{ animation:csFun .8s .2s cubic-bezier(.23,1,.32,1) both; }
.cs.is-on .xp i.now{ animation:csFun .8s .5s cubic-bezier(.23,1,.32,1) both; }
.xp__lg{ display:flex; gap:16px; font-size:12px; color:rgba(255,255,255,.55); }
.xp__lg span::before{ content:""; display:inline-block; width:10px; height:4px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.xp__lg .was::before{ background:rgba(255,107,107,.6); } .xp__lg .now::before{ background:#5ee08a; }

/* Продажи: разбор звонков */
.xw{ position:relative; padding-top:34px; }
.xw__bars{ display:flex; align-items:center; gap:3px; height:80px; }
.xw__bars i{ flex:1; height:80px; border-radius:3px; background:linear-gradient(var(--dir),color-mix(in srgb, var(--dir) 50%, #fff)); transform:scaleY(var(--h)); }
.cs.is-on .xw__bars i{ animation:xwave .9s ease-in-out infinite alternate; }
.cs.is-on .xw__bars i:nth-child(4n){ animation-duration:.7s } .cs.is-on .xw__bars i:nth-child(5n+2){ animation-duration:1.15s }
@keyframes xwave{ from{ transform:scaleY(calc(var(--h) * .5)) } to{ transform:scaleY(var(--h)) } }
.cs.is-on .xw__bars i:nth-child(3n){ animation-delay:-.3s } .cs.is-on .xw__bars i:nth-child(3n+1){ animation-delay:-.6s }
.xw em{
  position:absolute; top:0; left:calc(var(--x) * 100%); transform:translateX(-50%) translateY(6px);
  padding:4px 9px; border-radius:99px; background:rgba(255,107,107,.18); color:#ff9a9a;
  font-style:normal; font-size:11px; font-weight:600; white-space:nowrap; opacity:0;
}
.xw em::after{ content:""; position:absolute; left:50%; top:100%; width:1px; height:60px; background:rgba(255,107,107,.5); }
.cs.is-on .xw em{ animation:xwIn .4s cubic-bezier(.23,1,.32,1) both; animation-delay:calc(var(--i) * .3s + .2s); }
.xw{ padding-top:64px; }
.xw em:nth-of-type(2){ top:30px; }
.xw em:nth-of-type(2)::after{ height:30px; }
.xw em::after{ height:56px; }
@keyframes xwIn{ to{ opacity:1; transform:translateX(-50%) } }

/* Продажи: дашборд собирается */
.xd{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.xd > div{ padding:12px 13px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); opacity:0; transform:scale(.9); }
.xd__big{ grid-column:span 3; }
.xd span{ display:block; font-size:11px; color:rgba(255,255,255,.5); }
.xd b{ display:block; margin-top:4px; font-family:ui-rounded,"SF Pro Rounded",var(--font); font-size:20px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.xd b.g{ color:#7ff0a6; }
.xd svg{ width:100%; height:32px; margin-top:6px; }
.xd polyline{ fill:none; stroke:#5ee08a; stroke-width:2; }
.cs.is-on .xd > div{ animation:xdIn .5s cubic-bezier(.23,1,.32,1) both; animation-delay:calc(var(--i) * .15s + .2s); }
@keyframes xdIn{ to{ opacity:1; transform:none } }

/* Продажи: скрипт звонка */
.xsc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.xsc li{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; font-size:13.5px; color:rgba(255,255,255,.55); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.xsc b{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; background:rgba(255,255,255,.08); color:#fff; }
.cs.is-on .xsc li{ animation:xscOn 4.8s ease infinite; animation-delay:calc(var(--i) * 1.2s); }
@keyframes xscOn{ 0%,4%{ color:rgba(255,255,255,.55); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07) } 8%,24%{ color:#fff; background:color-mix(in srgb, var(--dir) 22%, transparent); border-color:var(--dir) } 30%,100%{ color:rgba(255,255,255,.85); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1) } }



/* ═══════════ «Как проходит работа» — раскладка в духе apple.com (23.09) ═══════════ */
.conv{ margin-top:0; }
.conv__rail{ display:none; }
.conv__pin{
  height:100vh; min-height:0; padding:13vh 0 8vh;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:auto 1fr auto; grid-template-areas:"head stage" "now stage" "bar stage";
  gap:0 5vw; align-items:start;
}
.conv__head{ grid-area:head; }
.conv__head .sec__h{ font-size:clamp(28px,2.6vw,40px); }
.conv__head .sec__sub{ margin-top:12px; font-size:16px; }
.conv .steps{ display:none; }
.conv__now{ grid-area:now; align-self:center; }
.conv__no{
  display:block; font-style:normal; font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--dir);
}
.conv__title{
  margin:12px 0 0; font-size:clamp(38px,4vw,62px); font-weight:700; letter-spacing:-.045em; line-height:1;
  background:linear-gradient(180deg,#fff 30%, rgba(255,255,255,.62)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.conv__desc{ margin:22px 0 0; max-width:34ch; font-size:clamp(17px,1.35vw,21px); line-height:1.5; letter-spacing:-.01em; color:#a1a1a6; }
.conv__dur{ display:inline-block; margin-top:26px; padding:8px 16px; border-radius:99px; background:rgba(255,255,255,.08); color:#f5f5f7; font-size:14px; font-weight:500; }
.conv__dur::before{ content:"Срок · "; color:#86868b; }

.conv__bar{ grid-area:bar; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.conv__bar i{ display:block; height:3px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.conv__bar b{ display:block; height:100%; background:var(--dir); transform:scaleX(0); transform-origin:left; }
.conv__bar span{ display:block; margin-top:10px; font-size:12px; font-weight:500; color:#6e6e73; transition:color .35s ease; }
.conv__bar li.is-on span{ color:#f5f5f7; }

.conv__stage{ grid-area:stage; align-self:center; position:relative; height:min(72vh,680px); min-height:0; }
.conv__stage::before{
  content:""; position:absolute; inset:-18%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, var(--dir-glow), transparent 70%); opacity:.55;
}
.conv__stage .cs{
  border-radius:28px; padding:0 40px 30px; gap:26px;
  background:radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--dir) 20%, transparent), transparent 62%), linear-gradient(165deg,#161029,#07050f);
  border-color:rgba(255,255,255,.1);
}
.conv__stage .cs__t{ margin:0 -40px auto; padding:18px 28px; font-size:12px; }
.conv__stage .cs > :not(.cs__t):not(.cs__note){ zoom:1.5; }
.conv__stage .cs__note{ margin-top:auto; font-size:15px; color:#a1a1a6; }


/* ═══════════ сцены v3: новые шаги + постоянная жизнь после входа (23.09) ═══════════ */
.conv__dur::before{ content:"Результат · "; }
.conv .step span::before{ content:"Результат · "; color:rgba(255,255,255,.4); }
.conv__stage .cs > :not(.cs__t):not(.cs__note){ align-self:stretch; }

/* после входа сцены не замирают */
.cs.is-on .xs__beam{ animation:xsBeam 3.2s .2s ease-in-out infinite; }
.cs.is-on .cs-bars li.hot i{ animation:csFun .8s cubic-bezier(.22,1,.36,1) both, hotPulse 1.8s 1s ease-in-out infinite; }
@keyframes hotPulse{ 50%{ box-shadow:0 0 22px rgba(255,107,107,.85); } }
.cs.is-on .cs-check li{ animation:rowGlow 6s ease-in-out infinite; animation-delay:calc(var(--k, 0) * 1.5s + 2s); }
.cs-check li:nth-child(2){ --k:1 } .cs-check li:nth-child(3){ --k:2 } .cs-check li:nth-child(4){ --k:3 }
@keyframes rowGlow{ 0%,18%,100%{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09) } 6%,12%{ background:color-mix(in srgb, var(--dir) 16%, transparent); border-color:color-mix(in srgb, var(--dir) 60%, transparent) } }
.cs.is-on .xg i.w{ animation:xgWarn .35s ease both, crmLive 1.6s 2.5s ease-in-out infinite; }
.cs.is-on .cs-dot{ animation:tPop .4s 1.3s cubic-bezier(.34,1.56,.64,1) both, dotPing 1.8s 1.8s ease-out infinite; }
@keyframes dotPing{ 0%{ filter:drop-shadow(0 0 0 rgba(255,255,255,.9)) } 100%{ filter:drop-shadow(0 0 10px rgba(255,255,255,0)) } }
.cs.is-on .xa__arr{ animation:arrNudge 1.4s 2.6s ease-in-out infinite; }
@keyframes arrNudge{ 50%{ transform:translateX(5px) } }
.cs.is-on .xd polyline{ stroke-dasharray:200; animation:dLine2 4s .6s ease-in-out infinite; }
@keyframes dLine2{ 0%{ stroke-dashoffset:200 } 40%,85%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:-200 } }
.xd__big{ position:relative; }
.xd__big::after{ content:""; position:absolute; right:14px; top:14px; width:7px; height:7px; border-radius:50%; background:#5ee08a; box-shadow:0 0 8px #5ee08a; }
.cs.is-on .xd__big::after{ animation:crmLive 1.6s ease-in-out infinite; }

/* Битрикс24: проект воронки */
.xv{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.xv__col{ display:flex; flex-direction:column; gap:8px; padding:12px 10px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); opacity:0; transform:translateY(12px); }
.xv__col b{ padding:8px 10px; border-radius:9px; font-size:12px; font-weight:600; color:#0b0716; background:var(--c); }
.xv__col span{ padding:7px 10px; border-radius:8px; font-size:11.5px; color:rgba(255,255,255,.75); background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.18); opacity:0; }
.cs.is-on .xv__col{ animation:xsIn .5s cubic-bezier(.23,1,.32,1) both; animation-delay:calc(var(--i) * .2s + .2s); }
.cs.is-on .xv__col span{ animation:tFade .4s ease both, spanGlow 5s ease-in-out infinite; animation-delay:calc(var(--i) * .2s + .9s), calc(var(--i) * 1.2s + 2s); }
@keyframes spanGlow{ 0%,20%,100%{ border-color:rgba(255,255,255,.18) } 8%,14%{ border-color:var(--c); color:#fff } }

/* Битрикс24: склейка дублей */
.xmg{ position:relative; height:190px; }
.xmg__c{ position:absolute; left:50%; width:62%; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.xmg__c b{ display:block; font-size:14px; color:#fff; font-weight:600; }
.xmg__c span{ display:block; margin-top:4px; font-size:12px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xmg__a{ top:0; transform:translateX(-78%); border-color:rgba(255,107,107,.45); }
.xmg__b{ top:92px; transform:translateX(-22%); border-color:rgba(255,107,107,.45); }
.xmg__r{ top:46px; transform:translateX(-50%) scale(.9); opacity:0; background:rgba(94,224,138,.14); border-color:rgba(94,224,138,.6); width:78%; }
.cs.is-on .xmg__a{ animation:mgA 5s cubic-bezier(.65,0,.35,1) infinite .4s; }
.cs.is-on .xmg__b{ animation:mgB 5s cubic-bezier(.65,0,.35,1) infinite .4s; }
.cs.is-on .xmg__r{ animation:mgR 5s cubic-bezier(.23,1,.32,1) infinite .4s; }
@keyframes mgA{ 0%,15%{ transform:translateX(-78%); opacity:1 } 40%{ transform:translateX(-50%) translateY(46px); opacity:1 } 46%,90%{ transform:translateX(-50%) translateY(46px); opacity:0 } 100%{ transform:translateX(-78%); opacity:1 } }
@keyframes mgB{ 0%,15%{ transform:translateX(-22%); opacity:1 } 40%{ transform:translateX(-50%) translateY(-46px); opacity:1 } 46%,90%{ transform:translateX(-50%) translateY(-46px); opacity:0 } 100%{ transform:translateX(-22%); opacity:1 } }
@keyframes mgR{ 0%,40%{ opacity:0; transform:translateX(-50%) scale(.9) } 48%,88%{ opacity:1; transform:translateX(-50%) scale(1) } 96%,100%{ opacity:0; transform:translateX(-50%) scale(.95) } }
.xmg__n{ display:flex; align-items:baseline; gap:10px; font-size:13px; color:rgba(255,255,255,.55); }
.xmg__n s{ color:#ff9a9a; font-size:18px; }
.xmg__n b{ color:#7ff0a6; font-size:22px; font-weight:700; }

/* Нейросети: база знаний */
.xkb{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; }
.xkb__docs{ display:flex; flex-direction:column; gap:8px; }
.xkb__docs span{ padding:9px 12px; border-radius:10px; font-size:12.5px; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.cs.is-on .xkb__docs span{ animation:docFly 4.8s cubic-bezier(.65,0,.35,1) infinite; animation-delay:calc(var(--i) * 1.2s + .3s); }
@keyframes docFly{ 0%,6%{ transform:none; opacity:1 } 22%{ transform:translateX(120px) scale(.6); opacity:0 } 23%,80%{ transform:none; opacity:.35 } 100%{ opacity:1 } }
.xkb__core{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.xkb__core .orb{ width:96px; height:96px; }
.xkb__core em{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.55); }
.cs.is-on .xkb__core .orb{ animation:orbBreath 2.4s ease-in-out infinite; }
@keyframes orbBreath{ 50%{ transform:scale(1.07); box-shadow:0 0 60px rgba(188,130,243,.85) } }

/* Процессы: обмен с 1С и ЭДО */
.xy{ display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:8px; }
.xy__n{ padding:12px 12px; border-radius:14px; text-align:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.xy__n b{ display:block; font-size:13px; color:#fff; }
.xy__n span{ display:block; margin-top:2px; font-size:11px; color:rgba(255,255,255,.5); }
.xy__l{ position:relative; height:70px; border-top:1px dashed rgba(255,255,255,.2); margin-top:35px; }
.xy__l em{ position:absolute; top:-12px; left:0; padding:3px 8px; border-radius:99px; font-style:normal; font-size:10.5px; white-space:nowrap; background:color-mix(in srgb, var(--dir) 30%, #140a2a); color:#fff; opacity:0; }
.xy__l em.bk{ top:14px; background:rgba(94,224,138,.2); color:#9ff0b6; }
.cs.is-on .xy__l em{ animation:pkF 4s ease-in-out infinite; animation-delay:calc(var(--i) * 2s + .3s); }
.cs.is-on .xy__l em.bk{ animation-name:pkB; }
@keyframes pkF{ 0%{ left:0; opacity:0 } 10%{ opacity:1 } 45%{ left:calc(100% - 70px); opacity:1 } 55%,100%{ left:calc(100% - 70px); opacity:0 } }
@keyframes pkB{ 0%{ left:calc(100% - 80px); opacity:0 } 10%{ opacity:1 } 45%{ left:0; opacity:1 } 55%,100%{ left:0; opacity:0 } }


/* лента событий — заполняет сцены и живёт */
.xl{ list-style:none; margin:0; padding:10px 0 0; display:flex; flex-direction:column; gap:6px; border-top:1px solid rgba(255,255,255,.07); }
.xl li{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; font-size:12.5px; color:rgba(255,255,255,.78); opacity:0; transform:translateY(6px); }
.xl time{ flex:none; min-width:38px; font-size:11px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.45); }
.cs.is-on .xl li{ animation:xsIn .4s cubic-bezier(.23,1,.32,1) both, xlNew 6s ease-in-out infinite; animation-delay:calc(var(--i) * .35s + .6s), calc(var(--i) * 2s + 2s); }
@keyframes xlNew{ 0%,20%,100%{ background:transparent } 6%,14%{ background:color-mix(in srgb, var(--dir) 16%, transparent) } }

/* график с планом — как экран отчёта */
.xc__kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.xc__kpi div{ padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); opacity:0; transform:translateY(8px); }
.xc__kpi span{ display:block; font-size:11px; color:rgba(255,255,255,.5); }
.xc__kpi b{ display:block; margin-top:3px; font-family:ui-rounded,"SF Pro Rounded",var(--font); font-size:18px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.xc__kpi b.g{ color:#7ff0a6; }
.cs.is-on .xc__kpi div{ animation:xsIn .45s cubic-bezier(.23,1,.32,1) both; }
.cs.is-on .xc__kpi div:nth-child(2){ animation-delay:.1s } .cs.is-on .xc__kpi div:nth-child(3){ animation-delay:.2s }
.xc__plot{ position:relative; margin-top:14px; }
.xc__plot svg{ display:block; width:100%; height:140px; }
.xc__grid path{ stroke:rgba(255,255,255,.07); }
.xc__plan{ stroke:rgba(255,255,255,.35); stroke-width:1.5; stroke-dasharray:4 5; }
.xc__area{ fill:color-mix(in srgb, var(--dir) 22%, transparent); opacity:0; }
.xc__line{ stroke:var(--dir); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.cs.is-on .xc__line{ animation:tDraw 1.3s .3s cubic-bezier(.4,0,.2,1) both; }
.cs.is-on .xc__area{ animation:tFade .8s 1.1s ease both; }
.xc__dot{ position:absolute; right:-5px; top:calc(30 / 140 * 100% - 5px); width:10px; height:10px; border-radius:50%; background:#fff; opacity:0; box-shadow:0 0 0 0 rgba(255,255,255,.6); }
.cs.is-on .xc__dot{ animation:tPop .4s 1.5s cubic-bezier(.34,1.56,.64,1) both, dotRing 1.8s 2s ease-out infinite; }
@keyframes dotRing{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55) } 100%{ box-shadow:0 0 0 12px rgba(255,255,255,0) } }
.xc__tip{ position:absolute; right:14px; top:calc(30 / 140 * 100% - 40px); padding:5px 10px; border-radius:99px; font-style:normal; font-size:11.5px; font-weight:600; color:#0b2a17; background:#7ff0a6; opacity:0; transform:translateY(6px); white-space:nowrap; }
.cs.is-on .xc__tip{ animation:xsIn .45s 1.8s cubic-bezier(.23,1,.32,1) both; }
.xc__x{ display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; color:rgba(255,255,255,.4); }
.xc__lg{ display:flex; gap:16px; margin-top:10px; font-size:11.5px; color:rgba(255,255,255,.55); }
.xc__lg span::before{ content:""; display:inline-block; width:14px; height:2px; margin-right:6px; vertical-align:middle; }
.xc__lg .f::before{ background:var(--dir); } .xc__lg .p::before{ border-top:2px dashed rgba(255,255,255,.4); height:0; }
.conv__stage .cs--care > .xc.xc{ zoom:1.2; }

/* масштаб широких сцен в большом окне */
.conv__stage .cs--design > .xv.xv{ zoom:1.1; }
.conv__stage .cs--sync > .xy.xy{ zoom:1.1; }
.conv__stage .cs--merge > .xmg.xmg{ zoom:1.3; }
.xmg{ max-width:420px; margin:0 auto; width:100%; }

@media (max-width:1100px){
  .founder__in{ grid-template-columns:1fr; gap:40px; }
  .founder__cert{ justify-content:flex-start; }
}
@media (max-width:900px){
  :root{ --inset:12px; --radius:18px; --gutter:7%; }

  /* навигация — знак и одна кнопка, как на apple.com */
  .nav{
    left:10px; right:10px; top:calc(10px + env(safe-area-inset-top, 0px)); transform:none;
    max-width:none; justify-content:space-between;
  }
  .nav__link{ display:none; }
  .nav__mark,.nav__cta{ flex:none; }
  .nav{ flex-wrap:wrap; justify-content:flex-start; }
  .nav__mark{ gap:7px; padding:0 8px 0 9px; font-size:13.5px; }
  .nav__cta{ margin-left:4px; padding:0 12px; font-size:14px; }
  .nav__burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:36px; height:37px; margin-left:auto; border:0; border-radius:8px; background:#f1f1f1; cursor:pointer;
  }
  .nav__burger i{ display:block; width:16px; height:1.5px; border-radius:1px; background:#111; transition:transform .3s cubic-bezier(.23,1,.32,1); }
  .nav.is-open .nav__burger i:first-child{ transform:translateY(3.25px) rotate(45deg); }
  .nav.is-open .nav__burger i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
  .nav.is-open .nav__link{
    display:flex; order:10; flex:1 1 100%; height:48px; margin:0; padding:0 14px;
    border-left:0; border-top:1px solid #ededed; font-size:16px;
    animation:navIn .35s cubic-bezier(.23,1,.32,1) both;
  }
  .nav.is-open .nav__mark + .nav__link, .nav.is-open .nav__link:nth-child(2){ margin-top:6px; }
  @keyframes navIn{ from{ opacity:0; transform:translateY(-6px) } }

  /* первый экран — обычный поток, без 3D */
  .hero{ height:auto; }
  .hero__stage{ position:relative; inset:auto; perspective:none; pointer-events:auto; }
  .hero__card{
    position:relative; inset:auto;
    min-height:100svh; padding:104px 7% 34px;
    display:flex; flex-direction:column;
    transform:none !important; filter:none !important; opacity:1 !important;
  }
  .hero__title,.hero__lead,.hero__rule,.hero__foot,.portal{
    position:static; width:auto; max-width:none; transform:none; height:auto;
  }
  .hero__title{ font-size:clamp(30px,8.6vw,44px); }
  .portal{ margin:26px 0 0; height:290px; }
  .inbox,.aurora,.halo{ display:none; }
  .pipe{ height:auto; margin-top:0; }
  .pipe__pin{ position:relative; height:auto; }
  .cv{ position:relative; grid-template-columns:1fr; padding:14vh 7% 10vh; }
  .cv__stage{ display:none; }
  .cv__steps::after{ transform:none; }
  .cv__steps b{ color:#fff; }
  .cv__steps span{ grid-template-rows:1fr; opacity:1; margin-top:6px; }
  .portal__kpi b{ font-size:16px; }
  .portal__kpi span{ font-size:9px; }
  .portal__board{ grid-template-columns:repeat(2,1fr); }
  .hero__lead{ margin-top:26px; }
  .hero__rule{ margin:28px 0 20px; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:18px; }
  .facts{ flex-direction:column; gap:14px; }
  .hero__note{ text-align:left; }

  /* остальные сцены */
  /* направления — то же кольцо, крутится прокруткой; задние плашки не просвечивают */
  .dirs{ height:340vh; }
  .dirs__pin{ height:100svh; }
  .marquee__set{ font-size:clamp(30px,9vw,46px); gap:26px; padding-right:26px; }
  .ring-wrap{ perspective:1100px; inset:150px 0 110px 0; }
  .ring{ width:56vw; height:min(50svh,440px); }
  .tile{ transform:rotateY(calc(var(--i) * 90deg)) translateZ(73vw); padding:18px 16px; }
  .tile__list{ display:none; }
  .dirs__head{ top:84px; max-width:none; right:var(--gutter); }
  .dirs__head h2{ font-size:clamp(22px,6.4vw,30px); }
  .dirs__eyebrow{ margin-bottom:8px; font-size:11.5px; }
  .dirs__nav{ left:0; right:0; bottom:calc(5.2vh + 62px); flex-direction:row; justify-content:center; gap:14px; }
  .dirs__nav a{ font-size:12.5px; gap:0; }
  .dirs__nav b,.dirs__nav a::before{ display:none; }

  /* опыт — столбиком */
  .cases{ height:auto; padding:10vh 0 6vh; }
  .cases__pin{ position:relative; height:auto; display:block; overflow:visible; }
  .cases__track{ flex-direction:column; gap:16px; padding:0 4%; transform:none !important; }

  /* интеграции — крупные плитки во всю ширину, мелкие по две */
  .integr{ padding:12vh 4% 10vh; }
  .integr__head{ grid-template-columns:1fr; gap:14px; margin-bottom:30px; padding:0 3%; }
  .bento{ grid-template-columns:1fr 1fr; gap:12px; }
  .bt{ padding:22px 20px; border-radius:24px; }
  .bt--hub{ grid-column:1 / -1; grid-row:auto; }
  .hub{ min-height:300px; }
  .bt--1c,.bt--call,.bt--chat,.bt--w{ grid-column:1 / -1; }
  .bt--s{ grid-column:span 1; padding:18px 16px; }
  .bt--s .bt__txt{ font-size:13.5px; }

  /* кнопки первого экрана — в ряд поровну */
  .hero__actions{ flex-wrap:wrap; }
  .hero__actions .btn{ flex:1 1 140px; justify-content:center; text-align:center; }
  .case{ width:auto; height:min(150vw,640px); }
  .case__in{ padding:20px 16px 16px; }
  .case__meta{ font-size:12.5px; flex-wrap:wrap; row-gap:6px; }
  .case__name{ font-size:clamp(30px,9vw,42px); }
  .case__task{ font-size:13.5px; }
  .case__nums{ flex-wrap:wrap; gap:12px 20px; margin-top:16px; }
  .case__nums b{ font-size:clamp(18px,5.4vw,24px); }
  .case__nums span{ font-size:11.5px; }
  .dmd-lights--a{ top:calc(31% - 24px); }
  .dmd-lights--b{ top:calc(31% + 26px); }
  .dmd-jet{ width:32px; }
  .wbx{ width:30px; height:24px; }
  .wb-set{ gap:30px; padding-right:30px; }
  .wb-stacks{ right:4%; }
  .mix-grid{ left:4%; top:7%; grid-template-columns:repeat(4,20px); gap:8px; }
  .mix-grid i{ width:20px; height:20px; border-radius:6px; }
  .mix-cloud{ right:3%; width:70%; gap:8px; }
  .nchip{ padding:7px 11px; font-size:12px; gap:6px; }
  .nchip svg{ width:12px; height:12px; }
  .founder{ padding:10vh 7% 12vh; }
  .founder__person{ flex-direction:column; align-items:flex-start; }
  .founder__facts b{ min-width:0; }
  .cta__copy{ max-width:86%; top:42%; }
  .cta__row{ flex-wrap:wrap; row-gap:10px; }
  .sub__hero{ padding:16vh 7% 6vh; min-height:auto; }
  .viz{ position:relative; right:auto; top:auto; width:100%; max-width:none; margin:30px 0 0; transform:none; }
  .phone{ width:100%; }
  .prods{ grid-template-columns:1fr; }
  .prod--hero{ grid-column:auto; }
  .conv__pin{ display:flex; flex-direction:column; align-items:stretch; min-height:0; height:auto; padding:0; }
  .conv__head{ order:-2; margin-bottom:18px; }
  .conv__now,.conv__bar{ display:none; }
  .conv .steps{ display:flex; }
  .conv__stage{ height:auto; align-self:stretch; width:100%; }
  .conv__stage::before{ display:none; }
  .conv__stage .cs > :not(.cs__t):not(.cs__note){ zoom:1; }
  .conv__stage .cs__note{ zoom:1 !important; }
  .conv__stage .cs{ padding:0 18px 18px; }
  .conv__stage .cs__t{ margin:0 -18px; padding:14px 18px; }
  .conv__rail{ display:none; }
  .conv__stage{ order:-1; position:sticky; top:70px; z-index:3; min-height:340px; margin-bottom:14px; }
  .cs{ overflow:hidden; padding:0 18px 18px; }
  .cs__t{ margin:0 -18px; }
  .xd b{ font-size:17px; }
  .cs{ padding:18px 16px 14px; gap:12px;
    background:linear-gradient(160deg,#1a1030 0%,#0b0718 100%);
    box-shadow:0 18px 40px rgba(0,0,0,.6); }
  .cs-bars li{ grid-template-columns:112px 1fr; font-size:12px; }
  .conv .step{ transform:none; grid-template-columns:32px 1fr; }
  .conv .step.is-active{ transform:none; }
  .band{ grid-template-columns:1fr; gap:22px; }
  .sub__stats{ flex-direction:column; gap:18px; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .band{ padding:44px 7% 40px; }
  .sec{ padding:72px 0; }
  .step{ grid-template-columns:36px 1fr; }
  .step span{ grid-column:2; text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* — акценты внутренних страниц — */
.sub__hero--b24{
  background:
    radial-gradient(78% 84% at 50% 112%, #cfe0ff 0%, #93a8ff 18%, #6f5cf0 32%, #3f2596 52%, rgba(20,10,52,0) 76%),
    linear-gradient(180deg,#08040f 0%,#0e0722 16%,#1a0d46 32%,#2c1878 52%,#3d24a8 100%);
}
.sub__hero--ai{
  background:
    radial-gradient(78% 84% at 50% 112%, #ffe6ff 0%, #e6a4ff 18%, #a75cf3 32%, #4b1fa8 52%, rgba(28,10,60,0) 76%),
    linear-gradient(180deg,#08040f 0%,#12062a 16%,#220d5c 32%,#3a1690 52%,#5a24c4 100%);
}
.sub__hero--proc{
  background:
    radial-gradient(78% 84% at 50% 112%, #ffd9f4 0%, #f08ad0 18%, #a34ce0 32%, #43208f 52%, rgba(22,10,48,0) 76%),
    linear-gradient(180deg,#0a040e 0%,#180827 16%,#2b0f52 32%,#43197f 52%,#6626ad 100%);
}
.sub__hero--sales{
  background:
    radial-gradient(78% 84% at 50% 112%, #d8ffe8 0%, #86f0b6 16%, #3ec38a 30%, #1d6b58 50%, rgba(10,32,36,0) 76%),
    linear-gradient(180deg,#040a0c 0%,#071a1c 16%,#0c2e33 32%,#12474a 54%,#1a6b58 100%);
}

@media (prefers-reduced-motion:reduce){ .map__dot, .map__scan{ display:none; } .scn.is-on .log u, .go__line i::after, .scn.is-on .lib__bar i.is-new::before{ animation:none; } }

/* ═══════════════════ ЗАЯВКА · окно с формой ═══════════════════ */
.lead{
  width:min(480px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto;
  margin:auto; padding:34px 32px 30px; border:1px solid rgba(255,255,255,.12); border-radius:24px;
  color:#efeaf6; font-family:var(--font);
  background:
    radial-gradient(120% 60% at 50% 118%, rgba(177,100,244,.55), rgba(64,31,156,.2) 55%, transparent 80%),
    linear-gradient(176deg, #0d0720, #170b3c);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  overscroll-behavior:contain;
}
.lead::backdrop{ background:rgba(6,3,14,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.lead[open]{ animation:leadIn .45s cubic-bezier(.23,1,.32,1); }
@keyframes leadIn{ from{ opacity:0; transform:translateY(16px) scale(.98) } }
.lead__x{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:0; background:rgba(255,255,255,.08); color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .lead__x:hover{ background:rgba(255,255,255,.16); } }
.lead__eyebrow{ margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#c7a6ff; }
.lead__title{ margin:0; font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1.1; }
.lead__sub{ margin:10px 0 22px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.6); }
.lead__f{ display:block; margin-bottom:12px; }
.lead__f span{ display:block; margin-bottom:6px; font-size:13px; color:rgba(255,255,255,.72); }
.lead__f i{ font-style:normal; color:rgba(255,255,255,.38); }
.lead__f input, .lead__f textarea{
  display:block; width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff;
  font:inherit; font-size:16px; resize:vertical;
  transition:border-color .2s ease, background-color .2s ease;
}
.lead__f input::placeholder, .lead__f textarea::placeholder{ color:rgba(255,255,255,.3); }
.lead__f input:focus, .lead__f textarea:focus{ outline:none; border-color:#bc82f3; background:rgba(142,75,255,.1); }
.lead__ok{ display:flex; gap:10px; align-items:flex-start; margin:16px 0 20px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.6); cursor:pointer; }
.lead__ok input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:#bc82f3; }
.lead__ok a{ color:#d9c4ff; text-decoration:underline; text-underline-offset:2px; }
.lead__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lead__go{ width:100%; border:0; cursor:pointer; font-family:inherit; }
.lead__go:disabled{ opacity:.6; cursor:progress; }
.lead__msg{ padding:30px 0 6px; text-align:center; }
.lead__msg b{ display:block; font-size:24px; font-weight:500; letter-spacing:-.02em; }
.lead__msg p{ margin:10px 0 0; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.65); }
.lead__msg a{ color:#d9c4ff; }