/* ============================================================
   Владимир Кунаев — психолог. Стили сайта.

   Собрано из design-system/tokens.css (v12) и блоков tilda-blocks.
   Три яруса токенов, три брейкпоинта: десктоп 1440, планшет ≤1024,
   мобильный ≤767 — ровно как в макетах Figma.
   ============================================================ */

/* Good Vibes Pro — акцентный рукописный, кириллическая версия
   (assets/fonts/GoodVibesPro.ttf). На Google Fonts его нет, поэтому
   самохостится. Great Vibes ниже в стеке — не альтернатива, а
   страховка на случай, если .ttf не подгрузится: у него другие
   метрики, строки в герое поедут. */
@font-face {
  font-family: 'Good Vibes Pro';
  src: url('assets/fonts/GoodVibesPro.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- ПРИМИТИВЫ · цвет ---------- */
  --blue-50:  #EAF1FF;
  --blue-100: #CEE2FF;
  --blue-500: #4B82FF;
  --blue-600: #2E5FD9;
  --blue-700: #1D4ED8;
  --purple-100: #F3EDFF;
  --purple-600: #795EF0;
  --white:     #FFFFFF;
  --bluewhite: #F5F8FF;
  --ink-200: #D7DBE3;
  --ink-500: #6B7280;
  --ink-700: #3A4256;
  --ink-900: #00081A;

  /* ---------- СЕМАНТИКА · цвет ---------- */
  --text-primary:       var(--ink-900);
  --text-secondary:     var(--ink-700);
  --text-muted:         var(--ink-500);
  --text-on-accent:     var(--white);
  --text-accent:        var(--blue-600);
  --text-accent-strong: var(--blue-700);

  --bg-page:        var(--bluewhite);
  --bg-surface:     var(--white);
  --bg-accent:      var(--blue-100);
  --bg-accent-soft: var(--blue-50);
  --bg-second:      var(--purple-600);
  --bg-second-soft: var(--purple-100);

  --border-subtle: var(--ink-200);
  --border-focus:  var(--blue-500);

  --action-default: var(--blue-500);
  --action-hover:   var(--blue-600);
  --action-active:  var(--blue-700);

  /* ---------- ПРИМИТИВЫ · форма ---------- */
  --radius-sm: 8px;  --radius-md: 16px; --radius-lg: 24px;
  --radius-xl: 32px; --radius-pill: 999px;

  --bw-hairline: 1px; --bw-default: 1.5px;
  --bw-emphasis: 2px; --bw-accent: 3px;

  --shadow-soft:   0 4px 12px rgba(22, 29, 33, .08);
  --shadow-card:   0 1px 2px rgba(22, 29, 33, .04), 0 12px 24px rgba(22, 29, 33, .10);
  --shadow-lifted: 0 24px 48px -4px rgba(22, 29, 33, .16);

  /* ---------- ПРИМИТИВЫ · шаг сетки ---------- */
  --s4: 4px;   --s8: 8px;   --s12: 12px; --s16: 16px;
  --s24: 24px; --s32: 32px; --s48: 48px; --s64: 64px;
  --s96: 96px; --s128: 128px;

  /* ---------- СЕМАНТИКА · отступы (десктоп) ---------- */
  --margin:        var(--s128);
  --section-py:    var(--s96);
  --section-gap:   var(--s64);
  --pad-container: var(--s48);
  --pad-component: var(--s32);
  --pad-element:   var(--s16);

  /* ---------- СЕМАНТИКА · типографика (десктоп) ---------- */
  --font: 'Arimo', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Good Vibes Pro', 'Great Vibes', cursive;

  --display-xl: 700 64px/72px var(--font);
  --display-lg: 700 48px/56px var(--font);
  --h1: 700 40px/48px var(--font);
  --h2: 700 32px/40px var(--font);
  --h3: 700 24px/32px var(--font);
  --h4: 700 20px/28px var(--font);
  --body-lg: 400 18px/26px var(--font);
  --body:    400 16px/24px var(--font);
  --body-sm: 400 14px/20px var(--font);
  --caption: 700 20px/24px var(--font);
  --button:  700 16px/24px var(--font);

  --script-hero:   400 84px/72px var(--font-script);
  --script-accent: 400 40px/48px var(--font-script);
  --script-note:   400 24px/20px var(--font-script);
  /* водяной знак — единственный токен на vw: в макете 396px при кадре
     1440 = 27.5vw. Ступени дали бы рывок ровно на границе, а знак
     фоновый — ему нужна плавность. */
  --script-watermark: 400 clamp(120px, 27.5vw, 396px)/0.9 var(--font-script);
}

/* ============ ПЛАНШЕТ ≤1024 ============
   Жмётся только верх шкалы. Body и Button не двигаются: 16px — пол
   для основного текста, он же держит тач-цель в кнопке. */
@media (max-width: 1024px) {
  :root {
    --margin:        var(--s48);
    --section-py:    var(--s64);
    --section-gap:   var(--s48);
    --pad-container: var(--s32);
    --pad-component: var(--s24);

    --display-xl: 700 48px/56px var(--font);
    --display-lg: 700 40px/48px var(--font);
    --h1: 700 32px/40px var(--font);
    --h2: 700 28px/36px var(--font);
    --caption: 700 18px/24px var(--font);

    /* 56px — потолок, при котором «комфортных условий» ещё влезает
       в одну строку на 672px контента (фраза ≈ 10.5–12 кеглей) */
    --script-hero:   400 56px/56px var(--font-script);
    --script-accent: 400 32px/40px var(--font-script);
  }
}

/* ============ МОБИЛЬНЫЙ ≤767 ============
   Потолок 32px: на 375px с полями по 16 остаётся 343px, и самая
   длинная строка героя укладывается в одну. Пол — 14px. */
@media (max-width: 767px) {
  :root {
    --margin:        var(--s16);
    --section-py:    var(--s48);
    --section-gap:   var(--s32);
    --pad-container: var(--s24);
    --pad-component: var(--s16);
    --pad-element:   var(--s12);

    --display-xl: 700 32px/40px var(--font);
    --display-lg: 700 28px/36px var(--font);
    --h1: 700 28px/36px var(--font);
    --h2: 700 24px/32px var(--font);
    --h3: 700 20px/28px var(--font);
    --h4: 700 18px/26px var(--font);
    --body-lg: 400 16px/24px var(--font);
    --caption: 700 14px/20px var(--font);

    /* 28px, а не крупнее: скрипт обязан влезать в одну строку */
    --script-hero:   400 28px/40px var(--font-script);
    --script-accent: 400 24px/32px var(--font-script);
  }
}

/* ============================================================
   БАЗА
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.section { padding: var(--section-py) var(--margin); position: relative; }
.section--page    { background: var(--bg-page); }
.section--surface { background: var(--bg-surface); }
.section--second  { background: var(--bg-second-soft); }

.eyebrow {
  font: var(--caption);
  color: var(--text-accent);
  text-transform: uppercase;
}

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

/* ---------- кнопка ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s8);
  padding: var(--pad-element) var(--pad-container);
  border: none; border-radius: var(--radius-md);
  font: var(--button);
  background: var(--action-default);
  color: var(--text-on-accent);
  text-decoration: none; cursor: pointer;
  transition: background .18s ease;
}
.btn:hover  { background: var(--action-hover); }
.btn:active { background: var(--action-active); }
.btn:focus-visible { outline: var(--bw-emphasis) solid var(--border-focus); outline-offset: 2px; }

/* ---------- рваный край ----------
   В макете края идут парами: низ одной секции и верх следующей, оба
   цвета той полосы, которая «наступает». Путь нарисован от -10 до
   1450 при viewBox 0..1440, поэтому нужен overflow: hidden. */
.torn {
  position: absolute; left: 0; right: 0;
  height: 40px; line-height: 0; pointer-events: none; z-index: 1;
  overflow: hidden;
}
.torn--bottom { bottom: -1px; }
.torn--top    { top: -1px; transform: scaleY(-1); }
/* fill ставится на <svg>, а не на path: форма подключается через <use>,
   и в теневое дерево цвет попадает только наследованием */
.torn svg {
  width: 100%; height: 100%; display: block;
  fill: var(--torn-color, var(--bg-page));
}
@media (max-width: 767px) { .torn { height: 24px; } }

/* ============================================================
   ШАПКА
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-surface);
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s24);
  padding: var(--pad-element) var(--margin);
}
.header__brand { display: flex; align-items: center; gap: var(--s16); text-decoration: none; }
.header__avatar {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--radius-pill);
  object-fit: cover; object-position: 50% 22%;
  background: var(--bg-accent);
}
.header__ident { display: flex; flex-direction: column; gap: var(--s4); }
.header__name { font: var(--h4); color: var(--text-primary); }
.header__role { font: var(--caption); color: var(--text-muted); }

.header__nav { display: flex; gap: var(--s24); }
.header__nav a {
  font: var(--body); color: var(--text-secondary);
  text-decoration: none; white-space: nowrap;
  transition: color .18s ease;
}
.header__nav a:hover { color: var(--action-default); }

.header__burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 4px 0; flex: none;
  background: none; border: none;
}
.header__burger span {
  width: 24px; height: 2px; border-radius: 2px;
  background: var(--text-primary);
  transition: transform .2s ease, opacity .2s ease;
}
.header__drawer { display: none; }

@media (max-width: 1024px) {
  .header__nav { display: none; }
  .header__burger { display: flex; }

  .header__drawer {
    display: flex; flex-direction: column; gap: var(--s16);
    padding: 0 var(--margin);
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease, padding .28s ease;
    border-top: 0 solid var(--border-subtle);
  }
  /* :not(.btn) обязателен: кнопка в шторке — тоже ссылка, и правило для
     пунктов меню перекрашивало её надпись в серый, потому что оно
     специфичнее .btn. */
  .header__drawer a:not(.btn) { font: var(--body); color: var(--text-secondary); text-decoration: none; }
  .header__drawer a:not(.btn):hover { color: var(--action-default); }
  .header__drawer .btn { align-self: flex-start; }

  .header.is-open .header__drawer {
    max-height: 380px;
    padding: var(--s24) var(--margin);
    border-top-width: var(--bw-hairline);
  }
  .header.is-open .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.is-open .header__burger span:nth-child(2) { opacity: 0; }
  .header.is-open .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 767px) {
  .header__cta { display: none; }
  .header__role { font: var(--body-sm); letter-spacing: .04em; }
  .header__avatar { width: 40px; height: 40px; }
}

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero { overflow: hidden; }
.hero__inner { display: flex; align-items: center; gap: var(--s64); }
.hero__text {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s24);
}
.hero.is-align-center .hero__text { align-items: center;   text-align: center; }
.hero.is-align-right  .hero__text { align-items: flex-end; text-align: right; }
.hero__title { font: var(--display-xl); color: var(--text-primary); }
.hero__script {
  font: var(--script-hero);
  color: var(--text-accent-strong);
  display: inline-block;
}
.hero__text .btn { margin-top: var(--s8); }
/* Смещение за курсором живёт на обёртке, а не на самой карточке: у той
   на transform уже висят наклон и анимация появления, и они бы дрались.
   Переход короткий — иначе карточка тянулась бы за мышью с задержкой. */
