/* Вариант главной (/v4/, только стенд): первый экран — окно чата с ассистентом CRT, ниже обычная главная.
   Токены и шрифты — из v2.css, этот файл подключается только на /v4/. */

.chat{position:relative;z-index:1;display:flex;min-height:100vh;min-height:100svh;padding-top:calc(64px + env(safe-area-inset-top))}
/* снизу на телефоне место под плашку меню, чтобы пустой экран центровался по видимой части */
.chat__inner{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:820px;margin:0 auto;padding:12px max(var(--gut),env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left))}

/* пустой разговор: сфера-ассистент, вопрос, строка ввода по центру — как стартовый экран ChatGPT */
.chat__intro{text-align:center}
.chat__orb{width:116px;height:116px;margin:0 auto 18px}
/* кто мы — строкой-ссылкой на «О компании» над вопросом */
.chat__about{display:inline-flex;align-items:baseline;gap:6px;margin:0 0 14px;font-size:15px;line-height:1.35;color:var(--mist);text-decoration:none;transition:color .2s}
.chat__about b{font-weight:600;color:var(--phos)}
.chat__about span{color:var(--phos);transition:transform .2s}
.chat__about:hover{color:var(--white)}
.chat__about:hover span{transform:translateX(3px)}
/* заголовок в одну строку: текст ≈15 em, размер считаем от ширины колонки (не шире 820px) */
.chat__title{margin:0;color:var(--white);font-weight:400;max-width:none;font-size:clamp(20px,calc((min(100vw,820px) - 2 * var(--gut)) / 15.5),46px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.chat__dock{position:relative;z-index:2;margin-top:30px}

.chat__form{position:relative;display:flex;align-items:flex-end;gap:10px;padding:8px 8px 8px 22px;border-radius:28px;background:rgba(29,26,61,.9);border:1px solid var(--line2);box-shadow:0 24px 70px -30px rgba(61,18,252,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .25s,box-shadow .25s}
.chat__form:focus-within{border-color:rgba(217,210,255,.45);box-shadow:0 24px 80px -26px rgba(106,77,255,.95)}
.chat__form textarea{flex:1;min-width:0;height:44px;max-height:168px;margin:0;padding:11px 0;border:0;outline:0;resize:none;background:transparent;color:var(--white);font:400 17px/22px var(--sans);overflow-y:auto}
.chat__form textarea::placeholder{color:var(--dim);opacity:1}
.chat__send{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--white);color:var(--on-glow);cursor:pointer;transition:opacity .2s,transform .2s}
.chat__send:active{transform:scale(.94)}
.chat__send:disabled{opacity:.25;cursor:default}
.chat__send svg{width:20px;height:20px}
/* голос: пока строка пустая — микрофон, появился текст — стрелка отправки (как в мессенджерах) */
.chat__mic{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--white);color:var(--on-glow);cursor:pointer;transition:transform .2s,background .2s}
.chat__mic[hidden]{display:none}
.chat__mic:active{transform:scale(.94)}
.chat__mic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat__mic .i-stop{display:none;fill:currentColor;stroke:none}
.chat__mic.is-on{background:var(--violet);color:#fff}
.chat__mic.is-on .i-mic{display:none}
.chat__mic.is-on .i-stop{display:block}
.chat__mic.is-on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--violet);animation:ring 1.3s ease-out infinite}
@keyframes ring{from{transform:scale(.88);opacity:.9}to{transform:scale(1.4);opacity:0}}
.chat__form.has-voice:not(.has-text) .chat__send,.chat__form.has-voice.has-text .chat__mic{display:none}
.chat__form.is-listening{border-color:var(--violet)}
/* распознаём: кнопка неактивна, подсказка «Распознаю…» переливается */
.chat__form.is-busy .chat__mic{opacity:.35;pointer-events:none}
.chat__form.is-busy textarea::placeholder{color:var(--violet)}
/* пока идёт запись, кнопка остаётся «стоп», даже когда в строке уже появился распознанный текст */
.chat__form.has-voice.is-listening .chat__mic{display:grid}
.chat__form.has-voice.is-listening .chat__send{display:none}

