/* ============================================================
   ПРАКТИКУМ ПО ВАЙБ-КОДИНГУ · 10 сентября
   Стилистика 01 «Тёплая бумага» (выбор Лиды, choices.json 02.09.2026).
   Палитра, шрифты и характер — система референс-сайта
   web.zerocoder.ru/claude-code-webinar. Композиции блоков свои.

   Порядок файла:
   1. токены и база          5. GC-модалка и лайтбокс
   2. общие примитивы        6. пакеты shared/blocks (about, glossary, footer)
   3. блоки страницы         7. перекраска пакетов под тёплую бумагу
   4. адаптив по высоте окна
   Брейкпоинты: 1199 / 959 / 639 / 374 + высоты 820 / 700 (кодекс 2.6).
   ============================================================ */

/* ===================== 1. ТОКЕНЫ И БАЗА ===================== */
:root {
  --bg:#f9f0dd; --soft:#f3e7cc; --paper:#eeddbe; --card:#ffffff;
  --ink:#14130f; --dim:#5e5a4f; --dim2:#8c8775;
  /* --acc — акцент-заливка и штрихи; --accd — «CTA-тон»: белый текст на нём даёт
     контраст 5.6 (AA), поэтому все кнопки и плашки с текстом красятся им, а не --acc
     (3.66 — не проходит). --accdd — ховер/актив CTA. */
  --acc:#cc6b3a; --accd:#a64f24; --accdd:#8a3f1a; --accs:#f5d3bc;
  --code:#1a1916; --codetx:#f0eadf; --cg:#8ec07c; --cy:#d8a657; --cr:#ea6962; --cd:#7c6f64;
  --line:#ddd4be;
  --r1:8px; --r2:14px; --r3:22px; --r4:32px;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --shc:0 1px 0 rgba(20,19,15,.06), 0 18px 40px -22px rgba(20,19,15,.20);
  --shl:0 2px 0 rgba(20,19,15,.05), 0 34px 72px -34px rgba(20,19,15,.34);
  --pad-x:clamp(16px,2.6vw,44px);
  /* безопасные зоны чёлки/скруглений в ландшафте (кодекс 2.7, viewport-fit=cover) */
  --pad-l:max(clamp(16px,2.6vw,44px), env(safe-area-inset-left));
  --pad-r:max(clamp(16px,2.6vw,44px), env(safe-area-inset-right));
  --sec-y:clamp(52px,6.4vw,120px);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 780px at 14% -6%, rgba(204,107,58,.10), transparent 56%),
    radial-gradient(900px 700px at 96% 22%, rgba(20,19,15,.05), transparent 48%),
    radial-gradient(900px 700px at 4% 78%, rgba(204,107,58,.06), transparent 52%);
  background-attachment:scroll;
  color:var(--ink);
  font-family:var(--sans); font-weight:500; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* бумажное зерно множением — приём референса, «дорого» из кодекса 2.10 */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

/* секция страницы */
.wp { position:relative; z-index:1; padding:clamp(28px,3vw,52px) var(--pad-x) clamp(30px,3.6vw,60px); padding-left:var(--pad-l); padding-right:var(--pad-r); }
.wp.sec { padding:var(--sec-y) var(--pad-x); padding-left:var(--pad-l); padding-right:var(--pad-r); }

/* ---------- ритм отступов между блоками (правка Лиды 03.09) ----------
   Каждая секция несёт половину шага сверху и снизу, поэтому зазор между
   любыми двумя соседями одинаков и равен var(--sec-y). Исключения два:
   1) hero → бонусы: билет подтянут к первому экрану (половина шага);
   2) переход светлое ↔ тёмное: шаг удвоен, чтобы смена фона читалась паузой,
      а заголовок внутри тёмной зоны не прилипал к её границе. */
.wp.sec { padding-top:calc(var(--sec-y) * .5); padding-bottom:calc(var(--sec-y) * .5); }
#about, #glossary { padding:calc(var(--sec-y) * .5) 0; }
#hero.wp { padding-bottom:0; }
/* границы тёмной зоны */
.darkzone { position:relative; z-index:1; }
#takeaways.wp.sec, .darkzone > .wp.sec:last-child { padding-bottom:var(--sec-y); }
#tariffs.wp.sec, .darkzone > .wp.sec:first-child { padding-top:var(--sec-y); }
.in { position:relative; z-index:1; max-width:1200px; margin:0 auto; }
.in--narrow { max-width:920px; }
.mono { font-family:var(--mono); }
.nw { white-space:nowrap; }
@media (max-width:374px){ .nw { white-space:normal; } }

/* ===================== 2. ОБЩИЕ ПРИМИТИВЫ ===================== */
/* --- типографика --- */
/* .fL h2 — финальный CTA повторяет композицию hero, поэтому титул набирается
   теми же правилами, что и h1 (правка Лиды 03.09) */
h1 .l1, .fL h2 .l1 { display:block; font-weight:800; font-size:clamp(35px,5.4vw,68px); line-height:1.02; letter-spacing:-.03em; text-wrap:balance; }
h1 .l1 em, .fL h2 .l1 em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.005em; color:var(--acc); }
h1 .l2, .fL h2 .l2 { display:block; margin-top:.5em; max-width:44ch; font-size:clamp(15px,1.48vw,21px); font-weight:700; line-height:1.28; letter-spacing:-.01em; color:var(--dim); }
/* text-wrap:balance — прогрессивное улучшение (правка АД P4: рваная лесенка
   заголовка бонусов). Без поддержки заголовок просто верстается как раньше. */
.hd { font-weight:700; font-size:clamp(28px,4.2vw,56px); line-height:1.05; letter-spacing:-.025em; text-wrap:balance; }
/* весь курсив на странице — акцентный (правка Лиды 03.09) */
.hd em { font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.05em; letter-spacing:-.005em; color:var(--acc); }
.wp--dark .hd em { color:var(--acc); }
.sh { font-weight:700; font-size:clamp(17px,1.72vw,24px); line-height:1.2; letter-spacing:-.02em; }
.kicker { display:inline-block; font-family:var(--sans); font-size:clamp(11px,.92vw,13px); letter-spacing:.06em; color:var(--dim); border:1px solid var(--line); padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.45); }
.kicker--mono { font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:clamp(10px,.8vw,11.5px); }
.body { font-size:clamp(15.5px,1.1vw,17px); color:var(--dim); }
.body b { color:var(--ink); font-weight:700; }
.body + .body { margin-top:.7em; }
.lede { font-weight:800; font-size:clamp(18px,1.92vw,28px); line-height:1.2; letter-spacing:-.025em; color:var(--ink); }
.lede em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--acc); }
/* маркер-подсветка — приём референса */
.hl { background:linear-gradient(transparent 62%, var(--accs) 62%); }
/* цифры и факты — всегда Manrope (правка арт-директора: ноль не должен читаться как «о») */
.num { font-family:var(--sans); font-weight:800; font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.03em; }
.note { font-size:clamp(11px,.9vw,13px); line-height:1.5; color:var(--dim2); }