.hero__media {
  flex: 0 0 auto;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* фото-карточка: всё внутри — проценты от её ширины, поэтому
   перфорация, снимок и подпись держат пропорции на любом экране */
/* Размер карточки — из макета: padding 16, перфорация 22, gap 24 и снимок
   365×488, то есть ровно 443×520. Ни фона, ни скругления у самой .card нет:
   и то и другое несёт контур .photo-card__bg, у которого вырезаны дырки. */
.photo-card {
  position: relative;
  width: 443px; aspect-ratio: 443 / 520;
  /* наклон вынесен в переменную: его переопределяет мобильный брейкпоинт,
     и он же нужен анимации появления, чтобы она не сбрасывала угол */
  --tilt: 3deg;
  transform: rotate(var(--tilt));
}
.photo-card__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--bg-second-soft);
}
/* Никакой подложки под снимком: portrait-hero.png несёт собственную
   скруглённую маску с мягкой тенью и прозрачным полем по краю. Заливка
   под ним просвечивала сквозь это поле голубой плашкой — в макете её нет. */
.photo-card__img {
  position: absolute; left: 14%; top: 3.1%;
  width: 82.4%; height: 93.8%;
  object-fit: cover;
}
/* Плашка 207×76 с полем 16 по кругу, повёрнутая на 3° относительно снимка —
   в макете она лежит на фотографии наискось, а не параллельно ей.
   Поле в процентах считается от ширины КАРТОЧКИ (содержащего блока), а не
   самой плашки: 3.612% от 443px дают ровно 16px со всех сторон, и высота
   складывается в те же 76px (20 + 24 + 2×16). */