/* направления под строкой ввода — как подсказки под полем ChatGPT, со значками */
.chat__dirs{margin-top:18px;text-align:center}
.chat__dirs>p{margin:0 0 10px;font-size:13px;color:var(--dim)}
.chat__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip--dir{display:inline-flex;align-items:center;gap:8px;padding:0 15px 0 12px;background:rgba(22,20,47,.72);border-color:var(--line2);color:var(--white)}
.chip--dir svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--phos);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chip--dir:hover svg{stroke:var(--white)}
/* на телефоне боли — два ряда с прокруткой вбок: сразу видно четыре, остальные — свайпом */
@media (max-width:599px){
  .chat__chips{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 32px),transparent)}
  .chat__chips::-webkit-scrollbar{display:none}
  .chip--dir{flex:none}
}

.chat__note{margin-top:18px;text-align:center;font-size:12px;line-height:1.4;color:var(--dim)}

/* разговор: строка ввода прилипает к низу окна, как в ChatGPT */
.chat__thread{display:none}
.chat.is-thread .chat__intro,.chat.is-thread .chat__dirs{display:none}
/* «Новый чат» — над строкой ввода, только в разговоре */
.chat__new{display:none;align-items:center;gap:6px;height:34px;margin:0 0 10px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:var(--abyss);color:var(--mist);font:500 13.5px/1 var(--sans);cursor:pointer;transition:border-color .2s,color .2s}
.chat__new span{font-size:17px;line-height:1;color:var(--phos)}
.chat__new:hover{border-color:var(--phos);color:var(--white)}
.chat.is-thread .chat__new{display:inline-flex}
.chat.is-thread .chat__inner{justify-content:flex-start;padding-top:0;padding-bottom:0}
.chat.is-thread .chat__thread{display:block;flex:1}
.chat.is-thread .chat__dock{position:sticky;bottom:0;margin-top:0;padding:18px 0 calc(12px + env(safe-area-inset-bottom))}
/* подложка под строкой ввода — на всю ширину экрана, текст разговора уходит под неё */
.chat.is-thread .chat__dock::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:linear-gradient(rgba(12,11,29,0),var(--abyss) 22px);pointer-events:none}
.chat.is-thread .chat__note{margin-top:10px}

