/* ============ Главный лендинг «Мои гости» ============ */
/* Использует общую дизайн-систему из lp.css. Здесь — только элементы,
   которых нет в общей системе: hero-мокап кабинета, лента интеграций,
   сетка продуктов и мини-метрики. */

/* Открытая композиция hero: обещание, действие, затем демо продукта. */
.hero-panel--home{grid-template-columns:minmax(0,1fr);gap:40px;background:#e7effb url('/img/lp/home-hero-bg.webp') center 65%/cover no-repeat}
.home-hero-copy{position:relative;isolation:isolate;padding-bottom:12px}
.home-hero-topline{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-bottom:24px}
.home-hero-ai{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:1.5px solid color-mix(in srgb,var(--c-accent) 20%,transparent);border-radius:var(--r-pill);color:var(--c-accent);font-size:16px;font-weight:800}
.home-hero-tagline{color:var(--c-muted);font-size:15px;line-height:1.35}
.home-hero-ai{flex-shrink:0}
.home-hero-ai>span{font-size:22px;line-height:1}
.hero .home-hero-copy h1 em{color:var(--c-accent)}
.home-hero-copy .btn-row{flex-direction:column;align-items:flex-start}
.home-hero-copy .btn--ghost{padding-inline:32px;background:rgba(245,249,255,.65);border-color:rgba(111,137,170,.3)}
.hero .home-hero-copy .lead{max-width:620px;font-size:clamp(18px,2.3vw,28px);line-height:1.5;margin-bottom:32px}
.hero-panel--home .hero-demo{width:100%;min-width:0;zoom:1;margin:0}
@media(max-width:640px){
  .hero-panel--home{padding:24px;gap:28px;background-image:linear-gradient(to bottom,transparent 400px,#edf3fb 530px),linear-gradient(to right,rgba(235,243,255,.65),transparent 65%),url('/img/lp/home-hero-bg.webp');background-size:100% auto;background-position:center top;background-color:#edf3fb}
  /* Слева сохраняем отступ панели, справа окно уходит под её обрезку.
     Дополнительные 60px при zoom .8 дают 48px: отступ + выход за край. */
  .hero-panel--home .hero-demo{zoom:.8;width:calc(100% + 60px);margin:0}
  .home-hero-topline{margin-bottom:22px;gap:9px}
  .home-hero-tagline{font-size:11px}
  .hero .home-hero-copy .lead{font-size:16px;max-width:78%;margin-bottom:24px}
  .home-hero-ai{padding:6px 12px;font-size:13px;gap:6px}
  .home-hero-ai>span{font-size:18px}
  .home-hero-copy .btn-row{align-items:flex-start;flex-direction:column;gap:12px}
  .home-hero-copy .btn{padding:0 22px;font-size:14px;height:50px}
  .home-hero-copy .btn--ghost{padding-inline:28px}
}

/* Однократное появление ведёт взгляд от обещания к действию.
   Без JS текст остаётся доступен; reduced motion сохраняет статичную версию. */
.home-hero-copy{min-width:0}
.hero .home-hero-copy h1{font-family:var(--f-body);font-weight:800;font-size:clamp(28px,6.2vw,76px);line-height:1.0;letter-spacing:-.045em;text-wrap:balance;margin-bottom:28px}
@media(max-width:640px){.hero .home-hero-copy h1{font-size:clamp(28px,8.2vw,48px)}}
@media(prefers-reduced-motion:no-preference){
  .home-hero-topline,
  .home-hero-copy h1,
  .home-hero-copy .lead,
  .home-hero-copy .btn-row{animation:homeHeroEnter .7s cubic-bezier(.22,1,.36,1) backwards}
  .home-hero-copy .lead{animation-delay:.14s}
  .home-hero-copy .btn-row{animation-delay:.28s}
}
@keyframes homeHeroEnter{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== Живое демо кабинета в hero ===== */
.hero-demo{background:var(--c-surface);border-radius:var(--r-3);box-shadow:var(--shadow-lift);overflow:hidden;width:132%;min-width:540px;font-size:13px}
@media(max-width:960px){.hero-demo{width:100%;min-width:0}}
.hd-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--c-line);background:var(--c-surface-2)}
.hd-dots{display:flex;gap:5px}
.hd-dots i{width:9px;height:9px;border-radius:50%}
.hd-dots i:nth-child(1){background:#ff6a5f}.hd-dots i:nth-child(2){background:#febc2e}.hd-dots i:nth-child(3){background:#28c840}
.hd-bar b{font-family:var(--f-head);font-weight:600;font-size:13px;margin-left:6px}
.hd-bar>span{color:var(--c-muted);font-size:12px}
.hd-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:800;font-size:11px;color:var(--c-accent);background:var(--c-sky);border-radius:999px;padding:4px 10px}
.hd-live i{width:6px;height:6px;border-radius:50%;background:var(--c-accent);animation:hdPulse 1.6s ease-in-out infinite}
@keyframes hdPulse{0%,100%{opacity:1}50%{opacity:.3}}
.hd-body{position:relative;display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;height:380px}
@media(max-width:520px){.hd-body{grid-template-columns:144px minmax(0,1fr)}}
/* Меню */
.hd-nav{border-right:1px solid var(--c-line);padding:10px 8px;display:flex;flex-direction:column;gap:2px;background:linear-gradient(180deg,var(--c-surface),color-mix(in oklab,var(--c-surface-2) 40%,var(--c-surface)))}
.hd-navitem{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;text-align:left;font:inherit;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--c-ink-2);padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
@media(max-width:520px){.hd-navitem{font-size:11px;gap:7px;padding:8px 7px}.hd-nic{width:18px;height:18px}.hd-nic svg{width:15px;height:15px}}
.hd-navitem:hover{background:rgba(17,17,17,.04)}
.hd-navitem--more{cursor:default}
.hd-navitem--more:hover{background:transparent;color:var(--c-ink-2)}
.hd-navitem.is-on,.hd-navitem.is-on:hover{background:var(--c-sky);color:var(--c-accent)}
.hd-nic{flex:none;width:22px;height:22px;display:grid;place-items:center;color:currentColor}
.hd-nic svg{width:17px;height:17px}
/* Панели */
.hd-panes{position:relative;padding:16px;min-height:0;min-width:0;overflow:auto}
.hd-pane{display:none;animation:hdFade .35s ease}
.hd-pane.is-on{display:block}
@keyframes hdFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hd-cap{font-family:var(--f-head);font-weight:600;font-size:12.5px;color:var(--c-ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.hd-cap span{font-family:var(--f-body);font-weight:800;font-size:10.5px;color:var(--c-accent);background:var(--c-sky);border-radius:999px;padding:3px 9px}
/* Календарь — визуально 1:1 с реальным кабинетом (v2-calendar.css):
   пастельные аватарки-квадраты, белые плашки броней с мягкой тенью,
   круглые иконки задач с внутренним белым кольцом. */
.cw{font-size:11px}
.cw-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cw-month{font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--c-ink);letter-spacing:-.02em}
.cw-month b{font-weight:600;color:var(--c-line-strong)}
.cw-nav{display:inline-flex;align-items:center;gap:5px;background:var(--c-surface-2);border-radius:999px;padding:3px}
.cw-nav i{width:18px;height:18px;display:grid;place-items:center;color:var(--c-muted);font-style:normal;font-size:13px}
.cw-nav b{background:var(--c-ink);color:#fff;border-radius:999px;padding:4px 12px;font-size:10.5px;font-weight:700}
/* Поиск гостя — как в шапке реального календаря (.cal-search) */
.cw-search{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 12px;border-radius:999px;background:var(--c-surface-2);color:var(--c-muted)}
.cw-search svg{width:14px;height:14px;flex:none}
.cw-search i{font-style:normal;font-size:11px;font-weight:600;color:var(--c-muted);white-space:nowrap}
/* Шапка с датами — дни недели капсом, дата дисплейным шрифтом, выходные красным */
.cw-dates{display:grid;grid-template-columns:140px repeat(7,minmax(0,1fr));align-items:end;padding-bottom:8px;border-bottom:1px solid var(--c-line)}
.cw-obj-h{font-size:9.5px;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em}
.cw-dates>i{font-style:normal;text-align:center;line-height:1.05}
.cw-dates>i s{display:block;text-decoration:none;font-size:9.5px;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}
.cw-dates>i b{display:block;font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--c-ink);letter-spacing:-.02em;margin-top:3px}
.cw-dates>i.we s,.cw-dates>i.we b{color:#C03A1F}
/* Строки объектов — просторные, с двухстрочной карточкой объекта */
.cw-row{display:grid;grid-template-columns:140px 1fr;align-items:center;min-height:60px;border-bottom:1px solid var(--c-line)}
.cw-row:last-child{border-bottom:none}
/* На узких экранах сужаем колонку объекта, чтобы таймлайн оставался читаемым */
@media(max-width:520px){.cw-dates{grid-template-columns:108px repeat(7,minmax(0,1fr))}.cw-row{grid-template-columns:108px 1fr}}
.cw-obj{display:flex;align-items:center;gap:10px;min-width:0;padding-right:14px}
.cw-av{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--c-ink)}
.cw-objtx{min-width:0;display:grid;gap:1px}
.cw-objtx b{display:block;font-size:12px;font-weight:800;color:var(--c-ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-objtx s{display:block;text-decoration:none;font-size:10px;color:var(--c-muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Таймлайн: плашки броней + иконки. Иконка почти не перекрывает плашку —
   её белое кольцо стыкуется с бордером, сам кружок не наезжает на текст. */
/* Вертикальный padding + отрицательный margin: горизонтальный клип пилюль у
   правого края сохраняется, но счётчики-бейджи над кружками больше не режутся. */
.cw-track{display:flex;align-items:center;min-width:0;overflow:hidden;padding:12px 0 12px 14px;margin-block:-12px}
/* Плашка брони: 2px бордер + мягкая слоёная тень, как в реальном календаре.
   Имя усекается многоточием, не упираясь в бордер (padding 15px). */
.cw-book{flex:none;display:block;height:30px;line-height:26px;padding:0 15px;background:#fff;border:2px solid var(--c-ink);border-radius:999px;font-size:11px;font-weight:700;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;box-shadow:0 1px 2px rgba(17,17,17,.04),0 6px 16px -8px rgba(17,17,17,.12)}
/* Короткая бронь (напр. 2 ночи) — узкая плашка, имя усекается многоточием */
.cw-book--sm{max-width:66px}
/* Круглая иконка задачи: градиентная заливка (палитра аватарок кабинета,
   Cleaner::AVATAR_PALETTE) + внутреннее белое кольцо + мягкая слоёная тень —
   1:1 с назначенной сменой .cal-shift--assigned. */
.cw-ic{flex:none;position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;margin:0 4px;z-index:2;box-shadow:0 1px 2px rgba(17,17,17,.04),0 6px 16px -8px rgba(17,17,17,.16)}
.cw-ic::before{content:"";position:absolute;inset:1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);pointer-events:none;z-index:1}
.cw-ic svg{width:16px;height:16px;position:relative;z-index:2}
/* Уборка/список смен — синий градиент (Indigo #0A66FF→#5BA3FF) */
.cw-ic.broom,.cw-ic.list{background:linear-gradient(135deg,#0A66FF 0%,#5BA3FF 100%)}
/* Разовая задача мастеру — тёмный сланец (дефолт staff-задачи в кабинете) */
.cw-ic.wrench{background:linear-gradient(135deg,#475569 0%,#1E293B 100%)}
/* Счётчик задач: круг с белым кольцом, цифра строго по центру */
.cw-ic[data-n]::after{content:attr(data-n);position:absolute;top:-6px;right:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--c-ink);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--c-surface);z-index:4}
/* Чаты / задачи / шаги — общие строки */
.hd-chat,.hd-task,.hd-fstep{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--c-line)}
.hd-chat:last-child,.hd-task:last-child,.hd-fstep:last-child{border-bottom:none}
.hd-ct{min-width:0;flex:1}
.hd-ct b{display:block;font-size:12.5px;font-weight:800;line-height:1.2;color:var(--c-ink)}
.hd-ct small{display:block;color:var(--c-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.hd-chat em{flex:none;font-style:normal;color:var(--c-muted);font-size:10px;font-weight:700}
.hd-fic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}
.hd-fic svg{width:16px;height:16px}
.hd-flow{position:relative;display:flex;flex-direction:column}
.hd-flow::before{content:"";position:absolute;z-index:0;left:21px;top:20px;bottom:20px;width:2px;background:var(--c-line-strong);border-radius:999px}
.hd-flow .hd-fstep{position:relative;z-index:1;align-items:flex-start;border-bottom:0;padding:5px 6px}
.hd-flow .hd-fstep+.hd-fstep{margin-top:2px}
.hd-flow .hd-fic{margin-top:5px;box-shadow:0 0 0 4px var(--c-surface)}
.hd-step-label{display:block;margin-bottom:1px;color:var(--c-accent);font-size:9px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.05em}
.hd-flow-add{position:relative;z-index:1;display:flex;align-items:center;gap:11px;padding:6px}
.hd-flow-add i{width:30px;height:30px;border:1.5px dashed var(--c-accent);border-radius:9px;background:var(--c-surface);box-shadow:0 0 0 4px var(--c-surface);color:var(--c-accent);display:grid;place-items:center;font-style:normal;font-size:18px;font-weight:700;line-height:1}
.hd-flow-add b{color:var(--c-accent);font-size:11.5px;font-weight:800}
/* ===== Автоматизации: 2 колонки — цепочка (моно-синяя, как .ds-flow в кабинете) + доставка ===== */
/* Колонки прижаты влево: доставка идёт сразу после цепочки, не по правому краю */
.hd-auto{display:flex;align-items:flex-start;gap:32px}
.hd-auto-col{min-width:0}
.hd-auto-col:first-child{flex:0 1 300px}
.hd-auto-col:last-child{flex:0 0 330px}
/* Кружки шагов: сплошная оранжевая заливка, белая иконка + внутреннее белое кольцо 1px */
.hd-flow .hd-fic{border-radius:50%;background:var(--c-warm);border:none;color:#fff;position:relative}
.hd-flow .hd-fic--on{background:var(--c-warm);color:#fff}
.hd-flow .hd-fic::before{content:"";position:absolute;inset:1px;border-radius:50%;border:1px solid rgba(255,255,255,.9);pointer-events:none;z-index:1}
.hd-flow .hd-fic svg{position:relative;z-index:2}
/* Карточка доставки: каналы + приоритет + режим */
.hd-deliv{background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;padding:12px 14px;box-shadow:0 1px 2px rgba(17,17,17,.04),0 10px 24px -14px rgba(17,17,17,.14)}
.hd-deliv-sub{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);margin-bottom:6px}
.hd-chan{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--c-line)}
.hd-chan:last-of-type{border-bottom:none}
/* Выключенный канал (напр. MAX): приглушённый ряд, тумблер остаётся серым */
.hd-chan--off .hd-chan-pri,.hd-chan--off .hd-chan-meta,.hd-chan--off .hd-chan-ic{opacity:.55}
.hd-chan-pri{flex:none;width:17px;height:17px;border-radius:50%;background:var(--c-sky);color:var(--c-accent);font-size:9.5px;font-weight:800;display:grid;place-items:center}
.hd-chan-ic{flex:none;width:24px;height:24px;display:grid;place-items:center}
.hd-chan-ic img,.hd-chan-ic>svg{width:24px;height:24px;border-radius:50%;display:block}
.hd-sms{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#8B5CF6,#C4A7FF);color:#fff;display:grid;place-items:center}
.hd-sms svg{width:13px;height:13px}
.hd-chan-meta{flex:1;min-width:0;display:grid;gap:1px}
.hd-chan-meta b{font-size:12px;font-weight:800;color:var(--c-ink);line-height:1.15;white-space:nowrap}
.hd-chan-meta s{text-decoration:none;font-size:10px;color:var(--c-muted);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sw{flex:none;width:34px;height:20px;border-radius:999px;background:var(--c-line-strong);position:relative;transition:background .2s}
.hd-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s}
.hd-sw.is-on{background:var(--c-accent)}
.hd-sw.is-on::after{left:16px}
.hd-deliv-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--c-line)}
.hd-mode{font-size:10px;font-weight:800;color:var(--c-accent);background:var(--c-sky);border-radius:999px;padding:4px 10px;white-space:nowrap}
.hd-deliv-stat{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;color:#0FA958;white-space:nowrap}
.hd-deliv-stat i{width:6px;height:6px;border-radius:50%;background:#0FA958;flex:none}
@media(max-width:520px){.hd-auto{flex-direction:column;gap:16px}.hd-auto-col:first-child,.hd-auto-col:last-child{flex:1 1 auto;width:100%}}
.hd-ok{flex:none;color:#0FA958;font-weight:800;font-size:15px}
.hd-ok.hd-wait{color:var(--c-muted);font-size:12px;letter-spacing:1px}
.hd-ok.hd-send{color:var(--c-accent);font-size:16px}
.hd-tic{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--c-sand),var(--c-warm-soft));display:grid;place-items:center;font-size:15px}
.hd-tail{flex:none;font-weight:800;font-size:10px;color:var(--c-accent);background:var(--c-sky);border-radius:6px;padding:3px 8px}
.hd-tail.ok{color:#0FA958;background:var(--c-mint)}
/* Уборки: сводка дня и отчёт конкретного объекта, как в рабочем кабинете. */
.hd-clean{max-width:720px;--hd-clean-success:#237747}
.hd-clean-heading{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.hd-clean-heading>b{font-family:var(--f-head);font-size:15px;line-height:1.3}
.hd-clean-heading>span{font-size:11px;color:var(--c-muted)}
.hd-clean-auto{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--c-accent);margin-bottom:14px}
.hd-clean svg{display:block;flex:none}
.hd-clean-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
.hd-clean-list{display:grid;gap:8px}
.hd-clean-task{padding:9px 12px;border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-surface)}
.hd-clean-task--done{background:color-mix(in srgb,var(--c-mint) 28%,var(--c-surface));border-color:color-mix(in srgb,var(--hd-clean-success) 25%,var(--c-line))}
.hd-clean-title{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.3;color:var(--c-ink)}
.hd-clean-title>svg{color:var(--c-muted)}
.hd-clean-state{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;margin-top:7px;font-size:11px;color:var(--c-muted)}
.hd-clean-status{display:inline-flex;padding:2px 7px;border-radius:6px;background:var(--c-surface-2);font-size:10px;line-height:1.5;font-weight:800;color:var(--c-ink-2)}
.hd-clean-status--work{background:var(--c-sky);color:var(--c-accent)}
.hd-clean-status--done{background:var(--c-mint);color:var(--hd-clean-success)}
.hd-clean-task>p{font-size:10.5px;color:var(--c-muted);margin-top:5px;line-height:1.4}
.hd-clean-time{display:flex;align-items:center;gap:5px;font-size:10.5px;margin-top:5px;color:var(--c-ink-2)}
.hd-clean-report{padding:14px;border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-bg)}
.hd-clean-report-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.hd-clean-report-head b{font-size:13px;color:var(--c-ink);line-height:1.3}
.hd-clean-report-head p{font-size:10px;color:var(--c-muted);margin-top:2px}
.hd-clean-report-check{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c-mint);color:var(--hd-clean-success);flex:none}
.hd-clean-report-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;margin-bottom:7px}
.hd-clean-report-label>span{font-size:10px;font-weight:600;color:var(--c-muted)}
.hd-clean-checklist{list-style:none;display:grid;gap:6px;margin:0 0 10px;padding:0;font-size:10.5px;color:var(--c-ink-2)}
.hd-clean-checklist li{display:flex;align-items:center;gap:6px}
.hd-clean-checklist svg{color:var(--hd-clean-success)}
.hd-clean-photo{width:100%;height:64px;object-fit:cover;object-position:center 60%;border-radius:var(--r-1)}
.hd-clean-report-foot{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--c-muted);margin-top:10px}
@media(min-width:641px) and (max-width:900px){
  .hd-clean-grid{grid-template-columns:minmax(0,1fr);max-width:360px}
  .hd-clean-report{display:none}
}
@media(max-width:640px){
  /* Край окна намеренно обрезан hero-панелью; важные сведения остаются видимыми. */
  .hd-clean{padding-right:18px}
  .hd-clean-heading>b{font-size:12px}
  .hd-clean-heading{gap:5px 8px}
  .hd-clean-auto{font-size:10px;align-items:flex-start;margin-bottom:10px}
  .hd-clean-grid{grid-template-columns:minmax(0,1fr)}
  .hd-clean-task{padding:7px 9px}
  .hd-clean-title{font-size:12px}
  .hd-clean-report{display:none}
}
/* Договор */
.hd-doc{background:var(--c-surface-2);border-radius:var(--r-2);padding:16px}
.hd-doc-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hd-doc-file{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--c-ink)}
.hd-doc-file svg{width:16px;height:16px;color:var(--c-muted)}
.hd-doc-ok{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:11px;color:#0FA958;background:var(--c-mint);border-radius:999px;padding:4px 10px}
.hd-doc-ok svg{width:12px;height:12px}
.hd-doc p{color:var(--c-muted);font-size:11.5px;line-height:1.4;margin-top:12px}
/* Курсор */
.hd-cursor{position:absolute;top:0;left:0;width:22px;height:22px;z-index:5;pointer-events:none;transform:translate(120px,120px);transition:transform .65s cubic-bezier(.6,.05,.25,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}
.hd-cursor{transition:transform .65s cubic-bezier(.6,.05,.25,1),opacity .35s ease}
.hero-demo.is-manual .hd-cursor{opacity:0}
.hd-cursor svg{width:100%;height:100%;display:block;transform-origin:top left}
.hd-cursor.click svg{animation:hdClick .4s ease}
@keyframes hdClick{0%,100%{transform:scale(1)}45%{transform:scale(.7)}}
@media(max-width:520px){.hd-cursor{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.hd-cursor{display:none}.hd-live i{animation:none}}

/* ===== Сетка продуктов ===== */
.prods{padding:var(--pad-section) 0 0;text-align:center}
.prods>.wrap>.lead{max-width:42em;margin:14px auto 42px}
.prods-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
@media(max-width:900px){.prods-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prods-grid{grid-template-columns:1fr}}
.prod{position:relative;overflow:hidden;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--c-line-strong)}
/* Фоновая иллюстрация справа, текст накладывается поверх */
.prod__bg{position:absolute;right:-26%;top:50%;transform:translateY(-50%);width:84%;max-width:460px;height:auto;pointer-events:none;user-select:none;z-index:0}
/* Быстрый прилёт справа: крупная иллюстрация одновременно уменьшается до своего размера. */
.prod--img .prod__bg{opacity:0;transform:translate(45%,-50%) scale(2);transition:opacity .12s ease-out,transform .42s cubic-bezier(.16,.8,.24,1);will-change:transform,opacity}
.prod--img.is-in .prod__bg{opacity:1;transform:translate(0,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.prod--img .prod__bg{opacity:1!important;transform:translate(0,-50%)!important;transition:none}}
.prod--img .prod-ic,.prod--img b,.prod--img p,.prod--img .more{position:relative;z-index:1}
.prod--img b,.prod--img p{max-width:58%}
@media(max-width:900px){.prod__bg{width:70%}.prod--img b,.prod--img p{max-width:56%}}
@media(max-width:560px){.prod__bg{width:60%;right:-8%}}
.prod--img b.prod__title--single-line{max-width:100%;white-space:nowrap}
.prod-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff}
.prod-ic svg{width:24px;height:24px}
.prod b{font-family:var(--f-head);font-weight:600;font-size:18px;letter-spacing:-.01em}
.prod p{color:var(--c-ink-2);font-size:14.5px;line-height:1.5;flex:1}
.prod .more{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--c-accent)}
.prod .more svg{width:15px;height:15px;transition:transform .18s ease}
.prod:hover .more svg{transform:translateX(3px)}

/* ===== Калькулятор тарифов ===== */
.hp-calc{max-width:1120px;margin:0 auto;text-align:left}
/* Степпер «сколько объектов» */
.hp-stepper{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);padding:16px clamp(18px,2.5vw,24px);box-shadow:var(--shadow-card);margin-bottom:16px}
.hp-stepper__label{font-family:var(--f-head);font-weight:600;font-size:clamp(16px,1.8vw,19px);letter-spacing:-.01em}
.hp-stepper__label small{display:block;font-family:var(--f-body);font-weight:600;font-size:13px;color:var(--c-muted);margin-top:3px}
.hp-stepper__ctrl{display:inline-flex;align-items:center;gap:6px;background:var(--c-surface-2);border-radius:var(--r-pill);padding:5px}
.hp-stepper__ctrl button{width:40px;height:40px;border:none;border-radius:50%;background:var(--c-surface);color:var(--c-ink);font-size:22px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 1px 4px rgba(17,17,17,.08);transition:background .15s,transform .1s}
.hp-stepper__ctrl button:hover{background:var(--c-accent);color:#fff}
.hp-stepper__ctrl button:active{transform:scale(.94)}
.hp-stepper__val{width:56px;height:40px;border:none;background:transparent;text-align:center;font-family:var(--f-head);font-weight:600;font-size:22px;color:var(--c-ink);letter-spacing:-.02em;-moz-appearance:textfield}
.hp-stepper__val::-webkit-outer-spin-button,.hp-stepper__val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hp-stepper__val:focus{outline:none}

/* Карточки сервисов — компактные, в один ряд на десктопе */
.hp-price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media(max-width:1000px){.hp-price-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.hp-price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.hp-price-grid{grid-template-columns:1fr}}
.hp-pcard{display:flex;flex-direction:column;gap:9px;background:var(--c-surface);border:1.5px solid var(--c-line);border-radius:var(--r-2);padding:16px;transition:border-color .18s ease,box-shadow .18s ease}
.hp-pcard.is-on{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-sky)}
.hp-pcard__ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff}
.hp-pcard__ic svg{width:21px;height:21px}
.hp-pcard__body{min-width:0}
.hp-pcard__body h3{font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.2;margin:0}
.hp-pcard__body p{color:var(--c-muted);font-size:12.5px;line-height:1.4;margin-top:5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hp-pcard__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--c-line)}
.hp-pcard__price{font-family:var(--f-head);font-weight:600;font-size:23px;letter-spacing:-.02em;color:var(--c-ink);line-height:1}
.hp-pcard__price span{font-family:var(--f-body);font-size:13.5px;font-weight:700;color:var(--c-muted)}
.hp-pcard__per{color:var(--c-muted);font-size:12px;font-weight:600;margin-top:6px;line-height:1.3}
.hp-pcard__add{width:100%;height:42px;border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font-family:var(--f-body);font-weight:800;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,border-color .15s,color .15s}
.hp-pcard__add:hover{border-color:var(--c-ink);background:rgba(17,17,17,.03)}
.hp-pcard__add.is-on{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.hp-pcard__add.is-on:hover{background:#0857d6}
.hp-pcard__add svg{flex:none}

/* Итоговая панель — липкая, чтобы сумма всегда была на экране */
.hp-bundle{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;background:radial-gradient(ellipse at 85% 0%,#243447,#111 62%);border-radius:var(--r-3);padding:clamp(16px,2.2vw,24px) clamp(20px,3vw,32px);color:#fff;box-shadow:0 16px 40px -12px rgba(17,17,17,.45)}
.hp-bundle__info{flex:1;min-width:200px}
.hp-bundle__cap{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.hp-bundle__chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;min-height:26px}
.hp-chip{font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--r-pill);color:#fff}
.hp-bundle__hint{color:rgba(255,255,255,.55);font-size:14px}
.hp-bundle__sum{text-align:right;margin-left:auto}
.hp-bundle__total{font-family:var(--f-head);font-weight:600;font-size:clamp(28px,3.6vw,38px);letter-spacing:-.03em;line-height:1}
.hp-bundle__total span{font-family:var(--f-body);font-size:17px;font-weight:700;color:rgba(255,255,255,.55)}
.hp-bundle__from{font-size:clamp(24px,3vw,32px)}
.hp-bundle__sub{font-size:12px;color:rgba(255,255,255,.55);margin-top:5px;min-height:15px}
.hp-bundle__cta{flex:none}
.hp-bundle__cta.is-disabled{opacity:.45;pointer-events:none}
/* На узких экранах панель остаётся компактной строкой: прячем чипы,
   сумму и кнопку — в одну линию, шапка набора — над ними. */
@media(max-width:560px){
  .hp-bundle{gap:8px 14px;padding:14px 16px}
  .hp-bundle__chips{display:none}
  .hp-bundle__info{flex:1 1 100%;min-width:0}
  .hp-bundle__sum{flex:1;text-align:left;margin-left:0}
  .hp-bundle__total{font-size:26px}
  .hp-bundle__cta{flex:none;height:46px;padding:0 20px}
}

/* ===== Кому подойдёт + хозяевами для хозяев ===== */
.hp-about{padding:var(--pad-section) 0 0}
.hp-about-in{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:960px){.hp-about-in{grid-template-columns:1fr;gap:36px}}
.hp-kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin-bottom:16px}
.hp-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent)}
.hp-kicker--onDark{color:rgba(255,255,255,.6)}
.hp-about h2{margin-bottom:16px}
.hp-about .lead{margin-bottom:28px;max-width:30em}
/* Список «кому подойдёт» */
.hp-who{display:flex;flex-direction:column}
.hp-who__row{display:flex;align-items:center;gap:18px;padding:16px 2px;border-top:1px solid var(--c-line);transition:padding-left .18s ease}
.hp-who__row:last-child{border-bottom:1px solid var(--c-line)}
.hp-who__row:hover{padding-left:6px}
.hp-who__n{flex:none;width:30px;font-family:var(--f-head);font-weight:600;font-size:14px;color:#0B57D0;letter-spacing:.02em}
.hp-who__tx{min-width:0}
.hp-who__tx b{display:block;font-family:var(--f-head);font-weight:600;font-size:clamp(17px,1.9vw,20px);letter-spacing:-.01em;line-height:1.2}
.hp-who__tx small{display:block;color:var(--c-muted);font-size:14.5px;font-weight:600;margin-top:3px}
/* Тёмная карточка «хозяевами для хозяев» */
/* ===== Квиз-сегментатор (в стиле Lodgify) ===== */
.hp-quiz{position:relative;overflow:hidden;border-radius:var(--r-4);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-lift);background:linear-gradient(168deg,#6ea0f7 0%,#a7c4fb 42%,#e9f0fd 100%)}
.hp-quiz h3{font-family:var(--f-head);font-weight:600;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.12;color:#0b1b3a;margin-bottom:10px}
.hp-quiz__pane>p{color:#31456d;font-size:15px;line-height:1.5;margin-bottom:24px;max-width:26em}
.hp-quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.hp-quiz__opts{grid-template-columns:1fr}}
.hp-quiz__opt{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:118px;text-align:left;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.55);border-radius:16px;padding:16px;font:inherit;font-family:var(--f-head);font-weight:600;font-size:14.5px;line-height:1.2;letter-spacing:-.01em;color:#0b1b3a;cursor:pointer;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.hp-quiz__opt:hover{background:rgba(255,255,255,.72);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(11,27,58,.35)}
.hp-quiz__ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;color:#0b1b3a}
.hp-quiz__ic svg{width:19px;height:19px}
/* Результат */
.hp-quiz__result[hidden]{display:none}
.hp-quiz__result{animation:hdFade .3s ease}
.hp-quiz__back{border:0;background:transparent;padding:0;margin-bottom:16px;color:#31456d;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hp-quiz__back:hover{color:#0b1b3a}
.hp-quiz__rtitle{font-family:var(--f-head);font-weight:600;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;line-height:1.15;color:#0b1b3a;margin-bottom:10px}
.hp-quiz__rtext{color:#25365c;font-size:15px;line-height:1.55;margin-bottom:24px;max-width:30em}
.hp-quiz__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hp-quiz__ctas .btn--ghost{background:rgba(255,255,255,.55);border-color:transparent;color:#0b1b3a}
.hp-quiz__ctas .btn--ghost:hover{background:rgba(255,255,255,.8)}
/* Прогресс шагов */
.hp-quiz__progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.hp-quiz__progress[hidden]{display:none}
.hp-quiz__pstep{font-size:12px;font-weight:800;color:#31456d}
.hp-quiz__pstep b{color:#0b1b3a}
.hp-quiz__bars{display:flex;gap:6px}
.hp-quiz__bars i{width:26px;height:5px;border-radius:999px;background:rgba(255,255,255,.5);transition:background .2s}
.hp-quiz__bars i.on{background:#0b1b3a}
.hp-quiz__pane[hidden]{display:none}
.hp-quiz__pane{animation:hdFade .3s ease}
.hp-quiz__opt.is-on{background:#fff}
/* Шаг 2 — пилюли одиночного выбора */
.hp-quiz__pills{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.hp-quiz__pills{grid-template-columns:1fr}}
.hp-quiz__pill{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.55);border-radius:14px;padding:15px 16px;font:inherit;font-family:var(--f-head);font-weight:600;font-size:15px;color:#0b1b3a;cursor:pointer;text-align:left;transition:background .18s,transform .18s}
.hp-quiz__pill:hover{background:rgba(255,255,255,.72);transform:translateY(-2px)}
.hp-quiz__pill.is-on{background:#fff}
/* Шаг 3 — чипы мультивыбора */
.hp-quiz__chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.hp-quiz__chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:9px 15px;font:inherit;font-weight:700;font-size:13.5px;color:#0b1b3a;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.hp-quiz__chip::before{content:"+";font-weight:800;color:#31456d}
.hp-quiz__chip:hover{background:rgba(255,255,255,.62)}
.hp-quiz__chip.is-on{background:#0b1b3a;color:#fff;border-color:#0b1b3a}
.hp-quiz__chip.is-on::before{content:"✓";color:#fff}
.hp-quiz__finish{width:100%;justify-content:center}
.hp-quiz__finish:disabled{opacity:.5;cursor:default;transform:none}

/* ===== Онбординг и поддержка ===== */
.hp-care{padding:var(--pad-section) 0 0;text-align:center}
.hp-care-head{max-width:44em;margin:0 auto}
.hp-care-head h2{margin-bottom:14px}
.hp-care-head .lead{color:var(--c-ink-2)}
.hp-care-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px;margin:40px auto 0;text-align:left}
@media(max-width:900px){.hp-care-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hp-care-grid{grid-template-columns:1fr}}
.hp-care-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);padding:26px;display:flex;flex-direction:column;gap:11px}
.hp-care-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff}
.hp-care-ic svg{width:23px;height:23px}
.hp-care-card b{font-family:var(--f-head);font-weight:600;font-size:17px;letter-spacing:-.01em}
.hp-care-card p{color:var(--c-ink-2);font-size:14.5px;line-height:1.5}

/* ===== Мессенджер: список чатов (как в реальном кабинете) ===== */
.mm{font-size:12px}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mm-title{font-family:var(--f-head);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--c-ink)}
.mm-tools{display:inline-flex;gap:6px}
.mm-tools i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--c-muted);background:var(--c-surface-2)}
.mm-tools i svg{width:16px;height:16px}
.mm-search{display:flex;align-items:center;gap:8px;background:var(--c-surface-2);border-radius:10px;padding:9px 12px;margin-bottom:6px;color:var(--c-muted);font-size:12px}
.mm-search svg{flex:none;width:15px;height:15px;color:var(--c-muted)}
.mm-list{display:flex;flex-direction:column}
.mm-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--c-line)}
.mm-row:last-child{border-bottom:none}
.mm-ava{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;font-family:var(--f-head)}
.mm-ava__photo{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.mm-ch{position:absolute;z-index:1;right:-2px;bottom:-2px;width:19px;height:19px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--c-surface);display:grid;place-items:center;background:#fff}
.mm-ch svg{width:19px;height:19px;display:block}
.mm-ch img{width:19px;height:19px;display:block;object-fit:cover;border-radius:50%}
.mm-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mm-top{display:flex;align-items:center;gap:7px}
.mm-name{flex:0 1 auto;min-width:0;font-weight:800;font-size:13.5px;color:var(--c-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-time{flex:none;margin-left:auto;color:var(--c-muted);font-size:11px;font-weight:700}
/* Пилюля статуса брони гостя (проживает / заезд / выехал) — как в реальном чате */
.mm-stat{flex:none;font-size:9.5px;font-weight:800;line-height:1;padding:3px 8px;border-radius:999px;white-space:nowrap}
.mm-stat--live{background:#e3f5ea;color:#0f9d55}
.mm-stat--soon{background:var(--c-sky);color:var(--c-accent)}
.mm-stat--out{background:var(--c-surface-2);color:var(--c-muted)}
.mm-mid{display:flex;align-items:center;gap:8px}
.mm-prev{flex:1;min-width:0;color:var(--c-muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-unread{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--c-accent);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center}

/* ===== Вертикальный таймлайн цепочки (в зигзаге «Автоматизации»), светлая гамма ===== */
.hp-fl{padding:6px 4px}
.hp-fl__i{display:flex;gap:15px;align-items:flex-start}
.hp-fl__dot{flex:none;width:40px;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.hp-fl__dot i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:18px;background:#fff;box-shadow:0 2px 8px rgba(17,17,17,.12)}
.hp-fl__dot::after{content:"";flex:1;width:2px;background:rgba(17,17,17,.15);margin:6px 0}
.hp-fl__i:last-child .hp-fl__dot::after{display:none}
.hp-fl__tx{padding-bottom:24px;min-width:0}
.hp-fl__i:last-child .hp-fl__tx{padding-bottom:0}
.hp-fl__tx b{display:block;font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--c-ink);margin-bottom:3px}
.hp-fl__tx small{display:block;color:var(--c-ink-2);font-size:13px;line-height:1.45}
.hp-fl__tag{display:inline-block;margin-top:9px;background:var(--c-sky);color:#0B57D0;border-radius:999px;padding:4px 13px;font-weight:800;font-size:11.5px}
@media(max-width:960px){
  .feature-mobile-first{row-gap:0}
  .feature-mobile-first>.feature-copy{display:contents}
  .feature-mobile-first>.feature-copy>h2{order:-2;margin-bottom:28px}
  .feature-mobile-first>.pane{order:-1;margin-bottom:28px}
  .feature-mobile-first>.feature-copy>.lead{order:0}
  .feature-mobile-first>.feature-copy>.checks{order:1}
  .feature-mobile-first>.feature-copy>.btn{order:2;justify-self:start}
}

/* ===== Фото + «жидкое стекло» (зигзаг «Уборки») ===== */
.hp-photopane{position:relative;padding:0;overflow:hidden;min-height:clamp(360px,42vw,500px);display:grid;place-items:center}
.hp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-glass{position:relative;z-index:1;width:min(80%,384px);background:rgba(38,33,28,.30);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.32);border-radius:var(--r-3);padding:clamp(18px,2.4vw,24px);display:flex;flex-direction:column;gap:22px;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.hp-glass__i{display:flex;gap:11px;align-items:flex-start;color:#fff;font-weight:500;font-size:clamp(12.5px,1.25vw,14px);line-height:1.35;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hp-glass__ck{flex:none;width:20px;height:20px;border-radius:6px;background:#34C759;color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.hp-glass__ck svg{width:12px;height:12px}

/* Поочерёдное появление пунктов при прокрутке до блока */
.hp-glass[data-reveal] .hp-glass__i{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.hp-glass[data-reveal] .hp-glass__ck{opacity:0;transform:scale(.4);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.hp-glass.is-in .hp-glass__i{opacity:1;transform:none}
.hp-glass.is-in .hp-glass__ck{opacity:1;transform:none}
.hp-glass.is-in .hp-glass__i:nth-child(1){transition-delay:.05s}
.hp-glass.is-in .hp-glass__i:nth-child(2){transition-delay:.35s}
.hp-glass.is-in .hp-glass__i:nth-child(3){transition-delay:.65s}
.hp-glass.is-in .hp-glass__i:nth-child(1) .hp-glass__ck{transition-delay:.2s}
.hp-glass.is-in .hp-glass__i:nth-child(2) .hp-glass__ck{transition-delay:.5s}
.hp-glass.is-in .hp-glass__i:nth-child(3) .hp-glass__ck{transition-delay:.8s}
@media (prefers-reduced-motion:reduce){
  .hp-glass[data-reveal] .hp-glass__i,
  .hp-glass[data-reveal] .hp-glass__ck{opacity:1;transform:none;transition:none}
}

/* ===== Фото уведомлений (зигзаг «Договоры») ===== */
.hp-contract-pane{position:relative;padding:0;overflow:visible;aspect-ratio:1;border-radius:var(--r-4)}
.hp-contract-pane img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-4)}
.hp-cbadge{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:11px 18px 11px 12px;background:#fff;border-radius:999px;box-shadow:0 12px 30px rgba(30,25,20,.18);font-weight:600;font-size:clamp(14px,1.15vw,17px);color:#1a1a1a;white-space:nowrap;will-change:transform}
.hp-cbadge svg{flex:0 0 auto;display:block}
.hp-cbadge--pass{top:12%;right:-5%;animation:hp-cfloat 5.2s ease-in-out infinite}
.hp-cbadge--sign{top:50%;left:-6%;animation:hp-cfloat 6.1s ease-in-out infinite;animation-delay:-2.4s}
@keyframes hp-cfloat{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-13px) rotate(.5deg)}}
@media(max-width:520px){.hp-cbadge{padding:9px 13px 9px 9px;gap:7px}.hp-cbadge--pass{right:-2%}.hp-cbadge--sign{left:-2%}}
@media(prefers-reduced-motion:reduce){.hp-cbadge{animation:none}}

/* ===== Телефон с сайтом (зигзаг «Конструктор сайтов») ===== */
.hp-site-phone{position:relative;overflow:hidden;padding:0;background:none;box-shadow:var(--shadow-lift);border-radius:var(--r-4)}
.hp-site-phone .phone-photo{position:relative;line-height:0}
.hp-site-phone .phone-photo>img{width:100%;height:auto;display:block;border-radius:var(--r-4)}
.hp-site-phone .phone-screen{position:absolute;left:26.3%;top:28.6%;width:47.6%;bottom:0;overflow:hidden;background:#fff;line-height:normal;text-align:left}
.hp-site-phone .m-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 9px;border-bottom:1px solid var(--c-line)}
.hp-site-phone .m-nav b{font-family:var(--f-head);font-weight:600;font-size:12px}
.hp-site-phone .m-burger{display:inline-flex;flex-direction:column;gap:3.5px}
.hp-site-phone .m-burger i{width:14px;height:2px;background:#111;border-radius:2px;display:block}
.hp-site-phone .m-hero{background:linear-gradient(180deg,rgba(16,24,16,.32),rgba(16,24,16,.74)),url('/img/lp/websites/aframe.webp') center/cover;color:#fff;padding:52px 14px 46px;text-align:center}
.hp-site-phone .m-hero b{font-family:var(--f-head);font-weight:600;font-size:12.5px;line-height:1.2;display:block;margin-bottom:6px}
.hp-site-phone .m-hero small{display:block;opacity:.85;font-size:9.5px;margin-bottom:10px}
.hp-site-phone .m-btn{display:inline-block;background:#fff;color:#1f2d1e;border-radius:999px;padding:7px 15px;font-weight:800;font-size:10px}
.hp-site-phone .m-cards{padding:10px;display:flex;flex-direction:column;gap:9px}
.hp-site-phone .m-card{display:flex;align-items:center;gap:12px}
.hp-site-phone .m-card i{flex:none;width:48px;height:40px;border-radius:9px}
.hp-site-phone .m-card i.mc1{background:linear-gradient(135deg,#e8d9be,#d9b98c)}
.hp-site-phone .m-card i.mc2{background:linear-gradient(135deg,#c9d8c5,#94ab92)}
.hp-site-phone .m-card b{display:block;font-size:11px;font-weight:800}
.hp-site-phone .m-card small{display:block;color:var(--c-muted);font-size:9.5px}

/* ===== Мессенджер: интерактивная демо-анимация (зигзаг «Мессенджер») ===== */
.mg-pane{overflow:hidden;display:grid;place-items:center;padding:clamp(20px,3vw,40px) clamp(14px,2vw,30px)}
.mg{width:288px;max-width:100%;perspective:1400px}
.mg-phone{position:relative;width:100%;background:linear-gradient(150deg,#2b2b30,#111114);border-radius:42px;padding:8px;box-shadow:0 30px 60px -18px rgba(17,17,17,.5),0 2px 0 rgba(255,255,255,.08) inset;--mg-top:26px}
/* Входная анимация-«сборка»: телефон влетает, внутри каскадом собираются элементы.
   .is-armed вешает JS только когда анимация будет проиграна (без JS/ reduced-motion — всё видно сразу). */
.mg.is-armed .mg-phone{opacity:0;transform:translateY(38px) scale(.93)}
.mg.is-revealed .mg-phone{animation:mgPhoneIn .64s cubic-bezier(.22,1,.36,1) forwards}
@keyframes mgPhoneIn{from{opacity:0;transform:translateY(38px) scale(.93)}to{opacity:1;transform:none}}
.mg.is-armed .mg-view--list>*{opacity:0}
.mg.is-revealed .mg-view--list>*{animation:mgItemIn .5s cubic-bezier(.22,1,.36,1) both}
.mg.is-revealed .mg-lhead{animation-delay:.20s}
.mg.is-revealed .mg-search2{animation-delay:.27s}
.mg.is-revealed .mg-filters{animation-delay:.34s}
.mg.is-revealed .mg-chats{animation-delay:.40s}
/* строки чата собираются по одной */
.mg.is-armed .mg-chats .mg-chat{opacity:0}
.mg.is-revealed .mg-chats .mg-chat{animation:mgItemIn .46s cubic-bezier(.22,1,.36,1) both}
.mg.is-revealed .mg-chats .mg-chat:nth-child(1){animation-delay:.44s}
.mg.is-revealed .mg-chats .mg-chat:nth-child(2){animation-delay:.52s}
.mg.is-revealed .mg-chats .mg-chat:nth-child(3){animation-delay:.60s}
.mg.is-revealed .mg-chats .mg-chat:nth-child(4){animation-delay:.68s}
@keyframes mgItemIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .mg.is-armed .mg-phone,.mg.is-armed .mg-view--list>*,.mg.is-armed .mg-chats .mg-chat{opacity:1;transform:none;animation:none}
}
.mg-island{position:absolute;z-index:8;top:15px;left:50%;transform:translateX(-50%);width:74px;height:20px;border-radius:999px;background:#000}
.mg-screen{position:relative;height:568px;border-radius:34px;overflow:hidden;background:#fff;font-family:var(--f-body);text-align:left;color:var(--c-ink);-webkit-font-smoothing:antialiased}

/* статус-бар */
.mg-status{position:relative;z-index:7;height:var(--mg-top);display:flex;align-items:center;justify-content:space-between;padding:7px 22px 0;font-size:12px;font-weight:700;letter-spacing:.01em;color:#111;background:transparent}
.mg-status__time{font-variant-numeric:tabular-nums}
.mg-view--chat .mg-cheadwrap{}
.mg-status__r{display:inline-flex;align-items:center;gap:5px}
.mg-status__r b{font-size:10px}
.mg-sig{width:17px;height:11px;color:#111}
.mg-batt{width:25px;height:12px;color:#111}

/* два экрана, iOS-переход */
.mg-view{position:absolute;top:var(--mg-top);left:0;right:0;bottom:0;display:flex;flex-direction:column;background:#fff;will-change:transform}
.mg-view--list{transition:transform .48s cubic-bezier(.32,.72,0,1),opacity .48s ease;z-index:1}
.mg-view--chat{transform:translateX(100%);transition:transform .48s cubic-bezier(.32,.72,0,1);z-index:2;box-shadow:-14px 0 30px -18px rgba(0,0,0,.35)}
.mg-screen.show-chat .mg-view--list{transform:translateX(-24%);opacity:.55}
.mg-screen.show-chat .mg-view--chat{transform:translateX(0)}

/* --- список чатов --- */
.mg-lhead{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px}
.mg-ltitle{font-family:var(--f-head);font-weight:700;font-size:22px;letter-spacing:-.02em}
.mg-edit{width:32px;height:32px;border-radius:50%;background:var(--c-surface-2);display:grid;place-items:center;color:var(--c-accent)}
.mg-edit svg{width:16px;height:16px}
.mg-search2{display:flex;align-items:center;gap:8px;margin:2px 14px 10px;background:var(--c-surface-2);border-radius:12px;padding:9px 12px;color:var(--c-muted);font-size:12px}
.mg-search2 svg{flex:none;width:15px;height:15px}
.mg-filters{display:flex;gap:7px;padding:0 14px 8px;overflow:hidden}
.mg-fchip{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--c-ink-2);background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:6px 11px}
.mg-fchip b{background:var(--c-surface-2);border-radius:999px;padding:1px 6px;font-size:10px}
.mg-fchip.is-on{background:#111;color:#fff;border-color:#111}
.mg-fchip.is-on b{background:rgba(255,255,255,.22);color:#fff}
.mg-chats{flex:1;overflow:hidden;padding:0}
.mg-chat{display:flex;width:100%;gap:11px;align-items:center;padding:11px 16px;background:none;border:0;border-radius:0;-webkit-appearance:none;appearance:none;box-shadow:none;text-align:left;cursor:default}
.mg-chat[data-open]{position:relative;background:#eaf1ff}
.mg-chat+.mg-chat{border-top:1px solid var(--c-line)}
.mg-ava{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;font-family:var(--f-head);overflow:visible}
.mg-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mg-ava__ch{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #fff;display:grid;place-items:center;background:#fff}
.mg-ava__ch svg,.mg-ava__ch img{width:18px;height:18px;display:block;object-fit:cover;border-radius:50%}
.mg-cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mg-ctop{display:flex;align-items:center;gap:8px}
.mg-ctop b{flex:1;min-width:0;font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-ctime{flex:none;color:var(--c-muted);font-size:10.5px;font-weight:700}
.mg-cmid{display:flex;align-items:center;gap:8px}
.mg-cprev{flex:1;min-width:0;color:var(--c-muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .25s ease}
.mg-cprev.is-new{color:var(--c-ink);font-weight:600}
.mg-unread{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--c-accent);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.mg-unread.is-on{opacity:1;transform:scale(1)}
.mg-ctags{display:flex;align-items:center;gap:6px;margin-top:1px}
.mg-tag{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;line-height:1;padding:3px 7px;border-radius:999px;background:var(--c-surface-2);color:var(--c-muted);white-space:nowrap}
.mg-tag i{width:12px;height:12px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:8px;color:var(--c-ink-2)}
.mg-tag--live{background:#e3f5ea;color:#0f9d55}
.mg-tag--soon{background:var(--c-sky);color:var(--c-accent)}
.mg-tag--out{background:var(--c-surface-2);color:var(--c-muted)}
.mg-chat.is-press{background:var(--c-surface-2)}

/* --- диалог --- */
.mg-view--chat{top:0;background:linear-gradient(180deg,#efe7d8,#e9e0ce)}
.mg-chead{position:relative;z-index:5;display:flex;align-items:center;gap:9px;padding:calc(6px + var(--mg-top)) 12px 8px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.mg-back{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--c-ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.mg-back svg{width:16px;height:16px}
.mg-chead__ava{position:relative;flex:none;width:38px;height:38px;border-radius:50%}
.mg-chead__ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mg-chead__ch{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #fff;display:grid;place-items:center;background:#fff}
.mg-chead__ch svg,.mg-chead__ch img{width:16px;height:16px;display:block;object-fit:cover;border-radius:50%}
.mg-chead__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mg-chead__mid>b{font-size:13.5px;font-weight:800;line-height:1}
.mg-chead__meta{display:flex;align-items:center;gap:5px}
.mg-hpill{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
.mg-hpill--live{background:var(--c-accent);color:#fff}
.mg-hpill--obj{background:var(--c-surface-2);color:var(--c-muted)}
.mg-hpill--obj i{width:12px;height:12px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:8px}
.mg-chan{position:relative;flex:none;display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:4px 6px 4px 5px;cursor:default}
.mg-chan__ic{width:20px;height:20px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.mg-chan__ic svg,.mg-chan__ic img{width:20px;height:20px;display:block;border-radius:50%}
.mg-chev{color:var(--c-muted);display:grid;place-items:center;transition:transform .25s ease}
.mg-chev svg{width:13px;height:13px}
.mg-chan.is-open .mg-chev{transform:rotate(180deg)}
.mg-chanmenu{position:absolute;z-index:9;top:78px;right:10px;width:186px;background:#fff;border-radius:16px;box-shadow:0 18px 44px rgba(17,17,17,.22);padding:6px;opacity:0;transform:translateY(-8px) scale(.96);transform-origin:top right;pointer-events:none;transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.3,.64,1)}
.mg-chanmenu.is-on{opacity:1;transform:none}
.mg-chanmenu__t{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);padding:6px 10px 4px}
.mg-chanopt{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;font-size:13px;font-weight:600}
.mg-chanopt__ic{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center}
.mg-chanopt__ic svg,.mg-chanopt__ic img{width:22px;height:22px;display:block;border-radius:50%}
.mg-chk{margin-left:auto;width:16px;height:16px;border-radius:50%;background:var(--c-accent);flex:none;opacity:0;position:relative}
.mg-chk::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mg-chanopt.is-on{background:var(--c-sky)}
.mg-chanopt.is-on .mg-chk{opacity:1}

/* лента переписки */
.mg-thread{flex:1;overflow:hidden;padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(rgba(120,100,70,.10) 1px,transparent 1px);background-size:16px 16px}
.mg-day{align-self:center;font-size:10px;font-weight:800;color:var(--c-muted);background:rgba(255,255,255,.7);border-radius:999px;padding:3px 12px;margin-bottom:2px}
.mg-msg{display:none;max-width:84%}
.mg-msg.is-in{display:flex;animation:mgPop .34s cubic-bezier(.34,1.4,.64,1)}
@keyframes mgPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.mg-msg--in{align-self:flex-start}
.mg-msg--out{align-self:flex-end}
.mg-bub{position:relative;font-size:13px;line-height:1.4;padding:9px 12px 8px;border-radius:16px;box-shadow:0 1px 3px rgba(17,17,17,.09)}
.mg-msg--in .mg-bub{background:#fff;border-bottom-left-radius:6px;color:var(--c-ink)}
.mg-msg--out .mg-bub{background:#f7edd7;border-bottom-right-radius:6px;color:#2a2620}
.mg-bub em{font-style:normal;font-size:9px;color:#a49b8b;margin-left:8px;white-space:nowrap}
.mg-msg--out .mg-bub em{color:#b0a58f}
.mg-rd{color:#2ea3f2;font-size:9px;letter-spacing:-2px}
/* индикатор набора */
.mg-typing .mg-bub{display:inline-flex;gap:4px;padding:11px 13px}
.mg-typing .mg-bub i{width:6px;height:6px;border-radius:50%;background:#c3bbab;animation:mgType 1.2s infinite ease-in-out}
.mg-typing .mg-bub i:nth-child(2){animation-delay:.2s}
.mg-typing .mg-bub i:nth-child(3){animation-delay:.4s}
@keyframes mgType{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ссылка на оплату — обычным сообщением */
.mg-link{color:#3478f6;text-decoration:underline;text-underline-offset:2px;word-break:break-all}

/* нижние листы (вложения / сумма) */
.mg-sheet{position:absolute;left:0;right:0;bottom:0;z-index:8;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -14px 34px rgba(17,17,17,.16);padding:10px 8px 14px;transform:translateY(112%);transition:transform .34s cubic-bezier(.32,.72,0,1)}
.mg-sheet.is-on{transform:translateY(0)}
.mg-arow{display:flex;align-items:center;gap:13px;padding:12px 14px;font-size:14px;font-weight:600;border-radius:12px;color:var(--c-ink)}
.mg-arow__ic{flex:none;width:24px;height:24px;color:var(--c-ink-2)}
.mg-arow__ic svg{width:22px;height:22px}
.mg-arow.is-hl.is-pick{background:var(--c-sky);color:var(--c-accent)}
.mg-arow.is-hl.is-pick .mg-arow__ic{color:var(--c-accent)}
.mg-paysheet__grip{width:38px;height:4px;border-radius:999px;background:var(--c-line-strong);margin:2px auto 10px}
.mg-paysheet__t{font-family:var(--f-head);font-weight:700;font-size:15px;padding:0 12px 10px}
.mg-paysheet__f{display:flex;align-items:center;justify-content:space-between;margin:0 10px 8px;padding:11px 13px;border:1px solid var(--c-line);border-radius:12px;font-size:12px;color:var(--c-muted)}
.mg-paysheet__f b{font-size:13.5px;font-weight:800;color:var(--c-ink)}
.mg-paysheet__f--amt b{font-family:var(--f-head);font-size:16px}
.mg-paysheet__send{margin:12px 10px 0;background:var(--c-accent);color:#fff;text-align:center;font-weight:800;font-size:13.5px;padding:12px;border-radius:12px;box-shadow:0 10px 22px -8px rgba(10,102,255,.6)}
.mg-paysheet__send.is-press{transform:scale(.97)}

/* поле ввода */
.mg-input{position:relative;z-index:6;display:flex;align-items:center;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-top:1px solid rgba(0,0,0,.06)}
.mg-iplus,.mg-itpl,.mg-imic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--c-ink-2)}
.mg-iplus{background:var(--c-surface-2)}
.mg-iplus svg,.mg-itpl svg,.mg-imic svg{width:18px;height:18px}
.mg-iplus.is-open{background:var(--c-sky);color:var(--c-accent);transform:rotate(135deg);transition:transform .3s ease}
.mg-itpl{border:1px solid var(--c-line)}
.mg-imic{background:#efe9fb;color:#7c3aed}
.mg-ifield{flex:1;min-width:0;height:34px;display:flex;align-items:center;padding:0 12px;background:var(--c-surface-2);border-radius:999px;overflow:hidden}
.mg-iph{flex:1;min-width:0;font-size:12.5px;color:var(--c-muted);white-space:nowrap;overflow:hidden}
.mg-iph.is-typed{color:var(--c-ink)}
.mg-iph.is-typing::after{content:"";display:inline-block;width:1.5px;height:14px;background:var(--c-accent);margin-left:1px;vertical-align:-2px;animation:mgCaret .9s steps(1) infinite}
@keyframes mgCaret{50%{opacity:0}}

/* тап-эффект */
.mg-tap{position:absolute;z-index:30;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(10,102,255,.22);border:1.5px solid rgba(10,102,255,.5);opacity:0;pointer-events:none}
.mg-tap.is-on{animation:mgTap .5s ease-out}
@keyframes mgTap{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}

@media(max-width:960px){.mg-pane{min-height:auto}}
@media(prefers-reduced-motion:reduce){
  .mg-view,.mg-msg,.mg-sheet,.mg-chanmenu,.mg-unread{transition:none}
  .mg-msg.is-in,.mg-typing .mg-bub i,.mg-iph.is-typing::after,.mg-tap.is-on{animation:none}
}

/* ============ ИИ-ответы: живой чат на природном фоне ============ */
.aichat{position:relative;padding:0;overflow:hidden;min-height:clamp(380px,44vw,520px);display:flex;align-items:center;justify-content:center}
.aichat__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.aichat::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(28,22,16,.10),rgba(28,22,16,.24))}
.aichat__stack{position:relative;z-index:1;width:min(88%,440px);display:flex;flex-direction:column;gap:16px;padding:clamp(16px,2.2vw,26px)}

.aichat__bubble{background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 24px 50px rgba(30,40,60,.28),0 2px 6px rgba(30,40,60,.12);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.25,1)}
.aichat__bubble.is-in{opacity:1;transform:none}

/* Пузырь гостя */
.aichat__bubble--guest{display:flex;align-items:center;gap:12px;padding:14px 16px}
.aichat__ava{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.aichat__ava img{width:100%;height:100%;object-fit:cover;display:block}
.aichat__body{flex:1;min-width:0}
.aichat__meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.aichat__meta b{font-size:14px;font-weight:700;color:var(--c-ink)}
.aichat__meta time{font-size:12px;color:var(--c-muted)}
.aichat__body p{font-size:14.5px;line-height:1.4;color:var(--c-ink-2);margin:0}

/* Пузырь ИИ-ответа */
.aichat__bubble--ai{padding:20px 20px 16px}
.aichat__typed{margin:0 0 14px;font-size:16px;line-height:1.5;color:var(--c-ink);min-height:2.9em}
.aichat__cursor{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--c-accent);opacity:0;animation:aichatBlink 1s steps(1) infinite}
.aichat__cursor.is-on{opacity:1}
.aichat__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(30,40,60,.10)}
.aichat__gen{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--c-ink);opacity:0;transition:opacity .3s}
.aichat__gen.is-on{opacity:1}
.aichat__spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(17,17,17,.2);border-top-color:var(--c-ink);animation:aichatSpin .7s linear infinite}
.aichat__send{display:inline-flex;align-items:center;gap:8px;background:var(--c-accent);color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:9px 18px;box-shadow:0 10px 24px -8px rgba(10,102,255,.7);opacity:.45;transform:scale(.96);transition:opacity .35s,transform .35s}
.aichat__send svg{width:16px;height:16px}
.aichat__send.is-on{opacity:1;transform:none}
.aichat__send.is-on{animation:aichatPop .4s ease}

@keyframes aichatSpin{to{transform:rotate(360deg)}}
@keyframes aichatBlink{50%{opacity:0}}
@keyframes aichatPop{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

@media(max-width:960px){.aichat{min-height:clamp(340px,80vw,440px)}}

/* Стартовое состояние до запуска анимации */
[data-aichat] .aichat__typed{visibility:hidden}
[data-aichat].is-live .aichat__typed{visibility:visible}

@media(prefers-reduced-motion:reduce){
  .aichat__bubble{opacity:1;transform:none;transition:none}
  .aichat__cursor,.aichat__spin{animation:none}
  .aichat__gen{display:none}
  .aichat__send{opacity:1;transform:none}
}

/* ============ Блок «Всё управление в одном окне» — reveal-анимация тоста ============ */
/* Стартовое (скрытое) состояние: тост маленький, чуть ниже, галочка не нарисована */
.toast--reveal{opacity:0;transform:translate(-50%,-50%) translateY(14px) scale(.92)}
.toast--reveal i{transform:scale(.6);opacity:0}
.toast--reveal .toast-txt{opacity:0;transform:translateX(-6px)}
.toast--reveal .toast-ring,.toast--reveal .toast-tick{stroke-dasharray:1;stroke-dashoffset:1}

/* Проигрываем, когда блок попал во вьюпорт (класс вешает JS) */
.keep-visual.is-in .toast--reveal{animation:toastIn .6s cubic-bezier(.22,1,.36,1) forwards}
.keep-visual.is-in .toast--reveal i{animation:toastBadge .5s cubic-bezier(.34,1.56,.64,1) .28s forwards}
.keep-visual.is-in .toast--reveal .toast-txt{animation:toastTxt .5s cubic-bezier(.22,1,.36,1) .34s forwards}
.keep-visual.is-in .toast--reveal .toast-ring{animation:toastDraw .45s ease-out .42s forwards}
.keep-visual.is-in .toast--reveal .toast-tick{animation:toastDraw .35s ease-out .74s forwards}
/* Лёгкий «отклик» галочки после отрисовки */
.keep-visual.is-in .toast--reveal i{will-change:transform}

@keyframes toastIn{to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}}
@keyframes toastBadge{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes toastTxt{to{opacity:1;transform:translateX(0)}}
@keyframes toastDraw{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .toast--reveal,.toast--reveal i,.toast--reveal .toast-txt{opacity:1;transform:translate(-50%,-50%);animation:none}
  .toast--reveal i{transform:none}
  .toast--reveal .toast-txt{transform:none}
  .toast--reveal .toast-ring,.toast--reveal .toast-tick{stroke-dashoffset:0;animation:none}
}

/* Постер как фон контейнера — убирает серую вспышку до отрисовки/декода
   первого кадра видео (пустой <video> красится серым/чёрным на пару мс). */
#why .keep-visual{
  background:#f5ceb3 url('/img/lp/websites/keep-video-poster.jpg') center/cover no-repeat;
}

/* ── Бейджи «где доступно» под тостом ─────────────────────────────── */
.keep-visual .toast--reveal,.keep-badges{width:calc(100% - 40px);max-width:360px}
.keep-visual .toast--reveal{justify-content:center}
.keep-badges{position:absolute;left:50%;top:calc(50% + 45px);transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;pointer-events:none}
.kb{display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border-radius:var(--r-pill);padding:8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.2);white-space:nowrap}
.kb i{flex:none;width:19px;height:19px;display:grid;place-items:center;color:#111;font-style:normal}
.kb i svg,.kb i img{width:100%;height:100%;object-fit:contain}
.kb-tx{display:flex;flex-direction:column;line-height:1.05;color:#111;text-align:left}
.kb-tx b{font-weight:500;font-size:9px;color:#5b6472;letter-spacing:.1px}
.kb-tx em{font-weight:700;font-size:12px;font-style:normal;letter-spacing:-.2px}
/* Стартовое (скрытое) состояние — чуть ниже, уменьшены */
.keep-badges .kb{opacity:0;transform:translateY(16px) scale(.92)}
.keep-visual.is-in .keep-badges .kb{animation:kbIn .55s cubic-bezier(.34,1.56,.64,1) forwards}
.keep-visual.is-in .keep-badges .kb--1{animation-delay:.62s}
.keep-visual.is-in .keep-badges .kb--2{animation-delay:.74s}
.keep-visual.is-in .keep-badges .kb--3{animation-delay:.86s}
@keyframes kbIn{to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:520px){
  .keep-badges{gap:6px}
  .kb{padding:8px 7px;gap:5px}
  .kb i{width:17px;height:17px}
  .kb-tx b{font-size:8px}
  .kb-tx em{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .keep-badges .kb{opacity:1;transform:none;animation:none}
}

/* ── Рукописные стикеры поверх Hero (десктоп) ───────────────────────── */
.hero-panel--home{position:relative}
.hero-stickers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:hidden;border-radius:inherit}
.hero-stickers .hs{position:absolute;display:block;background-repeat:no-repeat;background-position:center;background-size:contain;animation:hsFade .8s ease both}
.hs--osvobodite{top:4.2%;right:11.5%;width:20%;aspect-ratio:558/344;background-image:url(/img/lp/stickers/osvobodite.webp);animation-delay:.35s}
.hs--upravlenie{top:44%;left:49%;width:22%;aspect-ratio:531/356;background-image:url(/img/lp/stickers/upravlenie.webp);animation-delay:.6s}
.hs--strokes{top:38%;left:1.5%;width:3.6%;aspect-ratio:62/122;background-image:url(/img/lp/stickers/strokes.webp);animation-delay:.5s}
@keyframes hsFade{from{opacity:0;transform:translateY(6px) rotate(-1deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-stickers .hs{animation:none}}
/* Прячем на планшете/мобилке — доработаем отдельно */
@media(max-width:960px){.hero-stickers{display:none}}