/* ==========================================================================
   Метод Сигма. Тёмная тема зафиксирована на весь сайт: графит + золото.
   Mobile-first: базовые правила = телефон, медиазапросы добавляют десктоп.
   Радиусы: единая шкала 4px для всех поверхностей и контролов.
   Исключение задокументировано: портреты в отзывах это круг.
   ========================================================================== */

:root{
  --bg:#0e0f11;
  --bg-2:#131518;
  --surface:#17191d;
  --surface-2:#1d2025;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#f2f1ed;
  --text-2:#a9aba8;
  --text-3:#83868a;
  --gold:#c9a153;
  --gold-bright:#e4c57f;
  --gold-soft:rgba(201,161,83,.14);
  --gold-line:rgba(201,161,83,.34);

  --r:4px;
  --wrap:1240px;
  --gut:20px;
  --nav-h:60px;

  --ease:cubic-bezier(.16,1,.3,1);

  --f-display:'Onest','Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Golos Text','Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

@media (min-width:1024px){
  :root{ --gut:40px; --nav-h:72px; }
}

*,*::before,*::after{box-sizing:border-box}
/* Место под полосу прокрутки резервируется всегда. Модалка и просмотр
   документа вешают на body overflow:hidden, полоса пропадает, ширина страницы
   меняется, и вся вёрстка вместе с фиксированной шапкой прыгает вбок на её
   ширину. Резерв убирает прыжок без компенсации через JS: у .hdr она
   position:fixed, и одним padding на body её было бы не поправить. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
/* Пользователям, которые просят меньше прозрачности или больше контраста,
   декоративные слои не показываем совсем. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .bgfx,.hero::before,.hero::after,.page-hero::after,
  .section--alt::before,.cta::before{display:none}
}

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

body{
  margin:0;
  /* containing block для .bgfx. Про stacking context смотрите комментарий
     к .bgfx ниже: на body нельзя вешать opacity, transform, filter,
     backdrop-filter, mask, isolation, contain:paint и will-change любого из
     них, иначе фоновый слой уедет за фон страницы. */
  position:relative;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.65 var(--f-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

::selection{background:var(--gold);color:#0e0f11}

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

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:200;
  background:var(--gold);color:#0e0f11;padding:10px 16px;border-radius:var(--r);
  font-weight:600;transition:top .2s var(--ease);
}
.skip:focus{top:12px}

/* ---------- Фоновый слой ------------------------------------------------- */
/* Тёплое сияние сверху и снизу плюс еле заметная огранка на всю высоту
   документа. Огранка это фигура из самого знака «Метод Сигма»: логотип
   треугольный.

   Слой работает на z-index:-1. У html фона нет, поэтому фон body
   пропагируется на canvas, used-значение фона самого body становится
   transparent, и слой с отрицательным z-index ложится поверх заливки canvas,
   но под весь контент. Отсюда два правила, нарушение любого ломает всё:
   1. не задавать background на html и не заводить обёртку с непрозрачным фоном;
   2. не делать из body stacking context (список свойств смотрите у body).

   Ничего не анимируется: слушателей scroll в проекте нет, и заводить их ради
   фона незачем. По той же причине нет ни will-change, ни translateZ: слой
   высотой в документ, поднятый в отдельную текстуру, съел бы сотни мегабайт
   видеопамяти на телефоне. */

.bgfx{
  position:absolute;inset:0;min-height:100dvh;
  z-index:-1;pointer-events:none;overflow:hidden;
}
.bgfx > *{position:absolute;inset:0}

/* Сияние. Слой во всю высоту, пятна разложены по краям через
   background-position: одно только верхнее оставляло бы девять десятых
   длинной страницы такими же, как без фона. Нижнее прижато к полосе заявки.
   Верхнее пятно стоит в ЛЕВОМ углу, а не по центру: по центру оно светило в
   лицо фигуре первого экрана, клиент просил снимок темнее. Тот же угол держат
   .hero::after и .page-hero::after, править все три вместе. */
.bgfx__glow{
  opacity:.5;
  background-image:
    radial-gradient(96% 70% at 14% -12%,
      rgba(201,161,83,.21),rgba(201,161,83,.07) 38%,transparent 70%),
    radial-gradient(60% 46% at 6% -6%,
      rgba(255,255,255,.07),transparent 66%),
    radial-gradient(96% 100% at 50% 104%,
      rgba(201,161,83,.17),transparent 68%);
  background-size:100% 100vh,100% 100vh,100% 64vh;
  background-position:0 0,0 0,0 100%;
  background-repeat:no-repeat;
}

/* Огранка. Тайл замкнут в тор и стыкуется без шва, поэтому просто repeat. */
.bgfx__fac{
  opacity:.1;
  background:url(../img/facets-tile.svg) repeat;
  background-size:2200px auto;
}

/* Виньетка фиксирована во вьюпорте: по смыслу она неподвижна, и это заодно
   сокращает площадь отрисовки с высоты документа до одного экрана. */
.bgfx__vign{
  position:fixed;opacity:.28;
  background:radial-gradient(120% 90% at 50% 42%,transparent 52%,rgba(0,0,0,.85));
}

/* ---------- Фактура плашек ----------------------------------------------- */
/* Секции со сплошной заливкой перекрывают фоновый слой и сами по себе
   остаются ровными пятнами. Здесь у них появляется свой рисунок: тот же тайл
   огранки, но в другом масштабе, то есть тот же камень с другого расстояния.

   Рисунок лежит на ::before с z-index:-1, а плашка получает
   isolation:isolate. Без изоляции секция это не stacking context, и слой с
   отрицательным z-index ушёл бы в корневой контекст, то есть ЗА собственную
   заливку плашки, и стал бы невидимым. */

.section--alt,.cta{position:relative;isolation:isolate}
.section--alt::before,.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.1;
  background:url(../img/facets-tile.svg) repeat;
  background-size:2600px auto;
  /* края гасим, иначе плашка обрывается по границе секции резкой линией */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);
}

/* ---------- Типографика ------------------------------------------------ */

.h1,.h2,.h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.025em;line-height:1.06}
.h1{font-size:clamp(2.1rem,9vw,4rem);font-weight:700;letter-spacing:-.035em}
.h2{font-size:clamp(1.65rem,5.4vw,2.7rem)}
.h3{font-size:clamp(1.1rem,3.4vw,1.35rem);line-height:1.25;letter-spacing:-.015em}

.lede{font-size:clamp(1rem,3.6vw,1.15rem);line-height:1.6;color:var(--text-2);max-width:60ch}
.body{color:var(--text-2);max-width:68ch}
.body + .body{margin-top:1em}
.body strong{color:var(--text);font-weight:600}

.eyebrow{
  font:500 .68rem/1 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:18px;
}
.meta{font:400 .74rem/1.4 var(--f-mono);letter-spacing:.09em;color:var(--text-3)}

.gold{color:var(--gold)}

/* ---------- Секции ----------------------------------------------------- */

