/* ===========================================================================
   BUSINESS AGENT — design system
   Концепт 01 «Кинетическая витрина» + Концепт 06 «Стеклянная панель»
   ---------------------------------------------------------------------------
   ВНИМАНИЕ: медиазапрос prefers-reduced-motion намеренно НЕ используется.
   Заказчик требует, чтобы анимации работали всегда, даже если анимация
   отключена в настройках Windows. Плавная прокрутка реализована в JS
   по той же причине (браузер глушит scroll-behavior:smooth при reduced-motion).
   =========================================================================== */

/* ---------- 1. Токены --------------------------------------------------- */
:root{
  /* поверхности */
  --bg:        #08090C;
  --bg-2:      #0C0E14;
  --bg-3:      #111420;
  --glass:     rgba(255,255,255,.055);
  --glass-2:   rgba(255,255,255,.09);
  /* Подложка панелей с текстом. Раньше здесь была почти прозрачная заливка
     без размытия — декоративные фигуры просвечивали сквозь карточки и
     читались как наложенные на текст. Теперь панель реально перекрывает фон. */
  --panel:     rgba(14,16,25,.74);
  --panel-h:   rgba(23,26,38,.86);
  --line:      rgba(255,255,255,.11);
  --line-2:    rgba(255,255,255,.18);

  /* текст */
  --tx:        #FFFFFF;
  --tx-2:      rgba(255,255,255,.74);
  --tx-3:      rgba(255,255,255,.62);   /* было .45 — мелкие подписи не читались */
  --tx-4:      rgba(255,255,255,.46);   /* было .28 — то же самое */

  /* акценты */
  --ember:     #E8543A;
  --ember-2:   #FFB03A;
  --mint:      #6FE3A8;
  --sky:       #8FB8FF;
  --violet:    #5B37E8;

  /* шрифты */
  --display: 'Unbounded','Trebuchet MS',sans-serif;
  --body:    'Golos Text','Helvetica Neue',Arial,sans-serif;
  --mono:    'JetBrains Mono','Consolas',monospace;

  /* ритм */
  --pad:  clamp(20px,5vw,64px);
  --max:  1240px;
  --r:    18px;
  --r-lg: 26px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Сброс ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; }

/* зерно на всю страницу */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

/* ---------- Летающая мелочь ----------
   Слой генерится скриптом в каждой секции. Внешний .flo двигает прокрутка,
   внутренний .flo-in крутится сам — разнесены, чтобы не писать в один transform. */
.floaters{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  /* в центре, где текст, декор почти погашен; к краям — в полную силу */
  -webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 50%, rgba(0,0,0,.14), #000 76%);
  mask-image:radial-gradient(ellipse 60% 64% at 50% 50%, rgba(0,0,0,.14), #000 76%);
}
.flo{
  position:absolute; display:block; will-change:transform;
  opacity:0; transition:opacity 1s ease;
}
.flo.on{ opacity:var(--o,.3); }
.flo-in{ display:block; width:100%; height:100%; }
.flo svg{ width:100%; height:100%; overflow:visible; display:block; }
@keyframes floSpin{ to{ transform:rotate(360deg) } }
@keyframes floBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
@keyframes floPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.22); opacity:.55 } }
.sec{ position:relative; padding:clamp(72px,9vw,132px) 0; }

/* ---------- 2.5 Занавес перехода между страницами ----------------------
   Без JS занавеса нет вовсе — иначе неработающий скрипт закрыл бы весь сайт.
   Раскрытие сделано чистой CSS-анимацией: даже если app.js не загрузится,
   страница всё равно откроется. JS отвечает только за закрытие при уходе. */
.curtain{ display:none; }
.js .curtain{
  position:fixed; inset:0; z-index:900; display:block; pointer-events:none;
}
.js .curtain > span{
  position:absolute; top:-1px; bottom:-1px; width:20.2%;
  background:linear-gradient(180deg,#0D0F18,#08090C);
  transform-origin:top;
  animation:curtainOut .62s var(--ease) forwards;
}
.js .curtain > span:nth-child(1){ left:0 }
.js .curtain > span:nth-child(2){ left:20%;  animation-delay:.045s }
.js .curtain > span:nth-child(3){ left:40%;  animation-delay:.09s }
.js .curtain > span:nth-child(4){ left:60%;  animation-delay:.135s }
.js .curtain > span:nth-child(5){ left:80%;  animation-delay:.18s }
@keyframes curtainOut{ from{ transform:scaleY(1) } to{ transform:scaleY(0) } }
/* аварийное раскрытие: занавес не должен остаться поверх сайта ни при каких условиях */
.js .curtain.done > span{ animation:none; transform:scaleY(0); }
.js .curtain.done .curtain-mark{ animation:none; opacity:0; }

.js .curtain-mark{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  animation:markOut .45s ease .12s forwards;
}
.js .curtain-mark b{
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--tx-3);
}
@keyframes markOut{ to{ opacity:0 } }

/* уход со страницы — панели закрываются снизу вверх */
.js .curtain.cover{ pointer-events:auto; }
.js .curtain.cover > span{ transform-origin:bottom; animation:curtainIn .46s var(--ease) forwards; }
.js .curtain.cover > span:nth-child(1){ animation-delay:.16s }
.js .curtain.cover > span:nth-child(2){ animation-delay:.12s }
.js .curtain.cover > span:nth-child(3){ animation-delay:.08s }
.js .curtain.cover > span:nth-child(4){ animation-delay:.04s }
.js .curtain.cover > span:nth-child(5){ animation-delay:0s }
@keyframes curtainIn{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
.js .curtain.cover .curtain-mark{ opacity:0; animation:markIn .4s ease .18s forwards; }
@keyframes markIn{ to{ opacity:1 } }
/* полоса прогресса лежит выше занавеса — на время перехода убираем */
.js .curtain.cover ~ #progress{ opacity:0; transition:opacity .2s ease; }

/* ---------- 2.6 Граница между экранами ---------------------------------
   При входе в секцию по её верхнему краю один раз проходит светящаяся линия. */
.js .sec::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);
  transform:scaleX(0); opacity:0; pointer-events:none;
}
.js .sec.seen::before{ animation:secSweep 1.6s var(--ease) forwards; }
@keyframes secSweep{
  0%{ transform:scaleX(0); opacity:0 }
  30%{ opacity:.95 }
  100%{ transform:scaleX(1); opacity:.3 }
}