/* --- кнопки --- */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--bg); cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:clamp(14px,1.05vw,16px); letter-spacing:-.005em; text-align:center;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.btn:hover { transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(20,19,15,.4); }
/* стрелка отбивается margin'ом, а не gap: gap давал лишний пробел в подписях без стрелки */
.btn i { font-style:normal; margin-left:10px; transition:transform .18s var(--ease); }
.btn:hover i { transform:translateX(4px); }
.btn--p { background:var(--accd); border-color:var(--accd); color:#fff; box-shadow:0 12px 30px -14px rgba(166,79,36,.7); }
.btn--p:hover { background:var(--accdd); border-color:var(--accdd); }
.btn--p:active { background:#743415; border-color:#743415; }
.btn--o { background:transparent; color:var(--ink); }
.btn--o:hover { background:var(--ink); color:var(--bg); }
.btn--w { width:100%; }
.btn--lg { min-height:60px; padding:0 34px; }
@media (max-width:639px){ .btn { width:100%; } }
/* 320px: «ЗАРЕГИСТРИРОВАТЬСЯ» — самое длинное слово на странице; вместе с
   паддингами 26px оно распирало карточку тарифа за габарит колонки (+3px
   к scrollWidth). Ужимаем поля кнопки, кегль не трогаем. */
@media (max-width:374px){ .btn { padding:0 14px; } }

/* --- карточки и поверхности --- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r3); padding:clamp(18px,2vw,30px); box-shadow:var(--shc); }
.card--acc { background:var(--accd); border-color:var(--accd); color:#fff; box-shadow:0 20px 46px -22px rgba(166,79,36,.55); }
.card--acc .body, .card--acc .note { color:rgba(255,255,255,.82); }
.card--acc .body b { color:#fff; }
.card--dark { background:var(--code); border-color:var(--code); color:var(--codetx); box-shadow:0 22px 50px -24px rgba(20,19,15,.55); }
.card--dark .body { color:rgba(240,234,223,.72); }
.card--dark .body b, .card--dark .sh { color:var(--codetx); }
.card--lift { transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.card--lift:hover { transform:translateY(-3px); box-shadow:var(--shl); }

/* --- терминал: фирменный приём референса --- */
.term { background:var(--code); color:var(--codetx); border-radius:var(--r3); overflow:hidden; font-family:var(--mono);
  box-shadow:0 30px 80px -30px rgba(20,19,15,.45), inset 0 1px 0 rgba(255,255,255,.04); }
.term__bar { display:flex; align-items:center; gap:6px; padding:12px 16px; background:#2a2722; border-bottom:1px solid rgba(255,255,255,.06); }
.term__bar i { width:11px; height:11px; border-radius:50%; background:var(--cr); }
.term__bar i:nth-child(2){ background:var(--cy); } .term__bar i:nth-child(3){ background:var(--cg); }
.term__bar span { margin-left:auto; color:var(--cd); font-size:11.5px; }
.term__body { padding:clamp(16px,1.7vw,24px); font-size:clamp(11.5px,1vw,13.5px); line-height:1.75; }
.term__body p { white-space:nowrap; }
.g{ color:var(--cg); font-weight:700; } .y{ color:var(--cy); } .d{ color:var(--cd); } .o{ color:#e78a4e; }
.typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:0; animation:wptype 3.2s steps(34) .2s both; }
@keyframes wptype { to { max-width:34ch; } }
.cur { display:inline-block; width:.55em; background:var(--codetx); animation:wpblink 1.05s steps(2) infinite; }
@keyframes wpblink { 50%{ opacity:0; } }
@media (max-width:639px){ .term__body p { white-space:normal; } }

/* --- штамп --- */
.stamp { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  width:clamp(92px,9.6vw,132px); aspect-ratio:1; border-radius:50%; background:var(--acc); color:#fff;
  transform:rotate(8deg); box-shadow:0 18px 40px -16px rgba(204,107,58,.6); animation:wpfloat 4s ease-in-out infinite; }
@keyframes wpfloat { 0%,100%{ transform:rotate(8deg) translateY(0); } 50%{ transform:rotate(6deg) translateY(-6px); } }
.stamp b { font-family:var(--sans); font-weight:800; font-size:clamp(30px,3.4vw,48px); line-height:.9; letter-spacing:-.04em; }
.stamp span { font-size:clamp(9.5px,.78vw,11px); line-height:1.25; margin-top:5px; letter-spacing:.02em; }
.stamp--out { background:transparent; color:var(--acc); border:2px solid var(--acc); box-shadow:none; animation:none; transform:none; }
/* словесный штамп «Практикум / без продаж» (правка Лиды 03.09): кружок крупнее,
   потому что вместо одной цифры в него встаёт слово из девяти букв */
.stamp--word { width:clamp(116px,12.6vw,162px); padding:8px; }
.stamp--word b { font-size:clamp(17px,1.74vw,24px); letter-spacing:-.025em; }
.stamp--word span { font-size:clamp(9.5px,.8vw,11.5px); margin-top:4px; }

/* --- билет: единый объект бонусов (правка Лиды 03.09) ---
   Используется в блоках 02, 06, 07 и 11. Обводки нет — объект держит тень;
   отрывные строки разделены пунктиром с полукруглыми вырезами по краям.
   overflow не режем: вырезы вылезают за габарит, поэтому нижний ряд
   скругляем вручную. */
.ticket { position:relative; background:var(--card); border-radius:var(--r3); box-shadow:var(--shl); }
.ticket__hd { padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,36px) clamp(16px,1.8vw,24px); }
/* единый заголовок билета: один стиль во всех четырёх местах (правка Лиды) */
.thd { font-weight:700; font-size:clamp(19px,1.75vw,26px); line-height:1.22; letter-spacing:-.02em; }
.thd em { font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.08em; color:var(--acc); }
.ticket--acc .thd, .ticket--acc .thd em { color:#fff; }
.ticket__row { position:relative; padding:clamp(16px,1.8vw,24px) clamp(20px,2.4vw,36px); border-top:1px dashed var(--line); }
/* Вырезы у вертикального билета не рисуем накладными кругами: любой круг
   заливкой выдаёт себя на градиентном фоне. Линия отрыва — только пунктир,
   настоящие полукруглые высечки живут на горизонтальном билете (маска ниже). */
.ticket__row .lbl2 { display:block; margin-bottom:8px; font-family:var(--mono); font-size:clamp(9.5px,.78vw,11px); letter-spacing:.18em; text-transform:uppercase; color:var(--dim2); }
.ticket__row p { font-weight:700; font-size:clamp(15px,1.2vw,18px); line-height:1.35; letter-spacing:-.01em; }
.ticket__row--acc { background:var(--accd); color:#fff; border-radius:0 0 var(--r3) var(--r3); border-top-color:rgba(255,255,255,.45); }
.ticket__row--acc .lbl2 { color:rgba(255,255,255,.75); }
.ticket--sm .ticket__hd { padding-bottom:clamp(14px,1.6vw,20px); }
.ticket--sm .ticket__row p { font-size:clamp(14.5px,1.1vw,16.5px); }
/* билет внутри тёмной секции: рыжий, вырезы под цвет тёмного фона */
.ticket--acc { background:var(--accd); color:#fff; box-shadow:0 26px 60px -28px rgba(0,0,0,.7); }
.ticket--acc .ticket__row { border-top-color:rgba(255,255,255,.35); }
.ticket--acc .ticket__row p { font-weight:600; font-size:clamp(14.5px,1.1vw,16.5px); line-height:1.45; }
.ticket--acc .sh { color:#fff; }
/* подвал билета: цена и кнопка внутри карточки «Что вы забираете с собой» */
.ticket__foot { position:relative; padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,36px);
  border-top:1px dashed rgba(255,255,255,.45); border-radius:0 0 var(--r3) var(--r3); text-align:center; }
.ticket__foot .old { font-size:clamp(13.5px,1vw,15px); color:rgba(255,255,255,.78); }
.ticket__foot .old s { color:rgba(255,255,255,.6); }
.ticket__foot .big { margin-top:4px; font-size:clamp(44px,5vw,72px); line-height:1; letter-spacing:-.05em; color:#fff; }
.ticket__foot .note { margin-top:8px; color:rgba(255,255,255,.8); }
.ticket__foot .btn { margin-top:clamp(14px,1.6vw,20px); background:#fff; border-color:#fff; color:var(--accd); box-shadow:none; }
.ticket__foot .btn:hover { background:var(--ink); border-color:var(--ink); color:#fff; }

/* --- горизонтальный билет (правка Лиды 03.09): корешок с заголовком слева,
   три отрывных купона в ряд, перфорация вертикальная. Раскладка только
   от 960px — ниже билет собирается в вертикальную стопку, как раньше. --- */
@media (min-width:960px){
  /* билет растянут во всю ширину контейнера — ограничения ширины снимаем */
  .ticket--h { display:grid; grid-template-columns:1.9fr .9fr .9fr .9fr; }
  .ticket--h .ticket__hd { display:flex; align-items:center; padding:clamp(28px,2.8vw,42px); }
  /* кегль корешка — максимум, который держит билет собранным: полные 56px
     общего h2 сюда не влезают, заголовок расползается на шесть строк */
  .ticket--h .ticket__row { display:flex; flex-direction:column; justify-content:center;
    padding:clamp(26px,2.6vw,38px) clamp(18px,1.9vw,28px);
    border-top:0; border-left:1px dashed var(--line); }
  .ticket--h .ticket__row--acc { border-radius:0 var(--r3) var(--r3) 0; border-left-color:rgba(255,255,255,.5); }
  .ticket--h .ticket__row p { font-size:clamp(14.5px,1.12vw,17px); }

  /* Настоящие высечки: бумага прорезана маской, сквозь вырез виден фон страницы
     со всеми градиентами — накладной круг такого не даёт (правка Лиды 05.09).
     Координаты вырезов = границы колонок сетки 1.9 / .9 / .9 / .9 (сумма 4.6):
     1.9/4.6 = 41.304%, 2.8/4.6 = 60.870%, 3.7/4.6 = 80.435%.
     Тень живёт на обёртке .tw через drop-shadow, иначе маска её обрезала бы. */
  @supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
    .ticket--h { --cut:11px; box-shadow:none;
      -webkit-mask:
        radial-gradient(var(--cut) at 41.304% 0, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 41.304% 100%, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 60.870% 0, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 60.870% 100%, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 80.435% 0, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 80.435% 100%, #0000 98%, #000 100%);
      mask:
        radial-gradient(var(--cut) at 41.304% 0, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 41.304% 100%, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 60.870% 0, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 60.870% 100%, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 80.435% 0, #0000 98%, #000 100%),
        radial-gradient(var(--cut) at 80.435% 100%, #0000 98%, #000 100%);
      -webkit-mask-composite: source-in; mask-composite: intersect; }
    .tw { filter:drop-shadow(0 2px 0 rgba(20,19,15,.05)) drop-shadow(0 26px 40px rgba(20,19,15,.16)); }
  }
}

/* --- сводка выпуска (правка АД: под первым экраном) --- */
.facts { display:grid; grid-template-columns:repeat(4,1fr); background:var(--card); border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; box-shadow:var(--shc); }
.facts .f { padding:clamp(12px,1.35vw,20px) clamp(14px,1.5vw,24px); border-right:1px solid var(--line); }
.facts .f:last-child { border-right:0; }
.facts .f .l { font-family:var(--mono); font-size:clamp(9.5px,.76vw,11px); letter-spacing:.16em; text-transform:uppercase; color:var(--dim2); }
.facts .f .v { margin-top:6px; font-family:var(--sans); font-weight:800; font-size:clamp(16px,1.5vw,23px); letter-spacing:-.03em; }
.facts .f .v em { font-style:normal; color:var(--acc); }
@media (max-width:639px){
  .facts { grid-template-columns:1fr 1fr; }
  .facts .f { border-bottom:1px solid var(--line); }
  .facts .f:nth-child(2n) { border-right:0; }
  .facts .f:nth-last-child(-n+2) { border-bottom:0; }
}

/* --- сетки --- */
.cols { display:grid; gap:clamp(14px,1.8vw,28px); }
/* min-width:0 — иначе длинное слово внутри ячейки раздвигает колонку сетки */
.cols > * { min-width:0; }
.cols--2 { grid-template-columns:repeat(2,1fr); }
.cols--3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:959px){ .cols--3 { grid-template-columns:1fr 1fr; } }
@media (max-width:639px){ .cols--2, .cols--3 { grid-template-columns:1fr; } }

/* --- слоты под изображения (заполняет Лида) --- */
.slot { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; padding:18px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r3);
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.45) 0 12px, transparent 12px 24px); }
.slot span { font-family:var(--mono); font-size:clamp(9.5px,.8vw,11.5px); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); max-width:28ch; line-height:1.6; }
.slot--43 { aspect-ratio:4/3; } .slot--11 { aspect-ratio:1; }
/* когда картинка вставлена — рамка и штриховка не нужны */
.slot:has(img) { padding:0; background:none; border:0; }
/* height:auto обязателен: у <img> в разметке проставлены width/height,
   без него браузер держит презентационную высоту 768px и слот распирает */
.slot img { border-radius:inherit; width:100%; height:auto; }

/* --- тёмная секция (единственная на странице — интенсив) --- */
.wp--dark { background-color:var(--code); color:var(--codetx);
  background-image:
    radial-gradient(circle at 14% 0%, rgba(204,107,58,.17), transparent 55%),
    radial-gradient(circle at 88% 70%, rgba(204,107,58,.08), transparent 45%),
    linear-gradient(rgba(240,234,223,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,234,223,.022) 1px, transparent 1px);
  background-size:auto, auto, 90px 90px, 90px 90px; }
.wp--dark .body { color:rgba(240,234,223,.72); }
.wp--dark .body b, .wp--dark .lede, .wp--dark .hd, .wp--dark .sh { color:var(--codetx); }
.wp--dark .note { color:rgba(240,234,223,.5); }
.wp--dark .kicker { color:rgba(240,234,223,.72); border-color:rgba(240,234,223,.2); background:rgba(240,234,223,.05); }
.wp--dark .card { background:rgba(240,234,223,.05); border-color:rgba(240,234,223,.14); color:var(--codetx); box-shadow:none; }
.wp--dark .card .body { color:rgba(240,234,223,.72); }
.wp--dark .btn--p { background:var(--accd); border-color:var(--accd); color:#fff; }
.wp--dark .btn--p:hover { background:var(--accdd); border-color:var(--accdd); }

/* --- появление по скроллу (стаггер через --rvd, кодекс 6) --- */
/* сдвиг делаем через translate, а не transform: у полароида, стопки листов
   и штампа собственный transform (наклон), transform его бы затирал */
.js .rv { opacity:0; translate:0 20px;
  transition:opacity .72s var(--ease) var(--rvd,0s), translate .72s var(--ease) var(--rvd,0s); }
.js .rv.is-in { opacity:1; translate:0 0; }

/* ===================== 3. БЛОКИ СТРАНИЦЫ ===================== */
/* шапка снята по правке Лиды 03.09 — стили удалены вместе с разметкой */

/* ---------- 3.1 hero A — сплит с терминалом (выбор Лиды 03.09) ---------- */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--acc); margin-right:9px; vertical-align:baseline; animation:wppulse 2.4s var(--ease) infinite; }
@keyframes wppulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.72); } }
.hA .wrap { display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(24px,3.2vw,54px); align-items:center; }
.hA h1 .l1, .hA h2 .l1 { max-width:14ch; margin-top:clamp(12px,1.6vw,20px); }
/* правка Лиды: вторая строка — не капс, а серифный курсив тем же приёмом, что
   «вайб-кодингу» в титуле; кегль выше лид-абзаца, цвет — базовый серый */
/* balance + запас по ширине: иначе на зуме строки рвутся по одному слову
   («сайтов» отдельной строкой) — правка Лиды 04.09 */
.hA h1 .l2, .hA h2 .l2 { max-width:32ch; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.35vw,32px); line-height:1.16; letter-spacing:-.005em; color:var(--dim);
  text-transform:none; text-wrap:balance; }
