/* ==========================================================================
   ГК «ЦЕНТР ПРАКТИК» (https://centerpractik.ru) — ЕДИНАЯ ДИЗАЙН-СИСТЕМА
   Стандарт: W3C DTCG 2025.10 | Колориметрия: OKLCH + sRGB HEX | Контраст: APCA Lc + WCAG 2.2
   Инварианты: ADR-01 (Surface-Aware Contrast), ADR-02 (Zero Hidden Cases), ADR-03 (Default DS)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. PRIMITIVE LAYER (Базовые константы палитры centerpractik.ru в OKLCH и HEX)
     ------------------------------------------------------------------------ */
  /* Корпоративная тёмно-синяя шкала (Navy #172E4F / #15314C / Pale Blue #EDF4FE) */
  --prim-cp-navy-50:  #EDF4FE; /* oklch(96.5% 0.0154 257.2) — Шапка, Hero, События */
  --prim-cp-navy-100: #DFE8F5; /* oklch(92.8% 0.0201 257.5) — Подменю и ховеры */
  --prim-cp-navy-200: #D7E6FB; /* oklch(92.0% 0.0329 256.8) — Вторичная кнопка .button2 */
  --prim-cp-navy-300: #B3CBE8; /* oklch(83.2% 0.0480 256.8) */
  --prim-cp-navy-400: #7E9EC9; /* oklch(68.9% 0.0720 257.0) */
  --prim-cp-navy-500: #556782; /* oklch(51.0% 0.0484 258.3) — Контакты и меню подвала */
  --prim-cp-navy-600: #3B5275; /* oklch(43.2% 0.0610 257.5) — Вторичный текст на #EDF4FE */
  --prim-cp-navy-700: #274063; /* oklch(36.8% 0.0650 257.5) */
  --prim-cp-navy-800: #172E4F; /* oklch(30.1% 0.0668 257.6) — КАНОНИЧЕСКИЙ ТЁМНО-СИНИЙ БРЕНДА */
  --prim-cp-navy-900: #15314C; /* oklch(30.6% 0.0597 249.6) — Кнопки .button4 и подвала */
  --prim-cp-navy-950: #0D1D33; /* oklch(22.4% 0.0520 256.0) */

  /* Инженерно-академическая синяя шкала (Steel Blue #236FA1 / Logo Blue #0084CA) */
  --prim-cp-blue-50:  #F0F7FC; /* oklch(97.0% 0.0140 242.3) */
  --prim-cp-blue-100: #E6F0FA; /* oklch(94.6% 0.0246 250.8) — Бейджи ROI */
  --prim-cp-blue-200: #C5E0F5; /* oklch(88.8% 0.0480 244.0) */
  --prim-cp-blue-300: #8EC3E8; /* oklch(79.2% 0.0780 238.0) */
  --prim-cp-blue-400: #4095C1; /* oklch(63.8% 0.0960 232.0) — Подзаголовки H3 */
  --prim-cp-blue-500: #0084CA; /* oklch(58.5% 0.1390 243.5) — Синий квадрат логотипа */
  --prim-cp-blue-600: #236FA1; /* oklch(52.0% 0.1071 242.3) — КАНОНИЧЕСКИЙ СИНИЙ ОБУЧЕНИЯ И БЛОГА */
  --prim-cp-blue-700: #005E9F; /* oklch(47.1% 0.1284 248.5) — Заголовки H2 и ссылки */
  --prim-cp-blue-800: #0C4598; /* oklch(41.0% 0.1474 259.2) — Внутренние заголовки H1 */
  --prim-cp-blue-900: #12386B; /* oklch(34.5% 0.1050 255.0) */
  --prim-cp-blue-950: #0B2244; /* oklch(25.0% 0.0780 255.0) */

  /* Акцентная красная шкала действия (Action Red #ED190F / #D1150C / #C8140B) */
  --prim-cp-red-50:   #FEF2F2; /* oklch(97.1% 0.0130 17.4) */
  --prim-cp-red-100:  #FEE2E2; /* oklch(93.6% 0.0320 17.7) */
  --prim-cp-red-200:  #FECACA; /* oklch(88.5% 0.0620 18.3) */
  --prim-cp-red-300:  #FCA5A5; /* oklch(80.8% 0.1140 19.6) */
  --prim-cp-red-400:  #F87171; /* oklch(70.4% 0.1910 22.2) */
  --prim-cp-red-500:  #ED190F; /* oklch(60.1% 0.2373 29.4) — КАНОНИЧЕСКИЙ КРАСНЫЙ БРЕНДА (.button1) */
  --prim-cp-red-600:  #D1150C; /* oklch(54.7% 0.2158 29.4) — Ховер .cp-btn-pay:hover */
  --prim-cp-red-700:  #C8140B; /* oklch(52.0% 0.2080 29.4) — Высококонтрастный AA/APCA красный */
  --prim-cp-red-800:  #991B1B; /* oklch(44.4% 0.1770 26.9) */
  --prim-cp-red-900:  #7F1D1D; /* oklch(39.6% 0.1410 25.7) */
  --prim-cp-red-950:  #450A0A; /* oklch(25.8% 0.0920 26.0) */

  /* Нейтральная сланцево-графитовая шкала (Slate / Neutral) */
  --prim-cp-slate-0:   #FFFFFF;
  --prim-cp-slate-50:  #F8FAFC; /* Карточки тарифов .cp-tariff-card и технические блоки */
  --prim-cp-slate-100: #F4F6F9; /* Выноски в статьях блога */
  --prim-cp-slate-200: #DCE4EF; /* Фирменные разделительные линии centerpractik.ru */
  --prim-cp-slate-300: #C8D4E5; /* Рамки карточек команды и отзывов */
  --prim-cp-slate-400: #94A3B8;
  --prim-cp-slate-500: #64748B;
  --prim-cp-slate-600: #475569;
  --prim-cp-slate-700: #334155; /* Основной текст обучающих страниц (.cp-ai-wrapper) */
  --prim-cp-slate-800: #2D3748; /* Основной текст статей блога (/blog/57.html) */
  --prim-cp-slate-900: #252525; /* Базовый текст внутренних страниц (.cmsl_razdsite) */
  --prim-cp-slate-950: #000000; /* Чёрный логотипа и крупных заголовков */

  /* Семантические статусы (ROI / Внимание) */
  --prim-emerald-50:  #ECFDF5;
  --prim-emerald-100: #D1FAE5;
  --prim-emerald-600: #059669;
  --prim-emerald-700: #047857;
  --prim-emerald-900: #064E3B;

  --prim-amber-50:    #FFFBEB;
  --prim-amber-100:   #FEF3C7;
  --prim-amber-600:   #D97706;
  --prim-amber-700:   #B45309;
  --prim-amber-900:   #78350F;

  /* Шрифтовые семейства */
  --font-sans:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Резиновая типографика (Fluid Clamp Scales) */
  --text-hero-display:  clamp(2.5rem, 1.4rem + 4.8vw, 6.875rem);   /* 40px -> 110px */
  --text-section-light: clamp(1.875rem, 1.2rem + 2.5vw, 3.625rem); /* 30px -> 58px */
  --text-page-h1:       clamp(1.875rem, 1.35rem + 2.1vw, 3.75rem); /* 30px -> 60px */
  --text-article-h1:    clamp(1.625rem, 1.35rem + 1.0vw, 2.25rem); /* 26px -> 36px */
  --text-article-h2:    clamp(1.35rem, 1.15rem + 0.65vw, 1.75rem);  /* 21.6px -> 28px */
  --text-article-h3:    clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);/* 18px -> 22px */
  --text-lead:          clamp(1.0625rem, 1.0rem + 0.25vw, 1.25rem);/* 17px -> 20px */
  --text-body:          clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);  /* 16px -> 17px */
  --text-caption:       0.875rem;                                  /* 14px */
  --text-micro:         0.75rem;                                   /* 12px */

  /* Пространственная сетка 4px / 8px + вертикальный ритм centerpractik.ru */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-section: 7.1875rem; /* 115px — фирменный отступ секций centerpractik.ru */

  /* Ширины контейнеров centerpractik.ru */
  --container-wrapper:  1920px;
  --container-header:   1710px;
  --container-wide:     1600px;
  --container-footer:   1562px;
  --container-standard: 1310px;
  --container-content:  1280px;
  --container-article:  960px;

  /* Концентрические радиусы скругления */
  --radius-xs:   6px;    /* .cp-btn-pay */
  --radius-sm:   8px;    /* .cp-ai-card, .cp-ai-btn, .cp-tariff-btn */
  --radius-md:   12px;   /* .cp-tariff-card, выноски */
  --radius-lg:   20px;   /* .cp-reviews-item, крупные карточки */
  --radius-pill: 35px;   /* .button1, .button2, .button4 */
  --radius-full: 9999px; /* Круглые кнопки 200x200 и иконки соцсетей */

  /* ------------------------------------------------------------------------
     2. SEMANTIC LAYER (Роли поверхностей, текста, границ и действий)
     ------------------------------------------------------------------------ */
  --cp-bg-canvas:          var(--prim-cp-slate-0);    /* #FFFFFF */
  --cp-bg-pale-blue:       var(--prim-cp-navy-50);    /* #EDF4FE — фирменный голубой фон */
  --cp-bg-soft-blue:       var(--prim-cp-navy-200);   /* #D7E6FB — вторичные кнопки/плашки */
  --cp-bg-submenu:         var(--prim-cp-navy-100);   /* #DFE8F5 — подменю */
  --cp-bg-subtle:          var(--prim-cp-slate-50);   /* #F8FAFC — карточки тарифов и промптов */
  --cp-bg-callout-neutral: var(--prim-cp-slate-100);  /* #F4F6F9 — выноска статьи */
  --cp-bg-navy:            var(--prim-cp-navy-800);   /* #172E4F — тёмно-синий блок */
  --cp-bg-navy-deep:       var(--prim-cp-navy-900);   /* #15314C — кнопка подвала */

  --cp-text-display:       var(--prim-cp-slate-950);  /* #000000 (APCA 107.9) */
  --cp-text-navy:          var(--prim-cp-navy-800);   /* #172E4F (APCA 100.0 на белом, 93.0 на #EDF4FE) */
  --cp-text-primary:       var(--prim-cp-slate-800);  /* #2D3748 (APCA 96.9) */
  --cp-text-secondary:     var(--prim-cp-slate-700);  /* #334155 (APCA 94.0) */
  --cp-text-muted:         var(--prim-cp-navy-500);   /* #556782 (APCA 78.8 на белом) */
  --cp-text-muted-on-pale: var(--prim-cp-navy-600);   /* #3B5275 (APCA 79.5 на #EDF4FE) */
  --cp-text-blue:          var(--prim-cp-blue-600);   /* #236FA1 (APCA 76.8) */
  --cp-text-red-display:   var(--prim-cp-red-500);    /* #ED190F (только для крупных заголовков >=24px) */
  --cp-text-red-body:      var(--prim-cp-red-700);    /* #C8140B (APCA 76.9 — для обычного текста и бейджей) */
  --cp-text-on-dark:       var(--prim-cp-slate-0);    /* #FFFFFF */

  --cp-border-subtle:      var(--prim-cp-slate-200);  /* #DCE4EF */
  --cp-border-card:        var(--prim-cp-slate-300);  /* #C8D4E5 */
  --cp-border-blue:        var(--prim-cp-blue-600);   /* #236FA1 */
  --cp-border-navy:        var(--prim-cp-navy-800);   /* #172E4F */
  --cp-border-red:         var(--prim-cp-red-500);    /* #ED190F */

  /* Тени и фокусное кольцо (WCAG 2.2 Focus Appearance) */
  --cp-shadow-card:        0 4px 12px rgba(23, 46, 79, 0.05);
  --cp-shadow-card-hover:  0 12px 28px rgba(23, 46, 79, 0.10);
  --cp-shadow-submenu:     0 5px 5px rgba(23, 46, 79, 0.20);
  --cp-focus-ring:         0 0 0 2px #FFFFFF, 0 0 0 4px #236FA1;

  /* Кинематика */
  --cp-ease-out:           cubic-bezier(0.22, 1, 0.36, 1);
  --cp-duration-fast:      180ms;
  --cp-duration-normal:    300ms;
}