/* ---------- 3. Индикатор прокрутки ------------------------------------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:9999;
  background:linear-gradient(90deg,var(--ember),var(--ember-2),var(--sky));
  box-shadow:0 0 12px rgba(232,84,58,.6);
  transition:width .12s linear;
}

/* ---------- 4. Логотип -------------------------------------------------- */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo-mark .orb{ transform-origin:24px 24px; animation:orbit 7s linear infinite; }
@keyframes orbit{ to{ transform:rotate(360deg); } }
.logo-mark .st{ stroke-dasharray:64; stroke-dashoffset:64; animation:draw 1.4s var(--ease) forwards; }
.logo-mark .st.b{ stroke-dasharray:16; stroke-dashoffset:16; animation-delay:.35s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.logo-word{ font-family:var(--display); font-weight:600; font-size:14.5px; line-height:1.15; letter-spacing:-.02em; }
.logo-word small{
  display:block; font-family:var(--mono); font-weight:400; font-size:8px;
  letter-spacing:.3em; color:var(--tx-3); margin-top:4px;
}

/* ---------- 5. Навигация ------------------------------------------------ */
.nav{
  position:fixed; z-index:500; top:14px; left:50%; transform:translateX(-50%);
  width:calc(100% - 28px); max-width:calc(var(--max) - 20px);
  display:flex; align-items:center; gap:18px;
  padding:11px 11px 11px 20px; border-radius:100px;
  background:rgba(10,11,16,.6); border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 16px 50px rgba(0,0,0,.5);
  transition:background .4s ease, box-shadow .4s ease, top .4s var(--ease);
}
.nav.solid{ background:rgba(8,9,12,.9); box-shadow:0 20px 60px rgba(0,0,0,.7); }
.nav-links{ display:none; align-items:center; gap:4px; margin-left:auto; }
@media(min-width:1000px){ .nav-links{ display:flex; } }
.nav-links a{
  position:relative; padding:9px 15px; border-radius:100px; font-size:14.5px;
  color:var(--tx-2); transition:color .25s ease, background .25s ease;
}
.nav-links a:hover{ color:var(--tx); background:var(--glass); }
.nav-links a.on{ color:var(--tx); }
.nav-links a.on::after{
  content:""; position:absolute; left:15px; right:15px; bottom:3px; height:1.5px;
  background:var(--ember); border-radius:2px; animation:grow-x .5s var(--ease);
}
@keyframes grow-x{ from{ transform:scaleX(0); } }
.nav .btn{ padding:11px 20px; font-size:14px; }
@media(max-width:999px){ .nav .btn.hide-sm{ display:none; } }

.burger{ margin-left:auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; }
@media(min-width:1000px){ .burger{ display:none; } }
.burger i{ display:block; width:16px; height:1.5px; background:var(--tx); border-radius:2px; transition:transform .35s var(--ease), opacity .25s ease; }
.burger i+i{ margin-top:4.5px; }
.burger.x i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.x i:nth-child(2){ opacity:0; }
.burger.x i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:490; background:rgba(6,7,10,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer a{
  font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,7vw,2.3rem);
  letter-spacing:-.03em; padding:13px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(18px);
}
.drawer.open a{ animation:rise-in .55s var(--ease) forwards; }
@keyframes rise-in{ to{ opacity:1; transform:none; } }

/* ---------- 6. Кнопки (магнитные) -------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 27px; border-radius:100px; font-weight:600; font-size:15.5px;
  border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.btn .ar{ transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn-primary{ background:var(--ember); color:#fff; box-shadow:0 10px 32px rgba(232,84,58,.34); }
.btn-primary:hover{ box-shadow:0 18px 48px rgba(232,84,58,.5); }
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4),transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn-primary:hover::before{ transform:translateX(120%); }
.btn-glass{ background:var(--glass-2); border-color:var(--line-2); color:var(--tx); backdrop-filter:blur(14px); }
.btn-glass:hover{ background:rgba(255,255,255,.16); }
.btn-white{ background:#fff; color:#08090C; }
.btn-white:hover{ box-shadow:0 16px 40px rgba(255,255,255,.22); }
.btn-ghost{ border-color:var(--line-2); color:var(--tx-2); }
.btn-ghost:hover{ background:var(--glass); color:var(--tx); }

/* ---------- 7. Типографика --------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  color:#FFB4A2; background:rgba(232,84,58,.12); border:1px solid rgba(232,84,58,.34);
  padding:8px 15px; border-radius:100px;
}
.eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--ember); flex:none; animation:blip 2.4s infinite; }
.eyebrow.calm{ color:var(--tx-2); background:var(--glass); border-color:var(--line); }
.eyebrow.calm i{ background:var(--mint); box-shadow:0 0 9px var(--mint); }
@keyframes blip{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.32; transform:scale(.68); } }

.h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.3rem,5.4vw,4.5rem); line-height:1.03; letter-spacing:-.035em; }
.h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,3.7vw,3.05rem); line-height:1.07; letter-spacing:-.035em; }
.h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.25; letter-spacing:-.025em; }
.lead{ font-size:clamp(1rem,1.4vw,1.19rem); line-height:1.62; color:var(--tx-2); max-width:52ch; }
.small{ font-size:14.5px; color:var(--tx-3); }
.mono{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }

.grad{ background:linear-gradient(96deg,var(--ember),var(--ember-2) 46%,var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Блик по заголовку.
   ВАЖНО: позицию гоняем строго в пределах 0%…100%. Процент здесь считается
   от разницы «ширина элемента − ширина фона» (при size:250% это −150%W),
   поэтому значения вне диапазона уводят градиент прочь от текста — а текст
   прозрачный, и он пропадает совсем. Было -250%: заголовки исчезали на части
   цикла. alternate убирает рывок на стыке. Без поддержки background-clip:text
   заголовок остаётся обычным белым, а не невидимым. */
.sheen{ color:inherit; }
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .sheen{
    background:linear-gradient(100deg,rgba(255,255,255,.55) 0%,#fff 46%,rgba(255,255,255,.55) 92%);
    background-size:250% 100%; background-position:0 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:sheen 6s ease-in-out infinite alternate;
  }
}
@keyframes sheen{ to{ background-position:100% 0; } }

/* заголовок секции */
.sec-head{ display:grid; gap:20px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head .mono-idx{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--tx-4); }
@media(min-width:900px){
  .sec-head{ grid-template-columns:130px minmax(0,1fr); gap:0 44px; align-items:start; }
  .sec-head > .cnt{ display:flex; flex-direction:column; gap:18px; }
  .sec-head .mono-idx{ padding-top:.65em; }
}

/* ---------- 8. Фоновые эффекты ----------------------------------------- */
.aurora{
  position:absolute; inset:-25%; z-index:0; filter:blur(94px); opacity:.55; pointer-events:none;
  background:
    radial-gradient(38% 44% at 20% 30%, var(--violet) 0%, transparent 62%),
    radial-gradient(34% 40% at 76% 26%, var(--ember) 0%, transparent 60%),
    radial-gradient(46% 46% at 54% 84%, #12303F 0%, transparent 66%);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-4%,3%,0) scale(1.12); }
  100%{ transform:translate3d(4%,-3%,0) scale(1.05); }
}
.blobs{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; filter:blur(72px); opacity:.42; border-radius:50%; animation:morph 17s ease-in-out infinite; }
.blob.b1{ width:44vw; height:44vw; left:-9vw; top:-8vw; background:linear-gradient(135deg,var(--violet),#00C2FF); }
.blob.b2{ width:36vw; height:36vw; right:-6vw; top:10vw; background:linear-gradient(135deg,var(--ember),var(--ember-2)); animation-delay:-5s; }
.blob.b3{ width:40vw; height:40vw; left:30vw; bottom:-18vw; background:linear-gradient(135deg,#00E0B8,#3D7BFF); animation-delay:-9s; }
@keyframes morph{
  0%,100%{ border-radius:58% 42% 38% 62%/48% 56% 44% 52%; transform:translate(0,0) rotate(0) scale(1); }
  33%{ border-radius:38% 62% 56% 44%/62% 38% 62% 38%; transform:translate(3%,-3%) rotate(60deg) scale(1.1); }
  66%{ border-radius:62% 38% 44% 56%/38% 62% 38% 62%; transform:translate(-3%,3%) rotate(140deg) scale(.94); }
}
.mesh{ position:absolute; inset:0; z-index:1; backdrop-filter:blur(46px) saturate(1.3); background:rgba(8,9,14,.4); pointer-events:none; }
.gridlines{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:clamp(58px,7vw,100px) clamp(58px,7vw,100px);
  mask-image:radial-gradient(76% 66% at 50% 40%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(76% 66% at 50% 40%,#000,transparent 80%);
}
.stage{ position:relative; overflow:hidden; }
.stage > .wrap{ position:relative; z-index:5; }

/* ---------- 9. Появление при прокрутке --------------------------------- */
/* Прячем только если JS реально работает — иначе контент виден сразу
   (класс .js ставится инлайн-скриптом в <head> каждой страницы). */
.js .rv{
  opacity:0;
  transition:opacity .85s var(--ease), transform .85s var(--ease),
             filter .85s var(--ease), clip-path .95s var(--ease);
}
/* разные характеры появления — назначаются через data-rv */
.js .cards, .js .tracks, .js .metrics{ perspective:1100px; }
.js .rv:not([data-rv]),
.js .rv[data-rv="up"]   { transform:translateY(44px); }
.js .rv[data-rv="left"] { transform:translateX(-64px) rotate(-1.2deg); }
.js .rv[data-rv="right"]{ transform:translateX(64px) rotate(1.2deg); }
.js .rv[data-rv="scale"]{ transform:scale(.9); }
.js .rv[data-rv="blur"] { transform:translateY(30px) scale(1.04); filter:blur(16px); }
.js .rv[data-rv="wipe"] { clip-path:inset(0 100% 0 0); }
/* карточки въезжают с наклоном в перспективе — самый заметный переход */
.js .rv[data-rv="rise"] { transform:translateY(64px) rotateX(12deg) scale(.96); transform-origin:50% 0; }

.js .rv.in{ opacity:1; transform:none; filter:none; }
.js .rv[data-rv="wipe"].in{ clip-path:inset(0 0 0 0); }

/* заголовок раздела поднимается по словам */
.js .sec-head .h2 .wl{
  display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em;
}
.js .sec-head .h2 .wl > span{
  display:inline-block; transform:translateY(108%);
  transition:transform .85s var(--ease);
}
.js .sec-head.in .h2 .wl > span{ transform:none; }
.rv[data-d="1"]{ transition-delay:.08s } .rv[data-d="2"]{ transition-delay:.16s }
.rv[data-d="3"]{ transition-delay:.24s } .rv[data-d="4"]{ transition-delay:.32s }
.rv[data-d="5"]{ transition-delay:.4s }  .rv[data-d="6"]{ transition-delay:.48s }

/* ---------- 10. HERO главной (концепт 01) ------------------------------ */
.hero{ padding:clamp(140px,17vw,200px) 0 clamp(70px,9vw,110px); }
.hero-grid{ display:grid; gap:clamp(46px,5vw,64px); align-items:center; }
@media(min-width:1040px){ .hero-grid{ grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); } }
.hero .h1{ margin-top:28px; }
/* каждая смысловая группа держится в одну строку и не разрывается */
.hero .h1 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; white-space:nowrap; }
/* Раз строки не переносятся, кегль обязан считаться от ширины КОЛОНКИ,
   а не окна: в две колонки заголовок живёт в половине экрана, и привязка
   к vw заставляла бы его вылезать за край. cqi решает это точно.
   Запасной вариант на vw остаётся для браузеров без контейнерных запросов. */
@supports (container-type:inline-size){
  .hero-col{ container-type:inline-size; }
  .hero .h1{ font-size:clamp(1.6rem, 10.4cqi, 4.5rem); }
}
.hero .h1 .w > span{ display:inline-block; transform:translateY(108%); animation:rise .95s var(--ease) forwards; }
@keyframes rise{ to{ transform:translateY(0); } }
.hero .lead{ margin-top:26px; opacity:0; animation:fade .9s ease .8s forwards; }
@keyframes fade{ to{ opacity:1; } }
.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:36px; opacity:0; animation:fade .9s ease 1s forwards; }
.hero-note{ margin-top:30px; display:flex; flex-wrap:wrap; gap:9px 22px; opacity:0; animation:fade .9s ease 1.15s forwards; }
.hero-note span{ font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-4); display:inline-flex; align-items:center; gap:8px; }
.hero-note span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--mint); }

/* ---------- 11. HERO страниц услуг (концепт 06) ------------------------ */
.hero-svc{ padding:clamp(140px,17vw,190px) 0 clamp(56px,7vw,86px); }
.hero-svc-grid{ display:grid; gap:clamp(40px,5vw,60px); align-items:center; }
@media(min-width:1040px){ .hero-svc-grid{ grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); } }
.crumbs{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-4); margin-bottom:22px; }
.crumbs a:hover{ color:var(--tx-2); }
.crumbs em{ font-style:normal; color:var(--ember); }