.section{padding-block:72px;position:relative}
.section--alt{background:var(--bg-2)}
.section--tight{padding-block:56px}
@media (min-width:1024px){
  .section{padding-block:128px}
  .section--tight{padding-block:88px}
}

.section__head{margin-bottom:40px}
@media (min-width:1024px){ .section__head{margin-bottom:64px} }
.section__head .lede{margin-top:18px}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Кнопки ------------------------------------------------------ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:var(--r);
  font-family:var(--f-display);font-weight:600;font-size:.94rem;letter-spacing:-.005em;
  white-space:nowrap;text-align:center;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--gold);color:#0e0f11}
.btn--primary:hover{background:var(--gold-bright)}
.btn--ghost{
  border:1px solid var(--line-2);color:var(--text);
  background:rgba(14,15,17,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.9rem}
.btn--wide{width:100%}
@media (min-width:560px){ .btn--wide{width:auto} }

.btn-row{display:flex;flex-direction:column;gap:12px}
@media (min-width:560px){ .btn-row{flex-direction:row;flex-wrap:wrap;align-items:center} }

/* текстовая ссылка со стрелкой */
.link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:.92rem;color:var(--gold);
  padding-block:4px;
}
.link svg{transition:transform .3s var(--ease)}
.link:hover{color:var(--gold-bright)}
.link:hover svg{transform:translateX(4px)}

/* ---------- Шапка ------------------------------------------------------- */

.hdr{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(14,15,17,.72);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}

.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{width:28px;height:auto;flex:none}
.brand span{
  font-family:var(--f-display);font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  white-space:nowrap;
}
@media (min-width:1024px){ .brand img{width:34px} .brand span{font-size:1.05rem} }

.nav{display:none}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:32px}
  .nav a{
    font-size:.92rem;color:var(--text-2);position:relative;padding-block:6px;
    transition:color .25s var(--ease);
  }
  .nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--gold);transform:scaleX(0);transform-origin:left;
    transition:transform .3s var(--ease);
  }
  .nav a:hover{color:var(--text)}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a[aria-current="page"]{color:var(--text)}
  .nav a[aria-current="page"]::after{transform:scaleX(1)}
}

.hdr .btn{min-height:42px;padding:0 18px;font-size:.88rem;display:none}
@media (min-width:1024px){ .hdr .btn{display:inline-flex} }

.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;align-items:center;flex:none;
}
.burger i{display:block;width:22px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:1024px){ .burger{display:none} }

.menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:89;
  background:var(--bg);
  padding:28px var(--gut) 40px;
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.menu[data-open="true"]{transform:none;opacity:1;visibility:visible}
.menu a{
  font-family:var(--f-display);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;
  padding-block:16px;border-bottom:1px solid var(--line);
}
.menu a[aria-current="page"]{color:var(--gold)}
.menu .btn{margin-top:26px}
@media (min-width:1024px){ .menu{display:none} }

/* ---------- Герой ------------------------------------------------------- */

.hero{
  position:relative;min-height:100dvh;
  display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + 24px);padding-bottom:56px;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}

/* Портрет вырезан из фона (hero-cut-*.webp), поэтому скрима под ним нет:
   затемнять нечего, а сплошная полоса закрыла бы фоновый слой.

   Фигура позиционируется сама, а не растягивается на всю подложку. Причина:
   при width:100%/height:100% и object-fit:contain коробка элемента осталась бы
   во весь первый экран, а картинка заняла бы её часть. Маска считается от
   коробки, поэтому низ торса гас бы в пустоте, а по краю фигуры оставался бы
   резкий срез. Когда коробка равна картинке, маска ложится ровно по фигуре. */
.hero__cut{
  position:absolute;left:50%;transform:translateX(-50%);
  top:var(--nav-h);                  /* волосы не уходят под шапку */
  width:116%;height:auto;            /* плечи уводим за края экрана */
  /* Клиент просил снимок темнее. Приглушение сияния фигуру не затемняет, это
     разные слои, поэтому фильтр на самой картинке. Запрет на filter из раздела
     про фоновый слой касается body, здесь img внутри .hero__media. */
  filter:brightness(.9) contrast(1.03);
  /* исходник обрезан по грудь, низ гасим в фон */
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
}

/* Первый экран: огранка ПОД фигурой, сияние ПОВЕРХ неё.

   ::before это первый ребёнок .hero, и среди позиционированных с одинаковым
   z-index порядок отрисовки идёт по DOM, поэтому огранка ложится под
   .hero__media и над фоном страницы: камень идёт за спиной, а не вуалью поверх
   лица. Кадр неповторяющийся, с запечённой подсветкой: в тайл её запекать
   нельзя, размножилась бы в полосы.

   Сияние остаётся на ::after, то есть выше фигуры, но ниже текста
   (.hero__in несёт z-index:1). Разными псевдоэлементами они разведены не для
   красоты: прозрачность у них своя, а двумя слоями одного background её не
   задать по отдельности.

   Центр сияния в левом верхнем углу, как у .bgfx__glow: над фигурой пятна
   нет, портрет остаётся тёмным. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/facets-hero.svg) 50% 0/cover no-repeat;
  opacity:.1;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 60% at 16% -8%,rgba(201,161,83,.10),transparent 64%);
}

.hero__in{position:relative;z-index:1;width:100%}
.hero .h1{margin-bottom:18px}
.hero .lede{max-width:34ch}
.hero__in .h1,.hero__in .lede,.hero__in .btn-row{max-width:min(560px,100%)}
.hero .btn-row{margin-top:32px}

/* Десктоп: фигура занимает правую часть экрана и стоит на нижнем крае. */
@media (min-width:768px){
  .hero{align-items:center;padding-bottom:0}
  /* На компьютере текст первого экрана крупнее примерно на треть.
     Мобильные размеры заданы выше и остаются нетронутыми. */
  .hero .h1{font-size:clamp(3.1rem,6.1vw,5.4rem)}
  /* Подзаголовок не должен заезжать в светлую часть кадра: на планшетных
     ширинах панель со снимком узкая, поэтому строку держим короче. */
  .hero .lede{font-size:clamp(1.28rem,1.75vw,1.55rem);line-height:1.5;max-width:min(400px,100%)}
  .hero .btn{min-height:56px;padding:0 28px;font-size:1.02rem}
  .hero .btn-row{margin-top:38px}
  .hero__in .h1{max-width:min(760px,100%)}
  /* Панель с фигурой занимает правую часть, текст левее с ней не
     пересекается, поэтому фигура встаёт на нижний край во весь рост. */
  .hero__media{left:40%}
  .hero__cut{top:auto;bottom:0;width:auto;height:88%}
}
@media (min-width:1024px){
  .hero .lede{max-width:38ch}
  .hero__media{left:42%}
}
@media (min-width:1500px){
  .hero__media{left:46%}
}

/* ---------- Об авторе --------------------------------------------------- */

.about{display:grid;gap:36px}
/* Абзацы «Обо мне» выключены по ширине (просьба клиента). Переносы обязательны:
   без них на узкой колонке телефона выключка даёт дыры между словами. */