/* терминал крупнее — правка Лиды 03.09 */
.hA .term__body { font-size:clamp(12.5px,1.14vw,15.5px); padding:clamp(18px,1.9vw,28px); }
.hA .term__bar { padding:13px 18px; }
.hA .lede { margin-top:clamp(16px,2vw,26px); }
/* плашка вместо маркера-подсветки (образец Лиды: светлая карточка, радиус 12) */
.hA .plate { display:inline-block; padding:clamp(9px,1vw,13px) clamp(14px,1.5vw,20px);
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shc); }
/* на десктопе плашка держится в одну строку (правка Лиды) */
@media (min-width:960px){ .hA .plate { white-space:nowrap; } .hA .lede { font-size:clamp(20px,1.72vw,25px); } }
.hA .lead { margin-top:clamp(14px,1.6vw,22px); max-width:44ch; font-weight:500;
  font-size:clamp(16.5px,1.5vw,22px); line-height:1.4; color:var(--dim); }
.hA .lead b { color:var(--ink); font-weight:800; }
.hA .vis { position:relative; }
.hA .stamp { position:absolute; right:-8px; bottom:-34px; z-index:2; }
.hA .hnote { margin-top:clamp(14px,1.8vw,22px); max-width:52ch; }
@media (max-width:959px){ .hA .wrap { grid-template-columns:1fr; } .hA .stamp { right:0; bottom:-24px; } }
/* мобилка: наклейка садится прямо на терминал, в его правый нижний угол */
@media (max-width:639px){
  .hA .stamp { right:12px; bottom:12px; width:clamp(94px,26vw,124px); }
  .hA h1 .l1, .hA h2 .l1 { max-width:none; }
  /* последняя строка лога уходит под наклейку — прячем её, лог остаётся читаемым */
  .hA .term__body p:last-child { padding-right:96px; }
}