/* ---------- 12. Стекло --------------------------------------------------*/
.glass{
  border-radius:var(--r-lg); padding:7px;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 44%,rgba(255,255,255,.14));
  box-shadow:0 36px 90px rgba(0,0,0,.5);
}
.glass-in{
  border-radius:20px; background:rgba(10,11,20,.66); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4);
  padding:22px;
}
.tilt{ transform-style:preserve-3d; transition:transform .5s var(--ease); will-change:transform; }
.floaty{ animation:float 7s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ---------- 13. Чат ---------------------------------------------------- */
.chat-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3);
}
.chat-top .on{ display:inline-flex; align-items:center; gap:7px; color:var(--mint); }
.chat-top .on i{ width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); animation:blip 2s infinite; }
.bub{ margin-top:13px; padding:14px 17px; border-radius:16px; font-size:15px; line-height:1.5; }
.bub.me{ background:var(--ember); color:#fff; border-bottom-right-radius:5px; margin-left:auto; max-width:92%; }
.bub.ag{ background:var(--glass); border:1px solid var(--line); border-bottom-left-radius:5px; max-width:94%; color:rgba(255,255,255,.9); }
.bub.ag.hl{ border-left:2px solid var(--ember); }

/* ---- сценарный диалог ----
   Высота площадки зафиксирована, реплики копятся снизу вверх — так карточка
   не прыгает, пока разговор разыгрывается. */
.chat-stage{
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:opacity .5s ease;
}
/* Стартовый запас до того, как скрипт измерит точную высоту под текущую
   ширину и шрифты. Дальше min-height выставляется из JS — фиксированные
   числа в медиазапросах врали бы при других переносах строк. */
.js .chat-stage{ min-height:244px; }
.chat-stage.fading{ opacity:0; }
.chat-stage .bub{ animation:bubIn .5s var(--ease) backwards; }
@keyframes bubIn{ from{ opacity:0; transform:translateY(12px) scale(.97) } }
.chat-stage .bub.me{ animation-name:bubInMe; }
@keyframes bubInMe{ from{ opacity:0; transform:translateX(16px) scale(.97) } }

/* ---------- «Рабочий цикл агента» — карточка первого экрана главной ----
   Пришла на смену разыгранному диалогу: тот резервировал высоту под три
   реплики, и половину цикла карточка стояла полупустой. Здесь содержимое
   статично по высоте, а движется состояние — этапы загораются волной.
   Всё на CSS: единый такт 9s, шаг между этапами 1.3s.                    */
.htask{
  position:relative; margin:16px 0 4px; padding:14px 16px 14px 18px;
  border-radius:14px; font-size:15px; line-height:1.45; color:var(--tx);
  background:rgba(232,84,58,.12); border:1px solid rgba(232,84,58,.28);
}
.htask::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  border-radius:2px; background:var(--ember);
}
.htask b{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:#FFB4A2; margin-bottom:7px; }

.hsteps{ position:relative; margin-top:14px; }
/* направляющая и её заполнение */
.hsteps::before,
.hsteps::after{ content:""; position:absolute; left:13px; top:16px; bottom:16px; width:1.5px; border-radius:2px; }
.hsteps::before{ background:rgba(255,255,255,.1); }
.hsteps::after{
  background:linear-gradient(var(--ember),var(--mint));
  transform-origin:top; transform:scaleY(0);
  animation:hsLine 9s linear infinite;
}
@keyframes hsLine{
  0%{ transform:scaleY(0); opacity:1 }
  74%,90%{ transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(1); opacity:0 }
}

.hstep{
  position:relative; display:grid; grid-template-columns:28px 1fr auto;
  align-items:center; gap:12px; padding:6px 0;
}
.hs-dot{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); background:rgba(255,255,255,.06);
  animation:hsDot 9s linear infinite; animation-delay:calc(var(--i) * 1.3s);
}
.hs-dot svg{ opacity:0; animation:hsCheck 9s linear infinite; animation-delay:calc(var(--i) * 1.3s); }
.hs-name{
  font-size:15px; color:var(--tx-4);
  animation:hsName 9s linear infinite; animation-delay:calc(var(--i) * 1.3s);
}
.hs-val{
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.02em;
  opacity:0; animation:hsVal 9s linear infinite; animation-delay:calc(var(--i) * 1.3s);
}
@keyframes hsDot{
  0%,4%   { background:rgba(255,255,255,.06); border-color:var(--line); box-shadow:none }
  9%      { background:rgba(232,84,58,.32); border-color:var(--ember); box-shadow:0 0 0 5px rgba(232,84,58,.13) }
  18%,90% { background:rgba(111,227,168,.2);  border-color:var(--mint);  box-shadow:none }
  100%    { background:rgba(255,255,255,.06); border-color:var(--line) }
}
@keyframes hsCheck{
  0%,12%  { opacity:0; transform:scale(.4) }
  20%,90% { opacity:1; transform:scale(1) }
  100%    { opacity:0; transform:scale(.4) }
}
@keyframes hsName{ 0%,6%{ color:var(--tx-4) } 16%,90%{ color:#fff } 100%{ color:var(--tx-4) } }
@keyframes hsVal{
  0%,9%   { opacity:0; transform:translateY(7px) }
  19%,90% { opacity:1; transform:none }
  100%    { opacity:0; transform:translateY(7px) }
}

/* индикатор набора */
.typing-bub{ align-self:flex-start; display:inline-flex; gap:5px; align-items:center; width:auto; padding:17px 18px; }
.typing-bub i{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.65);
  animation:typedot 1.25s ease-in-out infinite;
}
.typing-bub i:nth-child(2){ animation-delay:.16s; }
.typing-bub i:nth-child(3){ animation-delay:.32s; }
@keyframes typedot{ 0%,62%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-5px); opacity:1 } }
.mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:16px; background:var(--line); border-radius:13px; overflow:hidden; }
.mini-stats div{ background:#0F1119; padding:13px 8px; text-align:center; }
.mini-stats b{ display:block; font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.02em; }
.mini-stats span{ font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-4); }

