/* =========================================================================
   AWS: слой движения и типографического ритма (добавлено 2026-11-06)
   Всё, что прячет контент, работает только под html.aws-motion — класс
   ставит инлайн-скрипт в шапке и только когда анимации разрешены.
   Без JS и при prefers-reduced-motion страница остаётся обычной.
   ========================================================================= */

:root{
  --aws-ease:cubic-bezier(.22,.61,.36,1);
  --aws-accent:#834AFF;
  --aws-accent-2:#A683FF;
  --aws-cyan:#29A8FF;
  --aws-line:#E9E7F2;
  --aws-muted:#6E6E79;
  --aws-faint:#9A9AA6;
  --aws-surface:#F7F6FB;
  --aws-dark:#0E0B18;
}

/* ---------- шапка: тень только после прокрутки ---------- */
.top-bar{
  background-color:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.top-bar.is-stuck{
  background-color:rgba(255,255,255,.92);
  border-bottom-color:var(--aws-line);
  box-shadow:0 6px 24px rgba(12,11,16,.06);
}
/* у браузеров без backdrop-filter фон должен остаться непрозрачным */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .top-bar{background-color:#fff}
}

/* ---------- появление блоков ---------- */
.aws-motion .aws-rv{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--aws-ease), transform .7s var(--aws-ease);
}
.aws-motion .aws-rv.is-in{opacity:1;transform:none}
.aws-motion .aws-rv[data-aws-d="1"]{transition-delay:.07s}
.aws-motion .aws-rv[data-aws-d="2"]{transition-delay:.14s}
.aws-motion .aws-rv[data-aws-d="3"]{transition-delay:.21s}

/* ---------- построчный выезд заголовка ---------- */
/* padding сверху выводит из-под маски галочку Й и точки Ї: Bebas выносит их
   выше капвысоты, и при плотной межстрочной маска их срезала */
.aws-motion .aws-ln{display:block;overflow:hidden;padding-top:.16em;margin-top:-.16em}
.aws-motion .aws-ln>span{display:block;transform:translateY(105%);transition:transform .85s var(--aws-ease)}
.aws-motion .aws-split.is-lit .aws-ln>span{transform:translateY(0)}
.aws-motion .aws-ln:nth-child(2)>span{transition-delay:.08s}
.aws-motion .aws-ln:nth-child(3)>span{transition-delay:.16s}
.aws-motion .aws-ln:nth-child(4)>span{transition-delay:.24s}

/* ---------- лента этапов ---------- */
.aws-rail{position:relative;margin:34px 0 40px}
.aws-rail__line{position:absolute;left:0;right:0;top:27px;height:2px;background:var(--aws-line)}
.aws-rail__fill{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--aws-accent),var(--aws-cyan))}
.aws-rail__steps{display:grid;gap:12px;position:relative;grid-auto-flow:column;grid-auto-columns:1fr}
.aws-rail__step{text-align:center}
.aws-rail__dot{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#fff;
  border:2px solid var(--aws-line);display:grid;place-items:center;
  font-family:'Bebas Neue Cyrillic',sans-serif;font-size:22px;line-height:1;color:var(--aws-faint);
  transition:border-color .4s var(--aws-ease),color .4s,transform .4s var(--aws-ease),box-shadow .4s}
.aws-rail__step.on .aws-rail__dot{border-color:var(--aws-accent);color:var(--aws-accent);
  transform:scale(1.07);box-shadow:0 0 0 7px rgba(131,74,255,.1)}
