/* ==========================================================================
   Первый экран, вариант A — «Кино по скроллу».
   Окно кабинета поднимается из перспективы; сайт → ночной чат → заявка в кабинет;
   уведомления Telegram и Max слоями. Всё в DOM/CSS, токены — из landing.css.
   Дефолт (без JS-анимации, ?static=1, reduced-motion) = финальная читаемая композиция:
   кабинет с заявкой, диалог, уведомления. Состояния «до» задаёт hero-a.js.
   ========================================================================== */

/* контейнер сцены, заданный каркасом (.hb__scene.hs): место резервируется по высоте готовой сцены (без CLS).
   Сцена стартует сразу под текстом первого экрана: верх окна виден уже без прокрутки. */
.hb__scene.hs { padding-bottom: 0; margin-top: clamp(14px, 1.8vw, 26px); perspective: none; min-height: 760px; }
@media (min-width: 900px) and (min-height: 600px) {
  html:not(.is-static) .hb__scene.hs { min-height: min(calc(100vh - 76px), 780px); min-height: min(calc(100svh - 76px), 780px); }
}
/* поток (планшет, телефон): высоты готовой сцены, снятые на 390 / 480–899 */
@media not all and (min-width: 900px) and (min-height: 600px) {
  .hb__scene.hs { min-height: 1200px; }
}
@media (max-width: 480px) {
  .hb__scene.hs { min-height: 1250px; }
}

.hsa {
  --w: min(1080px, calc((100vh - 270px) * 1.82), calc(100vw - 2 * var(--gut)));
  --w: min(1080px, calc((100svh - 270px) * 1.82), calc(100vw - 2 * var(--gut)));
  --u: max(11px, calc(var(--w) / 80));
  --ink-soft: #3a3a45;
  text-align: left;
}

/* ---------- сцена ---------- */
.hsa-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 var(--gut) clamp(56px, 7vw, 104px); position: relative; }
/* pin: сцена приколота под шапкой (76px), содержимое прижато кверху — так же, как до прикрепления (без прыжка) */
.hsa--pin .hsa-stage { height: min(calc(100vh - 76px), 780px); height: min(calc(100svh - 76px), 780px); justify-content: flex-start; padding: clamp(0px, calc((100svh - 880px) / 5), 64px) var(--gut) 12px; box-sizing: border-box; }