/* ---------- 14. Бегущая строка ----------------------------------------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding:15px 0; background:rgba(255,255,255,.02); }
.marquee .run{ display:flex; gap:38px; width:max-content; animation:run 34s linear infinite; }
@keyframes run{ to{ transform:translateX(-50%); } }
.marquee span{ font-family:var(--mono); font-size:12px; letter-spacing:.19em; text-transform:uppercase; color:var(--tx-3); white-space:nowrap; display:inline-flex; align-items:center; gap:12px; }
.marquee span::after{ content:""; width:4px; height:4px; border-radius:50%; background:var(--ember); opacity:.6; }

/* ---------- 15. Лестница шагов ----------------------------------------- */
.ladder{ border-top:1px solid var(--line); }
.step{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:4px 18px;
  padding:22px 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .45s var(--ease);
}
.step::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--ember); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.step:hover{ padding-left:14px; }
.step:hover::before{ transform:scaleY(1); }
.step .k{ font-family:var(--mono); font-size:12px; color:var(--ember); padding-top:.3em; }
.step .t{ font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,1.55vw,1.22rem); letter-spacing:-.025em; }
.step .d{ color:var(--tx-2); font-size:15.5px; grid-column:2; }
@media(min-width:840px){
  .step{ grid-template-columns:52px minmax(0,.85fr) minmax(0,1.15fr); align-items:baseline; }
  .step .d{ grid-column:3; }
}