.aws-rail__step b{display:block;font-size:15px;font-weight:500;line-height:1.3}
.aws-rail__step span{font-size:13px;color:var(--aws-faint)}
@media(max-width:860px){
  /* слева оставляем воздух: свечение кружка упиралось в край экрана */
  .aws-rail{padding-left:6px}
  .aws-rail__steps{grid-auto-flow:row;gap:20px}
  .aws-rail__line{left:34px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .aws-rail__fill{width:100%;height:0}
  /* подпись должна стоять под названием во второй колонке: при автопотоке
     грид уводил её на новую строку под кружок */
  .aws-rail__step{display:grid;grid-template-columns:58px 1fr;column-gap:16px;row-gap:3px;
    text-align:left;align-items:center}
  .aws-rail__dot{grid-column:1;grid-row:1 / span 2;align-self:center;margin:0;width:54px;height:54px;font-size:20px}
  .aws-rail__step b{grid-column:2;grid-row:1}
  .aws-rail__step span{grid-column:2;grid-row:2}
}

/* ---------- живой макет «заявка в Telegram» ---------- */
.aws-demo{background:var(--aws-surface);border-radius:28px;padding:32px;margin:36px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
@media(max-width:860px){.aws-demo{grid-template-columns:1fr;padding:20px}}
.aws-demo__txt h3{margin-top:0}
.aws-demo__txt p{color:var(--aws-muted)}
.aws-demo__replay{font-size:14px;color:var(--aws-faint);background:none;border:0;cursor:pointer;padding:0}
.aws-demo__replay:hover{color:var(--aws-accent)}
.aws-win{background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(12,11,16,.10);overflow:hidden}
.aws-win__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--aws-line)}
.aws-win__bar i{width:9px;height:9px;border-radius:50%;background:#E3E0EE;display:block}
.aws-win__url{margin-left:10px;font-size:12px;color:var(--aws-faint)}
.aws-win__body{padding:20px}
.aws-fld{margin-bottom:12px}
.aws-fld label{display:block;font-size:12px;color:var(--aws-faint);margin-bottom:5px}
.aws-fld__inp{height:42px;border:1px solid var(--aws-line);border-radius:11px;display:flex;align-items:center;
  padding:0 13px;font-size:15px;transition:border-color .3s}
.aws-fld.typing .aws-fld__inp{border-color:var(--aws-accent)}
.aws-caret{display:inline-block;width:1.5px;height:17px;background:var(--aws-accent);margin-left:1px;
  animation:aws-blink 1s steps(1) infinite}
@keyframes aws-blink{50%{opacity:0}}
.aws-send{height:46px;border-radius:12px;background:#0C0B10;color:#fff;display:grid;place-items:center;
  font-size:15px;transition:transform .2s var(--aws-ease),background .3s}
.aws-send.press{transform:scale(.97)}
.aws-send.done{background:#17B26A}
.aws-tg{background:var(--aws-dark);border-radius:16px;padding:18px;color:#fff;margin-top:16px;
  box-shadow:0 14px 40px rgba(12,11,16,.22)}
.aws-tg__hd{display:flex;align-items:center;gap:10px;padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.aws-tg__av{width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--aws-accent),var(--aws-cyan));display:grid;place-items:center;font-weight:700}
.aws-tg__hd b{font-size:15px;display:block}
.aws-tg__hd span{display:block;font-size:12px;color:#8E8AA3}
.aws-msg{background:rgba(255,255,255,.06);border-radius:13px;padding:13px 15px;font-size:14.5px;line-height:1.5}
.aws-motion .aws-msg{opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .45s var(--aws-ease),transform .45s var(--aws-ease)}
.aws-motion .aws-msg.in{opacity:1;transform:none}
.aws-msg b{color:var(--aws-accent-2)}
.aws-msg .aws-msg__t{display:block;margin-top:7px;font-size:11.5px;color:#8E8AA3}

/* ---------- счётчики ---------- */
.aws-counts{display:flex;gap:44px;flex-wrap:wrap;margin:34px 0;padding-top:28px;border-top:1px solid var(--aws-line)}
.aws-count b{display:block;font-family:'Bebas Neue Cyrillic',sans-serif;font-size:46px;line-height:1}
.aws-count span{font-size:14px;color:var(--aws-faint)}

@media (prefers-reduced-motion: reduce){
  .aws-motion .aws-rv,
  .aws-motion .aws-msg{opacity:1!important;transform:none!important}
  .aws-motion .aws-ln>span{transform:none!important}
}