/* ============================================================
   ПЕРВЫЙ ЭКРАН «ЧАТ-БОТОВ» (30.09.2026)
   Свой язык страницы, не как у ИИ и сайтов: заголовок строчными,
   выделение «маркером»; галочки преимуществ — двойные, как «прочитано»
   в мессенджере; фон — узор точек, как обои в чате. Справа телефон,
   переписка в нём идёт сама (bot-hero.js), шапка и пузыри клиента —
   в цвете текущей площадки (--pc, бывает градиентом).
   ============================================================ */
.bh{
  position:relative; isolation:isolate; overflow-x:clip;
  padding-top:calc(var(--header-h) + clamp(8px, 1.4vw, 24px));
  padding-bottom:clamp(56px, 6vw, 100px);
}
/* обои: мелкие точки, гуще справа за телефоном, мягкая бирюза под ними */
.bh__paper{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(rgba(var(--accent-rgb), .22) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(60% 70% at 78% 45%, var(--accent-wash), transparent 70%);
  -webkit-mask-image:radial-gradient(70% 90% at 75% 45%, #000 30%, transparent 80%);
          mask-image:radial-gradient(70% 90% at 75% 45%, #000 30%, transparent 80%);
}
.bh__inner{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .9fr);
  gap:clamp(24px, 4vw, 80px); align-items:center;
}
.bh__title{
  margin:0 0 clamp(16px, 1.6vw, 26px);
  font:600 clamp(36px, 4.4vw, 72px)/1.02 var(--font-display);
  letter-spacing:-.035em; color:var(--fg);
  text-wrap:balance;
}
/* выделение маркером: полоса под нижней половиной строки, а не цветной текст */
.bh__title em{
  font-style:normal;
  background:linear-gradient(transparent 68%, rgba(var(--accent-rgb), .26) 68%, rgba(var(--accent-rgb), .26) 90%, transparent 90%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .06em;
}
.bh__lead{ margin:0 0 clamp(24px, 2.4vw, 36px); max-width:44ch; font-size:clamp(16px, 1.2vw, 19px); line-height:1.6; color:var(--fg-lead); }
.bh__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.bh__alt{
  font:600 15px/1 var(--font); color:var(--fg); text-decoration:none;
  border-bottom:1.5px solid rgba(var(--accent-rgb), .45); padding-bottom:4px;
  transition:border-color .2s, color .2s;
}
.bh__alt:hover{ color:var(--accent-1); border-color:var(--accent-1); }
.bh__proof{ list-style:none; margin:clamp(24px, 2.4vw, 34px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; }
.bh__proof li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--fg-lead); }
/* двойная галочка «прочитано» */
.bh__proof li::before, .bh__proof li::after{
  content:""; position:absolute; top:.28em; width:9px; height:5px;
  border:solid var(--accent-1); border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.bh__proof li::before{ left:0; }
.bh__proof li::after{ left:6px; }

/* ---------- телефон ---------- */
.bh__stage{ position:relative; display:grid; justify-items:center; gap:22px; }
.bh__phone{
  --pc:var(--accent-1);
  position:relative; width:min(300px, 80vw); aspect-ratio:9 / 18.2;
  padding:11px; border-radius:46px;
  background:#11161c;
  box-shadow:0 1px 0 1px #2a323c inset, 0 40px 80px -30px rgba(13,30,40,.45), 0 20px 40px -20px rgba(var(--accent-rgb), .35);
  rotate:-2.5deg;
}
.bh__screen{
  position:relative; height:100%; overflow:hidden; border-radius:36px;
  display:flex; flex-direction:column;
  background:
    radial-gradient(rgba(20,40,60,.06) 1px, transparent 1.4px) 0 0 / 16px 16px,
    #eef2f1;
}
.bh__top{
  display:flex; align-items:center; gap:10px;
  padding:34px 16px 12px;
  background:var(--pc); color:#fff;
  transition:background .5s ease;
}
.bh__back{ font-size:26px; line-height:1; opacity:.8; margin-top:-3px; }
.bh__ava{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.22); font:700 15px/1 var(--font);
}
.bh__who{ display:grid; gap:2px; }
.bh__who b{ font:600 14px/1.2 var(--font); }
.bh__net{ font:500 11.5px/1.2 var(--font); font-style:normal; opacity:.8; }
.bh__chat{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding:12px 12px 6px; overflow:hidden;
}
.bh__m{
  margin:0; max-width:80%; padding:9px 12px;
  font:400 13.5px/1.35 var(--font); color:#16202a;
  border-radius:16px;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.bh__m--b{ align-self:flex-start; background:#fff; border-bottom-left-radius:5px; }
.bh__m--u{ align-self:flex-end; background:var(--pc); color:#fff; border-bottom-right-radius:5px; transition:background .5s ease; }
.bh__k{ margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.bh__k span{
  padding:7px 11px; border-radius:4px;
  background:#fff; border:1px solid rgba(20,40,60,.12);
  font:600 12.5px/1 var(--font); color:#1b2733;
  transition:background .2s, color .2s, transform .15s;
}
.bh__k span.is-tap{ background:#16202a; color:#fff; transform:scale(.95); }
.bh__card{
  align-self:flex-start; display:grid; gap:3px; min-width:70%;
  padding:11px 13px; border-radius:14px; border-bottom-left-radius:5px;
  background:#fff; border-left:3px solid #1f9d5a;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
  font:400 12.5px/1.35 var(--font); color:#4a5663;
}
.bh__card b{ font:700 13.5px/1.3 var(--font); color:#16202a; }
.bh__typing{
  align-self:flex-start; display:flex; gap:4px;
  margin:0 12px 6px; padding:10px 12px; border-radius:16px; border-bottom-left-radius:5px;
  background:#fff; opacity:0; transition:opacity .15s;
}
.bh__typing.is-on{ opacity:1; }
.bh__typing i{ width:6px; height:6px; border-radius:50%; background:#9aa6b2; animation:bh-dot 1s infinite; }
.bh__typing i:nth-child(2){ animation-delay:.15s; }
.bh__typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bh-dot{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-3px); opacity:1; } }
.bh__input{
  display:flex; align-items:center; gap:10px;
  margin:6px 10px 14px; padding:9px 12px; border-radius:20px; background:#fff;
}
.bh__input span{ flex:1; height:8px; border-radius:3px; background:#e3e8ec; }
.bh__input i{ width:22px; height:22px; border-radius:50%; background:var(--pc); transition:background .5s ease; }

/* появление реплик (скрипт снимает is-wait по очереди) */
.bh.is-live [data-t]{ transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1); }
.bh.is-live [data-t].is-wait{ display:none; }
.bh.is-live [data-t].is-in{ animation:bh-in .26s cubic-bezier(.2,.8,.2,1); }
@keyframes bh-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
.bh__chat.is-out{ opacity:0; transition:opacity .3s; }

/* уведомление менеджеру — снаружи телефона */
.bh__toast{
  position:absolute; left:max(-4%, calc(50% - 300px)); top:62%;
  display:flex; align-items:center; gap:10px; margin:0;
  padding:12px 16px; border-radius:6px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lift);
  font:600 13.5px/1.2 var(--font); color:var(--fg);
  opacity:0; transform:translateX(-10px);
  transition:opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);
}
.bh__toast i{ width:9px; height:9px; border-radius:50%; background:#1f9d5a; box-shadow:0 0 0 4px rgba(31,157,90,.15); }
.bh__toast.is-on{ opacity:1; transform:none; }

/* строка площадок под телефоном */
.bh__nets{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 2px; max-width:440px; }
.bh__netbtn{
  position:relative; padding:6px 9px; border:0; border-radius:4px; background:none; cursor:pointer;
  font:500 13.5px/1 var(--font); color:var(--fg-mute);
  transition:color .2s, background .2s;
}
.bh__netbtn:hover{ color:var(--fg); background:var(--surface-2); }
.bh__netbtn.is-on{ color:var(--fg); font-weight:700; }
.bh__netbtn.is-on::after{ content:""; position:absolute; left:9px; right:9px; bottom:1px; height:2px; background:var(--accent-1); }
.bh__netbtn:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .bh__typing i{ animation:none; }
}

/* ============================================================
   30.09.2026 (2): подпись-пузырь над заголовками блоков страницы —
   фирменный приём «Чат-ботов»: сначала «печатает…», потом слово.
   Без скрипта — сразу слово. Скрипт — в bot-hero.js (на всю страницу).
   ============================================================ */
.bt-ey{
  display:inline-flex; align-items:center; min-height:30px; margin:0 0 14px;
  padding:6px 13px; border-radius:14px 14px 14px 4px;
  background:var(--accent-1); color:#fff;
  font:600 13px/1 var(--font); letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(var(--accent-rgb), .25);
}
.bt-ey::after{
  content:""; display:none; width:5px; height:5px; margin:0 12px 0 2px; border-radius:50%;
  background:#fff; box-shadow:9px 0 0 rgba(255,255,255,.7), 18px 0 0 rgba(255,255,255,.45);
  animation:bt-typing 1s steps(3) infinite;
}
.bt-ey.is-wait{ opacity:0; }
.bt-ey.is-typing{ opacity:1; }
.bt-ey.is-typing span{ display:none; }
.bt-ey.is-typing::after{ display:block; }
.bt-ey.is-said span{ animation:bt-said .25s cubic-bezier(.2,.8,.2,1); }
@keyframes bt-typing{ 0%{ opacity:.4; } 50%{ opacity:1; } 100%{ opacity:.4; } }
@keyframes bt-said{ from{ opacity:0; transform:translateY(3px); } }
.bt-ey{ transition:opacity .2s; }

/* стеклянная сцена за телефоном (hero.art, когда будет сгенерирована) */
.bh__art{
  position:absolute; z-index:-1; left:50%; top:46%; width:170%; translate:-50% -50%;
  mix-blend-mode:multiply; pointer-events:none;
  animation:bh-float 9s ease-in-out infinite;
}
.bh__art img{ display:block; width:100%; height:auto; }
@keyframes bh-float{ 0%,100%{ translate:-50% -50%; } 50%{ translate:-50% calc(-50% - 10px); } }
/* вторая плашка — справа сверху от телефона */
.bh__chip{
  position:absolute; right:max(-6%, calc(50% - 290px)); top:14%; z-index:2; margin:0;
  display:flex; align-items:center; gap:9px;
  padding:10px 14px; border-radius:6px;
  background:#16202a; color:#fff; font:600 13px/1.2 var(--font);
  box-shadow:0 16px 34px -12px rgba(13,30,40,.5);
  rotate:3deg;
  animation:bh-chip 7s ease-in-out infinite;
}
.bh__chip i{ width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 4px rgba(107,250,255,.18); }
@keyframes bh-chip{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
@media (max-width: 900px){ .bh__chip{ right:0; top:4%; } }
@media (prefers-reduced-motion: reduce){ .bt-ey::after, .bh__art, .bh__chip{ animation:none; } }
.bt-ey{ justify-self:start; width:max-content; }   /* в сетке пузырь растягивался на всю колонку */
.bh__chip{ top:31%; }