.turn{padding-top:26px}
/* последний вопрос можно прокрутить к верху окна, а следующий блок страницы не выглядывает из-под строки ввода */
.turn:last-child{min-height:calc(100vh - 64px - 104px);min-height:calc(100svh - 64px - 104px - env(safe-area-inset-bottom))}
.msg--user{display:flex;justify-content:flex-end}
.msg--user p{max-width:min(82%,560px);padding:12px 18px;border-radius:22px 22px 6px 22px;background:var(--kelp2);border:1px solid var(--line);color:var(--white);font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg--bot{display:flex;align-items:flex-start;gap:14px;margin-top:24px}
.msg__ava{flex:none;width:30px;height:30px;margin-top:-1px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff 0,#d9d2ff 16%,#8f7bff 44%,#3d12fc 76%,#1d1a3d 100%);box-shadow:0 0 22px -2px rgba(143,123,255,.75)}
/* аватар — знак CRT; пока ассистент «думает», точки знака бегут волной по кругу, середина дышит */
.msg__ava--mark{display:grid;place-items:center;width:34px;height:30px;margin-top:-2px;border-radius:0;background:none;box-shadow:none;color:var(--phos)}
.msg__ava--mark svg{width:34px;height:30px;fill:currentColor;overflow:visible}
.msg__ava--mark path{transform-box:fill-box;transform-origin:center}
.msg--bot[aria-busy="true"] .msg__ava--mark .o{animation:dotwave 1.2s linear infinite;animation-delay:var(--dl)}
.msg--bot[aria-busy="true"] .msg__ava--mark .c{animation:corepulse 1.2s ease-in-out infinite}
@keyframes dotwave{0%{opacity:1;transform:scale(1.2)}45%,100%{opacity:.22;transform:scale(.78)}}
@keyframes corepulse{50%{opacity:.55;transform:scale(.9)}}
.msg--bot[aria-busy="true"] .msg__ava:not(.msg__ava--mark){animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.86);box-shadow:0 0 30px 2px rgba(143,123,255,.9)}}
.msg__body{flex:1;min-width:0}
.msg__text{color:var(--mist);font-size:16.5px;line-height:1.62;overflow-wrap:anywhere}
.msg__text b{font-weight:600;color:var(--white)}
.msg__text p+p,.msg__text p+ul,.msg__text ul+p{margin-top:12px}
.msg__text ul{margin:12px 0 0;padding:0 0 0 20px}
.msg__text li+li{margin-top:6px}
.msg__text li::marker{color:var(--violet)}
.think{display:inline-block;color:transparent;background:linear-gradient(90deg,var(--dim) 25%,var(--white) 50%,var(--dim) 75%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* главная с чатом: блоки ниже первого экрана (09.10, Фёдор: компактнее, со значками) */
/* сцена со знаком: текст слева (на телефоне — внизу), знак из частиц справа (наверху) — его рисует v2.js */
.motion .why--intro{height:210vh}
.why--intro .why__text{max-width:620px}
.motion .why--intro .why__grid{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
@media (min-width:900px){.motion .why--intro .why__grid{padding-bottom:0}.why--intro .why__text{max-width:600px}}
.pcard__h{color:inherit;text-decoration:none;transition:color .2s}
.pcard__h span{display:inline-block;color:var(--phos);transition:transform .2s}
.pcard__h:hover{color:var(--phos)}
.pcard__h:hover span{transform:translateX(4px)}
.why--intro h1{max-width:12em;font-size:clamp(36px,5vw,76px)}
.why--intro~.section{padding:64px 0}
.why--intro~.section h2{font-size:clamp(30px,3.6vw,52px)}
.why--intro~.section .sec-head{margin-bottom:32px}
.why--intro h1 span{color:var(--phos)}
.pgrid{display:grid;gap:14px}
.pcard{display:flex;flex-direction:column;padding:24px 22px 20px;border-radius:var(--r);background:var(--kelp);border:1px solid var(--line)}
.pcard__top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pcard__ic,.mtile__ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:rgba(143,123,255,.14);color:var(--phos)}
.pcard__ic svg,.mtile__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pcard h3{margin-bottom:8px}
.pcard>p{margin-bottom:16px;font-size:15.5px;line-height:1.5}
.pcard__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:auto 0 18px}
.pcard__links a{padding-bottom:2px;border-bottom:1px solid var(--line2);color:var(--white);font-size:14.5px;font-weight:600;text-decoration:none;transition:color .2s,border-color .2s}
.pcard__links a:hover{color:var(--phos);border-color:var(--phos)}
.mtiles{display:grid;gap:12px}
.mtile{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:var(--r);background:var(--kelp);border:1px solid var(--line);color:var(--white);text-decoration:none;transition:border-color .2s,transform .2s}
.mtile:hover{border-color:var(--line2);transform:translateY(-2px)}
.mtile__t{display:block;font-size:17px;font-weight:600;line-height:1.3}
.mtile__d{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--silver)}
.eng{display:grid;gap:20px;align-items:center;padding:clamp(24px,4vw,48px);border-radius:24px;background:var(--kelp);border:1px solid var(--line)}
.eng h2{max-width:12em}
.eng .btn{margin-top:22px}
.eng__img{justify-self:center;width:100%;max-width:520px;height:auto}
/* 20.10: объединённый блок с маскотом — фигура стоит на нижнем краю карточки */
.eng--mascot{padding-bottom:0;overflow:hidden}
.eng--mascot .eng__text{padding-bottom:clamp(24px,4vw,48px)}
.eng__start{margin:14px 0 0;color:var(--white);font-weight:600}
.eng--mascot .hero__cta{margin-top:24px}.eng--mascot .btn{margin-top:0}
.eng__mascot{justify-self:center;align-self:end;display:block;width:auto;height:clamp(300px,34vw,440px)}
@media (min-width:600px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.why--intro~.section{padding:88px 0}.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.mtiles{grid-template-columns:repeat(3,minmax(0,1fr))}.eng{grid-template-columns:1.05fr 1fr;gap:40px}}