.photo-card__plate {
  position: absolute; left: 50.2%; bottom: 4.5%; width: 46.7%;
  padding: 3.612%;
  transform: rotate(3deg);
  display: flex; flex-direction: column;
  color: var(--text-on-accent);
}
.photo-card__plate-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--action-default);
}
.photo-card__signature { position: relative; font: var(--script-note); white-space: nowrap; }
.photo-card__caption   { position: relative; font: var(--body); }

@media (max-width: 1024px) {
  .hero__inner { flex-direction: column; align-items: center; gap: var(--s48); }
  .hero__text { align-items: flex-start; width: 100%; }
  /* .hero__media нужна СВОЯ явная ширина: align-items:center не растягивает
     флекс-элемент, а всё содержимое .photo-card абсолютно спозиционировано,
     поэтому её «природная» ширина — 0. Без этой строки width:100% у
     .photo-card резолвится как 100% от неопределённого — и карточка
     схлопывается в 0×0 (реальный баг, ловился на мобильном). */
  .hero__media { width: 100%; }
  .photo-card { width: min(443px, 100%); }
}
@media (max-width: 767px) {
  .hero__inner { gap: var(--s32); }
  .photo-card { width: 100%; --tilt: 2deg; }
  /* Плашка сжимается вместе с карточкой, а кегль подписи — нет, и строка
     вылезала за её край: на узком экране рукописная строка мельче. */
  .photo-card__signature { font-size: 18px; line-height: 16px; }
  .photo-card__caption { font: var(--body-sm); }
}

