/* ============================================================
   dan-ai — визуальная доводка: сетка, типографика, индексы секций
   Слой поверх style.css / editorial.css / modes.css.
   Структуру, порядок секций, переключатель и цвета не трогает.
   Группа 1 из 6: сетка + типографика + номера секций.
   ============================================================ */

:root {
  --grid-max: 84rem;
  --col-gap: clamp(1rem, 2.4vw, 2.5rem);
  /* три уровня текста: заголовок / текст / системная подпись */
  --t-label: 0.76rem;      /* mono-подписи: не меньше 12 px */
  --t-body: clamp(1rem, 1.2vw, 1.08rem);
}

/* ---------- 12-колоночная сетка внутри секций ---------- */
/* Заголовок и индекс — слева, пояснения, схемы и данные — справа:
   правая половина экрана работает, а не пустует */
@media (min-width: 901px) {
  #what,
  #products,
  #numbers,
  #case,
  #aim {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
    max-width: var(--grid-max);
  }

  #what > *,
  #products > *,
  #numbers > *,
  #case > *,
  #aim > * {
    grid-column: 1 / -1;
  }

  /* индекс секции — на поле слева, заголовок — широкой колонкой */
  .section__num {
    grid-column: 1 / 4 !important;
  }

  .section__lead {
    grid-column: 1 / 9 !important;
  }

  /* 01 — схема, опоры и «стабильность» смещены вправо */
  #what > .t-sys,
  #what > .t-ppl,
  #what > .cards {
    grid-column: 4 / 13 !important;
  }

  #what > .stability {
    grid-column: 6 / 12 !important;
  }

  /* 02 — пояснение справа, каталог на всю ширину */
  #products > .section__body {
    grid-column: 6 / 11 !important;
    margin-top: clamp(1.5rem, 3vh, 2rem);
  }

  #products > .products {
    grid-column: 1 / -1 !important;
  }

  /* 03 — цифры на всю ширину */
  #numbers > .numbers {
    grid-column: 1 / -1 !important;
  }

  /* 04 — было → стало и схема справа */
  #case > .story,
  #case > .t-sys,
  #case > .t-ppl {
    grid-column: 4 / 13 !important;
  }

  /* 05 — ссылка под фразой, со сдвигом */
  #aim > .aim__cta {
    grid-column: 5 / 13 !important;
  }

  /* notes и contact — та же сетка: заголовок слева, текст и действия справа */
  #notes,
  #contact {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
    column-gap: var(--col-gap);
    max-width: var(--grid-max);
  }

  #notes > *,
  #contact > * {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
  }

  #notes > .section__num,
  #contact > .section__num {
    grid-column: 1 / 4 !important;
  }

  #notes > .section__lead,
  #contact > .section__lead {
    grid-column: 1 / 9 !important;
  }

  #notes > .note,
  #notes > .note-card {
    grid-column: 6 / 12 !important;
  }

  #notes > .note {
    margin-top: clamp(1.5rem, 3vh, 2.2rem);
  }

  #contact > .section__body {
    grid-column: 6 / 12 !important;
  }

  #contact > .entries,
  #contact > .links {
    grid-column: 6 / 13 !important;
  }
}

/* ---------- номера секций: тихий индекс вместо фона на полэкрана ---------- */
.ghost--num {
  top: 0.4em;
  font-size: clamp(4.5rem, 9vw, 8rem);
  opacity: 0.045;
}

.ghost--right {
  right: 0;
}

.section__num {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  opacity: 0.85;
}

/* ---------- типографика: три уровня ---------- */

/* 1 — заголовок: плотный, крупный */
.section__lead {
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* 2 — текст: спокойный, читаемый */
.section__body,
.card__text,
.stability,
.number__text,
.product__side,
.entry__hint {
  font-size: var(--t-body);
  line-height: 1.6;
}

.number__text,
.entry__hint {
  font-size: 0.95rem;
}

/* 3 — системные подписи: mono, не меньше 12 px */
.nav a,
.card__index,
.card__name,
.flow,
.product__tag,
.product__url,
.story__tag,
.stability__label,
.hero__status,
.mode__btn,
.tag,
.case__marker,
.cut figcaption,
.note-card__hint,
.link-card__hint,
.footer__copy {
  font-size: var(--t-label) !important;
}

.card__name {
  letter-spacing: 0.1em;
}

@media (max-width: 640px) {
  :root {
    --t-label: 0.75rem;
  }
}

/* старые отступы «лесенкой» из editorial.css выравниваем по новой сетке */
@media (min-width: 901px) {
  #notes .section__lead,
  #contact .section__lead,
  #contact .section__body,
  #intro .section__lead,
  #what .section__lead,
  #products .section__lead,
  #case .section__lead {
    margin-left: 0;
  }
}