/* ---------- 3.2 бонусы — единый билет ---------- */
.bT .ticket { margin:0 auto; }
/* кружок с серифной цифрой — приём бонусов B, переехал в «Что вы унесёте» */
.tag { flex:0 0 auto; width:clamp(46px,4.4vw,62px); aspect-ratio:1; border-radius:50%; background:var(--paper); color:var(--acc);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2vw,28px); }

/* ---------- 3.3 программа B — сетка 2×2 (правка Лиды 03.09) ---------- */
.pB .cols { align-items:stretch; }
.pB .card { display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.8vw,28px); align-content:start; }
.pB .card .n { font-size:clamp(11px,.9vw,13px); letter-spacing:.14em; color:var(--acc); padding-top:4px; }
.pB .card--dark .n { color:#e78a4e; }
/* вертикальная линейка между номером и текстом — приём референса */
.pB .card .txt { padding-left:clamp(14px,1.8vw,28px); border-left:1px solid var(--line); }
.pB .card--dark .txt { border-left-color:rgba(240,234,223,.16); }
.pB .card .body { margin-top:10px; }
.pB .pbtn { margin-top:clamp(22px,2.6vw,36px); display:flex; justify-content:center; }
@media (max-width:639px){ .pB .card { gap:10px; } .pB .card .txt { padding-left:12px; } }

/* ---------- 3.4 спикер — блок референса (правка Лиды 03.09) ---------- */
.sR .wrap { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(24px,3.4vw,64px); align-items:center; }
.sR .ph__frame { position:relative; border-radius:var(--r3); overflow:hidden; box-shadow:var(--shl);
  transform:rotate(-1.6deg); transition:transform .35s var(--ease); }
.sR .ph__frame:hover { transform:rotate(0deg); }
.sR .ph__frame img { width:100%; height:auto; }
.sR .ph__tape { position:absolute; left:clamp(12px,1.4vw,20px); bottom:clamp(12px,1.4vw,20px);
  background:rgba(20,19,15,.86); color:var(--codetx); padding:8px 12px; border-radius:var(--r1);
  font-size:clamp(9.5px,.78vw,11px); letter-spacing:.14em; text-transform:uppercase; line-height:1.6; }
.sR .ph__tape span { color:var(--cd); display:block; }
.sR .ph__tape b { font-weight:500; letter-spacing:.16em; }
.sR .ph__sign { display:flex; align-items:center; gap:14px; margin-top:clamp(14px,1.6vw,22px); }
.sR .ph__sign i { flex:0 0 auto; width:clamp(60px,7vw,110px); height:1px; background:var(--ink); }
.sR .ph__sign span { font-size:clamp(9.5px,.78vw,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); }
.sR .sname { font-weight:800; font-size:clamp(38px,5.6vw,82px); line-height:.98; letter-spacing:-.035em; }
.sR .sname span, .sR .sname em { display:block; }
.sR .sname em { font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.06em; letter-spacing:-.01em; color:var(--acc); }
.sR .regalia { margin-top:clamp(18px,2.2vw,30px); }
.sR .regalia li { position:relative; padding:9px 0 9px clamp(24px,2.2vw,32px);
  font-size:clamp(15px,1.1vw,17px); line-height:1.45; color:var(--dim); }
.sR .regalia li::before { content:"→"; position:absolute; left:0; top:9px; color:var(--acc); font-weight:700; }
.sR .smeta { margin-top:clamp(16px,2vw,26px); padding-top:clamp(14px,1.8vw,22px); border-top:1px solid var(--line); }
.sR .smeta > div { display:grid; grid-template-columns:clamp(96px,10vw,140px) 1fr; gap:clamp(12px,1.6vw,24px); padding:9px 0; }
.sR .smeta dt { font-size:clamp(9.5px,.78vw,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); padding-top:3px; }
.sR .smeta dd { margin:0; font-size:clamp(14px,1.02vw,15.5px); line-height:1.5; color:var(--dim); }
@media (max-width:959px){ .sR .wrap { grid-template-columns:1fr; } .sR .ph { max-width:480px; } }
@media (max-width:639px){ .sR .ph__frame { transform:none; } .sR .smeta > div { grid-template-columns:1fr; gap:4px; } }

/* ---------- 3.5 кому стоит быть C — карточки с ярлыком ---------- */
/* правка Лиды 03.09: ячейки тянутся по высоте ряда — карточка «документы,
   отчёты и письма» догоняет соседний столбец, где под четвёртой карточкой
   стоит оранжевая плашка */
.aC .cols { align-items:stretch; }
.aC .card { padding-top:clamp(14px,1.6vw,22px); }
.aC .stackcell { display:flex; flex-direction:column; gap:clamp(14px,1.8vw,28px); }
/* ярлыки профессий — прямоугольные плашки вместо овалов (правка Лиды) */
.aC .who { display:inline-block; margin-bottom:14px; padding:6px 12px; border-radius:5px; background:var(--accs); color:var(--accdd);
  font-family:var(--mono); font-size:clamp(10px,.8vw,11.5px); letter-spacing:.1em; text-transform:uppercase; }
.aC .card .h { font-weight:800; font-size:clamp(16px,1.36vw,20px); line-height:1.25; letter-spacing:-.02em; margin-bottom:10px; }
.aC .foot { margin:0; padding:clamp(18px,2vw,28px) clamp(18px,2.2vw,30px); border-radius:var(--r3);
  background:var(--accd); color:#fff; font-weight:500; font-size:clamp(15px,1.16vw,17.5px); line-height:1.45;
  box-shadow:0 20px 46px -22px rgba(166,79,36,.55); }
.aC .foot b { font-weight:800; }

/* ---------- 3.6 что унесёте — результаты ровным рядом + билет бонусов ---------- */
.tL .cols { align-items:stretch; }
.tL .card { display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px); }
.tL .ticket { margin:clamp(24px,3vw,48px) auto 0; }
.tL .tbtn { margin-top:clamp(20px,2.4vw,32px); display:flex; justify-content:center; }

