/* ══════════════════════════════════════════════════════════════════════════
AI Constructor Bot — надстройка над дизайн-системой FinArch.
Базовые компоненты (шапка, герой, кнопки, карточка-демо, звёзды) берутся
из assets/chunks/*.css как есть. Здесь — только наше:
1) бренд-акцент,
2) блоки, которых у него не было (лид, тарифы, подвал),
3) чат в герое.
Перекрасить сайт целиком = поменять --ds-accent и --ds-accent-text.
══════════════════════════════════════════════════════════════════════════ */
:root {
/* Его акцент — жжёный кирпич. Оставлен как есть: именно он даёт «дорого».
Хочешь свой цвет — меняй эти две строки, остальное пересчитается. */
--ds-accent: #5a2812;
--ds-accent-text: #d4845c;
}
/* ─── Плавный скролл (Lenis). Обязательные правила библиотеки ───
Класс .lenis вешает на сама библиотека. Внутренние ленты (чат)
разруливает app.js — по направлению колеса, а не атрибутом. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
/* ══════════════════════════════════════════════════════════════════════════
ФОН. Два варианта, переключаются адресом:
обычный — звёзды (как было) + параллакс к курсору + тёплое свечение;
?bg=web — созвездия на canvas, в нашем цвете.
Управляет app.js. Оба выключаются при «уменьшить движение» в системе.
══════════════════════════════════════════════════════════════════════════ */
/* Слои звёзд едут за курсором. translate — отдельное свойство, оно НЕ затирает
transform, которым слои уже подняты анимацией. Чем ближе слой, тем сильнее ход. */
.ai-shop-bg-sparks .ai-shop-bg-l1 { translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 6px); }
.ai-shop-bg-sparks .ai-shop-bg-l2 { translate: calc(var(--mx, 0) * 13px) calc(var(--my, 0) * 13px); }
.ai-shop-bg-sparks .ai-shop-bg-l3 { translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 22px); }
/* Тёплое пятно света под курсором. screen — светит, а не пачкает фон. */
.bg-glow {
position: fixed;
z-index: 0;
top: 0; left: 0;
width: 640px; height: 640px;
margin: -320px 0 0 -320px; /* центр пятна = курсор */
pointer-events: none;
opacity: 0; /* появится, когда мышь войдёт в окно */
transition: opacity .5s ease;
mix-blend-mode: screen;
background: radial-gradient(circle,
color-mix(in srgb, var(--ds-accent-text) 22%, transparent),
color-mix(in srgb, var(--ds-accent-text) 7%, transparent) 38%,
transparent 66%);
}
.bg-glow.is-on { opacity: 1; }
/* Созвездия — только по ?bg=web */
.bg-web {
position: fixed;
inset: 0;
z-index: 0;
width: 100%; height: 100%;
pointer-events: none;
display: none;
}
.bg-web.is-on { display: block; }
@media (prefers-reduced-motion: reduce) {
.bg-glow, .bg-web { display: none; }
}
/* Сайдбар приложения нам не нужен — на лендинге его нет вовсе.
Правило страхует от случайного возврата любого элемента шелла. */
.sidebar,
.ai-shop-platform-sidebar,
.sidebar-projects,
.sidebar-quick-actions { display: none !important; }
/* Страница — обычный поток, без грид-шелла с колонкой под сайдбар */
.agents-page.services-page {
display: block;
min-height: 100vh;
position: relative;
}
/* Никаких свечений под контентом. В референсе фон — ровный #08090a, и вся
«премиальность» держится на том, что карточка почти сливается с ним. */
/* ── Шапка: прозрачная сверху, стекло при скролле (класс вешает app.js) ── */
.public-marketing-nav { position: fixed; }
/* При скролле его CSS красит шапку в #111414c7 — это СЕРЫЙ, светлее нашего
почти-чёрного фона (#08090a), и поверх Total Black читается мутным пятном.
Убираем заливку совсем: остаётся только блюр (проезжающий контент мягко
размывается, а не закрывается плашкой) и волосяная нижняя граница.
backdrop-filter без фона на этом фиксированном слое работает сам по себе. */
.public-marketing-nav.is-compact {
background: transparent !important;
-webkit-backdrop-filter: blur(20px) saturate(1.05);
backdrop-filter: blur(20px) saturate(1.05);
border-bottom-color: var(--ds-border) !important;
}
/* Клик по пункту меню не должен прятать заголовок раздела под фиксированную
шапку — резервируем её высоту при переходе по якорю. */
#top, #works, #how, #plans, #faq { scroll-margin-top: 80px; }
/* ── БРЕНД В ШАПКЕ ──
У него полное имя и компактное «FA» лежат в одной ячейке грида: при скролле
первое гаснет (opacity:0), второе проявляется. Нам подмена не нужна — имя
продукта должно быть видно всегда.
ВАЖНО: мало скрыть компактное через display, надо ещё СНЯТЬ ГАШЕНИЕ полного.
Иначе при скролле в шапке не остаётся ничего, а при обновлении посреди
страницы имя мигает: скрипт успевает отрисовать шапку в «верхнем» состоянии,
потом браузер восстанавливает позицию скролла — и имя гаснет. */
.agents-brand-full { display: inline !important; }
.public-marketing-nav.is-compact .agents-brand-full {
opacity: 1 !important;
transform: none !important;
}
.agents-brand-compact { display: none !important; }
/* Сам контейнер бренда при скролле у него ужимается до 26px (под «FA») и режет
всё лишнее через overflow:hidden. Нам он нужен по ширине имени — иначе
остаётся обрубок «AI C».
Ширину фиксируем в ОБОИХ состояниях: у него базовая 230px, а сжатая — своя,
и на скролле шапка микроскопически дёргалась. */
.agents-brand,
.public-marketing-nav.is-compact .agents-brand {
width: max-content !important;
transition: none !important;
}
@media (max-width: 480px) {
.agents-brand-full { display: none !important; }
.agents-brand-compact { display: inline !important; opacity: 1 !important; transform: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
ГЕРОЙ
══════════════════════════════════════════════════════════════════════════ */
.services-hero {
/* Карточке отдаём больше места, чем в исходнике: у нас в ней целый диалог,
а не пять коротких строк.
Высоту экрана НЕ фиксируем (никаких 100svh): иначе карточке некуда расти
и она вылезает за нижний край. Пусть герой сам подстроится под содержимое. */
grid-template-columns: minmax(0, 1fr) minmax(520px, 660px);
align-items: center;
gap: clamp(32px, 4vw, 56px);
width: min(1340px, 100% - 48px);
margin-inline: auto;
padding: 96px 0 32px;
display: grid;
position: relative;
z-index: 1;
/* Герой занимает ровно первый экран: минус высота фиксированной шапки, под
которую у .agents-page уже зарезервировано 64px. Иначе он оказывается
короче окна и на первый экран заглядывает заголовок следующего раздела.
Содержимое по центру — поэтому «мёртвой полосы» снизу не возникает:
свободная высота распределяется поровну сверху и снизу. */
min-height: calc(100svh - 64px);
}
.services-eyebrow {
font-family: var(--ds-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ds-text-faint);
margin-bottom: 16px;
}
/* В герое надстрочник висел сам по себе: строка мелких капсов болталась над
огромным заголовком и ни к чему не крепилась. Оборачиваем в плашку —
она собирает его в объект и привязывает к заголовку. */
.services-hero .services-eyebrow {
display: inline-flex;
align-items: center;
padding: 7px 14px;
margin-bottom: 22px;
border: 1px solid var(--ds-border);
border-radius: 999px;
background: color-mix(in srgb, var(--ds-bg-elevated) 70%, transparent);
color: var(--ds-text-muted);
}
.services-lead {
color: var(--ds-text-muted);
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.6;
max-width: 52ch;
margin-bottom: 32px;
}
/* Заголовок разбит на две строки по смыслу, а не по случайному переносу:
первая — что делаем («Создать Telegram-бота»), вторая — как («простыми
словами»). Вторая тише по цвету: она уточняет, а не спорит с первой.
Размер сбавлен с 58px: на 58px строка занимала 600px в колонке 624px и
упиралась в карточку — читалось как съехавшая вёрстка. */
.services-hero h1 {
font-size: clamp(30px, 2.9vw, 46px);
line-height: 1.1;
margin-bottom: 20px;
text-wrap: nowrap; /* строки заданы вручную — авто-перенос не нужен */
}
.h1-sub {
display: block;
color: var(--ds-text-muted);
}
/* На узких экранах ручные строки могут не влезть — возвращаем обычный перенос */
@media (max-width: 620px) {
.services-hero h1 { text-wrap: wrap; }
}
.services-footnote-top {
margin-top: 16px;
font-size: 12px;
color: var(--ds-text-faint);
}
/* ══════════════════════════════════════════════════════════════════════════
ЧАТ В ГЕРОЕ — живёт внутри его же .services-demo
══════════════════════════════════════════════════════════════════════════ */
/* ── КАРТОЧКА. Замерено на .ai-shop-scene-chat в референсе:
фон — bg-elevated с прозрачностью 80% (тёмный, почти сливается с фоном),
рамка белая 8%, радиус 16, тени НЕТ. Никаких градиентов. ── */
.services-demo {
background: color-mix(in srgb, var(--ds-bg-elevated) 80%, transparent) !important;
border: 1px solid var(--ds-border) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
/* шапка карточки — чуть плотнее корпуса, как .ai-shop-chat-bar */
.services-demo-head {
background: color-mix(in srgb, var(--ds-bg-elevated) 92%, transparent);
border-bottom: 1px solid var(--ds-border);
}
/* ── БЕГУЩАЯ ЛИНИЯ ПО КОНТУРУ ──
Один в один с телефоном в карусели: конический градиент светит короткой дугой,
угол крутится — дуга едет по кромке. Раньше здесь была белая SVG-рамка (его
.ai-shop-beam), но акцентный луч смотрится дороже, поэтому свели к одному. */
.services-demo { position: relative; }
/* старую SVG-рамку прячем, HTML не трогаем */
.demo-beam { display: none; }
.services-demo::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(
from var(--beam-angle, 0deg),
transparent 0deg 300deg,
color-mix(in srgb, var(--ds-accent-text) 70%, white) 340deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: phone-beam 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.services-demo::after { animation: none; }
}
/* ── ПОЯВЛЕНИЕ РЕПЛИК ──
У него переход был линейно-резкий (opacity .4s, transform .4s). Меняем на
ease-out-кривую: реплика быстро набирает видимость и мягко тормозит —
так она «прилетает», а не проступает. Лёгкий подъём и микро-масштаб дают
ощущение веса, без дёрганья. */
.services-demo-line {
transform: translateY(10px) scale(.98);
transition: opacity .42s cubic-bezier(.22, 1, .36, 1),
transform .42s cubic-bezier(.22, 1, .36, 1);
will-change: opacity, transform;
}
.services-demo-line.is-shown { transform: none; }
/* Карточка собранного бота — финал сцены, ей отдельный, чуть более долгий выход */
.services-demo-line.is-plain {
transform: translateY(14px) scale(.96);
transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
transform .55s cubic-bezier(.22, 1, .36, 1);
}
.services-demo-line.is-plain.is-shown { transform: none; }
.services-demo-title { display: grid; line-height: 1.3; }
.services-demo-title b { font-size: 13px; font-weight: 600; color: var(--ds-text); }
.services-demo-title i {
font-style: normal;
font-size: 11px;
color: var(--ds-accent-text);
}
/* Никакого внутреннего скролла и фиксированной высоты: диалог виден целиком.
Резерв min-height нужен, чтобы карточка не «схлопывалась» в начале сцены,
когда реплик ещё нет, и не прыгала по мере их появления. */
/* Высота ленты фиксирована: записанный диалог влезает целиком, а дальше человек
тыкает кнопки — переписка растёт и уезжает во внутренний скролл, как в
настоящем чате. Карточка при этом не меняет размер и не двигает вёрстку. */
#chatLines {
/* высота от экрана: на большом мониторе карточка растёт и заполняет героя,
вместо того чтобы оставлять мёртвый воздух сверху и снизу */
height: clamp(470px, 56svh, 660px);
overflow-y: auto;
overscroll-behavior: contain;
align-content: start;
gap: 8px;
scrollbar-width: thin;
scrollbar-color: var(--ds-border-strong) transparent;
scroll-behavior: smooth;
}
#chatLines::-webkit-scrollbar { width: 6px; }
#chatLines::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 999px; }
#chatLines::-webkit-scrollbar-track { background: transparent; }
/* Реплика пользователя. Замерено в референсе (.ai-shop-msg.user p):
фон — БЕЛЫЙ 8% прозрачный, рамка — белая 18%. Никакого цветного акцента:
именно коричневая заливка и делала карточку дешёвой. */
.services-demo-line.is-me {
justify-self: end;
max-width: 86%;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .18);
color: var(--ds-text);
font-size: 13.5px;
line-height: 1.55;
}
/* команда /start — моноширинная, как в Telegram */
.services-demo-line.is-cmd { font-family: var(--ds-font-mono); font-size: 12px; }
/* ответ бота — пузырь слева */
/* Реплика бота (.ai-shop-msg.assistant p в референсе):
тёмная поверхность + белая рамка 8%, радиус 14, без «хвостика». */
.services-demo-line.is-bot {
justify-self: start;
max-width: 92%;
padding: 10px 14px;
border-radius: 14px;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
color: var(--ds-text);
font-size: 13.5px;
line-height: 1.55;
white-space: pre-wrap;
}
.services-demo-line.is-bot .quote { color: var(--ds-accent-text); }
/* «голая» реплика: не пузырь, а контейнер под карточку собранного бота.
Она не принадлежит ни одной из сторон диалога — это результат, поэтому
стоит по центру карточки, а не прижата к левому краю как реплика бота. */
.services-demo-line.is-plain {
justify-self: center;
width: 100%;
max-width: 460px;
margin-top: 4px;
padding: 0;
background: none;
border: 0;
white-space: normal;
}
/* «печатает…» — три прыгающие точки */
.services-demo-line.is-typing {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 12px 14px;
border-radius: 10px 10px 10px 4px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
}
.services-demo-line.is-typing i {
width: 5px; height: 5px; border-radius: 50%;
background: var(--ds-text-muted);
animation: chat-dot 1.4s ease-in-out infinite;
}
.services-demo-line.is-typing i:nth-child(2) { animation-delay: .18s; }
.services-demo-line.is-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-dot {
0%, 60%, 100% { opacity: .25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* курсор печатной машинки */
.chat-caret {
display: inline-block;
width: 2px; height: 1em;
vertical-align: -2px;
margin-left: 2px;
background: var(--ds-text);
animation: chat-caret .9s step-end infinite;
}
@keyframes chat-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
/* карточка собранного бота — приходит последней репликой */
/* Превью = его «артефакт» (.ai-shop-msg-artifact): фон чернее самой карточки
(#08090a, цвет страницы), белая рамка 8%. Панель результата, утопленная
в карточку, — вот что читается дорого. */
.chat-preview {
display: grid;
gap: 9px;
margin-top: 2px;
padding: 11px;
border-radius: 10px;
background: var(--ds-bg);
border: 1px solid var(--ds-border);
}
.chat-preview-top { display: flex; align-items: center; gap: 10px; }
.chat-preview-ico {
width: 30px; height: 30px; flex: none;
display: grid; place-items: center;
border-radius: 8px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border-strong);
color: var(--ds-accent-text);
}
.chat-preview-ico svg { width: 16px; height: 16px; }
/* имя и @username — колонкой, без
*/
.chat-preview-id { display: grid; gap: 1px; min-width: 0; flex: 1; }
.chat-preview-name {
font-size: 13px; font-weight: 600; color: var(--ds-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-preview-sub {
font-family: var(--ds-font-mono);
font-size: 11px; color: var(--ds-text-faint);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* время сборки — отдельной плашкой справа */
.chat-preview-time {
flex: none;
font-family: var(--ds-font-mono);
font-size: 10px; letter-spacing: .04em;
padding: 4px 8px; border-radius: 999px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
color: var(--ds-text-muted);
}
/* Превью меню бота — сеткой 2×2, как клавиатура в Telegram.
Это витрина того, что собралось; тыкать надо на слайде 2. */
.chat-preview-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.chat-preview-chips span {
display: grid;
place-items: center;
min-height: 30px;
padding: 6px 10px;
border-radius: 8px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
color: var(--ds-text-muted);
font-size: 12px;
font-weight: 500;
}
/* ══════════════════════════════════════════════════════════════════════════
ДВА СЛАЙДА В КАРТОЧКЕ ЧАТА
Слайд 1 — как бот собирается. Слайд 2 — сам бот. Листается стрелками,
в шапке счётчик 1/2. Никаких модалок: всё в той же карточке.
══════════════════════════════════════════════════════════════════════════ */
.services-demo-track {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overflow-x: hidden; /* листаем только кнопками */
}
.services-demo-track > .services-demo-case {
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: start;
}
/* ── ЗАГЛУШКА ПОД БУДУЩЕГО БОТА ──
Слайд, для которого ещё не подключён файл данных из bots/. */
.phone-chat.is-empty {
display: grid;
place-items: center;
align-content: center; /* базовое правило ставит start — перебиваем */
}
.bot-demo {
font-family: var(--ds-font-mono);
font-size: 15px;
letter-spacing: .06em;
color: var(--ds-text-faint);
opacity: .75;
}
.phone-input.is-off {
justify-content: center;
pointer-events: none;
}
.phone-input.is-off span {
flex: none;
font-size: 11px;
color: var(--ds-text-faint);
}
/* ══════════════════════════════════════════════════════════════════════════
СЛАЙД ПОРТФОЛИО — только телефон, без внешней карточки.
Карточка с рамкой вокруг телефона с рамкой давала «рамку в рамке».
══════════════════════════════════════════════════════════════════════════ */
.works-slide {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* подпись сверху — как «Конструктор · Агент 1/7» в референсе */
.works-step {
font-family: var(--ds-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ds-accent-text);
}
/* Одна строка под подписью: что это за бот и кому он нужен.
Держим в одну-две строки — высота нужна телефону, а не тексту. */
.works-desc {
max-width: 62ch;
margin: -4px 0 0;
text-align: center;
font-size: 13.5px;
line-height: 1.55;
color: var(--ds-text-muted);
text-wrap: pretty;
}
/* Финальный слайд: не бот, а ответ тем, кто своей ниши в списке не нашёл.
Карточка плоская, как в дизайн-системе: без теней и заливок. */
.works-more {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: min(560px, 100%);
padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px);
border: 1px solid var(--ds-border);
border-radius: 14px;
background: var(--ds-surface);
text-align: center;
}
.works-more h3 {
margin: 0;
font-size: clamp(19px, 1.7vw, 23px);
font-weight: 600;
color: var(--ds-text);
}
.works-more p {
margin: 0;
max-width: 46ch;
font-size: 14px;
line-height: 1.65;
color: var(--ds-text-muted);
text-wrap: pretty;
}
.works-more .agents-btn { margin-top: 4px; }
.works-more-note {
font-size: 12px;
color: var(--ds-text-faint);
}
/* Телефон занимает всю свободную высоту слайда — он здесь главный, а не
подпись и не полоски. Свечения за ним нет: размытое пятно на звёздном фоне
читается как грязь. */
.works-phone {
flex: 1;
min-height: 0;
display: grid;
place-items: center;
}
.works-phone .bot-slide { height: 100%; }
.works-slide .phone {
width: clamp(320px, 26vw, 380px);
border-radius: 32px;
}
.works-slide .bot-text { font-size: 13px; }
.works-slide .kbd-btn { min-height: 36px; font-size: 12.5px; }
/* Портфолио отдаёт максимум высоты телефону: отступы секции и заголовок ужаты,
строка под телефоном и кнопка под каруселью убраны — смотреть надо на бота.
Переход в Telegram живёт под самим телефоном, как в герое. */
/* Верхний отступ меньше нижнего: сверху уже есть воздух от героя, и складывать
два больших отступа незачем — до заголовка приходилось долистывать. */
#works { padding: clamp(20px, 2vw, 28px) 0 clamp(36px, 3.6vw, 52px); }
#works .services-section-head { margin-bottom: 20px; }
#works .services-lead { margin-bottom: 0; }
#works .works-stories { margin-bottom: 14px; }
@media (max-height: 820px) {
#works .services-section-head { margin-bottom: 16px; }
#works .services-section h2 { font-size: clamp(22px, 2.4vw, 30px); }
#works .services-lead { font-size: 13px; }
.works-slide { gap: 10px; }
}
/* ── СЛАЙД БОТА = ЭКРАН ТЕЛЕФОНА ──
Голая панель с кнопками смотрелась пусто и неубедительно. Здесь — телефон
с интерфейсом Telegram: шапка чата, пузырь сообщения, клавиатура под ним,
строка ввода. Человек видит не «блок на сайте», а свой мессенджер. */
.bot-slide {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: clamp(470px, 56svh, 660px); /* та же высота, что у ленты диалога */
}
.phone {
position: relative;
flex: 1;
min-height: 0;
width: 300px;
display: flex;
flex-direction: column;
background: var(--ds-bg);
border: 1px solid var(--ds-border-strong);
border-radius: 26px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* Бегущая линия по корпусу телефона — тот же приём, что на карточках.
В карусели телефон остался единственным объектом, и линия держит его
в общем языке дизайна. */
.works-slide .phone::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(
from var(--beam-angle, 0deg),
transparent 0deg 300deg,
color-mix(in srgb, var(--ds-accent-text) 70%, white) 340deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: phone-beam 6s linear infinite;
}
@property --beam-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes phone-beam {
to { --beam-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.works-slide .phone::after { animation: none; }
}
/* шапка чата */
.phone-bar {
flex: none;
display: flex;
align-items: center;
gap: 9px;
padding: 11px 12px;
border-bottom: 1px solid var(--ds-border);
background: var(--ds-bg-elevated);
}
.phone-back { width: 16px; height: 16px; flex: none; color: var(--ds-text-faint); }
.phone-ava {
width: 30px; height: 30px; flex: none;
display: grid; place-items: center;
border-radius: 50%;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
color: var(--ds-accent-text);
}
.phone-ava svg { width: 16px; height: 16px; }
.phone-who { display: grid; line-height: 1.25; }
.phone-who b { font-size: 12.5px; font-weight: 600; color: var(--ds-text); }
.phone-who i { font-style: normal; font-size: 10.5px; color: var(--ds-text-faint); }
/* лента чата — сообщения копятся, как в настоящем мессенджере */
.phone-chat {
flex: 1;
min-height: 0;
overflow-y: auto;
display: grid;
align-content: start;
gap: 8px;
padding: 12px 10px;
scrollbar-width: thin;
scrollbar-color: var(--ds-border-strong) transparent;
scroll-behavior: smooth;
}
.phone-chat::-webkit-scrollbar { width: 5px; }
.phone-chat::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 999px; }
/* реплика в ленте телефона */
.ph-msg {
opacity: 0;
transform: translateY(8px);
transition: opacity .32s var(--ds-ease), transform .32s var(--ds-ease);
}
.ph-msg.is-shown { opacity: 1; transform: none; }
/* сообщение пользователя — справа, акцентом */
.ph-msg.is-me {
justify-self: end;
max-width: 88%;
padding: 8px 11px;
border-radius: 12px 12px 4px 12px;
background: color-mix(in srgb, var(--ds-accent) 62%, var(--ds-surface-2));
border: 1px solid color-mix(in srgb, var(--ds-accent-text) 24%, transparent);
color: var(--ds-text);
font-size: 12.5px;
line-height: 1.5;
}
/* «печатает…» */
.ph-msg.is-typing {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 12px;
border-radius: 12px 12px 12px 4px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
}
.ph-msg.is-typing i {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--ds-text-muted);
animation: chat-dot 1.4s ease-in-out infinite;
}
.ph-msg.is-typing i:nth-child(2) { animation-delay: .18s; }
.ph-msg.is-typing i:nth-child(3) { animation-delay: .36s; }
/* ── СТРОКА ВВОДА: живая, можно спросить бота словами ── */
.phone-input {
flex: none;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-top: 1px solid var(--ds-border);
background: var(--ds-bg-elevated);
color: var(--ds-text-faint);
}
.phone-input > svg { width: 16px; height: 16px; flex: none; }
.phone-input input {
flex: 1;
min-width: 0;
background: none;
border: 0;
outline: none;
color: var(--ds-text);
font: 400 12.5px/1 var(--ds-font-sans);
}
.phone-input input::placeholder { color: var(--ds-text-faint); }
.phone-send {
flex: none;
width: 28px; height: 28px;
display: grid; place-items: center;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--ds-accent) 70%, transparent);
color: #fff;
cursor: pointer;
transition: background .15s var(--ds-ease), transform .1s var(--ds-ease);
}
.phone-send:hover { background: var(--ds-accent); }
.phone-send:active { transform: scale(.92); }
.phone-send svg { width: 14px; height: 14px; }
/* Не кнопка-плашка, а тихая ссылка под телефоном. Плашка спорила с самим
экраном бота и перетягивала внимание на себя — а смотреть надо на бота. */
.bot-tg {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
color: var(--ds-accent-text);
font: 600 12.5px/1 var(--ds-font-sans);
text-decoration: none;
transition: gap .16s var(--ds-ease), color .16s var(--ds-ease);
}
.bot-tg svg { width: 15px; height: 15px; }
.bot-tg:hover { gap: 11px; color: #fff; }
/* «Повторить» прячем на слайде бота */
#chatReplay[hidden] { display: none; }
@media (min-width: 1081px) and (max-height: 900px) { .bot-slide { height: 495px; } }
@media (min-width: 1081px) and (max-height: 810px) { .bot-slide { height: 440px; } }
@media (max-width: 1080px) { .bot-slide { height: 480px; } }
/* ── ТЕЛО БОТА: перерисовывается на месте ──
Настоящий бот по нажатию inline-кнопки не шлёт новое сообщение, а
РЕДАКТИРУЕТ своё. Поэтому меняем только середину карточки: старое содержимое
гаснет и уходит вверх, новое проявляется. */
.bot-body {
transition: opacity .15s var(--ds-ease), transform .15s var(--ds-ease);
}
.bot-body.is-morph {
opacity: 0;
transform: translateY(-4px);
}
/* Сообщение бота — пузырь, прижатый влево, со срезанным нижним углом:
именно так выглядит реплика бота в Telegram. */
.bot-text {
padding: 9px 11px;
border-radius: 12px 12px 12px 4px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
font-size: 12.5px;
line-height: 1.5;
color: var(--ds-text);
white-space: pre-wrap;
}
.bot-text b { font-weight: 600; }
/* Приписка «это демо» — отбита чертой и приглушена: читается как сноска,
а не как часть ответа бота. */
.demo-note {
display: block;
margin-top: 8px;
padding-top: 7px;
border-top: 1px solid var(--ds-border);
font-size: 10.5px;
line-height: 1.45;
color: var(--ds-text-faint);
}
.demo-note b { color: var(--ds-accent-text); font-weight: 600; }
/* упоминание конструктора внутри демо-бота — живая ссылка */
.bot-link {
color: var(--ds-accent-text);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--ds-accent-text) 35%, transparent);
transition: border-color .15s;
}
.bot-link:hover { border-bottom-color: var(--ds-accent-text); }
/* ══════════════════════════════════════════════════════════════════════════
КЛАВИАТУРА ДЕМО-БОТА — кнопки под сообщениями, как inline-keyboard в TG
══════════════════════════════════════════════════════════════════════════ */
/* Клавиатура прилипает к пузырю снизу и идёт плотными рядами —
в Telegram inline-кнопки именно так и выглядят. */
.kbd { display: grid; gap: 3px; margin-top: 4px; }
.kbd-row { display: grid; gap: 3px; }
.phone .kbd-btn {
min-height: 34px;
padding: 7px 9px;
border-radius: 8px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .08);
font-size: 12px;
}
.phone .kbd-btn:hover { background: rgba(255, 255, 255, .09); }
.phone .prod-total { font-size: 12px; margin-top: 8px; padding-top: 8px; }
.phone .prod-total b { font-size: 14px; }
.kbd-btn,
.chat-preview-chips .kbd-btn {
display: grid;
place-items: center;
min-height: 32px;
padding: 7px 10px;
border-radius: 8px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
color: var(--ds-text);
font: 500 12px/1.3 var(--ds-font-sans);
text-align: center;
cursor: pointer;
transition: background .14s var(--ds-ease), border-color .14s var(--ds-ease),
color .14s var(--ds-ease), transform .1s var(--ds-ease);
}
.kbd-btn:hover {
background: var(--ds-surface);
border-color: var(--ds-border-strong);
}
.kbd-btn:active { transform: scale(.97); } /* тактильный отклик, как у настоящей кнопки */
/* главное действие — акцентом */
.kbd-btn.is-primary {
background: color-mix(in srgb, var(--ds-accent) 70%, transparent);
border-color: color-mix(in srgb, var(--ds-accent-text) 40%, transparent);
color: #fff;
}
.kbd-btn.is-primary:hover { background: var(--ds-accent); }
/* выбранная добавка — галочка и акцентная рамка */
.kbd-btn.is-addon { justify-items: start; text-align: left; }
.kbd-btn.is-addon.is-on {
background: color-mix(in srgb, var(--ds-accent) 40%, transparent);
border-color: color-mix(in srgb, var(--ds-accent-text) 45%, transparent);
color: var(--ds-accent-text);
}
/* «Итого» в карточке товара — пересчитывается на месте */
.prod-total {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid var(--ds-border);
font-size: 13px;
color: var(--ds-text-muted);
}
.prod-total b {
color: var(--ds-text);
font-size: 15px;
font-weight: 600;
}
/* Кнопка «Посмотреть превью» — без рамки и фона, только акцентный текст.
Она не должна спорить с кнопками-меню выше: это приглашение, а не действие
в интерфейсе бота. */
.preview-open {
/* Прижата к правому краю: стрелка указывает вправо и слайд уезжает вправо —
движение и кнопка должны смотреть в одну сторону. */
justify-self: end;
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 2px;
padding: 6px 2px;
background: none;
border: 0;
color: var(--ds-accent-text);
font: 600 13px/1 var(--ds-font-sans);
cursor: pointer;
transition: gap .16s var(--ds-ease), color .16s var(--ds-ease);
}
.preview-open svg { width: 15px; height: 15px; }
.preview-open:hover { gap: 11px; color: #fff; } /* стрелка уезжает вправо — «идём смотреть» */
/* ══════════════════════════════════════════════════════════════════════════
СЕКЦИИ
══════════════════════════════════════════════════════════════════════════ */
/* Отступы секций складываются на каждом стыке: 116 снизу + 116 сверху = 232px
пустоты между разделами, и так на каждом. В сумме по странице набегал лишний
экран. Ужато до 76px — воздух остался, «мёртвой зоны» нет. */
.agents-section.services-section {
width: min(1240px, 100% - 48px);
margin-inline: auto;
padding: clamp(52px, 5.5vw, 76px) 0;
position: relative;
z-index: 1;
}
/* Разделы, на которые ведёт меню, занимают не меньше экрана. Иначе после
клика по пункту снизу заглядывает начало следующего раздела — выглядит как
обрезанная вёрстка. Содержимое по центру, поэтому лишняя высота уходит
в поля сверху и снизу, а не в мёртвую полосу. */
#works, #how, #plans {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100svh - 80px); /* 80px — фиксированная шапка + запас */
}
/* FAQ — последний раздел, и ему нужно ровно столько высоты, чтобы вместе
с подвалом закрыть экран. Иначе браузеру некуда доскроллить: раздел не может
встать под шапку, и сверху остаётся торчать хвост «Тарифов».
На весь экран не тянем (это давало полэкрана пустоты) — вычитаем шапку
и высоту подвала. */
#faq {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100svh - 80px - 80px); /* шапка + подвал */
}
/* Ширина в px, а не в ch: ch считается от базового шрифта блока (14px), и
62ch давало всего ~470px — заголовки ломались на две строки на ровном месте. */
.services-section-head { max-width: 920px; margin-bottom: 36px; }
.services-section.is-centered .services-section-head {
text-align: center;
margin-inline: auto;
}
/* В центрированных секциях снимаем ограничение в 52ch: оно рассчитано на
колонку текста, а тут лид — одна короткая фраза, и кап резал её пополам. */
.services-section.is-centered .services-lead {
margin-inline: auto;
max-width: min(1000px, 100%);
}
.services-section h2 {
font-size: clamp(26px, 3vw, 38px);
font-weight: 600;
letter-spacing: -.025em;
line-height: 1.15;
margin-bottom: 14px;
/* если заголовок всё же не влезает в строку — строки будут равной длины,
а не «длинная + одно слово» */
text-wrap: balance;
}
/* Лид: переносы по смыслу, без висячих предлогов в конце строки */
.services-lead { text-wrap: pretty; }
/* Отдельная мысль — с новой строки и тише основного лида */
.lead-line {
display: block;
margin-top: 8px;
color: var(--ds-text-faint);
}
/* Примеры фраз в лиде — акцентом, как в самом чате: взгляд сразу цепляет,
что именно нужно написать боту */
.lead-quote {
color: var(--ds-accent-text);
white-space: nowrap; /* цитата не должна рваться пополам */
}
@media (max-width: 620px) {
.lead-quote { white-space: normal; } /* на узком экране рвать всё же можно */
}
.services-cta-row { display: flex; justify-content: center; margin-top: 28px; }
/* ══════════════════════════════════════════════════════════════════════════
КАРУСЕЛЬ ПОРТФОЛИО — как в референсе:
полоски-сегменты сверху, стрелки по краям (вне карточки),
слайд переезжает целиком горизонтальной прокруткой трека.
══════════════════════════════════════════════════════════════════════════ */
/* Карусель забирает всю свободную высоту секции и отдаёт её телефону:
раньше он ютился на 30% экрана, хотя он тут главное. */
.works-carousel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
width: 100%;
}
/* ── Сегменты-полоски (его .ai-shop-stories): по одной на бота ── */
.works-stories {
display: flex; gap: 7px;
width: min(720px, 92%);
margin: 0 auto 20px;
min-height: 6px; /* сегменты тоже рисует JS — резервируем их высоту */
}
.works-seg {
flex: 1; height: 6px; padding: 0;
position: relative; overflow: hidden;
border: 0; border-radius: 999px;
background: color-mix(in srgb, var(--ds-text) 14%, transparent);
cursor: pointer;
transition: background .2s, transform .2s;
}
/* Активная полоска подсвечена САМА — это «вы здесь». Не зависит от таймера,
поэтому видна и на паузе, и когда листаешь стрелками. */
.works-seg[aria-selected="true"] {
background: color-mix(in srgb, var(--ds-accent-text) 34%, transparent);
transform: scaleY(1.5); /* чуть толще — сразу цепляет глаз */
}
/* Бегущая заливка поверх = только обратный отсчёт до автоперехода. */
.works-seg-fill {
position: absolute; inset: 0;
border-radius: 999px;
background: var(--ds-accent-text);
transform: scaleX(0);
transform-origin: 0;
}
.works-seg[aria-selected="true"] .works-seg-fill {
animation: works-fill 8s linear forwards;
}
@keyframes works-fill { to { transform: scaleX(1); } }
/* ── Вьюпорт: стрелки прижаты к его краям, поэтому оказываются
слева и справа от карточки, а не внутри неё ──
min-height ОБЯЗАТЕЛЕН: слайды строит JS, и до его запуска секция была
пустой. Браузер восстанавливал скролл по короткой странице, потом контент
достраивался, страница подрастала на ~400px — и позицию отбрасывало
к началу. Резервируем высоту заранее, чтобы layout не менялся. */
.works-viewport {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
flex: 1;
/* резерв до запуска JS + он же задаёт крупный размер телефона */
min-height: clamp(380px, 55svh, 640px);
}
.carousel-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 4;
width: 46px; height: 46px;
display: grid; place-items: center;
border: 1px solid var(--ds-border);
border-radius: 999px;
background: color-mix(in srgb, var(--ds-bg-elevated) 86%, transparent);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: var(--ds-text);
cursor: pointer;
transition: opacity .18s, border-color .18s, color .18s;
}
.carousel-arrow:hover { border-color: var(--ds-border-strong); }
.carousel-prev { left: clamp(4px, 1.5vw, 18px); }
.carousel-next { right: clamp(4px, 1.5vw, 18px); }
/* ── Трек: горизонтальная лента слайдов со снапом ── */
.works-track {
flex: 1; min-width: 0;
display: flex;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.works-track::-webkit-scrollbar { display: none; }
/* Слайд = колонка по центру: подпись, телефон, строка под ним.
Внешней карточки больше нет — телефон стоит сам и забирает всю высоту. */
.works-slide {
flex: 0 0 100%;
min-width: 100%;
height: 100%;
scroll-snap-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 0 clamp(56px, 7vw, 96px);
}
@media (max-width: 720px) {
.works-slide { padding: 4px 8px; }
.carousel-arrow { width: 40px; height: 40px; }
.carousel-prev { left: -2px; }
.carousel-next { right: -2px; }
}
/* ══════════════════════════════════════════════════════════════════════════
КАК СОЗДАТЬ БОТА — cinematic-сборка (GSAP)
Собирается на глазах: узел 01 → печать запроса → корни к конструктору →
ПРОЦЕССИНГ (прогресс 0→100 идёт, пока прорастают корни к чипам) →
на 100% корни дотягиваются до узла 03 «бот готов».
Таймлайн и геометрию корней ведёт app.js через gsap.
══════════════════════════════════════════════════════════════════════════ */
.flow {
max-width: 1240px;
margin: 0 auto;
text-align: left;
}
/* ── Полоса прогресса ──
Метр в ЦЕНТРЕ ряда: слева и справа равные по ширине колонки (метка/процент),
поэтому сам индикатор ровно по середине блоков, а не смещён. */
.flow-progress {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
margin: 0 auto 30px;
}
.flow-progress-label {
flex: 1;
text-align: right;
font-size: 12px; font-weight: 500;
color: var(--ds-text-muted);
white-space: nowrap;
}
.flow-meter {
flex: 0 0 clamp(280px, 34%, 420px);
display: flex;
gap: 3px;
height: 12px;
}
.flow-meter i {
flex: 1;
border-radius: 2px;
background: color-mix(in srgb, var(--ds-text) 12%, transparent);
}
.flow-meter i.on {
background: var(--ds-accent-text);
box-shadow: 0 0 8px color-mix(in srgb, var(--ds-accent-text) 60%, transparent);
}
.flow-pct {
flex: 1;
text-align: left;
font-family: var(--ds-font-mono);
font-size: 12.5px; font-weight: 600;
color: var(--ds-accent-text);
}
/* ── Ряд этапов: три карточки равной высоты, широкие ── */
.flow-stage-row {
position: relative;
display: flex;
align-items: stretch;
gap: clamp(32px, 3.6vw, 64px);
}
/* Корни МЕЖДУ блоками — общий SVG-оверлей за карточками (рисует app.js) */
.flow-trunk {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: visible; pointer-events: none;
z-index: 0;
}
.flow-trunk path {
fill: none;
stroke: var(--ds-accent-text);
stroke-linecap: round;
}
/* Карточки поверх корней */
.flow-node, .flow-box { position: relative; z-index: 1; }
/* Крайние узлы — теперь широкие и равной высоты с конструктором */
.flow-node {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
border: 1px solid var(--ds-border);
border-radius: 16px;
background: var(--ds-surface);
}
.flow-node-out {
border-color: color-mix(in srgb, var(--ds-accent-text) 42%, var(--ds-border));
}
/* ── ЕДИНАЯ шапка всех трёх карточек: «01 · Заголовок» ──
Один формат везде: номер (моно, акцент) слева, заголовок рядом. Никаких иконок. */
.flow-head {
align-self: stretch;
display: flex;
align-items: baseline;
gap: 10px;
padding-bottom: 14px;
margin-bottom: 2px;
border-bottom: 1px solid var(--ds-border);
}
.flow-n {
flex: none;
font-family: var(--ds-font-mono);
font-size: 15px; font-weight: 700; letter-spacing: .04em;
color: var(--ds-accent-text);
}
.flow-title {
margin: 0;
font-size: 15px; font-weight: 600; letter-spacing: -.01em;
color: var(--ds-text);
}
.flow-node-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.flow-core strong { font-size: 15.5px; font-weight: 600; color: var(--ds-text); }
.flow-node small,
.flow-core small { font-size: 13px; line-height: 1.55; color: var(--ds-text-muted); }
/* Мок-поле запроса: печатается, может занять две строки */
.flow-mock {
padding: 11px 13px;
border: 1px solid var(--ds-border);
border-radius: 11px;
background: var(--ds-bg-elevated);
}
.flow-mock-input { min-height: 42px; display: flex; align-items: center; white-space: nowrap; }
.flow-typed {
font-family: var(--ds-font-mono);
font-size: 14px; line-height: 1.4;
color: var(--ds-text);
}
.flow-caret {
display: inline-block;
width: 2px; height: 14px;
margin-left: 1px;
vertical-align: -2px;
background: var(--ds-accent-text);
animation: flow-blink 1.1s steps(1, end) infinite;
}
@keyframes flow-blink { 50% { opacity: 0; } }
.flow-mock-status { display: flex; align-items: center; gap: 8px; color: var(--ds-text-muted); }
.flow-mock-status span:last-child { font-family: var(--ds-font-mono); font-size: 12.5px; }
.flow-dot {
flex: none;
width: 8px; height: 8px;
border-radius: 50%;
background: #66d18f;
box-shadow: 0 0 8px #66d18f;
}
/* ── Средний блок — конструктор ── */
.flow-box {
flex: 1.9 1 0; min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 22px;
border: 1px solid var(--ds-border);
border-radius: 18px;
background: color-mix(in srgb, var(--ds-bg-elevated) 60%, transparent);
}
/* корни «ядро → чип» рисует app.js */
.flow-wires {
position: absolute; left: 0; top: 0;
overflow: visible; pointer-events: none;
z-index: 0;
}
.flow-wires path {
fill: none;
stroke: var(--ds-accent-text);
stroke-width: 1.5;
opacity: .6;
stroke-linecap: round;
}
.flow-head, .flow-core, .flow-chips { position: relative; z-index: 1; }
/* Ядро — акцентный «мозг» схемы */
.flow-core {
width: min(74%, 340px);
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center;
padding: 18px 22px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--ds-accent-text) 46%, var(--ds-border));
background: color-mix(in srgb, var(--ds-accent) 16%, var(--ds-surface));
box-shadow: 0 0 0 color-mix(in srgb, var(--ds-accent-text) 22%, transparent); /* свечение пульсирует через GSAP */
}
.flow-core small { max-width: 230px; }
/* Чипы — один ровный ряд, поэтому «корни» ложатся симметрично.
margin-top: auto прижимает ряд к низу — корни получают максимум высоты. */
.flow-chips {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: auto;
padding-top: 34px;
}
.flow-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 8px;
border: 1px solid var(--ds-border);
border-radius: 8px;
background: var(--ds-surface);
font-size: 11px; font-weight: 500; color: var(--ds-text);
white-space: nowrap;
}
.flow-chip svg { flex: none; width: 13px; height: 13px; color: var(--ds-accent-text); }
@media (prefers-reduced-motion: reduce) {
.flow-caret { animation: none; }
}
/* ── Узкие экраны: столбик; горизонтальный ряд чипов помещается только на
широких десктопах, поэтому ниже 1200px разворачиваем схему в столбик. ── */
@media (max-width: 1200px) {
.flow-stage-row { flex-direction: column; align-items: stretch; gap: 18px; }
.flow-node, .flow-box { flex: none; }
.flow-trunk { display: none; }
.flow-chips { flex-wrap: wrap; margin-top: 26px; padding-top: 0; }
}
/* Призыв под шагами — завершение инструкции, а не отдельная секция */
.steps-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 32px;
}
.steps-cta p {
font-size: 14px;
color: var(--ds-text-muted);
}
/* ══════════════════════════════════════════════════════════════════════════
FAQ — раскрывающиеся вопросы
══════════════════════════════════════════════════════════════════════════ */
/* Две колонки на всю ширину. Внутри — тематические группы, чтобы человек
находил свой вопрос по теме, а не читал сплошной список. */
.faq {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 56px;
align-items: start;
width: 100%;
text-align: left;
}
.faq-col { display: flex; flex-direction: column; gap: 34px; }
.faq-group-title {
margin-bottom: 2px;
font-family: var(--ds-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ds-accent-text);
}
.faq-item { border-bottom: 1px solid var(--ds-border); }
/* линия сверху — только у первого вопроса группы */
.faq-group .faq-item:first-of-type { border-top: 1px solid var(--ds-border); }
@media (max-width: 860px) {
.faq { grid-template-columns: 1fr; row-gap: 34px; }
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 4px;
font-size: 15px;
font-weight: 500;
color: var(--ds-text);
cursor: pointer;
list-style: none; /* убираем стандартный треугольник */
transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ds-accent-text); }
/* свой знак «+», который на раскрытии поворачивается в «×» */
.faq-item summary::after {
content: "";
flex: none;
width: 11px; height: 11px;
background:
linear-gradient(var(--ds-text-muted), var(--ds-text-muted)) center/100% 1.5px no-repeat,
linear-gradient(var(--ds-text-muted), var(--ds-text-muted)) center/1.5px 100% no-repeat;
transition: transform .22s var(--ds-ease), background .15s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--ds-text); }
/* пока ответ сворачивается, атрибут open ещё висит — знак должен повернуться
обратно сразу, а не дожидаться конца анимации */
.faq-item.is-closing summary::after { transform: none; }
/* Обёртку вокруг ответа создаёт app.js — по ней и едет высота.
Без JS её нет, и работает как обычно. */
.faq-body { overflow: hidden; }
.faq-item p {
padding: 0 4px 18px;
font-size: 14px;
line-height: 1.65;
color: var(--ds-text-muted);
}
.faq-item p + p { padding-top: 0; margin-top: -6px; }
/* Хвост FAQ — одна строка со ссылкой, а не отдельная секция с кнопкой */
.faq-tail {
margin: 30px auto 0;
text-align: center;
font-size: 14px;
color: var(--ds-text-faint);
}
.faq-tail a {
color: var(--ds-accent-text);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--ds-accent-text) 35%, transparent);
transition: border-color .15s;
}
.faq-tail a:hover { border-bottom-color: var(--ds-accent-text); }
/* ══════════════════════════════════════════════════════════════════════════
ТАРИФЫ
══════════════════════════════════════════════════════════════════════════ */
/* ── ПРАЙС = ОДНА КАРТОЧКА ──
Три тарифа — это один прайс, а не три независимых объекта. Поэтому корпус
один (фон, рамка, одна бегущая линия по общему контуру), а тарифы внутри
разделены линиями. Три отдельные рамки, бегущие вразнобой, читались как три
несвязанные карточки. */
/* Корпус — те же параметры, что у карточки чата и портфолио:
bg-elevated с прозрачностью 80%, рамка белая 8%, радиус 16. */
.plan-panel {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
background: color-mix(in srgb, var(--ds-bg-elevated) 80%, transparent);
border: 1px solid var(--ds-border);
border-radius: 16px;
overflow: hidden;
transition: border-color .15s;
}
.plan-panel:hover { border-color: var(--ds-border-strong); }
/* Колонка — flex-столбец, а не grid с общим gap: так кнопку можно прижать
к низу (margin-top:auto), и во всех трёх колонках она встаёт на одну линию,
даже если списки разной длины. */
.plan-col {
position: relative;
display: flex;
flex-direction: column;
padding: 30px 26px;
transition: background .15s;
}
/* разделители между тарифами — те же волосяные линии, что и рамка */
.plan-col + .plan-col { border-left: 1px solid var(--ds-border); }
/* колонка под курсором чуть подсвечивается — вместо подъёма всей карточки */
.plan-col:hover { background: rgba(255, 255, 255, .03); }
/* ── ВЫДЕЛЕНИЕ ПОПУЛЯРНОГО ТАРИФА — СВЕТОМ, А НЕ ЗАЛИВКОЙ ──
Сплошная подложка превращала колонку в отдельную плашку и рвала панель.
Вместо неё: тонкая акцентная нить по верхней кромке и мягкое свечение,
стекающее от неё вниз и растворяющееся. Колонка остаётся частью карточки,
но явно «подсвечена». */
.plan-col.is-hot::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
120% 62% at 50% 0%,
color-mix(in srgb, var(--ds-accent) 55%, transparent),
transparent 62%
);
opacity: .55;
transition: opacity .18s;
}
/* акцентная нить по верхней кромке — источник этого света */
.plan-col.is-hot::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1.5px;
pointer-events: none;
background: linear-gradient(
90deg,
transparent,
var(--ds-accent-text),
transparent
);
}
.plan-col.is-hot:hover::before { opacity: .8; }
.plan-col.is-hot:hover { background: transparent; }
/* содержимое — поверх свечения */
.plan-col > * { position: relative; z-index: 1; }
/* Заголовок тарифа и плашка — один ряд.
Раньше плашка висела абсолютом в углу: ни с чем не выровнена, налезала на
акцентную нить по верхней кромке. Теперь она в потоке, на одной линии
с названием, и во всех трёх колонках заголовки стоят на одной высоте. */
.plan-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 26px; /* ряд одной высоты, даже там где плашки нет */
}
.plan-badge {
flex: none;
padding: 5px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--ds-accent) 35%, transparent);
border: 1px solid color-mix(in srgb, var(--ds-accent-text) 35%, transparent);
color: var(--ds-accent-text);
font-family: var(--ds-font-mono);
font-size: 10px; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap;
}
/* ── ИЕРАРХИЯ ПРАЙСА ──
Имя тарифа — крупное и первое. Раньше оно было 16px против цены в 30px,
и тариф читался как подпись к числу, а не как товар. */
.plan-col h3 {
font-size: 20px;
font-weight: 600;
letter-spacing: -.02em;
color: var(--ds-text);
}
/* строка «для кого» — сразу под именем */
.plan-desc {
margin-top: 6px;
font-size: 13px;
line-height: 1.5;
color: var(--ds-text-muted);
}
/* цена — крупная, но НЕ крупнее имени по значимости: имя выше в порядке чтения */
.plan-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--ds-border); /* разделитель перед списком */
}
.plan-price b {
font-size: 38px;
font-weight: 700;
letter-spacing: -.035em;
line-height: 1;
color: var(--ds-text);
}
.plan-price span {
font-size: 12px;
color: var(--ds-text-faint);
}
.plan-col ul {
list-style: none;
display: grid;
gap: 11px;
margin: 22px 0 0;
padding: 0;
}
.plan-col li {
position: relative;
padding-left: 22px;
font-size: 13px;
line-height: 1.5;
color: var(--ds-text-muted);
}
.plan-col li::before {
content: "";
position: absolute; left: 0; top: 6px;
width: 11px; height: 6px;
border-left: 1.6px solid var(--ds-accent-text);
border-bottom: 1.6px solid var(--ds-accent-text);
transform: rotate(-45deg);
}
/* Список забирает остаток высоты, кнопка прижимается к низу — поэтому
во всех трёх колонках кнопки стоят на одной линии, даже если пунктов
разное количество. */
.plan-col ul { margin-bottom: auto; }
.plan-col .agents-btn {
width: 100%;
justify-content: center;
margin-top: 28px;
}
/* ══════════════════════════════════════════════════════════════════════════
ПОДВАЛ
══════════════════════════════════════════════════════════════════════════ */
/* Финальный призыв — это три строки и кнопка, ему не нужен полный отступ
большой секции. */
.services-final { padding: clamp(44px, 4.5vw, 64px) 0; }
.services-foot {
width: min(1240px, 100% - 48px);
margin-inline: auto;
padding: 24px 0 40px;
border-top: 1px solid var(--ds-border);
display: flex; flex-wrap: wrap;
align-items: center; justify-content: space-between;
gap: 14px;
font-size: 12px;
color: var(--ds-text-faint);
position: relative;
z-index: 1;
}
.services-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.services-foot a {
color: var(--ds-text-faint);
text-decoration: none;
transition: color var(--ds-dur) var(--ds-ease);
}
.services-foot a:hover { color: var(--ds-text); }
/* ══════════════════════════════════════════════════════════════════════════
ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
══════════════════════════════════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .6s var(--ds-ease), transform .6s var(--ds-ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* ══════════════════════════════════════════════════════════════════════════
АДАПТИВ
══════════════════════════════════════════════════════════════════════════ */
/* Невысокие окна. Цель — карточка целиком на первом экране.
Учитываем, что у .agents-page уже есть свой отступ 64px под фиксированную
шапку: он складывается с отступом героя.
Выравниваем по верху, а не по центру: левая колонка ниже карточки, и
центрирование утапливало её под сгиб. */
@media (min-width: 1081px) and (max-height: 900px) {
/* по центру, а не по верху: содержимое теперь помещается, и центрирование
не оставляет пустой полосы */
.services-hero { padding: 32px 0 48px; align-items: center; }
#chatLines { height: 495px; gap: 7px; }
.services-demo-line.is-me,
.services-demo-line.is-bot { font-size: 12.5px; padding: 8px 11px; }
.chat-preview { gap: 7px; padding: 9px; }
.chat-preview-btn { height: 30px; }
}
/* Совсем низкие (1366×768 и подобные) — жмём сильнее */
@media (min-width: 1081px) and (max-height: 810px) {
.services-hero { padding: 24px 0 40px; }
.services-hero h1 { font-size: clamp(28px, 2.9vw, 42px); margin-bottom: 14px; }
.services-lead { font-size: 14px; margin-bottom: 22px; }
#chatLines { height: 440px; gap: 6px; }
.services-demo-line.is-me,
.services-demo-line.is-bot { font-size: 12px; padding: 7px 10px; line-height: 1.45; }
.services-demo-case { padding: 14px 14px 10px; }
.chat-preview-chips span { padding: 3px 7px; }
.services-demo-footnote { display: none; }
}
@media (max-width: 1080px) {
.services-hero {
grid-template-columns: 1fr;
padding-top: 104px;
}
.services-demo { max-width: 620px; }
#chatLines { height: 480px; }
}
@media (max-width: 860px) {
.agents-tabs { display: none; }
.plan-panel { grid-template-columns: 1fr; }
/* столбиком разделители становятся горизонтальными */
.plan-col + .plan-col { border-left: 0; border-top: 1px solid var(--ds-border); }
.services-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
.services-hero,
.agents-section.services-section,
.services-foot { width: min(1240px, 100% - 32px); }
#chatLines { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.services-demo-line.is-typing i,
.chat-caret { animation: none; }
}