/* ---------- доводка группы 1 ---------- */

/* серые подписи чуть контрастнее на кремовом фоне — размер тот же */
:root {
  --gray: #64675e;
}

.section__num,
.card__index,
.product__tag,
.story__tag,
.stability,
.hero__status,
.number__text {
  opacity: 1;
}

.card__index {
  color: var(--gray);
}

/* телефон: индекс секции — тихий, а первый блок собран плотнее */
@media (max-width: 640px) {
  .ghost--num {
    font-size: clamp(3.4rem, 18vw, 5rem);
    opacity: 0.04;
  }

  #what .section__lead {
    margin-top: 1.4rem;
  }

  #what .flow {
    margin-top: 1.6rem;
  }

  #what .cards {
    margin-top: 1.8rem;
    gap: 1.4rem;
  }

  #what .card {
    padding-top: 0.8rem;
  }

  #what .card__name {
    margin-top: 0.5rem;
  }

  #what .card__text {
    margin-top: 0.4rem;
  }

  #what .stability {
    margin-top: 1.8rem;
  }
}


/* ============================================================
   Группа 2: hero + шапка
   ============================================================ */

/* фон hero чище: серое пятно уходит, остальные мягче — остаётся
   тёплый свет цвета режима, без грязных смешений */
.blob--gray {
  display: none;
}

.blob--yellow { opacity: 0.7; }
.blob--peach  { opacity: 0.55; }
.blob--mint   { opacity: 0.6; }

/* шапка: знак AI Mindset тише — меньше и в тон тексту, без «двух логотипов рядом» */
.brand__x {
  opacity: 0.45;
}

.aim-logo {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  filter: grayscale(0.35);
  opacity: 0.8;
  transition: opacity 0.3s ease, filter 0.3s ease, box-shadow 0.4s ease;
}

.brand__aim:hover .aim-logo {
  opacity: 1;
  filter: none;
}

.aim-name {
  font-size: var(--t-label);
  color: var(--gray);
}

/* телефон: шапка крупнее, чтобы не терялась рядом с большим DAN ai */
@media (max-width: 900px) {
  :root {
    --logo-size: 1.3rem;
  }

  .header {
    padding-block: 0.4rem;
  }

  .aim-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .menu-btn {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 640px) {
  .mode {
    margin-right: 0.6rem;
  }

  .mode__btn {
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
  }

  .brand {
    gap: 0.4rem;
  }

  /* подписи под знаком — одна под другой, чтобы строки не дробились на слова */
  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .hero__label {
    text-align: left;
  }
}

/* ---------- доводка группы 2 ---------- */

/* меню 01–07 на компьютере чуть контрастнее */
.nav a { opacity: 0.68; }
.nav a:hover,
.nav a.is-current { opacity: 1; }

/* «люди»: фоновый свет при скролле тише контента */
.warm--1 { background: rgba(243, 198, 165, 0.28); }
.warm--2 { background: rgba(242, 140, 40, 0.07); }
.warm--3 { background: rgba(243, 231, 180, 0.3); }


/* ============================================================
   Группа 3: продукты + цифры + aim
   ============================================================ */

/* корешок «context / {aim}» на левом поле каталога — тихая связь с AI Mindset
   вместо обрезанного фонового слова */
#products {
  position: relative;
}

.aim-spine {
  position: absolute;
  left: calc(var(--pad-x) * -0.62);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--gray);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.aim-spine::before,
.aim-spine::after {
  content: '';
  flex: 1;
  width: 1px;
  margin-inline: auto;
  background: linear-gradient(to bottom, transparent, rgba(41, 41, 41, 0.18), transparent);
}

.aim-spine::before { margin-bottom: 1rem; }
.aim-spine::after { margin-top: 1rem; }

/* каталог продуктов: строки как в исследовании — индекс, крупное имя,
   ведущая сторона в цвете режима, вторая тише */
.products {
  counter-reset: product;
}

.product {
  position: relative;
  counter-increment: product;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr);
  padding: 1.6rem 0 1.6rem 2.6rem;
  border-top-color: rgba(41, 41, 41, 0.1);
  transition: background-color 0.4s ease;
}

.product:last-child {
  border-bottom: 1px solid rgba(41, 41, 41, 0.1);
}

.product::before {
  content: counter(product, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.85rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--gray);
}

