/* === Self-hosted fonts (Inter, PT Mono) — см. docs/ref-landing-public-pages.md === */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/inter-400-cyrillic-ext.251d36f2b5a6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/inter-400-cyrillic.de93fdc85e3d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/inter-400-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/inter-400-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/inter-500-cyrillic-ext.251d36f2b5a6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/inter-500-cyrillic.de93fdc85e3d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/inter-500-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/inter-500-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/inter-600-cyrillic-ext.251d36f2b5a6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/inter-600-cyrillic.de93fdc85e3d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/inter-600-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/inter-600-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/inter-700-cyrillic-ext.251d36f2b5a6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/inter-700-cyrillic.de93fdc85e3d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/inter-700-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/inter-700-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/pt-mono-400-cyrillic-ext.054f4dc3175e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/pt-mono-400-cyrillic.6669881bc10b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/pt-mono-400-latin-ext.ad022699eef7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/pt-mono-400-latin.b1a08a87c076.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   DeFi-Baza-09-26 — Первый экран (Hero, тёмный)
   =================================================================== */

/* -------- Design tokens -------- */
:root {
  /* Цвета */
  --surface-page: rgb(235, 235, 235);
  --hero-bg: #0c0c0e;
  --lime-400: rgb(190, 235, 113);
  --lime-300: rgb(195, 253, 114);
  --text-on-accent: #000;
  --surface-invert: #000;

  --text-hero: #ffffff;
  --text-body: rgba(255, 255, 255, 0.74);
  --text-chip: rgba(255, 255, 255, 0.86);
  --text-caption: rgba(255, 255, 255, 0.42);
  --text-slot: rgba(255, 255, 255, 0.4);

  /* Светлые карточки (блок «Автор курса» и далее) */
  --surface-card: #fff;
  --surface-placeholder: rgb(217, 217, 217);
  --text-strong: #000;
  --text-muted: rgb(95, 95, 99);
  --text-ink: rgb(47, 47, 49);        /* тело текста на светлом фоне */

  /* Шрифты */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "PT Mono", "SF Mono", ui-monospace, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Радиусы */
  --radius-pill: 999px;
  --radius-round: 999px;
  --radius-card: 32px;

  /* Переходы */
  --transition-interactive: 0.15s ease;
}

/* -------- Base / reset -------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--surface-page);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ===================================================================
   HERO SECTION
   =================================================================== */
.hero {
  position: relative;
  width: 100%;
  background: var(--hero-bg);
  overflow: hidden;
  font-family: var(--font-sans);
}

/* Контейнер — «холст» со слоями (послойная логика, как в Photoshop):
   текст лежит слоем выше, фото — слоем ниже, справа-сзади. */
.hero__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;              /* X-паддинг: десктоп */
  min-height: 660px;
  display: flex;
  align-items: center;
}

/* -------- Текстовая колонка (верхний слой) -------- */
.hero__text {
  position: relative;
  z-index: 2;                  /* над фото */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 600px;            /* текстовая колонка: список/кнопки (H1 шире, см. ниже) */
  padding: 72px 0;             /* Y-паддинг: десктоп */
}

/* Верхний ряд: аватар (моб.) + chip */
.hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

/* Аватар эксперта — запасной элемент, скрыт (портрет теперь виден всегда) */
.hero__avatar {
  display: none;
  flex: none;
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, var(--lime-300), var(--lime-400));
  box-shadow: 0 0 0 1px rgba(190, 235, 113, 0.55), 0 0 30px rgba(190, 235, 113, 0.55);
  align-items: flex-end;
  justify-content: center;
}
.hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;   /* лицо чуть выше центра */
  display: block;
}

/* 1. Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-chip);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-wrap: pretty;
}
.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lime-400);
  box-shadow: 0 0 12px rgba(190, 235, 113, 0.9);
  flex: none;
}

/* 2. Заголовок H1 */
.hero__title {
  margin: 0 0 30px;
  width: 800px;          /* колонка заголовка шире текстовой — заезжает на плечо портрета */
  max-width: none;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--text-hero);
  text-wrap: pretty;
}
.hero__title mark {
  display: inline-block;
  background: var(--lime-400);
  color: var(--text-on-accent);
  padding: 0 0.2em;
  border-radius: 10px;
  line-height: 1.16;
  box-shadow: 0 6px 40px rgba(190, 235, 113, 0.45);
}

/* 3. Список преимуществ */
.hero__list {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
}
.hero__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 13px;
  align-items: start;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
  text-wrap: pretty;
}
.hero__list li .check {
  margin-top: 2px;
  color: var(--lime-400);
  display: inline-flex;
}
.hero__list li .check svg { width: 19px; height: 19px; }

/* 4. Кнопки (CTA) */
.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-interactive);
}
/* Основная */
.btn--primary {
  padding: 20px 40px 20px 44px;
  background: var(--lime-400);
  color: var(--text-on-accent);
  box-shadow: 0 12px 44px rgba(190, 235, 113, 0.42);
}
.btn--primary:hover {
  background: var(--lime-300);
  transform: translateY(-2px);
  box-shadow: 0 18px 54px rgba(190, 235, 113, 0.6);
}
.btn--primary .btn__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: var(--surface-invert);
  color: var(--lime-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.btn--primary .btn__icon svg { width: 15px; height: 15px; }
/* Вторичная */
.btn--secondary {
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

/* 5. Подпись под кнопками */
.hero__caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-caption);
}
.hero__caption .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--lime-400);
  flex: none;
}

/* Плашка даты старта — заметный лаймовый акцент в одной строке с chip. */
.hero__start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--lime-400);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.hero__start .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* 6. Фото эксперта — нижний слой, справа-сзади (послойная логика).
   Прозрачный портрет масштабируется ЦЕЛИКОМ (contain) и никогда не режется:
   при сужении он уменьшается, а текст спокойно заезжает на плечо. */
.hero__photo {
  position: absolute;
  z-index: 1;                   /* под текстом */
  top: 0;
  bottom: 0;
  right: 0;                     /* по правому краю контента */
  width: min(46%, 560px);
  pointer-events: none;         /* слой-фон не перехватывает клики */
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* без обрезки — плечи целы */
  object-position: right bottom;/* стоит на «полу» секции справа */
  display: block;
}

/* ===================================================================
   Адаптив — портрет остаётся слоем, только уменьшается (без обрезки)
   =================================================================== */

/* <=1000px — фото уже, текст чуть шире, наложение усиливается */
@media (max-width: 1000px) {
  .hero__inner {
    padding: 0 28px;
    min-height: 0;                 /* без фото высоту задаёт текст */
  }
  .hero__text {
    padding: 52px 0;
    max-width: 100%;               /* фото ушло — текст на всю ширину */
  }
  .hero__photo { display: none; }  /* портрет-слой держим только до 1000px */
  .hero__avatar { display: flex; } /* вместо него — аватар в чипе */

  .hero__top { margin-bottom: 26px; }

  .hero__title {
    width: auto;
    font-size: clamp(32px, 5vw, 40px);
    line-height: 1.14;
    margin-bottom: 24px;
  }
  .hero__list li { font-size: 15px; }
  .hero__list { gap: 12px; margin-bottom: 28px; }
  .hero__list li .check svg { width: 17px; height: 17px; }

  .btn { font-size: 16px; }
  .btn--primary { padding: 17px 30px 17px 32px; }
  .btn--secondary { padding: 17px 30px; }
  .btn--primary .btn__icon { width: 30px; height: 30px; }
  .btn--primary .btn__icon svg { width: 13px; height: 13px; }

  .hero__caption { margin-top: 26px; }
}

/* <=560px — narrow: портрет маленький в правом нижнем углу,
   текст занимает почти всю ширину и заезжает на плечо — это ок */
@media (max-width: 560px) {
  .hero__inner {
    padding: 0 18px;
    min-height: 520px;
  }
  .hero__text {
    padding: 40px 0;
    max-width: 100%;
  }

  .chip { padding: 8px 14px; font-size: 10px; }
  .hero__top { margin-bottom: 22px; gap: 14px; }
  .hero__avatar { width: 76px; height: 76px; }

  .hero__title {
    font-size: clamp(24px, 7vw, 28px);
    margin-bottom: 20px;
  }
  .hero__list li { font-size: 15px; grid-template-columns: 18px 1fr; gap: 11px; }
  .hero__list { gap: 10px; margin-bottom: 24px; }
  .hero__list li .check svg { width: 16px; height: 16px; }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
  }
  .btn { font-size: 15px; gap: 10px; }
  .btn--primary { padding: 15px 24px 15px 26px; }
  .btn--secondary { padding: 15px 24px; }
  .btn--primary .btn__icon { width: 28px; height: 28px; }
  .btn--primary .btn__icon svg { width: 13px; height: 13px; }

  .hero__caption { margin-top: 22px; }
}


/* ===================================================================
   БЛОК «АВТОР КУРСА» (2-й экран, светлый фон)
   Единая карточка: текст СЛЕВА, фото справа (слито в одну плашку).
   Брейкпоинты блока — по хэндофу: 1180px и 560px.
   =================================================================== */
.author {
  background: var(--surface-page);
}
.author__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 40px 0;            /* верхний отступ от hero: 80px (десктоп) */
}

/* Заголовок секции */
.author__heading {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
}