.about .body{text-align:justify;hyphens:auto}
@media (min-width:900px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}
}
.about__media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.about__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
.about__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,15,17,.55),transparent 42%);
  pointer-events:none;
}

.facts{margin-top:30px;border-top:1px solid var(--line)}
.facts div{
  display:flex;flex-direction:column;gap:6px;
  padding-block:14px;border-bottom:1px solid var(--line);
}
@media (min-width:560px){
  .facts div{flex-direction:row;justify-content:space-between;gap:20px;align-items:baseline}
}
.facts dt{font:400 .78rem/1.4 var(--f-mono);letter-spacing:.08em;color:var(--text-3);text-transform:uppercase;flex:0 1 auto;min-width:0}
.facts dd{margin:0;font-size:.94rem;color:var(--text);flex:1 1 auto;min-width:0}
@media (min-width:560px){ .facts dd{text-align:right} }

/* раскрывающаяся полная биография */
.bio{margin-top:30px}
.bio__panel{display:none;padding-top:8px}
.bio__panel[data-open="true"]{display:block}
.bio__panel h3{
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  margin:32px 0 14px;color:var(--text);
}
.bio__panel h3:first-child{margin-top:20px}
.bio__list li{
  display:grid;gap:2px 20px;padding-block:12px;border-bottom:1px solid var(--line);
  color:var(--text-2);font-size:.94rem;line-height:1.55;
}
@media (min-width:640px){
  .bio__list li{grid-template-columns:132px minmax(0,1fr)}
}
.bio__list b{
  font:500 .78rem/1.6 var(--f-mono);letter-spacing:.05em;color:var(--gold);font-weight:500;
}
.bio__toggle{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--f-display);font-weight:600;font-size:.92rem;color:var(--gold);
}
.bio__toggle svg{transition:transform .3s var(--ease)}
.bio__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.bio__toggle:hover{color:var(--gold-bright)}

/* ---------- Опыт: показатели + таймлайн --------------------------------- */

/* Пять цифр, а не четыре: на телефоне сетка 2x2 плюс последняя ячейка во всю
   ширину, иначе в углу осталась бы пустая клетка. С 900px все пять в ряд. */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.stats li:last-child{grid-column:1/-1}
@media (min-width:900px){
  .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .stats li:last-child{grid-column:auto}
}
.stats li{background:var(--bg-2);padding:26px 20px 24px}
@media (min-width:1024px){ .stats li{padding:34px 28px 30px} }
.stats b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,7vw,3rem);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  /* Цвет остаётся в объявлении: если background-clip:text не поддержан,
     цифры просто останутся золотыми, а не пропадут. */
  color:var(--gold);
  background:linear-gradient(160deg,var(--gold-bright),var(--gold) 62%,#8d6f38);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stats span{display:block;margin-top:12px;font-size:.86rem;line-height:1.45;color:var(--text-2)}

.timeline{margin-top:56px;display:grid;gap:1px;background:var(--line)}
@media (min-width:900px){ .timeline{grid-template-columns:repeat(4,minmax(0,1fr))} }
.timeline li{background:var(--bg-2);padding:24px 20px;position:relative}
@media (min-width:1024px){ .timeline li{padding:30px 28px 34px} }
.timeline li::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--line-2);
}
.timeline li:last-child::before{background:var(--gold)}
.timeline b{display:block;font:500 .76rem/1 var(--f-mono);letter-spacing:.1em;color:var(--gold);margin-bottom:14px}
.timeline strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;margin-bottom:7px}
.timeline span{font-size:.88rem;line-height:1.5;color:var(--text-2)}

/* ---------- Пособия ----------------------------------------------------- */

.books{display:grid;gap:36px}
@media (min-width:700px){ .books{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} }
@media (min-width:1000px){ .books{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px} }

.book{display:flex;flex-direction:column;height:100%}
.book__cover{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  /* тёплое свечение за обложкой вместо чистой чёрной тени */
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 46px -8px rgba(201,161,83,.34);
}
.book__cover img{
  width:100%;aspect-ratio:415/594;object-fit:cover;
  transition:transform .55s var(--ease),filter .55s var(--ease);
}
.book__cover:hover img{transform:scale(1.035)}
.book__body{display:flex;flex-direction:column;flex:1;padding-top:22px}
.book__title{
  font-family:var(--f-display);font-weight:600;font-size:1.12rem;line-height:1.28;
  letter-spacing:-.02em;margin-bottom:10px;
}
.book__title a{transition:color .25s var(--ease)}
.book__title a:hover{color:var(--gold)}
.book__desc{font-size:.92rem;line-height:1.55;color:var(--text-2);margin-bottom:20px}
.book__meta{
  margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-top:16px;border-top:1px solid var(--line);
}
.book__price{
  font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.book__pages{font:400 .74rem/1.4 var(--f-mono);letter-spacing:.06em;color:var(--text-3);text-align:right}
.book__actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.book__actions .btn{min-height:46px;font-size:.9rem}

/* ---------- Корпоративный блок (текст слева, снимок справа) ------------- */

/* Снимок показывается целиком, без обрезки и без скрима. На телефоне идёт в
   потоке под текстом во всю ширину, с 1024px занимает правую половину экрана
   и центрируется по высоте текстовой колонки. Плашки у секции нет: слева от
   кадра виден фоновый слой с огранкой. Края кадра гасятся маской, а не
   заливкой: заливка закрыла бы огранку. Правило для img на десктопе общее с
   .page-hero и лежит в его блоке, после базовых правил обоих.
   Порог 1024, а не 900: на 900px правая половина это 440px, кадр 16:9 в ней
   250px высотой при секции в 700, висит маркой. До 1024 остаётся стек. */
/* Кнопка первого экрана ведёт сюда якорем (edits/8, правка 2). Своего
   верхнего отступа секции под фиксированной шапкой мало: на телефоне между
   ней и заголовком остаётся 15px. Запас добирается scroll-margin. */
.strip{position:relative;overflow:hidden;scroll-margin-top:24px}
.strip__in{position:relative;z-index:1;padding-block:72px 0}
.strip__box{max-width:600px}
.strip__media{position:relative;margin-top:40px}
/* верх кадра растворяется в фоне, низ упирается прямо в плашку .section--alt:
   низ снимка тёмный (стол, костюмы), стык с плашкой не читается */
.strip__media img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%);
          mask-image:linear-gradient(to bottom,transparent,#000 14%);
}
@media (min-width:1024px){
  .strip__in{padding-block:128px}
  /* половина .wrap минус зазор до середины экрана: текст не доходит до снимка.
     .wrap центрирован, поэтому его середина совпадает с серединой экрана. */
  .strip__box{max-width:calc(50% - 32px)}
  .strip__media{position:absolute;left:50%;right:0;top:0;bottom:0;margin:0}
}
.strip__list{margin:28px 0 34px;display:grid;gap:1px;background:var(--line)}
.strip__list li{
  background:rgba(14,15,17,.55);padding:16px 18px;
  display:flex;align-items:flex-start;gap:14px;font-size:.96rem;line-height:1.5;
}
.strip__list b{
  font:500 .72rem/1.7 var(--f-mono);color:var(--gold);flex:none;letter-spacing:.06em;
}

