/* botdev · landing-v2 · hero (варианты A и B) + чат-карточка + импульс */

/* — общая сцена — */
.hero{position:relative;overflow:hidden;background:var(--s0);isolation:isolate}
.hero .dots{z-index:1}
.hero .grain{z-index:3}
.hero-glow{position:absolute;z-index:1;pointer-events:none;inset:0;background:radial-gradient(720px 520px at 100% 0%,var(--accent-glow),transparent 62%)}

/* — кей-арт: картинка задаётся высотой и центрируется, чтобы SVG-оверлей жил в тех же координатах (viewBox 0 0 2560 1082) — */
.art{position:absolute;inset:0;z-index:0;overflow:hidden}
.art img,.art .pulse{position:absolute;top:0;height:100%;width:auto;left:50%;transform:translateX(calc(-50% + var(--art-shift,0px)))}
.art img{max-width:none;min-width:100%;object-fit:cover}
/* max-width:none обязателен: общий сброс img,svg{max-width:100%} зажимал SVG по ширине экрана, и оверлей не совпадал с картинкой */
.art .pulse{aspect-ratio:2560/1082;max-width:none;min-width:100%;overflow:visible;pointer-events:none;z-index:2}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.55) 0%,rgba(10,12,16,0) 30%,rgba(10,12,16,0) 70%,var(--s0) 100%)}
/* тихая зона под текст: горизонтальный скрим слева (над img, под импульсом) — объект остаётся справа и в центре */
.art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,12,16,.94) 0%,rgba(10,12,16,.88) 20%,rgba(10,12,16,.62) 40%,rgba(10,12,16,.18) 56%,rgba(10,12,16,0) 68%)}

/* — «дыхание» сцены: медленный дрейф кей-арта (img, видео и SVG-оверлей двигаются одинаково, путь импульса не съезжает)
     и пульс света у куба. Только transform/opacity; под reduce отключено глобальным правилом. — */
@media(prefers-reduced-motion:no-preference) and (min-width:721px){
  .hero--a .art img,.hero--a .art .art-video,.hero--a .art .pulse{animation:art-drift 36s ease-in-out infinite alternate;will-change:transform}
}
@keyframes art-drift{from{transform:translateX(calc(-50% + var(--art-shift,0px))) scale(1)}to{transform:translateX(calc(-50% + var(--art-shift,0px) - 1.4%)) scale(1.05)}}
.pulse .glow{opacity:.35;mix-blend-mode:screen;animation:cube-glow 5.2s ease-in-out infinite alternate}
@keyframes cube-glow{from{opacity:.22}to{opacity:.7}}
html.hidden .hero--a .art img,html.hidden .hero--a .art .art-video,html.hidden .hero--a .art .pulse,html.hidden .pulse .glow{animation-play-state:paused}
/* фоновое видео (когда появится): лежит поверх картинки в тех же координатах, проявляется после старта воспроизведения */
.art .art-video{position:absolute;top:0;height:100%;width:auto;max-width:none;min-width:100%;left:50%;transform:translateX(calc(-50% + var(--art-shift,0px)));object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.art.has-video .art-video{opacity:1}
@media(max-width:720px){.art .art-video{display:none}}

/* — импульс по ребру: одна motion-сигнатура — */
.pulse path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;stroke-dasharray:4 7;vector-effect:non-scaling-stroke}
.pulse .halo{fill:var(--accent);opacity:.28}
.pulse #edge2{stroke:none}
.pulse .halo,.pulse .dot{visibility:hidden} /* в покое бегунки спрятаны: видны только пока идёт импульс (.live ставит main.js) */
.pulse.live .halo,.pulse.live .dot{visibility:visible}
.pulse .dot{fill:var(--accent-2)}

