/* ============================================================
   Феликс Бортник — НЛП-терапия
   Общие стили для русской и ивритской версии
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  /* Палитра: тёплый шалфей + крем + приглушённое золото */
  --bg:          #FAF8F4;
  --bg-deep:     #F1EDE4;
  --surface:     #FFFFFF;
  --forest:      #33402F;
  --forest-soft: #4B5A44;
  --sage:        #7E9068;
  --sage-pale:   #B9C4A8;
  --sage-wash:   #E7EBDF;
  --gold:        #A8834E;   /* декоративный: заливки, иконки, обводки */
  --gold-text:   #81643C;   /* для мелкого текста — проходит WCAG AA на всех фонах */
  --gold-pale:   #E4D7C0;
  --ink:         #2B2E29;
  --muted:       #666A62;   /* затемнён до AA: 4.56 на самом тёмном фоне секций */
  --line:        rgba(51, 64, 47, 0.14);
  --line-soft:   rgba(51, 64, 47, 0.07);

  /* Тени — мягкие, без «пластика» */
  --shadow-sm: 0 1px 2px rgba(51, 64, 47, .05), 0 2px 8px rgba(51, 64, 47, .04);
  --shadow-md: 0 2px 6px rgba(51, 64, 47, .06), 0 12px 32px rgba(51, 64, 47, .07);
  --shadow-lg: 0 4px 12px rgba(51, 64, 47, .07), 0 24px 60px rgba(51, 64, 47, .10);

  /* Шрифты. Rubik покрывает латиницу, кириллицу и иврит —
     поэтому он общий для текста в обеих версиях.
     Заголовки разные: у каждого языка своя антиква. */
  --font-body:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .6s;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ═══════════════════════════════════════════════════════════════
   ЗАПАСНЫЕ ПАЛИТРЫ
   Хотите другой цвет — включите ОДИН из блоков ниже: удалите
   строку-открывашку и строку-закрывашку вокруг него, и он
   перекроет палитру выше. Больше нигде ничего менять не нужно.
   ═══════════════════════════════════════════════════════════════ */

/* ВАРИАНТ 2 — тёплый песок и терракота (как в референсах 02, 07).
   Мягче и «теплее» зелёного, хорошо смотрится с портретом.

:root {
  --bg:          #FBF7F2;
  --bg-deep:     #F4EBE1;
  --forest:      #3B322B;
  --forest-soft: #574A40;
  --sage:        #A9714B;
  --sage-pale:   #E0C3AC;
  --sage-wash:   #F2E4D8;
  --gold:        #B07C4F;
  --gold-pale:   #EDD9C4;
  --ink:         #302823;
  --muted:       #7A6C61;
  --line:        rgba(59, 50, 43, 0.14);
  --line-soft:   rgba(59, 50, 43, 0.07);
}
*/

/* ВАРИАНТ 3 — приглушённый сине-серый.
   Спокойнее и «клиничнее», меньше «уюта», больше сдержанности.

:root {
  --bg:          #F8F9FA;
  --bg-deep:     #EDF0F2;
  --forest:      #2C3A44;
  --forest-soft: #445560;
  --sage:        #6C8A9C;
  --sage-pale:   #B3C6D2;
  --sage-wash:   #E3EAEF;
  --gold:        #98785A;
  --gold-pale:   #E2D5C6;
  --ink:         #262E34;
  --muted:       #667079;
  --line:        rgba(44, 58, 68, 0.14);
  --line-soft:   rgba(44, 58, 68, 0.07);
}
*/

/* Ивритская версия: своя антиква для заголовков */
[lang="he"] {
  --font-display: 'Frank Ruhl Libre', 'Cormorant Garamond', Georgia, serif;
}

/* ---------- 2. Регулятор размера шрифта ---------- */
/* Управляется кнопками А / А+ / А++ в шапке, сохраняется в браузере */
html                  { font-size: 100%; }
html[data-fs="large"]  { font-size: 112.5%; }
html[data-fs="xlarge"] { font-size: 125%; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--forest);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--sage-pale); color: var(--forest); }

:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 4. Раскладка ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.section {
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
}

.section--tint  { background: var(--bg-deep); }
.section--sage  { background: var(--sage-wash); }

.eyebrow {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 1.1rem;
}

.lede {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  color: var(--forest-soft);
  font-weight: 300;
  max-width: 60ch;
  line-height: 1.65;
}

.section__head { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- 5. Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.02em 2.1em;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}

.btn--primary {
  background: var(--forest);
  color: #F7F5F0;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--forest-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--forest);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--sage);
  background: rgba(126, 144, 104, .08);
  transform: translateY(-2px);
}

