/* ============ DESIGN SYSTEM ============ */
:root{
  --blue:#236FEA; --violet:#B743FF; --cyan:#69E1F4;
  --grad:linear-gradient(92deg,#69E1F4 -20%,#236FEA 45%,#B743FF 105%);
  --grad-soft:linear-gradient(180deg,rgba(105,225,244,.10),rgba(183,67,255,.06));
  --ink:#2C2B32; --muted:#7E7D83; --border:#E6E6EA; --bg:#fff;
  --dark:#141319; --dark-2:#1E1C26; --dark-card:#232030; --dark-border:#332F42; --dark-muted:#A7A3B5;
  --r-card:18px; --r-btn:12px; --wrap:1180px; --dur:.22s;
  --shadow:0 2px 16px rgba(24,24,40,.06); --shadow-hover:0 14px 34px rgba(20,20,40,.10);
  --font:'Nunito Sans',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',monospace;
}
/* Китайская версия. В Nunito Sans и IBM Plex Mono нет иероглифов, и без этого
   браузер подставляет что придётся — обычно засечный шрифт вразнобой с макетом.
   Латиница и цифры по-прежнему берутся из Nunito Sans, иероглифы проваливаются
   в системные CJK-шрифты: они есть на всех платформах и ничего не весят,
   поэтому веб-шрифт на несколько мегабайт не грузим. */
html[lang^="zh"]{
  --font:'Nunito Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --mono:'IBM Plex Mono','PingFang SC','Microsoft YaHei',monospace;
}
/* Внутри SVG наследования от body нет — табличке пикета шрифт задаём отдельно. */
.picket-cjk{font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* якорь не должен уезжать под липкую шапку основного сайта */
[id]{scroll-margin-top:78px}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ============ UTILITIES ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* .eyebrow (теги-надзаголовки) удалён намеренно — на фронте не показываем. */
/* 820, а не 720: «Поручите то, что съедает ваш день» при 44px требует 761px,
   иначе последнее слово срывается на отдельную строку. У .sec-sub своя мера — 640px. */
.sec-head{margin-bottom:44px;max-width:820px}
.sec-title{font-size:clamp(28px,3.6vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.12;margin-top:14px}
.sec-title-light{color:#fff}
.sec-sub{margin-top:16px;font-size:17px;color:var(--muted);max-width:640px}
.sec-sub-light{color:var(--dark-muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* потолок 44px: колонка hero-copy равна ~569px, «а ассистент из 2032 года»
   при 44px требует 530px и влезает в строку; при 48px срывается на третью */
h1{font-size:clamp(32px,4.4vw,44px);font-weight:900;letter-spacing:-.022em;line-height:1.09}
.sub{margin-top:20px;font-size:clamp(16px,1.6vw,20px);color:var(--muted);max-width:600px}
section{padding:88px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:var(--r-btn);
  font-weight:800;font-size:15px;cursor:pointer;border:none;transition:transform var(--dur),box-shadow var(--dur),filter var(--dur);white-space:nowrap}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(35,111,234,.28)}
.btn-grad:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-block{width:100%;justify-content:center;padding:16px}
.ar{transition:transform var(--dur)}
.btn:hover .ar{transform:translateX(3px)}

/* ============ HERO ============ */
.hero{padding:56px 0 64px;background:var(--grad-soft);position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center}
.hero-copy h1{margin:0}
/* .hero-note — плашка «закрытый бета-тест», вынесена из hero; класс оставлен под будущий отдельный блок */
.hero-note{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-lead{margin-top:20px;max-width:520px;font-size:clamp(16px,1.7vw,19px);color:var(--muted);line-height:1.6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0}
.badges-c{justify-content:center}
.badge{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:100px;background:#fff;border:1px solid var(--border);color:var(--muted)}
.badge-grad{background:var(--grad);color:#fff;border:none}
.badge-new{background:rgba(183,67,255,.10);color:var(--violet);border-color:rgba(183,67,255,.25)}

/* --- hero visual: аватар SHADO + облачко --- */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-start}

/* Круг, а не кадр. Прямоугольник в рамке читался как вставка на странице;
   круг читается как аватар. Кроп квадратный, лицо в центре.
   overflow НЕ здесь: свечение и орбиты должны выходить наружу. */
.shado{position:relative;width:min(400px,74vw);aspect-ratio:1;margin:0 auto}

/* Свечение: аватар подсвечивает страницу вокруг себя.
   Период совпадает с дыханием: аура должна вздыматься вместе с ней. */
.shado-glow{position:absolute;inset:-16%;border-radius:50%;z-index:0;pointer-events:none;filter:blur(34px);
  background:radial-gradient(closest-side,rgba(105,225,244,.52),rgba(183,67,255,.24) 58%,transparent 80%);
  animation:bloom 4.6s ease-in-out infinite}

/* Импульсы: кольцо расходится от аватара и гаснет — «она на связи».
   Второе идёт со сдвигом в половину цикла, чтобы волна не прерывалась. */
.shado-ripple{position:absolute;inset:-8px;border-radius:50%;z-index:1;pointer-events:none;
  border:1.5px solid rgba(35,111,234,.45);animation:ripple 4.4s ease-out infinite}
.shado-ripple-2{animation-delay:2.2s}

/* Фон под цвет нижнего края кадра — страховка от щели в доли пикселя,
   когда портрет на вдохе растягивается. */
.shado-disc{position:relative;z-index:2;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:#313844;box-shadow:0 0 0 7px #fff,0 20px 46px rgba(20,20,45,.20)}
/* Точка отсчёта чуть выше центра: кадр расширяется во все стороны, вверх
   немного больше. От нижнего края расти нельзя — фигура тянется вверх колом. */
.shado-disc img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:50% 58%;animation:breathe 4.6s ease-in-out infinite}

/* Дуга фирменного градиента обегает аватар по краю. Маска оставляет от
   конического градиента только кольцо в 3px — заливка внутри не нужна. */
.shado-ring{position:absolute;inset:-9px;border-radius:50%;z-index:3;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg 248deg,rgba(105,225,244,.95) 302deg,rgba(183,67,255,.95) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
          mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:spin 14s linear infinite}

/* Пунктирная орбита с точкой, против часовой — встречное движение к дуге. */
.shado-orbit{position:absolute;inset:-30px;border-radius:50%;z-index:4;pointer-events:none;
  border:1.5px dashed rgba(35,111,234,.28);animation:spin 32s linear infinite reverse}
.shado-orbit::after{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--grad);box-shadow:0 0 14px rgba(105,225,244,.95)}

/* Скан-линия: медленная светлая полоса сверху вниз внутри диска. */
.shado-scan{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(150,225,255,.11) 46%,rgba(150,225,255,.17) 50%,rgba(150,225,255,.11) 54%,transparent);
  background-size:100% 38%;background-repeat:no-repeat;
  animation:scan 11s linear infinite}

/* Вдох на 45% цикла, выдох длиннее — как у живого человека. Масштаб строго
   равномерный: разная скорость по осям меняет пропорции лица, и это сразу
   заметно как дефект. Плюс контур подсвечивается — она светящаяся, яркость
   читается не хуже размера и ничего не искажает. */
@keyframes breathe{0%,100%{transform:scale(1);     filter:brightness(1)}
                   45%    {transform:scale(1.075); filter:brightness(1.22)}}
@keyframes bloom  {0%,100%{opacity:.55}45%{opacity:1}}
@keyframes scan   {0%{background-position:0 -60%}100%{background-position:0 160%}}
@keyframes spin   {to{transform:rotate(360deg)}}
/* 1.26 — потолок: дальше кольцо упирается в край секции и срезается. */
@keyframes ripple {0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(1.26);opacity:0}}

/* На узком экране орбита не помещается в колонку и режется по бокам. */
@media(max-width:620px){
  .shado{width:min(340px,74vw)}
  .shado-orbit{inset:-18px}
}

/* --- speech bubble (same recipe as airelations.ru hero) --- */
/* z-index выше орбиты: иначе её точка проезжает сквозь текст реплики. */
.speech{position:absolute;top:-26px;right:-34px;z-index:6;max-width:274px;
  padding:14px 20px;border:2px solid #1A1A24;border-radius:22px;background:#fff;
  font-size:17.5px;font-weight:800;line-height:1.32;color:var(--ink);
  box-shadow:6px 8px 0 rgba(15,16,32,.1);animation:bob 6s ease-in-out infinite}
.speech b{font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.speech::before,.speech::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.speech::before{left:38px;bottom:-16px;border-width:16px 14px 0 0;border-color:#1A1A24 transparent transparent}
.speech::after{left:41px;bottom:-11px;border-width:13px 11px 0 0;border-color:#fff transparent transparent}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Вторая фраза скрыта по умолчанию: показывает её только скрипт печати.
   Без JS и при отключённой анимации остаётся одна фраза — вместе они дают
   пять строк, и облачко закрывает аватару лицо. */
.speech .sp-a{transition:opacity .3s ease}
.speech .sp-b{display:none}
/* Курсор печати. main.js убирает его, когда реплика допечатана. */
.speech .sp-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
  background:var(--ink);animation:caret .9s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .speech{animation:none}
  /* .shado-ripple обязательно здесь: иначе анимация перебьёт opacity:0 ниже. */
  .shado-glow,.shado-disc img,.shado-scan,.shado-ring,.shado-orbit,.shado-ripple{animation:none}
  .shado-scan,.shado-ripple{opacity:0}
}


/* ============ CARD ROWS (features / personas) ============ */
.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* сценариев четыре — иначе четвёртая карточка висит одна во втором ряду */
.card-row-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1024px){.card-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow);transition:transform var(--dur),box-shadow var(--dur)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
/* иконка в одну строку с заголовком — карточка становится ниже */
.card-top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.card-ico{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--grad-soft);color:var(--blue)}
.card-ico svg{width:24px;height:24px}
.card h3{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.card-desc{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
.card-ex{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);font-size:14px;font-weight:700;color:var(--ink);display:flex;gap:8px}
.card-ex::before{content:"›";color:var(--blue);font-weight:900}
.swipe-hint{display:none;font-family:var(--mono);font-size:12px;color:var(--blue)}

/* ============ 6 · КАК УСТРОЕНО (тёмный блок) ============ */
.tech{background:var(--dark);color:#fff}
/* «Чего не сделает никогда» — акцентный блок, а не приписка */
.sec-never{margin-top:30px;background:var(--dark-2);border:1px solid var(--dark-border);border-radius:24px;
  padding:34px 34px 30px;position:relative;overflow:hidden}
.sec-never::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.sec-never-title{font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.02em;line-height:1.15;color:#fff}
.never-hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-never-sub{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--dark-muted);max-width:56ch}
.sec-never-items{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px}
.sec-never-items li{display:flex;align-items:flex-start;gap:11px;font-size:15px;font-weight:700;color:#fff;
  padding-top:12px;border-top:1px solid var(--dark-border)}
.sec-never-items i{flex:0 0 auto;color:var(--cyan);margin-top:1px}
.sec-never-items svg{width:19px;height:19px;display:block}

/* ============ FAQ ============ */
.faq-in{max-width:860px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:17px;font-weight:800;color:var(--ink);text-align:left}
.faq-q .fi{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform var(--dur)}
.faq-q .fi::before,.faq-q .fi::after{content:"";position:absolute;background:var(--blue);border-radius:2px}
.faq-q .fi::before{top:10px;left:2px;width:18px;height:2px}
.faq-q .fi::after{top:2px;left:10px;width:2px;height:18px;transition:transform var(--dur)}
.faq-item.open .fi::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 22px;color:var(--muted);font-size:15px;line-height:1.6}

/* ============ TEAM ============ */
.team-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.team-member{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow)}
.team-member img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.team-member figcaption{padding:18px 20px 20px}
.team-member h3{font-size:17px;font-weight:800}
.team-member span{font-size:14px;color:var(--muted);font-weight:600}
.team-note{margin-top:24px;text-align:center;font-size:14px;color:var(--muted);font-weight:600}


/* ============ ТОНАЛЬНЫЙ РИТМ СЕКЦИЙ ============ */
/* белый → серый → белый → серый → тёмный → белый → серый */
.friction,.audience,.team{background:#FAFAFB}

.sec-head-c{margin-left:auto;margin-right:auto;text-align:center}
/* маскот с пикетом над заголовком «Это не для всех» */
/* размер подобран так, чтобы правая колонка (скрепка + плитка) не переросла
   левую — иначе плитку некуда прижимать и низы колонок расходятся */
.warn-mascot{position:relative;width:240px;height:258px;margin:0 auto}
/* скрепка рисуется ПОСЛЕ пикета — древко уходит за её корпус, будто она его держит.
   Табличка поднята над головой, чтобы не перекрывать лицо. */
.warn-mascot img{position:absolute;left:26px;bottom:0;width:71px;height:auto}
.picket{position:absolute;left:16px;top:0;width:154px;height:auto;
  transform:rotate(-5deg);transform-origin:50% 100%;
  filter:drop-shadow(0 12px 22px rgba(200,40,30,.22))}
.sec-head-c .sec-title{margin-top:0}
@media(max-width:860px){
  .warn-mascot{width:216px;height:232px;margin-bottom:12px}
  .warn-mascot img{width:64px;left:23px}
  .picket{width:171px;left:14px}
}
.sec-head-c .sec-sub{margin-left:auto;margin-right:auto}

/* ============ 2 · ЧЕЛОВЕК-НЕВИДИМКА ============ */
.mf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mf{position:relative;isolation:isolate;text-align:center;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-card);padding:30px 24px 28px;box-shadow:var(--shadow);
  transition:transform var(--dur),box-shadow var(--dur)}
.mf:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
/* Иконка манифеста — не тонкий штрих на бледной подложке, а плотный
   фирменный градиент с белым глифом: карточка получает вес и цвет. */
.mf-ico{position:relative;width:72px;height:72px;display:grid;place-items:center;
  border-radius:20px;background:var(--grad);color:#fff;margin:0 auto 20px;
  box-shadow:0 10px 24px rgba(35,111,234,.26)}
/* мягкий ореол под плиткой — глубина без лишней рамки */
.mf-ico::after{content:"";position:absolute;inset:6px 6px -6px;border-radius:20px;
  background:var(--grad);filter:blur(16px);opacity:.34;z-index:-1}
.mf-ico svg{width:34px;height:34px;stroke-width:1.6}
.mf h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.mf p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
@media(max-width:1024px){.mf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============ 3 · БЕЗ ИНТЕРФЕЙСОВ ============ */
/* Визуальная единица блока — сам контраст «зачёркнуто → обещание», а не иконки */
/* ширина ограничена: в контейнере 1180px пара «было → стало» уезжала
   к середине страницы и отрывалась от заголовка слева */
.fr-list{display:flex;flex-direction:column;gap:0;max-width:800px;
  border-top:1px solid var(--border)}
/* зачёркнутое прижато вправо, к стрелке: пара «было → стало» должна читаться
   как одно движение, а не как две колонки на разных концах экрана */
/* Ширина первой колонки ФИКСИРОВАНА, а не auto: каждая .fr — отдельный грид,
   треки между строками не общие, и при auto стрелки вставали вразнобой. */
.fr{display:grid;grid-template-columns:220px 16px 1fr;align-items:center;gap:18px;
  padding:22px 4px;border-bottom:1px solid var(--border)}
.fr-no{text-align:right;font-size:clamp(15px,1.7vw,18px);font-weight:800;color:#B9B8BF;text-decoration:line-through;
  text-decoration-thickness:2px;text-decoration-color:rgba(216,72,63,.55)}
.fr-arrow{font-size:20px;font-weight:900;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fr-yes{font-size:clamp(15px,1.7vw,18px);font-weight:800;letter-spacing:-.01em;color:var(--ink)}
@media(max-width:700px){
  .fr{grid-template-columns:1fr;gap:6px;padding:18px 2px}
  .fr-arrow{display:none}
  /* text-align:right нужен только под выравнивание стрелок на десктопе */
  .fr-no{text-align:left;font-size:15px}
  .fr-yes{font-size:18px}
}

/* ============ 6 · ПЛИТКА ПЛАТФОРМЫ (в техблоке) ============ */
.tech-platform{position:relative;overflow:hidden;border-radius:26px;margin-bottom:18px;
  min-height:280px;display:flex;align-items:flex-end;background:#07070C}
.tech-platform img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tech-platform::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78%;pointer-events:none;
  background:linear-gradient(to top,#07070C 0%,rgba(7,7,12,.92) 30%,rgba(7,7,12,.6) 60%,transparent 100%)}
.tech-platform-over{position:relative;z-index:1;padding:38px 32px 30px;max-width:620px}
.tech-platform-over h3{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;color:#fff}
.tech-platform-over p{margin-top:10px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.74)}
.tech-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-weight:800;font-size:15px;color:var(--cyan)}
.tech-link:hover{text-decoration:underline}

.tech-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.sbadge{font-size:13px;font-weight:700;color:var(--ink);background:#F4F4F7;
  border:1px solid var(--border);padding:8px 14px;border-radius:100px}
.sbadge-dark{background:var(--dark-2);border-color:var(--dark-border);color:#fff}



/* ============ 3 · СЕТКА ОБЪЕДИНЁННОГО БЛОКА ============ */
/* панель активности по высоте content-fit и отцентрована относительно блока */
.fr-in{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:center}
.fr-copy{display:flex;flex-direction:column;justify-content:center}
.fr-copy .sec-head{margin-bottom:28px}

/* ============ 3 · ЖИВАЯ АКТИВНОСТЬ ============ */
.transp-demo{display:flex;flex-direction:column;background:var(--dark);border-radius:20px;
  padding:22px;box-shadow:0 20px 50px rgba(20,20,40,.18)}
.demo-head{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:14px;
  font-family:var(--mono);padding-bottom:14px;border-bottom:1px solid var(--dark-border)}
.demo-dot{width:9px;height:9px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.demo-log{display:flex;flex-direction:column;gap:13px;margin-top:18px}
.demo-line{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.45;
  color:var(--dark-muted);opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s}
.demo-line.on{opacity:1;transform:none}
.demo-line .demo-txt{padding-top:3px}
/* каретка печати — только у строки, которая печатается прямо сейчас */
.demo-line.typing .demo-txt::after{content:"";display:inline-block;width:2px;height:1em;
  margin-left:2px;vertical-align:-2px;background:var(--cyan);animation:caret .8s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.demo-badge{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:rgba(105,225,244,.12);color:var(--cyan)}
.demo-badge svg{width:15px;height:15px}
.demo-line.done .demo-badge{background:rgba(74,222,128,.14);color:#4ADE80}
.demo-line.done{color:#fff;font-weight:700}

@media(max-width:900px){
  .fr-in{grid-template-columns:1fr;gap:32px}
}


/* ============ 5 · ЭТО НЕ ДЛЯ ВСЕХ ============ */
/* Слева заголовок и две плитки, справа скрепка с пикетом и третья плитка под ней */
/* Левая колонка — ОДНА область на обе строки: иначе заголовок прижимается
   к верху своей строки, а плитки к низу второй, и между ними зияет пустота
   высотой со скрепку. */
/* align-items:stretch — левая колонка тянется на всю высоту блока,
   иначе под плитками остаётся пустота высотой с правую колонку */
/* обе колонки одной ширины: плитки не растягиваются под длину строки,
   и между ними не появляется пустая полоса */
.aud-in{display:grid;grid-template-columns:repeat(2,minmax(0,520px));gap:34px 40px;align-items:stretch;
  grid-template-areas:"left right"}
.aud-left{grid-area:left;display:flex;flex-direction:column}
/* описание по ширине плиток — левая колонка читается одним столбцом */
.aud-head{margin-bottom:26px;max-width:none}
.aud-head .sec-sub{max-width:none}
.aud-head .sec-title{margin-top:0}
/* Плитки столбиком, а не в ряд: так левая колонка сама дорастает до высоты
   правой (скрепка + плитка), и ничего не приходится растягивать.
   Растянутая плитка без картинки всегда даёт пустоту внутри — см. bento.md. */
.aud-tiles{display:grid;grid-template-columns:1fr;gap:16px}
/* правая колонка — флекс: скрепка сверху, плитка прижата к низу,
   поэтому её нижняя грань совпадает с нижней гранью левой колонки */
.aud-right{grid-area:right;display:flex;flex-direction:column}
.audience .warn-mascot{margin:0 auto}
.aud-third{margin-top:auto}

@media(max-width:900px){
  .aud-in{grid-template-columns:1fr;gap:24px;grid-template-areas:"left" "right"}
  .aud-right{gap:24px}
  .aud-third{margin-top:0}
  .aud-tiles{margin-top:24px}
}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ============ CAROUSEL DOTS ============ */
.cdots{display:none;justify-content:center;flex-wrap:wrap;gap:0;margin-top:8px}
/* точка визуально 8px, но зона нажатия 22×38 за счёт padding + content-box:
   палец попадает, а ряд из 9 точек всё равно влезает в 375px */
.cdot{width:8px;height:8px;box-sizing:content-box;padding:15px 7px;background-clip:content-box;
  border-radius:99px;border:none;background-color:var(--border);cursor:pointer;transition:var(--dur)}
.cdot.active{background-color:var(--blue);width:22px}
.tech .cdot{background-color:var(--dark-border)}
.tech .cdot.active{background-color:var(--cyan)}

.dbr{display:none}

/* --- бегущая полоса про закрытый набор: тёмная, в киберпанке маскота --- */
.ticker{display:block;position:relative;overflow:hidden;padding:18px 0;isolation:isolate;
  background:#0B0B11;color:#fff;
  border-top:1px solid rgba(105,225,244,.30);border-bottom:1px solid rgba(105,225,244,.30);
  box-shadow:inset 0 0 70px rgba(105,225,244,.12)}
/* строчная развёртка, как на рендерах скрепки */
.ticker::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(to bottom,rgba(105,225,244,.09) 0 1px,transparent 1px 4px)}
/* края уходят в темноту — текст не обрубается о границу экрана */
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,#0B0B11,transparent 12%,transparent 88%,#0B0B11)}
.ticker-track{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker-run{display:flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap}
.ticker-run i{font-style:italic;font-weight:900;font-size:clamp(16px,2vw,22px);letter-spacing:-.01em;
  transform:skewX(-6deg);display:inline-block;text-shadow:0 0 20px rgba(105,225,244,.45)}
.ticker-run b{font-size:11px;color:var(--cyan);text-shadow:0 0 12px rgba(105,225,244,.8)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* --- безопасность: визуальные якоря над сеткой гарантий --- */
.secshots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:34px}
.secshot{border-radius:20px;overflow:hidden;background:var(--dark-2);border:1px solid var(--dark-border)}
.secshot img{width:100%;height:auto;display:block}
.secshot figcaption{padding:18px 20px 20px}
.secshot b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff}
.secshot span{display:block;margin-top:7px;font-size:13px;line-height:1.55;color:var(--dark-muted)}

/* ============ БЕНТО (внутри hero) ============ */
/* Собрано mobile-first: сначала одна колонка с порядком по важности,
   десктоп надстроен сверху через grid-template-areas — как в эпловских бенто,
   где на мобилке плитки не просто сжимаются, а перестраиваются по приоритету. */
/* Мобильная база — не столбик из 10 плиток, а мозаика 2×N: короткие плитки
   («Говорит и решает» + 24/7) встают парой, текстовые остаются во всю ширину.
   Порядок — по важности, а не по DOM. */
.bento{display:grid;gap:8px;padding:8px;border-radius:22px;background:#F3F3F8;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:
    "memory memory"
    "voice  voice"
    "calls  calls"
    "find   find"
    "cal    cal"
    "docs   docs"
    "crew   crew"
    "wave   uptime"
    "tg     tg"}
.bt-a-memory{grid-area:memory} .bt-a-voice{grid-area:voice}
.bt-a-calls{grid-area:calls}   .bt-a-wave{grid-area:wave}
.bt-a-tg{grid-area:tg}         .bt-a-uptime{grid-area:uptime}
.bt-a-find{grid-area:find}     .bt-a-cal{grid-area:cal}
.bt-a-docs{grid-area:docs}     .bt-a-crew{grid-area:crew}

.bt{position:relative;overflow:hidden;border-radius:16px;padding:18px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  min-height:112px}
.bt-h{font-size:16px;font-weight:800;letter-spacing:-.01em}
.bt-p{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:34ch}
.bt-s{font-style:normal;font-size:12.5px;color:var(--muted)}
.bt-big{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.08}
.bt-a-uptime .bt-big{font-size:clamp(30px,3.4vw,42px);line-height:1}
.bt-ico{color:var(--blue)}
.bt-ico svg{width:24px;height:24px}
.bt-ico-tg{color:#2AABEE}
.bt-txt{gap:10px}
/* иконка и заголовок в одну строку — плитки становятся ниже */
.bt-top{display:flex;align-items:center;justify-content:center;gap:10px}

/* плитки с рендером: картинка во всю плитку, подпись снизу слева поверх шторки */
.bt-shot{padding:0;justify-content:flex-end;align-items:stretch;text-align:left;border-radius:20px;min-height:186px}
.bt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;
  background:linear-gradient(to top,#07070C 0%,rgba(7,7,12,.92) 28%,rgba(7,7,12,.6) 58%,transparent 100%)}
.bt-over{position:relative;z-index:1;padding:26px 20px 18px;color:#fff}
.bt-title{font-size:clamp(22px,2.3vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.bt-title-s{font-size:clamp(20px,2vw,24px)}

/* --- плитка Telegram: подпись + мокап переписки ---
   Правила идут ПОСЛЕ .bt: специфичность одинаковая, решает порядок. */
.bt-a-tg{display:block;text-align:left;padding:22px}
.tg-copy .bt-top{justify-content:flex-start}
.tg-copy .bt-p{max-width:30ch}

/* До десктопа — обычный чат столбиком: узкая колонка, реплики рядом.
   Стрелки здесь скрыты: при переносе они вставали сбоку от сообщений и
   указывали вправо там, где разговор идёт вниз. */
.tg-flow{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px;max-width:420px}
.tg-flow .tg-out{align-self:flex-end}
.tg-arrow{display:none}
.tg-msg{max-width:100%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45}
.tg-in{background:#F2F3F7;color:var(--ink);border-bottom-left-radius:5px}
.tg-out{background:var(--grad);color:#fff;border-bottom-right-radius:5px;
  display:flex;align-items:center;gap:10px}
.tg-arrow{flex:0 0 auto;color:var(--muted);font-size:15px;line-height:1}


.tg-play{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.22)}
.tg-play svg{width:15px;height:15px}
.tg-wave{display:flex;align-items:center;gap:2.5px;height:20px}
.tg-wave i{width:2.5px;border-radius:2px;background:currentColor;opacity:.9}
/* Высоты полосок циклом по семи: осциллограмма без единого inline-стиля,
   иначе она не прошла бы CSP, который здесь ограничивает style-src. */
.tg-wave i:nth-child(7n+1){height:38%}  .tg-wave i:nth-child(7n+2){height:72%}
.tg-wave i:nth-child(7n+3){height:100%} .tg-wave i:nth-child(7n+4){height:54%}
.tg-wave i:nth-child(7n+5){height:86%}  .tg-wave i:nth-child(7n+6){height:30%}
.tg-wave i:nth-child(7n+7){height:64%}
.tg-dur{flex:0 0 auto;font-size:12px;font-weight:700;opacity:.9}

.tg-file{display:flex;align-items:center;gap:11px}
.tg-doc{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  background:#fff;color:var(--blue)}
.tg-doc svg{width:17px;height:17px}
.tg-doc-t{display:flex;flex-direction:column;line-height:1.3}
.tg-doc-t b{font-size:13px;font-weight:800}
.tg-doc-t i{font-style:normal;font-size:11.5px;color:var(--muted)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Брейкпоинты плитки лежат ниже, после сеток бенто: .bt задаёт padding внутри
   своих медиазапросов, и при равной специфичности решает порядок в файле. */
.bt-sub{margin-top:7px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.68)}

/* «Наш код»: тёмная плитка с бегущими строками кода на фоне */
.bt-code{background:#0B0B11;color:#fff;text-align:center;min-height:170px}
.bt-code .bt-p{color:rgba(255,255,255,.74)}
.bt-code .bt-h,.bt-code .bt-p{position:relative;z-index:1}
.bt-matrix{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(62% 70% at 50% 50%,transparent 12%,#000 88%);
  mask-image:radial-gradient(62% 70% at 50% 50%,transparent 12%,#000 88%)}
/* каждый столбец — строка кода, повёрнутая вертикально; едет на фиксированные 320px,
   поэтому при любой высоте плитки в кадре всегда есть текст */
.bt-matrix i{position:absolute;top:-300px;font-family:var(--mono);font-size:13px;
  color:#69E1F4;opacity:.62;text-shadow:0 0 10px rgba(105,225,244,.35);
  white-space:pre;writing-mode:vertical-rl;letter-spacing:.22em;
  animation:mtx 12s linear infinite}
.bt-matrix i::before{content:"agent.run 01 session 10 sandbox 11 tool.call 0 memory 101 audit 1"}
.bt-matrix i:nth-child(1){left:3%;animation-duration:11s;animation-delay:-1s}
.bt-matrix i:nth-child(2){left:15%;animation-duration:15s;animation-delay:-7s;opacity:.45}
.bt-matrix i:nth-child(3){left:27%;animation-duration:9s;animation-delay:-4s;opacity:.6}
.bt-matrix i:nth-child(4){left:39%;animation-duration:17s;animation-delay:-11s;opacity:.4}
.bt-matrix i:nth-child(5){left:55%;animation-duration:13s;animation-delay:-2s;opacity:.5}
.bt-matrix i:nth-child(6){left:67%;animation-duration:10s;animation-delay:-8s;opacity:.7}
.bt-matrix i:nth-child(7){left:79%;animation-duration:16s;animation-delay:-5s;opacity:.42}
.bt-matrix i:nth-child(8){left:91%;animation-duration:12s;animation-delay:-13s;opacity:.62}
@keyframes mtx{from{transform:translateY(0)}to{transform:translateY(320px)}}
@media(prefers-reduced-motion:reduce){.bt-matrix i{animation:none}}

.bt-a-wave{gap:16px}
.bt-wave{width:min(220px,82%);height:auto}

.bt-status2{flex-direction:row;gap:12px;padding:16px 20px;min-height:0;background:#fff}
.bt-status2{text-align:left}
.bt-status2 .bt-h{font-size:14.5px;line-height:1.25}
/* на десктопе название и номер в одну строку, на узком — в две */
.st-txt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.st-num{font-family:var(--mono);font-size:11.5px;font-style:normal;letter-spacing:.04em;color:var(--muted)}
@media(max-width:560px){.st-txt{display:block}.st-num{display:block;margin-top:3px}}

/* мягкий отклик на наведение */
@media(hover:hover){
  .bt{transition:transform var(--dur),box-shadow var(--dur)}
  .bt:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,20,45,.10)}
}

/* Планшет: две колонки, приоритет сохраняется.
   ВАЖНО: перечислены все десять плиток. Раньше здесь было шесть, а find, cal,
   docs и crew оставались без области — браузер разбрасывал их по неявным
   колонкам, и на 620–959px сетка ломалась в четыре трека, один нулевой. */
@media(min-width:620px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;border-radius:28px;
    grid-template-areas:
      "memory memory"
      "voice  calls"
      "find   cal"
      "docs   crew"
      "wave   uptime"
      "tg     tg"}
  .bt{padding:22px;min-height:130px;border-radius:18px}
  .bt-shot{min-height:230px;border-radius:24px}
  .bt-over{padding:34px 26px 24px}
}
/* десктоп: полноценное бенто на 6 колонок */
@media(min-width:960px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr));border-radius:32px;
    grid-template-areas:
      "memory memory memory voice  voice  voice"
      "memory memory memory calls  calls  calls"
      "find   find   wave   wave   cal    cal"
      "docs   docs   uptime uptime crew   crew"
      "tg     tg     tg     tg     tg     tg"}
  .bt{padding:26px}
  .bt-shot{min-height:0}
  .bt-a-memory{min-height:330px}
}

/* Плитка Telegram, планшет и выше: подпись слева, переписка справа.
   Иначе чат прижимается влево, а правая половина плитки пустует. */
@media(min-width:620px){
  /* Левый отступ равен отступу подписи в «Помнит всё» (padding плитки + padding
     шторки): содержимое обеих плиток встаёт на одну вертикаль. */
  .bt-a-tg{display:grid;grid-template-columns:236px minmax(0,1fr);gap:30px;align-items:center;
    padding:24px 48px}
  .tg-flow{margin-top:0}
  .tg-copy{padding-left:20px}     /* сдвиг подписи вправо, по просьбе */
  .tg-copy .bt-p{max-width:none}
}
/* Десктоп: цепочка вытягивается в строку, между репликами появляются стрелки.
   Внутренняя сетка плитки повторяет бенто — те же шесть колонок и тот же зазор.
   Подпись занимает первые две и центрируется в них, поэтому её ось совпадает
   с осью «Находит и проверяет» и «Документы» сверху: без подгонки пикселей
   и на любой ширине экрана. */
@media(min-width:960px){
  .bt-a-tg{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:24px 0}
  .tg-copy{grid-column:1/3;padding-left:0;text-align:center}
  .tg-copy .bt-top{justify-content:center}
  .tg-flow{grid-column:3/-1;flex-direction:row;align-items:center;justify-content:flex-end;
    gap:12px;max-width:none;padding-right:52px}
  .tg-flow .tg-out{align-self:auto}
  .tg-arrow{display:block}
}

/* ============ MOBILE ============ */
/* Принцип: каждый блок читается примерно за один экран телефона (375×812).
   Главный рычаг — ряды карточек превращаются в горизонтальные карусели:
   вместо N карточек в столбик высота блока становится «одна карточка». */
@media(max-width:860px){
  /* единый вертикальный ритм: одно значение на все секции */
  section{padding:40px 0}
  .hero{padding:26px 0 34px}
  .sec-head{margin-bottom:22px}
  .sec-sub{margin-top:12px;font-size:15.5px}
  .dbr{display:inline}


  /* Порядок первого экрана как в слайдере airelations.ru:
     заголовок → лид → маскот → кнопки. Кнопки прижаты под маскот,
     а не разрывают связку «текст ↔ скрепка». */
  .hero-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  /* кегль подобран так, чтобы «Ашад – AI-консьерж,» влезало в строку целиком
     вплоть до 360px; перенос <br> сохраняется, как на десктопе */
  .hero-copy h1{order:1;margin-top:0;font-size:min(8.2vw,34px)}
  .hero-lead{order:2;margin-top:14px}
  .hero-visual{order:3;margin-top:20px}
  .hero-cta{order:4;margin-top:20px;gap:10px}
  .lead-tail{display:none}
  .hero-visual{flex-direction:column;align-items:center}
  .hero-mascot{width:120px;margin-top:0}
  /* position:relative, а НЕ static: хвостики ::before/::after позиционируются
     абсолютно, и при static они цепляются за .hero-visual и уезжают под скрепку */
  .speech{position:relative;inset:auto;max-width:min(330px,94%);margin:0 auto 14px;animation:none}
  .speech::before{left:calc(50% - 16px)}
  .speech::after{left:calc(50% - 13px)}

  .swipe-hint{display:inline}

  /* --- ряды карточек -> карусель во всю ширину экрана --- */
  .card-row,.mf-grid,.team-row,.secshots{
    display:flex;grid-template-columns:none;gap:12px;
    margin:0 -24px;padding:2px 24px 8px;              /* выходим из padding .wrap, край в край */
    overflow-x:auto;overflow-y:hidden;                /* overflow-y:hidden — иначе auto по X включает и Y */
    scroll-snap-type:x mandatory;scroll-padding-left:24px;
    -webkit-overflow-scrolling:touch}
  .card-row::-webkit-scrollbar,.mf-grid::-webkit-scrollbar,
  .team-row::-webkit-scrollbar,.secshots::-webkit-scrollbar{display:none}
  .card-row>*,.mf-grid>*,.team-row>*,.secshots>*{
    flex:0 0 80vw;min-width:0;scroll-snap-align:start}
  /* Внутри каруселей проявление по скроллу отключено целиком.
     Сдвиг распирал бы контейнер прокрутки, а прозрачность оказалась хуже:
     карточки за правым краем экрана не попадали в поле зрения наблюдателя
     и оставались невидимыми даже после того, как их долистывали пальцем.
     Ряд целиком проявляется по вертикальному скроллу, карточки внутри — сразу. */
  .card-row>.rv,.mf-grid>.rv,.team-row>.rv,.secshots>.rv{transform:none;opacity:1}
  .cdots{display:flex}

  .mf-grid>*{flex:0 0 74vw}
  .team-row>*{flex:0 0 68vw}
  .secshots{margin-bottom:14px}
  .secshots>*{flex:0 0 76vw}



  /* две одинаковые плашки статусов должны начинаться от одной вертикали */
  .bt-status2{justify-content:flex-start}
}
@media(max-width:560px){
  .sec-never{padding:26px 22px 24px}
  .sec-never-items{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}