/* — контент — */
.hero-inner{position:relative;z-index:4}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-copy h1{max-width:12ch}
.hero-copy .lead{margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.passport{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px 22px}
.passport>span::before{content:"›";color:var(--accent-ink);margin-right:8px}

/* — чат-карточка: реальный поток бота (submit_lead → карточка менеджеру) — */
.chat{width:min(400px,100%);border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;font-size:var(--fs-sm)}
.chat-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chat-top .av{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:var(--ink-on-accent);font:800 .85rem var(--f-mono)}
.chat-top b{display:block;font:600 .95rem var(--f-body)}
.chat-top i{font:400 var(--fs-xs) var(--f-mono);color:var(--accent-2);font-style:normal}
.chat-top i::before{content:"●";font-size:.6em;margin-right:6px;vertical-align:middle}
.chat-body{display:flex;flex-direction:column;gap:10px;padding:16px;height:412px;overflow:hidden}
.chat-body>:first-child{margin-top:auto} /* сообщения растут снизу, как в мессенджере; высота карточки постоянна */
@media(max-width:560px){.chat-body{height:372px}}
.msg{max-width:88%;padding:10px 13px;border-radius:var(--r-bubble);line-height:1.45}
.msg.user{align-self:flex-end;background:var(--s4);color:var(--text)}
.msg.bot{align-self:flex-start;background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:var(--ink-on-accent)}
.tool{font:400 var(--fs-xs)/1.5 var(--f-mono);color:var(--text-45);padding:8px 12px;border-left:2px solid var(--accent);background:var(--s1);border-radius:0 8px 8px 0}
.tool b{color:var(--text-70);font-weight:400}
.tool.done::before{content:"✓ ";color:var(--accent-2)}
.lead-card{padding:12px 14px;border-radius:10px;background:var(--s3);border:1px solid var(--line-2)}
.lead-card .lc-src{font:400 var(--fs-xs) var(--f-mono);color:var(--text-45);margin:0 0 6px}
.lead-card .lc-h{font:600 .9rem var(--f-body);margin:0 0 6px}
.lead-card p{margin:0 0 4px;font-size:.82rem;color:var(--text-70)}
.lead-card b{color:var(--text);font-weight:600}
.lc-btns{display:flex;gap:8px;margin-top:10px}
.mock-btn{padding:7px 12px;border-radius:8px;border:1px solid var(--accent-line);font:600 .78rem var(--f-body);color:var(--text)}
.mock-btn.ghost{border-color:var(--line-2);color:var(--text-70)}
.chat-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font:400 var(--fs-sm) var(--f-mono);color:var(--text-45)}
.chat-in .caret{width:2px;height:16px;background:var(--accent-2);animation:blink 1s steps(1) infinite}
.chat-in .send{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:var(--ink-on-accent)}
@keyframes blink{50%{opacity:0}} /* 2026-10-01: мигание через opacity, а не visibility — такая анимация идёт на композиторе. Прежняя (visibility) будила главный поток на каждом кадре монитора: 165 пересчётов стилей в секунду ради одной каретки */
/* подпись под чатом: слева текст со ссылкой, справа «ещё раз»; ссылка не рвётся посередине, кнопка не прыгает между строками */
.chat-note{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:12px;font:400 var(--fs-xs)/1.75 var(--f-mono);color:var(--text-45)}
.chat-note p{margin:0;min-width:0}
.chat-note a{color:var(--accent-2);border-bottom:1px solid var(--accent-line);padding-bottom:1px;white-space:nowrap}

/* ===== ВАРИАНТ A: кей-арт во всю ширину, чат садится на пузыри ===== */
.hero--a{min-height:calc(100svh - 68px)}
.hero--a .art{--art-shift:6vw}
.hero--a .hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;min-height:calc(100svh - 68px);padding:56px 0 48px}
.hero--a .hero-copy{align-self:start;max-width:560px}
.hero--a .hero-side{align-self:end;justify-self:start;display:flex;flex-direction:column;gap:8px;margin-top:40px}
.hero--a .passport{grid-column:1/-1;align-self:end;margin-top:0}
@media(max-width:920px){
  .hero--a .hero-inner{grid-template-columns:1fr;padding-top:36px}
  .hero--a .art{--art-shift:0px}
  .hero--a .hero-side{margin-top:24px}
}
@media(max-width:720px){
  .hero--a .art img{position:absolute;inset:0;height:100%;width:100%;max-width:100%;object-fit:cover;object-position:50% 100%;left:0;transform:none}
  .hero--a .art .pulse{display:none}
  .hero--a .art::before{display:none}
  .hero--a .art::after{background:linear-gradient(180deg,rgba(10,12,16,.94) 0%,rgba(10,12,16,.86) 30%,rgba(10,12,16,.6) 52%,rgba(10,12,16,.28) 74%,var(--s0) 100%)}
  .hero--a .hero-copy h1{max-width:none}
}