/* ---------- 3.7 интенсив — вечера лесенкой + рыжий билет ---------- */
.iL .wrap { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(22px,3vw,54px); align-items:start; margin-top:clamp(22px,2.6vw,36px); }
.iL .evenings { display:grid; gap:clamp(14px,1.8vw,24px); align-content:start; }
.iL .ev .n { font-size:clamp(10.5px,.84vw,12px); letter-spacing:.18em; text-transform:uppercase; color:var(--acc); }
.iL .ev .h { margin-top:10px; font-weight:800; font-size:clamp(15px,1.3vw,19px); line-height:1.3; letter-spacing:-.02em; }
@media (max-width:959px){ .iL .wrap { grid-template-columns:1fr; } }

/* ---------- 3.8 отзывы D — скрин + вычитанная цитата ---------- */
/* правка Лиды 03.09: секция на тёмном (отзывы — про интенсив, продолжают его),
   подписи-цитаты сняты, у скринов ни тени, ни рамки — только сам кадр */
/* две колонки вместо трёх — скрин крупнее и читается без лайтбокса.
   aspect-ratio снят: карточка тянется по высоте самого скрина, поэтому
   белых полей сверху и снизу больше нет (правка Лиды 04.09). */
.rD .grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,30px); align-items:start; }
.rD .item .slot { aspect-ratio:auto; border-radius:var(--r2); cursor:zoom-in; box-shadow:none; border:0; background:none; overflow:hidden; }
@media (max-width:639px){ .rD .grid { grid-template-columns:1fr; } }