/* направления: у каждой карточки своя иллюстрация и оттенок (12.10) */
.pcard{position:relative;padding-top:26px}
.pcard--ai{background:linear-gradient(165deg,rgba(61,18,252,.13),transparent 58%),var(--kelp)}
.pcard--dev{background:linear-gradient(165deg,rgba(0,132,255,.13),transparent 58%),var(--kelp)}
.pcard--people{background:linear-gradient(165deg,rgba(176,124,255,.17),transparent 58%),var(--kelp)}
.pcard>.card__tag{margin-bottom:8px}
.pcard h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em}

/* отраслевая экспертиза: карточки с объёмной иконкой отрасли (12.10) */
.itiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.itile{display:flex;flex-direction:column;padding:16px 14px 16px;border-radius:var(--r);background:var(--kelp);border:1px solid var(--line);color:var(--white);text-decoration:none;transition:border-color .2s,transform .2s}
.itile:hover{border-color:var(--phos);transform:translateY(-3px)}
.itile__t{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.itile__d{margin-top:4px;color:var(--silver);font-size:13.5px;line-height:1.4}
.itile__n{align-self:flex-start;margin-top:auto;padding-top:10px;color:var(--phos);font-size:13px;font-weight:600}
@media (min-width:600px){.itiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.itile{padding:20px 20px 18px}.itile__d{font-size:14px}}
/* Г2: название отрасли крупно фиолетовым вместо фигуры из частиц */
.itile__t{font-size:clamp(24px,2.2vw,30px);font-weight:500;line-height:1.1;letter-spacing:-.025em;color:var(--phos);overflow-wrap:normal;hyphens:auto}

/* картинки из частиц (assets/pcl.js): без скрипта — картинка, со скриптом — холст с живыми частицами.
   Фигуры выходят за рамку карточки: у направлений — за верхний правый угол, у модулей — на угол, у отраслей — над краем */
.pcard{padding-top:150px}
.pcard__art{position:absolute;top:-48px;right:-22px;width:210px;height:210px;transition:transform .5s var(--ease)}
.pcard:hover .pcard__art{transform:translateY(-6px)}
.pgrid{margin-top:40px}
.itiles{row-gap:14px;margin-top:28px}   /* 20.10: без фигур над плитками (Г2) — обычные отступы */
.itile{padding-top:20px}
.itile__art{width:124px;height:124px;margin:-48px 0 6px -14px;transition:transform .5s var(--ease)}
.itile:hover .itile__art{transform:translateY(-5px)}
@media (max-width:599px){.pcard{padding-top:132px}.pcard__art{width:180px;height:180px;top:-40px;right:-10px}.itile__art{width:104px;height:104px;margin:-40px 0 4px -10px}}

/* эффекты libraries.dev (assets/fx.js, исходник fx/src/fx.jsx) */
.fx-mount{display:block}
.chat{overflow-x:clip}   /* свечение Border beam снаружи строки не должно давать прокрутку вбок на узких экранах */
.fx-hold{border-radius:28px}
html:not(.light) .fx-hold .chat__form{background:#1b1839}   /* Border beam снаружи: фон строки должен быть плотным */
.fx-voice .chat__form>*{position:relative;z-index:5}        /* текст и кнопки — над свечением Voice */

/* карточки целевых страниц под ответом: картинка с самой страницы, листаются вбок */
.msg__cards{display:grid;grid-auto-flow:column;grid-auto-columns:214px;justify-content:start;gap:12px;margin:18px 0 0;padding-bottom:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.msg__cards::-webkit-scrollbar{display:none}
.lcard{scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:var(--kelp);border:1px solid var(--line);color:var(--white);text-decoration:none;transition:border-color .2s,transform .2s}
.lcard:hover{border-color:var(--line2);transform:translateY(-2px)}
.lcard img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--kelp2)}
.lcard__body{display:grid;gap:4px;padding:12px 14px 14px}
.lcard__t{font-size:15px;line-height:1.3;font-weight:600}
.lcard__more{font-size:13.5px;font-weight:600;color:var(--phos)}
.motion .lcard{animation:rise .5s var(--ease) both}
.motion .lcard:nth-child(2){animation-delay:.06s}
.motion .lcard:nth-child(3){animation-delay:.12s}
@media (max-width:599px){.msg__cards{grid-auto-columns:72%}}

/* ссылки-источники и следующие вопросы под ответом */
.msg__src,.msg__next{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border-radius:999px;background:rgba(143,123,255,.13);border:1px solid var(--line);color:var(--white);font-size:13.5px;text-decoration:none;transition:background .2s,border-color .2s}
.pill::before{content:"↗";font-size:12px;color:var(--phos)}
.pill:hover{background:rgba(143,123,255,.24);border-color:var(--line2)}
.chip{min-height:38px;padding:0 15px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--mist);font:400 14px/1.2 var(--sans);text-align:left;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--phos);color:var(--white);background:rgba(217,210,255,.06)}
.chip--go{border:0;background:var(--glow);background-size:240% 100%;color:var(--on-glow);font-weight:600}
.chip--go:hover{color:var(--on-glow);background-position:100% 0}

