/* Start:/bitrix/templates/webcat.digital/template_styles.css?1787905146222520*/
/* ==========================================================================
   webcat.pro — главная страница
   Чистый CSS. Порядок: переменные → база → утилиты → компоненты →
   секции → модалка → адаптив → анимации.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
:root {
  /* Светлая часть */
  --c-bg:        #f7f9fc;
  --c-surface:   #ffffff;
  --c-tint:      #eef3fb;
  --c-text:      #0d1424;
  --c-text-2:    #55617a;
  --c-text-3:    #4E536A;
  --c-border:    #e2e8f2;
  --c-border-2:  #cdd7e6;

  /* Тёмная часть */
  --c-ink:       #070b16;
  --c-ink-2:     #0d1424;
  --c-ink-3:     #121a2e;
  --c-ink-line:  #1e2842;
  --c-ink-text:  #97a3ba;
  --c-ink-head:  #f1f5fb;

  /* Акцент */
  --c-accent:      #2563eb;
  --c-accent-hi:   #4f8cff;
  --c-accent-dark: #1d4ed8;
  --c-accent-soft: #e7effe;
  --c-accent-tint: rgba(37, 99, 235, .12);

  /* Служебные */
  --c-ok:  #22a45d;
  --c-err: #dc4b4b;
  --c-red: #e02e2e;

  /* Бренды карточек каталога */
  --c-b2b: #2563eb;
  --c-1c:  #22a45d;
  --c-crm: #6d4aff;
  --c-seo: #f5922c;

  /* Типографика */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Радиусы */
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-pill: 100px;

  /* Сетка */
  --page-max: 1680px;
  --gutter: 52px;
  --section-y: 88px;

  /* Анимация */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .22s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }

/* Атрибут hidden живёт в UA-стилях и проигрывает любому author-правилу.
   Без этой строки [hidden] у .modal и .mobile-menu (display:flex) не работает. */
[hidden] { display: none !important; }

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-accent-dark); }

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: #cfe0ff; color: var(--c-text); }

:focus-visible {
  outline: 2px solid var(--c-accent-hi);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Каркас
   -------------------------------------------------------------------------- */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--c-bg);
}

.section { padding: var(--section-y) var(--gutter); }
.section--tint       { background: var(--c-tint); }
.section--surface    { background: var(--c-surface); }
.section--tight      { padding-top: 64px; padding-bottom: 64px; }
.section--flush-top  { padding-top: 0; }

/* --------------------------------------------------------------------------
   4. Типографика
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}

.h2 {
  font-size: clamp(26px, 3.1vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
}

.h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }

.lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-2);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 40px;
}
.section__head .lead { max-width: 400px; }

/* Сетки */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Пять карточек: 3 сверху + 2 по центру снизу.
   Базовая сетка из 6 колонок, карточка занимает 2 — так вторая строка
   выравнивается по центру без пустой ячейки-сироты. */
.grid--5 {
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.grid--5 > * { grid-column: span 2; }
.grid--5 > *:nth-child(4) { grid-column: 2 / span 2; }
.grid--5 > *:nth-child(5) { grid-column: 4 / span 2; }

/* --------------------------------------------------------------------------
   5. Кнопки
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn img { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(37, 99, 235, .8);
}
.btn--primary:hover { background: var(--c-accent-dark); color: #fff; }

.btn--outline-dark {
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  background: rgba(255, 255, 255, .03);
}
.btn--outline-dark:hover {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.btn--outline {
  border-color: var(--c-border-2);
  color: var(--c-text);
  background: var(--c-surface);
}
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent); }

.btn--light { background: #fff; color: var(--c-ink-2); }
.btn--light:hover { background: #eef2f9; color: var(--c-ink-2); }

.btn--sm    { padding: 11px 20px; font-size: 14px; }
.btn--block { width: 100%; padding: 15px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
}
.link-arrow img {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover img { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Карточки и мелкие элементы
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card--hover:hover {
  border-color: #c4d5f5;
  box-shadow: 0 18px 40px -22px rgba(13, 20, 36, .28);
  transform: translateY(-3px);
}

.icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box img { width: 23px; height: 23px; }

.badge-sq {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
  color: #fff;
  flex-shrink: 0;
}
.badge-sq--b2b { background: var(--c-b2b); }
.badge-sq--1c  { background: var(--c-1c); }
.badge-sq--crm { background: var(--c-crm); font-size: 12.5px; }
.badge-sq--seo { background: var(--c-seo); }

.media {
  position: relative;
  background: var(--c-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media img.media__img { width: 100%; height: 100%; object-fit: cover; }
.media__ph { width: 42px; height: 32px; opacity: .75; }

/* --------------------------------------------------------------------------
   7. Шапка
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: var(--admin-offset, 0px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 16px var(--gutter);
  background: rgba(7, 11, 22, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.header.is-stuck {
  background: rgba(7, 11, 22, .94);
  border-bottom-color: var(--c-ink-line);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.03em;
  color: #fff;
}
.logo:hover { color: #fff; }
.logo img { width: 32px; height: 32px; }
.logo i { font-style: normal; color: var(--c-accent-hi); }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-right: auto;
  font-size: 15px;
}
.nav a {
  color: #b6c1d4;
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--c-accent-hi);
  transition: right var(--dur) var(--ease);
}
.nav a:hover,
.nav a.is-active { color: #fff; }
.nav a:hover::after,
.nav a.is-active::after { right: 0; }

.header__cta { flex-shrink: 0; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-ink-line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.burger img { width: 22px; height: 22px; }
.burger__close { display: none; }
.burger.is-open .burger__open  { display: none; }
.burger.is-open .burger__close { display: block; }

/* Мобильная панель — отдельный элемент, а не переключение display у .nav */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  padding: 88px var(--gutter) 32px;
  background: var(--c-ink);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s var(--ease),
              transform .25s var(--ease),
              visibility .25s var(--ease);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mobile-menu a {
  display: block;
  padding: 17px 0;
  border-bottom: 1px solid var(--c-ink-line);
  color: #4a4e56;
  font-size: 18px;
  font-weight: 500;
}
.mobile-menu a:hover { color: var(--c-accent-hi); }
.mobile-menu .btn {
  margin-top: 28px;
  border-bottom: 0;
  width: 100%;
  color: #fff;
  padding: 16px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--c-ink);
  color: #4a4e56;
  margin-top: -76px;          /* шапка лежит поверх героя */
  padding: 144px var(--gutter) 90px;
  overflow: hidden;
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 60px;
  align-items: start;
}

.hero__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.hero__glow--1 {
  right: -180px; top: -120px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(37, 99, 235, .28), transparent 62%);
}
.hero__glow--2 {
  right: 180px; bottom: -260px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(109, 74, 255, .2), transparent 65%);
}
.hero__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 78% 35%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 60% at 78% 35%, #000 25%, transparent 72%);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--c-ink-line);
  border-radius: var(--r-pill);
  padding: 7px 16px 7px 8px;
  font-size: 13.5px;
  color: #c3cddf;
  margin-bottom: 30px;
}
.hero__badge img { width: 22px; height: 22px; }

.hero__title {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 22px;
  color: #fff;
}
.hero__title em { font-style: normal; color: var(--c-accent-hi); }