/* ---------- 3.9 тарифы A — две карточки, платная тёмная (правка Лиды 03.09) ---------- */
.tname { font-family:var(--mono); font-size:clamp(11px,.88vw,13px); letter-spacing:.18em; text-transform:uppercase; color:var(--acc); }
.tprice { font-family:var(--sans); font-weight:800; font-size:clamp(30px,3.4vw,50px); letter-spacing:-.04em; line-height:1; }
.tlist li { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line); font-size:clamp(15px,1.06vw,16px); line-height:1.45; }
.tlist li:first-child { border-top:0; }
.tlist li .c { flex:0 0 auto; width:19px; height:19px; border-radius:50%; background:var(--accs); color:var(--accd); display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:2px; }
.trA .cols { align-items:stretch; }
.trA .card { display:flex; flex-direction:column; }
.trA .tlist { margin-bottom:clamp(18px,2.2vw,28px); }
/* кнопки обеих карточек на одной базовой линии */
.trA .card .btn { margin-top:auto; }
.trA .card--dark .tname { color:#e78a4e; }
.trA .card--dark .tlist li { border-top-color:rgba(240,234,223,.16); color:rgba(240,234,223,.82); }
.trA .card--dark .tlist li .c { background:rgba(240,234,223,.12); color:#e78a4e; }
.trA .card--dark .btn--o { border-color:rgba(240,234,223,.55); color:var(--codetx); background:transparent; }
.trA .card--dark .btn--o:hover { background:var(--codetx); border-color:var(--codetx); color:var(--code); }

/* ---------- 3.10 финал — композиция hero, билет подарков под ней ---------- */
.fL .ticket { margin:clamp(44px,5vw,80px) auto 0; }

/* ===================== 4. АДАПТИВ ПО ВЫСОТЕ ОКНА =====================
   Ноутбуки 1366×768 и 1536×864: кнопка «УЧАСТВОВАТЬ» в hero не должна
   уходить под сгиб (правка арт-директора, кодекс 2.6). */
@media (min-width:960px) and (max-height:820px) {
  #hero.wp { padding-top:24px; padding-bottom:26px; }
  #hero h1 .l1 { font-size:clamp(34px,3.9vw,52px); margin-top:12px; }
  #hero h1 .l2 { font-size:clamp(17px,1.6vw,22px); }
  #hero .lede { font-size:clamp(17px,1.5vw,22px); margin-top:14px; }
  #hero .lead { font-size:clamp(15.5px,1.3vw,18px); margin-top:12px; }
  #hero .term__body { padding:14px 18px; line-height:1.6; }
  #hero .hnote { margin-top:12px; }
}
@media (min-width:960px) and (max-height:700px) {
  #hero.wp { padding-top:18px; padding-bottom:20px; }
  #hero h1 .l1 { font-size:clamp(30px,3.3vw,44px); margin-top:10px; }
  #hero h1 .l2 { font-size:17px; }
  #hero .lede { font-size:18px; margin-top:11px; }
  #hero .lead { font-size:15.5px; margin-top:10px; }
  #hero .term__bar { padding:8px 14px; }
  #hero .term__body { padding:11px 16px; font-size:11.5px; line-height:1.55; }
  #hero .btn--lg { min-height:52px; }
  #hero .hnote { margin-top:10px; }
}

/* правка 27.09 (копия -r): «Практикум по вайб-кодингу» мельче и в одну строку,
   «Покажем магию Claude Code…» крупнее. Только первый экран, финал не трогаем. */
#hero h1 .l1 { max-width:none; white-space:nowrap; font-size:clamp(24px,2.9vw,42px); }
#hero h1 .l2 { max-width:30ch; font-size:clamp(23px,2.75vw,39px); }
@media (min-width:960px) and (max-height:820px) {
  #hero h1 .l1 { font-size:clamp(24px,2.55vw,36px); }
  #hero h1 .l2 { font-size:clamp(20px,2.2vw,30px); }
}
@media (min-width:960px) and (max-height:700px) {
  #hero h1 .l1 { font-size:clamp(22px,2.3vw,32px); }
  #hero h1 .l2 { font-size:clamp(19px,1.9vw,25px); }
}
@media (max-width:959px) { #hero h1 .l1 { font-size:clamp(24px,5vw,44px); } #hero h1 .l2 { font-size:clamp(23px,3.9vw,34px); } }
@media (max-width:639px) { #hero h1 .l1 { font-size:6.4vw; } #hero h1 .l2 { font-size:clamp(22px,6.4vw,30px); } }

/* ===================== 5. GC-МОДАЛКА И ЛАЙТБОКС =====================
   Виджет GetCourse ломает стилистику блока, поэтому живёт в модалке.
   Прячем через visibility/opacity: при display:none GC грузится с нулевой
   шириной и форма схлопывается (кодекс 6). */
.gcm { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px;
  visibility:hidden; opacity:0; transition:opacity .25s var(--ease), visibility .25s var(--ease); }
.gcm.is-open { visibility:visible; opacity:1; }
.gcm__back { position:absolute; inset:0; background:rgba(20,19,15,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.gcm__win { position:relative; width:min(560px,100%); max-height:min(86vh,760px); overflow:auto; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--shl); padding:clamp(22px,3vw,36px); }
.gcm__x { position:absolute; right:12px; top:12px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; }
.gcm__x:hover { background:var(--ink); color:var(--bg); }
.gcm__body iframe { display:block; width:100%; min-height:520px; border:0; }
.gcm__pane { display:none; width:100%; }
.gcm__pane.is-on { display:block; }
.gcm__stub { text-align:center; padding:12px 0; }
.gcm__stub b { display:block; font-weight:800; font-size:clamp(18px,1.7vw,24px); letter-spacing:-.02em; margin-bottom:12px; }
.gcm__stub p { color:var(--dim); line-height:1.55; }
.gcm__stub a { color:var(--acc); }
.gcm-lock, .gcm-lock body { overflow:hidden; }
@media (max-width:640px) {
  .gcm { padding:10px; }
  .gcm__win { max-height:92vh; padding:14px 8px; }
}

.lb { position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,19,15,.82); visibility:hidden; opacity:0; transition:opacity .25s var(--ease), visibility .25s var(--ease); cursor:zoom-out; }
.lb.is-open { visibility:visible; opacity:1; }
.lb img { max-width:min(1100px,96vw); max-height:92vh; width:auto; border-radius:var(--r2); box-shadow:var(--shl); }

/* ===================== ДОСТУПНОСТЬ ===================== */
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .rv { opacity:1 !important; translate:none !important; }
  .typed { max-width:none; }
}

/* ===================== 6. ПАКЕТЫ shared/blocks (1:1, структуру не трогаем) ===================== */
/* ============================================================
   ZEROCODER ABOUT — стили блока «Кто мы» (сетка доверия)
   Источник: лендинг vibe-market (sites.zerocoder.ru/vibe-market/), июль 2026.
   Самодостаточный: все токены заданы на #about (--zc-*),
   все правила заскоуплены под #about, внешних зависимостей нет.
   Шрифт Manrope наследуется от сайта; если его нет — см. README.
   Брейкпоинты сохранены как в исходном ленде: 1023 / 960 / 639
   (не канон 1199/959/639 — чтобы блок был 1:1 с боевым видом).
   ============================================================ */

#about {
  /* локальные токены блока — не конфликтуют с сайтом-хозяином */
  --zc-bg: #eef3fa;
  --zc-ink: #14171c;
  --zc-ink-soft: #3d4454;
  --zc-blue-deep: #2f6fd8;
  --zc-lime-soft: #d3f36b;
  --zc-ease: cubic-bezier(0.32, 0.72, 0, 1);

  font-family: 'Manrope', Arial, sans-serif;
  color: var(--zc-ink);
  padding: clamp(48px, 5vw, 88px) 0;

  /* собственная подложка — упрощённый фон боевого ленда (голубая база,
     мягкие радиальные пятна, тонкая сетка). Если блок стоит на странице
     с таким же фоном — удали background-color/image/size ниже. */
  background-color: var(--zc-bg);
  background-image:
    radial-gradient(900px 640px at 88% 0%, rgba(77, 163, 255, 0.22), transparent 60%),
    radial-gradient(700px 520px at 2% 55%, rgba(211, 243, 107, 0.16), transparent 60%),
    linear-gradient(rgba(20, 23, 28, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 23, 28, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
}

/* ---------- мини-reset в границах блока ---------- */
#about *, #about *::before, #about *::after { box-sizing: border-box; }
#about h2, #about h3, #about h4, #about p, #about ul, #about b { margin: 0; padding: 0; }
#about img { max-width: 100%; display: block; border: 0; }
#about mark {
  background: linear-gradient(transparent 55%, var(--zc-lime-soft) 55%, var(--zc-lime-soft) 94%, transparent 94%);
  color: inherit;
}

#about .container { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 20px; }

/* ---------- стекло ---------- */
#about .gl {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(47, 123, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#about .gl::after {
  content: ''; position: absolute; top: 0; left: 8%; right: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
  pointer-events: none;
}

/* ---------- заголовок секции и плашка ---------- */
#about h2 {
  font-size: 42px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800;
  max-width: 1020px; margin-bottom: clamp(24px, 2.6vw, 40px); text-wrap: balance;
}
#about .plate {
  display: inline-block; padding: 0 16px 4px; margin: 2px 4px; border-radius: 10px;
  color: #fff;
  box-shadow: 0 12px 28px rgba(47, 123, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: rotate(-1.2deg);
  /* дыхание + бегущий блик — как в боевом ленде */
  background-image:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%),
    linear-gradient(135deg, #2f7bff, #5aa9ff);
  background-size: 240% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 220% 0, 0 0;
  animation: zc-plate-breath 3.2s ease-in-out infinite, zc-plate-shine 3.2s ease-in-out infinite;
}
@keyframes zc-plate-breath {
  0%, 100% { box-shadow: 0 12px 28px rgba(47, 123, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
  50% { box-shadow: 0 14px 40px rgba(47, 123, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}
@keyframes zc-plate-shine {
  0%, 55% { background-position: 220% 0, 0 0; }
  90%, 100% { background-position: -140% 0, 0 0; }
}

/* ---------- подзаголовки разделов ---------- */
#about .about-sub {
  font-size: 42px; line-height: 1.1; font-weight: 800;
  letter-spacing: -0.02em; margin: 84px 0 28px;
}

/* ---------- бенто «лидеры + статы» ---------- */
#about .about-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#about .about-bento--2 { margin-top: 20px; }
#about .ab-card { padding: 20px; }
#about .ab-card h3, #about .research h3, #about .gov-card h3 {
  font-size: 23px; font-weight: 800; line-height: 1.25;
  letter-spacing: -0.01em; margin-bottom: 16px;
}
#about .ab-card img { border-radius: 12px; }
#about .about-stack { display: flex; flex-direction: column; gap: 20px; }
#about .stat-card { padding: 24px 26px; flex: 1; display: flex; align-items: center; gap: clamp(16px, 1.6vw, 24px); }
#about .stat-card__img {
  flex: 0 0 auto; width: clamp(72px, 6.5vw, 96px); aspect-ratio: 1; border-radius: 16px;
  background: rgba(211, 243, 107, 0.4); border: 1px solid rgba(125, 160, 30, 0.3); padding: 6px;
}
#about .stat-card__img img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
#about .stat-card h4 { font-size: 18px; font-weight: 800; line-height: 1.4; }

/* ---------- вузы, лицензия, Сколково ---------- */
#about .logo-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
#about .logo-tiles .tile { aspect-ratio: 255 / 193; }
#about .tile {
  background: #f2f6ff; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 1);
}
#about .tile img { width: 100%; height: 100%; object-fit: cover; }
#about .sk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
#about .sk-head img { height: 44px; }
#about .sk-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#about .sk-docs img { width: 100%; border-radius: 10px; cursor: zoom-in; }

/* ---------- исследование ---------- */
#about .research { display: grid; grid-template-columns: 380px 1fr; gap: 26px; padding: 26px; align-items: start; }
#about .research img { border-radius: 14px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#about .research h3 { color: var(--zc-blue-deep); }
#about .research p { font-size: 14.5px; line-height: 1.65; color: var(--zc-ink-soft); }

/* ---------- бизнес-логотипы ---------- */
#about .biz-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 19px; }
#about .biz-grid .tile { height: 80px; }

/* ---------- гос.служащие + карусель фото ---------- */
#about .gov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
#about .gov-left { display: flex; flex-direction: column; gap: 20px; }
#about .gov-card { padding: 26px; flex: 1; }
#about .gov-card p { font-size: 15px; line-height: 1.55; color: var(--zc-ink-soft); margin-bottom: 10px; }
#about .gov-card ul { padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--zc-ink-soft); }
#about .gov-card .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
#about .carousel { position: relative; border-radius: 24px; overflow: hidden; min-height: 300px; padding: 0; }
#about .carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
#about .carousel img.on { opacity: 1; }
#about .car-btn {
  position: absolute; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(13, 18, 28, 0.7); color: #fff; font-size: 17px; cursor: pointer; z-index: 2;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: inherit; padding: 0;
}
#about .car-btn.prev { right: 66px; }
#about .car-btn.next { right: 14px; }