.btn--gold {
  background: var(--gold);
  color: #FFF;
}
.btn--gold:hover { background: #927244; transform: translateY(-2px); }

.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

/* ---------- 6. Шапка ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.hdr[data-stuck="true"] {
  border-bottom-color: var(--line-soft);
  background: rgba(250, 248, 244, .94);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 72px;
  padding-block: .75rem;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand span {
  display: block;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .1em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.9rem);
  margin-inline-start: auto;
}

.nav__link {
  font-size: .92rem;
  font-weight: 300;
  color: var(--forest-soft);
  text-decoration: none;
  position: relative;
  padding-block: .35em;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform .35s var(--ease);
}
[dir="rtl"] .nav__link::after { transform-origin: right; }
.nav__link:hover { color: var(--forest); }
.nav__link:hover::after { transform: scaleX(1); }

.hdr__tools {
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* Переключатель размера шрифта */
.fs {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface);
}
.fs__btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  cursor: pointer;
  padding: .42em .72em;
  line-height: 1;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.fs__btn:nth-child(1) { font-size: .78rem; }
.fs__btn:nth-child(2) { font-size: .92rem; }
.fs__btn:nth-child(3) { font-size: 1.05rem; }
.fs__btn:hover { background: var(--sage-wash); color: var(--forest); }
.fs__btn[aria-pressed="true"] { background: var(--forest); color: #F7F5F0; }

/* Переключатель языка */
.lang {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .5em 1em;
  font-size: .85rem;
  text-decoration: none;
  color: var(--forest);
  background: var(--surface);
  white-space: nowrap;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.lang:hover { border-color: var(--sage); background: var(--sage-wash); }

.burger {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 100px;
  width: 42px; height: 42px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--forest);
  position: relative;
  transition: background-color .2s;
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0;
  width: 17px; height: 1.5px; background: var(--forest);
  transition: transform .3s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* Промежуточная ширина: меню ещё помещается, но впритык —
   поджимаем интервалы и кегль, чтобы ничего не вылезало за край. */
@media (min-width: 1060px) and (max-width: 1239px) {
  .nav { gap: 1.05rem; }
  .nav__link { font-size: .87rem; }
  .hdr__in { gap: 1.2rem; }
}

/* ── Когда меню уезжает в бургер ──
   Раньше порогом была ширина экрана (max-width: 1059px). Она не учитывала
   кнопки «А / А / А»: посетитель увеличивал шрифт, меню росло вместе с ним,
   а порог оставался прежним — и переключатель языка уезжал за край экрана
   (при «А++» на 104px, с горизонтальной прокруткой в 118px).
   Теперь решает замер в main.js: fitHeader() ставит data-nav="compact",
   когда правый блок шапки перестаёт помещаться в колонку. Ширину экрана
   тот же замер учитывает сам, так что поведение на телефоне не изменилось. */
/* Пока main.js замеряет шапку, переходы выключены: иначе меню успевает
   проиграть анимацию появления и мигает поверх первого экрана. */
html[data-measuring] .nav,
html[data-measuring] .burger,
html[data-measuring] .hdr__tools { transition: none !important; }

html[data-nav="compact"] .burger { display: flex; }
html[data-nav="compact"] .nav {
  position: fixed;
  inset: 72px 0 auto 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: 1rem var(--gutter) 2rem;
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
html[data-nav="compact"] .nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
html[data-nav="compact"] .nav__link { font-size: 1.05rem; padding-block: .85em; border-bottom: 1px solid var(--line-soft); }
html[data-nav="compact"] .nav__link::after { display: none; }
html[data-nav="compact"] .hdr__tools { margin-inline-start: auto; }

/* Без JS бургер нечем открыть, а кнопки размера шрифта ничего не делают.
   Поэтому там меню просто переносится на вторую строку, а не прячется. */
@media (scripting: none) {
  .hdr__in { flex-wrap: wrap; }
  .nav { flex-wrap: wrap; row-gap: .35rem; }
  .fs, .burger { display: none; }
}

@media (max-width: 560px) {
  .fs { display: none; } /* на узких экранах системный зум уместнее */
}

/* ---------- 7. Первый экран ---------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 10vw, 7.5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

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

/* Кегль подобран под ширину колонки рядом с портретом: при 6.2vw/4.6rem
   строке «опору внутри себя» не хватало 1–6px, и слово «опору» повисало
   отдельной строкой. Замеры: колонка 467px при 1024px, 542px при 1440px. */
.hero__title {
  margin-bottom: .45em;
  font-size: clamp(2.6rem, 5.8vw, 4.3rem);
}

/* Иврит: фраза длиннее русской (36 знаков против 33), а Frank Ruhl Libre
   шире Cormorant — при общем кегле «עצמך» уезжало на третью строку одно.
   Правило только для десктопа: мобильные размеры заданы ниже в @media
   (max-width: 767px) и работают правильно. */
@media (min-width: 768px) {
  [lang="he"] .hero__title { font-size: clamp(2.3rem, 5vw, 3.7rem); }
}
.hero__title em {
  font-style: italic;
  color: var(--sage);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 2rem 0 2.4rem;
  padding: 0;
  list-style: none;
}
.hero__meta li {
  font-size: .82rem;
  font-weight: 300;
  color: var(--forest-soft);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  padding: .5em 1.05em;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Портрет */
/* Форма кадра. Высокая арка на квадратном фото читалась как печная
   заслонка — заменена на спокойный скруглённый прямоугольник. */
.portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--sage-wash), var(--gold-pale));
  box-shadow: var(--shadow-lg);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Заглушка, пока нет фото */
.portrait__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .6rem;
  padding: 2rem;
  color: var(--forest-soft);
}
.portrait__ph svg { margin-inline: auto; opacity: .35; }
.portrait__ph b { font-weight: 500; font-size: .95rem; }
.portrait__ph span { font-size: .8rem; color: var(--muted); }

/* Мягкое пятно на фоне */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}
.blob--1 { width: 460px; height: 460px; background: var(--sage-wash);  top: -160px; inset-inline-end: -120px; }
.blob--2 { width: 380px; height: 380px; background: var(--gold-pale); bottom: -180px; inset-inline-start: -140px; }