/* ============================================================
   НАПРАВЛЕНИЯ
   ============================================================ */
.dir {
  display: flex; flex-direction: column;
  gap: var(--s32);
}
.dir.is-align-left   { align-items: flex-start; text-align: left; }
.dir.is-align-center { align-items: center;     text-align: center; }
.dir.is-align-right  { align-items: flex-end;   text-align: right; }
.dir__title { font: var(--h2); color: var(--text-primary); max-width: 920px; }
.dir__accent { color: var(--text-accent); }
.dir__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s24); width: 100%; text-align: left;
}
/* Форма карточки — в .card__bg, а не в border-radius: верхний край рваный.
   Поэтому фона и рамки у самой .card нет, а сверху добавлено 8px, чтобы
   заголовок не подходил вплотную к впадинам кривой. */
.card {
  position: relative;
  padding: calc(var(--pad-container) + 8px) var(--pad-container) var(--pad-container);
  display: flex; flex-direction: column; gap: var(--s12);
}
.card__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--bg-surface);
  transition: filter .18s ease;
}
.card:hover .card__bg {
  filter: drop-shadow(0 1px 2px rgba(22, 29, 33, .04))
          drop-shadow(0 12px 24px rgba(22, 29, 33, .10));
}
.card__title, .card__list { position: relative; }
.card__title { font: var(--h4); color: var(--text-primary); }
.card__list { display: flex; flex-direction: column; gap: var(--s4); }
.card__list li {
  font: var(--body-sm); color: var(--text-secondary);
  padding-left: 18px; position: relative;
}
.card__list li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-accent);
}
@media (max-width: 1024px) { .dir__cards { grid-template-columns: 1fr; } }

/* ============================================================
   ОБО МНЕ
   ============================================================ */
.about { overflow: hidden; }
.about__stage {
  position: relative; display: flex; justify-content: center;
  margin: var(--s48) 0 var(--s64);
}
.about__photo {
  position: relative; z-index: 1;
  width: 380px; height: 475px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-accent);
}
.about__watermark {
  position: absolute; left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  font: var(--script-watermark);
  color: var(--bg-second-soft);
  white-space: nowrap; user-select: none; pointer-events: none;
  z-index: 0;
}
.about__statement {
  display: grid; grid-template-columns: 466px 1fr;
  gap: var(--s128); align-items: start;
}
.about__lead { font: var(--h2); color: var(--text-primary); }
.about.is-align-center .about__statement { text-align: center; }
.about.is-align-right  .about__statement { text-align: right; }
.about__accent { color: var(--text-accent); }
.about__col { display: flex; flex-direction: column; gap: var(--s16); }
.about__body { font: var(--body-lg); color: var(--text-primary); }
.about__tags { font: var(--h3); color: var(--text-accent); }

@media (max-width: 1024px) {
  .about__statement { grid-template-columns: 1fr; gap: var(--s32); }
  .about__stage { margin: var(--s32) 0 var(--s48); }
}
@media (max-width: 767px) {
  .about__photo { width: 100%; height: auto; aspect-ratio: 380 / 475; }
  .about__statement { gap: var(--s24); }
}

/* ============================================================
   ПРОСТЫЕ БЛОКИ
   Их владелец сайта добавляет сам через админку. Поэтому ширина текста,
   кегли и отступы заданы здесь, а не приходят из контента: что бы в блок
   ни написали, он остаётся в общей сетке и типографике страницы.
   ============================================================ */
/* Оформление задаётся ступенями, а не произвольными значениями: цвет —
   из палитры, читаемой на всех трёх фонах, шрифта два, размера три,
   отступа три. Значения по умолчанию совпадают с прежним видом блоков. */