/* --------------------------------------------------------------------------
   3. БАЗОВЫЕ ПРАВИЛА СТРАНИЦЫ И ТИПОГРАФИКИ
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  color: var(--cp-text-primary);
  background-color: var(--cp-bg-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Табличные числа для всех KPI, цен, номеров телефонов, дат и таймкодов */
.cp-tabular-nums,
.cp-kpi-value,
.cp-price,
time,
table td {
  font-variant-numeric: tabular-nums;
}

/* Классический акцентный заголовок первого экрана (.cp-main__title) */
.cp-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero-display);
  font-weight: 800;
  line-height: 1.02;
  color: var(--cp-text-navy);
  letter-spacing: -0.02em;
}

.cp-hero-title__accent {
  display: block;
  color: var(--cp-text-red-display);
}

/* Тонкий дисплейный заголовок секций главной страницы (.cp-works__title) */
.cp-section-title-light {
  font-family: var(--font-display);
  font-size: var(--text-section-light);
  font-weight: 200;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-text-display);
}

/* Заголовок H2 статьи или курса с фирменной нижней линией #236FA1 (.cp-ai-h2) */
.cp-h2-underlined {
  font-family: var(--font-display);
  font-size: var(--text-article-h2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cp-text-navy);
  border-bottom: 2px solid var(--cp-border-blue);
  padding-bottom: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   4. КОМПОНЕНТНЫЙ СЛОЙ (Кнопки, карточки, выноски, таблицы, промпт-боксы)
   -------------------------------------------------------------------------- */

/* 4.1. Овальная красная кнопка (.button1 на centerpractik.ru) */
.cp-btn-pill-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  background-color: var(--prim-cp-red-500);
  color: var(--cp-text-on-dark);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--cp-duration-fast) var(--cp-ease-out),
              transform var(--cp-duration-fast) var(--cp-ease-out),
              box-shadow var(--cp-duration-fast) var(--cp-ease-out);
}
.cp-btn-pill-red:hover {
  background-color: var(--prim-cp-red-600);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(237, 25, 15, 0.25);
}
.cp-btn-pill-red:focus-visible {
  outline: none;
  box-shadow: var(--cp-focus-ring);
}
.cp-btn-pill-red:active {
  transform: scale(0.98);
}