/* ---------- 16. Сетка карточек ----------------------------------------- */
.cards{ display:grid; gap:14px; }
@media(min-width:680px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .cards.c3{ grid-template-columns:repeat(3,1fr); } }
.card{
  position:relative; padding:26px; border-radius:var(--r);
  background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:11px; min-height:184px; overflow:hidden;
  transition:background .4s ease, border-color .4s ease, transform .45s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(420px 220px at var(--px,50%) var(--py,0%), rgba(232,84,58,.16), transparent 70%);
  transition:opacity .4s ease;
}
.card:hover{ background:var(--panel-h); border-color:var(--line-2); transform:translateY(-3px); }
.card:hover::before{ opacity:1; }
.card > *{ position:relative; z-index:2; }
.card .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--tx-4); }
.card .d{ color:var(--tx-2); font-size:15px; }
.card .sp{ flex:1 1 auto; }
.card-ic{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--line); margin-bottom:4px;
  transition:background .4s ease, transform .5s var(--ease);
}
.card:hover .card-ic{ background:rgba(232,84,58,.2); transform:rotate(-7deg) scale(1.06); }

/* карточка-ссылка на услугу */
a.card-svc{ min-height:auto; cursor:pointer; }
a.card-svc .go{
  display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ember);
}
a.card-svc .go .ar{ transition:transform .35s var(--ease); }
a.card-svc:hover .go .ar{ transform:translateX(5px); }

.pill{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  padding:7px 13px; border-radius:100px; background:var(--glass-2); border:1px solid var(--line); color:var(--tx-2);
}
.pill i{ width:6px; height:6px; border-radius:50%; background:var(--tx-3); flex:none; }
.pill.ok{ color:var(--mint); border-color:rgba(111,227,168,.3); background:rgba(111,227,168,.1); }
.pill.ok i{ background:var(--mint); box-shadow:0 0 8px var(--mint); }
.pill.warn{ color:#F2C078; border-color:rgba(242,192,120,.3); background:rgba(242,192,120,.1); }
.pill.warn i{ background:#F2C078; animation:blip 1.6s infinite; }

/* ---------- 17. Воронка ------------------------------------------------- */
.funnel{ border-top:1px solid var(--line); }
.frow{ display:grid; grid-template-columns:32px minmax(0,1fr) 58px; gap:0 16px; align-items:center; padding:19px 0; border-bottom:1px solid var(--line); }
@media(min-width:880px){ .frow{ grid-template-columns:32px 180px minmax(0,1fr) 70px; gap:0 24px; } }
.frow .k{ font-family:var(--mono); font-size:12px; color:var(--tx-4); }
.frow .t{ font-family:var(--display); font-weight:600; font-size:1.08rem; letter-spacing:-.025em; }
.frow .d{ font-size:14.5px; color:var(--tx-3); grid-column:2/-1; }
@media(min-width:880px){ .frow .d{ grid-column:auto; color:var(--tx-2); } }
.frow .v{ font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,1.9vw,1.5rem); text-align:right; grid-row:1; grid-column:3; }
@media(min-width:880px){ .frow .v{ grid-column:4; } }
.fbar{ grid-column:1/-1; height:4px; border-radius:4px; background:rgba(255,255,255,.09); margin-top:13px; overflow:hidden; }
@media(min-width:880px){ .fbar{ grid-column:2/4; margin-top:11px; } }
/* Без JS полоса сразу нужной длины, с JS — растёт при появлении в кадре. */
.fbar i{ display:block; height:100%; border-radius:4px; width:var(--w); background:linear-gradient(90deg,var(--ember),var(--ember-2)); transition:width 1.2s var(--ease); }
.js .fbar i{ width:0; }
.js .rv.in .fbar i{ width:var(--w); }

.verdict{
  margin-top:clamp(34px,4vw,50px); padding:clamp(26px,3vw,40px); border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(232,84,58,.16),rgba(91,55,232,.14));
  border:1px solid var(--line-2);
  font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.75rem);
  line-height:1.25; letter-spacing:-.03em;
}

/* ---------- 18. Метрики -------------------------------------------------*/
.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:820px){ .metrics{ grid-template-columns:repeat(4,1fr); } }
.metric{ padding:24px 20px; border-radius:var(--r); background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); transition:border-color .4s ease, background .4s ease; }
.metric:hover{ border-color:var(--line-2); background:var(--panel-h); }
.metric b{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1; letter-spacing:-.04em; }
.metric span{ display:block; margin-top:11px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-4); }

