/* ==========================================================================
   SITE DESIGN SYSTEM  —  единая база токенов и атомарных компонентов.
   Не зависит от Elementor. Подключается ОДИН раз на весь сайт.
   Блоки (Lazy Blocks) используют классы .lm-* и var(--*) отсюда,
   а в своём Custom CSS дописывают только раскладку.
   ========================================================================== */

/* ---------- 1. ТОКЕНЫ ---------- */
:root {
  /* бренд и состояния */
  --brand:        #065888;   /* основной синий  (был a385578) */
  --brand-dark:   #044a73;   /* hover/active для синего       */
  --brand-border: #B9D3E3;   /* обводка синей кнопки          */
  --on-brand:     #FCFCFC;   /* текст/иконка на синем фоне    */

  /* смыслы */
  --info:    #6EC1E4;        /* светло-голубой  (primary)     */
  --success: #61CE70;        /* зелёный         (accent)      */
  --danger:  #F90936;        /* красный         (f7946a5)     */

  /* текст */
  --ink:       #323232;      /* заголовки/основной (9c3e146)  */
  --ink-soft:  #54595F;      /* вторичный тёмный  (secondary) */
  --muted:     #7A7A7A;      /* подписи/вторичный (text)      */

  /* поверхности */
  --surface:    #F2F4F6;     /* de5568c */
  --surface-2:  #F8F8FB;     /* 1b89cfc */
  --card-1:     #F3F9FF;     /* cc35773 — начало градиента карточки */
  --card-2:     #D8E9F3;     /* f583c2d/425edeb — конец градиента   */

  /* красный бренд / CTA-акцент (был --e-global-color-f7946a5) */
  --red:      #F90936;
  --red-dark: #d8082f;   /* hover/active для красного */

  /* геометрия / типографика */
  --container-max: 1400px;
  --container-pad: 16px;
  --gap:           20px;
  --radius-btn:    16px;
  --radius-card:   0px;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semibold:600;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. МЯГКИЙ ГЛОБАЛЬНЫЙ RESET (безопасно, стандарт индустрии) ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- 3. КОНТЕЙНЕР СЕКЦИИ ---------- */
/* Оборачивает любой блок: ширина + центр + поля. В HTML уже есть class="lm-block". */
.lm-block {
  --_pad: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 70px 0px 70px 0px;
  color: var(--ink);
  /* шрифт НЕ форсим — наследуем от темы, чтобы при миграции сайт остался цельным.
     Если нужен свой стек — раскомментируйте: font-family: var(--font-sans); */
}

/* ---------- 4. КНОПКИ (атом) ----------
   Геометрия/типографика = ваш прежний .elementor-button (16 / 500 / uppercase /
   1.5px / radius 16 / padding 17x23 / border 2px). Варианты только красят. */
.lm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  padding: 17px 23px;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.lm-btn .lm-btn__arrow { flex: 0 0 auto; transition: transform .2s; }
.lm-btn:hover .lm-btn__arrow { transform: translateX(3px); }
.lm-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* синяя primary — броня от глобальных a / a:visited / a:active темы */
.lm-block a.lm-btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand-border);
}
/* каждое состояние отдельно, чтобы visited/hover не вернули цвет темы */
.lm-block a.lm-btn--primary:link,
.lm-block a.lm-btn--primary:visited,
.lm-block a.lm-btn--primary:hover,
.lm-block a.lm-btn--primary:focus,
.lm-block a.lm-btn--primary:focus-visible,
.lm-block a.lm-btn--primary:active {
  color: var(--on-brand);
}
.lm-block a.lm-btn--primary:hover,
.lm-block a.lm-btn--primary:focus-visible,
.lm-block a.lm-btn--primary:active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
/* вложенный текст/иконка тянут цвет кнопки (уже есть в базе — держим) */
.lm-block a.lm-btn--primary > span,
.lm-block a.lm-btn--primary .lm-btn__arrow {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}



/* белая — для фото-баннеров (тот же скелет, инверсия) */
.lm-btn--light {
  background: var(--on-brand);
  color: var(--brand);
  border-color: var(--brand);
}
.lm-btn--light:hover { background: #fff; color: var(--brand-dark); border-color: var(--brand-dark); }


/* красная CTA-кнопка (тот же скелет геометрии из .lm-btn) */
.lm-btn--red {
  background: var(--red);
  color: var(--on-brand);
  border-color: var(--red);          /* обводка в тон — на макете её не видно */
}
.lm-btn--red:hover,
.lm-btn--red:focus-visible,
.lm-btn--red:active,
.lm-btn--red:visited {
  background: var(--red-dark);
  color: var(--on-brand);
  border-color: var(--red-dark);
}


/* прозрачная с обводкой — универсальная «вторичная» */
.lm-btn--ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.lm-btn--ghost:hover { background: var(--brand); color: var(--on-brand); }

/* опасная / успешная — на будущее */
.lm-btn--danger  { background: var(--danger);  color: #fff; border-color: var(--danger); }
.lm-btn--danger:hover  { background: #d8082f;  border-color: #d8082f; }
.lm-btn--success { background: var(--success); color: var(--ink); border-color: var(--success); }
.lm-btn--success:hover { background: #4fb85d;  border-color: #4fb85d; }

/* ---------- 5. КАРТОЧКА-ФОН (атом) ---------- */
.lm-card {
  position: relative;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--card-1) 0%, var(--card-2) 100%);
  overflow: hidden;
  padding: 24px;
  color: var(--ink);
}

/* ---------- 6. АКЦЕНТ / ССЫЛКА (атом, ваш прежний .blue_linc) ---------- */
.lm-accent,
.lm-card a.lm-accent {
  color: var(--brand);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lm-accent:hover { color: var(--brand-dark); }

/* ---------- 7. ЗАГОЛОВКИ ВНУТРИ АТОМОВ (чтобы не дублировать в блоках) ---------- */
.lm-card__title {
  margin: 0 0 16px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: var(--fw-normal);
  line-height: 1.3;
  color: var(--ink);
}