/* ---------- пресса, награды, рейтинги ---------- */
#about .pub-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 19px; }
#about .pub-grid .tile { height: 110px; }
#about .awards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
#about .awards-grid img {
  width: 100%; aspect-ratio: 275 / 150; object-fit: cover; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 1); background: #fff;
}
#about .rates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#about .rate-card { padding: 18px 20px; display: grid; gap: 6px; justify-items: start; background: #f2f6ff; }
#about .rate-card img { max-height: 32px; object-fit: contain; }
#about .rate-card b { font-size: 21px; }
#about .rate-card span { font-size: 14px; color: var(--zc-ink-soft); }

/* ---------- лайтбокс лицензий (элемент создаёт about.js) ---------- */
#about .lightbox {
  position: fixed; inset: 0; z-index: 1300; background: rgba(4, 8, 16, 0.8);
  display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
}
#about .lightbox.on { display: flex; }
#about .lightbox img { max-height: 92vh; max-width: 92vw; border-radius: 10px; }

/* ============================================================
   АДАПТИВ (брейкпоинты исходного ленда)
   ============================================================ */
@media (max-width: 1023px) {
  #about h2 { font-size: 34px; }
  #about .about-sub { font-size: 32px; margin: 64px 0 22px; }
}
@media (max-width: 960px) {
  #about .about-bento, #about .about-bento--2, #about .gov-grid { grid-template-columns: minmax(0, 1fr); }
  #about .research { grid-template-columns: minmax(0, 1fr); }
  #about .biz-grid { grid-template-columns: repeat(4, 1fr); }
  #about .pub-grid { grid-template-columns: repeat(3, 1fr); }
  #about .awards-grid { grid-template-columns: repeat(4, 1fr); }
  #about .rates-grid { grid-template-columns: repeat(2, 1fr); }
  #about .carousel { min-height: 240px; }
  #about .plate { border-radius: 7px; padding: 0 10px 3px; }
}
@media (max-width: 639px) {
  #about h2 { font-size: 27px; }
  #about .about-sub { font-size: 26px; margin: 52px 0 18px; }
  #about .ab-card h3, #about .research h3, #about .gov-card h3 { font-size: 20px; }
  #about .sk-head { flex-direction: column; }
  #about .biz-grid { grid-template-columns: repeat(2, 1fr); }
  #about .pub-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   HOVER-МИКРОАНИМАЦИИ — стекло приподнимается, слот картинки
   «кивает», логотипы подъезжают. Только устройства с курсором
   и без prefers-reduced-motion (как в боевом ленде).
   ============================================================ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #about .stat-card, #about .ab-card, #about .gov-card, #about .rate-card {
    transition: transform 0.45s var(--zc-ease), box-shadow 0.45s var(--zc-ease), border-color 0.45s var(--zc-ease);
  }
  #about .stat-card:hover, #about .ab-card:hover, #about .gov-card:hover, #about .rate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(47, 123, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  #about .stat-card__img { transition: transform 0.45s var(--zc-ease); }
  #about .stat-card:hover .stat-card__img { transform: scale(1.07) rotate(-3deg); }

  #about .logo-tiles .tile, #about .biz-grid .tile, #about .pub-grid .tile { overflow: hidden; }
  #about .logo-tiles .tile img, #about .biz-grid .tile img, #about .pub-grid .tile img {
    transition: transform 0.5s var(--zc-ease);
  }
  #about .logo-tiles .tile:hover img, #about .biz-grid .tile:hover img, #about .pub-grid .tile:hover img {
    transform: scale(1.06);
  }
  #about .awards-grid img { transition: transform 0.5s var(--zc-ease), box-shadow 0.5s var(--zc-ease); }
  #about .awards-grid img:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(47, 123, 255, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  #about .plate { animation: none; }
  #about .carousel img { transition: none; }
}
/* ==========================================================
   Zerocoder Glossary — стандартный блок «Глоссарий терминов»
   Канон снят с боевых лендов vibe-market и agents-efir
   (одинаковая структура: один свёрнутый <details> + <dl> в две колонки).
   Под стилистику сайта меняются ТОЛЬКО токены ниже.
   Структуру, классы и формулировку summary менять нельзя.
   ========================================================== */

.acc--glossary {
  /* --- токены блока: переопредели под свой сайт --- */
  --gl-card: rgba(255, 255, 255, 0.55);      /* фон блока */
  --gl-border: 1px solid rgba(255, 255, 255, 0.9);
  --gl-blur: blur(16px);                     /* стекло; none — если стекла в стилистике нет */
  --gl-shadow: 0 24px 60px rgba(47, 123, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --gl-radius: 20px;
  --gl-line: rgba(20, 23, 28, 0.1);          /* разделители терминов */
  --gl-text: #14171c;                        /* summary */
  --gl-term: #1d42ea;                        /* термин (dt) */
  --gl-def: rgba(20, 23, 28, 0.68);          /* определение (dd) */
  --gl-plus: #1d42ea;                        /* плюс-индикатор */
  --gl-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gl-font-term: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gl-ease: cubic-bezier(0.22, 1, 0.36, 1);

  border-radius: var(--gl-radius);
  overflow: hidden;
  background: var(--gl-card);
  border: var(--gl-border);
  box-shadow: var(--gl-shadow);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  font-family: var(--gl-font);
}

.acc--glossary summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 30px;
  min-height: 44px;                          /* тач-мишень */
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gl-text);
  position: relative;
}
.acc--glossary summary::-webkit-details-marker { display: none; }
.acc--glossary summary::marker { content: ""; }
.acc--glossary summary:focus-visible { outline: 2px solid var(--gl-plus); outline-offset: -2px; }

.acc--glossary summary::after {
  content: '+';
  position: absolute;
  right: 30px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--gl-font-term);
  font-size: 26px;
  line-height: 1;
  color: var(--gl-plus);
  transition: rotate 0.3s var(--gl-ease);
}
.acc--glossary[open] summary::after { rotate: 45deg; }

.glossary__terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  padding: 6px 30px 26px;
  margin: 0;
}
.glossary__term {
  padding: 16px 0;
  border-top: 1px solid var(--gl-line);
}
.glossary__term dt {
  font-family: var(--gl-font-term);
  font-weight: 700;
  font-size: 18px;
  color: var(--gl-term);
  margin-bottom: 6px;
}
.glossary__term dd {
  font-size: 16px;
  line-height: 1.55;
  color: var(--gl-def);
  margin: 0;
}

/* --- адаптив: канон Zerocoder 1199 / 959 / 639 / 374 --- */
@media (max-width: 959px) {
  .glossary__terms { gap: 0 28px; padding: 6px 24px 24px; }
  .acc--glossary summary { padding: 22px 24px; font-size: 21px; }
  .acc--glossary summary::after { right: 24px; }
}
@media (max-width: 639px) {
  .acc--glossary summary { font-size: 19px; padding: 18px; padding-right: 52px; }
  .acc--glossary summary::after { right: 18px; font-size: 24px; }
  .glossary__terms { grid-template-columns: 1fr; padding: 2px 18px 20px; }
  .glossary__term dt { font-size: 16.5px; }
  .glossary__term dd { font-size: 15px; }
}
@media (max-width: 374px) {
  .acc--glossary summary { font-size: 17.5px; padding: 16px; padding-right: 48px; }
  .glossary__terms { padding: 2px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .acc--glossary summary::after { transition: none; }
}
/* ============================================================
   ZEROCODER FOOTER — стили переиспользуемого подвала
   Источник: лендинг Neuroclub (sites.zerocoder.ru/neuroclub/)
   Самодостаточный: все токены заданы на .footer, внешних
   зависимостей нет. Шрифт Manrope наследуется от сайта;
   если его нет — см. README (Google Fonts).
   Брейкпоинты Tilda: 4 колонки → 2 (≤959) → 1 (≤639).
   ============================================================ */

.footer {
  /* локальные токены блока — не конфликтуют с сайтом-хозяином */
  --zc-space-3: 12px;
  --zc-space-4: 16px;
  --zc-space-5: 24px;
  --zc-space-6: 32px;
  --zc-space-7: 48px;
  --zc-space-8: 64px;
  --zc-space-9: 96px;
  --zc-accent: #97e017;
  --zc-easing: cubic-bezier(0.22, 1, 0.36, 1);

  background: #1a2438;
  color: rgba(255, 255, 255, 0.7);
  padding: var(--zc-space-9) 0 var(--zc-space-6);
  font-size: 15px;
  font-family: 'Manrope', Arial, sans-serif;
}

.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--zc-space-8);
  padding-bottom: var(--zc-space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--zc-space-5);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer__logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 220px;
}