/* заявка прямо в разговоре */
.lead-chat{display:grid;gap:12px;max-width:460px;margin-top:16px;padding:18px;border-radius:18px;background:rgba(22,20,47,.94);border:1px solid var(--line2)}
.lead-chat .field input{padding:12px 14px;font-size:16px}
.lead-chat .btn{min-height:48px}
.lead-chat .form__msg{min-height:0}
.lead-chat__ok{margin-top:16px;color:#9ff0c0}


.motion .chat__intro>*,.motion .chat__dock{animation:rise 1s var(--ease) both}
.motion .chat__intro .kicker{animation-delay:.1s}
.motion .chat__intro .chat__title{animation-delay:.18s}
.motion .chat__dock{animation-delay:.38s}
.motion .chat.is-thread .chat__dock{animation:none}
.motion .msg{animation:rise .5s var(--ease) both}

@media (min-width:900px){
  .chat{padding-top:calc(76px + env(safe-area-inset-top))}
  .chat__inner{padding-top:20px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .chat__orb{width:176px;height:176px;margin-bottom:22px}
  .turn:last-child{min-height:calc(100vh - 76px - 100px);min-height:calc(100svh - 76px - 100px)}
  /* восемь болей встают в два ряда: ряд шире строки ввода */
  .chat__dirs{margin-left:calc(50% - 480px);margin-right:calc(50% - 480px)}
  .msg__text{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .chat *,.chat__dock{animation:none!important}
}

/* тезисы-подсказки: показываются случайные 8 из списка, остальные скрыты (chat.js, 19.10.2026) */
.chat__chips .chip[hidden]{display:none!important}

/* маскот ИИ-инженер на главной (20.10.2026): реплика-приветствие с аватаром; в ответах — его лицо вместо знака после ответа */
.mhello{display:flex;align-items:flex-end;gap:12px;max-width:560px;margin:0 auto 22px;text-align:left}
.mhello__ava{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 3px rgba(61,18,252,.14),0 10px 24px -10px rgba(61,18,252,.55)}
.mhello__bubble{flex:1;position:relative;padding:14px 18px 14px;border-radius:20px 20px 20px 6px;background:var(--kelp);border:1px solid var(--line);box-shadow:0 14px 34px -24px rgba(15,13,38,.35)}
.mhello__t{margin:0;color:var(--mist);font-size:15.5px;line-height:1.5}
.mhello__more{display:inline-flex;gap:6px;margin-top:8px;color:var(--phos);font-size:14.5px;font-weight:600;text-decoration:none}
.mhello__more span{transition:transform .2s}
.mhello__more:hover span{transform:translateX(3px)}
.mhello__dots{display:inline-flex;gap:5px;padding:6px 2px}
.mhello__dots i{width:7px;height:7px;border-radius:50%;background:var(--phos);opacity:.35;animation:mhdot 1s infinite}
.mhello__dots i:nth-child(2){animation-delay:.15s}.mhello__dots i:nth-child(3){animation-delay:.3s}
@keyframes mhdot{50%{opacity:1;transform:translateY(-3px)}}
.mhello.is-typing .mhello__more{opacity:0}
.mhello__more{transition:opacity .4s}
.msg__ava--img{display:block;width:34px;height:34px;margin-top:-3px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px rgba(61,18,252,.14)}
.msg__ava--img img{display:block;width:100%;height:100%;object-fit:cover}
.msg__ava.msg__ava--ball{width:40px;height:40px;margin-top:-6px;border-radius:0;background:none!important;box-shadow:none!important;animation:none!important}   /* шарик из частиц (chat.js → BALL) */
.msg__ava--ball canvas{display:block}
@media (min-width:768px){.mhello__ava{width:64px;height:64px}.mhello__t{font-size:16px}}

/* маскот во весь рост держит шар (20.10.2026): якорь .chat__orb над ладонью, реплика справа (на телефоне — под фигурой) */
.mrow{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
.mstage{--h:clamp(250px,36svh,300px);--fw:calc(var(--h) * .668);--a:calc(var(--h) * .36);position:relative;width:calc(var(--fw) + var(--a) * .9);height:var(--h);flex:none}
.mstage__fig{position:absolute;right:0;bottom:0;width:auto;height:var(--h)}   /* без тени: на белых подошвах она давала серое пятно (Фёдор, 20.10) */
.chat .mstage__orb{position:absolute;margin:0;width:var(--a);height:var(--a);left:calc(var(--a) * .9 + var(--fw) * .08 - var(--a) / 2);top:calc(var(--h) * .294 - var(--a) * .42 - 8px - var(--a) / 2)}
.mhello--stage{margin:0;width:100%;max-width:420px}
.mhello--stage .mhello__bubble{padding:16px 46px 16px 18px;border-radius:18px}
.mhello--stage .mhello__bubble::before{content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:var(--kelp);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.mhello--stage .mhello__t{font-size:15px;line-height:1.55;text-wrap:pretty}
.mhello__q{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(61,18,252,.35);color:var(--phos);font:600 14px/1 var(--sans);text-decoration:none;transition:background .2s,color .2s,border-color .2s,opacity .4s}
.mhello__q:hover{background:var(--phos);border-color:var(--phos);color:#fff}
.mhello.is-typing .mhello__q{opacity:0}
@media (min-width:768px){
  .mrow{flex-direction:row;justify-content:center;align-items:flex-start;gap:18px;margin-bottom:18px}
  .mstage{--h:clamp(320px,46svh,440px)}
  .mhello--stage{width:330px;max-width:none;margin-top:calc(clamp(320px,46svh,440px) * .06)}
  .mhello--stage .mhello__bubble{padding:18px 48px 18px 20px}
  .mhello--stage .mhello__bubble::before{left:-7px;top:30px;margin:0;border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
  .mhello--stage .mhello__t{font-size:15.5px}
}

/* реплики маскота «как в комиксе» (20.10.2026): белые облачка с тёмным контуром и сдвинутой тенью, у первой — хвостик к маскоту */
.mhello--comic{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mhello--comic .mhello__bubble{position:relative;padding:12px 18px;border-radius:22px;background:#fff;border:2px solid #12122a;box-shadow:4px 4px 0 rgba(61,18,252,.22);transition:opacity .35s,transform .35s}
.mhello--comic .mhello__bubble::before,.mhello--comic .mhello__bubble::after{display:none}
.mhello--comic .mhello__t{margin:0;color:#12122a;font-size:15.5px;line-height:1.5}
.mhello--comic .mhello__bubble--1 .mhello__t{font-size:17px;font-weight:600}
.mhello--comic .mhello__bubble--2{padding-right:46px}
.mhello--comic .mhello__bubble.is-wait{opacity:0;transform:translateY(6px) scale(.97)}
/* хвостик — векторный уголок: на компьютере влево к голове маскота, на телефоне вверх к нему */
.mhello__tail{position:absolute;width:28px;height:22px;z-index:1;left:calc(50% - 11px);top:-22px;transform:rotate(90deg)}
.mhello--comic .mhello__q{top:10px;right:10px;border-color:#12122a;color:#12122a}
.mhello--comic .mhello__q:hover{background:#12122a;color:#fff}
@media (max-width:767px){.mhello--comic{align-items:center}.mhello--comic .mhello__bubble--1{align-self:center}}
@media (min-width:768px){
  .mhello--comic{width:340px;margin-top:calc(clamp(320px,46svh,440px) * .03)}
  .mhello__tail{left:-26px;top:10px;transform:none}
}

/* выделения в репликах маскота (20.10.2026): CRT — ссылка на «О компании», «22 года в ИТ» — жирным, «быстрее, прибыльнее, эффективнее» — маркером */
/* без подчёркиваний (Фёдор 20.10: «выбивается из общей стилистики») — акцент только цветом, как на остальном сайте */
.mhello__brand{color:#3d12fc;font-weight:700;text-decoration:none;transition:opacity .2s}
.mhello__brand:hover{opacity:.7}
.mhello--comic .mhello__t b{font-weight:700;color:#12122a}
.mhello--comic .mhello__t mark{padding:0 2px;margin:0 -1px;border-radius:3px;color:#12122a;font-weight:600;background:linear-gradient(transparent 55%,rgba(143,123,255,.5) 55%) no-repeat 0 0/0% 100%;transition:background-size .5s cubic-bezier(.2,.7,.1,1)}
.mhello__bubble.is-done mark{background-size:100% 100%}
.mhello__bubble.is-done mark:nth-of-type(2){transition-delay:.25s}.mhello__bubble.is-done mark:nth-of-type(3){transition-delay:.5s}
/* стрелка «листайте» внизу первого экрана */
.chat__down{position:fixed;z-index:20;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));transition:opacity .3s,transform .3s,border-color .2s,background .2s;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--kelp);color:var(--phos);box-shadow:0 10px 24px -14px rgba(61,18,252,.6);transition:border-color .2s,background .2s}
.chat__down span{display:grid;place-items:center;animation:chdown 1.8s ease-in-out infinite}
.chat__down svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat__down:hover{border-color:var(--phos)}
@keyframes chdown{50%{transform:translateY(4px)}}
.chat.is-thread .chat__down{display:none}

@media (prefers-reduced-motion:reduce){.chat__down span{animation:none}}

/* маскот живой (20.10.2026): дышит, переводит взгляд с шара на посетителя — смена двух кадров одной позы */
.mstage__body{position:absolute;inset:0}

.chat__down.is-gone{opacity:0;transform:translateY(10px);pointer-events:none}
/* одно лёгкое облачко (20.10.2026): белое, тонкий контур, мягкая тень; первая строка чуть крупнее */
.mhello--one{display:block}
.mhello--one .mhello__bubble{position:relative;padding:16px 46px 16px 20px;border-radius:20px;background:#fff;border:1px solid rgba(15,13,38,.1);box-shadow:0 18px 40px -24px rgba(15,13,38,.3)}
.mhello--one .mhello__bubble::before,.mhello--one .mhello__bubble::after{display:none}
.mhello--one .mhello__t{margin:0;color:var(--mist);font-size:15.5px;line-height:1.55}
.mhello--one .mhello__hi{margin-bottom:6px;color:var(--white);font-size:17px;font-weight:600}
.mhello--one .mhello__t b{font-weight:700;color:var(--white)}
.mhello--one .mhello__t mark{padding:0;margin:0;background:none;color:var(--white);font-weight:600;transition:color .6s ease}
.mhello--one .mhello__bubble.is-done mark{color:#3d12fc}   /* слова по очереди окрашиваются в фирменный фиолетовый, когда текст набран */
.mhello--one .mhello__q{top:14px;right:14px}
@media (min-width:768px){.mhello--one{width:340px;margin-top:calc(clamp(320px,46svh,440px) * .04)}}
@media (max-width:767px){.mhello--one .mhello__bubble{border-radius:18px}}

/* ролик маскота из Higgsfield (20.10.2026): белый фон убирает шейдер (хромакей по белому) на холсте; до старта видна картинка */
.mstage__src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mstage__vid{position:absolute;right:0;bottom:0;height:var(--h);width:auto;aspect-ratio:720/1078;opacity:0;transition:opacity .45s ease;pointer-events:none}
.mstage__vid.is-on{opacity:1}
.mstage__body.is-live .mstage__fig{opacity:0;transition:opacity 0s .5s}   /* картинка уходит, когда ролик уже проявился */