/*
 * Лендинг flowcrm.kz (этап 24). Свой файл на токенах прототипа (tokens.css),
 * без зависимости от app.css — у лендинга другой ритм (крупные блоки,
 * анимированные сцены), общие компоненты (.card/.btn и т.д.) тут были бы
 * лишним грузом и совпадениями имён, которых лучше избежать.
 * Скриншотов нет нигде — только CSS-анимации (решение владельца).
 * prefers-reduced-motion уважается глобально в tokens.css (правило внизу
 * файла уже выключает все анимации/transition при этой настройке ОС).
 */

body { background: var(--surface); color: var(--ink); overflow-x: hidden; }
svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; font-weight: 800; }
p { margin: 0; }
.eyebrow { color: var(--accent-strong); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.section-title { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; }
.section-lead { max-width: 620px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.section-head--center { text-align: center; margin: 0 auto 48px; display: flex; flex-direction: column; align-items: center; }

.btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 14px; font-size: 15px; font-weight: 650; white-space: nowrap; border: 1px solid transparent; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); }
.btn-lg:hover { transform: translateY(-2px); }
.btn-primary-lg { color: #fff; background: var(--accent); box-shadow: 0 10px 24px rgba(87, 87, 201, .28); }
.btn-primary-lg:hover { background: var(--accent-strong); box-shadow: 0 14px 30px rgba(87, 87, 201, .34); }
.btn-outline-lg { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.btn-outline-lg:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn-whatsapp { color: #fff; background: #25a25a; box-shadow: 0 10px 24px rgba(37, 162, 90, .28); }
.btn-whatsapp:hover { background: #1f8c4d; }

/* ===== Шапка ===== */
.l-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.l-header__brand { font-size: 19px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.l-header__brand span { color: var(--accent); }
.l-header__nav { display: flex; align-items: center; gap: 28px; }
.l-header__links { display: flex; align-items: center; gap: 24px; }
.l-header__links a { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.l-header__links a:hover { color: var(--ink); }
.l-header__actions { display: flex; align-items: center; gap: 10px; }
.l-header__actions .btn-lg { min-height: 40px; padding: 0 18px; font-size: 13.5px; }
.l-header__burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); align-items: center; justify-content: center; }
.l-header__burger span, .l-header__burger span::before, .l-header__burger span::after { content: ''; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.l-header__burger span::before { position: absolute; top: -6px; }
.l-header__burger span::after { position: absolute; top: 6px; }
.l-mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.l-mobile-nav a { padding: 12px 4px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.l-mobile-nav .btn-lg { margin-top: 10px; }
body.l-menu-open .l-mobile-nav { display: flex; }
body.l-menu-open .l-header__burger span { transform: rotate(45deg); }
body.l-menu-open .l-header__burger span::before { transform: rotate(90deg); top: 0; }
body.l-menu-open .l-header__burger span::after { opacity: 0; }

/* ===== Hero ===== */
.l-hero { padding: 72px 0 40px; }
.l-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.l-hero__title { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; }
.l-hero__title .accent { color: var(--accent); }
.l-hero__subtitle { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 500px; }
.l-hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.l-hero__trust { margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); }

/* --- Мини-анимация чата в hero --- */
.chat-scene { position: relative; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); max-width: 400px; margin-left: auto; }
.chat-scene__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat-scene__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: 0 0 auto; }
.chat-scene__head strong { display: block; font-size: 13.5px; }
.chat-scene__head span { display: block; font-size: 11px; color: var(--success); }
.chat-scene__body { display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
.chat-msg { display: flex; }
.chat-msg--in { justify-content: flex-start; }
.chat-msg--out { justify-content: flex-end; }
.chat-msg__bubble { max-width: 78%; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(6px); }
.chat-msg--in .chat-msg__bubble { background: var(--surface-tint); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg--out .chat-msg__bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg__typing { display: inline-flex; gap: 3px; padding: 11px 13px; border-radius: 14px; background: var(--surface-tint); opacity: 0; }
.chat-msg--out .chat-msg__typing { margin-left: auto; background: var(--accent-soft); }
.chat-msg__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); animation: chat-dot 1s var(--ease) infinite; }
.chat-msg__typing i:nth-child(2) { animation-delay: .15s; }
.chat-msg__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.chat-msg--m1 .chat-msg__typing { animation: chat-typing-1 14s ease-in-out infinite; }
.chat-msg--m1 .chat-msg__bubble { animation: chat-bubble-1 14s ease-in-out infinite; }
.chat-msg--m2 .chat-msg__typing { animation: chat-typing-2 14s ease-in-out infinite; }
.chat-msg--m2 .chat-msg__bubble { animation: chat-bubble-2 14s ease-in-out infinite; }
.chat-msg--m3 .chat-msg__typing { animation: chat-typing-3 14s ease-in-out infinite; }
.chat-msg--m3 .chat-msg__bubble { animation: chat-bubble-3 14s ease-in-out infinite; }
.chat-msg--m4 .chat-msg__typing { animation: chat-typing-4 14s ease-in-out infinite; }
.chat-msg--m4 .chat-msg__bubble { animation: chat-bubble-4 14s ease-in-out infinite; }

@keyframes chat-typing-1 { 0%, 7%, 13%, 100% { opacity: 0; } 8%, 12% { opacity: 1; } }
@keyframes chat-bubble-1 { 0%, 13% { opacity: 0; transform: translateY(6px); } 14%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat-typing-2 { 0%, 26%, 31%, 100% { opacity: 0; } 27%, 30% { opacity: 1; } }
@keyframes chat-bubble-2 { 0%, 31% { opacity: 0; transform: translateY(6px); } 32%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat-typing-3 { 0%, 47%, 53%, 100% { opacity: 0; } 48%, 52% { opacity: 1; } }
@keyframes chat-bubble-3 { 0%, 53% { opacity: 0; transform: translateY(6px); } 54%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat-typing-4 { 0%, 69%, 74%, 100% { opacity: 0; } 70%, 73% { opacity: 1; } }
@keyframes chat-bubble-4 { 0%, 74% { opacity: 0; transform: translateY(6px); } 75%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ===== Появление блоков при прокрутке (см. landing.js — IntersectionObserver
   добавляет .is-visible, дальше всё делает CSS transition) ===== */
.l-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.l-reveal.is-visible { opacity: 1; transform: none; }

/* ===== Боли ===== */
.l-pains { background: var(--canvas); }
.l-pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.l-pain-card { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.l-pain-card__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); display: grid; place-items: center; margin-bottom: 16px; }
.l-pain-card__icon svg { width: 21px; height: 21px; }
.l-pain-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.l-pain-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ===== Как работает: три сцены ===== */
.l-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.l-scene-card { display: flex; flex-direction: column; gap: 18px; }
.l-scene-card h3 { font-size: 16px; font-weight: 700; }
.l-scene-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.scene-frame { border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); padding: 18px; min-height: 260px; overflow: hidden; }

/* --- Сцена: Kanban --- */
/* .kanban-scene (тот же элемент, что и .scene-frame) — контейнер для
   абсолютно позиционированной карточки: она НЕ лежит внутри одной из трёх
   колонок (там при переезде в соседнюю колонку слегка наезжала на её
   собственный трек — ширина/позиция карточки и трека вычислялись раздельно
   и на мобильной ширине расходились на пару пикселей), а сама передвигается
   поверх всех трёх колонок сразу по ширине, вычисленной той же формулой. */
.kanban-scene { position: relative; }
.kanban-scene__cols { display: flex; gap: 10px; }
.kanban-scene__col { flex: 1; min-width: 0; }
.kanban-scene__col-title { font-size: 9px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-scene__track { height: 150px; border-radius: 10px; background: var(--surface-tint); }
.kanban-scene__card { position: absolute; top: 27px; left: 0; width: calc((100% - 20px) / 3); padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); opacity: 0; animation: kanban-appear 12s ease-in-out infinite; }
.kanban-scene__card-name { font-size: 11.5px; font-weight: 700; opacity: 0; animation: kanban-field 12s ease-in-out infinite; }
.kanban-scene__card-interest { margin-top: 4px; font-size: 10px; color: var(--ink-soft); opacity: 0; animation: kanban-field-2 12s ease-in-out infinite; }
.kanban-scene__card-temp { display: inline-block; margin-top: 6px; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--warning-soft); color: var(--warning); opacity: 0; animation: kanban-field-3 12s ease-in-out infinite; }

@keyframes kanban-appear {
    0%, 3% { opacity: 0; transform: translateX(0) scale(.92); }
    4%, 37% { opacity: 1; transform: translateX(0) scale(1); }
    46%, 66% { opacity: 1; transform: translateX(calc(100% + 10px)) scale(1); }
    75%, 96% { opacity: 1; transform: translateX(calc(200% + 20px)) scale(1); }
    100% { opacity: 0; transform: translateX(calc(200% + 20px)) scale(.92); }
}
@keyframes kanban-field { 0%, 4% { opacity: 0; } 6%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kanban-field-2 { 0%, 8% { opacity: 0; } 10%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kanban-field-3 { 0%, 12% { opacity: 0; } 14%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* --- Сцена: Календарь --- */
.cal-scene__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal-scene__day { font-size: 9.5px; color: var(--ink-faint); text-align: center; margin-bottom: 6px; }
.cal-scene__slot { height: 26px; border-radius: 6px; background: var(--surface-tint); margin-bottom: 6px; position: relative; }
.cal-scene__slot--target { animation: cal-highlight 12s ease-in-out infinite; }
@keyframes cal-highlight {
    0%, 16% { background: var(--surface-tint); }
    20%, 96% { background: var(--accent-soft); }
    100% { background: var(--surface-tint); }
}
.cal-scene__appt { position: absolute; inset: -1px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 8.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; opacity: 0; animation: cal-appt 12s ease-in-out infinite; }
@keyframes cal-appt {
    0%, 33% { opacity: 0; transform: scale(.85); }
    38%, 96% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.85); }
}
.cal-scene__badge { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--success); font-weight: 650; opacity: 0; animation: cal-badge 12s ease-in-out infinite; }
@keyframes cal-badge { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* ===== Для кого ===== */
.l-chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.l-chip { padding: 10px 18px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: var(--surface); }

/* ===== Каналы ===== */
.l-channels { background: var(--canvas); }
.l-channel-row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.l-channel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.l-channel__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.l-channel__icon svg { width: 28px; height: 28px; }
.l-channel span { font-size: 13px; font-weight: 650; }

/* ===== Метрики руководителя ===== */
.l-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.l-metric-card { text-align: center; padding: 28px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.l-metric-card__value { font-size: 38px; font-weight: 800; letter-spacing: -.04em; color: var(--accent-strong); }
.l-metric-card__label { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* ===== Как начать ===== */
.l-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.l-step { position: relative; padding: 26px 20px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.l-step::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; left: 20px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(87,87,201,.3); }
.l-step h3 { font-size: 14.5px; font-weight: 700; margin: 8px 0 6px; }
.l-step p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* ===== Тариф ===== */
.l-pricing { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-strong) 100%); color: #fff; border-radius: 28px; margin: 0 24px; padding: 56px 40px; text-align: center; }
.l-pricing .section-title { color: #fff; }
.l-pricing p { color: rgba(255,255,255,.86); font-size: 15.5px; max-width: 520px; margin: 14px auto 0; line-height: 1.6; }
.l-pricing .l-hero__cta { justify-content: center; margin-top: 26px; }
.l-pricing .btn-outline-lg { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.l-pricing .btn-outline-lg:hover { border-color: #fff; }

/* ===== FAQ ===== */
.l-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.l-faq-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.l-faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-size: 14.5px; font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.l-faq-item summary::-webkit-details-marker { display: none; }
.l-faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--ink-faint); transition: transform .2s var(--ease); flex: 0 0 auto; }
.l-faq-item[open] summary::after { transform: rotate(45deg); }
.l-faq-item__body { padding: 0 22px 20px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* ===== Контакты ===== */
.l-contact { text-align: center; background: var(--canvas); }
.l-contact .btn-lg { margin-top: 22px; }

/* ===== Подвал ===== */
.l-footer { padding: 32px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-faint); }
.l-footer__links { display: flex; gap: 18px; }
.l-footer__links a { color: var(--ink-faint); }
.l-footer__links a:hover { color: var(--ink); }

@media (max-width: 900px) {
    .l-header__nav { display: none; }
    .l-header__burger { display: flex; }
    .l-hero__grid { grid-template-columns: 1fr; gap: 36px; }
    .chat-scene { max-width: 100%; margin: 0; }
    section { padding: 56px 0; }
    .l-pain-grid { grid-template-columns: 1fr 1fr; }
    .l-scenes { grid-template-columns: 1fr; }
    .l-metrics-grid { grid-template-columns: 1fr 1fr; }
    .l-steps { grid-template-columns: 1fr 1fr; }
    .l-pricing { margin: 0 16px; padding: 40px 22px; border-radius: 22px; }
    .l-footer { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
    .container { padding: 0 18px; }
    .l-pain-grid { grid-template-columns: 1fr; }
    .l-metrics-grid { grid-template-columns: 1fr 1fr; }
    .l-steps { grid-template-columns: 1fr; }
    .l-channel-row { gap: 26px; }
}