.footer__address {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.footer__badges {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  width: fit-content;
}

.footer__badge-img {
  display: block;
  height: 44px;
  width: auto;
}

.footer__badge-img--rk { height: 48px; }
.footer__badge-img--sk { height: 36px; }

.footer__col {
  font-size: 15px;
}

.footer__col h4 {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 var(--zc-space-4);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--zc-space-3);
}

.footer__col a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s var(--zc-easing);
}

.footer__col a:hover {
  color: var(--zc-accent);
}

.footer__col--contacts {
  display: flex;
  flex-direction: column;
  gap: var(--zc-space-5);
}

.footer__contact-block h4 {
  margin-bottom: 4px;
}

.footer__contact-value {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.2s;
}

.footer__contact-value:hover {
  color: var(--zc-accent);
}

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.footer__social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--zc-easing), box-shadow 0.2s;
}

.footer__social--tg { background: #2aabee; }
.footer__social--wa { background: #25d366; }
.footer__social--yt { background: #ff0000; }
/* MAX — готовый брендовый бейдж (svg с вшитым градиентом), скругляем под круги */
.footer__social--max { overflow: hidden; }

.footer__social-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.footer__social:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
}

.footer__social svg {
  width: 22px;
  height: 22px;
}

.footer__bottom {
  padding-top: var(--zc-space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--zc-space-5);
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.footer__copy {
  letter-spacing: 0.01em;
}

.footer__legal {
  display: flex;
  gap: var(--zc-space-7);
  flex-wrap: wrap;
}

/* Horizontal tablet и меньше — 2 колонки */
@media (max-width: 959px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--zc-space-6);
  }
}

/* Mobile — 1 колонка */
@media (max-width: 639px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

/* ===================== 7. ПЕРЕКРАСКА ПАКЕТОВ ПОД ТЁПЛУЮ БУМАГУ =====================
   Кодекс 2.11: структура стандартных блоков не трогается, меняются только
   цвета/шрифты/радиусы. */
#about {
  --zc-bg:#f9f0dd; --zc-ink:#14130f; --zc-ink-soft:#5e5a4f;
  --zc-blue-deep:#cc6b3a; --zc-lime-soft:#f5d3bc;
  background-color:transparent;
  background-image:none;
  font-family:'Manrope',system-ui,Arial,sans-serif;
  padding:var(--sec-y) 0;
}
#about .container { max-width:1200px; padding-left:var(--pad-l); padding-right:var(--pad-r); }
#about h2, #about .about-sub { font-family:'Manrope',system-ui,sans-serif; font-weight:700; letter-spacing:-.025em; }
#about h2 em, #about .about-sub em { font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; }
#about .gl {
  background:#ffffff;
  border:1px solid #ddd4be;
  border-radius:22px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 1px 0 rgba(20,19,15,.06), 0 18px 40px -22px rgba(20,19,15,.2);
}
#about .gl::after { display:none; }
/* правка Лиды 03.09: заголовок «Кто мы» приведён к общему h2 страницы,
   а подложки под акцентными словами заменены рыжим серифным курсивом */
/* заголовок собирается в две строки (правка Лиды 05.09): ширина отпущена
   почти на всю колонку, balance держит строки ровными */
#about h2 { font-size:clamp(28px,4.2vw,56px); line-height:1.05; letter-spacing:-.025em; font-weight:700; max-width:1140px; text-wrap:balance; }
#about .plate, #about mark {
  display:inline; padding:0; margin:0; border-radius:0; background:none; background-image:none; box-shadow:none;
  animation:none; transform:none; color:var(--acc);
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; font-size:1.05em; }
#about .tile, #about .rate-card, #about .stat-card__img { background:#f3e7cc; border:1px solid #ddd4be; border-radius:14px; }
#about .awards-grid img { background:#fff; border:1px solid #ddd4be; border-radius:14px; }
#about .ab-card img, #about .sk-docs img, #about .research img, #about .carousel { border-radius:14px; }
#about .car-btn { border-radius:999px; background:#14130f; backdrop-filter:none; -webkit-backdrop-filter:none; }

#glossary { padding:var(--sec-y) 0; }
#glossary .container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--pad-x); padding-left:var(--pad-l); padding-right:var(--pad-r); }
#glossary .acc--glossary {
  --gl-card:#ffffff;
  --gl-border:1px solid #ddd4be;
  --gl-blur:none;
  --gl-shadow:0 1px 0 rgba(20,19,15,.06), 0 18px 40px -22px rgba(20,19,15,.2);
  --gl-radius:22px;
  --gl-line:rgba(20,19,15,.12);
  --gl-text:#14130f;
  --gl-term:#a64f24;
  --gl-def:#5e5a4f;
  --gl-plus:#cc6b3a;
  --gl-font:'Manrope',system-ui,Arial,sans-serif;
  --gl-font-term:'JetBrains Mono',ui-monospace,monospace;
}
#glossary .acc--glossary summary { font-family:'Manrope',system-ui,sans-serif; font-weight:700; letter-spacing:-.02em; }

/* футер — тот же тёмный, что у терминала, акцент терракотовый */
.footer { position:relative; z-index:1; background:#1a1916; --zc-accent:#cc6b3a; }
/* 320px: гос-блок пакета «Кто мы?» распирал страницу на 2px — грид-элементам
   нужен min-width:0, иначе трек считается по min-content картинок */
#about .gov-grid > *, #about .gov-left, #about .gov-left > *, #about .carousel { min-width:0; }
/* та же страховка для бенто «Кто мы?»: на ≤960 трек считался по min-content
   карточек и карточки выезжали за правый край на 320–335px */
#about .about-bento > *, #about .about-stack, #about .about-stack > * { min-width:0; }

/* hover-тени пакета «Кто мы?» заданы в синеве исходного ленда — переводим
   в чернила тёплой бумаги (перебиваем правила из hover-блока пакета) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #about .stat-card:hover, #about .ab-card:hover, #about .gov-card:hover, #about .rate-card:hover {
    box-shadow:0 30px 70px -26px rgba(20,19,15,.28), inset 0 1px 0 rgba(255,255,255,.9);
  }
  #about .awards-grid img:hover { box-shadow:0 18px 40px -18px rgba(20,19,15,.24); }
}

/* тач-мишени: карусель гос-блока 42 → 44px (кодекс 2.7) */
#about .car-btn { width:44px; height:44px; }
#about .car-btn.prev { right:70px; }

/* тач-мишени футера пакета: структура не меняется, растёт только зона нажатия.
   Ссылки колонок тайлятся ровно по шагу списка (21 → 33px) — брать полные 44px
   нельзя, соседние зоны начали бы перекрываться и ловить чужие тапы. */
.footer__col a { display:block; padding:6px 0; margin:-6px 0; }
.footer__contact-value { padding:4px 0; margin:-4px 0; }
.footer__logo { padding:4px 0; margin:-4px 0; }