/* ---------- 19. Знания / чипы ------------------------------------------ */
.knows{ padding:clamp(24px,3vw,34px); border-radius:var(--r-lg); background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); }
.knows .t{ font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3); padding-bottom:16px; border-bottom:1px solid var(--line); }
.knows li{ display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:baseline; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:16px; color:var(--tx-2); }
.knows li:last-child{ border-bottom:0; }
.knows li::before{ content:"—"; font-family:var(--mono); color:var(--ember); font-size:13px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.chip{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:9px 15px; border-radius:100px; border:1px solid var(--line); color:var(--tx-2); background:var(--glass); }

/* ---------- 20. Живая лента -------------------------------------------- */
.feed-box{ padding:20px; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.feed-t{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3); padding-bottom:14px; border-bottom:1px solid var(--line); }
.feed{ display:flex; flex-direction:column; gap:8px; padding-top:12px; min-height:250px; justify-content:flex-end; }
.fl{ display:grid; grid-template-columns:48px 1fr auto; gap:11px; align-items:center; padding:11px 13px; border-radius:11px; background:var(--glass); border:1px solid rgba(255,255,255,.07); font-size:13.5px; color:var(--tx-2); animation:slidein .55s var(--ease); }
@keyframes slidein{ from{ opacity:0; transform:translateY(14px); } }
.fl time{ font-family:var(--mono); font-size:10.5px; color:var(--tx-4); }
.fl .st{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:100px; background:rgba(111,227,168,.18); color:var(--mint); white-space:nowrap; }
.fl .st.w{ background:rgba(242,192,120,.16); color:#F2C078; }

/* ---------- 21. Анимированные SVG-иллюстрации -------------------------- */
.figure{ width:100%; }
.figure .stroke-1{ fill:none; stroke:rgba(255,255,255,.2); stroke-width:1; }
.figure .stroke-d{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:1; stroke-dasharray:3 6; }
.figure .stroke-a{ fill:none; stroke:var(--ember); stroke-width:1.7; stroke-linecap:round; }
/* Подписи на схемах: основная — почти белая, вторичная — заметно тише,
   но всё ещё читаемая. Оба тона проверены на контраст с плашкой .chip-r. */
.figure .lbl{ font-family:var(--mono); font-size:10.5px; fill:rgba(255,255,255,.86); letter-spacing:.07em; }
.figure .lbl-s{ fill:rgba(255,255,255,.6); }
.figure .lbl-b{ font-family:var(--mono); font-size:11px; fill:#fff; letter-spacing:.14em; }
.figure .chip-r{ fill:rgba(12,14,22,.94); stroke:rgba(255,255,255,.2); }
/* ---------- Орбитальная схема на главной ----------
   Названия систем стоят неподвижно и всегда читаются: вращается только
   луч обхода. Движение по спицам — это данные, идущие к агенту и обратно. */
.orbit-spin{ transform-origin:0 0; animation:orbit 15s linear infinite; }
.spoke{ stroke:rgba(255,255,255,.13); stroke-width:1; }

.flux-in{ animation:fluxIn 2.9s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes fluxIn{
  0%{ transform:translateX(0); opacity:0 } 14%{ opacity:1 }
  86%{ opacity:1 } 100%{ transform:translateX(-82px); opacity:0 }
}
.flux-out{ animation:fluxOut 2.9s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes fluxOut{
  0%{ transform:translateX(0); opacity:0 } 14%{ opacity:1 }
  86%{ opacity:1 } 100%{ transform:translateX(82px); opacity:0 }
}

/* система вспыхивает ровно в тот момент, когда её проходит луч */
.chip-lit{ opacity:0; animation:chipLit 15s linear infinite; }
@keyframes chipLit{ 0%{ opacity:0 } 3%{ opacity:.55 } 12%{ opacity:0 } 100%{ opacity:0 } }

.core-ring{ transform-box:fill-box; transform-origin:center; animation:coreRing 4.2s ease-out infinite; }
.core-ring.d2{ animation-delay:2.1s; }
@keyframes coreRing{ 0%{ transform:scale(.74); opacity:.45 } 100%{ transform:scale(1.75); opacity:0 } }
.drawline{ stroke-dasharray:700; stroke-dashoffset:700; animation:draw2 2.6s var(--ease) forwards; }
@keyframes draw2{ to{ stroke-dashoffset:0; } }
.slide-x{ animation:slidex 5s linear infinite; }
@keyframes slidex{ 0%{ transform:translateX(-60px); opacity:0 } 12%{ opacity:1 } 86%{ opacity:1 } 100%{ transform:translateX(300px); opacity:0 } }
/* ВАЖНО про трансформации внутри SVG.
   По умолчанию transform-box:view-box, и «center» — это центр всего viewBox,
   а не самой фигуры. Из-за этого масштабирование уводит элемент с места.
   Поэтому всем, кто масштабируется, ставим fill-box — точка отсчёта своя.
   И ещё: CSS-трансформация ЗАМЕНЯЕТ атрибут transform="translate(...)",
   поэтому такие классы вешаем только на элементы без этого атрибута
   (позиционирование — на внешней группе, анимация — на внутренней). */
.blink-s{ transform-box:fill-box; transform-origin:center; animation:blip 2.2s infinite; }
.sweep{ transform-origin:0 0; animation:orbit 5s linear infinite; }
.pop{ transform-box:fill-box; transform-origin:center; animation:pop 3s ease-in-out infinite; }
@keyframes pop{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.28) } }
.rise-bar{ transform-box:fill-box; transform-origin:bottom; animation:risebar 3.4s var(--ease) infinite alternate; }
@keyframes risebar{ from{ transform:scaleY(.35) } to{ transform:scaleY(1) } }
.scanline{ animation:scan 2.6s ease-in-out infinite alternate; filter:drop-shadow(0 0 5px #6FE3A8); }
@keyframes scan{ from{ transform:translateY(0) } to{ transform:translateY(60px) } }

/* ---------- «Живой канал» на странице контактов ---------- */
.wave{
  fill:none; stroke:var(--ember); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(232,84,58,.5));
}
/* период волны — ровно 88px, поэтому сдвиг на 88px замыкается без стыка */
.wave-scroll{ animation:waveScroll 3.4s linear infinite; }
@keyframes waveScroll{ to{ transform:translateX(-88px); } }

.pkt{ animation:pktFwd 3.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pktFwd{
  0%{ transform:translateX(0); opacity:0 }
  8%{ opacity:1 } 92%{ opacity:1 }
  100%{ transform:translateX(268px); opacity:0 }
}
.pkt-back{ animation:pktBack 3.4s cubic-bezier(.45,0,.55,1) 1.7s infinite; }
@keyframes pktBack{
  0%{ transform:translateX(0); opacity:0 }
  8%{ opacity:1 } 92%{ opacity:1 }
  100%{ transform:translateX(-268px); opacity:0 }
}
.ring{ transform-box:fill-box; transform-origin:center; animation:ringOut 2.9s ease-out infinite; }
.ring.d2{ animation-delay:1.45s; }
@keyframes ringOut{ 0%{ transform:scale(.5); opacity:.65 } 100%{ transform:scale(2); opacity:0 } }

/* ---------- «Каскад отбора»: воронка на странице «Продажи» ----------
   Единый такт 3.2s. Волна подсветки идёт сверху вниз со сдвигом 0.3s
   на ступень, отсев вылетает сразу после прохода волны по своей ступени,
   на выходе капля доходит до плашки и та отзывается лёгким импульсом. */
.fnl-pulse{ animation:bandPulse 3.2s ease-in-out infinite; opacity:0; }
@keyframes bandPulse{ 0%{ opacity:0 } 16%{ opacity:.62 } 38%{ opacity:0 } 100%{ opacity:0 } }

.drop-in{ animation:dropIn 3.2s cubic-bezier(.4,0,.75,1) infinite; }
@keyframes dropIn{
  0%{ transform:translateY(-8px); opacity:0 }
  10%{ opacity:1 } 40%{ opacity:1 }
  52%{ transform:translateY(56px); opacity:0 }
  100%{ transform:translateY(56px); opacity:0 }
}

/* отсев: не прошедшие критерии уходят в стороны и гаснут */
.rej-l{ animation:rejL 3.2s ease-in infinite; }
.rej-r{ animation:rejR 3.2s ease-in infinite; }
@keyframes rejL{
  0%{ transform:translate(0,0); opacity:0 }
  8%{ opacity:.9 }
  34%{ transform:translate(-36px,38px); opacity:0 }
  100%{ transform:translate(-36px,38px); opacity:0 }
}
@keyframes rejR{
  0%{ transform:translate(0,0); opacity:0 }
  8%{ opacity:.9 }
  34%{ transform:translate(36px,38px); opacity:0 }
  100%{ transform:translate(36px,38px); opacity:0 }
}

/* поток в горловине */
.flow{ stroke-dasharray:4 7; animation:flow 1.2s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-11 } }

.drop-out{ animation:dropOut 3.2s cubic-bezier(.5,0,.6,1) infinite; }
@keyframes dropOut{
  0%,58%{ transform:translateY(0); opacity:0 }
  64%{ opacity:1 }
  88%,100%{ transform:translateY(34px); opacity:0 }
}
.chip-pop{ transform-box:fill-box; transform-origin:center; animation:chipPop 3.2s ease-out infinite; }
@keyframes chipPop{ 0%,86%{ transform:scale(1) } 91%{ transform:scale(1.045) } 100%{ transform:scale(1) } }

/* ---------- 22. Направления (три колонки) ------------------------------ */
.tracks{ display:grid; gap:14px; }
@media(min-width:980px){ .tracks{ grid-template-columns:repeat(3,1fr); } }
.track{ padding:clamp(24px,2.6vw,32px); border-radius:var(--r-lg); background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); transition:border-color .4s ease, background .4s ease, transform .45s var(--ease); }
.track:hover{ border-color:var(--line-2); background:var(--panel-h); transform:translateY(-3px); }
.track .h{ padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.track .name{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); margin-bottom:12px; }
.fn{ padding:15px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.fn:last-of-type{ border-bottom:0; }
.fn .ft{ font-weight:600; font-size:15.5px; display:flex; gap:10px; align-items:baseline; }
.fn .ft em{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--tx-4); flex:none; }
.fn .fd{ font-size:14.5px; color:var(--tx-3); margin-top:3px; padding-left:25px; }

/* ---------- 23. Финальный экран ---------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  padding:clamp(88px,11vw,140px) 0 clamp(76px,9vw,116px);
  background:linear-gradient(180deg,var(--bg) 0%, #0A0B12 55%, #0B0910 100%);
}
/* «горизонт» вместо трёх разноцветных пятен — они давали грязный развод */
.cta-glow{
  position:absolute; left:50%; bottom:-34%; transform:translateX(-50%);
  width:min(1180px,150%); aspect-ratio:2/1; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side,
             rgba(232,84,58,.38), rgba(232,84,58,.13) 46%, transparent 74%);
  filter:blur(26px);
  animation:glowPulse 9s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ opacity:.78; transform:translateX(-50%) scale(1) }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.07) }
}
.cta-halo{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center; pointer-events:none;
}
.cta-halo svg{ width:min(880px,124%); height:auto; opacity:.5; }
.cta-halo circle{ fill:none; stroke:rgba(255,255,255,.09); }
.cta-halo .r-dash{ stroke-dasharray:2 10; animation:orbit 46s linear infinite; transform-origin:center; }
.cta-halo .r-dash2{ stroke-dasharray:2 14; animation:orbit 34s linear infinite reverse; transform-origin:center; }