/* ---------- 8. Карточки ---------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage-pale);
}
.card h3 { margin-bottom: .5em; }
.card p { font-size: .96rem; color: var(--muted); }

.card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-content: center;
  border-radius: 13px;
  background: var(--sage-wash);
  color: var(--sage);
  margin-bottom: 1.3rem;
}

/* Карточка выделенного метода */
.card--feature {
  background: var(--forest);
  border-color: var(--forest);
  color: #E9EDE4;
  grid-column: span 2;
}
@media (max-width: 700px) { .card--feature { grid-column: span 1; } }
.card--feature h3 { color: #FFF; }
.card--feature p  { color: rgba(233, 237, 228, .8); }
.card--feature .card__icon { background: rgba(255,255,255,.1); color: var(--sage-pale); }
.card--feature .eyebrow { color: var(--gold-pale); }

/* ---------- 9. Социальная панорама: диаграмма ---------- */
.panorama {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .panorama { grid-template-columns: 1fr; } }

.panorama__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}
.panorama__stage svg { width: 100%; height: 100%; overflow: visible; }

.pn-ring   { fill: none; stroke: var(--sage-pale); stroke-width: 1; opacity: .55; }
.pn-self   { fill: var(--forest); }
.pn-node   { fill: var(--surface); stroke: var(--sage); stroke-width: 1.5; }
.pn-node--warm { fill: var(--gold-pale); stroke: var(--gold); }
.pn-link   { stroke: var(--sage); stroke-width: 1; opacity: .3; }
.pn-label  { font-family: var(--font-body); font-size: 11px; font-weight: 300; fill: var(--forest-soft); }

/* «Дыхание» узлов. Сама анимация включается только после того, как
   схема собралась — правило в блоке 17. Здесь только опорные точки. */
.pn-float { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .pn-float:nth-of-type(2n) { animation-duration: 8.5s !important; }
  .pn-float:nth-of-type(3n) { animation-duration: 9.5s !important; }
  .pn-ring--spin { animation: pnSpin 64s linear infinite; transform-origin: center; }
}
@keyframes pnFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes pnSpin {
  to { transform: rotate(360deg); }
}

.panorama__steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.panorama__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.panorama__steps b {
  width: 30px; height: 30px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--sage-wash);
  color: var(--forest);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}
.panorama__steps p { font-size: .96rem; color: var(--muted); margin: 0; }
.panorama__steps strong { color: var(--forest); font-weight: 500; display: block; margin-bottom: .15em; }

/* ---------- 10. Путь / шаги ---------- */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: .5rem; } }
.step__n {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--sage-pale);
  line-height: 1;
}
.step h3 { margin-bottom: .35em; }
.step p  { color: var(--muted); font-size: .98rem; margin: 0; max-width: 62ch; }

/* Условия приёма: формат, длительность, частота.
   Конкретика списком читается быстрее, чем та же конкретика прозой. */
.facts {
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0;
}
.facts > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.facts > div:first-child { border-top: 1px solid var(--line-soft); }
.facts dt {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
  align-self: center;
}
.facts dd {
  margin: 0;
  color: var(--forest);
  font-size: 1rem;
}
@media (max-width: 560px) {
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Список «чего я не делаю». Границы честности названы прямо —
   это снимает у человека вопрос раньше, чем он его задаст. */
.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.nots li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: .96rem;
  color: var(--muted);
  line-height: 1.6;
}
.nots li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 10px;
  height: 1.5px;
  background: var(--gold);
}

/* ---------- 11. Дипломы ---------- */
.creds { display: grid; gap: 1rem; }
.cred {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.cred:first-child { border-top: 1px solid var(--line-soft); }
.cred strong { font-weight: 500; color: var(--forest); font-size: 1.02rem; display: block; }
.cred span   { color: var(--muted); font-size: .9rem; }
.cred time   { color: var(--gold-text); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Галерея сканов дипломов */
.dips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: .9rem;
  margin-top: 2.2rem;
}
.dip {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.dip img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s var(--ease);
}
.dip:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage-pale); }
.dip:hover img { transform: scale(1.03); }