/* Единая карточка: резиновая колонка под текст + 320px под фото справа */
.author__bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;   /* текст слева, фото справа */
  align-items: stretch;            /* фото тянется на высоту карточки */
  background: var(--surface-card); /* одна белая плашка */
  border-radius: var(--radius-card);
  overflow: hidden;                /* клипаем фото по радиусу карточки */
}

/* Портрет — серая зона справа внутри общей карточки */
.author__photo {
  position: relative;
  grid-column: 2; grid-row: 1;     /* фото — правая колонка, та же строка */
  min-height: 100%;
  overflow: hidden;
  background: var(--surface-placeholder);
}
.author__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  display: block;
}

/* Текстовая часть — левая колонка общей карточки */
.author__card {
  grid-column: 1; grid-row: 1;     /* текст — левая колонка, та же строка */
  padding: 40px 52px 42px;
}
.author__name {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);   /* имя — болд (29.08) */
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.6px;
  color: var(--text-strong);
}
.author__role {
  margin: 0 0 26px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.45;
  color: #000000;
  text-wrap: pretty;
}

/* Список фактов — лаймовые кружки с чёрной галочкой (29.08) */
.author__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.author__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-ink);
  text-wrap: pretty;
}
/* Маркер — лаймовый кружок с чёрной галочкой (как в блоке «Кому подходит») */
.author__check {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: var(--lime-400);
  color: var(--text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
  box-shadow: 0 4px 14px rgba(190, 235, 113, 0.65);
}
.author__check svg { width: 15px; height: 15px; }

/* ---- Адаптив: 1180px — только типографика/отступы (слом раскладки карточки перенесён на 768px, см. ниже) ---- */
@media (max-width: 1180px) {
  .author__inner { padding: 44px 28px 0; }
  .author__heading { margin-bottom: 22px; }

  .author__card { padding: 28px 26px 30px; }
  .author__role { font-size: 15px; margin-bottom: 22px; }
  .author__list { gap: 11px; }
  .author__list li { font-size: 15px; }
}

/* ---- Адаптив: 768px — карточка перестраивается в вертикаль: фото сверху, текст снизу ---- */
@media (max-width: 768px) {
  .author__bento { grid-template-columns: 1fr; }
  .author__card, .author__photo { grid-column: auto; grid-row: auto; }  /* фото сверху, текст снизу */
  .author__photo { min-height: 380px; }
}

/* ---- Адаптив: 560px — narrow ---- */
@media (max-width: 560px) {
  .author__inner { padding: 36px 18px 0; }
  .author__heading { margin-bottom: 18px; }

  .author__photo { min-height: 300px; }

  .author__card { padding: 22px 18px 24px; }
  .author__name { font-size: 22px; }
  .author__role { font-size: 15px; margin-bottom: 18px; }
  .author__list { gap: 9px; }
  .author__list li { font-size: 15px; grid-template-columns: 26px 1fr; gap: 10px; }
  .author__check { width: 26px; height: 26px; }
  .author__check svg { width: 14px; height: 14px; }
}


/* ===================================================================
   ДОП. ТОКЕНЫ для блоков после «Автор курса»
   =================================================================== */
:root {
  --radius-card-sm: 28px;                 /* маленькая карточка (задачи) */
  --line-hairline: rgba(47, 47, 49, 0.1); /* тонкая рамка плейсхолдеров */
  --text-on-invert: #ffffff;              /* текст на чёрной CTA */
}

/* Моно-метка плейсхолдера (задачи / изображения сценариев) */
.ph-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Общая чёрная CTA-кнопка (платное действие) */
.cta-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-invert);
  color: var(--text-on-invert);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  transition: var(--transition-interactive);
}
.cta-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}
/* Подпись «Старт — 8 октября» под сквозными CTA. Выравнивание — под своей кнопкой. */
.cta-note {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  color: var(--text-muted);
}
.audience__cta + .cta-note { text-align: left; color: var(--text-on-accent); }
.scenarios__cta + .cta-note { text-align: center; }
.cta-dark__icon {
  border-radius: var(--radius-round);
  background: var(--lime-400);
  color: var(--text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ===================================================================
   БЛОК 1 — ФИНАНСОВЫЕ ЗАДАЧИ
   =================================================================== */
.tasks { margin-top: 80px; }
.tasks__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.tasks__heading {
  max-width: 1120px;
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: pretty;
}
/* Лаймовая плашка-подсветка под фрагментом заголовка */
.hl {
  display: inline-block;
  background: var(--lime-400);
  color: var(--text-on-accent);
  padding: 0 0.14em;
  border-radius: 8px;
  line-height: 1.2;
}

.tasks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.task-card {
  background: var(--surface-card);
  border-radius: var(--radius-card-sm);
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.task-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  background: var(--surface-placeholder);
  border: 1px solid var(--line-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
}
.task-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.task-card__title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -0.6px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.task-card__body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  text-wrap: pretty;
}

/* ===================================================================
   БЛОК 2 — КОМУ ПОДХОДИТ
   =================================================================== */
.audience { margin-top: 80px; }
.audience__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.audience__heading {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-align: center;
  text-wrap: pretty;
}
.audience__bento {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: stretch;
}
/* Левая — белый список */
.audience__list-card {
  flex: 1.7 1 0;
  min-width: 0;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 40px 52px 42px;
  box-sizing: border-box;
}
.audience__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.audience__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  text-wrap: pretty;
}
/* Маркер — лаймовый кружок с чёрной галочкой */
.audience__check {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: var(--lime-400);
  color: var(--text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
  box-shadow: 0 4px 14px rgba(190, 235, 113, 0.65);
}
.audience__check svg { width: 15px; height: 15px; }

/* Правая — лаймовая карточка */
.audience__lime-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--lime-400);
  border-radius: var(--radius-card);
  display: flex;
}
.audience__lime-inner {
  padding: 40px 40px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.audience__lime-title {
  margin: 0 0 24px;
  max-width: 640px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--text-on-accent);
  text-wrap: pretty;
}
.audience__lime-paras {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.audience__lime-paras p {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-on-accent);
  text-wrap: pretty;
}
/* Чёрная CTA в лаймовой карточке */
.audience__cta {
  gap: 14px;
  padding: 20px 40px 20px 44px;
  font-size: 19px;
}
.audience__cta .cta-dark__icon { width: 36px; height: 36px; }
.audience__cta .cta-dark__icon svg { width: 15px; height: 15px; }

/* ===================================================================
   БЛОК 3 — ПОЧЕМУ ТЕРЯЮТ ДЕНЬГИ В DeFi (тёмная полоса на всю ширину)
   =================================================================== */
.losses {
  margin-top: 80px;
  background: #151517;
  padding: 80px 0;
}
.losses__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.losses__heading {
  margin: 0 0 36px;
  max-width: 900px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #ffffff;
  text-wrap: pretty;
}
/* Красная плашка «теряют деньги» — локальный акцент только этого блока */
.losses__mark {
  display: inline-block;
  background: #C7362F;
  color: #ffffff;
  padding: 0 0.28em;
  border-radius: 8px;
  line-height: 1.18;
}
.losses__sub {
  margin: 0 0 40px;
  max-width: 760px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 15.5px;
  line-height: 1.5;
  color: #fff;
  text-wrap: pretty;
}
.losses__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.loss-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.loss-card__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-round);
  background: #C7362F;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: 20px;
}
.loss-card__icon svg { width: 17px; height: 17px; }
.loss-card__title {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -0.6px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.loss-card__body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #2F2F31;
  text-wrap: pretty;
}

/* ===================================================================
   БЛОК 4 — РАБОТА В РАЗНЫХ СЦЕНАРИЯХ РЫНКА (sticky-стек)
   =================================================================== */
.scenarios {
  max-width: 1240px;
  margin: 80px auto 0;
  padding: 0 40px 100px;
  box-sizing: border-box;
}
.scenarios__heading {
  width: 70%;
  max-width: 100%;
  margin: 0 auto 40px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-align: center;
  text-wrap: pretty;
}
.scenarios__stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.scen-card {
  width: 70%;
  margin: 0 auto;
  border-radius: 32px;
  padding: 44px 48px;
  box-sizing: border-box;
  display: flex;
  gap: 40px;
  align-items: stretch;
  position: sticky;
}
.scen-card--up   { top: 96px;  flex-direction: row; }
.scen-card--flat { top: 122px; flex-direction: row-reverse; }
.scen-card--down { top: 148px; flex-direction: row; }