.simple {
  position: relative;
  --blk-color: var(--text-secondary);
  --blk-font: var(--font);
  --blk-base: 18px;      /* кегль текста */
  --blk-scale: 1;        /* поправка на шрифт */
  --blk-lh: 1.45;
  --blk-gap: var(--s16); /* между строками внутри блока */
  --blk-gap-lg: var(--s64); /* между картинкой и текстом */
}
.simple.is-color-primary   { --blk-color: var(--text-primary); }
.simple.is-color-accent    { --blk-color: var(--text-accent); }
.simple.is-color-muted     { --blk-color: var(--text-muted); }
/* Рукописная гарнитура мельче на глаз при том же кегле, поэтому она идёт
   с поправкой, а не «просто другим шрифтом» — иначе выбор шрифта менял бы
   ещё и видимый размер. */
.simple.is-font-script { --blk-font: var(--font-script); --blk-scale: 1.55; --blk-lh: 1.1; }
.simple.is-size-s { --blk-base: 16px; }
.simple.is-size-l { --blk-base: 24px; }
.simple.is-gap-s { --blk-gap: var(--s8);  --blk-gap-lg: var(--s32); }
.simple.is-gap-l { --blk-gap: var(--s32); --blk-gap-lg: var(--s128); }

.simple__inner {
  display: flex; flex-direction: column; gap: var(--blk-gap);
  align-items: flex-start;
  /* мера строки: длинный текст не растягивается на всю ширину экрана */
  max-width: 720px;
}
.simple__title { font: var(--h2); color: var(--text-primary); }
.simple.is-color-primary .simple__title,
.simple.is-color-accent  .simple__title,
.simple.is-color-muted   .simple__title { color: var(--blk-color); }
.simple__body {
  font-family: var(--blk-font);
  font-size: calc(var(--blk-base) * var(--blk-scale));
  line-height: var(--blk-lh);
  color: var(--blk-color);
}
.simple .btn { margin-top: var(--s8); }

/* Выравнивание. Класс на секции ведёт сразу три вещи: сторону текста, сторону
   колонки в общей ширине и сторону картинки. Иначе центрированный заголовок
   остался бы висеть над колонкой, прижатой влево. */
.simple.is-align-left   .simple__inner { align-items: flex-start; text-align: left; }
.simple.is-align-center .simple__inner { align-items: center;   text-align: center; margin: 0 auto; }
.simple.is-align-right  .simple__inner { align-items: flex-end; text-align: right;  margin-left: auto; }

/* картинка */
.simple--image { display: flex; }
.simple--image.is-align-left   { justify-content: flex-start; }
.simple--image.is-align-center { justify-content: center; }
.simple--image.is-align-right  { justify-content: flex-end; }
.simple__figure {
  margin: 0; display: flex; flex-direction: column; gap: var(--s12);
  max-width: 960px; width: 100%;
}
.simple__figure img {
  width: 100%; height: auto;
  border-radius: var(--radius-md);
}
.simple__caption { font: var(--body-sm); color: var(--text-muted); }
.simple--image.is-align-left   .simple__caption { text-align: left; }
.simple--image.is-align-center .simple__caption { text-align: center; }
.simple--image.is-align-right  .simple__caption { text-align: right; }

/* картинка с текстом */
.simple--media {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--blk-gap-lg); align-items: center;
}
.simple--media .simple__inner { max-width: none; }
/* Потолок в 560px — чтобы небольшой снимок не растягивался на всю колонку
   и не разваливался в кашу. Загруженная крупная картинка колонку заполнит. */
.simple__media img {
  width: 100%; max-width: 560px; height: auto;
  border-radius: var(--radius-md);
}
/* картинка справа — меняем колонки местами, а не порядок в разметке:
   в разметке она остаётся первой, и на узком экране встаёт сверху */
.simple--media-right .simple__media { order: 2; }

/* цитата */
.simple--quote { display: flex; }
.simple--quote.is-align-left   { justify-content: flex-start; }
.simple--quote.is-align-center { justify-content: center; }
.simple--quote.is-align-right  { justify-content: flex-end; }
.quote { --blk-color: var(--text-primary); }
.quote {
  margin: 0; max-width: 820px;
  display: flex; flex-direction: column; gap: var(--blk-gap);
}
.simple--quote.is-align-left   .quote { text-align: left;   align-items: flex-start; }
.simple--quote.is-align-center .quote { text-align: center; align-items: center; }
.simple--quote.is-align-right  .quote { text-align: right;  align-items: flex-end; }
/* Цитата крупнее обычного текста в 1.6 раза — она держит ту же шкалу,
   что и остальные блоки, просто со своим множителем. */