/* Подпись поверх миниатюры */
.dip figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.6rem .6rem .5rem;
  font-size: .7rem;
  line-height: 1.3;
  color: #FFF;
  text-align: start;
  background: linear-gradient(to top, rgba(22,28,20,.82), rgba(22,28,20,0));
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.dip:hover figcaption, .dip:focus-visible figcaption { opacity: 1; }

/* Ссылка на исходный PDF */
.dips__pdfs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .8rem;
  color: var(--forest-soft);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .42em 1em;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.pdf-link:hover { border-color: var(--sage); background: var(--sage-wash); }

/* ---------- Просмотр диплома во весь экран ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 26, 19, .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .5rem;
  padding: 1rem clamp(.75rem, 3vw, 2.5rem) 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lb[data-open="true"] { opacity: 1; visibility: visible; }

.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255,255,255,.65);
  font-size: .82rem;
}
.lb__count { font-variant-numeric: tabular-nums; }

.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 70px rgba(0,0,0,.5);
  background: #FFF;
}

.lb__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  text-align: center;
}
.lb__cap { color: rgba(255,255,255,.9); font-size: .95rem; margin: 0; }
.lb__cap small { display: block; color: rgba(255,255,255,.5); font-size: .8rem; margin-top: .2em; }

.lb__btn {
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #FFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .85rem;
  padding: .5em 1.1em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.lb__btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }

/* Стрелки листания — зеркалятся в RTL автоматически через inset-inline */
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  color: #FFF;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color .25s var(--ease);
}
.lb__nav:hover { background: rgba(255,255,255,.22); }
.lb__nav--prev { inset-inline-start: 0; }
.lb__nav--next { inset-inline-end: 0; }
[dir="rtl"] .lb__nav svg { transform: scaleX(-1); }

@media (max-width: 620px) {
  .lb__nav { width: 40px; height: 40px; }
  .lb__nav--prev { inset-inline-start: -.25rem; }
  .lb__nav--next { inset-inline-end: -.25rem; }
}

/* ---------- 12. Книги ---------- */
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.book {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.book:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.book__cover {
  aspect-ratio: 3 / 2;
  background: linear-gradient(145deg, var(--sage-wash), var(--gold-pale));
  display: grid;
  place-content: center;
  color: var(--forest-soft);
  padding: 1.5rem;
  text-align: center;
}
/* Обложка настоящей книги: показываем целиком, не обрезая */
.book__cover--img {
  aspect-ratio: 4 / 3;
  padding: 1.6rem;
  place-items: center;
  place-content: center;
}
.book__cover--img img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(51,64,47,.18), 0 12px 34px rgba(51,64,47,.12);
  transition: transform .45s var(--ease);
}
.book:hover .book__cover--img img { transform: translateY(-3px) scale(1.02); }
.book__body { padding: 1.5rem 1.6rem 1.8rem; }
.book__body h3 { font-size: 1.2rem; margin-bottom: .3em; }
.book__tag {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .7em;
  display: block;
}
.book__body p { font-size: .93rem; color: var(--muted); margin: 0; }

/* Пометка о языке издания */
.book__lang {
  font-size: .82rem !important;
  color: var(--gold-text) !important;
  margin-bottom: .6em !important;
}

/* Что внутри книги. Главный аргумент: это не просто история,
   а рабочий инструмент. По обложке этого не видно. */