/* 4.2. Овальная светло-голубая кнопка (.button2 на centerpractik.ru) */
.cp-btn-pill-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  background-color: var(--cp-bg-soft-blue);
  color: var(--cp-text-navy);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--cp-duration-fast) var(--cp-ease-out),
              color var(--cp-duration-fast) var(--cp-ease-out),
              transform var(--cp-duration-fast) var(--cp-ease-out);
}
.cp-btn-pill-soft:hover {
  background-color: var(--cp-bg-navy);
  color: var(--cp-text-on-dark);
  transform: translateY(-1px);
}
.cp-btn-pill-soft:focus-visible {
  outline: none;
  box-shadow: var(--cp-focus-ring);
}

/* 4.3. Овальная тёмно-синяя кнопка (.button4 / кнопка подвала на centerpractik.ru) */
.cp-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  background-color: var(--cp-bg-navy-deep);
  color: var(--cp-text-on-dark);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--cp-duration-fast) var(--cp-ease-out),
              transform var(--cp-duration-fast) var(--cp-ease-out);
}
.cp-btn-pill-navy:hover {
  background-color: var(--prim-cp-blue-600);
  transform: translateY(-1px);
}

/* 4.4. Академическая синяя кнопка курсов, вебинаров и статей (.cp-ai-btn / .cp-tariff-btn) */
.cp-btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  background-color: var(--prim-cp-blue-600);
  color: var(--cp-text-on-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--cp-duration-fast) var(--cp-ease-out),
              transform var(--cp-duration-fast) var(--cp-ease-out);
}
.cp-btn-blue:hover {
  background-color: var(--cp-bg-navy);
  color: var(--cp-text-on-dark);
  transform: translateY(-1px);
}
.cp-btn-blue:focus-visible {
  outline: none;
  box-shadow: var(--cp-focus-ring);
}