/* ---------- Отзывы ------------------------------------------------------ */

.quotes{display:grid;gap:24px}
@media (min-width:900px){ .quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} }

.quote{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px;display:flex;flex-direction:column;
}
/* Волосяной золотой кант по верхней кромке карточек. Задан фоном, а не
   border-top: градиент, гаснущий к краям, границей не нарисовать. */
.quote,.program,.anon__list li,.more-book,.doc-shot,.ukazy li{
  background-image:linear-gradient(90deg,transparent,rgba(201,161,83,.55),transparent);
  background-size:100% 1px;
  background-position:0 0;
  background-repeat:no-repeat;
}
@media (min-width:1024px){ .quote{padding:36px 34px} }
/* два отзыва в ряду: линия над подписью на одной высоте независимо от длины цитаты.
   Строки карточки берутся у родительской сетки, свой row-gap обнуляем: отступ над
   линией задаёт margin-top у .quote__by. */
@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .quote{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
  }
}
.quote__text{font-size:1rem;line-height:1.62;color:var(--text)}
@media (min-width:1024px){ .quote__text{font-size:1.06rem} }
.quote__by{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
/* портреты в отзывах: круг (задокументированное исключение из шкалы радиусов) */
.quote__by img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line-2)}
.quote__by strong{display:block;font-family:var(--f-display);font-weight:600;font-size:.96rem;letter-spacing:-.01em}
.quote__by span{display:block;margin-top:4px;font-size:.82rem;line-height:1.4;color:var(--text-3)}

/* анонимные отзывы: масонри-колонки на десктопе */
.anon{margin-top:0}
.anon__list{display:grid;gap:16px}
@media (min-width:768px){ .anon__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .anon__list{grid-template-columns:repeat(3,minmax(0,1fr))} }
.anon__list li{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;font-size:.94rem;line-height:1.6;color:var(--text-2);
}
.anon__stars{display:block;margin-bottom:12px;color:var(--gold);font-size:.8rem;letter-spacing:.24em}

/* ---------- Полоса призыва ---------------------------------------------- */

.cta{border-top:1px solid var(--line);background:var(--bg-2)}
.cta__in{
  padding-block:64px;display:grid;gap:28px;
}
@media (min-width:900px){
  .cta__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;padding-block:88px}
}
.cta .h2{max-width:22ch}
.cta p{margin-top:16px;color:var(--text-2);max-width:52ch}

/* ---------- Подвал ------------------------------------------------------ */

.ftr{border-top:1px solid var(--line);padding-block:44px 40px;background:var(--bg)}
.ftr__grid{display:grid;gap:34px}
@media (min-width:768px){ .ftr__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:40px} }
.ftr__brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.ftr__brand img{width:30px}
.ftr__brand span{font-family:var(--f-display);font-weight:600;font-size:1.02rem}
.ftr p{font-size:.88rem;line-height:1.6;color:var(--text-3);max-width:34ch}
.ftr h4{
  font:500 .68rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 16px;font-weight:500;
}
.ftr__links li{margin-bottom:11px}
.ftr__links a{font-size:.92rem;color:var(--text-2);transition:color .25s var(--ease)}
.ftr__links a:hover{color:var(--gold)}
.ftr__tg{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.94rem;color:var(--text);transition:color .25s var(--ease);
}
.ftr__tg:hover{color:var(--gold)}
.ftr__tg svg{color:var(--gold);flex:none}
/* Кнопка стоит под ссылкой на канал, а не в одну строку с ней: у .btn
   display:inline-flex, поэтому переводим её в блочный поток. */
.ftr__btn{display:flex;width:fit-content;margin-top:18px}
.ftr__bottom{
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
  font-size:.8rem;color:var(--text-3);
}
@media (min-width:768px){ .ftr__bottom{flex-direction:row;justify-content:space-between;align-items:center} }
/* Два юридических документа держатся одной группой, иначе на десктопе
   space-between растащил бы копирайт и обе ссылки по трём краям строки. */
.ftr__legal{display:flex;flex-direction:column;gap:10px}
@media (min-width:768px){ .ftr__legal{flex-direction:row;gap:26px} }
.ftr__bottom a:hover{color:var(--gold)}

/* ---------- Страница пособия -------------------------------------------- */

.crumbs{
  padding-top:calc(var(--nav-h) + 28px);
  font:400 .78rem/1.5 var(--f-mono);letter-spacing:.06em;color:var(--text-3);
}
.crumbs a{transition:color .25s var(--ease)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--text-2)}

.prod{display:grid;gap:36px;padding-top:32px}
@media (min-width:900px){
  .prod{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;align-items:start;padding-top:48px}
}
.prod__cover{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 64px -10px rgba(201,161,83,.3);max-width:340px;
}
@media (min-width:900px){ .prod__cover{max-width:none;position:sticky;top:calc(var(--nav-h) + 32px)} }
.prod__cover img{width:100%;aspect-ratio:415/594;object-fit:cover}
.prod .h1{font-size:clamp(1.75rem,6vw,2.9rem);letter-spacing:-.03em;line-height:1.1}
.prod__sub{margin-top:18px;font-size:1.02rem;line-height:1.6;color:var(--text-2);max-width:52ch}

.specs{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){ .specs{grid-template-columns:repeat(4,minmax(0,1fr))} }
.specs div{background:var(--bg);padding:18px 16px}
.specs dt{font:400 .68rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.specs dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:.98rem;letter-spacing:-.01em}

.buy{margin-top:32px;display:flex;flex-direction:column;gap:18px}
@media (min-width:560px){ .buy{flex-direction:row;align-items:center;gap:26px;flex-wrap:wrap} }
.buy__price{
  font-family:var(--f-display);font-weight:700;font-size:2.1rem;letter-spacing:-.03em;
  line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
}
.buy__price small{display:block;margin-top:8px;font:400 .72rem/1 var(--f-mono);letter-spacing:.1em;color:var(--text-3)}
.buy .btn-row{flex:1}

/* содержание пособия */
.toc{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:768px){ .toc{grid-template-columns:repeat(2,minmax(0,1fr))} }
.toc li{background:var(--bg);padding:22px 4px 22px 0;display:flex;gap:18px;align-items:flex-start}
@media (min-width:768px){ .toc li:nth-child(even){padding-left:28px} }
.toc b{font:500 .76rem/1.7 var(--f-mono);color:var(--gold);flex:none;letter-spacing:.04em}
.toc strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;margin-bottom:6px}
.toc span{font-size:.9rem;line-height:1.55;color:var(--text-2)}