.inside {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  background: var(--sage-wash);
  border-radius: var(--radius-sm);
  display: grid;
  gap: .5rem;
}
.inside li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: .87rem;
  line-height: 1.45;
  color: var(--forest-soft);
}
.inside li::before {
  content: '';
  position: absolute;
  inset-inline-start: .15rem;
  top: .52em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

/* Ссылка на магазин */
.book__buy {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 1.1rem;
  min-height: 44px;
  padding: .6em 1.2em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .87rem;
  color: var(--forest);
  text-decoration: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.book__buy:hover { border-color: var(--sage); background: var(--sage-wash); }
.book__buy svg { opacity: .55; }
[dir="rtl"] .book__buy svg { transform: scaleX(-1); }

/* Разворот книги: три иллюстрации подряд — страх, путь, покой.
   Это заказная акварель из самой книги, поэтому «внутрь» её и ставим,
   а не растаскиваем по сайту как декор. */
.spread {
  margin-top: clamp(2rem, 5vw, 3.2rem);
}
.spread__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.8vw, 1.2rem);
}
.spread figure {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.spread img {
  width: 100%;
  aspect-ratio: 540 / 365;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.spread figure:hover img { transform: scale(1.035); }
.spread__cap {
  margin: 1rem 0 0;
  font-size: .87rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 767px) {
  /* На телефоне три картинки в ряд превращаются в марки —
     показываем лентой, как дипломы */
  .spread__grid {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .spread__grid::-webkit-scrollbar { display: none; }
  .spread figure { flex: 0 0 78%; scroll-snap-align: center; }
}

/* ---------- 13. Отзывы ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.quote {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: .7;
  color: var(--sage-pale);
}
.quote p { font-size: 1rem; color: var(--forest-soft); font-style: italic; margin: 0; flex: 1; }
.quote footer { font-size: .87rem; color: var(--muted); }
.quote footer b { display: block; color: var(--forest); font-weight: 500; font-style: normal; }

.quotes__empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}

/* ---------- 14. Оплата ---------- */
.pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.pay__opt {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--forest);
  /* часть вариантов — это <button> (копирование реквизитов),
     поэтому гасим его собственные стили */
  font: inherit;
  text-align: start;
  width: 100%;
  cursor: pointer;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pay__opt[aria-disabled="true"] { cursor: default; }
.pay__opt:hover { border-color: var(--sage); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
/* Плашка Bit. Это подпись в стиле сайта, а НЕ фирменный знак Bit:
   рисовать чужой товарный знак по памяти — плохая идея, получится
   узнаваемо-неправильно. Поставить настоящий можно в одну строку,
   как написано в комментарии рядом с блоком оплаты в index.html. */
.pay__logo {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-content: center;
  border-radius: 11px;
  background: var(--forest);
  color: #FFF;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .01em;
}

.pay__opt b { display: block; font-weight: 500; font-size: 1rem; }
.pay__opt span { font-size: .84rem; color: var(--muted); }
.pay__opt[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- 15. Контакты ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }

/* minmax(0, 1fr) — чтобы колонка не могла стать шире контейнера.
   По умолчанию ячейка сетки не ужимается уже своего содержимого, а
   «felix.bortnick@gmail.com» — одно неразрывное слово: на экране 320px
   с самым крупным шрифтом оно распирало раздел на 25px вбок. */
/* Отзыв скриншотом. Картинка ужимается по ширине карточки и никогда
   не распирает сетку — скриншоты с телефона бывают любой ширины. */
.quote__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) / 1.6);
  border: 1px solid var(--line-soft);
  margin-bottom: .9rem;
}
.quote__img + p { margin-top: 0; }

.channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: 2rem; }
.channel > div { min-width: 0; overflow-wrap: anywhere; }
.channel {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  padding: 1.05rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--forest);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.channel:hover { border-color: var(--sage); transform: translateX(3px); box-shadow: var(--shadow-sm); }
[dir="rtl"] .channel:hover { transform: translateX(-3px); }
.channel__ico {
  width: 40px; height: 40px;
  display: grid; place-content: center;
  border-radius: 11px;
  background: var(--sage-wash);
  color: var(--sage);
  flex-shrink: 0;
}
.channel b { display: block; font-weight: 400; font-size: .98rem; }
.channel span { font-size: .83rem; color: var(--muted); }

/* Форма */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .86rem; color: var(--forest-soft); font-weight: 400; }
.field input, .field textarea, .field select {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .85em 1.05em;
  width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(126, 144, 104, .15);
}
.form__note { font-size: .8rem; color: var(--muted); margin: 0; }

/* ---------- 16. Подвал ---------- */
.ftr {
  background: var(--forest);
  color: rgba(233, 237, 228, .75);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .9rem;
}
.ftr a { color: rgba(233, 237, 228, .9); text-decoration: none; }
.ftr a:hover { color: #FFF; text-decoration: underline; text-underline-offset: 3px; }
.ftr__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 720px) { .ftr__grid { grid-template-columns: 1fr; gap: 2rem; } }
.ftr__brand { font-family: var(--font-display); font-size: 1.5rem; color: #FFF; margin-bottom: .5rem; }
.ftr h4 { color: #FFF; font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; margin-bottom: 1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ftr__base {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(233, 237, 228, .72);
}

/* ── Блок экстренной помощи в подвале ──
   Выделен рамкой и не прячется: человеку в тяжёлом состоянии нужно
   найти номер за секунду, а не читать подвал целиком. */
.crisis {
  margin-top: 2.2rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}
.crisis__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #FFF;
  margin: 0 0 .3em;
}
.crisis__lead {
  font-size: .9rem;
  color: rgba(233, 237, 228, .8);
  margin: 0 0 1.3rem;
  max-width: 62ch;
}
/* Одна компактная строка вместо двух колонок: номера нужны рядом,
   а не отдельным разделом на треть подвала. */