.cta-inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.2vw,26px); }

.cta-badge{
  display:inline-flex; align-items:center; gap:11px;
  padding:8px 17px 8px 9px; border-radius:100px;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(14px);
}
.cta-badge b{
  font-family:var(--mono); font-weight:400; font-size:10.5px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--tx-2);
}
.cta-title{ font-size:clamp(2.2rem,5.8vw,4.4rem); line-height:1.02; max-width:15ch; }

/* три направления плитками, а не мелкими таблетками */
.cta-tiles{ display:grid; gap:12px; width:100%; max-width:860px; margin-top:6px; }
@media(min-width:760px){ .cta-tiles{ grid-template-columns:repeat(3,1fr); } }
.cta-tile{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:22px; border-radius:var(--r); text-align:left; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .45s var(--ease), background .35s ease, border-color .35s ease;
}
.cta-tile::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(340px 180px at var(--px,50%) var(--py,0%), rgba(232,84,58,.2), transparent 70%);
  transition:opacity .4s ease;
}
.cta-tile:hover{ transform:translateY(-5px); background:var(--panel-h); border-color:var(--line-2); }
.cta-tile:hover::before{ opacity:1; }
.cta-tile > *{ position:relative; z-index:2; }
.cta-tile .t-ic{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--line);
  transition:background .35s ease, transform .5s var(--ease);
}
.cta-tile:hover .t-ic{ background:rgba(232,84,58,.24); transform:rotate(-8deg) scale(1.07); }
.cta-tile b{ font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:-.025em; }
.cta-tile i{ font-style:normal; font-size:14px; line-height:1.45; color:var(--tx-3); }
.cta-tile .t-go{
  position:absolute; right:18px; top:22px; z-index:3;
  font-family:var(--mono); font-size:13px; color:var(--ember);
  opacity:0; transform:translateX(-7px);
  transition:opacity .3s ease, transform .4s var(--ease);
}
.cta-tile:hover .t-go{ opacity:1; transform:none; }

.cta-fine{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tx-4); margin-top:4px;
}
.dirs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ---------- 24. Подвал ------------------------------------------------- */
.foot{ border-top:1px solid var(--line); padding:clamp(48px,6vw,72px) 0 30px; background:rgba(0,0,0,.3); }
.foot-grid{ display:grid; gap:34px; }
@media(min-width:820px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.foot h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-4); margin-bottom:15px; font-weight:400; }
.foot li{ margin-bottom:10px; }
/* подчёркивание вырастает слева направо, а не появляется целиком */
.foot li a, .foot address a{
  color:var(--tx-2); font-size:15px; padding-bottom:2px;
  background-image:linear-gradient(var(--ember),var(--ember));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:color .25s ease, background-size .45s var(--ease);
}
.foot li a:hover, .foot address a:hover{ color:var(--ember); background-size:100% 1px; }
.foot address{ font-style:normal; color:var(--tx-2); font-size:15px; line-height:1.9; }
.foot-bot{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-4); }
.stub{ color:var(--tx-4); font-size:11px; font-family:var(--mono); }