/* шаги сюжета */
.hsa-steps { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.hsa-step { display: flex; flex-direction: column; gap: 9px; width: 220px; font-size: 14px; line-height: 1.25; color: var(--ink-3t); transition: color .3s; }
.hsa-step.is-on { color: var(--ink); }
.hsa-step__bar { display: block; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.hsa-step__bar b { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; border-radius: 3px; }
.hsa-step__t { display: flex; gap: 8px; align-items: baseline; font-weight: 500; letter-spacing: -.005em; }
.hsa-step__t em { font: 600 12px/1 var(--tight); font-style: normal; color: var(--accent); }

/* рамка с перспективой: окно и слои уведомлений */
.hsa-frame { position: relative; width: var(--w); font-size: var(--u); perspective: 1800px; perspective-origin: 50% 45%; }
.hsa-glow { position: absolute; left: -6%; right: -6%; top: -8%; bottom: -14%; background: radial-gradient(closest-side, rgba(124, 92, 255, .30), rgba(124, 92, 255, 0) 72%); pointer-events: none; }
.hsa-floor { position: absolute; left: 6%; right: 6%; bottom: -2.4em; height: 3.4em; background: radial-gradient(closest-side, rgba(27, 17, 80, .30), rgba(27, 17, 80, 0)); pointer-events: none; }
.hsa-device { position: relative; transform-origin: 50% 62%; }

/* окно */
.hsa-win { position: relative; background: var(--surface); border-radius: 1.7em; border: 1px solid var(--line-2); overflow: hidden; box-shadow: 0 3.4em 8em -2.4em rgba(27, 17, 80, .40), 0 .9em 2.6em rgba(10, 10, 13, .10), inset 0 0 0 1px rgba(255, 255, 255, .75); }
.hsa-bar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr minmax(0, 24em) 1fr; align-items: center; height: 3em; padding: 0 1.3em; background: linear-gradient(#F6F6F9, #EDEDF1); border-bottom: 1px solid var(--line); }
.hsa-dots { display: flex; gap: .55em; }
.hsa-dots i { width: .85em; height: .85em; border-radius: 50%; background: #D8D8DF; }
.hsa-addr { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .6em; height: 2em; padding: 0 1em; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: .9em; color: var(--ink-2); overflow: hidden; white-space: nowrap; }
.hsa-addr svg { grid-row: 1; width: 1.1em; height: 1.1em; stroke: var(--ink-3t); fill: none; stroke-width: 2; stroke-linecap: round; }
.hsa-addr__t { grid-row: 1; grid-column: 2; }
.hsa-addr__t--site { opacity: 0; }
.hsa-body { position: relative; height: 41em; background: var(--bg); }
.hsa-sheen { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .10) 54%, rgba(255, 255, 255, 0) 68%); }

/* варианты ниши: слои одной ячейки, видна одна */
.hsa-vs { display: grid; }
.hsa-vs > [data-v] { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.hsa[data-niche="0"] [data-v="0"], .hsa[data-niche="1"] [data-v="1"], .hsa[data-niche="2"] [data-v="2"] { opacity: 1; visibility: visible; }
.hsa:not(.is-scrub) [data-v] { transition: opacity .35s var(--ease-out), visibility .35s; }

/* ---------- вид 1: сайт клиента ---------- */
.hsa-site { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.5em; padding: 1.6em 2.6em 0; background: #FBFAF8; overflow: hidden; opacity: 0; visibility: hidden; }
.hsa-site__nav { display: flex; align-items: center; justify-content: space-between; }
.hsa-site__logo { display: inline-flex; align-items: center; gap: .7em; font: 600 1.15em/1 var(--tight); letter-spacing: -.02em; }
.hsa-site__logo i { width: 1.7em; height: 1.7em; border-radius: 50%; border: .45em solid #2F8F6B; box-sizing: border-box; }
.hsa-site__links { display: flex; gap: 2em; font-size: .95em; color: var(--ink-2); }
.hsa-site__hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2em; padding-top: 1em; }
.hsa-site__copy h4 { margin: 0; font: 600 3em/1 var(--tight); letter-spacing: -.045em; max-width: 9em; }
.hsa-site__copy p { margin: 1em 0 1.4em; color: var(--ink-2); font-size: 1.1em; line-height: 1.45; max-width: 24em; }
.hsa-site__btn { display: inline-flex; align-items: center; height: 3em; padding: 0 1.8em; border-radius: 99px; background: #1F6B52; color: #fff; font-weight: 500; font-size: 1em; }
.hsa-site__art { width: 100%; height: auto; max-height: 13em; stroke: #1F6B52; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hsa-site__art .a { stroke: #7BC4A4; }
.hsa-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
/* правая колонка (чат 23em + поля) свободна от содержимого сайта: чат её не перекрывает */
.hsa-site__hero, .hsa-site__cards { margin-right: 25em; }
.hsa-site__card { display: flex; flex-direction: column; gap: .35em; padding: 1.1em 1.3em; border-radius: 1.2em; background: #fff; border: 1px solid rgba(10, 10, 13, .07); }
.hsa-site__card b { font-weight: 500; }
.hsa-site__card span { font: 600 1.7em/1 var(--tight); letter-spacing: -.03em; }
.hsa-site__card small { color: var(--ink-3t); font-size: .85em; }
.hsa-night { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(50, 36, 140, .12), rgba(27, 17, 80, .30)); }

.hsa-launch { position: absolute; z-index: 2; right: 1.9em; bottom: 1.7em; display: flex; align-items: center; gap: .8em; opacity: 0; visibility: hidden; }
.hsa-launch__tip { padding: .65em 1.1em; border-radius: 99px; background: #fff; box-shadow: var(--shadow-1); border: 1px solid var(--line); font-size: .95em; font-weight: 500; }
.hsa-launch__btn { position: relative; width: 3.7em; height: 3.7em; border-radius: 50%; background: var(--dark); display: grid; place-items: center; box-shadow: 0 .9em 2em -.6em rgba(10, 10, 15, .5); }
.hsa-launch__btn svg { width: 1.6em; height: 1.6em; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.hsa-launch__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }

/* чат помощника поверх сайта */
.hsa-chat { position: absolute; z-index: 3; right: 1.9em; bottom: 1.6em; width: 23em; display: flex; flex-direction: column; border-radius: 1.5em; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 2.6em 5em -1.4em rgba(27, 17, 80, .40); overflow: hidden; opacity: 0; visibility: hidden; transform-origin: 100% 100%; }
.hsa-chat__head { display: flex; align-items: center; gap: .8em; padding: .95em 1.2em; border-bottom: 1px solid var(--line); }
.hsa-chat__head .logo-mark { width: 2.4em; height: 2.4em; border-radius: .75em; }
.hsa-chat__head .logo-mark svg { width: 1.05em; height: 1.05em; }
.hsa-chat__head b { display: block; font: 600 1.05em/1.1 var(--tight); letter-spacing: -.01em; }
.hsa-chat__head small { display: flex; align-items: center; gap: .45em; font-size: .85em; color: var(--ink-2); }
.hsa-chat__head small::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--ok); }
.hsa-chat__msgs { display: flex; flex-direction: column; gap: .65em; padding: 1.1em 1.1em .9em; }
.hsa-msg { margin: 0; max-width: 88%; padding: .7em 1em; border-radius: 1.2em; font-size: .98em; line-height: 1.42; }
.hsa-msg--c { align-self: flex-end; background: var(--surface-2); border-bottom-right-radius: .4em; }
.hsa-msg--b { align-self: flex-start; background: var(--accent-bg-2); border-bottom-left-radius: .4em; }
.hsa-slot { display: grid; justify-items: start; }
.hsa-slot > * { grid-area: 1 / 1; }
.hsa-typing { margin: 0; display: inline-flex; align-items: center; gap: .3em; align-self: start; height: 2.4em; padding: 0 1em; border-radius: 1.2em; border-bottom-left-radius: .4em; background: var(--accent-bg-2); opacity: 0; visibility: hidden; }
.hsa-typing i { width: .5em; height: .5em; border-radius: 50%; background: var(--accent); animation: hsa-dot 1s ease-in-out infinite; }
.hsa-typing i:nth-child(2) { animation-delay: .15s; }
.hsa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hsa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.28em); opacity: 1; } }
.hsa-chat__input { margin: 0 1.1em 1.1em; padding: .8em 1.1em; border-radius: 99px; border: 1px solid var(--line-2); color: var(--ink-3t); font-size: .95em; }

/* ---------- вид 2: кабинет владельца (финальный кадр) ---------- */
.hsa-cab { position: absolute; inset: 0; display: grid; grid-template-columns: 11.5em minmax(0, 1fr); background: var(--bg); }
.hsa-side { display: flex; flex-direction: column; gap: .3em; padding: 1.6em 1em; background: var(--surface); border-right: 1px solid var(--line); }
.hsa-logo { display: inline-flex; align-items: center; gap: .7em; margin: 0 .4em 1.4em; font: 600 1.05em/1 var(--tight); letter-spacing: -.02em; }
.hsa-logo .logo-mark { width: 2.1em; height: 2.1em; border-radius: .6em; }
.hsa-logo .logo-mark svg { width: .95em; height: .95em; }
.hsa-nav { display: flex; align-items: center; gap: .7em; height: 2.7em; padding: 0 .8em; border-radius: .8em; font-size: .95em; color: var(--ink-2); }
.hsa-nav svg { width: 1.2em; height: 1.2em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hsa-nav.is-on { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.hsa-nav em { margin-left: auto; font: 600 .8em/1 Inter, sans-serif; font-style: normal; color: #fff; background: var(--accent); border-radius: 99px; padding: .25em .65em; }
.hsa-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.2em; padding: 1.6em 1.9em 1.8em; min-width: 0; }
.hsa-main__head { grid-column: 1 / -1; display: flex; align-items: center; gap: 1em; }
.hsa-main__head h4 { margin: 0; font: 600 1.7em/1 var(--tight); letter-spacing: -.04em; }
.hsa-main .chip { height: 2.2em; padding: 0 1em; font-size: .88em; }

.hsa-lead { position: relative; display: flex; flex-direction: column; gap: 1.1em; padding: 1.5em 1.7em 1.6em; border-radius: 1.6em; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.hsa-ring { position: absolute; inset: -.3em; border-radius: 1.9em; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.hsa-lead__tag { display: flex; align-items: center; justify-content: space-between; gap: .8em; font-size: .9em; color: var(--ink-2); font-weight: 500; }
.hsa-lb { display: flex; flex-direction: column; gap: 1.1em; }
.hsa-lb__who { display: flex; align-items: center; gap: .8em; }
.hsa-lb__who b { font-weight: 600; font-size: 1.1em; }
.hsa-lb__who .chip { margin-left: auto; height: 2em; font-size: .85em; padding: 0 .9em; }
.hsa-ava { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--accent-bg-2); color: var(--accent); display: grid; place-items: center; font: 600 1em/1 var(--tight); flex: none; }
.hsa-lb h5 { margin: 0; font: 600 2em/1.05 var(--tight); letter-spacing: -.04em; }
.hsa-lb dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1.6em; }
.hsa-lb dl div { padding-top: .8em; border-top: 1px solid var(--line); }
.hsa-lb dt { font-size: .82em; color: var(--ink-3t); }
.hsa-lb dd { margin: .25em 0 0; font-size: 1.1em; font-weight: 500; letter-spacing: -.01em; }
.hsa-lb__do { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.hsa-lb__do li { display: flex; align-items: center; gap: .65em; font-size: .98em; color: var(--ink-2); }
.hsa-lb__do svg { width: 1.5em; height: 1.5em; padding: .3em; box-sizing: border-box; border-radius: 50%; background: var(--ok-bg); stroke: var(--ok); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hsa-lead__foot { display: flex; gap: .7em; margin-top: auto; }
.hsa-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.9em; padding: 0 1.5em; border-radius: 99px; background: var(--surface); border: 1px solid var(--line-2); font-size: .95em; font-weight: 500; }
.hsa-btn--dark { background: var(--dark); color: var(--on-dark); border-color: transparent; }

.hsa-talk { display: flex; flex-direction: column; gap: .9em; padding: 1.4em 1.4em 1.5em; border-radius: 1.6em; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.hsa-talk__head { font: 600 1.1em/1 var(--tight); letter-spacing: -.02em; }
.hsa-tb { display: flex; flex-direction: column; gap: .6em; }
.hsa-tb small { font-size: .82em; color: var(--ink-3t); }
.hsa-tb .hsa-msg { max-width: 92%; font-size: .95em; }

/* ---------- слои: ночь и уведомления ---------- */
.hsa-pill { position: absolute; z-index: 4; right: calc(-1 * min(6.5em, (100vw - var(--w)) / 2 - 8px)); top: 20%; display: inline-flex; align-items: center; gap: .65em; height: 3.1em; padding: 0 1.3em 0 .9em; border-radius: 99px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 1.2em 2.6em -.8em rgba(27, 17, 80, .35); white-space: nowrap; }
.hsa-pill svg { width: 1.5em; height: 1.5em; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hsa-pill b { font: 600 1.3em/1 var(--tight); letter-spacing: -.03em; }
.hsa-pill span { font-size: .9em; color: var(--ink-2); }

.hsa-note { position: absolute; z-index: 4; width: 20em; padding: 1.1em 1.25em 1.2em; border-radius: 1.7em; background: rgba(255, 255, 255, .96); border: 1px solid rgba(10, 10, 13, .06); box-shadow: 0 1.8em 4em -1em rgba(27, 17, 80, .36), 0 .3em 1em rgba(10, 10, 13, .06); }
.hsa-note--tg { right: calc(-1 * min(11em, (100vw - var(--w)) / 2 - 8px)); top: -3em; }
.hsa-note--max { left: calc(-1 * min(11em, (100vw - var(--w)) / 2 - 8px)); bottom: -2.6em; }
.hsa-note__top { display: flex; align-items: center; gap: .7em; font-size: .85em; color: var(--ink-3t); }
.hsa-note__top span:last-child { margin-left: auto; }
.hsa-note__app { width: 2.1em; height: 2.1em; border-radius: .6em; display: grid; place-items: center; flex: none; }
.hsa-note__app--tg { background: #2AABEE; }
.hsa-note__app--tg svg { width: 1.15em; height: 1.15em; fill: #fff; }
.hsa-note__app--max { background: linear-gradient(135deg, #3B2BD9, #7C5CFF); }
.hsa-note__app--max svg { width: 1.15em; height: 1.15em; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.hsa-note__v { margin-top: .6em; }
.hsa-note__v b { display: block; font-weight: 600; font-size: 1.05em; letter-spacing: -.01em; }
.hsa-note__v span { display: block; margin-top: .2em; font-size: .95em; line-height: 1.4; color: var(--ink-2); }

/* ---------- чипы ниш ---------- */
.hsa-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; }
.hsa-chips__label { font-size: 14px; color: var(--ink-2); margin-right: 4px; }
.hsa-chip { height: 44px; min-width: 44px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 15px/1 Inter, sans-serif; letter-spacing: -.005em; cursor: pointer; transition: background-color .2s var(--ease-out), color .2s, border-color .2s; }
.hsa-chip:hover { background: var(--surface-2); }
.hsa-chip[aria-pressed="true"] { background: var(--dark); color: var(--on-dark); border-color: transparent; }
.hsa-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* слои, которыми двигает GSAP: слой на GPU только пока сцена приколота */
.hsa--pin .hsa-device, .hsa--pin .hsa-note, .hsa--pin .hsa-pill { will-change: transform; }

/* узкие десктопы: слои чуть компактнее */
@media (max-width: 1180px) {
  .hsa-note { width: 17em; }
  .hsa-step { width: 170px; }
  .hsa-note--tg { top: -2.2em; }
}

/* ---------- < 900: без pin, поток ---------- */
@media not all and (min-width: 900px) and (min-height: 600px) {
  .hsa { --u: 13px; --w: 100%; }
  .hb__scene.hs { margin-top: 8px; }
  .hsa-stage { padding-bottom: clamp(48px, 9vw, 80px); gap: 20px; }
  .hsa-steps { display: none; }
  .hsa-chips { order: -1; }
  .hsa-frame { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 12px; perspective: 1400px; }
  .hsa-glow, .hsa-floor { display: none; }
  .hsa-body { height: auto; }
  .hsa-site { display: none; }
  .hsa-cab { position: relative; grid-template-columns: 1fr; }
  .hsa-side { display: none; }
  .hsa-pill, .hsa-note { position: static; width: auto; }
  .hsa-pill { order: -1; align-self: flex-start; right: auto; }
  .hsa-note--tg, .hsa-note--max { left: auto; right: auto; top: auto; bottom: auto; }
  .hsa-device { order: 0; }
  .hsa-pill { order: -1; }
}
@media not all and (min-width: 900px) {
  .hsa-win { border-radius: 1.4em; }
  .hsa-main { grid-template-columns: 1fr; grid-template-rows: auto; padding: 1.2em; gap: 1em; }
  .hsa-main__head h4 { font-size: 1.5em; }
  .hsa-main__head { flex-wrap: wrap; gap: .6em 1em; }
  .hsa-lead { padding: 1.2em; }
  .hsa-lb h5 { font-size: 1.7em; }
  .hsa-lb dl { gap: .8em 1.2em; }
  .hsa-lead__foot { flex-wrap: wrap; }
  .hsa-addr { font-size: .85em; }
  .hsa-bar { grid-template-columns: auto minmax(0, 1fr); gap: 1em; padding: 0 1em; }
  .hsa-chips__label { flex-basis: 100%; text-align: center; margin: 0; }
}
@media (max-width: 480px) {
  .hsa-stage { padding-left: var(--gut); padding-right: var(--gut); }
  .hsa-lb dl { grid-template-columns: 1fr 1fr; }
  .hsa-chip { padding: 0 16px; }
}

/* статика и reduced-motion: ничего не движется, набор печати не нужен */
html.is-static .hsa-typing, html.is-static .hsa-launch, html.is-static .hsa-chat, html.is-static .hsa-site { display: none; }
html.is-static .hsa-step__bar b { transform: none; }
html.is-static [data-v] { transition: none !important; }