.crisis__line {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.2rem;
}
.crisis__line a {
  display: flex;
  align-items: baseline;
  gap: .6em;
  min-height: 44px;
  text-decoration: none;
}
.crisis__line a b { font-size: 1.05rem; font-weight: 500; color: #FFF; }
.crisis__line a span { font-size: .82rem; color: rgba(233, 237, 228, .72); }
.crisis__line a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Дисклеймер — обязателен для услуг, связанных со здоровьем */
.disclaimer {
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(233, 237, 228, .72);
  max-width: 80ch;
  margin-top: 1.5rem;
}

/* ---------- 17. Появление при прокрутке ----------
   Разная моторика для разных типов элементов. Общий «fade-up» на всём
   подряд выглядит как шаблон, поэтому:
     — заголовочные блоки проявляются маской снизу вверх, без сдвига;
     — карточки «оседают» из чуть уменьшенного состояния;
     — изображения раскрываются шторкой, картинка внутри доезжает;
     — строки списка сдвигаются по горизонтали от края (в RTL — зеркально).
   Дистанции короткие: 6–14px. Длинный сдвиг выглядит дёшево.        */

/* Условие `scripting: enabled` — страховка: если JS выключен или браузер
   старый, весь блок игнорируется и контент просто виден сразу.
   Без неё при сломанном JS дипломы остались бы невидимыми. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {

  /* База — текстовые блоки */
  .reveal {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal[data-shown="true"] { opacity: 1; transform: none; }

  /* Заголовок секции: наводится на резкость из мягкого размытия.
     Раньше здесь была маска-шторка — её пришлось убрать: Chromium
     трактует источник -webkit-mask-image по ЯРКОСТИ, где чёрный
     означает «скрыть», а не «показать». Эффект работал наоборот,
     и заголовки оставались бледными. filter: blur поддержан везде
     одинаково и не имеет такой двусмысленности. */
  .section__head.reveal {
    filter: blur(7px);
    transform: translate3d(0, 6px, 0);
    transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  }
  .section__head.reveal[data-shown="true"] {
    filter: blur(0);
    transform: none;
  }

  /* Карточки: оседают, а не подъезжают */
  .card.reveal, .book.reveal, .quote.reveal, .pay__opt.reveal {
    transform: translate3d(0, 8px, 0) scale(.988);
    transform-origin: 50% 100%;
    transition: opacity .62s var(--ease), transform .62s var(--ease);
  }

  /* Шаги: короткий заезд от края строки */
  .step.reveal {
    transform: translate3d(-14px, 0, 0);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  [dir="rtl"] .step.reveal { transform: translate3d(14px, 0, 0); }

  /* Финальное состояние вариантов. Обязано идти ПОСЛЕ их объявления:
     у `.card.reveal` и у `.reveal[data-shown]` одинаковая специфичность,
     поэтому побеждает тот, кто ниже. Без этого блока карточки так и
     остаются сжатыми, а шаги — сдвинутыми. */
  .card.reveal[data-shown="true"],
  .book.reveal[data-shown="true"],
  .quote.reveal[data-shown="true"],
  .pay__opt.reveal[data-shown="true"],
  .step.reveal[data-shown="true"],
  [dir="rtl"] .step.reveal[data-shown="true"] {
    transform: none;
  }

  /* ══ ПЕРВЫЙ ЭКРАН ══
     Шапка НЕ участвует в наблюдателе прокрутки и не использует
     clip-path. Причина конкретная: элемент с clip-path: inset(0 0 100%)
     схлопнут в ноль высоты, и IntersectionObserver сообщает про него
     isIntersecting: false. А снять clip-path должен был именно тот
     наблюдатель, который его не видит — замкнутый круг, портрет не
     появлялся никогда.
     Теперь это обычная CSS-анимация: стартует сама при загрузке,
     без единой строки JS. Даже если скрипт упадёт — шапка появится. */
  .hero .reveal {
    opacity: 1;                 /* НИКОГДА не прячем: текст первого экрана
                                   обязан читаться, даже если анимация не
                                   стартовала. Анимируем только сдвиг —
                                   при сбое элемент просто стоит на 14px
                                   ниже, и это никому не мешает. */
    animation: heroRise .8s var(--ease) both;
  }
  .hero__grid > :first-child { animation-delay: .05s; }
  .hero__grid > :last-child  { animation-delay: .16s; }

  .portrait img { animation: portraitIn 1.6s var(--ease) both .16s; }

  /* Диаграмма просто присутствует — работает только прочерчивание */
  .panorama__stage.reveal { opacity: 1; transform: none; }
  /* Обе анимации шапки трогают ТОЛЬКО transform.
     Ни opacity, ни filter, ни clip-path — чтобы не существовало
     состояния, в котором первый экран невидим. */
  @keyframes heroRise {
    from { transform: translate3d(0, 14px, 0); }
    to   { transform: none; }
  }
  @keyframes portraitIn {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }

  /* Каскад */
  .reveal[data-d="1"] { transition-delay: .07s; }
  .reveal[data-d="2"] { transition-delay: .14s; }
  .reveal[data-d="3"] { transition-delay: .21s; }
  .reveal[data-d="4"] { transition-delay: .28s; }

  /* Миниатюры дипломов — свой каскад, задаётся из JS */
  .dip { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); }
  .dips[data-shown="true"] .dip {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: calc(var(--i, 0) * 45ms);
  }

  /* ── Диаграмма «Социальной панорамы»: линии прочерчиваются,
        узлы появляются по одному. Это и есть смысл метода —
        сначала связи, потом фигуры. ── */
  .panorama__stage .pn-ring,
  .panorama__stage .pn-link {
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
    transition: stroke-dashoffset 1.4s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .panorama__stage[data-shown="true"] .pn-ring,
  .panorama__stage[data-shown="true"] .pn-link { stroke-dashoffset: 0; }

  .panorama__stage .pn-node,
  .panorama__stage .pn-self,
  .panorama__stage .pn-label {
    opacity: 0;
    transition: opacity .55s var(--ease);
    transition-delay: calc(.5s + var(--i, 0) * 110ms);
  }
  .panorama__stage[data-shown="true"] .pn-node,
  .panorama__stage[data-shown="true"] .pn-self,
  .panorama__stage[data-shown="true"] .pn-label { opacity: 1; }

  /* «Дыхание» узлов включается только после того, как схема собралась */
  .panorama__stage[data-shown="true"] .pn-float { animation: pnFloat 7s var(--ease) infinite 1.8s; }
}

/* Страховка. Если что-то пойдёт не так с наблюдателем — на любом
   элементе не должно остаться clip-path, схлопывающего его в ноль. */
.reveal, .hero .reveal, .panorama__stage { clip-path: none; }

/* Пользователь просил уменьшить движение — показываем всё сразу */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   18. ТЕЛЕФОН — отдельные решения, а не сжатый десктоп
   ═══════════════════════════════════════════════════════════════ */

/* ── Липкая полоса связи. Только на телефоне.
      У терапевта главное действие — написать или позвонить, и на
      телефоне оно должно быть под большим пальцем всегда, а не
      где-то в конце страницы. На десктопе это было бы навязчиво. ── */
.mobile-bar { display: none; }

@media (max-width: 767px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 120;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(250, 248, 244, .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
    transform: translateY(110%);
    transition: transform .4s var(--ease);
  }
  /* Появляется, только когда посетитель уже начал читать */
  .mobile-bar[data-in="true"] { transform: none; }

  .mobile-bar__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 50px;
    border-radius: 100px;
    background: var(--forest);
    color: #F7F5F0;
    text-decoration: none;
    font-size: .97rem;
  }
  .mobile-bar__tel {
    display: grid;
    place-content: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--forest);
  }

  /* Чтобы полоса не перекрывала подвал */
  body { padding-bottom: 74px; }

  /* ── Первый экран: на телефоне сначала лицо, потом текст.
        Человек решает, идти ли к терапевту, по лицу быстрее,
        чем по заголовку. На десктопе порядок обратный. ── */
  .hero__grid { display: flex; flex-direction: column; gap: 1.8rem; }
  .hero__grid > :last-child { order: -1; }

  .portrait {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    max-height: 44vh;
    max-width: 320px;
    margin-inline: auto;
  }
  .portrait img { object-position: center 18%; }

  .hero { padding-block: 1.5rem 3rem; }
  .hero__title { font-size: clamp(2.1rem, 9.5vw, 2.9rem); line-height: 1.1; }
  .hero__meta { margin: 1.4rem 0 1.6rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; min-height: 52px; }

  /* Секции плотнее — на телефоне десктопные отступы читаются как пустота */
  .section { padding-block: 3.4rem; }
  .section__head { margin-bottom: 1.9rem; }

  /* ── Дипломы: лента с прокруткой вбок вместо тесной сетки.
        В сетке на 375px карточка была 149px — там ничего не разобрать. ── */
  .dips {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* вытягиваем ленту на всю ширину экрана, за поля контейнера */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: .4rem;
  }
  .dips::-webkit-scrollbar { display: none; }
  .dip {
    flex: 0 0 62%;
    scroll-snap-align: center;
    aspect-ratio: 3 / 4;
  }
  .dip figcaption { opacity: 1; }        /* на тач-экране нет наведения */

  .dips__pdfs { margin-top: 1.1rem; }
  .pdf-link { min-height: 44px; padding-inline: 1.15em; }

  /* ── Тач-цели: минимум 44px ── */
  .burger { width: 46px; height: 46px; }
  .lang { min-height: 44px; padding-block: 0; display: inline-flex; align-items: center; }
  .ftr ul { gap: 0; }
  .ftr ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .channel { min-height: 60px; }
  .field input, .field select, .field textarea { min-height: 50px; font-size: 16px; } /* 16px — иначе iOS зумит форму */
  .form .btn { min-height: 52px; }
  .lb__btn { min-height: 44px; }
  .lb__nav { width: 46px; height: 46px; }

  /* Схема панорамы: на телефоне подписи мельчают — увеличиваем */
  .pn-label { font-size: 13px; }

  /* Шаги: номер над заголовком, а не отдельной колонкой */
  .step { gap: .25rem; }
  .step__n { font-size: 1.7rem; }
}