.product__name {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

html[data-theme='systems'] .product__side--sys,
html[data-theme='people'] .product__side--ppl {
  font-size: 1.02rem;
}

.product:hover {
  background-color: rgba(var(--accent-rgb), 0.04);
}

/* цифры: каждая отдельно со своей подписью, без переносов */
.numbers {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: clamp(2.2rem, 5vw, 3.2rem);
}

.number--big { grid-column: 1 / -1; }
.number:not(.number--big):not(.number--trio) { grid-column: span 3; }
.number--trio { grid-column: span 2; }

.number__value {
  white-space: nowrap;
}

.number--trio .number__value {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.numbers__source {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--gray);
}

@media (min-width: 901px) {
  #numbers > .numbers__source {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  .aim-spine {
    display: none;
  }

  .product {
    padding-left: 2.2rem;
  }

  .numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .number:not(.number--big):not(.number--trio) { grid-column: span 1; }
  .number--trio { grid-column: span 1; }
}

@media (max-width: 640px) {
  .numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .number--big,
  .number:not(.number--big):not(.number--trio) { grid-column: 1 / -1; }
  .number--trio { grid-column: span 1; }

  .number--trio .number__value { font-size: 1.5rem; }
}

/* фигурные скобки — из основного шрифта: у Neue Machina они слишком вычурные */
.brace {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0;
  opacity: 0.8;
}

/* шапка: связка dan ai × AI Mindset увереннее — Dan первый, AI Mindset рядом на равных правах гостя */
:root {
  --logo-size: 1.25rem;
}

.brand {
  gap: 0.75rem;
}

.brand__x {
  opacity: 0.75;
  font-size: 0.9rem;
  color: var(--text);
}

.aim-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  filter: none;
  opacity: 1;
}

.aim-name {
  color: var(--text);
  opacity: 0.85;
}

@media (max-width: 900px) {
  :root {
    --logo-size: 1.35rem;
  }

  .aim-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }
}

/* телефон: всё в шапке помещается в ширину вместе с menu */
@media (max-width: 640px) {
  .brand { gap: 0.45rem; }
  .aim-logo { width: 26px; height: 26px; }
  .mode { margin-left: auto; margin-right: 0.5rem; }
  .mode__btn { padding: 0.45rem 0.5rem; }
}

@media (max-width: 400px) {
  :root { --logo-size: 1.2rem; }
  .aim-logo { width: 24px; height: 24px; }
  .mode { margin-right: 0.4rem; }
  .mode__btn { padding: 0.42rem 0.42rem; font-size: 0.66rem !important; letter-spacing: 0.03em; }
  .mode__btn::before { display: none; }
  .menu-btn { font-size: 0.72rem; letter-spacing: 0.1em; }
}

/* ---------- доводка группы 3 ---------- */
/* наведение на продукт — лёгкая реакция страницы, а не кнопка */
.product:hover { background-color: transparent; }
.product::before { transition: color 0.4s ease; }
.product:hover::before { color: var(--accent-deep); }

/* источник под цифрами — вторичен */
.numbers__source { opacity: 0.7; letter-spacing: 0.08em; }


/* ============================================================
   Группа 4: кейс + AI Mindset context
   ============================================================ */

/* метаданные кейса: три короткие строки, как поля документа */
.case-meta {
  display: grid;
  gap: 0.35rem;
  margin: clamp(1.6rem, 3.5vh, 2.2rem) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
}

.case-meta div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
}

.case-meta dt {
  color: var(--gray);
}

.case-meta dd {
  margin: 0;
  color: var(--text);
}

@media (min-width: 901px) {
  #case > .case-meta {
    grid-column: 4 / 10 !important;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(41, 41, 41, 0.1);
  }
}

/* 05 / AI Mindset — тихий system note: фраза меньше остальных заголовков,
   тонкая линия слева, метка контекста, короткая мысль, ссылка */
#aim .aim__line {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  max-width: 26ch;
}

.aim__context,
.aim__note {
  margin: 0;
}

.aim__context {
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--gray);
}

.aim__note {
  margin-top: 1.4rem;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--gray);
  max-width: 38ch;
}

.aim__cta {
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

@media (min-width: 901px) {
  #aim {
    position: relative;
  }

  #aim > .aim__context { grid-column: 4 / 10 !important; }
  #aim > .section__lead { grid-column: 4 / 11 !important; }
  #aim > .aim__note,
  #aim > .aim__cta { grid-column: 4 / 10 !important; }

  /* тонкая линия слева — как поле документа, а не карточка */
  #aim::after {
    content: '';
    position: absolute;
    left: calc((100% - 11 * var(--col-gap)) / 12 * 3 + 3 * var(--col-gap) - 1.4rem);
    top: clamp(6rem, 17vh, 11rem);
    bottom: clamp(6rem, 17vh, 11rem);
    width: 1px;
    background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0));
  }
}