/* ===== ВАРИАНТ B: сплит, объект в рамке, чат на стыке ===== */
.hero--b .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;padding:56px 0 72px;min-height:calc(100svh - 68px)}
.hero--b .art{position:relative;inset:auto;aspect-ratio:4/3;border-radius:var(--r-panel);border:1px solid var(--line);overflow:visible}
.hero--b .art .frame{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.hero--b .art .frame img,.hero--b .art .frame .pulse{--art-shift:-14%}
.hero--b .art::after{border-radius:inherit;background:linear-gradient(180deg,rgba(10,12,16,.25),transparent 35%,transparent 75%,rgba(10,12,16,.55))}
.hero--b .chat{position:absolute;left:-12%;bottom:-40px;z-index:5;width:min(380px,92%)}
@media(max-width:920px){
  .hero--b .hero-inner{grid-template-columns:1fr;padding-top:36px}
  .hero--b .art{aspect-ratio:1/1;margin-top:8px}
  .hero--b .chat{position:static;width:100%;margin-top:16px}
}

/* ===== сцена: typing, tool-спиннер, mask по верху, бейджи, replay ===== */
#navSentinel{position:absolute;top:0;height:1px;width:1px}
.typing{display:flex;gap:5px;align-self:flex-start;padding:12px 14px;border-radius:var(--r-bubble);background:var(--s4)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-45);animation:tdot 1s infinite var(--ease)}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.tool{position:relative;padding-left:30px}
.tool::before{content:"";position:absolute;left:10px;top:12px;width:11px;height:11px;border-radius:50%;border:2px solid var(--accent-line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.tool.done::before{animation:none;border:0;width:auto;height:auto;top:8px;content:"✓";color:var(--accent-2);font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}
.chat-body{transition:opacity var(--t-base)}
.chat-body.fade{opacity:0} /* мягкий перезапуск сцены (main.js → replay): переписка гаснет за --t-base, потом идёт заново */
.chat-body.cut{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px);mask-image:linear-gradient(180deg,transparent 0,#000 64px)}
.msg .tick{display:inline-block;width:14px;height:10px;margin-left:6px;vertical-align:-1px;color:var(--text-45)}
.msg .tick svg{width:14px;height:10px}
.chat-wrap{position:relative}
.badge{position:absolute;z-index:6;font:400 var(--fs-xs) var(--f-mono);letter-spacing:.02em;padding:8px 12px;border:1px solid var(--accent-line);background:var(--s2);border-radius:10px;color:var(--text);opacity:0;transform:translateY(8px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.badge.in{opacity:1;transform:none}
.badge-tr{top:-30px;right:-12px}
.badge-bl{top:calc(100% + 8px);left:-14px} /* целиком под чатом, зеркально верхнему: не закрывает строку ввода; место под него держит margin подписи (--note-gap) */
.chat-replay{flex:none;white-space:nowrap;padding:8px 10px;min-height:32px;border-radius:8px;font:400 var(--fs-xs) var(--f-mono);color:var(--text-70);border:1px solid var(--line-2)}
.chat-replay[aria-busy="true"]{opacity:.5;pointer-events:none}
@media(hover:hover){.chat-replay:hover{border-color:var(--accent-line);color:var(--text)}}
@media(max-width:560px){.chat-wrap{display:flex;flex-direction:column}.badge{position:static;display:inline-block;align-self:flex-start;margin:10px 8px 0 0;transform:none}.badge-tr{order:2}.badge-bl{order:3}}

/* ===== reveal (общая система секций) ===== */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.js [data-reveal].now{transition:none} /* блок уже выше вьюпорта (прыжок по якорю) — показываем сразу */
.js [data-reveal].in{opacity:1;transform:none}
@media(max-width:560px){.js [data-reveal]{--i:0}}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* сверхширокие экраны (21:9 и шире): картинка растягивается по ширине hero, сдвиг вправо оставил бы пустую полосу слева.
   Стоит в конце файла, чтобы перекрыть --art-shift:6vw варианта A. */
@media(min-aspect-ratio:22/10){.hero--a .art{--art-shift:0px}}

/* ===== ВАРИАНТ L (светлая тема): слева текст на чистой бумаге, справа сцена с видео Kling и тёмный чат, пристыкованный к её нижней кромке =====
   Текст никогда не лежит на картинке. В сцене видна вся история: пузырь чата → волокно → куб-агент → решётка систем;
   object-position поднимает объекты над зоной, которую перекрывает чат. */
.hero--l{background:transparent}
.hero--l .hero-glow{background:radial-gradient(900px 620px at 100% 0%,rgba(255,106,69,.13),transparent 62%)}
.hero--l .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:clamp(36px,5.5vw,88px);align-items:center;min-height:calc(100svh - 68px);padding:clamp(32px,4vw,56px) 0 clamp(48px,5vw,72px)}
.hero--l .hero-copy{max-width:600px;align-self:center}
.hero--l .hero-copy h1{max-width:none}
@media(min-width:921px){.hero--l .hero-copy h1{font-size:clamp(2.2rem,4.25vw,3.9rem)}} /* две колонки: заголовок держится в трёх строках */
.hero--l .passport{margin-top:38px;max-width:470px}
.hero-stage{position:relative;min-width:0}
.hero--l .art{position:relative;inset:auto;z-index:0;aspect-ratio:16/10;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--s1)}
.hero--l .art::before,.hero--l .art::after{content:none}
.hero--l .art img,.hero--l .art .art-video{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;min-width:0;max-width:none;object-fit:cover;object-position:50% 60%;transform:none;animation:none}
.hero--l .hero-side{position:relative;z-index:2;display:block;width:min(420px,100% - 16px);margin:-76px 0 0 -24px}
.hero--l .chat{width:100%;box-shadow:0 34px 80px -30px rgba(20,22,27,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.hero--l .chat-body{height:292px}
.hero--l .badge{box-shadow:0 10px 30px -16px rgba(20,22,27,.35)}
@media(max-width:920px){
  .hero--l .hero-inner{grid-template-columns:1fr;min-height:0;padding:32px 0 64px;gap:28px}
  .hero--l .art{aspect-ratio:4/3;border-radius:22px}
  .hero--l .art img,.hero--l .art .art-video{object-position:50% 62%}
  .hero--l .hero-side{width:min(420px,100% - 24px);margin:-72px auto 0}
  .hero--l .chat-body{height:324px}
}
@media(max-width:560px){.hero--l .chat-body{height:348px}.hero--l .hero-side{width:calc(100% - 16px)}}

/* ===== СВЕТОВАЯ ИСТОРИЯ сцены: кадр Kling + SVG в его координатах. Состояния ставит main.js синхронно с репликами чата:
   .s-fiber (сообщение ушло) → .s-cube (агент думает: куб наполняется снизу вверх) → .s-rod → .s-lat (заявка дошла до систем). ===== */
.hero--l>.dots,.hero--l .hero-glow{display:none} /* сетка и свет теперь общие — в .backdrop */
.hero--l .art{background:#D9CDBA}
/* top привязан не к сцене, а к верхнему бейджу чата (он стоит на 96px выше нижней кромки сцены): куб, стержень и решётка
   на любой ширине двух колонок остаются над бейджем. Раньше было -36% — верно только для ~1280, на ~1000 бейдж закрывал куб. */
.hero--l .plate{position:absolute;left:0;top:calc(-10% - 96px);width:100%;aspect-ratio:1/1;transform-origin:50% 60%}
@media(prefers-reduced-motion:no-preference){.hero--l .plate{animation:plate-drift 38s ease-in-out infinite alternate}}
@keyframes plate-drift{to{transform:scale(1.045) translate(-.6%,.4%)}}
html.hidden .hero--l .plate{animation-play-state:paused}
.hero--l .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero--l .plate .pulse{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;min-width:0;max-width:none;aspect-ratio:auto;transform:none;animation:none;overflow:visible;z-index:2}
.hero--l .pulse path{fill:none;stroke:none;stroke-dasharray:none;vector-effect:none} /* сброс стилей старого оверлея; специфичность ниже правил ниже */
.hero--l .pulse .cube-fill{fill:#FF6A45;stroke:none} /* CSS-заливка обязательна: fill:none из сброса перебивает атрибут fill в разметке */
/* свет в волокне и стержнях: широкое мягкое свечение + тонкая яркая сердцевина; «проявляется» вслед за бегунком */
.hero--l .pulse .lit,.hero--l .pulse .lit2,.hero--l .pulse .lat-edge{stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.hero--l .pulse .fiber-glow,.hero--l .pulse .rod-glow{stroke:#FF6A45;stroke-width:16;mix-blend-mode:multiply}
.hero--l .pulse .fiber-lit,.hero--l .pulse .rod-lit{stroke:#FF7B52;stroke-width:3.5}
.hero--l .pulse .lit{transition:stroke-dashoffset 1.6s cubic-bezier(.3,.1,.2,1),opacity .4s}
.hero--l .pulse .lit2{transition:stroke-dashoffset .9s cubic-bezier(.3,.1,.2,1),opacity .3s}
.hero--l .pulse .lat-edge{stroke:#FF6A45;stroke-width:3;mix-blend-mode:multiply;transition:stroke-dashoffset .7s var(--ease),opacity .4s;transition-delay:calc(var(--k)*110ms)}
.hero--l .pulse.s-fiber .lit,.hero--l .pulse.s-rod .lit2{stroke-dashoffset:0;opacity:.85}
.hero--l .pulse.s-fiber .fiber-glow,.hero--l .pulse.s-rod .rod-glow{opacity:.5}
.hero--l .pulse.s-lat .lat-edge{stroke-dashoffset:0;opacity:.62}
/* куб наполняется снизу вверх: clip-path на обёртке (fill-box), плюс внутреннее ядро света */
.hero--l .pulse .cube-wrap{clip-path:inset(100% -12% -6% -12%);transition:clip-path 1.6s cubic-bezier(.3,.6,.2,1)}
.hero--l .pulse.s-cube .cube-wrap{clip-path:inset(-8% -12% -6% -12%)}
.hero--l .pulse .cube-fill{opacity:.8;mix-blend-mode:multiply}
.hero--l .pulse .cube-core{fill:#FFD2B8;opacity:0;mix-blend-mode:screen;transition:opacity 1.2s var(--ease) .5s}
.hero--l .pulse.s-cube .cube-core{opacity:.75}
.hero--l .pulse .cube-floor{fill:#FF6A45;opacity:0;mix-blend-mode:multiply;transition:opacity 1.4s var(--ease) .3s}
.hero--l .pulse.s-cube .cube-floor{opacity:.38}
.hero--l .pulse .lat-node{fill:#FF6A45;opacity:0;mix-blend-mode:multiply;transition:opacity .6s var(--ease);transition-delay:calc(var(--k)*110ms + 80ms)}
.hero--l .pulse.s-lat .lat-node{opacity:.8}
.hero--l .pulse .halo{fill:#FF6A45;opacity:.7}
.hero--l .pulse .dot{fill:#FFF1E8;stroke:#F0522B;stroke-width:3}
/* гаснет всё медленнее, чем зажигается: «выдох» перед новым циклом */
.hero--l .pulse:not(.s-fiber) .lit,.hero--l .pulse:not(.s-rod) .lit2,.hero--l .pulse:not(.s-lat) .lat-edge{transition:opacity 1.2s,stroke-dashoffset 0s 1.2s;transition-delay:0s}
.hero--l .pulse:not(.s-cube) .cube-wrap{transition:clip-path 1.4s ease-in}
.hero--l .pulse:not(.s-lat) .lat-node{transition-delay:0s;transition-duration:1.2s}
@media(max-width:920px){.hero--l .plate{top:-20.7%}}

/* чат меньше: сцена остаётся главной, чат — доказательство, а не заслон */
.hero--l .hero-side{width:min(348px,100% - 16px);margin:-58px 0 0 -18px}
.hero--l .chat{font-size:.8125rem}
.hero--l .chat-top{padding:11px 14px;gap:10px}
.hero--l .chat-top .av{width:32px;height:32px;border-radius:9px;font-size:.78rem}
.hero--l .chat-top b{font-size:.88rem}
.hero--l .chat-body{height:238px;padding:13px;gap:8px}
.hero--l .msg{padding:8px 11px;line-height:1.4}
.hero--l .lead-card{padding:10px 12px}
.hero--l .lead-card p{font-size:.78rem}
.hero--l .chat-in{padding:10px 14px;font-size:.8rem}
.hero--l .chat-in .send{width:32px;height:32px}
/* --note-gap = зазор 8 + бейдж 35 + воздух 13: подпись стоит под нижним бейджем и не сталкивается с ним ни на одной ширине */
.hero--l .chat-note{--note-gap:56px;margin:var(--note-gap) 0 0} /* подпись всегда в ширину чата: текст по левому краю чата (= текст бейджа), кнопка по правому */
@media(max-width:920px){.hero--l .hero-side{width:min(372px,100% - 24px);margin:-60px auto 0}.hero--l .chat-body{height:270px}}
@media(max-width:560px){.hero--l .hero-side{width:calc(100% - 20px)}.hero--l .chat-body{height:288px}.hero--l .chat-note{--note-gap:14px}} /* на телефоне бейджи стоят в потоке под чатом и сами держат место */
/* бегунки видны только на своём отрезке */
.hero--l .pulse .halo,.hero--l .pulse .dot{visibility:hidden}
.hero--l .pulse.live.leg1 .halo:not(.leg2),.hero--l .pulse.live.leg1 .dot:not(.leg2),.hero--l .pulse.live.leg2 .leg2{visibility:visible}
.hero--l .badge-tr{top:-38px} /* чат стал ниже и уже: бейдж держим над шапкой с запасом */

/* ===== серия «Нейросвет» (2026-09-21): сцена hero — постер + видео-луп 16:9 в рамке 16:10 (на ≤920 — 4:3).
   Мозг из нитей стоит справа вверху; пучок нитей приходит из левого нижнего угла — ровно из-под чата, будто огоньки бегут из диалога.
   object-position держит мозг целиком в кадре при любой обрезке по ширине. ===== */
.hero--l .art--neuro{background:#E6E2DC}
.hero--l .art--neuro .art-poster,.hero--l .art--neuro .art-video{position:absolute;inset:0;width:100%;height:100%;min-width:0;max-width:none;object-fit:cover;object-position:72% 50%;transform:none;animation:none}
@media(max-width:920px){.hero--l .art--neuro .art-poster,.hero--l .art--neuro .art-video{object-position:84% 50%}}

/* ===== hero L · раскладка 2026-09-22 (ревью design/review-hero-2026-09-22.md, вариант 1 «Витрина до края»):
   сцена 4:3 выходит за контейнер до правого края окна, мозг +35 %; чат — вертикальный «телефон» 264×422 у правого нижнего угла сцены,
   заходит на неё на 84 px — только на тень под мозгом, пучок и мозг не закрыты; текст выровнен по верху сцены.
   Фон чата — графит вместо чёрного (все пары ≥ 5,25:1); коралл внутри чата — только пузырь бота. ===== */
@media(min-width:921px){
  .hero--l .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:start;min-height:0;padding:clamp(24px,3.5vw,44px) 0 clamp(40px,4vw,56px)}
  .hero--l .hero-copy{align-self:start;padding-top:clamp(4px,1.6vw,24px)}
  .hero--l .hero-stage{margin-right:calc(-1*max(var(--gutter),(100vw - var(--container))/2))}
  /* width:100% обязателен: с aspect-ratio + max-height Chrome иначе сжимает ширину и выход за край ломается на ≥1400 */
  .hero--l .art{width:100%;aspect-ratio:4/3;max-height:460px;border-radius:24px 0 0 24px;border-right:0}
  .hero--l .art--neuro .art-poster,.hero--l .art--neuro .art-video{object-position:82% 50%}
  .hero--l .hero-side{display:grid;grid-template-columns:minmax(0,1fr) 264px;width:auto;margin:-84px 0 0;padding:0 clamp(24px,2.6vw,40px) 0 0}
  .hero--l .chat-wrap{grid-column:2}
  .hero--l .chat{width:100%;font-size:.8125rem;box-shadow:0 20px 40px -20px rgba(20,22,27,.4),inset 0 1px 0 rgba(255,255,255,.06)}
  .hero--l .chat-body{height:304px}
  .hero--l .badge{white-space:nowrap}
  .hero--l .badge-tr{top:-46px;right:-8px;left:auto}
  .hero--l .badge-bl{top:calc(100% + 10px);left:auto;right:-10px}
  .hero--l .chat-note{grid-column:1/-1;justify-self:end;width:min(100%,420px);margin:60px 0 0}
}
@media(min-width:921px) and (max-width:960px){.hero--l .hero-cta .btn{padding-inline:18px}} /* колонка 404–418 px: кнопки в одну строку */
@media(max-width:920px){
  .hero--l .art{width:100%;aspect-ratio:4/3;max-height:520px}
  .hero--l .art--neuro .art-poster,.hero--l .art--neuro .art-video{object-position:84% 50%}
  .hero--l .hero-side{width:min(320px,100% - 20px);margin:-44px 10px 0 auto} /* телефон у правого края сцены, заход 44 px */
  .hero--l .chat-body{height:300px}
}
@media(max-width:560px){
  .hero--l .hero-side{width:calc(100% - 28px);margin:-40px 12px 0 auto}
  .hero--l .chat-body{height:300px}
}
/* графит только для hero-чата; остальные приборы не трогаем. .lead-card в селекторе намеренно: иначе tokens.css вернёт карточке заявки старые тона */
.hero--l .chat,.hero--l .chat .lead-card{--s0:#15181E;--s1:#1A1D23;--s2:#1E2127;--s3:#262A32;--s4:#2C3038;--line:#2A2E36;--line-2:#373C46}
.hero--l .chat{border-color:#CBC3B5;background:var(--s2)}
.hero--l .chat-top .av,.hero--l .chat-in .send{background:var(--s4);color:var(--accent)}

/* ===== 2026-09-30 · картинки без рамок: края сцены растворяются в живой подложке (владелец: «чтобы уходили в паутину и из неё приподнимались») =====
   Маска вместо рамки и скругления. ≥921: левый край и низ растушёваны широко (пучок нитей уходит в сеть), верх — коротко (над макушкой мозга в кадре всего ~5 %),
   правый край — край окна. ≤920: растушёваны все четыре стороны. object-position по вертикали держит макушку на очень широких экранах. */
.hero--l .art--neuro{border:0;border-radius:0;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 7%,#000 76%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 7%,#000 76%,transparent 100%);mask-composite:intersect}
@media(min-width:921px){.hero--l .art--neuro .art-poster,.hero--l .art--neuro .art-video{object-position:82% 8%}}
@media(max-width:920px){.hero--l .art--neuro{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 78%,transparent 100%)}}

/* ===== 2026-10-01 · правки предрелизного ревью (design/review-predeploy-2026-10-01.md, проверены инъекцией на 1000/1280/1440/375) ===== */
@media(min-width:921px){
  /* растушёвка сцены — эллипсом вокруг мозга: прямоугольная читалась серым прямоугольником */
  .hero--l .art--neuro{
    -webkit-mask-image:radial-gradient(ellipse 66% 62% at 66% 38%,#000 54%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%);
    -webkit-mask-composite:source-in;
    mask-image:radial-gradient(ellipse 66% 62% at 66% 38%,#000 54%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%);
    mask-composite:intersect}
  /* чат по правому краю контейнера (= правый край кнопки в шапке), бейджи без вылета, подпись в колонке чата */
  .hero--l .hero-side{padding-right:max(var(--gutter),(100vw - var(--container))/2)}
  .hero--l .badge-tr,.hero--l .badge-bl{right:0}
  .hero--l .chat-note{grid-column:2;justify-self:stretch;width:auto;flex-direction:column;align-items:flex-start;gap:10px}
}