/* Очень узкие экраны */
@media (max-width: 380px) {
  .dip { flex-basis: 70%; }
  .hero__title { font-size: 1.95rem; }

  /* Экранов уже 320px не бывает, но такая ширина получается при сильном
     зуме на телефоне. Там бренд + переключатель языка + бургер в строку
     уже не помещаются, поэтому поджимаем бренд и отступы. */
  .brand { font-size: 1.1rem; }
  .hdr__in { gap: .5rem; padding-inline: .85rem; }
  .lang { padding-inline: .7em; }
}

/* ---------- 18б. Помощник записи ----------
   Короткий разговор из четырёх вопросов вместо пустой формы.
   Логика и весь текст — в assets/js/agent.js. */
.agent {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 60;
  display: flex;
  /* column-reverse: кнопка внизу, панель раскрывается над ней — так
     привыкли все. В разметке кнопка идёт первой, чтобы она же была
     первой и при переходе по Tab. */
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: .7rem;
  /* Не 100vw: эта единица считает ширину вместе с полосой прокрутки,
     и панель вылезала за край ровно на её толщину. Проценты у
     фиксированного элемента считаются от видимой области — верно. */
  max-width: calc(100% - 3rem);
}
[dir="rtl"] .agent { align-items: flex-start; }

.agent__launcher {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 48px;
  padding: 0 1.25em;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: #FFF;
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform .2s var(--ease), background-color .2s;
}
.agent__launcher:hover { transform: translateY(-2px); }
.agent[data-open="true"] .agent__launcher { background: var(--muted); }