.scen-card__text {
  flex: 7 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scen-card__num {
  display: block;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.scen-card__title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.6px;
  text-wrap: pretty;
}
.scen-card__body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
.scen-card__img {
  flex: 3 1 0;
  min-width: 0;
  min-height: 240px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scen-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Цветовые темы карточек-сценариев */
.scen-card--up   { background: var(--lime-400); }
.scen-card--up   .scen-card__num { color: rgba(47, 47, 49, 0.74); }
.scen-card--up   .scen-card__body { color: #2F2F31; }
.scen-card--up   .scen-card__title { color: var(--text-on-accent); }
.scen-card--up   .scen-card__img { background: rgba(0, 0, 0, 0.07); }
.scen-card--up   .ph-label { color: rgba(47, 47, 49, 0.5); }

.scen-card--flat { background: #151517; }
.scen-card--flat .scen-card__num { color: rgba(255, 255, 255, 0.66); }
.scen-card--flat .scen-card__body { color: #ffffff; }
.scen-card--flat .scen-card__title { color: #ffffff; }
.scen-card--flat .scen-card__img { background: rgba(255, 255, 255, 0.08); }
.scen-card--flat .ph-label { color: rgba(255, 255, 255, 0.5); }

.scen-card--down { background: #C7362F; }
.scen-card--down .scen-card__num { color: rgba(255, 255, 255, 0.78); }
.scen-card--down .scen-card__body { color: #ffffff; }
.scen-card--down .scen-card__title { color: #ffffff; }
.scen-card--down .scen-card__img { background: rgba(255, 255, 255, 0.10); }
.scen-card--down .ph-label { color: rgba(255, 255, 255, 0.55); }

/* Финальная чёрная кнопка (крупная) */
.scenarios__cta-wrap {
  width: 70%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.scenarios__cta {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 16px;
  padding: 30px 48px;
  font-size: 24px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}
.scenarios__cta:hover { box-shadow: 0 20px 42px rgba(0, 0, 0, 0.26); }
.scenarios__cta .cta-dark__icon { width: 44px; height: 44px; }
.scenarios__cta .cta-dark__icon svg { width: 19px; height: 19px; }

/* ===================================================================
   АДАПТИВ ≤1180px (планшет): слом раскладки, отключение sticky
   =================================================================== */
@media (max-width: 1180px) {
  /* section gaps */
  .tasks, .audience, .losses, .scenarios { margin-top: 44px; }

  .tasks__inner, .audience__inner, .losses__inner { padding: 0 28px; }
  .scenarios { padding: 0 28px 60px; }

  .tasks__heading { margin-bottom: 22px; }
  .task-card { padding: 20px; }
  .task-card__title { font-size: 18px; }

  .audience__heading { margin-bottom: 22px; }
  .audience__list-card { padding: 28px 26px 30px; }
  .audience__list { gap: 20px; }
  .audience__lime-inner { padding: 32px 28px; }
  .audience__lime-title { font-size: 26px; }
  .audience__cta { gap: 12px; padding: 16px 28px 16px 30px; font-size: 16px; }
  .audience__cta .cta-dark__icon { width: 30px; height: 30px; }
  .audience__cta .cta-dark__icon svg { width: 13px; height: 13px; }

  .losses { padding: 52px 0; }
  .losses__heading { margin-bottom: 28px; }
  .losses__sub { font-size: 15px; margin-bottom: 32px; }
  .losses__grid { grid-template-columns: repeat(2, 1fr); }
  .loss-card { padding: 24px 22px; }
  .loss-card__title { font-size: 18px; }

  /* sticky отключаем — обычный поток */
  .scenarios__heading { width: 100%; margin-bottom: 30px; }
  .scenarios__stack { gap: 20px; }
  .scen-card {
    width: 100%;
    position: static;
    top: auto;
    gap: 24px;
    padding: 32px 28px;
  }
  .scen-card__title { font-size: 24px; }
  .scen-card__body { font-size: 15px; }
  .scen-card__num { font-size: 13px; }
  .scen-card__img { min-height: 180px; }

  .scenarios__cta-wrap { width: 100%; }
  .scenarios__cta { width: 100%; padding: 24px 30px; font-size: 19px; }
  .scenarios__cta .cta-dark__icon { width: 36px; height: 36px; }
  .scenarios__cta .cta-dark__icon svg { width: 16px; height: 16px; }
}

/* ===================================================================
   АДАПТИВ ≤1000px: блок «Кому подходит» — карточки друг под другом
   (стек раньше остальных блоков, у которых слом на 1180)
   =================================================================== */
@media (max-width: 1000px) {
  .audience__bento { flex-direction: column; }
  .audience__list-card { flex: 1 1 auto; }
  .audience__lime-card { flex: 1 1 auto; }
  /* в стеке возвращаем прежний, чуть меньший размер тела */
  .audience__list li { font-size: 15px; }
  .audience__lime-paras p { font-size: 15px; }
}

/* ---- Финансовые задачи (§3): 4 карточки в ряд держим до 940px, ниже — 2 (правка 30.08) ---- */
@media (max-width: 940px) {
  .tasks__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Сценарии рынка (§6): переориентация карточек в вертикаль (текст → фото) на 768px, ниже слома они горизонтальны (правка 30.08; раньше слом был на 1180) ---- */
@media (max-width: 768px) {
  .scen-card { flex-direction: column; }
  .scen-card--flat { flex-direction: column; }
}

/* ===================================================================
   АДАПТИВ ≤560px (narrow): донастройка типографики/отступов
   =================================================================== */
@media (max-width: 560px) {
  .tasks, .audience, .losses, .scenarios { margin-top: 36px; }
  /* На узких экранах фикс-заголовки 38px переводим в резину (как hero H1),
     чтобы длинные слова не вызывали горизонтальный скролл на телефонах <475px. */
  .author__heading,
  .tasks__heading, .audience__heading,
  .losses__heading, .scenarios__heading { font-size: clamp(24px, 7vw, 28px); }

  .tasks__inner, .audience__inner, .losses__inner { padding: 0 18px; }
  .scenarios { padding: 0 18px 44px; }

  .tasks__heading { margin-bottom: 18px; }
  .tasks__grid { grid-template-columns: 1fr; }
  .task-card { padding: 18px; }
  .task-card__img { aspect-ratio: 16 / 9; margin-bottom: 14px; }
  .task-card__title { font-size: 18px; }
  .task-card__body { font-size: 15px; }

  .audience__heading { margin-bottom: 18px; }
  .audience__list-card { padding: 22px 18px 24px; }
  .audience__list { gap: 18px; }
  .audience__list li { grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; }
  .audience__check { width: 26px; height: 26px; }
  .audience__check svg { width: 14px; height: 14px; }
  .audience__lime-inner { padding: 28px 22px; }
  .audience__lime-title { font-size: 22px; margin-bottom: 20px; }
  .audience__lime-paras { margin-bottom: 20px; gap: 12px; }
  .audience__lime-paras p { font-size: 14px; }
  .audience__cta { padding: 14px 22px 14px 24px; font-size: 15px; gap: 10px; }
  .audience__cta .cta-dark__icon { width: 28px; height: 28px; }
  .audience__cta .cta-dark__icon svg { width: 13px; height: 13px; }

  .losses { padding: 40px 0; }
  .losses__heading { margin-bottom: 24px; }
  .losses__sub { font-size: 14px; margin-bottom: 28px; }
  .losses__grid { grid-template-columns: 1fr; gap: 14px; }
  .loss-card { padding: 22px 20px; border-radius: 18px; }
  .loss-card__icon { width: 30px; height: 30px; margin-bottom: 16px; }
  .loss-card__icon svg { width: 15px; height: 15px; }
  .loss-card__title { font-size: 18px; }
  .loss-card__body { font-size: 15px; }

  .scenarios__heading { margin-bottom: 24px; }
  .scenarios__stack { gap: 16px; }
  .scen-card { border-radius: 24px; padding: 26px 22px; gap: 20px; }
  .scen-card__title { font-size: 22px; margin-bottom: 12px; }
  .scen-card__body { font-size: 15px; }
  .scen-card__num { font-size: 12px; margin-bottom: 12px; }
  .scen-card__img { border-radius: 16px; }

  .scenarios__cta { padding: 20px 24px; font-size: 17px; gap: 12px; }
  .scenarios__cta .cta-dark__icon { width: 32px; height: 32px; }
  .scenarios__cta .cta-dark__icon svg { width: 15px; height: 15px; }
}

/* ===================================================================
   ДОП. ТОКЕН для блоков «Программа / Что ещё входит / Формат»
   =================================================================== */
:root {
  --line-divider: rgba(47, 47, 49, 0.16);   /* линия таймлайна, разделитель номер/бирка */
}

/* ===================================================================
   БЛОК 5 — ПРОГРАММА: ПО КАКИМ ШАГАМ (вертикальный таймлайн)
   Заголовок и стек ограничены 70% ширины (100% на ≤1180), как у сценариев.
   =================================================================== */
.program { margin-top: 80px; }
.program__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.program__head {
  width: 70%;
  max-width: 100%;
  margin: 0 auto 28px;
}
.program__heading {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-align: center;
  text-wrap: pretty;
}
.program__stack {
  width: 70%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.step {
  display: grid;
  grid-template-columns: 60px 1fr;   /* stepBadge 1fr */
  gap: 24px;
  align-items: start;
}
/* Левая колонка: кружок-номер + соединительная линия (тянется на высоту карточки) */
.step__spine {
  position: relative;
  width: 60px;
  align-self: stretch;
}
.step__line {
  position: absolute;
  left: 29px;                        /* центр кружка (60/2 − 1) */
  top: 60px;                         /* начинается под кружком */
  height: calc(100% - 60px + 18px);  /* дотягивается до следующего кружка */
  width: 2px;
  background: var(--line-divider);
}
.step:last-child .step__line { display: none; }  /* после 6-го шага линии нет */
.step__badge {
  position: relative;
  z-index: 1;                        /* над линией */
  width: 60px;
  height: 60px;
  border-radius: var(--radius-round);
  background: var(--surface-invert);
  color: var(--lime-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 20px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Карточка шага */
.step__card {
  background: var(--surface-card);
  border-radius: var(--radius-card-sm);
  padding: 26px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.step__kicker {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.step__title {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.step__body {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #2F2F31;
  text-wrap: pretty;
}

/* ===================================================================
   БЛОК 6 — ЧТО ЕЩЁ ВХОДИТ В ОБУЧЕНИЕ (3 чередующихся ряда)
   =================================================================== */
.extras { margin-top: 100px; }
.extras__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.extras__head {
  margin: 0 0 28px;
  text-align: center;
}
.extras__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.extras__rows {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.extra__text { order: 0; min-width: 0; }
.extra__media { order: 1; position: relative; min-width: 0; }
/* Чередование: у 2-го ряда текст справа, изображение слева */
.extra--reverse .extra__text { order: 1; }
.extra--reverse .extra__media { order: 0; }

.extra__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.extra__num,
.extra__kicker {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.extra__sep {
  width: 1px;
  height: 13px;
  background: var(--line-divider);
  flex: none;
}
.extra__title {
  margin: 0 0 20px;
  max-width: 560px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.6px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.extra__paras {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.extra__paras p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #2F2F31;
  text-wrap: pretty;
}
/* Плейсхолдер-изображение */
.extra__ph {
  width: 100%;
  min-height: 360px;
  border-radius: 28px;
  background: var(--surface-placeholder);
  border: 1px solid var(--line-hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.extra__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Лаймовая стикер-пилюля (свисает за нижний край плейсхолдера) */
.extra__pill {
  position: absolute;
  bottom: -18px;
  left: 24px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--lime-400);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 13px;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 22px rgba(190, 235, 113, 0.6);
  white-space: nowrap;
}

/* ===================================================================
   БЛОК 7 — ФОРМАТ ОБУЧЕНИЯ (4 мини-карточки)
   =================================================================== */
.format { margin-top: 80px; }
.format__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.format__heading {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.format__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fmt-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.fmt-card__img {
  width: 100%;
  aspect-ratio: 16 / 9; /* было 4/3; на −25% ниже по высоте (правка 31.08) */
  border-radius: 16px;
  background: var(--surface-placeholder);
  border: 1px solid var(--line-hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.fmt-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmt-card__title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.6px;
  color: var(--text-strong);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.fmt-card__body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #2F2F31;
  text-wrap: pretty;
}

/* ===================================================================
   АДАПТИВ ≤1180px — блоки «Программа / Что ещё / Формат»
   =================================================================== */
@media (max-width: 1180px) {
  .program, .extras, .format { margin-top: 44px; }
  .program__inner, .extras__inner, .format__inner { padding: 0 28px; }

  /* Программа: таймлайн на всю ширину */
  .program__head { width: 100%; margin-bottom: 22px; }
  .program__stack { width: 100%; gap: 16px; }
  .step { grid-template-columns: 52px 1fr; gap: 18px; }
  .step__spine { width: 52px; }
  .step__line { left: 25px; top: 52px; height: calc(100% - 52px + 16px); }
  .step__badge { width: 52px; height: 52px; font-size: 18px; }
  .step__card { padding: 22px 24px; }
  .step__title { font-size: 19px; }

  /* Что ещё входит: одна колонка, текст сверху, изображение снизу */
  .extras__head { margin-bottom: 22px; }
  .extras__rows { gap: 52px; }
  .extra { gap: 28px; }
  .extra__meta { margin-bottom: 16px; }
  .extra__title { font-size: 28px; }
  .extra__ph { min-height: 280px; }

  .fmt-card { padding: 18px; }
  .fmt-card__title { font-size: 20px; }
  .fmt-card__img { margin-bottom: 20px; }
}

/* ---- Что ещё входит (§8): переориентация рядов в вертикаль (текст → фото) на 880px, выше слома ряды двухколоночные с чередованием (правка 30.08; раньше слом был на 1180) ---- */
@media (max-width: 880px) {
  .extra { grid-template-columns: 1fr; }
  .extra__text, .extra--reverse .extra__text { order: 0; }
  .extra__media, .extra--reverse .extra__media { order: 1; }
}

/* ---- Формат обучения (§9): 4 карточки в ряд держим до 880px, ниже — 2 (правка 30.08; раньше слом был на 1180, потом 768) ---- */
@media (max-width: 880px) {
  .format__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   АДАПТИВ ≤560px (narrow) — блоки «Программа / Что ещё / Формат»
   =================================================================== */
@media (max-width: 560px) {
  .program, .extras, .format { margin-top: 36px; }
  /* Заголовки 38px → резина, чтобы не было горизонтального скролла (как hero) */
  .program__heading, .extras__heading, .format__heading { font-size: clamp(24px, 7vw, 28px); }

  .program__inner, .extras__inner, .format__inner { padding: 0 18px; }

  /* Программа */
  .program__head { margin-bottom: 18px; }
  .program__stack { gap: 14px; }
  .step { grid-template-columns: 46px 1fr; gap: 14px; }
  .step__spine { width: 46px; }
  .step__line { left: 22px; top: 46px; height: calc(100% - 46px + 14px); }
  .step__badge { width: 46px; height: 46px; font-size: 16px; }
  .step__card { padding: 18px 18px; }
  .step__kicker { font-size: 10px; }
  .step__title { font-size: 18px; }
  .step__body { font-size: 15px; }

  /* Что ещё входит */
  .extras__head { margin-bottom: 18px; }
  .extras__rows { gap: 40px; }
  .extra { gap: 20px; }
  .extra__meta { margin-bottom: 14px; }
  .extra__num, .extra__kicker { font-size: 10px; }
  .extra__title { font-size: 24px; margin-bottom: 16px; }
  .extra__paras { gap: 12px; }
  .extra__paras p { font-size: 15px; }
  .extra__ph { min-height: 220px; border-radius: 20px; }
  .extra__pill { bottom: -14px; left: 16px; padding: 9px 16px; font-size: 11px; }

  /* Формат */
  .format__heading { margin-bottom: 18px; }
  .format__grid { grid-template-columns: 1fr; gap: 12px; }
  .fmt-card { padding: 16px; }
  .fmt-card__img { margin-bottom: 16px; }
  .fmt-card__title { font-size: 19px; }
  .fmt-card__body { font-size: 15px; }
}

/* ============ ПРОГРАММА КУРСА (аккордеон, перенос со старого лендинга) ============ */
/* Namespaced .curriculum — класс .program уже занят блоком §7 «По каким шагам». */
/* Ширина как у §7: контент 70% колонки (100% на ≤1180). Цвета подтянуты на токены проекта. */
/* #F5F5F5 — локальный тон карточки (в системе токенов нет точного соответствия). */
.curriculum {
  margin-top: 80px;
  background: var(--surface-page);
}
.curriculum__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.curriculum__title {
  width: 70%;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-align: center;
  text-wrap: pretty;
}
.curriculum__list {
  width: 70%;
  max-width: 100%;
  margin: 40px auto 0;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.curriculum__item {
  position: relative;
  background: #F5F5F5;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--surface-card);
  overflow: hidden;
  transition: background-color 0.25s ease, transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.curriculum__head {
  width: 100%;
  min-height: 60px;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.curriculum__head:focus { outline: none; }
.curriculum__head:focus-visible { outline: 2px solid var(--lime-400); outline-offset: -2px; }
.curriculum__item:hover {
  background: var(--surface-card);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--surface-card), 0 12px 28px rgba(0, 0, 0, 0.06);
}
.curriculum__week {
  flex-shrink: 0;
  background: var(--lime-300);
  border-radius: 10px;
  padding: 8px 12px 5px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 16.8px;
  font-weight: var(--weight-bold);
  color: var(--text-on-accent);
  white-space: nowrap;
}
.curriculum__topic {
  flex: 1;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}
/* Модуль 8: обёртка «заголовок + подзаголовок» (flex-элемент вместо самого h3) */
.curriculum__titlewrap { flex: 1; min-width: 0; display: block; }
/* подзаголовок «Только в тарифе Премиум» — тот же шрифт, что заголовок, меньше размером */
.curriculum__subtitle {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.curriculum__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-placeholder);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.curriculum__arrow svg { display: block; transition: transform 0.25s ease; }
.curriculum__item.is-expanded { background: var(--surface-card); }
.curriculum__item.is-expanded .curriculum__arrow { background: var(--lime-400); color: var(--text-on-accent); }
.curriculum__item.is-expanded .curriculum__arrow svg { transform: rotate(45deg); }
/* Модуль 8: бледно-зелёная заливка карточки (--stat-mint = #E9F4DA). После базовых hover/is-expanded — чтобы выиграть по порядку при равной специфичности. */
.curriculum__item--mint,
.curriculum__item--mint:hover,
.curriculum__item--mint.is-expanded { background: var(--stat-mint); }
.curriculum__details { padding: 0 28px 24px; }
.curriculum__details[hidden] { display: none; }
.curriculum__desc {
  margin: 0;
  max-width: 800px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22.4px;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
}
.curriculum__topics-row { display: flex; align-items: center; gap: 16px; margin-top: 31px; }
.curriculum__topics-label {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: 0;
}
.curriculum__divider { flex: 1; height: 1px; background: var(--line-hairline); }
.curriculum__topics-list {
  margin: 19px 0 0;
  padding: 0;
  max-width: 800px;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 19.6px;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
}
.curriculum__topics-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
}
.curriculum__topics-list li:last-child { margin-bottom: 0; }
.curriculum__topics-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime-400);
}
/* --- расширенная структура карточки (пока Модуль 1) --- */
.curriculum__label {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: 0;
  margin: 0 0 10px;
}
.curriculum__body-label { margin-top: 28px; }
.curriculum__solve {
  margin: 0;
  max-width: 800px;
}
.curriculum__solve-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--weight-medium);
  color: var(--text-ink);
}
/* legacy inline label kept for safety */
.curriculum__solve-label {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.curriculum__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.curriculum__link {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition-interactive);
}
.curriculum__link:hover { color: var(--text-muted); }
/* CTA-блок под списком модулей (реюз .scenarios__cta-wrap из §6, добавляем верхний отступ) */
.curriculum__cta { margin-top: 44px; }

@media (max-width: 1180px) {
  .curriculum { margin-top: 44px; }
  .curriculum__inner { padding: 0 28px; }
  .curriculum__title { width: 100%; }
  .curriculum__list { width: 100%; }
  .curriculum__topic { font-size: 18px; line-height: 1.3; }
}
@media (max-width: 560px) {
  .curriculum { margin-top: 36px; }
  .curriculum__inner { padding: 0 18px; }
  .curriculum__title { font-size: clamp(24px, 7vw, 28px); }
  .curriculum__list { margin-top: 24px; gap: 10px; }
  .curriculum__head { min-height: 64px; padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .curriculum__week { order: 1; font-size: 13px; line-height: 1.2; padding: 6px 10px 4px; }
  .curriculum__arrow { order: 2; margin-left: auto; }
  .curriculum__topic { order: 3; flex-basis: 100%; font-size: 15px; line-height: 1.3; }
  .curriculum__titlewrap { order: 3; flex-basis: 100%; }
  .curriculum__subtitle { font-size: 13px; }
  .curriculum__cta { margin-top: 32px; }
  .curriculum__details { padding: 0 16px 18px; }
  .curriculum__label { font-size: 15px; }
  .curriculum__topics-label { font-size: 15px; }
  .curriculum__solve-text { font-size: 15px; }
  .curriculum__desc { font-size: 15px; }
}

/* --- Модуль 8: зелёная бирка «Только в тарифе Премиум» --- */
.curriculum__badge-row { margin-top: 16px; }
.curriculum__badge {
  display: inline-block;
  background: var(--lime-400);
  color: var(--text-on-accent);
  border-radius: 8px;
  padding: 6px 12px 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
}

/* ===================================================================
   §11 — О ПРОГРАММЕ В ЦИФРАХ (5 карточек-цифр)
   Идёт после §9 «Формат обучения». Стиль section-заголовка как у .format.
   =================================================================== */
:root {
  --stat-mint: rgb(233, 244, 218);  /* бледно-лаймовая карточка §11 (локальный тон, точного токена нет) */
  --stat-gray: rgb(240, 240, 240);  /* светло-серая карточка §11 (чуть светлее фона страницы 235) */
}

.stats { margin-top: 80px; }
.stats__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.stats__heading {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.stat-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 30px 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.stat-card--lime { background: var(--lime-400); }
.stat-card--mint { background: var(--stat-mint); }
.stat-card--gray { background: var(--stat-gray); }
.stat-card__num {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  /* крупная «резиновая» цифра (см. §4): floor 40 — чтобы не переполнять узкие карточки */
  font-size: clamp(40px, 6.4vw, 58px);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-strong);
}
.stat-card__label {
  margin-top: 26px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #2F2F31;
  text-wrap: pretty;
}

/* Адаптив §11 ≤1180px — 3 колонки (3+2) */
@media (max-width: 1180px) {
  .stats { margin-top: 44px; }
  .stats__inner { padding: 0 28px; }
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat-card { padding: 26px 22px; }
}

/* Адаптив §11 ≤560px — одна колонка, заголовок «резина» (как §7–§9) */
@media (max-width: 560px) {
  .stats { margin-top: 36px; }
  .stats__heading { font-size: clamp(24px, 7vw, 28px); margin-bottom: 18px; }
  .stats__inner { padding: 0 18px; }
  .stats__grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { padding: 24px 22px; }
  .stat-card__label { margin-top: 20px; font-size: 15px; }
}

/* ===================================================================
   §12–§14 — ПОРТФЕЛЬ 20–35% / ЧТО УМЕЕТ УЧЕНИК / ТАРИФЫ
   Идут после §11 «О программе в цифрах». Хэндоф от Claude Design.
   =================================================================== */
:root {
  --surface-soft: rgb(245, 245, 245);  /* мягкий фон тарифа «Базовый» (локальный тон) */
  --radius-tile: 20px;                  /* радиус плашки «Расширенная программа» */
}

/* ---------- §12 Портфель 20–35% ---------- */
.portfolio { margin-top: 80px; }
.portfolio__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.portfolio__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.portfolio__title {
  max-width: 620px;
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.portfolio__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.portfolio__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #2F2F31;
  text-wrap: pretty;
}
.portfolio__check {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: var(--lime-400);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-shadow: 0 4px 14px rgba(190, 235, 113, 0.65);
}
.portfolio__check svg { width: 15px; height: 15px; }
.portfolio__media { order: 0; }
.portfolio__ph {
  width: 100%;
  min-height: 440px;
  border-radius: 32px;
  background: var(--surface-placeholder);
  border: 1px solid var(--line-hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* CTA-блок после портфеля (реюз .scenarios__cta-wrap из §6, свой верхний отступ).
   width:100% — кнопка «Выбрать тариф» растянута на всю ширину контента (правка 30.08),
   вместо унаследованных 70% от .scenarios__cta-wrap. */
.portfolio__cta { margin-top: 44px; width: 100%; }

/* ---------- §13 Что ещё умеет ученик ---------- */
.skills { margin-top: 80px; }
.skills__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.skills__heading {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.skills__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.skill-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: 32px 34px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
}
.skill-card__check {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: var(--lime-400);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-shadow: 0 4px 14px rgba(190, 235, 113, 0.65);
}
.skill-card__check svg { width: 15px; height: 15px; }
.skill-card__text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: #2F2F31;
  text-wrap: pretty;
}

/* ---------- §14 Тарифы ---------- */
.tariffs { margin-top: 80px; }
.tariffs__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.tariffs__heading {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: pretty;
}
.tariffs__stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Карточка тарифа — темы через локальные CSS-переменные --tc-* */
.tier {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 44px;
  align-items: stretch;
  border-radius: 28px;
  padding: 32px 34px;
  box-sizing: border-box;
  /* Базовый (обычная тема) */
  background: var(--surface-soft);
  --tc-ink: var(--text-strong);
  --tc-desc: var(--text-ink);
  --tc-btn-bg: #000;
  --tc-btn-color: #fff;
  --tc-line: var(--line-hairline);
  --tc-check-bg: rgb(214, 214, 214);
  --tc-check-color: #000;
  --tc-price-old: var(--text-muted);
  --tc-muted-ink: var(--text-muted);
  --tc-muted-check-bg: rgb(228, 228, 228);
  --tc-muted-check-color: var(--text-muted);
  --tc-extra-bg: rgba(255, 255, 255, 0.5);
  --tc-extra-ink: rgba(0, 0, 0, 0.82);
  --tc-extra-head: rgba(0, 0, 0, 0.6);
}
.tier--pro {
  background: var(--lime-400);
  --tc-ink: var(--text-strong);
  --tc-desc: rgba(0, 0, 0, 0.72);
  --tc-btn-bg: #000;
  --tc-btn-color: #fff;
  --tc-line: rgba(0, 0, 0, 0.14);
  --tc-check-bg: #000;
  --tc-check-color: var(--lime-400);
  --tc-price-old: rgba(0, 0, 0, 0.4);
  --tc-muted-ink: rgba(0, 0, 0, 0.42);
  --tc-muted-check-bg: rgba(0, 0, 0, 0.1);
  --tc-muted-check-color: rgba(0, 0, 0, 0.5);
  --tc-extra-bg: rgba(255, 255, 255, 0.5);
  --tc-extra-ink: rgba(0, 0, 0, 0.82);
  --tc-extra-head: rgba(0, 0, 0, 0.6);
}
.tier--dark {
  background: var(--surface-invert);
  --tc-ink: var(--text-on-invert);
  --tc-desc: rgba(255, 255, 255, 0.72);
  --tc-btn-bg: var(--lime-400);
  --tc-btn-color: #000;
  --tc-line: rgba(255, 255, 255, 0.16);
  --tc-check-bg: var(--lime-400);
  --tc-check-color: #000;
  --tc-price-old: rgba(255, 255, 255, 0.4);
  --tc-muted-ink: rgba(255, 255, 255, 0.5);
  --tc-muted-check-bg: rgba(255, 255, 255, 0.16);
  --tc-muted-check-color: #fff;
  --tc-extra-bg: rgba(255, 255, 255, 0.1);
  --tc-extra-ink: #fff;
  --tc-extra-head: rgba(255, 255, 255, 0.55);
}

/* Левый рельс */
.tier__rail {
  display: flex;
  flex-direction: column;
}
.tier__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-invert);
  color: var(--lime-400);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tier__badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-round);
  background: var(--lime-400);
}
.tier__name {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--tc-ink);
}
.tier__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.tier__price-new {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 36px;
  letter-spacing: -1px;
  color: var(--tc-ink);
}
.tier__price-old {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 18px;
  color: var(--tc-price-old);
  text-decoration: line-through;
}
.tier__countdown {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #000;
}
.tier__countdown-num {
  font-weight: var(--weight-bold);
  color: #000;
}
/* тёмная карточка (Премиум): чёрный не читается — держим белым */
.tier--dark .tier__countdown,
.tier--dark .tier__countdown-num { color: #fff; }
.tier__sep {
  height: 0;               /* линия-разделитель убрана (30.08) */
  background: transparent;
  margin: 8px 0;
}
.tier__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tc-desc);
  text-wrap: pretty;
}
.tier__cta {
  margin-top: auto;
  padding-top: 20px;
  text-decoration: none;
}
.tier__cta span {
  display: block;
  width: 100%;
  padding: 13px 24px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--tc-btn-bg);
  color: var(--tc-btn-color);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.tier__cta:hover span {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

/* Подпись «Старт — 8 октября» под кнопкой тарифа (цвет — тем-зависимый). */
.tier__cta-note {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  text-align: center;
  color: var(--tc-desc);
}

/* Правая колонка (состав) */
.tier__body {
  border-left: 1px solid var(--tc-line);
  padding-left: 44px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}
.tier--pro .tier__body,
.tier--dark .tier__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.tier__col { min-width: 0; }
.tier__inherited,
.tier__features,
.tier__extra-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.tier__inherited { margin-bottom: 18px; }
.tier__inherited li,
.tier__features li,
.tier__extra-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
.tier__inherited li { color: var(--tc-muted-ink); }
.tier__features li { color: var(--tc-ink); }
.tier__extra-list li { color: var(--tc-extra-ink); font-size: 14px; line-height: 1.45; }
.tier__also {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 14px;
  color: var(--tc-ink);
}
.tier__ic {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.tier__ic svg { width: 11px; height: 11px; }
.tier__ic--feat { background: var(--tc-check-bg); color: var(--tc-check-color); }
.tier__ic--muted { background: var(--tc-muted-check-bg); color: var(--tc-muted-check-color); }
.tier__ic--extra { background: var(--surface-invert); color: var(--lime-400); }
.tier__extra {
  padding: 20px 22px;
  box-sizing: border-box;
  background: var(--tc-extra-bg);
  border-radius: var(--radius-tile);
}
.tier__extra-head {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-extra-head);
}

/* Кнопка сравнения */
.tariffs__compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
.tariffs__compare-btn {
  padding: 16px 56px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-decoration: none;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.tariffs__compare-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.tariffs__compare-note {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Адаптив ≤1180px ---------- */
@media (max-width: 1180px) {
  .portfolio, .skills, .tariffs { margin-top: 44px; }
  .portfolio__inner, .skills__inner, .tariffs__inner { padding: 0 28px; }

  .portfolio__grid { gap: 32px; }
  .portfolio__ph { min-height: 320px; }
  .portfolio__title { margin-bottom: 28px; }

  .skill-card { padding: 26px 24px; }
  .skill-card__text { font-size: 15px; }

  /* рельс тарифа держим 300px до 940 — ниже карточка складывается в вертикаль (см. §14) */
  .tier { gap: 26px; padding: 28px 26px; }
  .tier__body { padding-left: 24px; gap: 26px; }
}

/* ---------- Адаптив ≤560px ---------- */
@media (max-width: 560px) {
  .portfolio, .skills, .tariffs { margin-top: 36px; }
  .portfolio__inner, .skills__inner, .tariffs__inner { padding: 0 18px; }
  .portfolio__title, .skills__heading, .tariffs__heading { font-size: clamp(24px, 7vw, 28px); }

  .portfolio__grid { gap: 24px; }
  .portfolio__ph { min-height: 260px; border-radius: 24px; }
  .portfolio__cta { margin-top: 32px; }
  .portfolio__title { margin-bottom: 24px; }
  .portfolio__list li { grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; }
  .portfolio__check { width: 26px; height: 26px; }
  .portfolio__check svg { width: 14px; height: 14px; }

  .skills__heading { margin-bottom: 18px; }
  .skills__grid { grid-template-columns: 1fr; }
  .skill-card { grid-template-columns: 26px 1fr; padding: 22px 20px; }
  .skill-card__check { width: 26px; height: 26px; }
  .skill-card__check svg { width: 14px; height: 14px; }
  .skill-card__text { font-size: 15px; }

  .tariffs__heading { margin-bottom: 18px; }
  .tier { gap: 24px; padding: 24px 22px; }
  .tier__inherited li, .tier__features li { font-size: 15px; }
  .tier__desc { font-size: 15px; }
  .tier__name { font-size: 22px; }
  .tier__price-new { font-size: 30px; }
  .tariffs__compare { margin-top: 28px; }
  .tariffs__compare-btn { padding: 16px 32px; text-align: center; }
}

/* §14 Тарифы: слом карточки в вертикаль перенесён 560→940 (правка 31.08).
   На 940–1180 карточка ГОРИЗОНТАЛЬНАЯ (рельс 300px слева / тело справа).
   С ≤940 — вертикаль: рельс сверху (тариф → цена → отсчёт → описание → кнопка),
   затем разделительная линия (border-top) и ниже список пунктов одной колонкой.
   Блок ПОСЛЕ @1180/@560 в источнике — равная специфичность, побеждает порядок. */
@media (max-width: 940px) {
  .tier { grid-template-columns: 1fr; }
  .tier__body,
  .tier--pro .tier__body,
  .tier--dark .tier__body {
    grid-template-columns: 1fr;
    border-left: none;
    border-top: 1px solid var(--tc-line);
    padding-left: 0;
    padding-top: 24px;
    gap: 24px;
  }
}

/* ===================================================================
   §15 — FAQ (перенос со старого лендинга). Ширина ИСХОДНАЯ (контейнер
   .container 1200px — в инструкции числом не задан, принято 1200; при
   необходимости выровнять под 1240 остальных блоков — отдельным шагом).
   Брейкпоинты оставлены как в инструкции (960/768/480), НЕ переведены
   на проектные 1180/560 — по просьбе «как в инструкции».
   =================================================================== */
:root { --transition: 180ms ease; }

/* Контейнер старого лендинга (используется только блоком FAQ) */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.faq {
  background: #EBEBEB;
  margin-top: 80px;      /* отбивка от §14 «Тарифы» — в проектном ритме */
  padding: 0 0 120px;
}
.faq__inner {
  display: flex;
  flex-direction: column;
}
.faq__title {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 42px;
  line-height: 46.2px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #000;
}
.faq__list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  position: relative;
  background: #F5F5F5;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px #FFFFFF;
  overflow: hidden;
  transition: background-color 0.25s ease, transform var(--transition), box-shadow var(--transition);
}
.faq__head {
  width: 100%;
  min-height: 60px;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.faq__head:focus { outline: none; }
.faq__head:focus-visible {
  outline: 2px solid #BEEB71;
  outline-offset: -2px;
}
.faq__item:hover {
  background: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px #FFFFFF, 0 12px 28px rgba(0, 0, 0, 0.06);
}
.faq__question {
  flex: 1;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: #000;
}
.faq__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #D9D9D9;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.faq__arrow svg {
  display: block;
  transition: transform 0.25s ease;
}
.faq__item.is-expanded { background: #FFFFFF; }
.faq__item.is-expanded .faq__arrow {
  background: #BEEB71;
  color: #09090B;
}
.faq__item.is-expanded .faq__arrow svg { transform: rotate(45deg); }
.faq__details { padding: 0 36px 24px; }
.faq__details[hidden] { display: none; }
.faq__answer {
  margin: 0;
  max-width: 940px;  /* +140px по просьбе: тянем текст правее на вебе (пустое место справа) */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15.5px;  /* как тело текста на лендинге */
  line-height: 150%;
  font-weight: 500;
  color: #000000;
}
.faq__answer + .faq__answer { margin-top: 16px; }
.faq__cta {
  align-self: stretch;
  margin-top: 48px;
  height: 84px;
  border-radius: 100px;
  background: #000000;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 32px;
  line-height: 35.2px;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.faq__cta:hover {
  background: #1A1A1A;
  transform: translateY(-2px);
}
.faq__cta:active { transform: translateY(0); }

/* Блок кнопок под аккордеоном */
.cta-group {
  width: 100%;
  margin-top: 48px; /* отступ переехал сюда с легаси .faq__cta (кнопку заменили на .cta-dark из §12) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cta-consult-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
}
.cta-consult-link:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* Адаптив FAQ — планшет */
@media (max-width: 960px) {
  .container { padding: 0 20px; }
  .faq {
    margin-top: 44px;
    padding: 32px 0 64px;
  }
  .faq__title {
    font-size: 26px;
    line-height: 1.15;
  }
  .faq__list {
    margin-top: 24px;
    gap: 10px;
  }
  .faq__head {
    min-height: 64px;
    padding: 14px 20px;
    gap: 16px;
  }
  .faq__question {
    font-size: 16px;
    line-height: 1.3;
  }
  .faq__details { padding: 0 20px 18px; }
  .faq__answer { max-width: 800px; }  /* на планшете/мобильном ширину не трогаем */
  .cta-group { margin-top: 32px; }
  .faq__cta {
    height: 80px;
    font-size: 24px;
    margin-top: 32px;
  }
}

/* Адаптив FAQ — мобильные */
@media (max-width: 768px) {
  .cta-consult-link { font-size: 17px; }
}
@media (max-width: 480px) {
  .faq { margin-top: 36px; }
  .faq__answer { font-size: 14px; }
  .faq__cta {
    height: 64px;
    font-size: 18px;
  }
  .cta-consult-link { font-size: 15px; }
}

/* ============================================================
   Отзывы (перенос со старого лендинга)
   --transition (180ms ease) уже объявлен в :root (см. FAQ).
   Отступы секции — через margin-top под ритм проекта (80/44/36),
   исходные padding-bottom не переносим (зазор к FAQ даёт .faq margin-top).
============================================================ */
.reviews {
  margin-top: 80px;
}

.reviews__title {
  font-size: 44px;
  line-height: 48.4px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #000;
  margin: 0 0 40px;
}

/* Три явные колонки: нужно точно контролировать, в какой колонке какая карточка */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: start;
}

.reviews__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.review:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.review--image {
  cursor: zoom-in;
}

/* Акцентная зелёная карточка */
.review--highlight {
  background: #C3FD72;
}

/* Большая кавычка */
.review__quote {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  line-height: 50px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(47, 47, 49, 0.30);
  user-select: none;
}

.review__text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.review__text strong {
  font-weight: 700;
}

/* Заредактированный фрагмент (имя школы скрыто) */
.review__redacted {
  display: inline-block;
  width: 59px;
  height: 14px;
  vertical-align: middle;
  background: #D9D9D9;
  border-radius: 2px;
}

/* Ссылка «читать полностью» */
.review__link {
  display: inline-block;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: rgba(47, 47, 49, 0.60);
  text-decoration: none;
  transition: color var(--transition);
  width: fit-content;
}

.review__link:hover {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.review__link:active {
  color: #000000;
  text-decoration: none;
}

/* Карточки с картинкой из чата */
.review--image {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.review__photo-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: #F3F3F3;
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}

.review__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--transition);
}

.review__photo-btn:hover .review__photo {
  transform: scale(1.02);
}

.review__caption {
  font-family: 'PT Mono', 'Menlo', monospace;
  font-size: 12px;
  line-height: 13.2px;
  font-weight: 400;
  text-transform: uppercase;
  color: rgba(47, 47, 49, 0.60);
  padding: 15px 20px 18px;
  border-top: 1px solid rgba(47, 47, 49, 0.10);
}

/* Контрол «Показать все / Скрыть отзывы» — виден только на мобилке (≤767px) */
.reviews__toggle {
  display: none;
}

/* -----------------------------------------------------------
   Review modal (popup)
----------------------------------------------------------- */
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 40px;
  overflow-y: auto;
}

.review-modal.is-open {
  display: flex;
}

.review-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  z-index: 0;
}

.review-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 40px 40px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-modal__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-modal__qa {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-modal__question {
  font-size: 16px;
  line-height: 22.4px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.review-modal__answer {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #000;
  margin: 0;
  white-space: pre-line;
}

.review-modal__answer strong {
  font-weight: 700;
}

.review-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: rgba(0, 0, 0, 0.60);
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--transition), background-color var(--transition);
}

.review-modal__close:hover {
  color: #000000;
  background: rgba(0, 0, 0, 0.06);
}

.review-modal__close:active {
  background: rgba(0, 0, 0, 0.10);
}

.review-modal__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.review-modal__btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.60);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition);
}

.review-modal__btn:hover {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.review-modal__btn:active {
  color: #000000;
  text-decoration: none;
}

.review-modal__btn:disabled,
.review-modal__btn[disabled] {
  color: rgba(0, 0, 0, 0.20);
  cursor: default;
  text-decoration: none;
  pointer-events: none;
}

body.is-modal-open {
  overflow: hidden;
}

/* -----------------------------------------------------------
   Лайтбокс (просмотр скринов чатов)
----------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  z-index: 0;
}

.lightbox__dialog {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40);
  background: #FFFFFF;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: rgba(0, 0, 0, 0.60);
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--transition), background-color var(--transition);
}

.lightbox__close:hover {
  color: #000000;
  background: rgba(0, 0, 0, 0.06);
}

.lightbox__close:active {
  background: rgba(0, 0, 0, 0.10);
}

/* -----------------------------------------------------------
   Адаптив — планшет (≤1024px): колонки схлопываются в masonry 2 столбца
----------------------------------------------------------- */
@media (max-width: 1024px) {
  .reviews {
    margin-top: 44px;
  }

  .reviews__title {
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 28px;
  }

  .reviews__grid {
    display: block;
    column-count: 2;
    column-gap: 20px;
  }

  .reviews__col {
    display: contents;
  }

  .review {
    margin: 0 0 20px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }

  .review-modal {
    padding: 60px 16px 40px;
  }

  .review-modal__dialog {
    padding: 32px 28px 24px;
    border-radius: 20px;
  }
}

/* -----------------------------------------------------------
   Адаптив — мобильные (≤767px): видны первые 4 карточки,
   остальные (.review--extra) скрыты до клика «Показать все».
----------------------------------------------------------- */
@media (max-width: 767px) {
  .reviews {
    margin-top: 36px;
  }

  .reviews__title {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 20px;
  }

  .reviews__grid {
    display: block;
    column-count: 1;
    column-gap: 0;
  }

  .reviews__col {
    display: contents;
  }

  .review {
    margin: 0 0 14px;
    padding: 18px;
    break-inside: avoid;
  }

  .review__quote {
    font-size: 32px;
    line-height: 36px;
  }

  .review__text {
    font-size: 15px;
    line-height: 22.5px;
  }

  .review-modal {
    padding: 40px 12px 24px;
  }

  .review-modal__dialog {
    padding: 24px 20px 20px;
    border-radius: 16px;
    gap: 20px;
  }

  .review-modal__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .review__caption {
    font-size: 11px;
    padding: 12px 16px 14px;
  }

  .reviews__grid:not(.is-expanded) .review--extra {
    display: none;
  }

  .reviews__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 8px 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: text-decoration var(--transition);
  }

  .reviews__toggle:hover {
    color: #000;
    text-decoration: underline;
  }

  .reviews__toggle:active {
    color: #000;
    text-decoration: none;
  }

  .reviews__toggle-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
  }
}

/* ============================================================
   §14a Тарифы — «язычок» (нижняя плашка с бонусами)
   Плашка на 20% темнее карточки (у Премиума — чуть светлее),
   высовывается из-под карточки; клик по плашке/стрелке
   выдвигает контент вниз (grid-rows 0fr→1fr).
   ============================================================ */
.tier-wrap { position: relative; }
.tier-wrap .tier { position: relative; z-index: 1; }

.tier-tongue {
  position: relative;
  z-index: 0;
  margin-top: -28px;          /* верх плашки прячется под карточку */
  padding-top: 28px;
  /* Язычок уже карточки на 40px с каждой стороны; при мобильной адаптации
     отступ плавно тает 40→0 в диапазоне 560→420, на ≤420 = 0 (вровень с карточкой). */
  margin-inline: clamp(0px, calc((100vw - 420px) / 3.5), 40px);
  border-radius: 0 0 24px 24px;
  box-sizing: border-box;
  /* Базовый: --surface-soft rgb(245) × 0.8 */
  background: rgb(196, 196, 196);
  --tt-title: var(--text-strong);
  --tt-text: var(--text-ink);
  --tt-arrow-bg: rgba(0, 0, 0, 0.08);
  --tt-arrow-color: #000;
  --tt-line: rgba(0, 0, 0, 0.12);
}
.tier-tongue--pro {
  /* --lime-400 rgb(190,235,113) × 0.8 */
  background: rgb(152, 188, 90);
  --tt-title: var(--text-strong);
  --tt-text: rgba(0, 0, 0, 0.78);
  --tt-arrow-bg: rgba(0, 0, 0, 0.12);
  --tt-arrow-color: #000;
  --tt-line: rgba(0, 0, 0, 0.14);
}
.tier-tongue--dark {
  /* Премиум: чёрная карточка → плашка чуть светлее */
  background: #2c2c30;
  --tt-title: #fff;
  --tt-text: rgba(255, 255, 255, 0.72);
  --tt-arrow-bg: rgba(255, 255, 255, 0.14);
  --tt-arrow-color: #fff;
  --tt-line: rgba(255, 255, 255, 0.16);
}

.tier-tongue__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 34px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.tier-tongue__label {
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.2px;
  color: var(--tt-title);
}
.tier-tongue__arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tt-arrow-bg);
  color: var(--tt-arrow-color);
  transition: transform var(--transition-interactive, 0.15s ease),
              background var(--transition-interactive, 0.15s ease);
}
.tier-tongue__arrow svg { width: 15px; height: 15px; display: block; }
.tier-tongue.is-open .tier-tongue__arrow { transform: rotate(180deg); }

/* Раздвижной контент — плавно через grid-template-rows */
.tier-tongue__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.tier-tongue.is-open .tier-tongue__body { grid-template-rows: 1fr; }
.tier-tongue__inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 34px;
}
/* верхняя линия-разделитель появляется только в раскрытом виде */
.tier-tongue__inner > .tier-bonus:first-child { padding-top: 6px; }
.tier-tongue.is-open .tier-tongue__inner { padding-bottom: 28px; }

.tier-bonus { padding-top: 18px; display: flex; gap: 20px; align-items: flex-start; }
/* Пиктограмма слева (≈ размер картинки в карточке «Общий чат») сужает колонку текста. */
.tier-bonus__media { flex: none; width: 240px; }
.tier-bonus__media img { width: 100%; height: auto; display: block; }
.tier-bonus__body { flex: 1 1 auto; min-width: 0; max-width: 680px; }
@media (max-width: 560px) {
  .tier-bonus { flex-direction: column; gap: 12px; }
  .tier-bonus__media { width: 100%; max-width: 320px; }
}
.tier-bonus + .tier-bonus {
  margin-top: 18px;
  border-top: 1px solid var(--tt-line);
}
.tier-bonus__title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-semibold, 600);
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--tt-title);
}
/* Срок бонуса inline в заголовке (динамический дедлайн промо) — регуляром, легче названия. */
.tier-bonus__bar,
.tier-bonus__term {
  font-weight: var(--weight-regular, 400);
}
.tier-bonus__note {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--tt-text);
  opacity: 0.85;
}
.tier-bonus__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tt-text);
}

@media (max-width: 1180px) {
  .tier-tongue__head { padding: 16px 26px; }
  .tier-tongue__inner { padding: 0 26px; }
}
@media (max-width: 560px) {
  .tier-tongue { margin-top: -24px; padding-top: 24px; }
  .tier-tongue__head { padding: 15px 22px; }
  .tier-tongue__inner { padding: 0 22px; }
  .tier-tongue.is-open .tier-tongue__inner { padding-bottom: 22px; }
}

/* ============================================================
   CTA под блоком «Отзывы» — кнопка «Канал с отзывами» в стиле
   Telegram (голубая, иконка-самолётик) + подпись. Ширина/брейки
   как у §16 (1024/767). Якорь #reviews-channel — заглушка.
============================================================ */
.reviews__channel {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.reviews__channel-btn {
  /* размер/шрифт — как «Выбрать тариф» (.cta-dark.scenarios__cta) в §12;
     цвет — сплошной Telegram-голубой (без градиента), без тени (правка 30.08). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  gap: 16px;
  padding: 30px 48px;
  border-radius: var(--radius-pill);
  background: #229ED9;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: var(--transition-interactive);
}
.reviews__channel-btn:hover {
  transform: translateY(-2px);
  background: #1E8FC4;
}
.reviews__channel-icon {
  flex: none;
  display: inline-flex;
  width: 34px;
  height: 34px;
}
.reviews__channel-icon svg { width: 100%; height: 100%; display: block; }
.reviews__channel-note {
  /* без max-width — подпись в одну строку там, где хватает ширины экрана;
     на узких экранах переносится сама (правка 30.08). */
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-medium, 500);
  line-height: 1.45;
  color: var(--text-muted);
}
@media (max-width: 1180px) {
  .reviews__channel-btn { padding: 24px 30px; font-size: 19px; }
  .reviews__channel-icon { width: 30px; height: 30px; }
}
@media (max-width: 767px) {
  .reviews__channel { margin-top: 36px; gap: 14px; }
  .reviews__channel-note { font-size: 15px; }
}
@media (max-width: 560px) {
  .reviews__channel-btn { padding: 20px 24px; font-size: 17px; gap: 12px; }
  .reviews__channel-icon { width: 26px; height: 26px; }
}

/* ---------- §12 Портфель: адаптив иллюстрации (правка 31.08) ----------
   На 880–1180 карточка ДВУХКОЛОНОЧНАЯ (текст слева / иллюстрация справа).
   С ≤880 иллюстрацию УБИРАЕМ ВОВСЕ — остаётся только текст на всю ширину
   (по просьбе пользователя; раньше тут была вертикаль «фото сверху» + сужение до 60%).
   Блок в КОНЦЕ файла: специфичность равная (0,1,0) — побеждает порядок в источнике. */
@media (max-width: 880px) {
  .portfolio__grid { grid-template-columns: 1fr; }
  .portfolio__media { display: none; }
}

/* ===========================================================
   Футер — общий include includes/landing_footer.html.
   Ширина 966px по центру: не тянем на .container FAQ (1200px),
   иначе 3-колоночный грид «бренд | пусто | ссылки» расходится
   с пустотой в центре (грабля §5 онбординга лендингов).
=========================================================== */
.footer {
  background: #000;
  color: #fff;
}
.footer__inner {
  max-width: 966px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 32px;
  row-gap: 16px;
  padding-top: 18px;
  padding-bottom: 24px;
  min-height: 90px;
}
.footer__col--brand {
  font-family: 'PT Mono', 'Menlo', 'Courier New', monospace;
  font-size: 35.75px;
  line-height: 39.33px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  align-self: center;
}
.footer__col--links {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__link {
  color: #fff;
  text-decoration: none;
}
.footer__social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__social-link {
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 960px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    /* только вертикальные отступы — горизонтальные от .container; шорткат
       `20px 0` обнулил бы боковые и текст прилип бы к краю (грабля §5). */
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .footer__col--brand {
    grid-column: 1 / -1;
    font-size: 28px;
    line-height: 1.1;
  }
}
@media (max-width: 640px) {
  .footer__inner {
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .footer__col--brand {
    grid-column: auto;
    font-size: 26px;
  }
  /* Пустая колонка-распорка 3-колоночного грида на одноколоночной мобилке
     даёт лишний row-gap — убираем. */
  .footer__inner > div:empty {
    display: none;
  }
}

/* ===========================================================
   Закрытые продажи (тумблер OPEN_LANDING_SALES_CLOSED) — только
   НОВЫЕ классы: /sale шарит старую static/landings/open/, задеть нельзя.
   Цену и «язычок» бонусов при закрытых продажах не показываем.
=========================================================== */
.sales-closed .tier-tongue {
  display: none;
}
.tier__cta--closed {
  cursor: default;
  pointer-events: none;
}
/* Мьютим саму кнопку (внутренний span несёт фон/радиус/тень), а НЕ обёртку .tier__cta:
   у обёртки padding-top:20px и нет радиуса → фон на ней заливал серый бокс вокруг тёмной кнопки. */
.tier__cta--closed span {
  background: var(--surface-placeholder);
  color: var(--text-muted);
  box-shadow: none;
}
.tier__cta--waitlist {
  margin-top: 10px;
}
/* Предзапись-hero: «Попасть в список предзаписи» + «Консультация» длиннее открытого «Выбрать тариф»
   и не влезали в 600px-колонку hero (переносились на 2 строки). Поджимаем горизонтальный padding
   и gap ТОЛЬКО в закрытом виде — размер шрифта и открытый hero не трогаем. */
.sales-closed .hero__cta {
  gap: 12px;
}
.sales-closed .hero__cta .btn--primary {
  padding-left: 26px;
  padding-right: 26px;
}
.sales-closed .hero__cta .btn--secondary {
  padding-left: 26px;
  padding-right: 26px;
}
/* Предзапись: «Попасть в список предзаписи» шире узкой лаймовой карточки «Кому подходит» (~333–385px)
   → вылезала за правый край. Тянем кнопку на всю ширину карточки и разрешаем перенос текста
   (на узком десктопе — 2 строки). Открытый «Выбрать тариф» короткий, его не трогаем. */
.sales-closed .audience__cta {
  align-self: stretch;
  white-space: normal;
  text-align: center;
}

/* ===========================================================
   Поп-ап консультации. CSS портирован из старого /open (при переезде
   на новый дизайн не был перенесён — модалка не показывалась и лочила
   скролл body через .is-modal-open); цвета/токены адаптированы под open2.
=========================================================== */
.consult-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 40px;
  overflow-y: auto;
}
.consult-modal.is-open {
  display: flex;
}
.consult-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
.consult-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: consult-modal-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes consult-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.consult-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.consult-modal__close:hover {
  color: #000;
  background: rgba(0, 0, 0, 0.06);
}
.consult-modal__title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-strong);
  margin: 0;
  padding-right: 24px;
}
.consult-modal__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.consult-modal__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid #e4e4e4;
  border-radius: var(--radius-card);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-ink);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.consult-modal__option:hover {
  border-color: var(--text-strong);
  background: #fafafa;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}
.consult-modal__option:active {
  transform: translateY(0);
  box-shadow: none;
}
.consult-modal__arrow {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--lime-400);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.consult-modal__arrow svg {
  width: 15px;
  height: 15px;
}
.consult-modal__option:hover .consult-modal__arrow {
  background: var(--lime-300);
}
.consult-modal__hint {
  margin: 12px 0 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
}
.consult-modal__auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 22px;
  background: var(--lime-400);
  color: var(--text-strong);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px rgba(190, 235, 113, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.consult-modal__auth-btn:hover {
  transform: translateY(-2px);
  background: var(--lime-300);
  box-shadow: 0 20px 44px rgba(190, 235, 113, 0.38);
}
.consult-modal__auth-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.consult-modal__auth-status {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .consult-modal { padding: 60px 14px 30px; }
  .consult-modal__dialog { padding: 32px 22px 26px; border-radius: 20px; }
  .consult-modal__title { font-size: 21px; }
}