@media (max-width: 640px) {
  .case-meta div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.6rem; }
}


/* ============================================================
   Группа 5: схемы + motion
   Схема — фирменный язык сайта. В статике она уже законченная:
   кружки-узлы, тонкая линия, последний узел в цвете режима.
   Motion вторичен: один проход точки по линии при появлении
   (и после переключения режима), без свечения и постоянного движения.
   ============================================================ */

/* старое появление по кусочкам и «бегущий свет» отключаем — схема видна сразу */
.js .section .flow__node,
.js .section.is-visible .flow__node {
  opacity: 1;
  transform: none;
  animation: none !important;
}

.js .section .flow__link,
.js .section.is-visible .flow__link {
  transform: none;
  animation: none !important;
}

/* единый стиль */
.flow {
  gap: 0.75rem;
  color: var(--text);
}

.flow__node {
  gap: 0.55em;
}

.flow__label {
  opacity: 0.82;
}

.flow__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border: 1.25px solid rgba(41, 41, 41, 0.45);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: none !important;
}

.flow__node:last-child .flow__dot {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

.flow__node:last-child .flow__label {
  opacity: 1;
}

.flow__link {
  height: 1px;
  overflow: visible;
  background: rgba(41, 41, 41, 0.26);
}

/* точка, которая один раз проходит по линии */
.flow__link::after {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-orange);
  opacity: 0;
  transform: none;
  animation: none;
}

@keyframes flow-travel {
  0%   { left: 0;                 opacity: 0; }
  12%  {                          opacity: 1; }
  88%  {                          opacity: 1; }
  100% { left: calc(100% - 6px);  opacity: 0; }
}

/* узел вспыхивает цветом режима, когда точка проходит его, и возвращается */
@keyframes flow-pass {
  0%   { border-color: rgba(41, 41, 41, 0.45); }
  25%  { border-color: var(--accent-orange); }
  100% { border-color: rgba(41, 41, 41, 0.45); }
}

/* финальный узел «включается», когда точка доходит до него */
@keyframes flow-arrive {
  from { background: var(--cream); border-color: rgba(41, 41, 41, 0.45); }
  to   { background: var(--accent-orange); border-color: var(--accent-orange); }
}

/* !important: старое правило «бегущего света» в style.css специфичнее */
.flow .flow__link::after {
  animation: none !important;
}

.flow.run .flow__link::after {
  animation: flow-travel 0.55s linear both !important;
}

.flow.run .flow__node:not(:last-child) .flow__dot {
  animation-name: flow-pass;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-fill-mode: none;
}