/* кому подойдёт */
.fits{display:grid;gap:14px;margin-top:28px}
@media (min-width:640px){ .fits{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fits li{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  font-size:.94rem;line-height:1.5;
}
.fits svg{color:var(--gold);flex:none;margin-top:2px}

/* блок автора на странице пособия */
.author-card{display:grid;gap:28px;align-items:center}
@media (min-width:768px){ .author-card{grid-template-columns:190px minmax(0,1fr);gap:40px} }
.author-card__img{border-radius:var(--r);overflow:hidden;max-width:190px;position:relative;background:var(--surface)}
.author-card__img img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(.25) brightness(.88)}
.author-card__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,15,17,.5),transparent 55%);
}

/* другие пособия */
.more-books{display:grid;gap:20px}
@media (min-width:768px){ .more-books{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} }
.more-book{
  display:flex;gap:20px;align-items:center;padding:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.more-book:hover{border-color:var(--gold-line);background:var(--surface-2)}
.more-book img{width:78px;flex:none;border-radius:2px;aspect-ratio:415/594;object-fit:cover}
.more-book strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.3;letter-spacing:-.015em;margin-bottom:8px}
.more-book span{font:400 .76rem/1.4 var(--f-mono);letter-spacing:.06em;color:var(--text-3)}

/* ---------- Корпоративное обучение -------------------------------------- */

/* Устройство то же, что у .strip на главной: текст слева, снимок целиком
   справа, на телефоне снимок под текстом. Общее правило для img на десктопе
   лежит сразу после этого блока, ниже базовых правил обоих. */
.page-hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + 64px);padding-bottom:0;
}
.page-hero__media{position:relative;z-index:0;margin-top:40px}
/* низ гасим в фон: следующая секция без плашки, и линия обреза была бы видна */
.page-hero__media img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);
}
/* Сияние в левом верхнем углу, как на главной (см. .hero::after). ::after это
   последний ребёнок, лежит над снимком и под текстом (.page-hero__in z-index:1).
   Огранка здесь из общего фонового слоя: снимок больше не закрывает секцию. */
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 60% at 16% -8%,rgba(201,161,83,.10),transparent 64%);
}
.page-hero__in{position:relative;z-index:1}
/* базовое ограничение нужно стеку 768-1023: без него lede растянется на весь .wrap */
.page-hero__in .h1,.page-hero__in .lede,.page-hero__in .btn-row{max-width:min(660px,100%)}
@media (min-width:1024px){
  .page-hero{padding-top:calc(var(--nav-h) + 120px);padding-bottom:110px}
  .page-hero__in .h1,.page-hero__in .lede,.page-hero__in .btn-row{max-width:calc(50% - 32px)}
  /* от низа шапки, а не от верха секции: кадр центрируется по видимой части
     экрана и не уходит под размытие шапки */
  .page-hero__media{position:absolute;left:50%;right:0;top:var(--nav-h);bottom:0;margin:0}
}

/* Общее для полосы на главной (.strip) и первого экрана обучения (.page-hero).
   Лежит после базовых правил обоих блоков намеренно: специфичность у них та же,
   и базовое width:100% того, что идёт в файле позже, перебивало бы это правило
   (так и было, кадр на 1920px растягивался). Коробка img равна
   самому кадру, а не всей правой половине: иначе маска считалась бы от коробки,
   и края кадра остались бы резкими, та же ловушка, что у .hero__cut. Кадр
   прижат к правому краю экрана и центрирован по высоте.

   Размер кадра считается от коробки-контейнера: ширина это меньшее из ширины
   половины и высоты половины, умноженной на 16/9, высота auto. Так пропорция
   держится всегда. Вариант с width:auto плюс max-width и max-height оставлен
   запасным для браузеров без единиц контейнера: когда упираются оба предела
   сразу (широкие экраны, от ~1900px), Chrome не переносит ограничение по высоте
   на ширину и растягивает кадр по горизонтали на несколько процентов.
   width:auto обязателен: атрибут width="1600" иначе даёт презентационную ширину.

   Маска из двух слоёв через intersect: слева 7% (режет только размытый затылок
   на переднем плане, слушатели остаются), сверху и снизу по 8%. Без поддержки
   mask-composite слои складываются объединением, края просто становятся
   резкими, раскладка не страдает. */
@media (min-width:1024px){
  .strip__media img,.page-hero__media img{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:auto;height:auto;max-width:100%;max-height:100%;
    -webkit-mask-image:
      linear-gradient(to right,transparent,#000 7%),
      linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(to right,transparent,#000 7%),
      linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
            mask-composite:intersect;
  }
}
@supports (width:1cqw){
  @media (min-width:1024px){
    .strip__media,.page-hero__media{container-type:size}
    .strip__media img,.page-hero__media img{
      width:min(100cqw,calc(100cqh * 16 / 9));max-width:none;max-height:none;
    }
  }
}
.page-hero .h1{font-size:clamp(1.9rem,6.6vw,3.4rem);line-height:1.08;letter-spacing:-.03em}
.page-hero .lede{margin-top:22px}
.page-hero .btn-row{margin-top:34px}

.tasks{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:900px){ .tasks{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tasks li{background:var(--bg);padding:30px 22px 34px}
@media (min-width:1024px){ .tasks li{padding:40px 32px 46px} }
.tasks b{display:block;font:500 .74rem/1 var(--f-mono);letter-spacing:.14em;color:var(--gold);margin-bottom:20px}
.tasks strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1.14rem;letter-spacing:-.02em;margin-bottom:12px}
.tasks span{font-size:.94rem;line-height:1.6;color:var(--text-2)}

.programs{display:grid;gap:20px}
@media (min-width:900px){ .programs{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} }
.program{
  padding:30px 26px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;
}
.program h3{font-family:var(--f-display);font-weight:600;font-size:1.16rem;letter-spacing:-.02em;margin-bottom:14px}
.program p{font-size:.94rem;line-height:1.6;color:var(--text-2);margin-bottom:20px}
.program ul{margin-top:auto;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:10px}
.program li{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;line-height:1.45;color:var(--text-2)}
.program li svg{color:var(--gold);flex:none;margin-top:3px}

.steps{display:grid;gap:0}
@media (min-width:900px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)} }
.steps li{
  padding:26px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start;
}
@media (min-width:900px){
  .steps li{background:var(--bg-2);padding:32px 26px 38px;border-bottom:0;display:block}
}
.steps b{
  font:500 .74rem/1 var(--f-mono);color:var(--gold);letter-spacing:.1em;
  padding-top:5px;
}
@media (min-width:900px){ .steps b{display:block;margin-bottom:22px;padding-top:0} }
.steps strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.015em;margin-bottom:9px}
.steps span{font-size:.9rem;line-height:1.55;color:var(--text-2)}

.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:900px){ .terms{grid-template-columns:repeat(4,minmax(0,1fr))} }
.terms div{background:var(--bg);padding:26px 20px}
@media (min-width:1024px){ .terms div{padding:32px 28px} }
.terms dt{font:400 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.terms dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.04rem;line-height:1.35;letter-spacing:-.015em}

/* ---------- ИИ-решения (ai.html) -------------------------------------- */
/* Страница без снимков: кейс спроектированной системы. Визуальную работу
   делают паспорт проекта в первом экране, полоса расчёта с зачёркиванием,
   строки модулей, нить процесса и моно-выписка маскировки. Цвета и радиусы
   общие, новых токенов нет. */

