/* ============================================================
   Лендинг /crm — CRM и сквозная аналитика. Дизайн-система l2-* (styles.css + landing2.css).
   Здесь только специфика CRM-страницы.
   ============================================================ */

/* ---------- HERO ---------- */
.crm-hero{ position:relative; overflow:hidden; color:#fff; text-align:center;
  padding:152px 0 96px; background:linear-gradient(120deg,#0d3a8f 0%,#0e62d7 55%,#1c71e6 100%); }
.crm-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1200px 460px at 82% -10%, rgba(255,255,255,.14), transparent 60%); }
/* Фон hero только для /support — картинка под фирменным синим затемнением (текст остаётся читаемым) */
.crm-hero--support{ background:
    linear-gradient(120deg, rgba(11,42,99,.84) 0%, rgba(14,98,215,.70) 55%, rgba(28,113,230,.68) 100%),
    url(/images/bg/hero1.png) center/cover no-repeat; }
.crm-hero__in{ position:relative; z-index:2; max-width:860px; }
.crm-hero .l2-slide__text{ margin-left:auto; margin-right:auto; }
.crm-badges{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px; margin:28px 0 0; padding:0; }
.crm-badge{ display:inline-flex; align-items:center; gap:8px; color:#dfeaff; font-weight:500; font-size:15px; }
.crm-badge .ic{ width:16px; height:16px; color:#ffd27a; }

/* ---------- Скриншот-дашборд (перекрывает низ hero) ---------- */
.crm-shotband{ background:#f4f8ff; padding:0 0 60px; }
.crm-shot{ margin:-72px auto 0; max-width:1060px; border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:0 44px 84px -34px rgba(15,27,51,.55); position:relative; z-index:3; }
.crm-shot img{ display:block; width:100%; }
.crm-shot__cap{ text-align:center; color:var(--muted); font-size:14px; margin:16px auto 0; max-width:760px; }

/* ---------- Карточки (боли / возможности / разделы) ---------- */
.crm-grid{ display:grid; gap:22px; }
.crm-grid--3{ grid-template-columns:repeat(3,1fr); }
.crm-grid--5{ grid-template-columns:repeat(5,1fr); }
.crm-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px;
  box-shadow:0 16px 34px -28px rgba(15,27,51,.4); }
.crm-card__ic{ display:grid; place-items:center; width:54px; height:54px; border-radius:14px;
  background:#eaf1ff; margin-bottom:14px; }
.crm-card__ic .ic{ width:26px; height:26px; color:var(--blue); }
.crm-card__title{ font-size:18px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.crm-card__text{ color:var(--muted); margin:0; font-size:15px; line-height:1.5; }
.crm-card--pain .crm-card__ic{ background:#fff2e8; }
.crm-card--pain .crm-card__ic .ic{ color:#f2670a; }
.crm-card--list .crm-card__title{ margin-bottom:14px; }
.crm-note{ text-align:center; margin:34px auto 0; max-width:760px; font-size:19px; color:var(--ink); }

/* ---------- Список-галочки ---------- */
.crm-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.crm-check li{ position:relative; padding-left:28px; color:var(--ink); font-size:15px; line-height:1.45; }
.crm-check li::before{ content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%;
  background:#1cb257; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.crm-check--lg li{ font-size:16px; padding-left:30px; }
.crm-check--lg li::before{ width:22px; height:22px; top:0; }

/* ---------- Скриншот-шоукейс (текст + экран) ---------- */
.crm-show{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:32px; }
.crm-show + .crm-show{ margin-top:48px; }
.crm-show--rev .crm-show__media{ order:2; }
.crm-show__media{ border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:0 26px 54px -30px rgba(15,27,51,.5); }
.crm-show__media img{ display:block; width:100%; }
.crm-show__title{ font-size:24px; font-weight:700; color:var(--ink); margin:0 0 10px; }
.crm-show__text{ color:var(--muted); font-size:16px; line-height:1.55; margin:0 0 16px; }

/* ---------- Кому подходит ---------- */
.crm-aud{ display:grid; grid-template-columns:1.15fr 1fr; gap:38px; align-items:start; }
/* Вариант с двумя равными списками (напр. «Что берём на себя»): центрируем пару под заголовком */
.crm-aud--even{ grid-template-columns:1fr 1fr; gap:64px; max-width:900px; margin-inline:auto; }
/* Вариант с тремя колонками (контент / разработка / техзадачи) */
.crm-aud--3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px 46px; max-width:1080px; margin-inline:auto; }
.l2-scope-note{ max-width:780px; margin:28px auto 0; text-align:center; font-size:15px; line-height:1.55; color:var(--muted,#6b7a90); }
.crm-aud__h{ font-size:18px; font-weight:700; color:var(--ink); margin:0 0 16px; }
.crm-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.crm-chips li{ background:#eaf1ff; color:#0e62d7; font-weight:600; font-size:14px; padding:9px 14px; border-radius:999px; }

/* ---------- Таблица сравнения ---------- */
.crm-table-wrap{ overflow-x:auto; border-radius:16px; border:1px solid var(--line);
  box-shadow:0 16px 34px -28px rgba(15,27,51,.4); }
.crm-table{ width:100%; border-collapse:collapse; background:#fff; min-width:660px; }
.crm-table th, .crm-table td{ padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); }
.crm-table thead th{ font-size:14px; color:var(--muted); font-weight:700; background:#f7faff; }
.crm-table__row{ text-align:left; font-weight:600; color:var(--ink); }
.crm-table th.crm-table__us{ color:#0e62d7; }
.crm-table td.crm-table__us, .crm-table th.crm-table__us{ background:#eaf1ff; }
.crm-table tbody tr:last-child td{ border-bottom:0; }
.crm-yes .ic{ width:19px; height:19px; color:#1cb257; }
.crm-no{ color:#c2ccdb; font-weight:700; }
.crm-part{ color:#e0912a; font-weight:600; font-size:13px; }

/* ---------- Цена ---------- */
.crm-price{ max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:34px 32px; text-align:center; box-shadow:0 30px 60px -34px rgba(14,98,215,.5); }
.crm-price__badge{ display:inline-block; background:linear-gradient(90deg,#1cb257,#0f8a3f); color:#fff;
  font-weight:700; font-size:13px; padding:7px 16px; border-radius:999px; margin-bottom:16px; }
.crm-price__name{ font-size:20px; font-weight:700; color:var(--ink); }
.crm-price__amount{ margin:8px 0 2px; }
.crm-price__now{ font-size:46px; font-weight:700; color:var(--ink); }
.crm-price__per{ font-size:18px; color:var(--muted); margin-left:6px; }
.crm-price__sub{ color:var(--muted); font-size:14px; margin:0 0 22px; }
.crm-price .crm-check{ text-align:left; max-width:370px; margin:0 auto 24px; }

/* ---------- Пример сценария ---------- */
.crm-scenario{ max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:30px 34px; box-shadow:0 16px 34px -28px rgba(15,27,51,.4); }
.crm-scenario blockquote{ margin:0; font-size:19px; line-height:1.55; color:var(--ink); }
.crm-scenario figcaption{ margin-top:14px; color:var(--muted); font-weight:600; font-size:14px; }

/* ---------- Финальный CTA ---------- */
.crm-cta{ position:relative; overflow:hidden; color:#fff; text-align:center; padding:74px 0;
  background:linear-gradient(120deg,#0d3a8f,#0e62d7 60%,#1c71e6); }
.crm-cta::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 380px at 80% -20%, rgba(255,255,255,.14), transparent 60%); }
.crm-cta__in{ position:relative; z-index:2; max-width:760px; }
.crm-cta__title{ font-size:34px; font-weight:700; margin:0 0 14px; }
.crm-cta__text{ font-size:18px; color:#e4edff; margin:0 0 26px; }
.crm-cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.crm-cta__fine{ margin-top:20px; color:#bcd0f5; font-size:14px; }

/* ---------- Адаптив ---------- */
@media (max-width:1050px){
  .crm-grid--5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .crm-show, .crm-aud{ grid-template-columns:1fr; gap:24px; }
  .crm-show--rev .crm-show__media{ order:0; }
}
@media (max-width:640px){
  .crm-grid--5, .crm-grid--3{ grid-template-columns:1fr; }
  .crm-hero{ padding:124px 0 60px; }
  .crm-shot{ margin-top:-44px; border-radius:12px; }
  .crm-cta__title{ font-size:26px; }
  .crm-scenario, .crm-price{ padding:24px 20px; }
}

/* Блок «Как это работает»: три шага — по центру (базовая сетка на 4 колонки) */
.crm .l2-steps{ max-width:1020px; margin-left:auto; margin-right:auto; }
@media (min-width:901px){ .crm .l2-steps{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ---------- «Что вы получаете»: 2 карточки в ряд ---------- */
.crm-grid--2{ grid-template-columns:repeat(2,1fr); }

/* ---------- Карточка лида: текст на всю ширину + два скрина ---------- */
.crm-lead{ margin-top:40px; }
.crm-lead__text{ max-width:none; }
.crm-lead__check{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 24px; margin-bottom:24px; }
.crm-lead__imgs{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }

/* ---------- Отзывы (карточки .review из styles.css) ---------- */
.crm-reviews .review{ height:100%; }
/* Строка о шифровании доступов (под шагами «Как работаем») */
.l2-secnote{ display:flex; align-items:center; gap:12px; max-width:760px; margin:30px auto 0; padding:14px 20px;
  border:1px solid #bce9cf; background:#f1fbf5; border-radius:14px; color:var(--ink); font-size:14px; line-height:1.45; }
.l2-secnote__ic{ flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:9px;
  background:linear-gradient(135deg,#21b26a,#15935a); box-shadow:0 8px 18px -10px rgba(16,122,64,.6); }
.l2-secnote__ic .ic{ width:18px; height:18px; color:#fff; }
@media (max-width:520px){ .l2-secnote{ flex-direction:column; text-align:center; } }
/* На мобильном — горизонтальный слайдер со свайпом вместо длинной колонки */
@media (max-width:900px){
  .crm-reviews{
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px; padding-bottom:14px;
    scrollbar-width:none;
  }
  .crm-reviews::-webkit-scrollbar{ display:none; }
  .crm-reviews > .review{ flex:0 0 87%; scroll-snap-align:center; height:auto; }
}

/* ---------- Зум скриншотов по клику (lightbox) ---------- */
.crm-zoom{ cursor:zoom-in; }
.crm-lb{ position:fixed; inset:0; z-index:1200; background:rgba(8,17,40,.86);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.crm-lb[hidden]{ display:none; }
.crm-lb__img{ max-width:min(1200px,96vw); max-height:92vh; border-radius:12px; background:#fff;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.crm-lb__close{ position:absolute; top:16px; right:22px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.crm-lb__close:hover{ background:rgba(255,255,255,.28); }

@media (max-width:900px){ .crm-grid--2{ grid-template-columns:1fr; } }
@media (max-width:700px){ .crm-lead__check, .crm-lead__imgs{ grid-template-columns:1fr; } }