/* 4.5. Красная кнопка оплаты / целевого действия (.cp-btn-pay) */
.cp-btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-xs);
  background-color: var(--prim-cp-red-500);
  color: var(--cp-text-on-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--cp-duration-fast) var(--cp-ease-out),
              transform var(--cp-duration-fast) var(--cp-ease-out);
}
.cp-btn-red:hover {
  background-color: var(--prim-cp-red-600);
  color: var(--cp-text-on-dark);
  transform: translateY(-1px);
}

/* 4.6. Карточка контента / модуля / кейса (.cp-ai-card) */
.cp-card {
  background-color: var(--cp-bg-canvas);
  border: 1px solid var(--cp-border-subtle);
  border-radius: var(--radius-sm);
  padding: 24px;
  box-shadow: var(--cp-shadow-card);
  transition: transform var(--cp-duration-normal) var(--cp-ease-out),
              box-shadow var(--cp-duration-normal) var(--cp-ease-out),
              border-color var(--cp-duration-normal) var(--cp-ease-out);
}
.cp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cp-shadow-card-hover);
  border-color: var(--cp-border-blue);
}

/* 4.7. Фирменная голубая выноска / инсайт (.cp-ai-highlight на centerpractik.ru) */
.cp-callout-pale {
  background-color: var(--cp-bg-pale-blue);
  border-left: 4px solid var(--cp-border-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  color: var(--cp-text-navy);
}

/* 4.8. Светлый высококонтрастный блок кода / промпта (по инварианту ADR-01) */
.cp-code-box {
  background-color: var(--cp-bg-subtle);
  border: 1px solid var(--cp-border-card);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cp-text-navy);
  overflow-x: auto;
}

.cp-prompt-box {
  background-color: var(--cp-bg-pale-blue);
  border: 1px solid var(--prim-cp-navy-300);
  border-left: 4px solid var(--cp-border-blue);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--cp-text-navy);
}