/* Первый экран: текст слева, паспорт справа с 1024px, на телефоне паспорт под
   кнопкой. У .page-hero__in класс .wrap, ширину ограничиваем детям. Правило
   .page-hero про 50% ширины здесь снимается: текст сидит в своей колонке
   сетки. Нижний отступ свой: у .page-hero он 0 под снимок. */
.page-hero--ai{padding-bottom:64px}
.page-hero--ai .page-hero__in .h1,.page-hero--ai .page-hero__in .lede,.page-hero--ai .page-hero__in .btn-row{max-width:min(620px,100%)}
@media (min-width:1024px){
  .page-hero--ai{padding-top:calc(var(--nav-h) + 96px);padding-bottom:96px}
  /* Паспорт до 380px и зазор 56px: на 1024px текстовой колонке нужны
     500px, чтобы «СИГМА: агентная система» встало в одну строку. С 1280px
     колонка паспорта шире и зазор больше. */
  .page-hero--ai .page-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:56px;align-items:center}
  /* Кегль ниже общего .page-hero .h1: заголовок из шести слов должен
     укладываться в две строки колонки, а не в три. Ширина колонки задана
     сеткой, ограничение детям здесь не нужно. */
  .page-hero--ai .page-hero__in .h1{max-width:none;font-size:clamp(2.3rem,3.2vw,3rem)}
}
@media (min-width:1280px){
  .page-hero--ai .page-hero__in{grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:72px}
}

/* Паспорт проекта: строки как у .facts на главной, но подписи фиксированной
   ширины и значения выключены влево, они длиннее строки. Золотая кромка
   сверху, как у ключевых ячеек таймлайна; коробки нет. */
.passport{margin-top:44px;max-width:620px;border-top:2px solid var(--gold)}
.passport div{display:flex;flex-direction:column;gap:6px;padding-block:16px;border-bottom:1px solid var(--line)}
.passport dt{font:400 .74rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.passport dd{margin:0;font-size:.96rem;line-height:1.5;color:var(--text)}
@media (min-width:560px){
  .passport div{flex-direction:row;gap:24px;align-items:baseline}
  .passport dt{flex:0 0 108px}
}
@media (min-width:1024px){ .passport{margin-top:0;max-width:none} }

/* Задача: редакционный стек, под ним полоса расчёта. */
.task{max-width:720px}
.task .lede{margin-top:18px}
.task .body{margin-top:16px}

/* Полоса расчёта: одна главная цифра с зачёркнутым ручным временем и две
   малые. На телефоне столбик с волосяными линиями, с 900px сетка 2fr 1fr 1fr
   с вертикальными разделителями. Коробок нет, ячейки прозрачные. */
.calc{margin-top:48px;border-top:1px solid var(--line)}
.calc > div{padding-block:26px;border-bottom:1px solid var(--line)}
.calc__cap{display:block;font:500 .7rem/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.calc__main b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.8rem,11vw,5rem);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  /* Цвет остаётся в объявлении: без background-clip:text цифры просто золотые. */
  color:var(--gold);
  background:linear-gradient(160deg,var(--gold-bright),var(--gold) 62%,#8d6f38);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.calc__main .was{margin-top:16px;font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,4.5vw,1.6rem);letter-spacing:-.02em;line-height:1.1;color:var(--text-3)}
.calc__cell b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,7vw,2.6rem);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.calc__cell span{display:block;margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--text-2);max-width:34ch}
@media (min-width:900px){
  .calc{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);margin-top:64px}
  .calc > div{padding:36px 32px 40px;border-bottom:0}
  .calc > div:first-child{padding-left:0}
  .calc > div + div{border-left:1px solid var(--line)}
}

/* Зачёркивание ручного времени. Стандартный line-through снят, линия рисуется
   ::after и проявляется по .is-in, который наблюдатель из site.js вешает на
   .reveal (его несёт .calc__main). Смысл анимации: ручное время вычёркивается,
   расчётное остаётся. Под prefers-reduced-motion переход обнуляется общим
   правилом внизу файла, .is-in ставится сразу. */
.was{position:relative;display:inline-block;text-decoration:none}
.was::after{
  content:"";position:absolute;left:-.04em;right:-.04em;top:54%;height:.07em;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .4s;
}
.is-in .was::after{transform:scaleX(1)}

/* Модули: три строки, не карточки. На телефоне индекс и текст в одну сетку,
   «на выходе» под ними; с 900px индекс, назначение и выход в три колонки.
   Строка пилота несёт золотую кромку сверху, как ключевые ячейки таймлайна. */
.modules__item{
  padding:28px 0 30px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px 18px;align-items:start;
}
.modules__item:last-child{border-bottom:1px solid var(--line)}
.modules__item--pilot{border-top:2px solid var(--gold)}
.modules__item > b{font:500 .74rem/1 var(--f-mono);color:var(--gold);letter-spacing:.1em;padding-top:7px}
.modules__body h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:10px}
.modules__body p{font-size:.95rem;line-height:1.6;color:var(--text-2)}
.modules__tag{
  font:500 .64rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-line);border-radius:var(--r);padding:6px 8px 5px;
}
.modules__out{grid-column:2;margin:0;padding-top:14px;border-top:1px solid var(--line)}
.modules__out dt{font:400 .7rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.modules__out dd{margin:0;font-size:.92rem;line-height:1.55;color:var(--text)}
@media (min-width:900px){
  .modules__item{grid-template-columns:56px minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding:34px 0 38px}
  .modules__out{grid-column:auto;padding-top:0;border-top:0;padding-left:32px;border-left:1px solid var(--line)}
}

/* Процесс: вертикальная нить слева, на ней ромбы (грани из логотипа, не
   круги: радиусы на сайте единой шкалы), последний шаг «решает человек» с
   золотым ромбом и золотой подписью. */
.flow{position:relative;max-width:760px}
.flow li{position:relative;padding:0 0 32px 40px}
.flow li::before{content:"";position:absolute;left:5px;top:12px;bottom:-6px;width:1px;background:var(--line-2)}
.flow li:last-child::before{display:none}
.flow li::after{content:"";position:absolute;left:1px;top:8px;width:9px;height:9px;transform:rotate(45deg);background:var(--line-2)}
.flow li:last-child::after{background:var(--gold)}
.flow b{display:block;font:500 .74rem/1 var(--f-mono);color:var(--gold);letter-spacing:.1em;margin-bottom:10px;padding-top:2px}
.flow strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1.12rem;letter-spacing:-.015em;margin-bottom:8px}
.flow li:last-child strong{color:var(--gold-bright)}
.flow span{display:block;font-size:.94rem;line-height:1.6;color:var(--text-2);max-width:60ch}
.flow__note{margin-top:4px;max-width:60ch}
@media (min-width:900px){
  .flow li{padding-left:56px;padding-bottom:38px}
  .flow__note{margin-top:8px}
}