.flow.run .flow__node:last-child .flow__dot {
  animation-name: flow-arrive;
  animation-duration: 0.35s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/* порядок прохода: узел, линия, узел… — по 0.55 с на отрезок */
.flow.run > :nth-child(1) .flow__dot { animation-delay: 0s; }
.flow.run > :nth-child(2)::after { animation-delay: 0s !important; }
.flow.run > :nth-child(3) .flow__dot { animation-delay: 0.55s; }
.flow.run > :nth-child(4)::after { animation-delay: 0.55s !important; }
.flow.run > :nth-child(5) .flow__dot { animation-delay: 1.1s; }
.flow.run > :nth-child(6)::after { animation-delay: 1.1s !important; }
.flow.run > :nth-child(7) .flow__dot { animation-delay: 1.65s; }
.flow.run > :nth-child(8)::after { animation-delay: 1.65s !important; }
.flow.run > :nth-child(9) .flow__dot { animation-delay: 2.2s; }

/* телефон и «уменьшить движение»: схема статичная, важнее читаемость */
@media (max-width: 640px), (prefers-reduced-motion: reduce) {
  .flow.run .flow__link::after,
  .flow.run .flow__node .flow__dot {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .flow {
    gap: 0.6rem;
    font-size: 0.78rem !important;
  }

  .flow__dot {
    width: 8px;
    height: 8px;
  }
}


/* ============================================================
   Группа 6: финальный проход по телефону
   ============================================================ */
@media (max-width: 640px) {
  /* продукты: одна колонка — имя, затем ведущая сторона, затем вторая */
  .product {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.9rem;
    padding: 1.3rem 0 1.4rem 2rem;
  }

  .product::before { top: 1.55rem; }

  .product__name { font-size: 1.2rem; }

  html[data-theme] .product__side--sys,
  html[data-theme] .product__side--ppl {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .product__tag { margin-bottom: 0.25rem; }

  /* цифры: меньше пустоты между строками */
  .numbers { row-gap: 1.6rem; margin-top: 1.6rem; }
  .number { padding-top: 0.8rem; }
  .number--big .number__value { font-size: clamp(2.8rem, 15vw, 3.6rem); }
  .number__value { font-size: 1.7rem; }
  .number__text { margin-top: 0.4rem; }
  .numbers__source { margin-top: 1.4rem; }

  /* кейс: было → стало плотнее, стрелка не отъедает полэкрана */
  .story { gap: 0.6rem; margin-top: 1.8rem; }
  .story__arrow { font-size: 1.3rem; line-height: 1; }
  #case .flow { margin-top: 1.8rem; }

  /* 05: легче */
  #aim .aim__line { font-size: 1.45rem; }

  /* подвал: знак крупнее, больше воздуха снизу */
  .footer {
    padding-bottom: 3.5rem;
    gap: 0.8rem;
  }

  .logo--footer {
    --logo-size: 1.6rem;
  }

  .footer__line { font-size: 0.95rem; }
}

@media (max-width: 640px) {
  .product { gap: 0.55rem; }
  .product__side { margin: 0; }
  .product__name { margin-bottom: 0.3rem; }

  .number__value { margin: 0; }
  .numbers { row-gap: 1.2rem; }

  .story { gap: 0.2rem; }
  .story__arrow { margin: 0.2rem 0; }
  .story__text { margin-top: 0.35rem; }

  .logo--footer .logo__dan { font-size: 1.6rem; }
  .logo--footer .logo__ai { font-size: 1.44rem; }
}

.case-meta { line-height: 1.45; }
.hero__role a { white-space: nowrap; }

@media (max-width: 400px) {
  .hero__role { letter-spacing: 0.1em; font-size: 0.72rem; }
  .case-meta div { grid-template-columns: 5.6rem minmax(0, 1fr); }
}

/* переключатель на телефоне: две равные половины, текст по центру, бегунок ровно под ним */
@media (max-width: 640px) {
  .mode {
    grid-template-columns: 1fr 1fr;
    padding: 3px;
  }

  .mode__thumb {
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
  }

  .mode__btn {
    min-width: 4.9rem;
    justify-content: center;
    padding: 0.5rem 0.55rem;
    font-size: 0.7rem !important;
    letter-spacing: 0.04em;
  }

  .mode__btn::before { display: none; }
}

@media (max-width: 380px) {
  .mode__btn { min-width: 4.4rem; padding: 0.45rem 0.4rem; font-size: 0.66rem !important; }
}

@media (max-width: 640px) {
  .mode__btn { min-width: 4.4rem; }
}
@media (max-width: 380px) {
  .mode__btn { min-width: 3.9rem; padding: 0.42rem 0.3rem; font-size: 0.64rem !important; letter-spacing: 0.02em; }
  .mode { margin-right: 0.35rem; }
}


/* ---------- производительность: убрать постоянную анимацию, которая грузит видеокарту ---------- */
/* стеклянная форма в «людях»: живое размытие под фигурой, которая всё время меняет форму, — самое тяжёлое */
.liquid--hero { animation: none !important; }
/* бесконечно бегущий пунктир в фоновой схеме и плавающие тёплые пятна */
.routes path { animation: none !important; }
.warm { animation: none !important; }
/* фоновые пятна hero двигаются, только пока hero на экране */
.bg .blob { will-change: auto; }
html.past-hero .bg .blob { animation-play-state: paused; }

/* огонёк заставки «дышит» бесконечно даже после того, как растворился, — останавливаем */
html.intro-done .ember,
html.intro-done .ember * {
  animation-play-state: paused !important;
}

html.intro-done .ember {
  visibility: hidden;
}

/* стеклянная форма hero нужна только в «людях»; в «системах» не считаем её размытие вовсе */
html[data-theme='systems'] .hero__liquid { display: none; }

/* бегущая строка не крутится, когда её не видно */
html.marquee-off .marquee__track { animation-play-state: paused; }

/* принцип крупной цитатой: «система должна убирать рутину. не человека.» */
.section--manifesto { padding-block: clamp(4rem, 12vh, 8rem); }
.manifesto {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.6rem);   /* как заголовки секций, не крупнее */
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 16ch;
}
.manifesto__mark {
  position: relative;
  color: inherit;
  background: none;
  padding: 0 0.08em;
  margin: 0 -0.02em;
}
/* маркер — отдельным слоем под словом, с мягко размытыми краями */
.manifesto__mark::before {
  content: '';
  position: absolute;
  inset: 0.04em 0;
  z-index: -1;
  background: rgba(var(--accent-rgb), 0.34);
  border-radius: 0.14em;
  filter: blur(5px);
}