.quote__text {
  font-family: var(--blk-font); font-weight: 700;
  font-size: calc(var(--blk-base) * var(--blk-scale) * 1.6);
  line-height: var(--blk-lh);
  color: var(--blk-color);
}
.simple--quote.is-font-script .quote__text { font-weight: 400; }
.quote__text::before { content: '«'; }
.quote__text::after  { content: '»'; }
.quote__author { font: var(--body); color: var(--text-muted); }

/* отступ — пустая полоса заданной высоты, нужна ради смены фона и края */
.spacer { position: relative; }
.spacer--s { height: var(--s32); }
.spacer--m { height: var(--s64); }
.spacer--l { height: var(--s128); }

@media (max-width: 1024px) {
  .simple--media { grid-template-columns: 1fr; gap: var(--s32); }
  .simple.is-gap-l { --blk-gap-lg: var(--s48); }
  .simple--media-right .simple__media { order: 0; }
}
@media (max-width: 767px) {
  .simple__inner { gap: var(--s12); }
  .spacer--l { height: var(--s64); }
}

/* ============================================================
   БЕГУЩАЯ СТРОКА
   ============================================================ */
.marquee {
  position: relative;
  background: var(--bg-second-soft);
  /* сверху запас на рваный край (40px), иначе строка идёт вплотную к нему */
  padding: calc(var(--s32) + 24px) 0 var(--s32);
  overflow: hidden;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee-run 38s linear infinite;
}
/* Сдвиг ровно на половину дорожки — то есть на ширину одного набора.
   В этот момент второй набор стоит там, где начинал первый, и кадр
   совпадает с исходным: цикл замыкается без рывка. */
@keyframes marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__set {
  display: flex; align-items: center;
  gap: var(--s48); padding: 0 var(--s24);
  font: var(--h3); color: var(--text-accent-strong);
  white-space: nowrap;
}
/* точка-разделитель рисуется псевдоэлементом, а не отдельным узлом:
   так в разметке остаются только сами слова */
.marquee__set li { position: relative; }
.marquee__set li::after {
  content: ''; position: absolute; right: calc(var(--s24) * -1 - 3px); top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--text-accent);
  opacity: .45;
}

@media (max-width: 767px) {
  .marquee { padding: var(--s24) 0; }
  .marquee__set { gap: var(--s32); }
  .marquee__set li::after { right: calc(var(--s32) / -2 - 3px); }
}

/* ============================================================
   ПОДХОД
   ============================================================ */
.appr { overflow: hidden; }
.appr__head {
  display: flex; flex-direction: column; gap: var(--s12);
  max-width: 460px;
}
.appr.is-align-left   .appr__head { align-items: flex-start; text-align: left; }
.appr.is-align-center .appr__head { align-items: center;     text-align: center; margin: 0 auto; }
.appr.is-align-right  .appr__head { align-items: flex-end;   text-align: right;  margin-left: auto; }
.appr__title { font: var(--display-lg); color: var(--text-primary); }
.appr__sub { font: var(--body-sm); color: var(--text-secondary); max-width: 400px; }

.note { position: relative; }
.note__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.note--a .note__bg { fill: var(--bg-page); }
.note--b .note__bg { fill: var(--bg-second-soft); }
.note--c .note__bg { fill: var(--bg-accent); }
.note__body {
  position: relative; padding: 30px;
  display: flex; flex-direction: column; gap: var(--s8);
}
.note__title { font: var(--h4); color: var(--text-primary); }
.note__text  { font: var(--body-sm); color: var(--text-secondary); }

/* по умолчанию (планшет и уже) — колонка */
.appr__map { display: flex; flex-direction: column; gap: var(--s32); margin-top: var(--s48); }
.appr__links { display: none; }

/* десктоп ≥1200 — майндмап как в макете.
   Ниже 1200 связи скрыты: это нарисованные от руки кривые,
   привязанные к позициям карточек, они не перетекают. */