/* Из чего собрана: сетка 2x2 с 768px, ячейки разделены волосяными линиями
   (зазор 1px на фоне линии), заливка ячеек равна фону страницы, коробок нет.
   Ячейка агентной платформы с золотой кромкой: ядро системы. */
.stack__head{margin-top:64px;margin-bottom:24px}
.stack{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.stack li{background:var(--bg);padding:24px 22px 28px;position:relative}
.stack__key::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--gold)}
.stack strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.015em;margin-bottom:10px}
.stack span{display:block;font-size:.92rem;line-height:1.6;color:var(--text-2)}
@media (min-width:768px){
  .stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stack li{padding:30px 28px 34px}
}
@media (min-width:1024px){ .stack__head{margin-top:88px;margin-bottom:28px} }

/* Безопасность: слева моно-выписка маскировки (две строки, не таблица со
   стрелками), справа список требований. С 900px две колонки. */
.secure{display:grid;gap:40px}
.mask{border-top:1px solid var(--line)}
.mask div{padding-block:16px;border-bottom:1px solid var(--line)}
.mask dt{font:400 .7rem/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.mask dd{margin:0;font:500 .96rem/1.5 var(--f-mono);color:var(--text);overflow-wrap:anywhere}
.mask__out dd{color:var(--gold-bright)}
.secure .body{margin-top:20px}
.rules{border-top:1px solid var(--line)}
.rules li{
  display:flex;gap:14px;align-items:flex-start;padding-block:16px;border-bottom:1px solid var(--line);
  font-size:.94rem;line-height:1.55;color:var(--text-2);
}
.rules li svg{color:var(--gold);flex:none;margin-top:5px}
@media (min-width:900px){
  .secure{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:start}
}

/* ---------- Юридическая страница ---------------------------------------- */

.legal{display:grid;gap:44px;padding-top:36px}
@media (min-width:1000px){
  .legal{grid-template-columns:220px minmax(0,1fr);gap:72px;align-items:start;padding-top:52px}
}
.legal__toc{display:none}
@media (min-width:1000px){
  .legal__toc{display:block;position:sticky;top:calc(var(--nav-h) + 32px)}
  .legal__toc h4{font:500 .68rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin:0 0 18px;font-weight:500}
  .legal__toc li{margin-bottom:12px}
  .legal__toc a{font-size:.88rem;line-height:1.4;color:var(--text-2);transition:color .25s var(--ease)}
  .legal__toc a:hover{color:var(--gold)}
}
.legal__body{max-width:70ch}
.legal__body h2{
  font-family:var(--f-display);font-weight:600;font-size:1.2rem;letter-spacing:-.02em;
  margin:48px 0 16px;scroll-margin-top:calc(var(--nav-h) + 28px);
}
.legal__body h2:first-of-type{margin-top:0}
.legal__body p,.legal__body li{font-size:.96rem;line-height:1.72;color:var(--text-2)}
.legal__body p{margin-bottom:14px}
.legal__body ul{margin:0 0 16px;display:grid;gap:9px}
.legal__body ul li{padding-left:20px;position:relative}
.legal__body ul li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;background:var(--gold);border-radius:50%}
.legal__body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.legal__body a:hover{color:var(--gold-bright)}
.legal__upd{font:400 .78rem/1.5 var(--f-mono);letter-spacing:.06em;color:var(--text-3);margin-bottom:32px}

/* ---------- Модальная форма --------------------------------------------- */

.modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:flex-end;justify-content:center;
  visibility:hidden;
}
.modal[data-open="true"]{visibility:visible}
@media (min-width:640px){ .modal{align-items:center;padding:24px} }

.modal__scrim{
  position:absolute;inset:0;background:rgba(6,7,8,.78);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--ease);
}
.modal[data-open="true"] .modal__scrim{opacity:1}

.modal__panel{
  position:relative;width:100%;max-width:560px;max-height:92dvh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r) var(--r) 0 0;
  padding:28px 20px 32px;
  transform:translateY(24px);opacity:0;
  transition:transform .34s var(--ease),opacity .3s var(--ease);
}
@media (min-width:640px){
  .modal__panel{border-radius:var(--r);padding:38px 36px 36px;transform:translateY(12px) scale(.985)}
}
.modal[data-open="true"] .modal__panel{transform:none;opacity:1}

.modal__close{
  position:absolute;top:14px;right:14px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r);
  color:var(--text-3);transition:color .25s var(--ease),background-color .25s var(--ease);
}
.modal__close:hover{color:var(--text);background:var(--surface-2)}
.modal__title{font-family:var(--f-display);font-weight:600;font-size:1.45rem;letter-spacing:-.025em;padding-right:44px}
.modal__note{margin-top:12px;font-size:.9rem;line-height:1.55;color:var(--text-2)}
.modal__topic{
  margin-top:18px;padding:12px 14px;border-radius:var(--r);
  background:var(--gold-soft);border:1px solid var(--gold-line);
  font:400 .8rem/1.45 var(--f-mono);letter-spacing:.03em;color:var(--gold-bright);
}

/* ---------- Форма ------------------------------------------------------- */