.agent__panel {
  width: 360px;
  max-width: 100%;
  max-height: min(72vh, 620px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.15rem 1.3rem;
}
.agent__panel[hidden] { display: none; }

.agent__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .9rem;
}
.agent__title {
  margin: 0 0 .25em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--forest);
}
.agent__sub { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.agent__close {
  flex: none;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: .3em .8em;
  font: inherit;
  font-size: .78rem;
  color: var(--muted);
  cursor: pointer;
}
.agent__close:hover { border-color: var(--sage); color: var(--forest); }

.agent__q {
  margin: 0 0 .3em;
  font-size: 1.02rem;
  color: var(--forest);
  line-height: 1.35;
}
.agent__hint { margin: 0 0 .9rem; font-size: .8rem; color: var(--muted); line-height: 1.45; }

.agent__opts { display: flex; flex-direction: column; gap: .4rem; }
.agent__opt {
  width: 100%;
  min-height: 44px;
  text-align: start;
  padding: .6em .9em;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) / 1.6);
  background: var(--bg);
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.agent__opt:hover { border-color: var(--sage); background: var(--sage-wash); }
/* Вариант «мне очень тяжело прямо сейчас» уводит на телефоны помощи,
   а не дальше по воронке. Отмечен иначе, чтобы его было видно сразу. */
.agent__opt--crisis {
  margin-top: .45rem;
  border-style: dashed;
  color: var(--gold-text);
}

.agent__input {
  width: 100%;
  min-height: 46px;
  padding: .6em .8em;
  margin-bottom: .7rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) / 1.6);
  background: var(--bg);
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
}
.agent__input--area { resize: vertical; line-height: 1.5; }
.agent__input:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }

.agent__next, .agent__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: #FFF;
  font: inherit;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
}
.agent__send { margin-top: .4rem; }

.agent__back {
  display: block;
  width: 100%;
  margin-top: .55rem;
  padding: .5em;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent__back:hover { color: var(--forest); }

.agent__preview {
  margin: 0 0 .8rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) / 1.6);
  background: var(--bg);
  font: inherit;
  font-size: .84rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}

/* Экран экстренной помощи */
.agent__crisis-text { margin: 0 0 .9rem; font-size: .87rem; line-height: 1.55; }
.agent__crisis { display: flex; flex-direction: column; gap: .45rem; }
.agent__crisis-line {
  display: flex;
  align-items: baseline;
  gap: .6em;
  min-height: 44px;
  padding: .5em .85em;
  border: 1px solid var(--gold-text);
  border-radius: calc(var(--radius) / 1.6);
  text-decoration: none;
}
.agent__crisis-line b { font-size: 1rem; color: var(--forest); }
.agent__crisis-line span { font-size: .8rem; color: var(--muted); }
.agent__note { margin: .9rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 767px) {
  /* Полоса WhatsApp внизу уже занимает место — поднимаем помощника над ней.
     Прижимаем обе стороны: тогда ширина не может выйти за экран в принципе. */
  .agent {
    inset-block-end: 5.2rem;
    inset-inline-end: 1rem;
    inset-inline-start: 1rem;
    max-width: none;
  }
  .agent__panel { width: 100%; max-height: 64vh; }
}

@media (prefers-reduced-motion: reduce) {
  .agent__launcher { transition: none; }
  .agent__launcher:hover { transform: none; }
}

/* ---------- 19. Печать ---------- */
@media print {
  .hdr, .nav, .form, .blob, .agent, .mobile-bar { display: none; }
  body { background: #FFF; }
  .section { padding-block: 1.5rem; }
}