@media (min-width: 1200px) {
  .appr { padding-left: 0; padding-right: 0; }
  .appr__map { display: block; position: relative; height: 350px; margin-top: 0; }
  .appr__links { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .appr__links path {
    fill: none; stroke: var(--action-default); stroke-width: 2;
    stroke-dasharray: 5 5; vector-effect: non-scaling-stroke;
  }
  .note { position: absolute; width: 25.7%; }
  .note--a { left: 9.4%;  top: 73px; }
  .note--b { left: 37.1%; top: 155px; }
  .note--c { left: 65.4%; top: 101px; }
}

/* ============================================================
   ОБРАЗОВАНИЕ
   ============================================================ */
.edu {
  background: var(--bg-page);
  display: flex; align-items: center; gap: var(--s48);
  /* слева поля нет: папка намеренно свисает за край, как в макете */
  padding: var(--section-py) var(--margin) var(--section-py) 0;
  position: relative;
}
.edu__art { flex: 0 1 690px; min-width: 0; }

/* ---------- папка с документами ----------
   Собрана вёрсткой, а не картинкой: скан внутри меняется, а бумажка
   с подписью должна масштабироваться вместе с папкой.
   Все координаты — проценты от системы координат макета 690×654.
   Размеры, зависящие от масштаба папки (радиусы, кегль подписи),
   заданы в cqw — процентах ширины самой папки. */
.edu__folder {
  position: relative;
  width: 100%;
  aspect-ratio: 690 / 654;
  container-type: inline-size;
}
.edu__folder > * { position: absolute; }

.edu__spine {
  left: -2.32%; top: 3.82%; width: 21.74%; height: 94.19%;
  background: var(--bg-second);
  border-radius: 2.899cqw;
}
.edu__body {
  left: 21.74%; top: 3.82%; width: 78.26%; height: 96.18%;
  fill: var(--bg-second-soft);
  filter: drop-shadow(0 1px 2px rgba(22, 29, 33, .04))
          drop-shadow(0 12px 24px rgba(22, 29, 33, .10));
}
.edu__ring {
  left: 16.09%; top: var(--y); width: 8.99%; height: 2.45%;
  background: var(--border-subtle);
  border-radius: 1.159cqw;
}

/* второй лист, выглядывающий из-под основного — как в макете */
.edu__sheet {
  left: 33.33%; top: 9.94%; width: 56.96%; height: 85.02%;
  background: var(--bg-surface);
  box-shadow: 0 1px 2px rgba(22, 29, 33, .06);
}

.edu__doc {
  left: 28.99%; top: 8.41%; width: 56.96%; height: 85.02%;
  display: block; overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
}
.edu__doc-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  transition: opacity .14s ease;
}
.edu__doc-img.is-swapping { opacity: 0; }

/* бумажка под зажимом + подпись, которая меняется вместе с документом */
.edu__note {
  left: 24.35%; top: 4.74%; width: 30.29%; min-height: 17.89%;
  background: var(--bg-surface);
  border-radius: 0.29cqw;
  box-shadow: 0 6px 16px rgba(22, 29, 33, .10);
  /* Сверху — отступ ровно на ту часть бумажки, которую перекрывает зажим,
     чтобы подпись стояла под ним, а не заезжала под него. */
  padding: 4.35cqw 1.5cqw 1.5cqw;
  display: flex; align-items: center; justify-content: center;
}
.edu__label {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 0.3cqw;
  text-align: center;
}
/* Интерлиньяж плотный: у рукописной гарнитуры длинные выносные элементы,
   и при обычном межстрочном три строки не помещаются на бумажку. */
.edu__label-script {
  font: 400 3.478cqw/1.05 var(--font-script);
  color: var(--text-primary);
}
/* Длинное название не влезает крупным кеглем — набирается мельче. */
.edu__label.is-long .edu__label-script { font-size: 2.9cqw; line-height: 0.95; }
/* Совсем длинному вдобавок сужается мера строки: поля по бокам задают
   те же места переноса, что в макете, — «Диплом о / профессиональной /
   переподготовке», «Повышение / квалификации». */
.edu__label.is-wrapped { padding: 0 2.8cqw; }
.edu__label-sub {
  font: 400 2.319cqw/1.3 var(--font);
  color: var(--text-muted);
}
/* у части документов подзаголовка нет — пустой узел не должен занимать место */
.edu__label-sub:empty { display: none; }

.edu__clip-wire {
  left: 35.94%; top: 0; width: 6.67%; height: 4.59%;
  border: 0.507cqw solid #969CA8;
  border-radius: 2.029cqw;
}
.edu__clip {
  left: 32.46%; top: 2.60%; width: 13.62%; height: 6.73%;
  background: var(--text-secondary);
  border-radius: 0.87cqw;
  box-shadow: 0 3px 8px rgba(22, 29, 33, .16);
}

.edu__text {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--s16); align-items: flex-start;
}
.edu.is-align-center .edu__text { align-items: center;   text-align: center; }
.edu.is-align-right  .edu__text { align-items: flex-end; text-align: right; }
.edu__title { font: var(--display-lg); color: var(--text-primary); }
.edu__body  { font: var(--body); color: var(--text-secondary); }