.form{margin-top:24px;display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:.86rem;font-weight:500;color:var(--text)}
.field label i{color:var(--gold);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:13px 14px;font-size:.96rem;line-height:1.4;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:104px;resize:vertical}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%2383868a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;
}
.field input::placeholder,.field textarea::placeholder{color:#8b8e91}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,255,255,.26)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--surface-2)}
.field__hint{font-size:.78rem;line-height:1.45;color:var(--text-3)}
.field__err{font-size:.8rem;line-height:1.45;color:#f0907c;display:none}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:#c9614a}
.field[data-invalid="true"] .field__err{display:block}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:.84rem;line-height:1.5;color:var(--text-2)}
.consent input{
  -webkit-appearance:none;appearance:none;flex:none;
  width:20px;height:20px;margin-top:1px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--bg);cursor:pointer;position:relative;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.consent input:checked{background:var(--gold);border-color:var(--gold)}
.consent input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #0e0f11;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.consent[data-invalid="true"] input{border-color:#c9614a}

.form__submit{margin-top:4px}
.form__submit .btn{width:100%}
.form__submit .btn[data-busy="true"]{opacity:.72;pointer-events:none}

.form__state{display:none;padding:26px 4px 6px;text-align:center}
.form__state[data-show="true"]{display:block}
.form__state svg{margin:0 auto 18px}
.form__state h3{font-family:var(--f-display);font-weight:600;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:10px}
.form__state p{font-size:.94rem;line-height:1.6;color:var(--text-2);max-width:38ch;margin-inline:auto}
.form__state .btn{margin-top:24px}
.form__state--err svg{color:#e0846d}
.form__state--ok svg{color:var(--gold)}

/* Спиннер в кнопке отправки. */
.spinner{
  width:16px;height:16px;border:2px solid rgba(14,15,17,.3);border-top-color:#0e0f11;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Появление при скролле --------------------------------------- */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .book__cover:hover img{transform:none}
}

/* ---------- Размер зоны нажатия на телефоне ------------------------------ */
/* Текстовые ссылки по умолчанию высотой в строку: на тач-экране в них тяжело
   попасть. Добавляем вертикальный отступ, не трогая визуальный ритм. */
@media (max-width:1023px){
  .brand{padding-block:8px}
  .bio__toggle{padding-block:8px}
  .ftr__links li{margin-bottom:2px}
  .ftr__links a{display:inline-block;padding-block:11px}
  .ftr__tg{padding-block:9px}
  .ftr__bottom a{display:inline-block;padding-block:9px}
  .book__title a{display:inline-block;padding-block:4px}
  .crumbs a,.crumbs span{display:inline-block;padding-block:6px}
  .legal__body a{padding-block:2px}
}

/* ---------- Образец сертификата ----------------------------------------- */
/* Снимок сертификата и так тёмный с золотом, поэтому только рамка по общей
   шкале радиусов, без подложки и без тени. */
.cert{margin:0 auto;max-width:880px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.cert img{display:block;width:100%;height:auto}
.cert figcaption{padding:12px 16px;border-top:1px solid var(--line);font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* ---------- Документы: инициативы и указы ------------------------------- */
/* Сканы светлые и цветные: синий и оранжевый сертификаты, белые листы указов.
   Тема тёмная, поэтому каждый документ лежит на своём паспарту из --surface и
   в покое слегка притушен фильтром, а по наведению и с клавиатуры возвращается
   в исходный цвет. Тот же приём уже работает у .author-card__img и .band img. */

.doc-pair{display:grid;gap:26px;margin-top:40px}
@media (min-width:900px){
  .doc-pair{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:64px}
  /* В разметке скан идёт первым в обоих рядах, чтобы на телефоне сначала шёл
     документ, а потом подпись к нему. Зеркалит второй ряд только десктоп. */
  .doc-pair--flip > :first-child{order:2}
}
@media (min-width:1024px){ .doc-pair{gap:72px} }

.doc-shot{background-color:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.doc-shot--tall{max-width:380px}
@media (min-width:900px){ .doc-shot--tall{margin-inline:auto} }
.doc-shot__btn{display:block;width:100%;border-radius:var(--r);overflow:hidden}
.doc-shot img{
  width:100%;height:auto;
  filter:saturate(.86) brightness(.93);
  transition:filter .3s var(--ease),transform .4s var(--ease);
}
.doc-shot__btn:hover img,.doc-shot__btn:focus-visible img{filter:none;transform:scale(1.02)}
.doc-shot figcaption{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font:400 .66rem/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}

.doc-note__title{font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,3.8vw,1.6rem);letter-spacing:-.02em;line-height:1.18}
.doc-note .body{margin-top:14px}
.doc-note__ref{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font:500 .74rem/1.55 var(--f-mono);letter-spacing:.05em;color:var(--gold);
}

/* Полоса указов: та же волосяная сетка, что у .stats и .timeline, но ячейки
   лежат на --surface, потому что секция здесь без сплошной заливки и фоновый
   слой сквозь неё виден. */
.doc-group{margin-top:60px}
@media (min-width:1024px){ .doc-group{margin-top:92px} }
/* первая группа идёт сразу за шапкой секции, у той свой нижний отступ */
.section__head + .doc-group{margin-top:0}
.doc-group + .lede{margin-top:16px}

.ukazy{display:grid;gap:1px;margin-top:26px;background:var(--line);border:1px solid var(--line)}
@media (min-width:768px){ .ukazy{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ukazy li{
  background-color:var(--surface);padding:22px 20px;
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;
}
@media (min-width:1024px){
  .ukazy li{padding:28px 26px;grid-template-columns:132px minmax(0,1fr);gap:28px}
}
.doc-shot--sm{padding:7px;background-image:none}
.ukazy b{display:block;font:500 .76rem/1 var(--f-mono);letter-spacing:.1em;color:var(--gold);margin-bottom:12px}
.ukazy strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;margin-bottom:7px}
.ukazy span{font-size:.88rem;line-height:1.5;color:var(--text-2)}

/* ---------- Просмотр документа ------------------------------------------ */
/* Один слой на главную. Полноразмерный файл подставляется скриптом из data-full
   в момент клика: до этого страница платит весом одних миниатюр. Картинка
   держит свой натуральный размер и сжимается только по ширине окна, поэтому
   текст указа виден в том разрешении, в котором лежит файл. */

.viewer{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:center;justify-content:center;
  padding:16px 16px 54px;
  visibility:hidden;
}
.viewer[data-open="true"]{visibility:visible}
@media (min-width:768px){ .viewer{padding:24px 24px 58px} }

.viewer__scrim{
  position:absolute;inset:0;background:rgba(6,7,8,.88);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--ease);
}
.viewer[data-open="true"] .viewer__scrim{opacity:1}

.viewer__panel{
  position:relative;max-width:min(880px,100%);max-height:100%;
  opacity:0;transform:translateY(10px);
  transition:transform .34s var(--ease),opacity .3s var(--ease);
}
.viewer[data-open="true"] .viewer__panel{transform:none;opacity:1}

.viewer__img{
  width:auto;height:auto;
  max-width:100%;max-height:calc(100dvh - 70px);
  margin-inline:auto;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
}
@media (min-width:768px){ .viewer__img{max-height:calc(100dvh - 82px)} }
.viewer__cap{
  position:fixed;left:0;right:0;bottom:14px;
  padding-inline:70px;text-align:center;
  font:400 .7rem/1.45 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
}

.viewer__close{
  position:fixed;top:12px;right:12px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r);
  color:var(--text-2);background:var(--surface);border:1px solid var(--line-2);
  transition:color .25s var(--ease),background-color .25s var(--ease);
}
.viewer__close:hover{color:var(--text);background:var(--surface-2)}
@media (min-width:768px){ .viewer__close{top:20px;right:20px} }

/* ---------- Разделительная полоса со снимком ---------------------------- */
/* Кадр на фоне Москва-Сити (city-864.webp, рез 1:1 из info/media/IMG_9627.PNG,
   без растяжения). С 700px занимает правые 60% полосы, левые 40% это фон
   страницы с огранкой, поэтому своей заливки у секции нет. Затемнён сильнее
   остальных снимков, чтобы не спорить с текстом вокруг. Края гасятся маской:
   слева до 28% (фигура начинается с 33%), сверху и снизу по 18%. */
.band{position:relative;overflow:hidden;display:flex;justify-content:flex-end}
.band img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;
  filter:grayscale(.4) brightness(.45) contrast(1.08);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
@media (min-width:700px){
  .band img{
    width:60%;
    -webkit-mask-image:
      linear-gradient(to right,transparent,#000 28%),
      linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(to right,transparent,#000 28%),
      linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
            mask-composite:intersect;
  }
}
/* высота полосы прежняя: 60% от 8/5 это те же 37.5vw, что были у 16/6 */
@media (min-width:1200px){ .band img{aspect-ratio:8/5;max-height:640px} }