.hero__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--c-ink-text);
  max-width: 460px;
  margin-bottom: 28px;
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 34px;
}
.stack li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--c-ink-line);
  border-radius: var(--r-md);
  padding: 8px 14px 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #d3dbe9;
}
.stack img { width: 18px; height: 18px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Код-карточка */
.code-card {
  background: #0b1120;
  border: 1px solid var(--c-ink-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.code-card__bar {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-ink-line);
}
.code-card__bar i {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: block;
}
.code-card__bar i:nth-child(1) { background: #ff5f57; }
.code-card__bar i:nth-child(2) { background: #febc2e; }
.code-card__bar i:nth-child(3) { background: #28c840; }

.code-card__body {
  display: flex;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 2;
  padding: 18px 0;
  overflow-x: auto;
}
.code-card__ln {
  flex-shrink: 0;
  padding: 0 18px;
  color: #3c4a68;
  text-align: right;
  -webkit-user-select: none;
          user-select: none;
}
.code-card__code {
  margin: 0;
  padding: 0 24px 0 4px;
  font: inherit;
  color: #cbd5e6;
  white-space: pre;
}
.tok-key { color: #c792ea; }
.tok-cls { color: #82aaff; }
.tok-fn  { color: #7ee7c7; }
.tok-var { color: #f78c6c; }
.tok-com { color: #5a6b8c; font-style: italic; }

/* Полоса преимуществ под кодом */
.hero__perks {
  margin-top: 22px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--c-ink-line);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.perk { display: flex; gap: 12px; align-items: flex-start; }
.perk img { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.perk__t { font-size: 14px; font-weight: 600; color: #eaf0fa; margin-bottom: 4px; }
.perk__d { font-size: 12.5px; line-height: 1.5; color: #7e8ba5; }

/* --------------------------------------------------------------------------
   9. Услуги
   -------------------------------------------------------------------------- */
.service {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service h3 { margin-top: 4px; }
.service p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-text-2);
  flex: 1;
}
.service .link-arrow { margin-top: 4px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   10. Каталог решений
   -------------------------------------------------------------------------- */
.solution {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.solution h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.solution p {
  font-size: 14px;
  color: var(--c-text-2);
  line-height: 1.55;
  flex: 1;
}
.solution__price {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.solution__foot {
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}

/* --------------------------------------------------------------------------
   11. Партнёрство
   -------------------------------------------------------------------------- */
.partner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start;
}
.partner__title { margin-bottom: 18px; }
.partner__text p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-2);
  margin-bottom: 26px;
}

.cert {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-red);
  border-radius: var(--r-lg);
  padding: 14px 18px;
}
.cert__mark  { width: 38px; height: 38px; flex-shrink: 0; }
.cert__check { width: 28px; height: 28px; flex-shrink: 0; margin-left: 4px; }
.cert__t {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
}
.cert__s {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-2);
  line-height: 1.35;
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.facts__item {
  padding: 4px 26px;
  border-left: 1px solid var(--c-border);
}
.facts__item:first-child { border-left: 0; padding-left: 0; }
.facts__item img { width: 30px; height: 30px; margin-bottom: 18px; }
.facts__num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.facts__t {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 6px;
}
.facts__d {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-2);
}

/* --------------------------------------------------------------------------
   12. Кейсы
   -------------------------------------------------------------------------- */
.case {
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: var(--r-xl);
  overflow: hidden;
  color: #4a4e56;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.case:hover { background:#fff; border-color:#cbd6e5; transform: translateY(-3px); box-shadow:0 12px 28px rgba(15,23,42,.07); }
.case__body { padding: 24px; flex: 1; }
.case__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 12px;
}
.case__body h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; color: #4a4e56; }
.case__body p { font-size: 14px; color: #64748b; line-height: 1.6; }
.case .media {
  height: 170px;
  background: #eef3fb;
  border-top: 1px solid #dce4ef;
}

/* --------------------------------------------------------------------------
   13. Процесс
   -------------------------------------------------------------------------- */
.step { position: relative; padding-top: 26px; }
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-border);
}
.step--first::before { background: var(--c-accent); }
.step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent);
  margin-bottom: 12px;
}
.step h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--c-text-2); line-height: 1.6; }

/* --------------------------------------------------------------------------
   14. Новости
   -------------------------------------------------------------------------- */
.news { overflow: hidden; display: flex; flex-direction: column; }
.news .media { height: 148px; border-bottom: 1px solid var(--c-border); }
.news__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.news__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: 6px;
  padding: 4px 9px;
}
.news__body h3 { font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.news__body p { font-size: 14px; color: var(--c-text-2); line-height: 1.6; flex: 1; }
.news__body .link-arrow { align-self: flex-start; }

/* --------------------------------------------------------------------------
   15. Промо
   -------------------------------------------------------------------------- */
.promo {
  border-radius: var(--r-xl);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.promo h3 { font-size: 21px; font-weight: 700; line-height: 1.3; }
.promo p { font-size: 14.5px; line-height: 1.55; }
.promo .btn { align-self: flex-start; margin-top: 8px; }
.promo__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.promo--dark {
  background: linear-gradient(122deg, #101a35, #23306a);
  color: #fff;
  border: 1px solid #2b3a6b;
}
.promo--dark .promo__label { color: #9db6ff; }
.promo--dark p { color: #b8c4dc; }
.promo--light {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.promo--light .promo__label { color: var(--c-accent); }
.promo--light p { color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   16. CTA-полоса
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #0d1424 0%, #16224a 60%, #1e2f6b 100%);
  border-radius: var(--r-2xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  color: #fff;
}
.cta__mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.cta__text,
.cta > .btn { position: relative; z-index: 1; }
.cta h2 {
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.cta p { font-size: 15.5px; color: #b6c2da; line-height: 1.6; max-width: 620px; }

/* --------------------------------------------------------------------------
   17. Подвал
   -------------------------------------------------------------------------- */
.footer {
  padding: 30px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--c-text-3);
  border-top: 1px solid var(--c-border);
}
.footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  color: var(--c-text-3);
}
.footer__mail:hover { color: var(--c-accent); }
.footer__mail img { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   18. Модальное окно с формой
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 22, .72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal__box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  padding: 36px;
  box-shadow: 0 40px 90px -30px rgba(7, 11, 22, .6);
  transform: translateY(14px) scale(.98);
  transition: transform .26s var(--ease);
}
.modal.is-open .modal__box { transform: none; }

.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-tint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur) var(--ease);
}
.modal__close:hover { background: #e0e7f4; }
.modal__close img { width: 18px; height: 18px; }

.modal__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  padding-right: 40px;
}
.modal__sub {
  font-size: 14.5px;
  color: var(--c-text-2);
  line-height: 1.55;
  margin-bottom: 24px;
}

/* Экран «спасибо» */
.modal__done {
  display: none;
  text-align: center;
  padding: 16px 0 8px;
}
.modal.is-done .modal__form,
.modal.is-done .modal__title,
.modal.is-done .modal__sub { display: none; }
.modal.is-done .modal__done { display: block; }
.modal__done img { width: 56px; height: 56px; margin: 0 auto 20px; }
.modal__done h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.modal__done p {
  font-size: 14.5px;
  color: var(--c-text-2);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   19. Поля формы
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--c-text-2); }

.input,
.select {
  width: 100%;
  background: #f6f8fc;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 15px;
  font-size: 15px;
  font-family: inherit;
  color: var(--c-text);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: #9aa5ba; }
.input:focus,
.select:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}
.input.is-invalid,
.select.is-invalid { border-color: var(--c-err); }

/* Стрелка селекта — фоном, чтобы не тянуть лишний файл */
.select {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2355617a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.field__error {
  font-size: 12.5px;
  color: var(--c-err);
}

.form__note {
  font-size: 12px;
  color: var(--c-text-3);
  line-height: 1.5;
  text-align: center;
  margin-top: 2px;
}
.form__note a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   20. Адаптив

   Брейкпоинты: 1680 / 1240 / 1080 / 820 / 560.
   1680 — единственный min-width: широкие мониторы получают больше воздуха.
   Остальные — max-width, идут по убыванию.
   -------------------------------------------------------------------------- */

/* Широкие мониторы */
@media (min-width: 1680px) {
  :root {
    --gutter: 80px;
    --section-y: 108px;
  }

  .hero { padding-top: 168px; padding-bottom: 116px; }
  .hero__grid { gap: 80px; }
  .hero__text { max-width: 520px; font-size: 17.5px; }

  .grid { gap: 26px; }
  .grid--4 { gap: 24px; }

  /* пять услуг встают в один ряд — места хватает */
  .grid--5 { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .grid--5 > *,
  .grid--5 > *:nth-child(4),
  .grid--5 > *:nth-child(5) { grid-column: auto; }

  .section__head { margin-bottom: 48px; }
  .section__head .lead { max-width: 460px; }

  .service { padding: 32px; }
  .solution { padding: 20px; }
  .cta { padding: 64px; }
}

@media (max-width: 1240px) {
  :root { --gutter: 36px; --section-y: 76px; }
  .nav { gap: 22px; font-size: 14.5px; }
  .hero__grid { gap: 40px; }
  .partner { grid-template-columns: 300px 1fr; gap: 40px; }
}

@media (max-width: 1080px) {
  :root { --section-y: 64px; }

  .nav,
  .header__cta { display: none; }
  .burger { display: inline-flex; }
  .header { gap: 16px; justify-content: space-between; }

  .hero { padding-top: 128px; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__text { max-width: none; }
  .hero__glow--2 { display: none; }

  .partner { grid-template-columns: 1fr; gap: 36px; }
  .facts__item { padding-left: 20px; padding-right: 20px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* пять услуг: по две в ряд, последняя занимает всю ширину */
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 > *,
  .grid--5 > *:nth-child(4),
  .grid--5 > *:nth-child(5) { grid-column: auto; }
  .grid--5 > *:last-child { grid-column: span 2; }

  .cta { grid-template-columns: 1fr; padding: 40px; gap: 28px; }
  .cta .btn { justify-self: start; }
}

@media (max-width: 820px) {
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
  }
  .section__head .lead { max-width: none; }

  .facts { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .facts__item:nth-child(odd) { border-left: 0; padding-left: 0; }

  .hero__perks { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; --section-y: 52px; }

  body { font-size: 15px; }

  .header { padding: 12px var(--gutter); }
  .logo { font-size: 18px; }
  .logo img { width: 28px; height: 28px; }
  .mobile-menu { padding-top: 80px; }

  .hero { padding-top: 112px; padding-bottom: 60px; }
  .hero__title { letter-spacing: -.02em; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__glow--1 { right: -240px; width: 520px; height: 520px; }

  .code-card__body { font-size: 12px; line-height: 1.9; }
  .code-card__ln { padding: 0 12px; }
  .code-card__code { padding-right: 16px; }

  .grid--4 { grid-template-columns: 1fr; }
  .grid--5 { grid-template-columns: 1fr; }
  .grid--5 > *,
  .grid--5 > *:last-child { grid-column: auto; }
  .facts { grid-template-columns: 1fr; gap: 26px; }
  .facts__item { padding: 0; border-left: 0; }

  .service { padding: 22px; }
  .solution { padding: 20px; }
  .promo { padding: 26px; }
  .promo h3 { font-size: 19px; }
  .cta { padding: 30px 22px; border-radius: var(--r-xl); }
  .cta .btn { width: 100%; }

  .modal__box { padding: 28px 22px; border-radius: var(--r-xl); }
  .modal__title { font-size: 21px; }

  .footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --------------------------------------------------------------------------
   21. Анимации
   Элементы прячутся ТОЛЬКО если GSAP реально загрузился.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   22. Печать
   -------------------------------------------------------------------------- */
@media print {
  .header, .burger, .mobile-menu, .modal, .cta, .promo { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .case { background: #fff !important; color: #000 !important; }
  [data-anim] { opacity: 1 !important; }
}


.header-tools{display:flex;align-items:center;gap:10px;margin-left:auto}.header-tool{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:12px;display:grid;place-items:center;position:relative}.header-tool>img{width:24px;height:24px;display:block}.header-cart{opacity:.55}.header-cart.is-active{opacity:1;border-color:#2563eb}.header-cart__count{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#2563eb;color:#fff;font:700 11px/19px Inter;text-align:center}.header-cart:not(.is-active) .header-cart__count{display:none}.basket-toast{position:fixed;right:24px;top:calc(var(--admin-offset,0px) + 90px);z-index:10000;width:min(420px,calc(100vw - 32px));padding:16px;background:#fff;border:1px solid #dbe3ef;border-radius:16px;box-shadow:0 20px 60px rgba(7,11,22,.22);display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;opacity:0;transform:translateX(30px);transition:.25s}.basket-toast.is-open{opacity:1;transform:none}.basket-toast__image{width:58px;height:58px;border-radius:10px;object-fit:cover}.basket-toast__name{display:block;margin-top:5px;color:#64748b;font-size:13px}.basket-toast__close{position:absolute;right:7px;top:3px;border:0;background:none;font-size:20px}.detail-page .header-tool{color:#fff}@media(max-width:1080px){.header-tools{margin-left:auto}.header__cta{display:none}}@media(max-width:640px){.basket-toast{right:16px;grid-template-columns:48px 1fr}.basket-toast .btn{grid-column:1/-1}.basket-toast__image{width:48px;height:48px}}

/* Product cards must never be hidden by GSAP or catalog filters. */
.solution,
.solution[data-anim],
.catalog-page .good,
.catalog-page .good[data-anim] {
  opacity: 1 !important;
  visibility: visible !important;
}



/* v1.9.27 release fixes */
.header-tool{color:#e9efff!important;transition:color .2s,border-color .2s,background .2s}.header-tool:hover{color:#fff!important;background:rgba(255,255,255,.08)}.header-cart.is-active{color:#fff!important}
.mobile-menu__contacts{margin-top:auto;padding:20px 0 10px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:8px}.mobile-menu__contacts a{font-size:14px!important;color:#c9d5eb!important}
.section__head-actions{display:flex;align-items:flex-end;gap:20px}.section__head-actions .lead{max-width:560px}.section__head-actions .btn{flex:none}
.home-coop-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;margin-top:22px;align-items:center}.home-coop-form .input{min-width:0}.home-coop-form__status{grid-column:1/-1;font-size:13px;color:#9fb0cb;min-height:18px}.home-coop-form__status.is-ok{color:#6ee7a8}.home-coop-form__status.is-error{color:#fca5a5}
#cases .case{background:#fff!important;border-color:#dce4ef!important;box-shadow:0 12px 28px rgba(15,23,42,.07)}#cases .case__body h3{color:#4a4e56!important}#cases .case__body p{color:#64748b!important}#cases .case__kicker{color:#2563eb!important}
@media(max-width:900px){.section__head-actions{align-items:flex-start;flex-direction:column}.home-coop-form{grid-template-columns:1fr}.home-coop-form__status{grid-column:auto}}

/* v1.9.28 home refinements */
.section__footer-actions{display:flex;justify-content:flex-end;margin-top:28px}
.partner__right{min-width:0;display:flex;flex-direction:column;gap:24px}
.partner__right .home-coop-form{margin-top:0;padding-top:22px;border-top:1px solid var(--c-border)}
#cases .case,#cases .case:hover{background:#fff!important;border-color:#dce4ef!important;color:#4a4e56!important;box-shadow:0 12px 28px rgba(15,23,42,.07)}
#cases .case__link{color:inherit!important}
#cases .case__body h3{color:#4a4e56!important}
#cases .case__body p{color:#64748b!important}
#cases .case__kicker{color:#2563eb!important}
@media(max-width:1080px){.partner__right{width:100%}}
@media(max-width:640px){.section__footer-actions .btn{width:100%}}

/* v1.9.29 home fixes */
.home-coop-action{margin-top:0;padding-top:22px;border-top:1px solid var(--c-border);display:flex;justify-content:flex-start}
#cases .case,#cases .case:hover{background:#fff!important;border-color:#dce4ef!important;color:#4a4e56!important}
#cases .case .media{background:#eef3fb!important;border-top-color:#dce4ef!important}

/* ===== WEBCAT STABLE PUBLIC PAGE BUNDLE 1.9.32 ===== */

/* --- SERVICES PAGE: assets/css/services-page.css --- */
/* ==========================================================================
   Все услуги — самостоятельная страница
   Чистый CSS, без фреймворков и препроцессоров.
   Порядок: переменные → база → шапка → карточки → преимущества →
   технологии → CTA → адаптив.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
.services-page{
  --c-bg:       #f7f9fc;
  --c-surface:  #ffffff;
  --c-tint:     #eff3fa;
  --c-text:     #0f172a;
  --c-text-2:   #55617a;
  --c-text-3:   #98a2b3;
  --c-border:   #e6ebf3;
  --c-border-2: #d3dbe8;

  --c-accent:      #2563eb;
  --c-accent-dark: #1d4ed8;
  --c-accent-soft: #e8effe;

  /* Акценты карточек: точка списка + фон плашки иконки */
  --c-indigo: #4f46e5;  --bg-indigo: #eceafe;
  --c-green:  #16a34a;  --bg-green:  #e6f6ec;
  --c-purple: #7c3aed;  --bg-purple: #f0eafd;
  --c-blue:   #2b7fff;  --bg-blue:   #e6f1ff;
  --c-teal:   #0d9488;  --bg-teal:   #e0f4f2;
  --c-orange: #ea8017;  --bg-orange: #fdefe1;
  --c-pink:   #e0407f;  --bg-pink:   #fce9f1;
  --c-yellow: #d9930c;  --bg-yellow: #fdf3dd;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 22px;

  --page-max: 1680px;
  --gutter: 56px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.services-page *,
.services-page *::before,
.services-page *::after{ box-sizing: border-box; }

.services-page{ -webkit-text-size-adjust: 100%; }

.services-page{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.services-page img,
.services-page svg{ display: block; max-width: 100%; }
.services-page ul{ margin: 0; padding: 0; list-style: none; }
.services-page h1,
.services-page h2,
.services-page h3,
.services-page p{ margin: 0; }
.services-page button{ font: inherit; color: inherit; }

.services-page a{
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.services-page a:hover{ color: var(--c-accent-dark); }

.services-page ::selection{ background: #cfe0ff; }

/* Заголовок только для скринридеров: hidden убрал бы его и из озвучки */
.services-page .visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.services-page :focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.services-page .page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 30px var(--gutter) 60px;
}

.services-page .block{ margin-top: 30px; }

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.services-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.services-page .btn img{ width: 18px; height: 18px; flex-shrink: 0; }
.services-page .btn:active{ transform: translateY(1px); }

.services-page .btn--primary{
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .85);
}
.services-page .btn--primary:hover{ background: var(--c-accent-dark); color: #fff; }

.services-page .btn--white{
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text);
}
.services-page .btn--white:hover{ border-color: var(--c-border-2); color: var(--c-text); }

/* Ссылка со стрелкой */
.services-page .more{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
}
.services-page .more img{
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}
.services-page .more:hover img{ transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Хлебные крошки
   -------------------------------------------------------------------------- */
.services-page .crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-text-3);
  margin-bottom: 26px;
}
.services-page .crumbs a{ color: var(--c-text-2); }
.services-page .crumbs a:hover{ color: var(--c-accent); }
.services-page .crumbs img{ width: 7px; height: 10px; }

/* --------------------------------------------------------------------------
   5. Шапка страницы
   -------------------------------------------------------------------------- */
.services-page .hero{
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 44px;
}

.services-page .hero h1{
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  margin-bottom: 22px;
}

.services-page .services-page__title{ color: #4a4e56; }

.services-page .hero p{
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-text-2);
  max-width: 420px;
}

.services-page .hero__art{ justify-self: end; width: 100%; }
.services-page .hero__art img{ width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   6. Сетка услуг
   -------------------------------------------------------------------------- */
.services-page .services{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.services-page .card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.services-page .card:hover{
  border-color: #c9d8f6;
  box-shadow: 0 20px 42px -26px rgba(15, 23, 42, .32);
  transform: translateY(-3px);
}

.services-page .card__icon{
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.services-page .card__icon img{ width: 23px; height: 23px; }

.services-page .card h3{
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: 10px;
}

.services-page .card__lead{
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-text-2);
  margin-bottom: 18px;
}

.services-page .card__list{
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
  flex: 1;
}
.services-page .card__list li{
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-text-2);
}
.services-page .card__list li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot, var(--c-accent));
}

.services-page .card .more{ align-self: flex-start; }

/* Цветовые темы карточек: задают фон плашки и цвет маркеров */
.services-page .card--indigo .card__icon{ background: var(--bg-indigo); } .services-page .card--indigo{ --dot: var(--c-indigo); }
.services-page .card--green  .card__icon{ background: var(--bg-green);  } .services-page .card--green{ --dot: var(--c-green); }
.services-page .card--purple .card__icon{ background: var(--bg-purple); } .services-page .card--purple{ --dot: var(--c-purple); }
.services-page .card--blue   .card__icon{ background: var(--bg-blue);   } .services-page .card--blue{ --dot: var(--c-blue); }
.services-page .card--teal   .card__icon{ background: var(--bg-teal);   } .services-page .card--teal{ --dot: var(--c-teal); }
.services-page .card--orange .card__icon{ background: var(--bg-orange); } .services-page .card--orange{ --dot: var(--c-orange); }
.services-page .card--pink   .card__icon{ background: var(--bg-pink);   } .services-page .card--pink{ --dot: var(--c-pink); }
.services-page .card--yellow .card__icon{ background: var(--bg-yellow); } .services-page .card--yellow{ --dot: var(--c-yellow); }

/* --------------------------------------------------------------------------
   7. Почему выбирают нас
   -------------------------------------------------------------------------- */
.services-page .why{
  background: var(--c-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: auto repeat(5, 1fr);
  align-items: center;
  gap: 0;
}

.services-page .why__title{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding-right: 30px;
}

.services-page .why__item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 22px;
  border-left: 1px solid var(--c-border-2);
}
.services-page .why__ico{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.services-page .why__ico img{ width: 18px; height: 18px; }
.services-page .why__t{
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text-2);
}
.services-page .why__t b{ display: block; font-weight: 600; color: var(--c-text); }

/* --------------------------------------------------------------------------
   8. Технологии
   -------------------------------------------------------------------------- */
.services-page .tech__title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}

.services-page .tech{
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 14px;
}
.services-page .tech li{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: border-color var(--dur) var(--ease);
}
.services-page .tech li:hover{ border-color: var(--c-border-2); }
.services-page .tech img{ width: 22px; height: 22px; flex-shrink: 0; }
.services-page .tech img[src$="php.svg"]{ width: 30px; }
.services-page .tech img[src$="api.svg"]{ width: 26px; }

/* --------------------------------------------------------------------------
   9. Нижний блок
   -------------------------------------------------------------------------- */
.services-page .cta{
  background: #eef3fb;
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.services-page .cta__left{
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.services-page .cta__ico{
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.services-page .cta__ico img{ width: 30px; height: 30px; }
.services-page .cta h2{
  color: var(--c-text);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.services-page .cta p{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-text-2);
  max-width: 480px;
}

.services-page .cta__actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.services-page .cta__mail{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 4px;
}
.services-page .cta__mail img{ width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   10. Адаптив
   Пять брейкпоинтов: 1680 — единственный min-width, остальные max-width.
   -------------------------------------------------------------------------- */
@media (min-width: 1680px){
  .services-page{ --gutter: 72px; }
  .services-page .page{ padding-top: 40px; padding-bottom: 80px; }
  .services-page .services{ gap: 24px; }
  .services-page .card{ padding: 28px; }
  .services-page .block{ margin-top: 36px; }
}

/* Пять колонок перестают помещаться */
@media (max-width: 1400px){
  .services-page{ --gutter: 40px; }
  .services-page .services{ grid-template-columns: repeat(3, 1fr); }
  .services-page .tech{ grid-template-columns: repeat(5, 1fr); }
  .services-page .why{ grid-template-columns: repeat(3, 1fr); gap: 22px 0; }
  .services-page .why__title{ grid-column: 1 / -1; padding-right: 0; }
  .services-page .why__item:nth-child(3n+2){ border-left: 0; padding-left: 0; }
}

@media (max-width: 1080px){
  .services-page .hero{
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 34px;
  }
  .services-page .hero p{ max-width: none; }
  .services-page .hero__art{ justify-self: stretch; max-width: 620px; }

  .services-page .services{ grid-template-columns: repeat(2, 1fr); }
  .services-page .tech{ grid-template-columns: repeat(3, 1fr); }

  .services-page .why{ grid-template-columns: repeat(2, 1fr); }
  .services-page .why__item{ padding: 4px 18px; }
  .services-page .why__item:nth-child(3n+2){ border-left: 1px solid var(--c-border-2); padding-left: 18px; }
  .services-page .why__item:nth-child(2n+2){ border-left: 0; padding-left: 0; }

  .services-page .cta{ flex-direction: column; align-items: flex-start; }
  .services-page .cta__actions{ width: 100%; }
}

@media (max-width: 720px){
  .services-page .services{ grid-template-columns: 1fr; }
  .services-page .tech{ grid-template-columns: repeat(2, 1fr); }
  .services-page .why{ grid-template-columns: 1fr; gap: 18px; }
  .services-page .why__item{ border-left: 0 !important; padding: 0 !important; }
}

@media (max-width: 560px){
  .services-page{ --gutter: 18px; }

  .services-page{ font-size: 15px; }
  .services-page .page{ padding-top: 20px; padding-bottom: 44px; }
  .services-page .block{ margin-top: 24px; }

  .services-page .crumbs{ font-size: 13px; margin-bottom: 20px; }
  .services-page .hero h1{ letter-spacing: -.025em; }
  .services-page .hero p{ font-size: 15px; }

  .services-page .card{ padding: 20px; }
  .services-page .why{ padding: 22px; }
  .services-page .cta{ padding: 24px 20px; }
  .services-page .cta__left{ gap: 16px; }
  .services-page .cta__ico{ width: 52px; height: 52px; border-radius: 14px; }
  .services-page .cta__ico img{ width: 26px; height: 26px; }
  .services-page .cta h2{ font-size: 19px; }

  .services-page .cta__actions{ flex-direction: column; align-items: stretch; gap: 12px; }
  .services-page .cta__actions .btn{ width: 100%; }
  .services-page .cta__mail{ justify-content: center; }

  .services-page .tech li{ flex-direction: column; gap: 8px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   11. Уважение к настройкам движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .services-page *,
.services-page *::before,
.services-page *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print{
  .services-page{ background: #fff; }
  .services-page .card,
.services-page .why,
.services-page .tech li,
.services-page .cta{ box-shadow: none; }
  .services-page .cta__actions{ display: none; }
}

.services-page{max-width:1680px;margin:0 auto;padding:30px 56px 60px;background:#fff;color:#0f172a;}
@media(max-width:700px){.services-page{padding-left:18px;padding-right:18px;}}

/* --- CASES PAGE: assets/cases/css/style.css --- */
/* ==========================================================================
   Кейсы — самостоятельная страница
   Чистый HTML/CSS, без JS. Фильтр работает на радиокнопках + ~ комбинаторе.
   Порядок: переменные → база → шапка → фильтр → карточки → CTA → адаптив.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
.cases-page {
  --c-bg:       #f7f9fc;
  --c-surface:  #ffffff;
  --c-tint:     #eff3fa;
  --c-text:     #0f172a;
  --c-text-2:   #55617a;
  --c-text-3:   #98a2b3;
  --c-border:   #e6ebf3;
  --c-border-2: #d3dbe8;

  --c-accent:      #2563eb;
  --c-accent-dark: #1d4ed8;
  --c-accent-soft: #e8effe;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 22px;

  --page-max: 1680px;
  --gutter: 56px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.cases-page *,
.cases-page *::before,
.cases-page *::after { box-sizing: border-box; }
.cases-page { -webkit-text-size-adjust: 100%; }
.cases-page {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cases-page img,
.cases-page svg { display: block; max-width: 100%; }
.cases-page ul { margin: 0; padding: 0; list-style: none; }
.cases-page h1,
.cases-page h2,
.cases-page h3,
.cases-page p { margin: 0; }
.cases-page a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.cases-page a:hover { color: var(--c-accent-dark); }
.cases-page ::selection { background: #cfe0ff; }
.cases-page :focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.cases-page .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cases-page .page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 30px var(--gutter) 60px;
}

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.cases-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cases-page .btn img { width: 18px; height: 18px; flex-shrink: 0; }
.cases-page .btn:active { transform: translateY(1px); }
.cases-page .btn--primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .85);
}
.cases-page .btn--primary:hover { background: var(--c-accent-dark); color: #fff; }
.cases-page .btn--white {
  background: var(--c-surface);
  border-color: var(--c-border-2);
  color: var(--c-text);
}
.cases-page .btn--white:hover { border-color: var(--c-accent); color: var(--c-text); }
.cases-page .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
}
.cases-page .more img {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}
.cases-page .more:hover img { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Хлебные крошки
   -------------------------------------------------------------------------- */
.cases-page .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-text-3);
  margin-bottom: 26px;
}
.cases-page .crumbs a { color: var(--c-text-2); }
.cases-page .crumbs a:hover { color: var(--c-accent); }
.cases-page .crumbs img { width: 7px; height: 10px; }

/* --------------------------------------------------------------------------
   5. Шапка страницы
   -------------------------------------------------------------------------- */
.cases-page .hero {
  background: transparent;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 48px;
  align-items: start;
  margin-bottom: 34px;
}
.cases-page .hero h1 {
  color: #4a4e56;
  font-size: clamp(34px, 4.2vw, 50px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.cases-page .hero p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 520px;
}

/* Плашка со счётчиком проектов */
.cases-page .stat {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--c-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 26px 30px;
}
.cases-page .stat__ico {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cases-page .stat__ico img { width: 30px; height: 30px; }
.cases-page .stat__num {
  color: #4a4e56;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.cases-page .stat__d { font-size: 13.5px; line-height: 1.5; color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   6. Фильтр без JS
   Радиокнопки лежат перед .filters и .cases, поэтому :checked ~ достаёт
   и до подсветки активной вкладки, и до самих карточек.
   -------------------------------------------------------------------------- */
.cases-page .filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.cases-page .f-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cases-page .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.cases-page .filters label {
  display: inline-flex;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.cases-page .filters label:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* активная вкладка */
.cases-page #f-all:checked   ~ .filters label[for="f-all"],
.cases-page #f-shop:checked  ~ .filters label[for="f-shop"],
.cases-page #f-portal:checked ~ .filters label[for="f-portal"],
.cases-page #f-integ:checked ~ .filters label[for="f-integ"],
.cases-page #f-auto:checked  ~ .filters label[for="f-auto"],
.cases-page #f-migr:checked  ~ .filters label[for="f-migr"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-weight: 600;
}

/* видимая рамка при навигации с клавиатуры */
.cases-page #f-all:focus-visible   ~ .filters label[for="f-all"],
.cases-page #f-shop:focus-visible  ~ .filters label[for="f-shop"],
.cases-page #f-portal:focus-visible ~ .filters label[for="f-portal"],
.cases-page #f-integ:focus-visible ~ .filters label[for="f-integ"],
.cases-page #f-auto:focus-visible  ~ .filters label[for="f-auto"],
.cases-page #f-migr:focus-visible  ~ .filters label[for="f-migr"] {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* сама фильтрация */
.cases-page #f-shop:checked   ~ .cases .case:not(.case--shop),
.cases-page #f-portal:checked ~ .cases .case:not(.case--portal),
.cases-page #f-integ:checked  ~ .cases .case:not(.case--integ),
.cases-page #f-auto:checked   ~ .cases .case:not(.case--auto),
.cases-page #f-migr:checked   ~ .cases .case:not(.case--migr) {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Карточка кейса
   -------------------------------------------------------------------------- */
.cases-page .cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.cases-page .case {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cases-page .case:hover {
  border-color: #c9d8f6;
  box-shadow: 0 22px 46px -28px rgba(15, 23, 42, .34);
  transform: translateY(-3px);
}

/* превью */
.cases-page .case__media { position: relative; }
.cases-page .case__media img { width: 100%; height: auto; }
.cases-page .case__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--c-surface);
  color: var(--c-text-2);
  box-shadow: 0 2px 8px -3px rgba(15, 23, 42, .2);
}
.cases-page .case__badge--shop { background: #e8effe; color: #1d4ed8; }
.cases-page .case__badge--portal { background: #2563eb; color: #fff; }
.cases-page .case__badge--integ { background: #e0f5ea; color: #14804a; }
.cases-page .case__badge--auto { background: #fdf0dc; color: #a86a10; }
.cases-page .case__badge--migr { background: #e8effe; color: #1d4ed8; }
.cases-page .case__badge--corp { background: #f0eafd; color: #6d31d0; }

/* текст */
.cases-page .case__body { padding: 22px 24px 18px; }
.cases-page .case__body h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 10px;
}
.cases-page .case__body p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-text-2);
}

/* метрики */
.cases-page .case__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 24px;
  margin-top: auto;
  border-top: 1px solid var(--c-border);
}
.cases-page .fact__k {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-text-3);
  margin-bottom: 5px;
}
.cases-page .fact__k img { width: 13px; height: 13px; flex-shrink: 0; }
.cases-page .fact__v {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-text);
  font-weight: 500;
}
.cases-page .case__foot {
  padding: 0 24px 18px;
  display: flex;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   8. Нижний блок
   -------------------------------------------------------------------------- */
.cases-page .cta {
  margin-top: 30px;
  background: var(--c-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.cases-page .cta__left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.cases-page .cta__ico {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cases-page .cta__ico img { width: 30px; height: 30px; }
.cases-page .cta h2 {
  color: #4a4e56;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.cases-page .cta p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-text-2);
  max-width: 460px;
}
.cases-page .cta__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   9. Адаптив
   Пять брейкпоинтов: 1680 — единственный min-width, остальные max-width.
   -------------------------------------------------------------------------- */
@media (min-width: 1680px) {
  .cases-page { --gutter: 72px; }
  .cases-page .page { padding-top: 40px; padding-bottom: 80px; }
  .cases-page .cases { gap: 30px; }
  .cases-page .hero { margin-bottom: 40px; }
}

@media (max-width: 1240px) {
.cases-page { --gutter: 36px; }
.cases-page .cases { grid-template-columns: repeat(2, 1fr); }
.cases-page .hero { grid-template-columns: 1fr; gap: 28px; }
.cases-page .hero p { max-width: none; }
.cases-page .stat { max-width: 420px; }
}

@media (max-width: 900px) {
.cases-page .cases { grid-template-columns: 1fr; }
.cases-page .case { max-width: 560px; }
.cases-page .cta { flex-direction: column; align-items: flex-start; }
.cases-page .cta__actions { width: 100%; }
}

@media (max-width: 560px) {
.cases-page { --gutter: 18px; }
.cases-page { font-size: 15px; }
.cases-page .page { padding-top: 20px; padding-bottom: 44px; }
.cases-page .crumbs { font-size: 13px; margin-bottom: 20px; }
.cases-page .hero h1 { letter-spacing: -.025em; }
.cases-page .stat { padding: 20px; gap: 16px; }
.cases-page .stat__ico { width: 52px; height: 52px; }
.cases-page .stat__ico img { width: 26px; height: 26px; }
.cases-page .stat__num { font-size: 26px; }

  /* фильтр прокручивается по горизонтали, а не переносится в четыре ряда */
.cases-page .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 4px;
  }
.cases-page .filters::-webkit-scrollbar { display: none; }
.cases-page .filters label { padding: 11px 18px; font-size: 14px; }
.cases-page .case__body { padding: 18px 18px 14px; }
.cases-page .case__facts { grid-template-columns: 1fr; gap: 12px; padding: 14px 18px; }
.cases-page .case__foot { padding: 0 18px 16px; }
.cases-page .cta { padding: 24px 20px; }
.cases-page .cta__left { gap: 16px; }
.cases-page .cta__ico { width: 52px; height: 52px; border-radius: 14px; }
.cases-page .cta__ico img { width: 26px; height: 26px; }
.cases-page .cta h2 { font-size: 19px; }
.cases-page .cta__actions { flex-direction: column; gap: 12px; }
.cases-page .cta__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   10. Настройки движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cases-page *,
  .cases-page *::before,
  .cases-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
.cases-page { background: #fff; }
.cases-page .filters,
.cases-page .cta__actions { display: none; }
.cases-page .case { box-shadow: none; break-inside: avoid; }
  /* на печати показываем все кейсы независимо от фильтра */
.cases-page .cases .case { display: flex !important; }
}

/* Dynamic Bitrix filter mapping */
.cases-page #f-shop:checked ~ .filters label[for="f-shop"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.cases-page #f-shop:checked ~ .cases .case:not(.case--shop){display:none;}
.cases-page #f-portal:checked ~ .filters label[for="f-portal"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.cases-page #f-portal:checked ~ .cases .case:not(.case--portal){display:none;}
.cases-page #f-integ:checked ~ .filters label[for="f-integ"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.cases-page #f-integ:checked ~ .cases .case:not(.case--integ){display:none;}
.cases-page #f-auto:checked ~ .filters label[for="f-auto"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.cases-page #f-auto:checked ~ .cases .case:not(.case--auto){display:none;}
.cases-page #f-migr:checked ~ .filters label[for="f-migr"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.cases-page #f-migr:checked ~ .cases .case:not(.case--migr){display:none;}
.cases-page #f-other:checked ~ .filters label[for="f-other"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.cases-page #f-other:checked ~ .cases .case:not(.case--other){display:none;}

/* --- BLOG LIST PAGE: assets/blog-list/css/style.css --- */
/* ==========================================================================
   Блог — список статей
   Порядок: переменные → база → шапка → фильтры → карточки →
   пагинация → правая колонка → баннер → адаптив.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
.webcat-blog-page{
  --c-bg:       #f7f9fc;
  --c-surface:  #ffffff;
  --c-tint:     #f1f5fb;
  --c-text:     #10182b;
  --c-text-2:   #55617a;
  --c-text-3:   #98a2b3;
  --c-border:   #e6ebf3;
  --c-border-2: #d3dbe8;

  --c-accent:      #1f5eef;
  --c-accent-dark: #1745c4;
  --c-accent-soft: #eaf1ff;
  --c-accent-pale: #eef4fe;

  --c-ok:  #16a34a;
  --c-err: #dc4b4b;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;

  --page-max: 1680px;
  --gutter: 40px;
  --aside: 300px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;
}
/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.webcat-blog-page *, .webcat-blog-page *::before, .webcat-blog-page *::after{ box-sizing: border-box; }
.webcat-blog-page{ -webkit-text-size-adjust: 100%; }
.webcat-blog-page{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.webcat-blog-page img, .webcat-blog-page svg{ display: block; max-width: 100%; }
.webcat-blog-page ul{ margin: 0; padding: 0; list-style: none; }
.webcat-blog-page h1, .webcat-blog-page h2, .webcat-blog-page h3, .webcat-blog-page p, .webcat-blog-page figure{ margin: 0; }
.webcat-blog-page button, .webcat-blog-page input, .webcat-blog-page select{ font: inherit; color: inherit; }
.webcat-blog-page a{
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.webcat-blog-page a:hover{ color: var(--c-accent-dark); }
.webcat-blog-page ::selection{ background: #cfe0ff; }
.webcat-blog-page :focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* [hidden] живёт в UA-стилях и проигрывает author-правилам с display */
.webcat-blog-page [hidden]{ display: none !important; }
.webcat-blog-page .visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.webcat-blog-page .page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 60px;
}
.webcat-blog-page .page--narrow{ max-width: 1640px; }
/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.webcat-blog-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.webcat-blog-page .btn img{ width: 16px; height: 16px; flex-shrink: 0; }
.webcat-blog-page .btn:active{ transform: translateY(1px); }
.webcat-blog-page .btn[disabled]{ opacity: .6; cursor: default; }
.webcat-blog-page .btn--primary{ background: var(--c-accent); color: #fff; }
.webcat-blog-page .btn--primary:hover:not([disabled]){ background: var(--c-accent-dark); color: #fff; }
.webcat-blog-page .btn--soft{
  background: var(--c-surface);
  border-color: #c5d8fb;
  color: var(--c-accent);
}
.webcat-blog-page .btn--soft:hover{ background: var(--c-accent-soft); border-color: var(--c-accent); }
.webcat-blog-page .btn--block{ width: 100%; }
.webcat-blog-page .more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.webcat-blog-page .more img{ width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.webcat-blog-page .more:hover img{ transform: translateX(3px); }
/* --------------------------------------------------------------------------
   4. Крошки и шапка
   -------------------------------------------------------------------------- */
.webcat-blog-page .crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--c-text-3);
  margin-bottom: 14px;
}
.webcat-blog-page .crumbs a{ color: var(--c-text-2); }
.webcat-blog-page .crumbs a:hover{ color: var(--c-accent); }
.webcat-blog-page .crumbs img{ width: 7px; height: 10px; }
.webcat-blog-page .hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 32px;
  align-items: center;
  margin-bottom: 26px;
}
.webcat-blog-page .hero h1{
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.webcat-blog-page .hero p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 460px;
}
.webcat-blog-page .hero__art{ justify-self: end; width: 100%; }
/* --------------------------------------------------------------------------
   5. Поиск и фильтры
   -------------------------------------------------------------------------- */
.webcat-blog-page .search{
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 620px;
  margin-bottom: 18px;
}
.webcat-blog-page .search__field{
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
}
.webcat-blog-page .search input{
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  padding: 13px 44px 13px 44px;
  font-size: 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.webcat-blog-page .search input::placeholder{ color: var(--c-text-3); }
.webcat-blog-page .search input:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 239, .12);
}
.webcat-blog-page .search__ico{
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.webcat-blog-page .search__clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-tint);
  cursor: pointer;
}
.webcat-blog-page .search__clear img{ width: 14px; height: 14px; }
.webcat-blog-page .search.is-filled .search__ico{ display: block; }
.webcat-blog-page .search__submit{ flex: 0 0 auto; min-width: 104px; }
.webcat-blog-page .filters{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.webcat-blog-page .filters button{
  padding: 11px 20px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text-2);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.webcat-blog-page .filters button:hover{ border-color: var(--c-accent); color: var(--c-accent); }
.webcat-blog-page .filters button[aria-pressed="true"]{
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-weight: 600;
}
.webcat-blog-page .tagpick{
  margin-left: auto;
  position: relative;
}
.webcat-blog-page .tagpick select{
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  padding: 11px 36px 11px 16px;
  font-size: 13.5px;
  color: var(--c-text-2);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.6l5-5' stroke='%2355617a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.webcat-blog-page .tagpick select:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 239, .12);
}
/* --------------------------------------------------------------------------
   6. Каркас
   -------------------------------------------------------------------------- */
.webcat-blog-page .layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside);
  gap: 24px;
  align-items: start;
}
.webcat-blog-page .aside{ position: sticky; top: 20px; }
/* --------------------------------------------------------------------------
   7. Главная статья
   -------------------------------------------------------------------------- */
.webcat-blog-page .featured{
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 22px;
}
.webcat-blog-page .featured__pic{ width: 100%; height: 100%; object-fit: cover; }
.webcat-blog-page .featured__body{
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
}
.webcat-blog-page .featured__t{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 14px 0 12px;
}
.webcat-blog-page .featured__t a{ color: inherit; }
.webcat-blog-page .featured__t a:hover{ color: var(--c-accent); }
.webcat-blog-page .featured__d{
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-text-2);
  margin-bottom: 22px;
}
.webcat-blog-page .featured__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
}
.webcat-blog-page .meta{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--c-text-3);
}
.webcat-blog-page .tag{
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.webcat-blog-page .read{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--c-text-3);
  white-space: nowrap;
}
.webcat-blog-page .read img{ width: 15px; height: 15px; }
/* --------------------------------------------------------------------------
   8. Сетка статей
   -------------------------------------------------------------------------- */
.webcat-blog-page .posts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.webcat-blog-page .post{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.webcat-blog-page .post:hover{
  border-color: #c5d8fb;
  box-shadow: 0 20px 42px -26px rgba(16, 24, 43, .3);
  transform: translateY(-3px);
}
.webcat-blog-page .post__pic{ width: 100%; /*height: auto;*/ }
.webcat-blog-page .post__body{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.webcat-blog-page .post__t{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.webcat-blog-page .post__t a{ color: inherit; }
.webcat-blog-page .post__t a:hover{ color: var(--c-accent); }
.webcat-blog-page .post__d{
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-text-2);
  flex: 1;
}
.webcat-blog-page .post__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.webcat-blog-page .author{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-text-2);
  white-space: nowrap;
}
.webcat-blog-page .author img{ width: 22px; height: 22px; border-radius: 50%; }
/* Пусто */
.webcat-blog-page .empty{
  display: none;
  text-align: center;
  background: var(--c-surface);
  border: 1px dashed var(--c-border-2);
  border-radius: var(--r-xl);
  padding: 52px 24px;
}
.webcat-blog-page .empty.is-on{ display: block; }
.webcat-blog-page .empty img{ width: 44px; height: 44px; margin: 0 auto 18px; }
.webcat-blog-page .empty h2{ font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.webcat-blog-page .empty p{ font-size: 13.5px; color: var(--c-text-2); margin-bottom: 20px; }
/* --------------------------------------------------------------------------
   9. Пагинация
   -------------------------------------------------------------------------- */
.webcat-blog-page .pager{
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.webcat-blog-page .pager button{
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.webcat-blog-page .pager button:hover:not([disabled]):not(.pager__gap){ border-color: var(--c-accent); color: var(--c-accent); }
.webcat-blog-page .pager button[aria-current="page"]{
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.webcat-blog-page .pager button[disabled]{ opacity: .4; cursor: default; }
.webcat-blog-page .pager img{ width: 18px; height: 18px; }
.webcat-blog-page .pager__gap{
  border-color: transparent;
  background: none;
  cursor: default;
  color: var(--c-text-3);
}
/* --------------------------------------------------------------------------
   10. Правая колонка
   -------------------------------------------------------------------------- */
.webcat-blog-page .card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 22px;
}
.webcat-blog-page .card + .card{ margin-top: 20px; }
.webcat-blog-page .card__t{
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 14px;
}
/* Подписка */
.webcat-blog-page .sub__ico{
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.webcat-blog-page .sub__ico img{ width: 26px; height: 26px; }
.webcat-blog-page .sub__d{
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-text-2);
  margin-bottom: 16px;
}
.webcat-blog-page .sub__note{ font-size: 11.5px; color: var(--c-text-3); margin-top: 12px; }
.webcat-blog-page .sub__submit{ margin-top: 12px; }
.webcat-blog-page .input{
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.webcat-blog-page .input::placeholder{ color: var(--c-text-3); }
.webcat-blog-page .input:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 239, .12);
}
.webcat-blog-page .input.is-invalid{ border-color: var(--c-err); }
.webcat-blog-page .err{ font-size: 12px; color: var(--c-err); margin-top: 6px; }
.webcat-blog-page .err:empty{ display: none; }
.webcat-blog-page .sub__ok{
  display: none;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-ok);
}
.webcat-blog-page .sub.is-done .sub__form{ display: none; }
.webcat-blog-page .sub.is-done .sub__ok{ display: flex; }
.webcat-blog-page .sub__ok img{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
/* Популярные темы */
.webcat-blog-page .topics{ display: flex; flex-wrap: wrap; gap: 9px; }
.webcat-blog-page .topics button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  padding: 7px 11px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.webcat-blog-page .topics button:hover{ background: #dbe7fd; }
.webcat-blog-page .topics button[aria-pressed="true"]{ background: var(--c-accent); color: #fff; }
.webcat-blog-page .topics b{ font-weight: 600; color: var(--c-text-3); font-size: 11.5px; }
.webcat-blog-page .topics button[aria-pressed="true"] b{ color: #fff; }
/* Популярные статьи */
.webcat-blog-page .top li{ border-top: 1px solid var(--c-border); }
.webcat-blog-page .top li:first-child{ border-top: 0; }
.webcat-blog-page .top a{
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  color: inherit;
}
.webcat-blog-page .top a:hover{ color: inherit; }
.webcat-blog-page .top a:hover .top__t{ color: var(--c-accent); }
.webcat-blog-page .top__n{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.webcat-blog-page .top__t{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 6px;
  transition: color var(--dur) var(--ease);
}
/* Помощь */
.webcat-blog-page .help{
  position: relative;
  overflow: hidden;
  background: var(--c-accent-pale);
  border: 1px solid #dde7fb;
  border-radius: var(--r-xl);
  padding: 22px;
  margin-top: 20px;
}
.webcat-blog-page .help__t{ font-size: 15px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.webcat-blog-page .help__d{
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-text-2);
  margin-bottom: 16px;
  max-width: 170px;
}
.webcat-blog-page .help__art{
  position: absolute;
  right: -14px;
  bottom: -10px;
  width: 110px;
  pointer-events: none;
}
/* --------------------------------------------------------------------------
   11. Нижний баннер
   -------------------------------------------------------------------------- */
.webcat-blog-page .banner{
  margin-top: 26px;
  background: var(--c-accent-pale);
  border: 1px solid #dde7fb;
  border-radius: var(--r-xl);
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: center;
}
.webcat-blog-page .banner h2{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.webcat-blog-page .banner p{ font-size: 13.5px; line-height: 1.7; color: var(--c-text-2); margin-bottom: 18px; }
.webcat-blog-page .banner__form{ display: flex; gap: 10px; flex-wrap: wrap; max-width: 420px; }
.webcat-blog-page .banner__form .input{ flex: 1; min-width: 180px; background: var(--c-surface); }
.webcat-blog-page .banner__note{ font-size: 11.5px; color: var(--c-text-3); margin-top: 12px; }
.webcat-blog-page .banner__art{ justify-self: end; width: 220px; }
.webcat-blog-page .banner.is-done .banner__form, .webcat-blog-page .banner.is-done .banner__note{ display: none; }
.webcat-blog-page .banner__ok{
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--c-ok);
}
.webcat-blog-page .banner.is-done .banner__ok{ display: flex; }
.webcat-blog-page .banner__ok img{ width: 20px; height: 20px; flex-shrink: 0; }
/* --------------------------------------------------------------------------
   12. Адаптив
   Пять брейкпоинтов: 1680 — единственный min-width, остальные max-width.
   -------------------------------------------------------------------------- */
@media (min-width: 1680px){.webcat-blog-page{ --gutter: 64px; --aside: 340px; }
.webcat-blog-page .page{ padding-top: 32px; padding-bottom: 76px; }
.webcat-blog-page .layout{ gap: 32px; }
.webcat-blog-page .posts{ gap: 26px; }}
@media (max-width: 1180px){.webcat-blog-page{ --gutter: 26px; --aside: 260px; }
.webcat-blog-page .posts{ grid-template-columns: repeat(2, 1fr); }
.webcat-blog-page .hero{ grid-template-columns: 1fr; gap: 22px; }
.webcat-blog-page .hero__art{ justify-self: start; max-width: 380px; }
.webcat-blog-page .hero p{ max-width: none; }
.webcat-blog-page .search{ max-width: none; }}
@media (max-width: 900px){.webcat-blog-page .layout{ grid-template-columns: 1fr; }
/* Правая колонка уходит под ленту и раскладывается в две карточки */
.webcat-blog-page .aside{
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 24px;
  }
.webcat-blog-page .card + .card, .webcat-blog-page .help{ margin-top: 0; }
.webcat-blog-page .featured{ grid-template-columns: 1fr; }
.webcat-blog-page .featured__pic{ height: 200px; }
.webcat-blog-page .banner{ grid-template-columns: 1fr; }
.webcat-blog-page .banner__art{ justify-self: start; width: 180px; }}
@media (max-width: 700px){.webcat-blog-page .posts{ grid-template-columns: 1fr; }
.webcat-blog-page .aside{ grid-template-columns: 1fr; }
.webcat-blog-page .tagpick{ margin-left: 0; width: 100%; }
.webcat-blog-page .tagpick select{ width: 100%; }}
@media (max-width: 560px){.webcat-blog-page{ --gutter: 16px; }
.webcat-blog-page{ font-size: 15px; }
.webcat-blog-page .page{ padding-top: 18px; padding-bottom: 44px; }
.webcat-blog-page .crumbs{ font-size: 12px; gap: 7px; }
.webcat-blog-page .featured__body{ padding: 20px; }
.webcat-blog-page .featured__t{ font-size: 19px; }
/* Фильтры прокручиваются лентой, а не переносятся в четыре ряда */
.webcat-blog-page .filters{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 4px;
  }
.webcat-blog-page .filters::-webkit-scrollbar{ display: none; }
.webcat-blog-page .tagpick{ display: none; }
.webcat-blog-page .card, .webcat-blog-page .help{ padding: 18px; }
.webcat-blog-page .banner{ padding: 22px; }
.webcat-blog-page .banner__form{ flex-direction: column; }
.webcat-blog-page .banner__form .btn{ width: 100%; }
.webcat-blog-page .help__d{ max-width: none; }
.webcat-blog-page .help__art{ opacity: .35; }}
/* --------------------------------------------------------------------------
   13. Настройки движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){.webcat-blog-page *, .webcat-blog-page *::before, .webcat-blog-page *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }}
@media print{.webcat-blog-page{ background: #fff; }
.webcat-blog-page .search, .webcat-blog-page .filters, .webcat-blog-page .pager, .webcat-blog-page .aside, .webcat-blog-page .banner{ display: none !important; }
.webcat-blog-page .layout{ grid-template-columns: 1fr; }
.webcat-blog-page .post{ box-shadow: none; break-inside: avoid; }}
/* v1.9.29 blog functional fixes */
.webcat-blog-page .hero{background:transparent!important;color:#4a4e56!important;min-height:0!important;padding:0!important;border:0!important;box-shadow:none!important}
.webcat-blog-page .hero h1{color:#4a4e56!important}
.webcat-blog-page .hero p{color:#55617a!important}
.webcat-blog-page button.tag{border:0;cursor:pointer;font:inherit}
.webcat-blog-page button.tag:hover{background:#dce8ff}

/* --- COOPERATION PAGE: assets/partner/style.css --- */
/* ==========================================================================
   Партнёрство — страница без сайдбара
   Порядок: переменные → база → шапка → секции → формы → карточки →
   модалка → адаптив.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
.webcat-partner-page{
  --c-bg:       #f7f9fc;
  --c-surface:  #ffffff;
  --c-tint:     #f1f5fb;
  --c-text:     #10182b;
  --c-text-2:   #55617a;
  --c-text-3:   #98a2b3;
  --c-border:   #e6ebf3;
  --c-border-2: #d3dbe8;

  --c-accent:      #1f5eef;
  --c-accent-dark: #1745c4;
  --c-accent-soft: #eaf1ff;
  --c-accent-pale: #eef4fe;

  --c-err:      #dc4b4b;
  --c-err-soft: #fdeeee;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;

  --page-max: 1680px;
  --gutter: 40px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.webcat-partner-page *,
.webcat-partner-page *::before,
.webcat-partner-page *::after{ box-sizing: border-box; }

.webcat-partner-page{ -webkit-text-size-adjust: 100%; }

.webcat-partner-page{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.webcat-partner-page img,
.webcat-partner-page svg{ display: block; max-width: 100%; }
.webcat-partner-page ul{ margin: 0; padding: 0; list-style: none; }
.webcat-partner-page h1,
.webcat-partner-page h2,
.webcat-partner-page h3,
.webcat-partner-page p{ margin: 0; }
.webcat-partner-page button,
.webcat-partner-page input,
.webcat-partner-page textarea{ font: inherit; color: inherit; }

.webcat-partner-page a{
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.webcat-partner-page a:hover{ color: var(--c-accent-dark); }

.webcat-partner-page ::selection{ background: #cfe0ff; }

.webcat-partner-page :focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* [hidden] живёт в UA-стилях и проигрывает author-правилам с display */
.webcat-partner-page [hidden]{ display: none !important; }

.webcat-partner-page .visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.webcat-partner-page .page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 56px;
}
.webcat-partner-page .page--narrow{ max-width: 1120px; }

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.webcat-partner-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.webcat-partner-page .btn img{ width: 16px; height: 16px; flex-shrink: 0; }
.webcat-partner-page .btn:active{ transform: translateY(1px); }
.webcat-partner-page .btn[disabled]{ opacity: .6; cursor: default; }
.webcat-partner-page .btn[disabled]:active{ transform: none; }

.webcat-partner-page .btn--primary{ background: var(--c-accent); color: #fff; }
.webcat-partner-page .btn--primary:hover:not([disabled]){ background: var(--c-accent-dark); color: #fff; }

.webcat-partner-page .btn--soft{
  background: var(--c-surface);
  border-color: #c5d8fb;
  color: var(--c-accent);
}
.webcat-partner-page .btn--soft:hover{ background: var(--c-accent-soft); border-color: var(--c-accent); }

.webcat-partner-page .btn--outline{
  background: var(--c-surface);
  border-color: var(--c-border-2);
  color: var(--c-text);
}
.webcat-partner-page .btn--outline:hover{ border-color: var(--c-accent); color: var(--c-accent); }

.webcat-partner-page .btn--lg{ padding: 16px 28px; font-size: 15px; }
.webcat-partner-page .btn--block{ width: 100%; }

.webcat-partner-page .more{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
}
.webcat-partner-page .more img{ width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.webcat-partner-page .more:hover img{ transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Крошки и шапка
   -------------------------------------------------------------------------- */
.webcat-partner-page .crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--c-text-3);
  margin-bottom: 14px;
}
.webcat-partner-page .crumbs a{ color: var(--c-text-2); }
.webcat-partner-page .crumbs a:hover{ color: var(--c-accent); }
.webcat-partner-page .crumbs img{ width: 7px; height: 10px; }

.webcat-partner-page .hero{
  background: #f4f7fb;
  color: #4a4e56;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 32px;
  align-items: center;
  margin-bottom: 26px;
}
.webcat-partner-page .hero h1{
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.webcat-partner-page .hero p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 560px;
}
.webcat-partner-page .hero__art{ justify-self: end; width: 100%; }

/* --------------------------------------------------------------------------
   5. Секции
   -------------------------------------------------------------------------- */
.webcat-partner-page .sect{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 28px;
}
.webcat-partner-page .sect + .sect{ margin-top: 20px; }
.webcat-partner-page .sect--pale{ background: var(--c-accent-pale); border-color: #dde7fb; }

.webcat-partner-page .sect__t{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 16px;
}
.webcat-partner-page .sect__t b{ font-weight: 700; }
.webcat-partner-page .sect__lead{
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   6. Список с галочками
   -------------------------------------------------------------------------- */
.webcat-partner-page .ticks{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.webcat-partner-page .ticks li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-2);
}
.webcat-partner-page .ticks img{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

/* --------------------------------------------------------------------------
   7. Преимущества
   -------------------------------------------------------------------------- */
.webcat-partner-page .benefits{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 8px;
}
.webcat-partner-page .benefit{
  text-align: center;
  padding: 24px 22px;
  border-left: 1px solid var(--c-border);
}
.webcat-partner-page .benefit:first-child{ border-left: 0; }
.webcat-partner-page .benefit__ico{
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 18px;
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-partner-page .benefit__ico img{ width: 34px; height: 34px; }
.webcat-partner-page .benefit__t{ font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.webcat-partner-page .benefit__d{ font-size: 13px; line-height: 1.65; color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   8. Приглашение на проект
   -------------------------------------------------------------------------- */
.webcat-partner-page .invite{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 24px;
  align-items: start;
}
.webcat-partner-page .invite__art{ width: 200px; margin-top: -8px; }

.webcat-partner-page .fgrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.webcat-partner-page .fgrid--1{ grid-template-columns: 1fr; margin-top: 18px; }

.webcat-partner-page .field > label{
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-2);
  margin-bottom: 8px;
}
.webcat-partner-page .field > label i{ font-style: normal; color: var(--c-err); }

.webcat-partner-page .input,
.webcat-partner-page .textarea{
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.webcat-partner-page .input::placeholder,
.webcat-partner-page .textarea::placeholder{ color: var(--c-text-3); }
.webcat-partner-page .input:focus,
.webcat-partner-page .textarea:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 239, .12);
}
.webcat-partner-page .input.is-invalid,
.webcat-partner-page .textarea.is-invalid{ border-color: var(--c-err); }
.webcat-partner-page .textarea{ resize: vertical; min-height: 92px; line-height: 1.6; }

.webcat-partner-page .err{ font-size: 12.5px; color: var(--c-err); margin-top: 6px; }
.webcat-partner-page .err:empty{ display: none; }

/* --------------------------------------------------------------------------
   9. Решения
   -------------------------------------------------------------------------- */
.webcat-partner-page .solutions{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 22px;
}
.webcat-partner-page .solution{
  padding: 24px 20px;
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color var(--dur) var(--ease);
}
.webcat-partner-page .solution:first-child{ border-left: 0; }
.webcat-partner-page .solution:hover{ background: #fbfcfe; }
.webcat-partner-page .solution__ico{
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-partner-page .solution__ico img{ width: 26px; height: 26px; }
.webcat-partner-page .solution__t{ font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.webcat-partner-page .solution__d{
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-text-2);
  flex: 1;
}
.webcat-partner-page .solution .more{ align-self: flex-start; }

.webcat-partner-page .solutions__foot{ text-align: center; margin-top: 22px; }

/* --------------------------------------------------------------------------
   10. Индивидуальная разработка
   -------------------------------------------------------------------------- */
.webcat-partner-page .custom{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 28px;
  align-items: center;
}
.webcat-partner-page .custom__points{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 24px 0;
}
.webcat-partner-page .point{ display: flex; gap: 12px; align-items: flex-start; }
.webcat-partner-page .point img{ width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; }
.webcat-partner-page .point span{ font-size: 12.5px; line-height: 1.6; color: var(--c-text-2); }
.webcat-partner-page .custom__art{ justify-self: end; width: 100%; }

/* --------------------------------------------------------------------------
   11. Нижний призыв
   -------------------------------------------------------------------------- */
.webcat-partner-page .join{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.webcat-partner-page .join__left{ display: flex; align-items: center; gap: 18px; min-width: 0; }
.webcat-partner-page .join__ico{
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.webcat-partner-page .join__ico img{ width: 26px; height: 26px; }
.webcat-partner-page .join__t{ font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.webcat-partner-page .join__d{ font-size: 13px; line-height: 1.6; color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   12. Модальное окно
   -------------------------------------------------------------------------- */
.webcat-partner-page .modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.webcat-partner-page .modal.is-open{ opacity: 1; visibility: visible; }
.webcat-partner-page .modal__scrim{
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 43, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.webcat-partner-page .modal__box{
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--c-surface);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 40px 90px -30px rgba(16, 24, 43, .6);
  transform: translateY(12px) scale(.98);
  transition: transform .24s var(--ease);
}
.webcat-partner-page .modal.is-open .modal__box{ transform: none; }
.webcat-partner-page .modal__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--c-tint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-partner-page .modal__close:hover{ background: #e2e8f4; }
.webcat-partner-page .modal__close img{ width: 17px; height: 17px; }
.webcat-partner-page .modal__box h2{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  padding-right: 36px;
}
.webcat-partner-page .modal__sub{ font-size: 13.5px; line-height: 1.6; color: var(--c-text-2); margin-bottom: 22px; }
.webcat-partner-page .modal .field + .field{ margin-top: 16px; }
.webcat-partner-page .modal__foot{ margin-top: 24px; }

.webcat-partner-page .modal__done{ display: none; text-align: center; }
.webcat-partner-page .modal.is-done .modal__form,
.webcat-partner-page .modal.is-done h2,
.webcat-partner-page .modal.is-done .modal__sub{ display: none; }
.webcat-partner-page .modal.is-done .modal__done{ display: block; }
.webcat-partner-page .modal__done img{ width: 64px; height: 64px; margin: 0 auto 20px; }
.webcat-partner-page .modal__done h3{ font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.webcat-partner-page .modal__done p{ font-size: 14px; line-height: 1.6; color: var(--c-text-2); margin-bottom: 24px; }

/* Уведомление */
.webcat-partner-page .toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 120;
  transform: translate(-50%, 14px);
  background: var(--c-text);
  color: #fff;
  border-radius: var(--r-md);
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 18px 40px -18px rgba(16, 24, 43, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.webcat-partner-page .toast.is-on{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   13. Адаптив
   Пять брейкпоинтов: 1680 — единственный min-width, остальные max-width.
   -------------------------------------------------------------------------- */
@media (min-width: 1680px){
  .webcat-partner-page { --gutter: 64px; }
  .webcat-partner-page .page { padding-top: 34px; padding-bottom: 72px; }
  .webcat-partner-page .sect { padding: 34px; }
  .webcat-partner-page .sect + .sect { margin-top: 24px; }
}

@media (max-width: 1180px) {
  .webcat-partner-page{ --gutter: 26px; }

  /* Пять решений в ряд перестают читаться — переносим в две строки */
  .webcat-partner-page .solutions{ grid-template-columns: repeat(3, 1fr); }
  .webcat-partner-page .solution:nth-child(3n+1){ border-left: 0; }
  .webcat-partner-page .solution:nth-child(n+4){ border-top: 1px solid var(--c-border); }

  .webcat-partner-page .fgrid{ grid-template-columns: repeat(2, 1fr); }
  .webcat-partner-page .custom{ grid-template-columns: 1fr; }
  .webcat-partner-page .custom__art{ justify-self: center; max-width: 380px; }
}

@media (max-width: 900px) {
  .webcat-partner-page .hero{ grid-template-columns: 1fr; gap: 20px; }
  .webcat-partner-page .hero__art{ justify-self: start; max-width: 300px; }
  .webcat-partner-page .hero p{ max-width: none; }

  .webcat-partner-page .benefits{ grid-template-columns: repeat(2, 1fr); }
  .webcat-partner-page .benefit:nth-child(odd){ border-left: 0; }
  .webcat-partner-page .benefit:nth-child(n+3){ border-top: 1px solid var(--c-border); }

  /* Иллюстрация письма только съедает ширину формы */
  .webcat-partner-page .invite{ grid-template-columns: 1fr; }
  .webcat-partner-page .invite__art{ display: none; }

  .webcat-partner-page .custom__points{ grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 700px) {
  .webcat-partner-page .solutions{ grid-template-columns: 1fr; }
  .webcat-partner-page .solution{ border-left: 0; border-top: 1px solid var(--c-border); }
  .webcat-partner-page .solution:first-child{ border-top: 0; }

  .webcat-partner-page .join{ align-items: flex-start; }
  .webcat-partner-page .join .btn{ width: 100%; }
}

@media (max-width: 560px) {
  .webcat-partner-page{ --gutter: 16px; }

  .webcat-partner-page{ font-size: 15px; }
  .webcat-partner-page .page{ padding-top: 18px; padding-bottom: 40px; }

  .webcat-partner-page .crumbs{ font-size: 12.5px; gap: 7px; }
  .webcat-partner-page .sect{ padding: 20px; border-radius: 14px; }
  .webcat-partner-page .sect + .sect{ margin-top: 16px; }

  .webcat-partner-page .benefits{ grid-template-columns: 1fr; }
  .webcat-partner-page .benefit{ border-left: 0; border-top: 1px solid var(--c-border); padding: 22px 0; }
  .webcat-partner-page .benefit:first-child{ border-top: 0; padding-top: 8px; }

  .webcat-partner-page .fgrid{ grid-template-columns: 1fr; }
  .webcat-partner-page .invite__form .btn{ width: 100%; }
  .webcat-partner-page .custom .btn{ width: 100%; }

  .webcat-partner-page .join__left{ flex-direction: column; align-items: flex-start; gap: 14px; }

  .webcat-partner-page .modal__box{ padding: 26px 20px; border-radius: 14px; }
  .webcat-partner-page .toast{ left: 16px; right: 16px; transform: translateY(14px); }
  .webcat-partner-page .toast.is-on{ transform: none; }
}

/* --------------------------------------------------------------------------
   14. Настройки движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .webcat-partner-page *,
  .webcat-partner-page *::before,
  .webcat-partner-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .webcat-partner-page{ background: #fff; }
  .webcat-partner-page .modal,
.webcat-partner-page .toast,
.webcat-partner-page .hero__art,
.webcat-partner-page .invite__art,
.webcat-partner-page .custom__art{ display: none !important; }
  .webcat-partner-page .sect{ box-shadow: none; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   15. Мелочи
   -------------------------------------------------------------------------- */
.webcat-partner-page .invite__submit{ margin-top: 22px; }

.webcat-partner-page{--page-max:1680px}.webcat-partner-page .page--narrow{max-width:1680px}.webcat-partner-page .crumbs{display:none}

/* 1.9.24 — content loaded from Partnership iblock */
.webcat-partner-page .partner-content-from-iblock p{margin:0 0 14px;color:#55617a;line-height:1.7}
.webcat-partner-page .partner-content-from-iblock ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.webcat-partner-page .partner-content-from-iblock li{position:relative;padding-left:28px;color:#374151}
.webcat-partner-page .partner-content-from-iblock li:before{content:"✓";position:absolute;left:0;top:0;color:#2864dc;font-weight:700}

/* --- CONTACTS PAGE: assets/contacts404/webcat.css --- */
.webcat-contacts-page{max-width:1360px;margin:0 auto;padding:40px 0 72px;color:#253046}
.webcat-contacts-page h1, .webcat-contacts-page h2, .webcat-contacts-page h3{color:#4a4e56}
.webcat-contacts-page .wc-hero{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:34px 40px;background:#f1f5fb;border:1px solid #e2e8f0;border-radius:24px;margin-bottom:36px}
.webcat-contacts-page .wc-hero h1{font-size:42px;margin:0 0 12px}
.webcat-contacts-page .wc-hero p{max-width:680px;color:#64748b;line-height:1.65}
.webcat-contacts-page .wc-hero img{width:300px;max-width:38%}
.webcat-contacts-page .wc-contacts-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:32px;align-items:start}
.webcat-contacts-page .wc-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.webcat-contacts-page .wc-ways article, .webcat-contacts-page .wc-panel, .webcat-contacts-page .wc-info{background:#fff;border:1px solid #dfe7f1;border-radius:18px;padding:24px}
.webcat-contacts-page .wc-ways article>img{width:28px;height:28px;margin-bottom:15px}
.webcat-contacts-page .wc-ways h3{font-size:16px;margin:0 0 8px}
.webcat-contacts-page .wc-ways a{color:#155eef;font-weight:600}
.webcat-contacts-page .wc-ways p{color:#64748b;font-size:14px;line-height:1.55}
.webcat-contacts-page .wc-panel h2{margin-top:0}
.webcat-contacts-page .wc-panel form{display:grid;gap:16px}
.webcat-contacts-page .wc-panel label{display:grid;gap:7px;font-weight:600;font-size:14px}
.webcat-contacts-page .wc-panel input, .webcat-contacts-page .wc-panel select, .webcat-contacts-page .wc-panel textarea{width:100%;box-sizing:border-box;border:1px solid #cfd8e6;border-radius:10px;padding:12px 14px;font:inherit;background:#fff;color:#253046}
.webcat-contacts-page .wc-panel textarea{resize:vertical}
.webcat-contacts-page .wc-panel .btn{justify-self:stretch}
.webcat-contacts-page .wc-form-status{margin:0;min-height:20px;font-size:13px}
.webcat-contacts-page .wc-form-status.ok{color:#15803d}
.webcat-contacts-page .wc-form-status.err{color:#b91c1c}
.webcat-contacts-page .wc-info{margin-top:32px;background:#f1f5fb;display:flex;align-items:center;gap:28px}
.webcat-contacts-page .wc-info>img{width:150px}
.webcat-contacts-page .wc-info h2{margin:0 0 8px}
.webcat-contacts-page .wc-info p{color:#64748b}
@media (max-width:980px){.webcat-contacts-page .wc-contacts-grid{grid-template-columns:1fr}
.webcat-contacts-page .wc-hero img{display:none}}
@media (max-width:640px){.webcat-contacts-page{padding-top:20px}
.webcat-contacts-page .wc-hero{padding:24px}
.webcat-contacts-page .wc-hero h1{font-size:34px}
.webcat-contacts-page .wc-ways{grid-template-columns:1fr}
.webcat-contacts-page .wc-info{align-items:flex-start}
.webcat-contacts-page .wc-info>img{width:90px}}
.webcat-contacts-page .wc-section{margin-top:32px}
.webcat-contacts-page .wc-section h2{color:#4a4e56}
.webcat-contacts-page .wc-socials{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.webcat-contacts-page .wc-socials a{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid #dfe7f1;border-radius:14px;background:#fff;color:#4a4e56;font-weight:700}
.webcat-contacts-page .wc-socials img{width:38px;height:38px}
.webcat-contacts-page .wc-socials span{display:grid}
.webcat-contacts-page .wc-socials small{font-weight:500;color:#64748b}
.webcat-contacts-page .wc-process{background:#fff}
@media (max-width:800px){.webcat-contacts-page .wc-socials{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.webcat-contacts-page .wc-socials{grid-template-columns:1fr}}

/* --- Stable outer shell: project width contract --- */
.site-shell {
  width: 100%;
  max-width: var(--page-max, 1680px);
  margin-left: auto;
  margin-right: auto;
  background: var(--c-bg, #f7f9fc);
}


/* === WEBCAT PARTNERS PAGE 1.9.33 === */
/* ==========================================================================
   Наши партнёры
   Порядок: переменные → база → шапка → вкладки → карточки партнёров →
   «Нам доверяют» → призыв → подвал → модалка → адаптив.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
.webcat-partners-page{
  --c-bg:       #f7f9fc;
  --c-surface:  #ffffff;
  --c-tint:     #f1f5fb;
  --c-text:     #10182b;
  --c-text-2:   #55617a;
  --c-text-3:   #98a2b3;
  --c-border:   #e6ebf3;
  --c-border-2: #d3dbe8;

  --c-accent:      #1f5eef;
  --c-accent-dark: #1745c4;
  --c-accent-soft: #eaf1ff;
  --c-accent-pale: #eef4fe;

  --c-ok:  #16a34a;
  --c-err: #dc4b4b;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;

  --page-max: 1680px;
  --gutter: 40px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.webcat-partners-page *, .webcat-partners-page *::before, .webcat-partners-page *::after{ box-sizing: border-box; }

.webcat-partners-page{ -webkit-text-size-adjust: 100%; }

.webcat-partners-page{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.webcat-partners-page body.is-locked{ overflow: hidden; }

.webcat-partners-page img, .webcat-partners-page svg{ display: block; max-width: 100%; }
.webcat-partners-page ul{ margin: 0; padding: 0; list-style: none; }
.webcat-partners-page h1, .webcat-partners-page h2, .webcat-partners-page h3, .webcat-partners-page p{ margin: 0; }
.webcat-partners-page button, .webcat-partners-page input{ font: inherit; color: inherit; }

.webcat-partners-page a{
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.webcat-partners-page a:hover{ color: var(--c-accent-dark); }

.webcat-partners-page ::selection{ background: #cfe0ff; }

.webcat-partners-page :focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* [hidden] живёт в UA-стилях и проигрывает author-правилам с display */
.webcat-partners-page [hidden]{ display: none !important; }

.webcat-partners-page .visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.webcat-partners-page .page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
}
.webcat-partners-page .page--narrow{ max-width: 1640px; }

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.webcat-partners-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.webcat-partners-page .btn:active{ transform: translateY(1px); }
.webcat-partners-page .btn[disabled]{ opacity: .6; cursor: default; }

.webcat-partners-page .btn--primary{ background: var(--c-accent); color: #fff; }
.webcat-partners-page .btn--primary:hover:not([disabled]){ background: var(--c-accent-dark); color: #fff; }

.webcat-partners-page .btn--soft{
  background: var(--c-surface);
  border-color: #c5d8fb;
  color: var(--c-accent);
}
.webcat-partners-page .btn--soft:hover{ background: var(--c-accent-soft); border-color: var(--c-accent); }

.webcat-partners-page .btn--outline{
  background: var(--c-surface);
  border-color: var(--c-border-2);
  color: var(--c-text);
}
.webcat-partners-page .btn--outline:hover{ border-color: var(--c-accent); color: var(--c-accent); }

.webcat-partners-page .btn--lg{ padding: 15px 28px; font-size: 15px; }
.webcat-partners-page .btn--block{ width: 100%; }

.webcat-partners-page .more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.webcat-partners-page .more img{ width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.webcat-partners-page .more:hover img{ transform: translateX(3px); }

.webcat-partners-page .center{ text-align: center; margin-top: 26px; }

/* --------------------------------------------------------------------------
   4. Крошки и шапка
   -------------------------------------------------------------------------- */
.webcat-partners-page .crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--c-text-3);
  margin-bottom: 14px;
}
.webcat-partners-page .crumbs a{ color: var(--c-text-2); }
.webcat-partners-page .crumbs a:hover{ color: var(--c-accent); }
.webcat-partners-page .crumbs img{ width: 7px; height: 10px; }

.webcat-partners-page .hero{
  background: #f4f7fb;
  color: #4a4e56;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 32px;
  align-items: center;
  margin-bottom: 28px;
}
.webcat-partners-page .hero h1{
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin-bottom: 16px;
}
.webcat-partners-page .hero p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 460px;
}
.webcat-partners-page .hero__art{ justify-self: end; width: 100%; }

/* --------------------------------------------------------------------------
   5. Вкладки категорий
   -------------------------------------------------------------------------- */
.webcat-partners-page .tabs{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
  margin-bottom: 30px;
}
.webcat-partners-page .tabs button{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 12px 20px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-2);
  text-align: center;
  line-height: 1.35;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.webcat-partners-page .tabs button::after{
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  background: transparent;
  transition: background-color var(--dur) var(--ease);
}
.webcat-partners-page .tabs button:hover{ background: #fbfcfe; color: var(--c-text); }
.webcat-partners-page .tabs button img{ width: 24px; height: 24px; }
.webcat-partners-page .tabs button[aria-selected="true"]{ color: var(--c-accent); font-weight: 600; }
.webcat-partners-page .tabs button[aria-selected="true"]::after{ background: var(--c-accent); }

/* --------------------------------------------------------------------------
   6. Карточки партнёров
   -------------------------------------------------------------------------- */
.webcat-partners-page .sect{ margin-bottom: 30px; }
.webcat-partners-page .sect__t{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}

.webcat-partners-page .partners{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.webcat-partners-page .partner{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.webcat-partners-page .partner:hover{
  border-color: #c5d8fb;
  box-shadow: 0 20px 42px -26px rgba(16, 24, 43, .3);
  transform: translateY(-3px);
}
.webcat-partners-page .partner__logo{
  height: 56px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.webcat-partners-page .partner__logo img{ max-height: 56px; width: auto; }
.webcat-partners-page .partner__status{ font-size: 13.5px; font-weight: 700; }
.webcat-partners-page .partner__d{
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text-2);
  flex: 1;
}
.webcat-partners-page .partner .more{ align-self: flex-start; margin-top: 4px; }

/* Пусто */
.webcat-partners-page .empty{
  display: none;
  text-align: center;
  background: var(--c-surface);
  border: 1px dashed var(--c-border-2);
  border-radius: var(--r-xl);
  padding: 48px 24px;
  font-size: 14px;
  color: var(--c-text-2);
}
.webcat-partners-page .empty.is-on{ display: block; }

/* --------------------------------------------------------------------------
   7. Нам доверяют
   -------------------------------------------------------------------------- */
.webcat-partners-page .trust{
  background: var(--c-tint);
  border: 1px solid #e2e9f4;
  border-radius: var(--r-xl);
  padding: 30px;
  margin-bottom: 26px;
}
.webcat-partners-page .trust__t{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.webcat-partners-page .trust__d{
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-text-2);
  margin-bottom: 26px;
  max-width: 460px;
}

.webcat-partners-page .stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 28px;
}
.webcat-partners-page .stat{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 24px;
  border-left: 1px solid var(--c-border-2);
}
.webcat-partners-page .stat:first-child{ border-left: 0; padding-left: 0; }
.webcat-partners-page .stat__ico{
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.webcat-partners-page .stat__ico img{ width: 22px; height: 22px; }
.webcat-partners-page .stat__v{
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.webcat-partners-page .stat__k{ font-size: 12.5px; color: var(--c-text-2); margin-top: 3px; }

/* Логотипы клиентов */
.webcat-partners-page .clients{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.webcat-partners-page .client{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.webcat-partners-page .client:hover{ border-color: var(--c-border-2); transform: translateY(-2px); }
.webcat-partners-page .client img{ max-height: 42px; width: auto; }

/* --------------------------------------------------------------------------
   8. Нижний призыв
   -------------------------------------------------------------------------- */
.webcat-partners-page .join{
  background: var(--c-accent-pale);
  border: 1px solid #dde7fb;
  border-radius: var(--r-xl);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.webcat-partners-page .join__left{ display: flex; align-items: center; gap: 20px; min-width: 0; }
.webcat-partners-page .join__ico{
  width: 58px;
  height: 58px;
  border-radius: var(--r-lg);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.webcat-partners-page .join__ico img{ width: 28px; height: 28px; }
.webcat-partners-page .join__t{ font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.webcat-partners-page .join__d{ font-size: 13.5px; line-height: 1.7; color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   9. Подвал
   -------------------------------------------------------------------------- */
.webcat-partners-page .foot{
  margin-top: 34px;
  border-top: 1px solid var(--c-border);
  padding: 24px 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--c-text-3);
}
.webcat-partners-page .foot nav{ display: flex; gap: 26px; flex-wrap: wrap; }
.webcat-partners-page .foot nav a{ color: var(--c-text-2); }
.webcat-partners-page .foot nav a:hover{ color: var(--c-accent); }

/* --------------------------------------------------------------------------
   10. Модальное окно
   -------------------------------------------------------------------------- */
.webcat-partners-page .modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.webcat-partners-page .modal.is-open{ opacity: 1; visibility: visible; }
.webcat-partners-page .modal__scrim{
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 43, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.webcat-partners-page .modal__box{
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--c-surface);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 40px 90px -30px rgba(16, 24, 43, .6);
  transform: translateY(12px) scale(.98);
  transition: transform .24s var(--ease);
}
.webcat-partners-page .modal.is-open .modal__box{ transform: none; }
.webcat-partners-page .modal__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--c-tint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-partners-page .modal__close:hover{ background: #e2e8f4; }
.webcat-partners-page .modal__close img{ width: 17px; height: 17px; }
.webcat-partners-page .modal__box h2{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  padding-right: 36px;
}
.webcat-partners-page .modal__sub{ font-size: 13.5px; line-height: 1.6; color: var(--c-text-2); margin-bottom: 22px; }

.webcat-partners-page .field + .field{ margin-top: 16px; }
.webcat-partners-page .field > label{
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-2);
  margin-bottom: 7px;
}
.webcat-partners-page .field > label i{ font-style: normal; color: var(--c-err); }

.webcat-partners-page .input, .webcat-partners-page .textarea{
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.webcat-partners-page .input::placeholder, .webcat-partners-page .textarea::placeholder{ color: var(--c-text-3); }
.webcat-partners-page .input:focus, .webcat-partners-page .textarea:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 239, .12);
}
.webcat-partners-page .input.is-invalid, .webcat-partners-page .textarea.is-invalid{ border-color: var(--c-err); }
.webcat-partners-page .textarea{ resize: vertical; min-height: 84px; line-height: 1.6; }

.webcat-partners-page .err{ font-size: 12.5px; color: var(--c-err); margin-top: 6px; }
.webcat-partners-page .err:empty{ display: none; }

.webcat-partners-page .modal__foot{ margin-top: 24px; }

.webcat-partners-page .modal__done{ display: none; text-align: center; }
.webcat-partners-page .modal.is-done .modal__form, .webcat-partners-page .modal.is-done h2, .webcat-partners-page .modal.is-done .modal__sub{ display: none; }
.webcat-partners-page .modal.is-done .modal__done{ display: block; }
.webcat-partners-page .modal__done img{ width: 64px; height: 64px; margin: 0 auto 20px; }
.webcat-partners-page .modal__done h3{ font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.webcat-partners-page .modal__done p{ font-size: 14px; line-height: 1.6; color: var(--c-text-2); margin-bottom: 24px; }

/* Уведомление */
.webcat-partners-page .toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 120;
  transform: translate(-50%, 14px);
  background: var(--c-text);
  color: #fff;
  border-radius: var(--r-md);
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 18px 40px -18px rgba(16, 24, 43, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.webcat-partners-page .toast.is-on{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   11. Адаптив
   Пять брейкпоинтов: 1680 — единственный min-width, остальные max-width.
   -------------------------------------------------------------------------- */
@media (min-width: 1680px) {
  .webcat-partners-page{ --gutter: 64px; }
  .webcat-partners-page .page{ padding-top: 32px; }
  .webcat-partners-page .partners{ gap: 26px; }
  .webcat-partners-page .trust{ padding: 36px; }
}

@media (max-width: 1180px) {
  .webcat-partners-page{ --gutter: 26px; }

  .webcat-partners-page .partners{ grid-template-columns: repeat(2, 1fr); }
  .webcat-partners-page .tabs{ grid-template-columns: repeat(3, 1fr); }
  .webcat-partners-page .tabs button:nth-child(n/**/+4){ border-top: 1px solid var(--c-border); }
  .webcat-partners-page .clients{ grid-template-columns: repeat(3, 1fr); }

  .webcat-partners-page .hero{ grid-template-columns: 1fr; gap: 22px; }
  .webcat-partners-page .hero__art{ justify-self: start; max-width: 340px; }
  .webcat-partners-page .hero p{ max-width: none; }
}

@media (max-width: 900px) {
  /* Показатели: разделители слева врут при переносе — рисуем сетку 2×2 */
  .webcat-partners-page .stats{ grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .webcat-partners-page .stat:nth-child(odd){ border-left: 0; padding-left: 0; }
  .webcat-partners-page .clients{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .webcat-partners-page .partners{ grid-template-columns: 1fr; }
  .webcat-partners-page .tabs{ grid-template-columns: repeat(2, 1fr); }
  .webcat-partners-page .tabs button:nth-child(n/**/+3){ border-top: 1px solid var(--c-border); }

  .webcat-partners-page .join{ align-items: flex-start; }
  .webcat-partners-page .join .btn{ width: 100%; }
}

@media (max-width: 560px) {
  .webcat-partners-page{ --gutter: 16px; }

  .webcat-partners-page{ font-size: 15px; }
  .webcat-partners-page .page{ padding-top: 18px; }

  .webcat-partners-page .crumbs{ font-size: 12px; gap: 7px; }
  .webcat-partners-page .tabs{ grid-template-columns: 1fr; }
  .webcat-partners-page .tabs button{
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 18px;
    text-align: left;
  }
  .webcat-partners-page .tabs button::after{ left: 18px; right: 18px; }
  .webcat-partners-page .tabs button:nth-child(n/**/+2){ border-top: 1px solid var(--c-border); }

  .webcat-partners-page .partner{ padding: 20px; }
  .webcat-partners-page .trust{ padding: 20px; }
  .webcat-partners-page .stats{ grid-template-columns: 1fr; gap: 20px; }
  .webcat-partners-page .stat{ border-left: 0; padding: 0; }
  .webcat-partners-page .clients{ grid-template-columns: 1fr; }

  .webcat-partners-page .join{ padding: 20px; }
  .webcat-partners-page .join__left{ flex-direction: column; align-items: flex-start; gap: 14px; }

  .webcat-partners-page .foot{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .webcat-partners-page .foot nav{ gap: 16px; }

  .webcat-partners-page .modal__box{ padding: 26px 20px; border-radius: 14px; }
  .webcat-partners-page .toast{ left: 16px; right: 16px; transform: translateY(14px); }
  .webcat-partners-page .toast.is-on{ transform: none; }
}

/* --------------------------------------------------------------------------
   12. Настройки движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .webcat-partners-page *, .webcat-partners-page *::before, .webcat-partners-page *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .webcat-partners-page{ background: #fff; }
  .webcat-partners-page .modal, .webcat-partners-page .toast, .webcat-partners-page .tabs, .webcat-partners-page .hero__art, .webcat-partners-page .join{ display: none !important; }
  .webcat-partners-page .partner, .webcat-partners-page .client{ box-shadow: none; break-inside: avoid; }
}



/* === WEBCAT KNOWLEDGE PAGE 1.9.33 === */
/* ==========================================================================
   База знаний
   Порядок: переменные → база → шапка сайта → hero → категории →
   статьи и вопросы → поддержка → подвал → адаптив.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
.webcat-knowledge-page{
  --c-bg:       #ffffff;
  --c-surface:  #ffffff;
  --c-tint:     #f1f5fc;
  --c-pale:     #eef4fe;
  --c-text:     #10182b;
  --c-text-2:   #55617a;
  --c-text-3:   #98a2b3;
  --c-border:   #e6ebf3;
  --c-border-2: #d3dbe8;

  --c-accent:      #1f5eef;
  --c-accent-dark: #1745c4;
  --c-accent-soft: #eaf1ff;

  --c-ok:  #16a34a;
  --c-err: #dc4b4b;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;

  --page-max: 1680px;
  --gutter: 40px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.webcat-knowledge-page *, .webcat-knowledge-page *::before, .webcat-knowledge-page *::after{ box-sizing: border-box; }

.webcat-knowledge-page{ -webkit-text-size-adjust: 100%; }

.webcat-knowledge-page{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.webcat-knowledge-page img, .webcat-knowledge-page svg{ display: block; max-width: 100%; }
.webcat-knowledge-page ul{ margin: 0; padding: 0; list-style: none; }
.webcat-knowledge-page h1, .webcat-knowledge-page h2, .webcat-knowledge-page h3, .webcat-knowledge-page p{ margin: 0; }
.webcat-knowledge-page button, .webcat-knowledge-page input{ font: inherit; color: inherit; }

.webcat-knowledge-page a{
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.webcat-knowledge-page a:hover{ color: var(--c-accent-dark); }

.webcat-knowledge-page ::selection{ background: #cfe0ff; }

.webcat-knowledge-page :focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* [hidden] живёт в UA-стилях и проигрывает author-правилам с display */
.webcat-knowledge-page [hidden]{ display: none !important; }

.webcat-knowledge-page .visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.webcat-knowledge-page .wrap{
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.webcat-knowledge-page .wrap--narrow{ max-width: 1680px; }

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.webcat-knowledge-page .btn:active{ transform: translateY(1px); }
.webcat-knowledge-page .btn[disabled]{ opacity: .6; cursor: default; }

.webcat-knowledge-page .btn--soft{
  background: var(--c-surface);
  border-color: #c5d8fb;
  color: var(--c-accent);
}
.webcat-knowledge-page .btn--soft:hover{ background: var(--c-accent-soft); border-color: var(--c-accent); }


.webcat-knowledge-page .more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.webcat-knowledge-page .more img{ width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.webcat-knowledge-page .more:hover img{ transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Шапка раздела
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .hero{
  background: var(--c-tint);
  border-radius: var(--r-xl);
  margin: 20px 0 34px;
  padding: 30px;
}
.webcat-knowledge-page .hero__in{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 32px;
  align-items: center;
}

.webcat-knowledge-page .crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--c-text-3);
  margin-bottom: 18px;
}
.webcat-knowledge-page .crumbs a{ color: var(--c-text-2); }
.webcat-knowledge-page .crumbs a:hover{ color: var(--c-accent); }
.webcat-knowledge-page .crumbs img{ width: 7px; height: 10px; }

.webcat-knowledge-page .hero h1{
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin-bottom: 16px;
}
.webcat-knowledge-page .hero p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-text-2);
  margin-bottom: 24px;
  max-width: 460px;
}
.webcat-knowledge-page .hero__art{ justify-self: end; width: 100%; }

.webcat-knowledge-page .search{
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 620px;
}
.webcat-knowledge-page .search__field{
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.webcat-knowledge-page .search input{
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 15px 16px 15px 46px;
  font-size: 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.webcat-knowledge-page .search input::placeholder{ color: var(--c-text-3); }
.webcat-knowledge-page .search input:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 239, .12);
}
.webcat-knowledge-page .search__ico{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.webcat-knowledge-page .search .btn{ flex: 0 0 auto; min-width: 108px; }
.webcat-knowledge-page .search .err{ position: absolute; left: 2px; top: calc(100% + 6px); }

/* --------------------------------------------------------------------------
   6. Секции
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .sect{ margin-bottom: 30px; }
.webcat-knowledge-page .sect__t{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}

.webcat-knowledge-page .panel{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 24px;
}
.webcat-knowledge-page .panel--tint{ background: var(--c-tint); border-color: #e2e9f4; }
.webcat-knowledge-page .panel--pale{ background: var(--c-pale); border-color: #dde7fb; }
.webcat-knowledge-page .panel__t{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   7. Категории
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .cats{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.webcat-knowledge-page .cat{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.webcat-knowledge-page .cat:hover{
  border-color: #c5d8fb;
  box-shadow: 0 18px 38px -26px rgba(16, 24, 43, .3);
  transform: translateY(-3px);
}
.webcat-knowledge-page .cat__ico{
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.webcat-knowledge-page .cat__ico img{ width: 22px; height: 22px; }
.webcat-knowledge-page .cat__t{ font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--c-text); }
.webcat-knowledge-page .cat__d{ font-size: 12px; line-height: 1.55; color: var(--c-text-2); flex: 1; }
.webcat-knowledge-page .cat__n{ font-size: 12px; color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   8. Популярные статьи и вопросы
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.webcat-knowledge-page .arts li{ border-bottom: 1px solid var(--c-border); }
.webcat-knowledge-page .arts li:last-child{ border-bottom: 0; }
.webcat-knowledge-page .arts a{
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  color: inherit;
}
.webcat-knowledge-page .arts a:hover{ color: inherit; }
.webcat-knowledge-page .arts a:hover .arts__t{ color: var(--c-accent); }
.webcat-knowledge-page .arts__ico{ width: 20px; height: 20px; }
.webcat-knowledge-page .arts__main{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.webcat-knowledge-page .arts__t{ font-size: 14px; transition: color var(--dur) var(--ease); }
.webcat-knowledge-page .views{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--c-text-3);
  white-space: nowrap;
}
.webcat-knowledge-page .views img{ width: 16px; height: 16px; }

.webcat-knowledge-page .chip{
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.webcat-knowledge-page .panel__foot{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); }

/* Вопросы */
.webcat-knowledge-page .faq li{ border-bottom: 1px solid var(--c-border-2); }
.webcat-knowledge-page .faq li:last-child{ border-bottom: 0; }
.webcat-knowledge-page .faq__q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}
.webcat-knowledge-page .faq__q:hover{ color: var(--c-accent); }
.webcat-knowledge-page .faq__q img{ width: 20px; height: 20px; flex-shrink: 0; }
.webcat-knowledge-page .faq__q .faq__minus{ display: none; }
.webcat-knowledge-page .faq__q[aria-expanded="true"] .faq__plus{ display: none; }
.webcat-knowledge-page .faq__q[aria-expanded="true"] .faq__minus{ display: block; }
.webcat-knowledge-page .faq__a{
  padding: 0 40px 18px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-text-2);
}

/* --------------------------------------------------------------------------
   9. Недавние статьи
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .recent{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.webcat-knowledge-page .recent__item{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 4px 22px;
  border-left: 1px solid var(--c-border);
  color: inherit;
}
.webcat-knowledge-page .recent__item:first-child{ border-left: 0; padding-left: 0; }
.webcat-knowledge-page .recent__item:hover{ color: inherit; }
.webcat-knowledge-page .recent__item:hover .recent__t{ color: var(--c-accent); }
.webcat-knowledge-page .recent__ico{
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-knowledge-page .recent__ico img{ width: 20px; height: 20px; }
.webcat-knowledge-page .recent__t{
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
  transition: color var(--dur) var(--ease);
}
.webcat-knowledge-page .recent__meta{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-text-3);
}

/* --------------------------------------------------------------------------
   10. Поддержка и ресурсы
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .support{
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 440px);
  gap: 28px;
  align-items: center;
}
.webcat-knowledge-page .support__art{ width: 140px; }
.webcat-knowledge-page .support__t{ font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.webcat-knowledge-page .support__d{ font-size: 13.5px; line-height: 1.7; color: var(--c-text-2); margin-bottom: 20px; }

.webcat-knowledge-page .res{ background: var(--c-surface); border-radius: var(--r-lg); padding: 22px; }
.webcat-knowledge-page .res__t{ font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.webcat-knowledge-page .res li{ border-top: 1px solid var(--c-border); }
.webcat-knowledge-page .res li:first-of-type{ border-top: 0; }
.webcat-knowledge-page .res a{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  color: inherit;
}
.webcat-knowledge-page .res a:hover{ color: inherit; }
.webcat-knowledge-page .res a:hover .res__n{ color: var(--c-accent); }
.webcat-knowledge-page .res__ico{
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-knowledge-page .res__ico img{ width: 18px; height: 18px; }
.webcat-knowledge-page .res__n{ font-size: 13.5px; font-weight: 600; margin-bottom: 4px; transition: color var(--dur) var(--ease); }
.webcat-knowledge-page .res__d{ font-size: 12px; color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   12. Сообщения об ошибках
   -------------------------------------------------------------------------- */
.webcat-knowledge-page .err{ font-size: 12.5px; color: var(--c-err); margin-top: 6px; }
.webcat-knowledge-page .err:empty{ display: none; }


/* --------------------------------------------------------------------------
   13. Адаптив
   Пять брейкпоинтов: 1680 — единственный min-width, остальные max-width.
   -------------------------------------------------------------------------- */
@media (min-width: 1680px) {
  .webcat-knowledge-page{ --gutter: 64px; }
  .webcat-knowledge-page .hero{ padding: 40px; }
  .webcat-knowledge-page .cats{ gap: 22px; }
}

@media (max-width: 1240px) {
  .webcat-knowledge-page{ --gutter: 26px; }
  .webcat-knowledge-page .cats{ grid-template-columns: repeat(3, 1fr); }
  .webcat-knowledge-page .support{ grid-template-columns: 120px minmax(0, 1fr); }
  .webcat-knowledge-page .support__art{ width: 120px; }
  .webcat-knowledge-page .support .res{ grid-column: 1 / -1; }
}

/* Верхнее меню сворачивается в бургер */
@media (max-width: 1000px) {
  .webcat-knowledge-page .hero__in{ grid-template-columns: 1fr; gap: 22px; }
  .webcat-knowledge-page .hero__art{ justify-self: start; max-width: 320px; }
  .webcat-knowledge-page .hero p{ max-width: none; }
  .webcat-knowledge-page .search{ max-width: none; }

  .webcat-knowledge-page .split{ grid-template-columns: 1fr; }

  /* Разделители слева врут при переносе — рисуем сетку 2×2 */
  .webcat-knowledge-page .recent{ grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .webcat-knowledge-page .recent__item:nth-child(odd){ border-left: 0; padding-left: 0; }
}

@media (max-width: 700px) {
  .webcat-knowledge-page .cats{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .webcat-knowledge-page{ --gutter: 16px; }

  .webcat-knowledge-page{ font-size: 15px; }

  .webcat-knowledge-page .hero{ padding: 20px; margin-top: 16px; }
  .webcat-knowledge-page .crumbs{ font-size: 12px; gap: 7px; }

  .webcat-knowledge-page .cats{ grid-template-columns: 1fr; }
  .webcat-knowledge-page .panel{ padding: 18px; }
  .webcat-knowledge-page .recent{ grid-template-columns: 1fr; gap: 22px; }
  .webcat-knowledge-page .recent__item{ border-left: 0; padding: 0; }

  .webcat-knowledge-page .support{ grid-template-columns: 1fr; }
  .webcat-knowledge-page .support__art{ display: none; }
  .webcat-knowledge-page .support .btn{ width: 100%; }

  .webcat-knowledge-page .arts a{ grid-template-columns: 20px minmax(0, 1fr); }
  .webcat-knowledge-page .arts .views{ grid-column: 2; }


}

/* --------------------------------------------------------------------------
   14. Настройки движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .webcat-knowledge-page *, .webcat-knowledge-page *::before, .webcat-knowledge-page *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .webcat-knowledge-page{ background: #fff; }
  .webcat-knowledge-page .hero__art, .webcat-knowledge-page .support__art, .webcat-knowledge-page .search{ display: none !important; }
  .webcat-knowledge-page .panel, .webcat-knowledge-page .cat{ box-shadow: none; break-inside: avoid; }
}


@media (max-width: 560px){
  .webcat-knowledge-page .search{ flex-direction: column; }
  .webcat-knowledge-page .search .btn{ width: 100%; }
}


/* === webcat.prosite 1.9.36: partner detail (scoped) === */
/* ==========================================================================
   Партнёр — детальная страница
   Файл назван уникально (partner-1c.css), переменные и классы с префиксом
   --p- / .p- , чтобы не конфликтовать с другими страницами сайта.
   Порядок: переменные → база → шапка → вкладки → блоки → карусели →
   призыв → адаптив.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page{
  --p-bg:       #ffffff;
  --p-surface:  #ffffff;
  --p-tint:     #f4f7fc;
  --p-pale:     #eef4fe;
  --p-text:     #10182b;
  --p-text-2:   #55617a;
  --p-text-3:   #98a2b3;
  --p-border:   #e6ebf3;
  --p-border-2: #d3dbe8;

  --p-accent:      #1f5eef;
  --p-accent-dark: #1745c4;
  --p-accent-soft: #eaf1ff;

  --p-red: #e21a1a;

  --p-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --p-r-sm: 8px;
  --p-r-md: 10px;
  --p-r-lg: 14px;
  --p-r-xl: 16px;

  --p-max: 1680px;
  --p-gutter: 36px;

  --p-ease: cubic-bezier(.4, 0, .2, 1);
  --p-dur: .2s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page *, .webcat-partner-detail-page *::before, .webcat-partner-detail-page *::after{ box-sizing: border-box; }

.webcat-partner-detail-page{
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--p-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  max-width: var(--p-max);
  margin: 0 auto;
  padding: 22px var(--p-gutter) 56px;
}

.webcat-partner-detail-page img, .webcat-partner-detail-page svg{ display: block; max-width: 100%; }
.webcat-partner-detail-page ul{ margin: 0; padding: 0; list-style: none; }
.webcat-partner-detail-page h1, .webcat-partner-detail-page h2, .webcat-partner-detail-page h3, .webcat-partner-detail-page p, .webcat-partner-detail-page figure, .webcat-partner-detail-page blockquote{ margin: 0; }
.webcat-partner-detail-page button{ font: inherit; color: inherit; }

.webcat-partner-detail-page a{
  color: var(--p-accent);
  text-decoration: none;
  transition: color var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page a:hover{ color: var(--p-accent-dark); }

.webcat-partner-detail-page :focus-visible{
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* [hidden] живёт в UA-стилях и проигрывает author-правилам с display */
.webcat-partner-detail-page [hidden]{ display: none !important; }

.webcat-partner-detail-page .p-vh{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page .p-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--p-r-md);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--p-dur) var(--p-ease),
              border-color var(--p-dur) var(--p-ease),
              color var(--p-dur) var(--p-ease),
              transform var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-btn img{ width: 16px; height: 16px; flex-shrink: 0; }
.webcat-partner-detail-page .p-btn:active{ transform: translateY(1px); }
.webcat-partner-detail-page .p-btn[disabled]{ opacity: .6; cursor: default; }

.webcat-partner-detail-page .p-btn--primary{ background: var(--p-accent); color: #fff; }
.webcat-partner-detail-page .p-btn--primary:hover:not([disabled]){ background: var(--p-accent-dark); color: #fff; }

.webcat-partner-detail-page .p-btn--soft{
  background: var(--p-surface);
  border-color: #c5d8fb;
  color: var(--p-accent);
}
.webcat-partner-detail-page .p-btn--soft:hover{ background: var(--p-accent-soft); border-color: var(--p-accent); }

.webcat-partner-detail-page .p-btn--block{ width: 100%; }

.webcat-partner-detail-page .p-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.webcat-partner-detail-page .p-more img{ width: 15px; height: 15px; transition: transform var(--p-dur) var(--p-ease); }
.webcat-partner-detail-page .p-more:hover img{ transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Крошки и шапка
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page .p-crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--p-text-3);
  margin-bottom: 16px;
}
.webcat-partner-detail-page .p-crumbs a{ color: var(--p-text-2); }
.webcat-partner-detail-page .p-crumbs a:hover{ color: var(--p-accent); }
.webcat-partner-detail-page .p-crumbs img{ width: 7px; height: 10px; }

.webcat-partner-detail-page .p-hero{
  background: var(--p-tint);
  border-radius: var(--p-r-xl);
  padding: 30px;
  margin-bottom: 26px;
}
.webcat-partner-detail-page .p-hero__in{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 32px;
  align-items: center;
}
.webcat-partner-detail-page .p-hero__head{ display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.webcat-partner-detail-page .p-hero__logo{ width: 88px; height: 88px; flex-shrink: 0; }
.webcat-partner-detail-page .p-hero h1{
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.webcat-partner-detail-page .p-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--p-accent);
  color: #fff;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
}
.webcat-partner-detail-page .p-status img{ width: 16px; height: 16px; }
.webcat-partner-detail-page .p-hero__d{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--p-text-2);
  max-width: 440px;
}
.webcat-partner-detail-page .p-hero__art{ justify-self: end; width: 100%; }

/* Показатели */
.webcat-partner-detail-page .p-facts{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  margin-top: 26px;
}
.webcat-partner-detail-page .p-fact{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-left: 1px solid var(--p-border);
}
.webcat-partner-detail-page .p-fact:first-child{ border-left: 0; }
.webcat-partner-detail-page .p-fact__ico{
  width: 42px;
  height: 42px;
  border-radius: var(--p-r-md);
  background: var(--p-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.webcat-partner-detail-page .p-fact__ico img{ width: 22px; height: 22px; }
.webcat-partner-detail-page .p-fact__t{ font-size: 13.5px; font-weight: 600; line-height: 1.4; }

/* --------------------------------------------------------------------------
   5. Вкладки
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page .p-tabs{
  display: flex;
  gap: 30px;
  border-bottom: 1px solid var(--p-border);
  margin-bottom: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.webcat-partner-detail-page .p-tabs::-webkit-scrollbar{ display: none; }
.webcat-partner-detail-page .p-tabs button{
  position: relative;
  padding: 0 0 14px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--p-text-2);
  white-space: nowrap;
  transition: color var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-tabs button::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background-color var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-tabs button:hover{ color: var(--p-text); }
.webcat-partner-detail-page .p-tabs button[aria-selected="true"]{ color: var(--p-accent); font-weight: 600; }
.webcat-partner-detail-page .p-tabs button[aria-selected="true"]::after{ background: var(--p-accent); }

/* --------------------------------------------------------------------------
   6. Секции и панели
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page .p-sect{ margin-bottom: 26px; }
.webcat-partner-detail-page .p-sect__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.webcat-partner-detail-page .p-sect__t{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.webcat-partner-detail-page .p-panel{
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-xl);
  padding: 24px;
}
.webcat-partner-detail-page .p-panel--tint{ background: var(--p-tint); border-color: #e2e9f4; }
.webcat-partner-detail-page .p-panel--pale{ background: var(--p-pale); border-color: #dde7fb; }
.webcat-partner-detail-page .p-panel__t{
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}

/* О партнёре */
.webcat-partner-detail-page .p-about{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.webcat-partner-detail-page .p-about__d{
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--p-text-2);
  margin-bottom: 22px;
}
.webcat-partner-detail-page .p-about__btns{ display: flex; gap: 14px; flex-wrap: wrap; }

.webcat-partner-detail-page .p-skills{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 22px;
}
.webcat-partner-detail-page .p-skills li{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--p-text-2);
}
.webcat-partner-detail-page .p-skills img{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

/* Услуги */
.webcat-partner-detail-page .p-services{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.webcat-partner-detail-page .p-service{
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--p-dur) var(--p-ease),
              box-shadow var(--p-dur) var(--p-ease),
              transform var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-service:hover{
  border-color: #c5d8fb;
  box-shadow: 0 18px 38px -26px rgba(16, 24, 43, .3);
  transform: translateY(-3px);
}
.webcat-partner-detail-page .p-service__ico{
  width: 44px;
  height: 44px;
  border-radius: var(--p-r-md);
  background: var(--p-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.webcat-partner-detail-page .p-service__ico img{ width: 22px; height: 22px; }
.webcat-partner-detail-page .p-service__t{ font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--p-text); }
.webcat-partner-detail-page .p-service__d{ font-size: 12px; line-height: 1.6; color: var(--p-text-2); }

/* Сертификаты и результаты */
.webcat-partner-detail-page .p-split{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.webcat-partner-detail-page .p-certs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.webcat-partner-detail-page .p-cert{
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  padding: 0;
  overflow: hidden;
}
.webcat-partner-detail-page .p-cert img{ width: 100%; height: auto; margin-bottom: 14px; }
.webcat-partner-detail-page .p-cert__t{ font-size: 13px; font-weight: 600; line-height: 1.45; margin-bottom: 14px; }
.webcat-partner-detail-page .p-cert__d{ font-size: 11.5px; color: var(--p-text-3); }

.webcat-partner-detail-page .p-results{ display: flex; flex-direction: column; gap: 18px; }
.webcat-partner-detail-page .p-result{ display: flex; align-items: center; gap: 14px; }
.webcat-partner-detail-page .p-result__ico{
  width: 40px;
  height: 40px;
  border-radius: var(--p-r-md);
  background: var(--p-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.webcat-partner-detail-page .p-result__ico img{ width: 20px; height: 20px; }
.webcat-partner-detail-page .p-result__v{ font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.webcat-partner-detail-page .p-result__k{ font-size: 12.5px; color: var(--p-text-2); margin-top: 2px; }

/* --------------------------------------------------------------------------
   7. Карусели
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page .p-nav{ display: flex; gap: 8px; }
.webcat-partner-detail-page .p-nav button{
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--p-border-2);
  border-radius: 50%;
  background: var(--p-surface);
  cursor: pointer;
  transition: border-color var(--p-dur) var(--p-ease), opacity var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-nav button:hover:not([disabled]){ border-color: var(--p-accent); }
.webcat-partner-detail-page .p-nav button[disabled]{ opacity: .4; cursor: default; }
.webcat-partner-detail-page .p-nav img{ width: 16px; height: 16px; }

.webcat-partner-detail-page .p-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.webcat-partner-detail-page .p-track::-webkit-scrollbar{ display: none; }

.webcat-partner-detail-page .p-work{
  scroll-snap-align: start;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  overflow: hidden;
  transition: border-color var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-work:hover{ border-color: #c5d8fb; box-shadow: 0 18px 38px -26px rgba(16, 24, 43, .3); }
.webcat-partner-detail-page .p-work__pic{ width: 100%; height: auto; }
.webcat-partner-detail-page .p-work__body{ padding: 16px; }
.webcat-partner-detail-page .p-work__tag{
  display: inline-block;
  background: var(--p-accent-soft);
  color: var(--p-accent-dark);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 10px;
}
.webcat-partner-detail-page .p-work__t{ font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.webcat-partner-detail-page .p-work__d{ font-size: 12px; line-height: 1.6; color: var(--p-text-2); }

/* Отзывы */
.webcat-partner-detail-page .p-reviews{ position: relative; }
.webcat-partner-detail-page .p-review{
  display: none;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
}
.webcat-partner-detail-page .p-review.is-on{ display: grid; }
.webcat-partner-detail-page .p-review__logo{ width: 140px; }
.webcat-partner-detail-page .p-review__q{
  position: relative;
  font-size: 14px;
  line-height: 1.75;
  color: var(--p-text-2);
  padding-left: 28px;
}
.webcat-partner-detail-page .p-review__q::before{
  content: "“";
  position: absolute;
  left: 0;
  top: -10px;
  font-size: 44px;
  line-height: 1;
  color: var(--p-border-2);
}
.webcat-partner-detail-page .p-review__who{ display: flex; align-items: center; gap: 12px; }
.webcat-partner-detail-page .p-review__who img{ width: 48px; height: 48px; border-radius: 50%; }
.webcat-partner-detail-page .p-review__n{ font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.webcat-partner-detail-page .p-review__r{ font-size: 12px; color: var(--p-text-3); }

.webcat-partner-detail-page .p-reviews__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.webcat-partner-detail-page .p-dots{ display: flex; gap: 8px; margin: 0 auto; }
.webcat-partner-detail-page .p-dots button{
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--p-border-2);
  cursor: pointer;
  transition: background-color var(--p-dur) var(--p-ease), width var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-dots button[aria-current="true"]{ background: var(--p-accent); width: 20px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   8. Призыв
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page .p-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.webcat-partner-detail-page .p-cta__left{ display: flex; align-items: center; gap: 20px; min-width: 0; }
.webcat-partner-detail-page .p-cta__ico{
  width: 56px;
  height: 56px;
  border-radius: var(--p-r-lg);
  background: var(--p-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.webcat-partner-detail-page .p-cta__ico img{ width: 28px; height: 28px; }
.webcat-partner-detail-page .p-cta__t{ font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.webcat-partner-detail-page .p-cta__d{ font-size: 13.5px; line-height: 1.65; color: var(--p-text-2); }

/* --------------------------------------------------------------------------
   9. Модальное окно
   -------------------------------------------------------------------------- */
.webcat-partner-detail-page .p-modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--p-ease), visibility .2s var(--p-ease);
}
.webcat-partner-detail-page .p-modal.is-open{ opacity: 1; visibility: visible; }
.webcat-partner-detail-page .p-modal__scrim{
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 43, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.webcat-partner-detail-page .p-modal__box{
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--p-surface);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 40px 90px -30px rgba(16, 24, 43, .6);
  transform: translateY(12px) scale(.98);
  transition: transform .24s var(--p-ease);
}
.webcat-partner-detail-page .p-modal.is-open .p-modal__box{ transform: none; }
.webcat-partner-detail-page .p-modal__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--p-tint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-partner-detail-page .p-modal__close:hover{ background: #e6ecf7; }
.webcat-partner-detail-page .p-modal__close img{ width: 17px; height: 17px; }
.webcat-partner-detail-page .p-modal__box h2{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  padding-right: 36px;
}
.webcat-partner-detail-page .p-modal__sub{ font-size: 13.5px; line-height: 1.6; color: var(--p-text-2); margin-bottom: 22px; }

.webcat-partner-detail-page .p-field + .p-field{ margin-top: 16px; }
.webcat-partner-detail-page .p-field > label{
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--p-text-2);
  margin-bottom: 7px;
}
.webcat-partner-detail-page .p-field > label i{ font-style: normal; color: #dc4b4b; }

.webcat-partner-detail-page .p-input, .webcat-partner-detail-page .p-textarea{
  width: 100%;
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--p-r-sm);
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease);
}
.webcat-partner-detail-page .p-input::placeholder, .webcat-partner-detail-page .p-textarea::placeholder{ color: var(--p-text-3); }
.webcat-partner-detail-page .p-input:focus, .webcat-partner-detail-page .p-textarea:focus{
  outline: none;
  border-color: var(--p-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 239, .12);
}
.webcat-partner-detail-page .p-input.is-invalid, .webcat-partner-detail-page .p-textarea.is-invalid{ border-color: #dc4b4b; }
.webcat-partner-detail-page .p-textarea{ resize: vertical; min-height: 84px; line-height: 1.6; }

.webcat-partner-detail-page .p-err{ font-size: 12.5px; color: #dc4b4b; margin-top: 6px; }
.webcat-partner-detail-page .p-err:empty{ display: none; }

.webcat-partner-detail-page .p-modal__foot{ margin-top: 24px; }

.webcat-partner-detail-page .p-modal__done{ display: none; text-align: center; }
.webcat-partner-detail-page .p-modal.is-done .p-modal__form, .webcat-partner-detail-page .p-modal.is-done h2, .webcat-partner-detail-page .p-modal.is-done .p-modal__sub{ display: none; }
.webcat-partner-detail-page .p-modal.is-done .p-modal__done{ display: block; }
.webcat-partner-detail-page .p-modal__done img{ width: 64px; height: 64px; margin: 0 auto 20px; }
.webcat-partner-detail-page .p-modal__done h3{ font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.webcat-partner-detail-page .p-modal__done p{ font-size: 14px; line-height: 1.6; color: var(--p-text-2); margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   10. Адаптив
   -------------------------------------------------------------------------- */
@media (min-width: 1680px) {
  .webcat-partner-detail-page{ --p-gutter: 56px; }
  .webcat-partner-detail-page{ padding-top: 30px; padding-bottom: 72px; }
  .webcat-partner-detail-page .p-hero{ padding: 40px; }
}

@media (max-width: 1180px) {
  .webcat-partner-detail-page{ --p-gutter: 26px; }
  .webcat-partner-detail-page .p-services{ grid-template-columns: repeat(3, 1fr); }
  .webcat-partner-detail-page .p-split{ grid-template-columns: 1fr; }
  .webcat-partner-detail-page .p-certs{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .webcat-partner-detail-page .p-hero__in{ grid-template-columns: 1fr; gap: 22px; }
  .webcat-partner-detail-page .p-hero__art{ justify-self: start; max-width: 340px; }
  .webcat-partner-detail-page .p-hero__d{ max-width: none; }

  /* Разделители слева врут при переносе — рисуем сетку 2×2 */
  .webcat-partner-detail-page .p-facts{ grid-template-columns: repeat(2, 1fr); }
  .webcat-partner-detail-page .p-fact:nth-child(odd){ border-left: 0; }
  .webcat-partner-detail-page .p-fact:nth-child(n/**/+3){ border-top: 1px solid var(--p-border); }

  .webcat-partner-detail-page .p-about{ grid-template-columns: 1fr; }
  .webcat-partner-detail-page .p-certs{ grid-template-columns: repeat(2, 1fr); }

  .webcat-partner-detail-page .p-review{ grid-template-columns: 1fr; gap: 18px; }
  .webcat-partner-detail-page .p-review__logo{ width: 120px; }
}

@media (max-width: 700px) {
  .webcat-partner-detail-page .p-services{ grid-template-columns: repeat(2, 1fr); }
  .webcat-partner-detail-page .p-skills{ grid-template-columns: 1fr; }
  .webcat-partner-detail-page .p-certs{ grid-template-columns: 1fr; }
  .webcat-partner-detail-page .p-cta .p-btn{ width: 100%; }
}

@media (max-width: 560px) {
  .webcat-partner-detail-page{ --p-gutter: 16px; }

  .webcat-partner-detail-page{ font-size: 15px; padding-top: 16px; padding-bottom: 40px; }
  .webcat-partner-detail-page .p-crumbs{ font-size: 12px; gap: 7px; }

  .webcat-partner-detail-page .p-hero{ padding: 20px; }
  .webcat-partner-detail-page .p-hero__head{ gap: 16px; }
  .webcat-partner-detail-page .p-hero__logo{ width: 64px; height: 64px; }

  .webcat-partner-detail-page .p-facts{ grid-template-columns: 1fr; }
  .webcat-partner-detail-page .p-fact{ border-left: 0; border-top: 1px solid var(--p-border); }
  .webcat-partner-detail-page .p-fact:first-child{ border-top: 0; }

  .webcat-partner-detail-page .p-services{ grid-template-columns: 1fr; }
  .webcat-partner-detail-page .p-panel{ padding: 18px; }
  .webcat-partner-detail-page .p-about__btns .p-btn{ width: 100%; }
  .webcat-partner-detail-page .p-cta__left{ flex-direction: column; align-items: flex-start; gap: 14px; }

  .webcat-partner-detail-page .p-modal__box{ padding: 26px 20px; border-radius: 14px; }
}

/* --------------------------------------------------------------------------
   11. Настройки движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .webcat-partner-detail-page *, .webcat-partner-detail-page *::before, .webcat-partner-detail-page *::after{ transition-duration: .01ms !important; }
  .webcat-partner-detail-page .p-track{ scroll-behavior: auto; }
}

@media print {
  .webcat-partner-detail-page{ max-width: none; padding: 0; }
  .webcat-partner-detail-page .p-modal, .webcat-partner-detail-page .p-nav, .webcat-partner-detail-page .p-tabs, .webcat-partner-detail-page .p-hero__art, .webcat-partner-detail-page .p-dots{ display: none !important; }
  .webcat-partner-detail-page .p-panel, .webcat-partner-detail-page .p-service, .webcat-partner-detail-page .p-cert{ box-shadow: none; break-inside: avoid; }
}


/* === webcat.prosite 1.9.36: knowledge detail (scoped) === */
/* ==========================================================================
   Статья базы знаний
   Файл намеренно назван уникально (kb-article.css), чтобы не конфликтовать
   с другими страницами сайта по URL и не попадать в чужой кэш.
   Порядок: переменные → база → шапка статьи → тело → врезки →
   правая колонка → адаптив.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные
   Префикс --a- (article) не пересекается с переменными других страниц.
   -------------------------------------------------------------------------- */
.webcat-knowledge-detail-page{
  --a-bg:       #ffffff;
  --a-surface:  #ffffff;
  --a-tint:     #f4f7fc;
  --a-pale:     #eef4fe;
  --a-text:     #10182b;
  --a-text-2:   #55617a;
  --a-text-3:   #98a2b3;
  --a-border:   #e6ebf3;
  --a-border-2: #d3dbe8;

  --a-accent:      #1f5eef;
  --a-accent-dark: #1745c4;
  --a-accent-soft: #eaf1ff;

  --a-ok:      #16a34a;
  --a-ok-soft: #eaf7ef;
  --a-ok-line: #c7e9d5;

  --a-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --a-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --a-r-sm: 8px;
  --a-r-md: 10px;
  --a-r-lg: 14px;

  --a-max: 1680px;
  --a-gutter: 36px;
  --a-aside: 300px;

  --a-ease: cubic-bezier(.4, 0, .2, 1);
  --a-dur: .2s;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
.webcat-knowledge-detail-page *, .webcat-knowledge-detail-page *::before, .webcat-knowledge-detail-page *::after{ box-sizing: border-box; }

.webcat-knowledge-detail-page{
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--a-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  max-width: var(--a-max);
  margin: 0 auto;
  padding: 22px var(--a-gutter) 56px;
}

.webcat-knowledge-detail-page img, .webcat-knowledge-detail-page svg{ display: block; max-width: 100%; }
.webcat-knowledge-detail-page ul, .webcat-knowledge-detail-page ol{ margin: 0; padding: 0; list-style: none; }
.webcat-knowledge-detail-page h1, .webcat-knowledge-detail-page h2, .webcat-knowledge-detail-page h3, .webcat-knowledge-detail-page p{ margin: 0; }
.webcat-knowledge-detail-page button{ font: inherit; color: inherit; }

.webcat-knowledge-detail-page a{
  color: var(--a-accent);
  text-decoration: none;
  transition: color var(--a-dur) var(--a-ease);
}
.webcat-knowledge-detail-page a:hover{ color: var(--a-accent-dark); }

.webcat-knowledge-detail-page :focus-visible{
  outline: 2px solid var(--a-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* [hidden] живёт в UA-стилях и проигрывает author-правилам с display */
.webcat-knowledge-detail-page [hidden]{ display: none !important; }

.webcat-knowledge-detail-page .a-vh{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.webcat-knowledge-detail-page .a-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--a-r-md);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--a-dur) var(--a-ease),
              border-color var(--a-dur) var(--a-ease),
              color var(--a-dur) var(--a-ease),
              transform var(--a-dur) var(--a-ease);
}
.webcat-knowledge-detail-page .a-btn img{ width: 16px; height: 16px; flex-shrink: 0; }
.webcat-knowledge-detail-page .a-btn:active{ transform: translateY(1px); }

.webcat-knowledge-detail-page .a-btn--primary{ background: var(--a-accent); color: #fff; }
.webcat-knowledge-detail-page .a-btn--primary:hover{ background: var(--a-accent-dark); color: #fff; }

.webcat-knowledge-detail-page .a-btn--soft{
  background: var(--a-surface);
  border-color: #c5d8fb;
  color: var(--a-accent);
}
.webcat-knowledge-detail-page .a-btn--soft:hover{ background: var(--a-accent-soft); border-color: var(--a-accent); }

.webcat-knowledge-detail-page .a-btn--block{ width: 100%; }

.webcat-knowledge-detail-page .a-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.webcat-knowledge-detail-page .a-more img{ width: 15px; height: 15px; transition: transform var(--a-dur) var(--a-ease); }
.webcat-knowledge-detail-page .a-more:hover img{ transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Крошки и шапка статьи
   -------------------------------------------------------------------------- */
.webcat-knowledge-detail-page .a-crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--a-text-3);
  margin-bottom: 26px;
}
.webcat-knowledge-detail-page .a-crumbs a{ color: var(--a-text-2); }
.webcat-knowledge-detail-page .a-crumbs a:hover{ color: var(--a-accent); }
.webcat-knowledge-detail-page .a-crumbs span[aria-hidden]{ color: var(--a-border-2); }

.webcat-knowledge-detail-page .a-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--a-aside);
  gap: 30px;
  align-items: start;
}

.webcat-knowledge-detail-page .a-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.webcat-knowledge-detail-page .a-tag{
  background: var(--a-accent-soft);
  color: var(--a-accent-dark);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
}
.webcat-knowledge-detail-page .a-upd{ font-size: 13px; color: var(--a-text-2); }

.webcat-knowledge-detail-page .a-title{
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 16px;
}
.webcat-knowledge-detail-page .a-lead{
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--a-text-2);
  margin-bottom: 24px;
}

.webcat-knowledge-detail-page .a-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--a-border);
  margin-bottom: 26px;
}
.webcat-knowledge-detail-page .a-meta__left, .webcat-knowledge-detail-page .a-meta__right{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.webcat-knowledge-detail-page .a-fact{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--a-text-2);
}
.webcat-knowledge-detail-page .a-fact img{ width: 18px; height: 18px; }

.webcat-knowledge-detail-page .a-tool{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--a-text-2);
  transition: color var(--a-dur) var(--a-ease);
}
.webcat-knowledge-detail-page .a-tool:hover{ color: var(--a-accent); }
.webcat-knowledge-detail-page .a-tool img{ width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   5. Тело статьи
   -------------------------------------------------------------------------- */
.webcat-knowledge-detail-page .a-body h2{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 34px 0 14px;
  scroll-margin-top: 20px;
}
.webcat-knowledge-detail-page .a-body h2:first-child{ margin-top: 0; }
.webcat-knowledge-detail-page .a-body p{
  font-size: 14px;
  line-height: 1.8;
  color: var(--a-text-2);
}
.webcat-knowledge-detail-page .a-body p + p{ margin-top: 12px; }

/* Маркированный список */
.webcat-knowledge-detail-page .a-list{ margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.webcat-knowledge-detail-page .a-list li{
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--a-text-2);
}
.webcat-knowledge-detail-page .a-list li::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a-border-2);
}

/* Нумерованный список с кружками */
.webcat-knowledge-detail-page .a-steps{ margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.webcat-knowledge-detail-page .a-steps li{
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--a-text-2);
}
.webcat-knowledge-detail-page .a-steps__n{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--a-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcat-knowledge-detail-page .a-steps b{ color: var(--a-text); font-weight: 600; }

/* Врезки */
.webcat-knowledge-detail-page .a-note{
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  border-radius: var(--a-r-md);
  padding: 18px 20px;
  margin: 22px 0;
}
.webcat-knowledge-detail-page .a-note img{ width: 20px; height: 20px; margin-top: 2px; }
.webcat-knowledge-detail-page .a-note__t{ font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.webcat-knowledge-detail-page .a-note p{ font-size: 13.5px; line-height: 1.7; color: var(--a-text-2); }
.webcat-knowledge-detail-page .a-note--info{ background: var(--a-pale); }
.webcat-knowledge-detail-page .a-note--ok{ background: var(--a-ok-soft); border: 1px solid var(--a-ok-line); }
.webcat-knowledge-detail-page .a-note--ok .a-note__t{ color: #14804a; }
.webcat-knowledge-detail-page .a-note .a-more{ margin-top: 12px; }

/* Карточка загрузки */
.webcat-knowledge-detail-page .a-dl{
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-md);
  padding: 18px 20px;
  margin-top: 18px;
}
.webcat-knowledge-detail-page .a-dl img.a-dl__ico{ width: 24px; height: 24px; }
.webcat-knowledge-detail-page .a-dl__t{ font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.webcat-knowledge-detail-page .a-dl__d{ font-size: 12.5px; line-height: 1.6; color: var(--a-text-2); }

/* Код */
.webcat-knowledge-detail-page .a-code{
  position: relative;
  background: var(--a-tint);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-md);
  padding: 15px 52px 15px 18px;
  margin-top: 16px;
  font-family: var(--a-mono);
  font-size: 13px;
  color: var(--a-text);
  overflow-x: auto;
  white-space: pre;
}
.webcat-knowledge-detail-page .a-copy{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  transition: background-color var(--a-dur) var(--a-ease);
}
.webcat-knowledge-detail-page .a-copy:hover{ background: #e6ecf7; }
.webcat-knowledge-detail-page .a-copy img{ width: 18px; height: 18px; }
.webcat-knowledge-detail-page .a-copy .a-copy__ok{ display: none; }
.webcat-knowledge-detail-page .a-copy.is-done .a-copy__ico{ display: none; }
.webcat-knowledge-detail-page .a-copy.is-done .a-copy__ok{ display: block; }

/* Оценка статьи */
.webcat-knowledge-detail-page .a-rate{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  padding: 20px 24px;
  margin-top: 34px;
}
.webcat-knowledge-detail-page .a-rate__t{ font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.webcat-knowledge-detail-page .a-rate__d{ font-size: 13px; color: var(--a-text-2); }
.webcat-knowledge-detail-page .a-rate__btns{ display: flex; gap: 12px; }
.webcat-knowledge-detail-page .a-rate.is-done .a-rate__btns{ display: none; }
.webcat-knowledge-detail-page .a-rate__ok{ display: none; font-size: 13.5px; font-weight: 600; color: var(--a-ok); }
.webcat-knowledge-detail-page .a-rate.is-done .a-rate__ok{ display: block; }

/* --------------------------------------------------------------------------
   6. Правая колонка
   -------------------------------------------------------------------------- */
.webcat-knowledge-detail-page .a-aside{ position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }

.webcat-knowledge-detail-page .a-card{
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  padding: 20px;
}
.webcat-knowledge-detail-page .a-card--pale{ background: var(--a-pale); border-color: #dde7fb; }
.webcat-knowledge-detail-page .a-card__t{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 14px;
}

/* Содержание */
.webcat-knowledge-detail-page .a-toc{ display: flex; flex-direction: column; gap: 2px; }
.webcat-knowledge-detail-page .a-toc a{
  display: block;
  padding: 8px 10px;
  border-radius: var(--a-r-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--a-text-2);
  transition: background-color var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease);
}
.webcat-knowledge-detail-page .a-toc a:hover{ background: var(--a-tint); color: var(--a-text); }
.webcat-knowledge-detail-page .a-toc a.is-current{
  background: var(--a-accent-soft);
  color: var(--a-accent-dark);
  font-weight: 600;
}

/* Не нашли ответ */
.webcat-knowledge-detail-page .a-help__ico{
  width: 48px;
  height: 48px;
  border-radius: var(--a-r-md);
  background: var(--a-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.webcat-knowledge-detail-page .a-help__ico img{ width: 26px; height: 26px; }
.webcat-knowledge-detail-page .a-help__d{
  font-size: 13px;
  line-height: 1.6;
  color: var(--a-text-2);
  margin-bottom: 16px;
}

/* Рекомендуемые */
.webcat-knowledge-detail-page .a-rec{ display: flex; flex-direction: column; gap: 4px; }
.webcat-knowledge-detail-page .a-rec a{
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 9px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--a-text-2);
}
.webcat-knowledge-detail-page .a-rec a:hover{ color: var(--a-accent); }
.webcat-knowledge-detail-page .a-rec img{ width: 20px; height: 20px; margin-top: 1px; }

/* Теги */
.webcat-knowledge-detail-page .a-tags{ display: flex; flex-wrap: wrap; gap: 9px; }
.webcat-knowledge-detail-page .a-tags a{
  background: var(--a-tint);
  color: var(--a-text-2);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12.5px;
  transition: background-color var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease);
}
.webcat-knowledge-detail-page .a-tags a:hover{ background: var(--a-accent-soft); color: var(--a-accent-dark); }

/* Обучение */
.webcat-knowledge-detail-page .a-learn__ico{
  width: 48px;
  height: 48px;
  border-radius: var(--a-r-md);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.webcat-knowledge-detail-page .a-learn__ico img{ width: 28px; height: 28px; }
.webcat-knowledge-detail-page .a-learn__t{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.webcat-knowledge-detail-page .a-learn__d{
  font-size: 13px;
  line-height: 1.65;
  color: var(--a-text-2);
  margin-bottom: 18px;
}

/* Уведомление */
.webcat-knowledge-detail-page .a-toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 120;
  transform: translate(-50%, 14px);
  background: var(--a-text);
  color: #fff;
  border-radius: var(--a-r-md);
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 18px 40px -18px rgba(16, 24, 43, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--a-ease), transform .22s var(--a-ease), visibility .22s var(--a-ease);
}
.webcat-knowledge-detail-page .a-toast.is-on{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   7. Адаптив
   -------------------------------------------------------------------------- */
@media (min-width: 1680px) {
  .webcat-knowledge-detail-page{ --a-gutter: 56px; --a-aside: 320px; }
  .webcat-knowledge-detail-page{ padding-top: 30px; padding-bottom: 72px; }
  .webcat-knowledge-detail-page .a-layout{ gap: 36px; }
}

@media (max-width: 1180px) {
  .webcat-knowledge-detail-page{ --a-gutter: 26px; --a-aside: 260px; }
}

@media (max-width: 900px) {
  .webcat-knowledge-detail-page .a-layout{ grid-template-columns: 1fr; gap: 26px; }
  /* Содержание в липкой колонке под статьёй теряет смысл */
  .webcat-knowledge-detail-page .a-aside{ position: static; }
  .webcat-knowledge-detail-page .a-toc-card{ order: -1; }
}

@media (max-width: 620px) {
  .webcat-knowledge-detail-page{ --a-gutter: 16px; }

  .webcat-knowledge-detail-page{ font-size: 15px; padding-top: 16px; padding-bottom: 40px; }
  .webcat-knowledge-detail-page .a-crumbs{ font-size: 12px; gap: 6px; margin-bottom: 18px; }
  .webcat-knowledge-detail-page .a-head{ flex-wrap: wrap; gap: 10px; }

  .webcat-knowledge-detail-page .a-meta{ gap: 14px; }
  .webcat-knowledge-detail-page .a-meta__left, .webcat-knowledge-detail-page .a-meta__right{ gap: 18px; width: 100%; }

  .webcat-knowledge-detail-page .a-dl{ grid-template-columns: 24px minmax(0, 1fr); }
  .webcat-knowledge-detail-page .a-dl .a-btn{ grid-column: 1 / -1; width: 100%; }

  .webcat-knowledge-detail-page .a-rate{ padding: 18px; }
  .webcat-knowledge-detail-page .a-rate__btns{ width: 100%; }
  .webcat-knowledge-detail-page .a-rate__btns .a-btn{ flex: 1; }

  .webcat-knowledge-detail-page .a-card{ padding: 18px; }
  .webcat-knowledge-detail-page .a-toast{ left: 16px; right: 16px; transform: translateY(14px); }
  .webcat-knowledge-detail-page .a-toast.is-on{ transform: none; }
}

/* --------------------------------------------------------------------------
   8. Настройки движения и печать
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .webcat-knowledge-detail-page *, .webcat-knowledge-detail-page *::before, .webcat-knowledge-detail-page *::after{ transition-duration: .01ms !important; }
}

@media print {
  .webcat-knowledge-detail-page{ max-width: none; padding: 0; }
  .webcat-knowledge-detail-page .a-layout{ grid-template-columns: 1fr; }
  .webcat-knowledge-detail-page .a-aside, .webcat-knowledge-detail-page .a-meta__right, .webcat-knowledge-detail-page .a-rate, .webcat-knowledge-detail-page .a-copy, .webcat-knowledge-detail-page .a-toast{ display: none !important; }
  .webcat-knowledge-detail-page .a-note, .webcat-knowledge-detail-page .a-dl, .webcat-knowledge-detail-page .a-code{ break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   9. Мелочи, о которых легко забыть
   -------------------------------------------------------------------------- */
.webcat-knowledge-detail-page .a-card__foot{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--a-border); }

/* Код внутри абзацев и врезок */
.webcat-knowledge-detail-page code{
  font-family: var(--a-mono);
  font-size: .92em;
  background: var(--a-tint);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--a-text);
}
.webcat-knowledge-detail-page .a-note--ok code{ background: #dcf0e4; }



/* webcat 404 page — fully scoped, loaded with the base template CSS so that
   component-generated 404 responses cannot miss their styles. */
.webcat-404-page{
  --wc404-text:#10182b;--wc404-text2:#64748b;--wc404-border:#dfe7f1;--wc404-accent:#155eef;--wc404-soft:#edf3ff;
  width:100%;max-width:1520px;margin:0 auto;padding:28px 32px 72px;color:var(--wc404-text);box-sizing:border-box
}
.webcat-404-page *,.webcat-404-page *::before,.webcat-404-page *::after{box-sizing:border-box}
.webcat-404-page .wc404-crumbs{display:flex;align-items:center;gap:8px;margin:0 0 26px;font-size:13px;color:#94a3b8}
.webcat-404-page .wc404-crumbs a{color:#64748b;text-decoration:none}.webcat-404-page .wc404-crumbs a:hover{color:var(--wc404-accent)}
.webcat-404-page .wc404-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:48px;align-items:center;margin-bottom:34px}
.webcat-404-page .wc404-code{margin:0 0 18px;font-size:clamp(88px,10vw,150px);font-weight:800;letter-spacing:-.05em;line-height:.88;color:var(--wc404-accent)}
.webcat-404-page .wc404-hero h1{margin:0 0 18px;font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.03em;color:#4a4e56}
.webcat-404-page .wc404-lead{max-width:590px;margin:0;color:var(--wc404-text2);font-size:15px;line-height:1.75}
.webcat-404-page .wc404-art{width:100%;height:auto;justify-self:end}
.webcat-404-page .wc404-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.webcat-404-page .wc404-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:10px;font:600 14px/1 Inter,Arial,sans-serif;text-decoration:none;cursor:pointer;transition:.18s ease}
.webcat-404-page .wc404-btn img{width:18px;height:18px}.webcat-404-page .wc404-btn--primary{background:var(--wc404-accent);color:#fff}.webcat-404-page .wc404-btn--primary:hover{background:#0f4fd4;color:#fff}
.webcat-404-page .wc404-btn--outline{background:#fff;border-color:#cfd8e6;color:#4a4e56}.webcat-404-page .wc404-btn--outline:hover{border-color:#9eb9ea;background:#f8fbff}
.webcat-404-page .wc404-section{margin-top:30px}.webcat-404-page .wc404-section__title{margin:0 0 18px;font-size:20px;color:#4a4e56}
.webcat-404-page .wc404-search{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:center;padding:22px;background:#fff;border:1px solid var(--wc404-border);border-radius:18px}
.webcat-404-page .wc404-search__icon{width:64px;height:64px;border-radius:16px;background:var(--wc404-soft);display:flex;align-items:center;justify-content:center}.webcat-404-page .wc404-search__icon img{width:30px;height:30px}
.webcat-404-page .wc404-search__body label{display:block;margin-bottom:10px;font-size:14px;font-weight:700;color:#4a4e56}
.webcat-404-page .wc404-search__field{position:relative}.webcat-404-page .wc404-search__field input{width:100%;height:46px;border:1px solid #cfd8e6;border-radius:10px;padding:0 48px 0 14px;background:#fff;color:#4a4e56;font:inherit;outline:0}
.webcat-404-page .wc404-search__field input:focus{border-color:#8fb1ee;box-shadow:0 0 0 3px rgba(21,94,239,.08)}
.webcat-404-page .wc404-search__field button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:7px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.webcat-404-page .wc404-search__field button:hover{background:#f1f5fb}
.webcat-404-page .wc404-hints{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.webcat-404-page .wc404-hint{min-width:0;padding:22px 18px;background:#fff;border:1px solid var(--wc404-border);border-radius:18px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:11px;transition:.18s ease;color:#4a4e56}
.webcat-404-page .wc404-hint:hover{transform:translateY(-3px);border-color:#c5d8fb;box-shadow:0 16px 34px -28px rgba(16,24,43,.45)}
.webcat-404-page .wc404-hint__icon{width:56px;height:56px;border-radius:16px;background:var(--wc404-soft);display:flex;align-items:center;justify-content:center}.webcat-404-page .wc404-hint__icon img{width:26px;height:26px}
.webcat-404-page .wc404-hint strong{font-size:14px}.webcat-404-page .wc404-hint span:not(.wc404-hint__icon){font-size:12.5px;line-height:1.6;color:var(--wc404-text2);flex:1}.webcat-404-page .wc404-hint em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--wc404-accent)}
.webcat-404-page .wc404-help{display:grid;grid-template-columns:200px minmax(0,1fr);gap:30px;align-items:center;padding:28px 32px;background:#f1f5fb;border:1px solid #dde7fb;border-radius:20px}.webcat-404-page .wc404-help>img{width:200px;height:auto}.webcat-404-page .wc404-help h2{margin:0 0 10px;color:#4a4e56;font-size:20px}.webcat-404-page .wc404-help p{margin:0;max-width:600px;color:var(--wc404-text2);line-height:1.7}.webcat-404-page .wc404-help .wc404-actions{margin-top:18px}.webcat-404-page .wc404-more{color:var(--wc404-accent);font-size:13px;font-weight:600;text-decoration:none}
@media(min-width:1680px){.webcat-404-page{padding-top:34px;padding-bottom:72px}}
@media(max-width:980px){.webcat-404-page .wc404-hero{grid-template-columns:1fr 320px}.webcat-404-page .wc404-hints{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.webcat-404-page{padding:22px 18px 48px}.webcat-404-page .wc404-hero{grid-template-columns:1fr}.webcat-404-page .wc404-art{display:none}.webcat-404-page .wc404-hints{grid-template-columns:1fr 1fr}.webcat-404-page .wc404-help{grid-template-columns:1fr}.webcat-404-page .wc404-help>img{width:150px}.webcat-404-page .wc404-search{grid-template-columns:1fr}.webcat-404-page .wc404-search__icon{display:none}}
@media(max-width:480px){.webcat-404-page .wc404-hints{grid-template-columns:1fr}.webcat-404-page .wc404-actions,.webcat-404-page .wc404-btn{width:100%}}

@media (max-width: 640px){
  .webcat-blog-page .search{ flex-direction: column; }
  .webcat-blog-page .search__submit{ width: 100%; }
}


/* webcat.prosite 1.9.40 final functional fixes */
.good__saving,.solution__saving,.price-saving{color:#159447;font-size:13px;font-weight:600}
.solution__saving{font-size:12px}
.solution__pricing{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;width:100%}
.solution__price-side{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.solution__price-old{font-family:var(--font-mono);font-size:13px;color:var(--c-text-3);text-decoration:line-through;text-decoration-thickness:1.4px}
.solution__price{margin-bottom:0}
.catalog-page .good__price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.catalog-page .good__price-side{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.catalog-page .good__saving{margin:0}

.webcat-partner-detail-page .p-cert img{margin-bottom:0!important}
.webcat-partner-detail-page .p-hero__actions{margin-top:18px}
.detail .case-review-layout{grid-template-columns:minmax(0,1.85fr) minmax(260px,.35fr)}
@media(max-width:820px){.detail .case-review-layout{grid-template-columns:1fr}}

/* v1.9.43 partner competencies: title above subtitle */
.webcat-partner-detail-page .p-skills li > span{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
}
.webcat-partner-detail-page .p-skills li > span > b{
  display:block;
  font-weight:700;
  color:var(--p-text);
  line-height:1.35;
}
.webcat-partner-detail-page .p-skills li > span > small{
  display:block;
  font-size:12.5px;
  line-height:1.55;
  color:var(--p-text-2);
}

/* ========================================================================== */
/* About page — scoped, 1680px, no global selectors                           */
/* ========================================================================== */
.webcat-about-page {
  --ab-bg:#fff; --ab-surface:#fff; --ab-tint:#f5f8fd; --ab-pale:#eff4fe;
  --ab-text:#0f172a; --ab-text-2:#55617a; --ab-text-3:#98a2b3;
  --ab-border:#e8ecf4; --ab-border-2:#d5dced; --ab-accent:var(--c-accent,#2563eb);
  --ab-r-md:10px; --ab-r-lg:14px;
  width:100%; max-width:1680px; margin:0 auto; padding:26px var(--gutter) 72px;
  background:var(--ab-bg); color:var(--ab-text); box-sizing:border-box;
}
.webcat-about-page *, .webcat-about-page *::before, .webcat-about-page *::after { box-sizing:border-box; }
.webcat-about-page img { display:block; max-width:100%; }
.webcat-about-page h1,.webcat-about-page h2,.webcat-about-page h3,.webcat-about-page p,.webcat-about-page ul { margin:0; }
.webcat-about-page ul { padding:0; list-style:none; }
.webcat-about-page .ab-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:26px; font-size:13px; color:var(--ab-text-3); }
.webcat-about-page .ab-crumbs a { color:var(--ab-text-2); text-decoration:none; }
.webcat-about-page .ab-crumbs a:hover { color:var(--ab-accent); }
.webcat-about-page .ab-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,560px); gap:40px; align-items:center; margin-bottom:56px; }
.webcat-about-page .ab-hero__eyebrow { margin-bottom:10px; color:var(--ab-accent); font-size:15px; font-weight:700; }
.webcat-about-page .ab-hero h1 { margin-bottom:20px; font-size:clamp(38px,4.5vw,60px); line-height:1.05; letter-spacing:-.04em; color:#4a4e56; }
.webcat-about-page .ab-partner { display:inline-flex; align-items:center; gap:11px; margin-bottom:22px; padding:9px 18px 9px 10px; border:1px solid var(--ab-border); border-radius:30px; background:#fff; color:var(--ab-text); font-size:12px; font-weight:700; text-transform:uppercase; }
.webcat-about-page .ab-partner img { width:24px; height:24px; }
.webcat-about-page .ab-hero__d { max-width:720px; color:var(--ab-text-2); font-size:15px; line-height:1.75; }
.webcat-about-page .ab-hero__art { justify-self:end; width:100%; max-width:560px; }
.webcat-about-page .ab-sect { margin-bottom:52px; }
.webcat-about-page .ab-sect__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.webcat-about-page .ab-sect__t { margin-bottom:22px; color:#4a4e56; font-size:clamp(22px,2.4vw,30px); line-height:1.2; letter-spacing:-.03em; }
.webcat-about-page .ab-sect__head .ab-sect__t { margin-bottom:0; }
.webcat-about-page .ab-more { display:inline-flex; align-items:center; gap:8px; color:var(--ab-accent); font-size:13.5px; font-weight:600; text-decoration:none; }
.webcat-about-page .ab-more img { width:15px; height:15px; }
.webcat-about-page .ab-tech { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.webcat-about-page .ab-tech__item { min-height:170px; padding:22px; border:1px solid var(--ab-border); border-radius:var(--ab-r-lg); background:#fff; }
.webcat-about-page .ab-tech__item img { width:44px; height:44px; object-fit:contain; margin-bottom:16px; }
.webcat-about-page .ab-tech__item h3 { margin-bottom:8px; font-size:15px; line-height:1.35; }
.webcat-about-page .ab-tech__item p { color:var(--ab-text-2); font-size:13px; line-height:1.65; }
.webcat-about-page .ab-services { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.webcat-about-page .ab-service { display:flex; flex-direction:column; min-height:190px; padding:22px 20px; border:1px solid var(--ab-border); border-radius:var(--ab-r-lg); background:#fff; color:var(--ab-text); text-decoration:none; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.webcat-about-page .ab-service:hover { transform:translateY(-3px); border-color:#c9d8f6; box-shadow:0 18px 38px -26px rgba(15,23,42,.3); color:var(--ab-text); }
.webcat-about-page .ab-service img { width:32px; height:32px; object-fit:contain; margin-bottom:18px; }
.webcat-about-page .ab-service__t { margin-bottom:10px; font-size:15px; line-height:1.35; }
.webcat-about-page .ab-service__d { color:var(--ab-text-2); font-size:12.5px; line-height:1.65; }
.webcat-about-page .ab-clients { position:relative; }
.webcat-about-page .ab-clients__track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 5 * 16px)/6); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.webcat-about-page .ab-clients__track::-webkit-scrollbar { display:none; }
.webcat-about-page .ab-client { display:flex; align-items:center; justify-content:center; height:96px; padding:14px 18px; border:1px solid var(--ab-border); border-radius:var(--ab-r-lg); background:#fff; scroll-snap-align:start; }
.webcat-about-page .ab-client img { max-height:48px; width:auto; object-fit:contain; }
.webcat-about-page .ab-client span { font-weight:700; text-align:center; }
.webcat-about-page .ab-dots { display:flex; justify-content:center; gap:9px; margin-top:22px; }
.webcat-about-page .ab-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--ab-border-2); cursor:pointer; }
.webcat-about-page .ab-dots button[aria-current="true"] { width:22px; border-radius:5px; background:var(--ab-accent); }
.webcat-about-page .ab-info { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.webcat-about-page .ab-info__card { display:flex; flex-direction:column; gap:12px; min-height:210px; padding:22px; border:1px solid var(--ab-border); border-radius:var(--ab-r-lg); background:#fff; }
.webcat-about-page .ab-info__head { display:flex; align-items:center; gap:14px; }
.webcat-about-page .ab-info__ico { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; border-radius:var(--ab-r-md); background:#e8effe; }
.webcat-about-page .ab-info__ico img { width:22px; height:22px; }
.webcat-about-page .ab-info__t { font-size:15px; }
.webcat-about-page .ab-info__d { flex:1; color:var(--ab-text-2); font-size:12.5px; line-height:1.7; }
.webcat-about-page .ab-cta { display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding:28px 32px; border-radius:var(--ab-r-lg); background:var(--ab-pale); }
.webcat-about-page .ab-cta__t { margin-bottom:8px; color:#4a4e56; font-size:21px; }
.webcat-about-page .ab-cta__d { color:var(--ab-text-2); font-size:13.5px; line-height:1.6; }
@media (max-width:1200px) {
  .webcat-about-page .ab-tech { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .webcat-about-page .ab-services { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .webcat-about-page .ab-clients__track { grid-auto-columns:calc((100% - 3 * 16px)/4); }
  .webcat-about-page .ab-info { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .webcat-about-page .ab-hero { grid-template-columns:1fr; }
  .webcat-about-page .ab-hero__art { justify-self:start; max-width:460px; }
  .webcat-about-page .ab-tech,.webcat-about-page .ab-services { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .webcat-about-page .ab-clients__track { grid-auto-columns:calc((100% - 2 * 16px)/3); }
}
@media (max-width:640px) {
  .webcat-about-page { padding:22px var(--gutter) 48px; }
  .webcat-about-page .ab-tech,.webcat-about-page .ab-services,.webcat-about-page .ab-info { grid-template-columns:1fr; }
  .webcat-about-page .ab-clients__track { grid-auto-columns:calc((100% - 16px)/2); }
  .webcat-about-page .ab-cta .btn { width:100%; }
}

/* End */
/* /bitrix/templates/webcat.digital/template_styles.css?1787905146222520 */