.edu__nav { display: flex; gap: var(--s16); margin-top: var(--s32); }
.edu__arrow {
  width: 68px; height: 68px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-md);
  background: var(--action-default); color: var(--text-on-accent);
  cursor: pointer; transition: background .18s ease;
}
.edu__arrow:hover  { background: var(--action-hover); }
.edu__arrow:active { background: var(--action-active); }
.edu__arrow:focus-visible { outline: var(--bw-emphasis) solid var(--border-focus); outline-offset: 2px; }
.edu__arrow svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 1024px) {
  .edu { flex-direction: column; align-items: stretch; gap: var(--s32); }
  .edu__art { flex: none; max-width: 100%; }
  .edu__text { padding-left: var(--margin); }
}
@media (max-width: 767px) {
  .edu__nav { margin-top: var(--s16); }
  .edu__arrow { width: 56px; height: 56px; }

  /* На мобильном папка сжимается до ширины экрана, и пропорциональная
     подпись стала бы 13px — нечитаемо. Поэтому бумажка увеличивается,
     а кегль фиксируется, как и сделано в мобильном кадре Figma. */
  .edu__note {
    left: 26.1%; top: 3.38%; width: 48%; min-height: 18.87%;
    padding: 5.64cqw 2cqw 2cqw;
  }
  .edu__label.is-wrapped { padding: 0 4cqw; }
  .edu__label-script { font: var(--script-note); line-height: 1.05; }
  .edu__label.is-long .edu__label-script { font-size: 20px; line-height: 0.95; }
  .edu__label-sub    { font: var(--body-sm); }
}

/* ============================================================
   КОНТАКТЫ
   ============================================================ */
.contacts { display: flex; flex-direction: column; align-items: center; gap: var(--s48); }
.contacts__head {
  display: flex; flex-direction: column; gap: var(--s24);
}
.contacts.is-align-left   .contacts__head { align-items: flex-start; text-align: left; }
.contacts.is-align-center .contacts__head { align-items: center;     text-align: center; }
.contacts.is-align-right  .contacts__head { align-items: flex-end;   text-align: right; }
.contacts__title { font: var(--display-lg); color: var(--text-primary); }
.contacts__sub { font: var(--body); color: var(--text-secondary); max-width: 660px; }
.contacts__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s24); width: 100%;
}
.contact {
  display: flex; align-items: flex-start; gap: var(--s24);
  padding: var(--pad-component);
  border-radius: var(--radius-lg);
  background: var(--bg-accent-soft);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.contact:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.contact:focus-visible { outline: var(--bw-emphasis) solid var(--border-focus); outline-offset: 2px; }
.contact__icon {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--bg-accent); color: var(--text-accent);
}
.contact__icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.contact__body { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.contact__label { font: var(--body-sm); color: var(--text-muted); }
.contact__value { font: var(--h4); color: var(--text-primary); }

@media (max-width: 1024px) { .contacts__cards { grid-template-columns: 1fr; } }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.footer {
  background: var(--bg-page);
  padding: var(--pad-container) var(--margin);
  display: flex; flex-direction: column; gap: var(--s24);
}
.footer__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s32);
}
.footer__ident { display: flex; flex-direction: column; gap: var(--s4); }
.footer__name { font: var(--h4); color: var(--text-primary); }
.footer__role { font: var(--body-sm); color: var(--text-muted); }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s32); }
.footer__nav a {
  font: var(--body); color: var(--text-secondary);
  text-decoration: none; transition: color .18s ease;
}
.footer__nav a:hover { color: var(--action-default); }
.footer__rule {
  border: none; height: var(--bw-hairline);
  background: var(--border-subtle); margin: 0;
}
.footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s32);
  font: var(--body-sm); color: var(--text-muted);
}
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--action-default); }

@media (max-width: 767px) {
  .footer__top { flex-direction: column; align-items: flex-start; gap: var(--s24); }
  .footer__nav { gap: var(--s16); row-gap: var(--s8); }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: var(--s8); }
}

/* ============================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
   Блоки чуть всплывают при прокрутке. Класс .reveal вешает скрипт, а не
   разметка: если он не отработал, содержимое просто видно сразу, а не
   остаётся навсегда прозрачным.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Карточка с фото доезжает до своего наклона — маленький штрих,
   из-за которого герой выглядит собранным вручную. */
.photo-card.reveal { transform: translateY(18px) rotate(0deg); }
.photo-card.reveal.is-in { transform: rotate(var(--tilt)); }

/* ---------- уважение к системной настройке «меньше движения» ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* появление отключается целиком: без перехода оно бы просто мигало */
  .reveal, .photo-card.reveal { opacity: 1; transform: rotate(var(--tilt)); }
  .reveal:not(.photo-card) { transform: none; }
  /* лента останавливается: без этого правило выше просто домотало бы её
     до конца цикла за 0.01мс и бросило там */
  .marquee__track { animation: none; }
  .hero__media { transform: none; }
}