/* ---------- 25. Контакты ------------------------------------------------*/
.contact-grid{ display:grid; gap:clamp(32px,4vw,52px); align-items:start; }
@media(min-width:980px){ .contact-grid{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } }
.ct-item{ display:grid; grid-template-columns:46px 1fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start; }
.ct-item:first-of-type{ border-top:1px solid var(--line); }
.ct-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--glass-2); border:1px solid var(--line); transition:background .4s ease, transform .5s var(--ease); }
.ct-item:hover .ct-ic{ background:rgba(232,84,58,.2); transform:translateY(-2px); }
.ct-item .lb{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-4); }
.ct-item .vl{ font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,1.7vw,1.25rem); letter-spacing:-.02em; margin-top:5px; }
.ct-item .vl a:hover{ color:var(--ember); }

.form{ padding:clamp(24px,3vw,34px); border-radius:var(--r-lg); background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; padding:15px 16px; border-radius:13px; background:rgba(0,0,0,.3);
  border:1px solid var(--line); font-size:15.5px; transition:border-color .3s ease, background .3s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--tx-4); }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--ember); background:rgba(0,0,0,.45); outline:none; }
.field textarea{ resize:vertical; min-height:118px; }
.field select option{ background:#12141C; }
.form-note{ font-size:13px; color:var(--tx-4); margin-top:14px; line-height:1.55; }
.form-note a{ color:var(--tx-3); text-decoration:underline; text-underline-offset:3px; }
.form-msg{ margin-top:16px; padding:14px 16px; border-radius:13px; font-size:14.5px; display:none; }
.form-msg.show{ display:block; animation:slidein .5s var(--ease); }
.form-msg.ok{ background:rgba(111,227,168,.12); border:1px solid rgba(111,227,168,.34); color:var(--mint); }

/* ---------- 26. Юридические страницы ----------------------------------- */
.legal{ padding:clamp(130px,15vw,180px) 0 clamp(60px,7vw,90px); }
.legal-grid{ display:grid; gap:40px; align-items:start; }
@media(min-width:1000px){ .legal-grid{ grid-template-columns:230px minmax(0,1fr); gap:56px; } }
.toc{ position:sticky; top:96px; padding:22px; border-radius:var(--r); background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); }
@media(max-width:999px){ .toc{ position:static; } }
.toc h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-4); margin-bottom:14px; font-weight:400; }
.toc li{ margin-bottom:3px; }
.toc a{ display:block; padding:8px 11px; border-radius:9px; font-size:14px; color:var(--tx-3); transition:color .25s ease, background .25s ease; }
.toc a:hover, .toc a.on{ color:var(--tx); background:var(--glass-2); }
.doc h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-.03em; margin:44px 0 14px; scroll-margin-top:100px; }
.doc h2:first-child{ margin-top:0; }
.doc h3{ font-size:16.5px; font-weight:600; margin:24px 0 10px; }
.doc p{ color:var(--tx-2); margin-bottom:14px; font-size:16px; }
.doc ul{ margin:0 0 16px; }
.doc ul li{ position:relative; padding-left:22px; margin-bottom:9px; color:var(--tx-2); font-size:16px; }
.doc ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--ember); }
.doc table{ width:100%; border-collapse:collapse; margin-bottom:20px; font-size:14.5px; }
.doc th, .doc td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--tx-2); }
.doc th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-4); font-weight:400; }
.doc .box{ padding:20px 22px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); margin-bottom:22px; }
.doc a{ color:var(--ember); text-decoration:underline; text-underline-offset:3px; }
.tbl-scroll{ overflow-x:auto; }

/* ---------- 27. Печенье (баннер) --------------------------------------- */
.cookiebar{
  position:fixed; z-index:600; left:14px; right:14px; bottom:14px;
  max-width:660px; margin:0 auto; padding:20px 22px; border-radius:var(--r-lg);
  background:rgba(12,14,20,.94); border:1px solid var(--line-2);
  backdrop-filter:blur(24px); box-shadow:0 24px 70px rgba(0,0,0,.7);
  display:none; gap:18px; align-items:center; flex-wrap:wrap;
}
.cookiebar.show{ display:flex; animation:rise-in .6s var(--ease) forwards; opacity:0; transform:translateY(18px); }
.cookiebar p{ flex:1 1 260px; font-size:14px; color:var(--tx-2); line-height:1.5; }
.cookiebar a{ color:var(--ember); text-decoration:underline; text-underline-offset:3px; }
.cookiebar .acts{ display:flex; gap:9px; flex-wrap:wrap; }
.cookiebar .btn{ padding:12px 20px; font-size:14px; }

/* ---------- 28. Мелкие живые детали ------------------------------------ */

/* блик, пробегающий по метке раздела */
.eyebrow{ position:relative; overflow:hidden; }
.eyebrow::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%); animation:eyeShine 6s ease-in-out infinite;
}
@keyframes eyeShine{ 0%,72%{ transform:translateX(-120%) } 88%,100%{ transform:translateX(120%) } }

/* уголок-скобка, дорисовывающийся на карточке при наведении */
.card::after{
  content:""; position:absolute; right:14px; top:14px; width:14px; height:14px;
  border-top:1.5px solid var(--ember); border-right:1.5px solid var(--ember);
  opacity:0; transform:translate(-7px,7px); pointer-events:none;
  transition:opacity .35s ease, transform .45s var(--ease);
}
.card:hover::after{ opacity:.85; transform:none; }

/* бегущая строка разворачивается по направлению прокрутки */
.marquee.rev .run{ animation-direction:reverse; }

/* подсказка «листайте» в первом экране */
.scroll-cue{
  position:absolute; z-index:6; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tx-4); pointer-events:none; transition:opacity .5s ease;
}
.scroll-cue.gone{ opacity:0; }
.scroll-cue i{ display:block; width:1px; height:36px; background:rgba(255,255,255,.14); position:relative; overflow:hidden; }
.scroll-cue i::after{
  content:""; position:absolute; left:0; right:0; height:14px;
  background:linear-gradient(transparent,var(--ember));
  animation:cueRun 2.1s ease-in-out infinite;
}
@keyframes cueRun{ 0%{ transform:translateY(-16px) } 65%,100%{ transform:translateY(36px) } }

/* слои, которые едут с параллаксом */
.blobs,.gridlines{ will-change:transform; }

/* ---------- 29. Мелочи -------------------------------------------------- */
.divider{ height:1px; background:var(--line); }
.center{ text-align:center; }
.mt-s{ margin-top:16px } .mt-m{ margin-top:26px } .mt-l{ margin-top:40px }
.stack{ display:flex; flex-direction:column; gap:clamp(22px,3vw,34px); }
.row{ display:flex; flex-wrap:wrap; gap:12px; }
.split{ display:grid; gap:clamp(32px,4vw,54px); align-items:start; }
@media(min-width:960px){ .split{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }