/* =====================================================================
   KCx Square System — фирменная геометрия Koch (Corporate Identity 2021).
   Квадрат — это модуль (рамка знака, плитка продуктовой системы,
   монолит, направляющая), а радиус задаётся тремя ролями:
     0     — статика: плоскости, карточки, кнопки, поля, модалки;
     2px   — мелкий интерактив ≤32px: чекбокс, чип, бейдж, тоггл;
     50%   — семантика круга: фото-аватар, радио, точка статуса, печать.
   Загружается последним на всех страницах.
   ===================================================================== */

:root {
  --kcx-c-000: #000000;
  --kcx-c-050: #121212;
  --kcx-c-100: #1E1E1E;
  --kcx-c-200: #2B2B2B;
  --kcx-c-300: #3A3A3A;
  --kcx-c-500: #5C5E60;
  --kcx-c-600: #8A8D8F;
  --kcx-c-700: #A7A8AA;
  --kcx-c-800: #DBDBDB;
  --kcx-c-900: #F5F5F5;
  --kcx-c-999: #FFFFFF;


  --kcx-r-0: 0;
  --kcx-r-micro: 2px;
  --kcx-r-round: 50%;

  --kcx-hair: 1px;
  --kcx-stroke: 1.5px;
  --kcx-stroke-2: 2px;

  --kcx-font-display: "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  --kcx-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- 1. Радиусы по ролям ---------- */

*, *::before, *::after { border-radius: var(--kcx-r-0) !important; }

input[type="checkbox"],
.check__box,
.switch__track,
.switch__track::after,
.chip,
.badge,
.tag,
.koch-badge,
.koch-dash-badge,
.koch-community-badge,
.koch-course-card__badge,
.koch-dash-under-dev__badge,
.koch-topbar-bell__count,
.koch-home-quick-card .koch-dash-badge,
.koch-masterstudy .masterstudy-badge,
.koch-masterstudy .stm_lms_courses__single__status,
.koch-steps__chip,
.koch-steps__tick,
.koch-steps__seg,
.koch-steps__meter,
.koch-steps__video-track {
  border-radius: var(--kcx-r-micro) !important;
}

input[type="radio"],
.check--radio .check__box,
.check--radio .check__box::after,
.koch-steps__radio,
.koch-steps__mark,
.koch-steps__dot,
.koch-steps__click,
.koch-steps__avatar,
.avatar,
.avatar img,
.skeleton--avatar,
.avatar-upload__preview,
.koch-dash-topbar__avatar,
.koch-dash-topbar__avatar img,
.koch-dash-topbar__avatar-img,
.koch-community-author__avatar,
.koch-lead__guide img,
.badge .dot,
.status-dot,
.timeline__dot,
.autosave__dot,
.notif.is-unread .notif__title::before,
.topic.is-unread .topic__title::before,
.btn.is-loading::after,
.koch-certificate-card__seal,
.cert-card__seal {
  border-radius: var(--kcx-r-round) !important;
}

/* ---------- 2. Фирменные модули ---------- */

/* Логотип: словесная часть и квадратный знак KCx справа, всегда вместе. */
.koch-topnav__logo,
.koch-landing-footer__logo { display: flex; align-items: center; gap: 14px; }
.koch-topnav__logo .koch-logo-mark,
.koch-landing-footer__logo .koch-logo-mark { width: auto; }

/* Рамка KCx: квадрат с двумя метками-штрихами справа, как в знаке. */
.kcx-frame {
  --kcx-frame: 48px;
  --kcx-frame-sw: var(--kcx-stroke);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  width: var(--kcx-frame);
  height: var(--kcx-frame);
  padding-inline-start: calc(var(--kcx-frame) * 0.16);
  border: var(--kcx-frame-sw) solid currentColor;
  font: 700 calc(var(--kcx-frame) * 0.3)/1 var(--kcx-font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kcx-frame::before,
.kcx-frame::after {
  content: "";
  position: absolute;
  right: 15%;
  width: 20%;
  height: var(--kcx-frame-sw);
  background: currentColor;
}
.kcx-frame::before { top: 18%; }
.kcx-frame::after { bottom: 18%; }

/* ---------- 3. Лендинг: без теней и стекла, на направляющих ---------- */

.koch-btn:hover,
.koch-btn:active { transform: none; }

/* Аудитории — белая лента на шве hero и страницы: подпись KCx + пять ячеек на швах 1px. */
.koch-hero { padding-bottom: 72px; }
.koch-features { padding-top: 120px; }
.kcx-aud {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: -36px;
  z-index: 2;
  display: grid;
  grid-template-columns: 152px repeat(5, minmax(0, 1fr));
  max-width: 1200px;
  height: 72px;
  margin: 0 auto;
  background: var(--kcx-c-999);
  border: 1px solid var(--kcx-c-800);
}
.kcx-aud__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -1px 0 -1px -1px;
  padding: 0 20px;
  color: var(--kcx-c-700);
  background: var(--kcx-c-000);
}
.kcx-aud__label img { flex: none; width: 24px; height: 24px; }
.kcx-aud__label span {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kcx-aud__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0 16px 0 20px;
  color: var(--kcx-c-100);
  text-decoration: none;
  border-left: 1px solid var(--kcx-c-800);
  transition: background-color 350ms var(--kcx-ease), color 350ms var(--kcx-ease), border-color 350ms var(--kcx-ease);
}
.kcx-aud__label + .kcx-aud__item { border-left: 0; }
.kcx-aud__num {
  display: block;
  margin-bottom: 6px;
  color: var(--kcx-c-600);
  font: 700 11px/1 var(--kcx-font-display);
  letter-spacing: 0.06em;
  transition: color 350ms var(--kcx-ease);
}
.kcx-aud__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: pre-line;
}
.kcx-aud__arr {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--kcx-c-600);
  transition: color 350ms var(--kcx-ease), transform 450ms var(--kcx-ease);
}
.kcx-aud__item:hover,
.kcx-aud__item:focus-visible {
  color: var(--kcx-c-999);
  text-decoration: none;
  background: var(--kcx-c-000);
  border-color: var(--kcx-c-000);
}
.kcx-aud__item:hover .kcx-aud__num,
.kcx-aud__item:focus-visible .kcx-aud__num { color: var(--kcx-c-700); }
.kcx-aud__item:hover .kcx-aud__arr,
.kcx-aud__item:focus-visible .kcx-aud__arr { color: var(--kcx-c-999); transform: translateX(4px); }
.kcx-aud__item:focus-visible { outline: 2px solid var(--kcx-c-600); outline-offset: -2px; }

@media (max-width: 1199px) {
  .kcx-aud { grid-template-columns: 64px repeat(5, minmax(0, 1fr)); }
  .kcx-aud__label { justify-content: center; padding: 0; }
  .kcx-aud__label span,
  .kcx-aud__arr { display: none; }
  .kcx-aud__item { padding: 0 14px; }
  .kcx-aud__title { font-size: 13px; }
}

@media (max-width: 900px) {
  .kcx-aud {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kcx-aud::-webkit-scrollbar { display: none; }
  .kcx-aud__label { position: sticky; left: 0; z-index: 1; flex: none; width: 64px; }
  .kcx-aud__item { flex: none; padding: 0 12px 0 16px; }
  .kcx-aud__title { white-space: pre; }
  .kcx-aud__arr { display: block; }
}

/* Заголовки секций — серые, над ними короткая подпись раздела. */
.koch-section__eyebrow {
  margin: 0 0 14px;
  color: var(--kcx-c-600);
  font: 400 14px/1.3 Inter, Arial, sans-serif;
}
.koch-section__title { color: var(--kcx-c-600); font-weight: 600; }
.koch-section__title--light { color: var(--kcx-c-700); }
.koch-steps__copy .koch-section__eyebrow { margin: 0 0 -16px; }
.koch-catalog__head,
.koch-reviews__head { flex-direction: column; align-items: flex-start; gap: 0; }

/* Система обучения — светлая таблица на швах 1px: широкая ячейка + узкая, ряд из трёх, широкая + CTA. */
.koch-features .koch-section__title { max-width: none; }
.kcx-sys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 48px;
  border-top: 1px solid var(--kcx-c-800);
  border-left: 1px solid var(--kcx-c-800);
}
.kcx-sys__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  background: var(--kcx-c-999);
  border-right: 1px solid var(--kcx-c-800);
  border-bottom: 1px solid var(--kcx-c-800);
}
.kcx-sys__cell--wide { grid-column: span 2; }
.kcx-sys__title {
  margin: 0;
  color: var(--kcx-c-100);
  font: 700 clamp(18px, 1.5vw, 22px)/1.2 var(--kcx-font-display);
  letter-spacing: -0.01em;
}
.kcx-sys__cell--wide:first-child .kcx-sys__title { font-size: clamp(22px, 2vw, 28px); }
.kcx-sys__lead { margin: 10px 0 0; color: var(--kcx-c-500); font-size: 14px; line-height: 1.45; }
.kcx-sys__text { max-width: 62ch; margin: 18px 0 0; color: var(--kcx-c-200); font-size: 15px; line-height: 1.55; }
.kcx-sys__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.kcx-sys__points li { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--kcx-c-800); }
.kcx-sys__points strong { color: var(--kcx-c-100); font-size: 14px; }
.kcx-sys__points span { color: var(--kcx-c-500); font-size: 13px; line-height: 1.45; }
.kcx-sys__link {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 24px;
  color: var(--kcx-c-100);
  font: 700 14px/1 Inter, Arial, sans-serif;
  text-decoration: none;
}
.kcx-sys__link span { display: inline-block; transition: transform 200ms var(--kcx-ease); }
.kcx-sys__link:hover { text-decoration: none; }
.kcx-sys__link:hover span { transform: translateX(3px); }
.kcx-sys__cell--cta { justify-content: space-between; gap: 24px; background: var(--kcx-c-900); }
.kcx-sys__cell--cta .kcx-sys__lead { margin: 0; color: var(--kcx-c-200); font-size: 15px; }
.kcx-sys__cell--cta .koch-btn { align-self: flex-start; }

/* Каталог — одна общая рамка, ячейки делятся швами 1px, как таблица продуктовой системы. */
.koch-catalog { background: var(--kcx-c-999); }
.kcx-cat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--kcx-c-800);
  border-left: 1px solid var(--kcx-c-800);
}
.kcx-cat__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 28px;
  background: var(--kcx-c-999);
  border-right: 1px solid var(--kcx-c-800);
  border-bottom: 1px solid var(--kcx-c-800);
  transition: background-color 200ms var(--kcx-ease);
}
.kcx-cat__cell:not(.kcx-cat__fill):hover { background: var(--kcx-c-900); }
.kcx-cat__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.kcx-cat__meta {
  color: var(--kcx-c-500);
  font: 700 11px/1 Inter, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kcx-cat__dur { color: var(--kcx-c-500); font: 400 13px/1 Inter, Arial, sans-serif; white-space: nowrap; }
.kcx-cat__ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--kcx-c-900); }
.kcx-cat__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--kcx-ease); }
.kcx-cat__cell:hover .kcx-cat__ph img { transform: scale(1.04); }
.kcx-cat__txt { display: grid; gap: 10px; }
.kcx-cat__txt h3 { min-height: 2.24em; margin: 0; color: var(--kcx-c-100); font-size: 24px; line-height: 1.12; letter-spacing: -0.01em; }
.kcx-cat__link { color: inherit; text-decoration: none; }
.kcx-cat__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kcx-cat__link:focus-visible { outline: none; }
.kcx-cat__cell:has(.kcx-cat__link:focus-visible) { outline: 2px solid var(--kcx-c-100); outline-offset: -2px; }
.kcx-cat__txt p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--kcx-c-500);
  font-size: 15px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kcx-cat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--kcx-c-800);
}
.kcx-cat__pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }
.kcx-cat__price {
  color: var(--kcx-c-100);
  font: 700 24px/1 var(--kcx-font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kcx-cat__old { color: var(--kcx-c-500); font: 400 14px/1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kcx-cat__price--none { color: var(--kcx-c-500); font: 400 14px/1.2 Inter, Arial, sans-serif; letter-spacing: 0; }
.kcx-cat__buy {
  position: relative;
  z-index: 2;
  padding-bottom: 3px;
  color: var(--kcx-c-100);
  border-bottom: 1px solid var(--kcx-c-800);
  font: 700 14px/1 Inter, Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 200ms var(--kcx-ease);
}
.kcx-cat__buy:hover { border-bottom-color: var(--kcx-c-100); text-decoration: none; }
.kcx-cat__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--kcx-c-100);
  border: 1px solid var(--kcx-c-100);
  transition: background-color 200ms var(--kcx-ease), color 200ms var(--kcx-ease);
}
.kcx-cat__go svg, .kcx-cat__more-ico svg { width: 16px; height: 16px; transition: transform 200ms var(--kcx-ease); }
.kcx-cat__cell:hover .kcx-cat__go { color: var(--kcx-c-999); background: var(--kcx-c-100); }
.kcx-cat__cell:hover .kcx-cat__go svg { transform: translateX(3px); }

.kcx-cat__fill { justify-content: center; align-items: flex-start; gap: 20px; color: var(--kcx-c-100); }
.kcx-cat__fill h3 { margin: 0; font-size: 24px; }
.kcx-cat__fill p { max-width: 36ch; margin: 0; color: var(--kcx-c-500); font-size: 15px; line-height: 1.5; }
.kcx-cat__mark { --kcx-frame: 64px; --kcx-frame-sw: var(--kcx-stroke-2); padding-inline-start: 9px; color: var(--kcx-c-700); letter-spacing: -0.04em; }
.kcx-cat__mark span { font-weight: 400; }
.kcx-cat__more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--kcx-c-100);
  font: 700 15px/1 Inter, Arial, sans-serif;
  text-decoration: none;
}
.kcx-cat__more:hover { text-decoration: none; }
.kcx-cat__more:hover .kcx-cat__more-ico { color: var(--kcx-c-999); background: var(--kcx-c-100); border-color: var(--kcx-c-100); }
.kcx-cat__more-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  transition: background-color 200ms var(--kcx-ease), color 200ms var(--kcx-ease);
}

.kcx-cat__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  color: var(--kcx-c-100);
  border-right: 1px solid var(--kcx-c-800);
  border-bottom: 1px solid var(--kcx-c-800);
  font: 700 18px/1 var(--kcx-font-display);
  text-decoration: none;
  transition: background-color 200ms var(--kcx-ease), color 200ms var(--kcx-ease);
}
.kcx-cat__bar > span { display: flex; align-items: center; gap: 20px; }
.kcx-cat__bar small { color: var(--kcx-c-500); font: 400 14px/1 Inter, Arial, sans-serif; transition: color 200ms var(--kcx-ease); }
.kcx-cat__bar:hover { color: var(--kcx-c-999); background: var(--kcx-c-100); text-decoration: none; }
.kcx-cat__bar:hover small { color: var(--kcx-c-700); }

/* Форматы — строки на направляющих, номер в рамке KCx. */
.koch-formats__list { gap: 0; border-bottom: 1px solid var(--kcx-c-800); }
.koch-format {
  padding: 32px 0;
  background: transparent;
  border-top: 1px solid var(--kcx-c-800);
  box-shadow: none;
}
.koch-format__content { padding: 0; }
.koch-format__media::after { display: none; }
.koch-format__index {
  --kcx-frame: 48px;
  --kcx-frame-sw: var(--kcx-stroke);
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: var(--kcx-frame);
  height: var(--kcx-frame);
  padding-inline-start: 8px;
  color: var(--kcx-c-100);
  border: var(--kcx-frame-sw) solid currentColor;
  font: 700 14px/1 var(--kcx-font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.koch-format__index::before,
.koch-format__index::after {
  content: "";
  position: absolute;
  right: 15%;
  width: 20%;
  height: var(--kcx-frame-sw);
  background: currentColor;
}
.koch-format__index::before { top: 18%; }
.koch-format__index::after { bottom: 18%; }

/* FAQ — список на направляющих, квадратный плюс/минус без поворота. */
.koch-faq { background: var(--kcx-c-999); }
.koch-faq__list { gap: 0; border-bottom: 1px solid var(--kcx-c-800); }
.koch-faq__item {
  background: transparent;
  border-top: 1px solid var(--kcx-c-800);
  box-shadow: none;
}
.koch-faq__question { padding-inline: 0; }
.koch-faq__answer-inner { padding-inline: 0; }
.koch-faq__icon {
  position: relative;
  width: 32px;
  height: 32px;
  color: transparent;
  font-size: 0;
  background: transparent;
  border: var(--kcx-stroke) solid var(--kcx-c-100);
  transition: background 200ms var(--kcx-ease);
}
.koch-faq__icon::before,
.koch-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: var(--kcx-stroke);
  background: var(--kcx-c-100);
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--kcx-ease), background 200ms var(--kcx-ease);
}
.koch-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.koch-faq__item.is-open .koch-faq__icon { transform: none; background: var(--kcx-c-100); }
.koch-faq__item.is-open .koch-faq__icon::before { background: var(--kcx-c-999); }
.koch-faq__item.is-open .koch-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--kcx-c-999); }
.koch-faq__question:focus-visible { outline-offset: 2px; }

/* Заявка — плоский монолит без свечения и стекла. */
.koch-lead__card { background: var(--kcx-c-100); box-shadow: none; }
.koch-lead__card::before { display: none; }
.koch-lead__eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.koch-lead__eyebrow::before { content: ""; width: 20px; height: var(--kcx-stroke-2); background: currentColor; }
.koch-lead__form {
  background: transparent;
  border-color: var(--kcx-c-300);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.koch-lead__form input,
.koch-lead__form textarea {
  background: var(--kcx-c-050);
  border-color: var(--kcx-c-500);
}
.koch-lead__form input:focus-visible,
.koch-lead__form textarea:focus-visible {
  border-color: var(--kcx-c-999);
  box-shadow: inset 0 0 0 1px var(--kcx-c-999);
}
.koch-lead__form .koch-lead__consent input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: var(--kcx-stroke) solid var(--kcx-c-700);
  cursor: pointer;
}
.koch-lead__form .koch-lead__consent input::after {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border: solid var(--kcx-c-100);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
  opacity: 0;
}
.koch-lead__form .koch-lead__consent input:checked { background: var(--kcx-c-999); border-color: var(--kcx-c-999); }
.koch-lead__form .koch-lead__consent input:checked::after { opacity: 1; }
.koch-lead__form .koch-lead__consent input:focus-visible { outline: 2px solid var(--kcx-c-999); outline-offset: 2px; }
.koch-lead__guide { background: transparent; border-color: var(--kcx-c-300); }

/* Cookie-плашка — монолит с контуром, без тени. */
.koch-cookie { border: 1px solid var(--kcx-c-300) !important; box-shadow: none !important; }

@media (max-width: 1120px) and (min-width: 721px) {
  .kcx-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcx-cat__fill { display: none; }
  .kcx-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcx-sys__cell--wide,
  .kcx-sys__cell--cta { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .koch-hero { padding-bottom: 36px; }
  .kcx-aud { position: relative; left: auto; right: auto; bottom: auto; height: 64px; margin-top: 36px; }
  .koch-features { padding-top: 72px; }
  .kcx-sys { grid-template-columns: 1fr; margin-top: 32px; }
  .kcx-sys__cell { padding: 20px; }
  .kcx-sys__cell--wide { grid-column: auto; }
  .kcx-sys__points { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .koch-section__eyebrow { margin-bottom: 10px; font-size: 13px; }
  .kcx-cat { grid-template-columns: 1fr; }
  .kcx-cat__cell { gap: 16px; padding: 20px; }
  .kcx-cat__ph { aspect-ratio: 16 / 9; }
  .kcx-cat__txt h3 { min-height: 0; font-size: 20px; }
  .kcx-cat__go { width: 40px; height: 40px; }
  .kcx-cat__fill { display: none; }
  .kcx-cat__bar { padding: 18px 20px; font-size: 16px; }
  .koch-format { padding: 24px 0; }
  .koch-format__index { --kcx-frame: 40px; font-size: 12px; }
}