/* ---------- Roboto Flex, локально. Оси wght 100–1000 и wdth 25–151 ---------- */
@font-face{
  font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-stretch:25% 151%;font-display:swap;
  src:url("../assets/fonts/RobotoFlex-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-stretch:25% 151%;font-display:swap;
  src:url("../assets/fonts/RobotoFlex-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
  font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-stretch:25% 151%;font-display:swap;
  src:url("../assets/fonts/RobotoFlex-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-stretch:25% 151%;font-display:swap;
  src:url("../assets/fonts/RobotoFlex-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Unbounded, локально. Одна ось wght 200–900 ----------
   Заголовок первого экрана набран только им; Roboto Flex в h1 больше не участвует. */
@font-face{
  font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("../assets/fonts/Unbounded.ttf") format("truetype");
}

:root{
  --paper:#FAFAF8; --ink:#101317; --muted:#8B8E93; --rule:#E2E2DE;
  --sub0:#161F3E; --sub1:#070B1B;
  /* тихий: приглушённый даёт на бумаге только 3,15:1 и мелкий текст не вытягивает.
     Утверждённый --muted остаётся как есть — он для линий и стрелок, не для подписей. */
  --quiet:#6B7076;
  --gut:clamp(20px,3.2vw,48px);
  --hdr:108px;   /* высота шапки: от неё пляшут верхние отступы сцен */
  /* колонка контента на десктопе: НЕ max-width на секции с фоном (это
     ломает полноширинные плашки/фоны), а padding-inline на контейнере
     контента внутри неё — фон/плашка остаются во всю ширину родителя,
     читаемая колонка держится max(--gutter, центровка до --cap). --cap
     переопределяется локально, где нужна другая ширина. Видно только
     от 1000px — на мобильном как было, через --gut. */
  --gutter:clamp(48px,7vw,140px);
  --cap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;
  /* системной полосы нет совсем: ни жёлоба, ни ползунка. Вместо неё справа
     ездит собственная засечка — тот же язык, что у размерной линейки в шапке */
  scrollbar-width:none}
@media(min-width:1000px){
  /* единая база масштаба: весь rem-текст на десктопе растёт от неё,
     16px на 1000px вьюпорте до 20px на ~1838px и шире — пропорционально,
     без отдельного clamp в каждом блоке. Мобильный шрифт (px, не rem)
     этой базы не касается — как в эталоне daaa5e5. */
  html{font-size:clamp(16px,.55vw + 10px,20px)}
}
::-webkit-scrollbar{width:0;height:0;display:none}
/* засечка прокрутки: показывается на движении и тает в покое.
   difference — чтобы она читалась и на бумаге, и на синем листе, и на дыму */
.scrollMark{position:fixed;right:7px;top:0;width:2px;height:34px;border-radius:2px;
  background:#fff;mix-blend-mode:difference;opacity:0;z-index:55;pointer-events:none;
  transition:opacity .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
.scrollMark.on{opacity:.55}
@media(prefers-reduced-motion:reduce){.scrollMark{transition:none}}
body{background:var(--paper);color:var(--ink);font-family:"Roboto Flex",system-ui,sans-serif;font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;line-height:1.35;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}

/* ---------- загрузка ----------
   Фон — тот же дым, что и на сайте, с плотностью 1: он и есть «лёгкое
   воздушное облако». Поэтому у слоя загрузки своего фона нет, он прозрачный,
   а содержимое страницы под ним придержано классом booting. */
.boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:transparent;pointer-events:none;
  transition:opacity .55s cubic-bezier(.3,.7,.2,1),visibility 0s .55s}
.boot.off{opacity:0;visibility:hidden}
html.booting .hdr,html.booting .scene,html.booting .sheet{opacity:0}
.hdr,.scene,.sheet{transition:opacity .55s cubic-bezier(.3,.7,.2,1)}
.bootIn{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,34px);
  transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .4s}
.boot.off .bootIn{transform:translateY(-8px);opacity:0}
.bootLogo{height:clamp(24px,2.8vw,36px);width:auto;
  opacity:0;animation:bootUp .6s .08s cubic-bezier(.2,.7,.2,1) forwards}
.bootNum{color:var(--ink);font-size:clamp(30px,3.8vw,52px);letter-spacing:-.03em;line-height:1;
  font-variation-settings:"wdth" 116,"wght" 750;font-variant-numeric:tabular-nums;
  opacity:0;animation:bootUp .7s .14s cubic-bezier(.2,.7,.2,1) forwards}
.bootNum::after{content:"%";font-size:.44em;vertical-align:.9em;margin-left:.1em;opacity:.5}
@keyframes bootUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bootLogo,.bootNum{animation:none;opacity:1}
  .boot,.hdr,.scene,.sheet{transition:opacity .2s}
}

/* ---------- grain, единое зерно ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* на телефоне второе зерно поверх дыма читалось рябью: у шейдера своё,
   плёночное, его достаточно */
@media(max-width:820px){.grain{display:none}}

/* ---------- шапка ----------
   Меню разнесено по размерной линейке: тонкая линия во всю ширину, засечки
   над пунктами. Та же графика, что у бургера и подписей чертежа. Логотип
   и «Написать» стоят строкой выше, поэтому верх дышит. */
/* Два состояния шапки.
   1. У самого верха — прозрачная, без линейки: логотип лежит прямо на дыму,
      поэтому здесь и нужен multiply.
   2. Ниже 24 px — матовое стекло с линейкой снизу. Вместе с подложкой
      снимается multiply: в режиме умножения бумажный фон не закрывает ничего,
      и заголовки листов просвечивали сквозь шапку. */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;mix-blend-mode:multiply;
  padding:calc(20px + env(safe-area-inset-top,0px)) var(--gut) 0;
  display:grid;grid-template-columns:auto 1fr auto;column-gap:26px;align-items:center;
  background:transparent;transition:padding .3s}
.hdr.solid{mix-blend-mode:normal}
/* Подложка — отдельным слоем, чтобы её нижний край растворялся: и бумага,
   и само размытие сходят на нет по маске. Никакой линейки снизу — граница
   шапки должна таять, а не отрезать контент. */
/* хвост длинный и многоступенчатый: на тёмной карточке короткий сход читался
   как белая полоса поперёк экрана. Плотная зона держится только под логотипом,
   дальше и бумага, и размытие тают до нуля на протяжении 40 px */
.hdr::before{content:"";position:absolute;inset:0 0 -40px 0;pointer-events:none;opacity:0;
  transition:opacity .3s;
  background:linear-gradient(180deg,
    rgba(250,250,248,.88) 0%,rgba(250,250,248,.84) 42%,rgba(250,250,248,.62) 62%,
    rgba(250,250,248,.34) 78%,rgba(250,250,248,.12) 90%,rgba(250,250,248,0) 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.7) 62%,
    rgba(0,0,0,.38) 78%,rgba(0,0,0,.12) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.7) 62%,
    rgba(0,0,0,.38) 78%,rgba(0,0,0,.12) 90%,transparent 100%)}
.hdr.solid::before{opacity:1}
.hdr .logo{height:34px;width:auto;grid-column:1;grid-row:1;position:relative}
.write{grid-column:3;grid-row:1;position:relative}
.hdr nav{position:relative;grid-column:1/-1;grid-row:2;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--ink);display:flex;justify-content:space-between;
  font-size:clamp(15px,1.15vw,19px);letter-spacing:-.005em;
  font-variation-settings:"wdth" 112,"wght" 600}
/* пункт как отметка на размерной линии: номер сверху, засечка на самой линии */
.hdr nav a{position:relative;display:flex;align-items:baseline;gap:8px;
  padding-top:2px;transition:opacity .25s,gap .25s cubic-bezier(.2,.7,.2,1)}
.hdr nav a i{font-style:normal;font-size:.62em;letter-spacing:.06em;opacity:.42;
  font-variation-settings:"wdth" 104,"wght" 500;transition:opacity .25s}
.hdr nav a::before{content:"";position:absolute;left:0;top:-14px;width:1px;height:9px;
  background:var(--ink);opacity:.5;transition:height .25s cubic-bezier(.2,.7,.2,1),opacity .25s}
.hdr nav a:last-child::before{left:auto;right:0}
.hdr nav a:hover{gap:12px}
.hdr nav a:hover i{opacity:1}
.hdr nav a:hover::before{height:15px;opacity:1}
/* «Написать» — единственная точка контакта выше 90 % страницы.
   Подчёркивание чернилами, без плашки: шапка идёт на multiply. */
.write{font-size:clamp(15px,1.15vw,19px);letter-spacing:-.005em;font-variation-settings:"wdth" 112,"wght" 700;
  padding:3px 0 4px;border-bottom:1.5px solid var(--ink);white-space:nowrap;transition:opacity .25s}
.write:hover{opacity:.6}
@media(max-width:820px){.hdr nav{display:none}.hdr .logo{height:28px}
  .hdr .write{display:none}.hdr{padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px}
  :root{--hdr:62px}}

/* ---------- шапка-капсула (десктоп, от 1000px) ----------
   На десктопе прежняя двухстрочная прозрачная шапка и фейд-подложка
   (.solid/.hdr::before — история телефона, где капсуле нет места) заменены
   капсулой целиком и всегда, с самого верха — не дожидаясь скролла: одна
   строка, логотип слева, меню по центру, «Написать» справа, стекло.
   1280px — тот же контейнер, что даёт 80px отступа на 1440; на узких
   экранах не упирается в край благодаря max() с --gut. */
@media(min-width:1000px){
  .hdr{mix-blend-mode:normal;top:20px;
    left:max(var(--gut),calc((100% - 1280px)/2));right:max(var(--gut),calc((100% - 1280px)/2));
    bottom:auto;height:72px;padding:0 12px 0 32px;border-radius:999px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:rgba(246,247,250,.74);
    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 1px 2px rgba(16,19,43,.06),0 14px 36px rgba(16,19,43,.14);
    transition:background-color .28s,box-shadow .28s,border-color .28s}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .hdr{background:rgba(246,247,250,.96)}
  }
  .hdr::before{display:none}
  .hdr .logo{height:20px}
  .hdr nav{position:static;margin:0;padding:0;border:0;flex:1;justify-content:center;gap:clamp(28px,2.6vw,44px)}
  .hdr nav a::before{display:none}
  .hdr nav a{padding:8px 16px;border-radius:999px;transition:background-color .25s,opacity .25s,gap .25s}
  .hdr nav a[aria-current="page"]{background:rgba(16,19,43,.08)}
  .write{border-bottom:0;height:48px;padding:0 20px;display:inline-flex;align-items:center;
    border-radius:999px;background:var(--ink);color:var(--paper)}
  .write:hover{opacity:.85}
  /* контент первого экрана и верхние отступы сцен пляшут от --hdr — сдвигаем
     его под новую, более низкую капсулу (92px до её нижнего края + воздух) */
  :root{--hdr:120px}
}

/* ---------- меню на телефоне: бумажный лист ---------- */
/* Кнопка — не три равные полоски, а три размерные линии разной длины,
   как на чертеже. Раскрытая — те же линии сходятся в крест. */
.burger{display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;
  width:48px;height:48px;margin:-10px 0 -10px -10px;padding:0 10px;background:none;border:0;cursor:pointer;
  z-index:71;position:relative}
.burger i{display:block;height:2px;background:var(--ink);transition:width .3s cubic-bezier(.2,.7,.2,1),
  transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.burger i:nth-child(1){width:28px}
.burger i:nth-child(2){width:19px}
.burger i:nth-child(3){width:24px}
.burger[aria-expanded="true"] i{width:28px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.menu{position:fixed;inset:0 0 auto 0;background:var(--paper);
  z-index:40;   /* ниже шапки (50): логотип и крестик остаются видны поверх листа */
  border-radius:0 0 28px 28px;box-shadow:0 40px 90px -30px rgba(7,11,27,.35);
  padding:96px var(--gut) 32px;display:flex;flex-direction:column;
  transform:translateY(-100%);transition:transform .52s cubic-bezier(.2,.7,.2,1)}
.menu[hidden]{display:none}   /* иначе display:flex правила перебивает атрибут */
.menu.on{transform:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font-size:clamp(30px,8.4vw,46px);letter-spacing:-.03em;line-height:1;
  font-variation-settings:"wdth" 116,"wght" 750;padding:.16em 0;
  border-bottom:1px solid var(--rule);opacity:0;transform:translateY(14px)}
.menu.on nav a{opacity:1;transform:none;transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
.menu.on nav a:nth-child(1){transition-delay:.10s}.menu.on nav a:nth-child(2){transition-delay:.15s}
.menu.on nav a:nth-child(3){transition-delay:.20s}.menu.on nav a:nth-child(4){transition-delay:.25s}
.mcont{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
  opacity:0;transition:opacity .4s .34s}
.menu.on .mcont{opacity:1}
.mcont span{width:100%;font-size:11px;color:var(--quiet);letter-spacing:.08em;text-transform:uppercase}
.mcont a{font-size:19px;letter-spacing:-.02em;font-variation-settings:"wdth" 112,"wght" 650;
  border-bottom:1.5px solid var(--ink);padding-bottom:2px}
/* переключение здесь, после базового .burger{display:none} — иначе оно перебивает.
   На телефоне бургер слева, логотип справа: большой палец достаёт меню
   с того же края, откуда читается строка. Зона нажатия 48 px. */
@media(max-width:820px){
  .burger{display:flex;grid-column:1;grid-row:1;justify-self:start}
  .hdr>a[href="#top"]{grid-column:3;grid-row:1;justify-self:end;position:relative}
  /* Внутренние страницы: там правый угол занят крестиком, в него логотип
     не уходит. Ставим его ровно по центру экрана — ссылка ведёт не на «#top»,
     а на «index.html#top», поэтому правило выше её и не ловило, и логотип
     вставал в свободную колонку рядом с бургером. Полоса на всю ширину
     с justify-self:center даёт одинаковое расстояние до обоих краёв: поля
     шапки слева и справа равны (--gut). */
  .hdr>a[href$="index.html#top"]{grid-column:1/-1;grid-row:1;justify-self:center;
    position:relative}
}
@media(prefers-reduced-motion:reduce){.menu,.menu nav a,.burger i{transition:none}}

/* ---------- сцены (sticky) ---------- */
.scene{position:relative}
.scene .pin{position:sticky;top:0;height:100vh;overflow:hidden}
.layer{position:absolute;inset:0}
.layer img,.layer canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#dissolve{width:100%;height:100%}
#build{width:100%;height:100%}
/* синяя вуаль: тонирует дым «субстанцией», не закрывая его —
   умножение сохраняет структуру дыма, меняя только цвет */
.veil{background:linear-gradient(160deg,var(--sub0),var(--sub1));mix-blend-mode:multiply;
  opacity:0;pointer-events:none}
.frame{will-change:transform,opacity}

/* --- 0–2: дым → чертёж → фото --- */
#s0{height:640vh}
#smoke{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
/* коробка стоит на нижней кромке экрана, а не по центру: основание здания
   садится у нижнего края с отступом 4vh. Внутри кадра под плитой есть свой
   запас, поэтому из 4vh он и вычитается */
#bp{position:absolute;left:50%;top:auto;bottom:calc(4vh - 17px);width:max(100vw,177.7vh);aspect-ratio:16/9;transform-origin:50% 100%;
  transform:translate(-50%,0) scale(.22);opacity:0}
#bp svg{width:100%;height:100%}
/* лента готова — SVG-чертёж прячется, но коробка #bp остаётся:
   именно она задаёт положение и рост кадров */
html.lenta #bp svg{visibility:hidden}
/* вертикальный экран: коробка ровно во всю ширину и в пропорции кадра 1600×1288.
   Кадр вписывается в неё целиком — основание здания упирается в края экрана,
   а по бокам самого дома остаётся воздух. Коробка стоит ниже середины,
   над ней читается вторая строка. Растёт от основания, как и на десктопе. */
@media(max-aspect-ratio:1/1){
  #bp{width:100vw;aspect-ratio:1600/1288;top:auto;bottom:calc(4vh - 14px)}
}
/* текст первого экрана выключен по центру — одной осью с логотипом и чертежом.
   max-width без margin-inline:auto прижал бы блок влево, поэтому он здесь обязателен */
.line1,.line2{position:absolute;left:var(--gut);right:var(--gut);text-align:center;margin-inline:auto;line-height:.98;letter-spacing:-.035em;
  font-variation-settings:"wdth" 118,"wght" 800}
/* заголовок: Unbounded, две строки по центру экрана — тяжёлый капс и лёгкая
   разрядка под ним. Боковые поля 44 px; без автопереноса, иначе «AI-»
   отрывается по дефису. Строки — блоки, <br> между ними убран: он добавлял
   пустую строку и раздувал зазор до 37 px вместо 6 */
.line1{top:50%;transform:translateY(-50%);left:44px;right:44px;max-width:none;white-space:nowrap;
  font-family:"Unbounded",system-ui,sans-serif;letter-spacing:normal;font-variation-settings:normal}
.l1a{display:block;font-size:clamp(34px,4.65vw,76px);font-weight:800;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1}
/* вес 270 — настоящая точка на оси, а не округление до 300 */
.l1b{display:block;font-size:clamp(19px,2.5vw,41px);font-variation-settings:"wght" 270;
  letter-spacing:.095em;line-height:1;margin-top:6px;
  /* разрядка вешает пустой шаг после последнего знака и уводит строку
     влево на его половину — возвращаем её на ось */
  text-indent:.042em}
.line2{top:calc(var(--hdr) + 2vh);bottom:auto;left:0;right:0;opacity:0;max-width:none;
  font-family:"Unbounded",system-ui,sans-serif;letter-spacing:normal;font-variation-settings:normal}
/* контентная ширина лида = ширина самой длинной его строки: блок сжат
   по содержимому, подпись под ним тянется ровно на эту же ширину */
.lead{display:inline-block;text-align:center;max-width:calc(100% - 40px)}
/* каждая строка живёт в своей кромке: из-под неё она и выезжает */
.ln{display:block;overflow:hidden}
.ln i{display:block;font-style:normal;font-size:clamp(21px,1.8vw,30px);
  font-variation-settings:"wght" 300;line-height:1.15;letter-spacing:0;color:var(--ink);white-space:nowrap}
.ln b{font:inherit;font-variation-settings:inherit}
/* «в который» на широком экране кончает вторую строку, на телефоне начинает
   третью: при кегле 21 px строка «возвращаем объект, в который» требует
   393 px, а в поля влезает 350 */
.narrow{display:none}
/* подпись растянута к краям контентной ширины, линейка забирает остаток */
.cap{display:flex;align-items:center;gap:14px;margin-top:32px}
.capL,.capR{flex:0 0 auto;white-space:nowrap;text-transform:uppercase;color:var(--muted);
  font-size:11px;font-variation-settings:"wght" 270;letter-spacing:.095em;line-height:1}
.capRule{flex:1 1 auto;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:center}
.capKnee{display:none}

/* --- чертёжная сборка: строки выезжают из-под кромки, потом прочерчивается
   линейка, и с её концом слова подписи сходятся к своим краям --- */
.ln i{transform:translateY(110%);filter:blur(6px);opacity:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1)}
.line2.on .ln i{transform:none;filter:blur(0);opacity:1}
.line2.on .ln:nth-child(2) i{transition-delay:.09s}
.line2.on .ln:nth-child(3) i{transition-delay:.18s}
.capRule{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.line2.on .capRule{transform:scaleX(1);transition-delay:.93s}   /* третья строка кончает на .78, плюс 150 мс */
.capL,.capR{opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)}
.capL{transform:translateX(14px)}
.capR{transform:translateX(-14px)}
.line2.on .capL,.line2.on .capR{opacity:1;transform:none;transition-delay:1.43s}  /* конец линейки */
/* надпись на паузе: здание уже забрал дым, экран пустой — здесь она и работает.
   Набрана тем же локапом, что и заголовок: тяжёлый капс и лёгкая разрядка под ним */
.pause{position:absolute;left:var(--gut);right:var(--gut);top:50%;transform:translateY(-50%);
  text-align:center;opacity:0;pointer-events:none;color:var(--ink);
  font-family:"Unbounded",system-ui,sans-serif;letter-spacing:normal;font-variation-settings:normal}
/* межстрочный не 1: при переносе «Й» второй строки упиралась в первую */
.pz1{font-size:clamp(26px,3.6vw,58px);font-weight:800;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.14;white-space:nowrap}
/* вопрос на широком экране идёт одной строкой, на телефоне ломается надвое:
   капс Unbounded широкий, «САМОЕ НАЧАЛО СТРОЙКИ?» требует 435 px при 350 доступных */
.pz1 span{display:inline}
/* ответ — тонким капсом, той же разрядкой, что подстрока локапа */
.pz2{margin-top:10px;font-size:clamp(14px,1.75vw,28px);line-height:1.35;letter-spacing:.095em;
  text-transform:uppercase;font-variation-settings:"wght" 270;text-indent:.042em}
.pz2 span{display:block;white-space:nowrap}
/* всплывают из дыма по строкам, одна за другой */
.pz1 span,.pz2 span{opacity:0;transform:translateY(18px);filter:blur(14px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.pause.on .pz1 span,.pause.on .pz2 span{opacity:1;transform:none;filter:blur(0)}
.pause.on .pz1 span:nth-child(2){transition-delay:.1s}
.pause.on .pz2 span:nth-child(1){transition-delay:.26s}
.pause.on .pz2 span:nth-child(2){transition-delay:.4s}
@media(max-aspect-ratio:1/1){.pz1{font-size:clamp(24px,7.6vw,46px)}.pz1 span{display:block}.pz2{font-size:clamp(13px,4.2vw,24px);margin-top:6px}}
@media(prefers-reduced-motion:reduce){.pz1 span,.pz2 span{transition:opacity .2s;transform:none;filter:none}
  .ln i,.capL,.capR{transition:opacity .3s;transform:none;filter:none}
  .capRule{transition:opacity .3s;transform:scaleX(1);opacity:0}
  .line2.on .capRule{opacity:1}}
/* «листай» остаётся слева: по центру он ложится на чертёж, который
   в этот момент как раз проявляется из дыма */
.hint{position:absolute;left:var(--gut);bottom:26px;font-size:13px;color:var(--ink)}

/* --- плашка «было чертёж — стало кадр» (C2, десктоп, от 1000px) ---
   Видна, пока здание в кадре сцены, гаснет, когда появляется надпись на
   паузе «Самое начало стройки?» — см. tick() в main.js, формула
   обратима (без хранимого состояния), поэтому при скролле вверх плашка
   возвращается сама. Телефон её не получает — там для неё нет места и
   это не часть эталона daaa5e5. */
.heroDone{display:none}
#heroTop{display:none}
/* .heroBtn — общая кнопка кадра 1, использует и #heroTop (десктоп, ниже),
   и .heroDone (плашка «было-стало»): одна база, модификаторы цвета. */
.heroBtn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:14px;
  font-size:15px;font-variation-settings:"wdth" 108,"wght" 650;white-space:nowrap;
  transition:gap .25s,background-color .25s,color .25s,border-color .25s}
.heroBtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.heroBtn:hover{gap:14px}
.heroBtnDark{background:var(--ink);color:var(--paper)}
.heroBtnGhost{border:1.5px solid var(--ink);color:var(--ink)}
.heroBtnGhost:hover{background:var(--ink);color:var(--paper)}
.heroDone .heroBtn{background:var(--ink);color:var(--paper)}
@media(min-width:1000px){
  .heroDone{display:flex;position:absolute;left:50%;bottom:40px;transform:translate(-50%,24px);
    align-items:center;gap:24px;max-width:calc(100% - 2*var(--gut));
    padding:0 14px 0 28px;height:76px;border-radius:999px;opacity:0;pointer-events:none;
    background:rgba(246,247,250,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.75);box-shadow:0 1px 2px rgba(16,19,43,.06),0 14px 36px rgba(16,19,43,.14)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .heroDone{background:rgba(246,247,250,.96)}
  }
  .heroDone p{font-size:15px;color:var(--quiet);white-space:nowrap}
  .heroDone p b{color:var(--ink);font-variation-settings:"wght" 650}

  /* --- кадр 1 (десктоп, от 1000px): .line1 («AI-студия») остаётся как
     в эталоне — видна с scroll=0, гаснет по T.l1Out, ничего не меняем.
     .line2 (старый лид .ln/.cap) скрыт: его место занимает #heroTop,
     появляется в тот же момент, что и старый лид (по T.l2In — см.
     tick() в main.js), и так же не дублируется с .line1 по построению.
     #heroTop стоит на месте — не уезжает, гаснет по факту пересечения с
     живым прямоугольником здания (#bp): formula
     fade=clamp((bottomText-topBuilding+40)/80,0,1),
     opacity=seg(p0,...T.l2In)*(1-fade), pointer-events выключаются
     вместе с ней. Никакого transform здесь JS не ставит — только
     opacity/pointer-events, положение всегда то же самое. */
  .line2{display:none}
  #heroTop{display:block;position:absolute;left:50%;top:calc(var(--hdr) + 4vh);transform:translateX(-50%);
    width:min(1000px,calc(100% - 2*var(--gut)));text-align:center;z-index:2}
  .heroOver{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
    font-variation-settings:"wght" 270}
  .heroH1{margin-top:14px;font-size:clamp(28px,2.6vw,38px);line-height:1.2;
    font-family:"Unbounded",system-ui,sans-serif;font-weight:650;letter-spacing:-.015em;
    color:var(--ink);text-wrap:balance}
  .heroBtns{margin-top:28px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
}


/* набор: символы стоят в разметке сразу и только открываются прозрачностью —
   верстка не прыгает по мере печати, перенос строк тот же, что у целого текста */
.ch{opacity:0;transition:opacity .07s linear}
.ch.on{opacity:1}
.ch.cur{box-shadow:.055em 0 0 currentColor;animation:caret .85s steps(1,end) infinite}
@keyframes caret{50%{box-shadow:.055em 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.ch{opacity:1;transition:none}.ch.cur{box-shadow:none;animation:none}}

/* --- демо чертёж↔рендер --- */
.bpside{background:var(--paper);clip-path:inset(0 100% 0 0);opacity:0}
.bpfit{position:absolute;left:50%;top:50%;width:max(100vw,177.7vh);aspect-ratio:16/9;transform:translate(-50%,-50%)}
.bpfit svg{width:100%;height:100%}
.knife{position:absolute;top:0;bottom:0;left:0;opacity:0;width:1px;background:var(--ink);cursor:ew-resize}
.knife i{position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.knife i::before,.knife i::after{content:"";position:absolute;top:50%;width:6px;height:6px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.knife i::before{left:9px;transform:translateY(-50%) rotate(-45deg)}.knife i::after{right:9px;transform:translateY(-50%) rotate(135deg)}
.cmpcap{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;display:flex;justify-content:space-between;font-size:12px}
.cmpcap span{border-top:1px solid var(--ink);padding-top:8px;flex:1;margin-right:14px}.cmpcap span:last-child{margin-right:0;text-align:right;color:var(--paper);border-color:var(--paper)}
/* --- рендеры: лок-ап заголовка, лид и карточки пунктов ---
   Весь блок на Unbounded. Класс .lead здесь больше не используется:
   он занят лидом первого экрана, и общие правила перебивали друг друга. */
.secHead{text-align:center;margin-bottom:clamp(30px,4.5vh,56px)}
.secTitle{font-family:"Unbounded",system-ui,sans-serif;letter-spacing:normal;
  font-variation-settings:normal;margin-bottom:0;max-width:none}
.shA{display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  line-height:1;font-size:clamp(34px,3vw,48px)}
.shB{display:block;margin-top:10px;font-size:18px;line-height:1;color:var(--muted);
  font-variation-settings:"wght" 270;letter-spacing:.095em;text-indent:.042em}
.rndLead{margin:clamp(18px,2.4vh,28px) auto 0;max-width:54ch;
  font-family:"Unbounded",system-ui,sans-serif;font-variation-settings:"wght" 300;
  font-size:18px;line-height:1.35;letter-spacing:normal;color:var(--ink)}
/* заголовки секций — единый потолок (десктоп, от 1000px): мобильная
   величина (30px, ниже по файлу) этот clamp не трогает. rem — растёт
   вместе с html{font-size} от --gutter. */
@media(min-width:1000px){
  .shA{font-size:clamp(2.6rem,4vw,4.2rem)}
  .shB{font-size:1.25rem;line-height:1.2;letter-spacing:.075em}
  .rndLead{max-width:60ch;font-size:1.15rem;line-height:1.55}
}
.lead2{font-size:clamp(22px,2.7vw,40px);line-height:1.12;letter-spacing:-.025em;font-variation-settings:"wdth" 114,"wght" 650;margin-top:7vh;padding-top:30px;border-top:1px solid var(--ink);max-width:22ch}

/* карточки пунктов: на телефоне столбиком, на десктопе тремя колонками
   одной высоты — её задаёт самая длинная, акцентная 02 */
.cards{display:grid;gap:16px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:20px;
  font-family:"Unbounded",system-ui,sans-serif;letter-spacing:normal;font-variation-settings:normal}
.cardTop{display:flex;align-items:baseline;gap:12px}
.cardTop i{font-style:normal;font-weight:800;font-size:20px;line-height:1;letter-spacing:-.02em}
.cardTop b{font-weight:800;font-size:12px;line-height:1.2;text-transform:uppercase;letter-spacing:.03em}
.cardTop span{margin-left:auto;white-space:nowrap;font-size:10px;line-height:1;text-transform:uppercase;
  letter-spacing:.09em;font-variation-settings:"wght" 270;color:var(--muted)}
.card p{margin:20px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  font-size:12.5px;line-height:1.35;font-variation-settings:"wght" 300}
/* второй абзац идёт без своей линейки — она отбивает только шапку карточки */
.card p+p{margin-top:.9em;padding-top:0;border-top:0}
/* главное в карточке — жирным: на фоне 300-го веса читается как акцент */
.card p b{font-variation-settings:"wght" 700}
/* акцентная: чернила, рамка прозрачная — чтобы высота совпадала с соседями */
/* акцентная карточка — на том же синем, что лист «От чертежа до комплекта» */
.card.ink{background:#0F1730;border-color:transparent;color:var(--paper)}
.card.ink .cardTop i{color:#7A8CBE}
/* метка на синем мелким кеглем терялась: сажаем её в рамку-чип */
.card.ink .cardTop span{color:var(--paper);border:1px solid #3C4048;border-radius:999px;
  padding:5px 9px;line-height:1}
.card.ink p{border-top-color:#3C4048}
/* каскад снизу: 01, 03, потом акцентная 02, и уже после посадки — её тень */
.card{opacity:0;transform:translateY(24px);box-shadow:0 8px 24px rgba(7,11,27,0);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.cards.on .card{opacity:1;transform:none}
.cards.on .card:nth-child(3){transition-delay:.12s}
.cards.on .card.ink{transition-delay:.24s,.24s,.89s;box-shadow:0 8px 24px rgba(7,11,27,.25)}
@media(min-width:821px){
  .cards{grid-template-columns:repeat(3,1fr);gap:24px}
  .card p{font-size:14px}
}
/* десктоп (от 1000px): карточки были набраны как мелкие капс-подписи —
   заголовок 12px, тело 12.5–14px, метка 10px. Поднимаем до единого
   стандарта; 821-999px остаётся как в эталоне daaa5e5 (это ещё мобилка
   по сегодняшней границе <1000px). Заголовок уходит на всю ширину под
   номером и меткой — иначе вторая строка при переносе наезжала на метку. */
@media(min-width:1000px){
  .card{padding:clamp(32px,2.6vw,40px)}
  .cardTop{flex-wrap:wrap}
  .cardTop b{order:3;width:100%;margin-top:14px;font-size:clamp(24px,1.7vw,28px);line-height:1.1}
  .cardTop span{font-size:15px}
  .card p{font-size:18px;line-height:1.5}
}
@media(max-width:820px){
  .shA{font-size:30px}.shB{font-size:14px;margin-top:8px}
  .rndLead{font-size:15px;max-width:44ch}
}
@media(prefers-reduced-motion:reduce){
  .card{transform:none;transition:opacity .3s}
  .cards.on .card.ink{transition-delay:0s;box-shadow:0 8px 24px rgba(7,11,27,.25)}
}
.bpf{background:var(--paper);border:1px solid var(--rule)}
.bpf svg{width:100%;height:100%}
.locs.wide{grid-template-columns:repeat(4,1fr);max-width:820px}
/* --- до/после: чертёж и готовый кадр, граница тянется ползунком --- */
.cmp{margin-top:clamp(40px,7vh,90px)}
/* обе картинки сняты с одной точки и одного размера (2400×1792), поэтому
   коробка держит их пропорцию, а вписывание contain совмещает их точно.
   Кадр оформлен карточкой — тем же языком, что акцентная карточка 02 */
.cmpBox{position:relative;aspect-ratio:2400/1792;overflow:hidden;background:var(--paper);
  border-radius:14px;box-shadow:0 8px 24px rgba(7,11,27,.25);touch-action:pan-y}
.cmpBox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center}
/* обрезаем маской, а не шириной: картинка внутри остаётся во всю коробку
   и не съезжает относительно второй */
.cmpBefore{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);
  will-change:clip-path}
.cmpBar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--ink);
  pointer-events:none;will-change:left}
.cmpBar i{position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%,-50%);
  border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
/* в середине ручки две стрелки в разные стороны, а не сомкнутый ромб */
.cmpBar i::before,.cmpBar i::after{content:"";position:absolute;top:50%;width:6px;height:6px;
  border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)}
.cmpBar i::before{left:8px;transform:translateY(-50%) rotate(-45deg)}
.cmpBar i::after{right:8px;transform:translateY(-50%) rotate(135deg)}
/* сам ползунок невидим и лежит на всю картинку: тянется откуда угодно,
   при этом остаётся настоящим input — работает с клавиатуры */
.cmpRange{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:none}
.cmpRange::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:100%}
.cmpRange::-moz-range-thumb{width:64px;height:100%;border:0;background:none}
.cmpRange:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* подписи под карточкой: слева чертёж, справа рендер ступенью ниже,
   между ними линейка с коленом. Левый и правый концы линии js выставляет
   по фактической ширине набора — проценты тут врали бы на любом кегле */
.sCap{position:relative;margin-top:16px;padding-bottom:22px;
  font-family:"Unbounded",system-ui,sans-serif;letter-spacing:normal;font-variation-settings:normal}
.sCapL,.sCapR{display:inline-block;font-size:12px;line-height:1;text-transform:uppercase;
  letter-spacing:.05em;font-variation-settings:"wght" 400;color:var(--ink);white-space:nowrap}
.sCapR{position:absolute;right:0;top:22px}
.sRule{position:absolute;left:var(--lx,40%);right:var(--rx,8%);top:.5em;height:1px;background:var(--muted);
  transform:scaleX(0);transform-origin:left center}
.sKnee{position:absolute;right:var(--rx,8%);top:.5em;width:1px;height:calc(22px - 4px - .5em);
  background:var(--muted);transform:scaleY(0);transform-origin:top center}

/* появление: карточка едет снизу, затем подписи той же хореографией, что на лиде */
.cmpBox{opacity:0;transform:translateY(24px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.cmp.shown .cmpBox{opacity:1;transform:none}
.sCapL,.sCapR{opacity:0}
.sCapL{transform:translateX(-12px);transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.sCapR{transform:translateX(12px);transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.sRule{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sKnee{transition:transform .15s cubic-bezier(.16,1,.3,1)}
.cmp.shown .sCapL{opacity:1;transform:none;transition-delay:.55s}
.cmp.shown .sRule{transform:scaleX(1);transition-delay:.85s}
.cmp.shown .sKnee{transform:scaleY(1);transition-delay:1.25s}
.cmp.shown .sCapR{opacity:1;transform:none;transition-delay:1.4s}
@media(max-width:820px){
  /* поля карточки от краёв экрана 24 px: лист уже даёт свои, добираем остаток */
  .cmp{margin-inline:calc(24px - var(--gut))}
  .sCapL,.sCapR{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .cmpBox,.sCapL,.sCapR{transition:opacity .3s;transform:none}
  .sRule{transition:none;transform:scaleX(1)}
  .sKnee{transition:none;transform:scaleY(1)}
}

/* --- 4: цены — три карточки на дыму + «Кампания под ключ» отдельным
   широким баннером, без бумаги. Перенесено из _design/kit-mockup.html —
   своя сетка, переключатель «рендеры/чертежи» меняет данные в карточках
   и баннере, счётчик цены и stagger-появление по скроллу, см. js/prices.js
   (цены и подписи обоих режимов — из массива M там же). z-index:1 по тем
   же причинам, что у .reels/.film/.end: класс не .scene, порядок отрисовки
   над #smoke иначе не гарантирован. */
.kit{--navy:#0F1730;--dq:#9AA6CC;position:relative;z-index:1;container-type:inline-size;color:var(--ink)}
.kit>.in{padding:clamp(72px,9cqw,140px) clamp(20px,3.2cqw,48px) clamp(64px,8cqw,120px)}
.kit .eyebrow{display:block;margin-bottom:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);font-variation-settings:"wdth" 110,"wght" 600}
.kit .shB{color:var(--quiet);line-height:1.4;max-width:46ch;margin-inline:auto}

/* заголовок «Цены» слева, короткая подводка к шагам справа — асимметрия
   нужна, чтобы освободить место под переключатель-шаг-1 ниже; остальные
   secHead (Рендеры, Ролики) этот блок не задевает, переопределение только
   внутри .kit */
.kitHead{text-align:left;display:flex;flex-direction:column;gap:20px}
.kitHeadMain{text-align:center}
.kitNote{color:var(--quiet);font-size:18px;line-height:1.45;max-width:420px}
/* мобилка (<1000px): заголовок слева, без центрирования, без дублирующей
   подводки .kitNote (её нет в эталоне _design/kit-mockup.html, телефон) —
   на десктопе .kitHeadMain и так уже text-align:left ниже по файлу,
   а .kitNote остаётся. */
@media(max-width:999px){
  .kitHeadMain{text-align:left}
  .kitNote{display:none}
}

/* --- мобилка (<1000px): один переключатель-капсула вместо шага 1/шага 2,
   как .seg/.srcnote в эталоне (_design/kit-mockup.html, режим «Телефон»).
   Десктоп эту разметку не видит — см. .kitSteps ниже. --- */
.kitSeg{margin-top:clamp(32px,4cqw,56px)}
.seg{display:flex;width:100%;padding:4px;border:1px solid var(--ink);border-radius:99px;background:rgba(255,255,255,.5)}
.seg button{flex:1;font:inherit;font-size:14px;border:0;background:none;color:var(--ink);padding:12px 8px;
  border-radius:99px;cursor:pointer;font-variation-settings:"wdth" 106,"wght" 650;
  transition:background-color .3s,color .3s;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.srcnote{margin-top:12px;color:var(--quiet);font-size:14px;line-height:1.45;min-height:2.9em}
@media(min-width:1000px){.kitSeg{display:none}}

/* --- шаги: «что у вас есть» как первый шаг на всю ширину (десктоп,
   от 1000px) --- */
@media(max-width:999px){.kitSteps{display:none}}
.kitSteps{margin-top:clamp(32px,4cqw,56px)}
.stepLabel{font-size:15px;font-weight:600;font-variation-settings:"wght" 600;color:var(--ink)}
.stepLabel2{margin-top:16px}
.choiceGroup{margin-top:12px;display:flex;gap:8px;padding:8px;border-radius:24px;
  background:#fff;border:1px solid rgba(16,19,43,.1);
  box-shadow:0 1px 2px rgba(16,19,43,.06),0 12px 28px rgba(16,19,43,.06)}
.choice{flex:1 1 0;display:flex;align-items:flex-start;gap:14px;text-align:left;
  padding:20px 24px;border-radius:18px;border:0;cursor:pointer;
  background:rgba(16,19,23,.045);color:var(--ink);font:inherit;
  transition:background-color .25s,color .25s}
.choice .radio{flex:0 0 auto;width:26px;height:26px;margin-top:2px;border-radius:50%;
  border:1.5px solid currentColor;position:relative}
.choice .radio::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .2s}
.choice[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.choice[aria-checked="true"] .radio::after{transform:scale(1)}
.choiceBody{display:flex;flex-direction:column;gap:4px}
.choiceBody b{font-size:20px;font-variation-settings:"wght" 600;letter-spacing:-.01em}
.choiceBody small{font-size:16px;line-height:1.35;color:var(--quiet)}
.choice[aria-checked="true"] .choiceBody small{color:var(--dq)}
.choice:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* лестница форматов: 01 Кадры, 02 Оживление, 03 Презентационный ролик
   (тёмная, бейдж «Главный ролик») — три в ряд, «Кампания под ключ»
   отдельным широким баннером ниже (.kitBanner, тот же .pcard.top) */
.kit .pcards{margin-top:clamp(36px,4.6cqw,72px);list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4cqw,20px);align-items:stretch}
.kit .pcard{--bg:rgba(255,255,255,.55);--fg:var(--ink);--q:var(--quiet);--r:rgba(16,19,23,.14);--ln:rgba(16,19,23,.28);
  position:relative;display:flex;flex-direction:column;border-radius:18px;padding:clamp(20px,1.9cqw,30px);
  background:var(--bg);color:var(--fg);border:1px solid var(--ln);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .4s,color .4s,border-color .4s,box-shadow .45s;
  opacity:0;transform:translateY(34px)}
.kit .pcard.in{opacity:1;transform:none;transition-property:opacity,transform,background-color,color,border-color,box-shadow;transition-duration:.8s,.8s,.4s,.4s,.4s,.45s;transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s,0s}
.kit .pcard *{transition:color .4s,border-color .4s,background-color .4s,gap .3s,-webkit-text-stroke-color .4s}
.kit .pcard.top{--bg:var(--navy);--fg:var(--paper);--q:var(--dq);--r:rgba(250,250,248,.2);--ln:var(--navy)}
@media (hover:hover){
  .kit .pcard.in:hover,.kit .pcard.in:focus-within{--bg:var(--navy);--fg:var(--paper);--q:var(--dq);--r:rgba(250,250,248,.2);--ln:var(--navy);transform:translateY(-8px);box-shadow:0 34px 50px -30px rgba(15,23,48,.7);transition-delay:0s}
  .kit .pcard.top.in:hover,.kit .pcard.top.in:focus-within{--bg:#fff;--fg:var(--ink);--q:var(--quiet);--r:rgba(16,19,23,.14);--ln:var(--ink)}
}
.kit .step{display:flex;align-items:flex-start;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--q);font-variation-settings:"wdth" 110,"wght" 600}
.kit .step i{font-style:normal;font-size:clamp(64px,6cqw,96px);line-height:.78;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--fg);font-variation-settings:"wdth" 120,"wght" 850;margin-top:-4px;margin-right:auto}
/* бейдж «Главный ролик»: на карточке 03, рядом с номером — не перебивает
   его контурную цифру, своя плашка чуть ярче фона карточки */
.kit .badge{align-self:flex-start;padding:5px 11px;border-radius:999px;font-size:11px;letter-spacing:.08em;
  text-transform:none;font-variation-settings:"wdth" 108,"wght" 650;color:var(--fg);
  background:rgba(250,250,248,.14);border:1px solid rgba(250,250,248,.3)}
.kit .pcard h3{margin-top:clamp(18px,2cqw,30px);font-size:clamp(24px,2.3cqw,34px);line-height:1.02;letter-spacing:-.03em;font-variation-settings:"wdth" 114,"wght" 780}
.kit .fit{margin-top:10px;color:var(--q);font-size:clamp(15px,1.1cqw,16px);line-height:1.4;min-height:4.2em}
.kit .pr{margin-top:clamp(20px,2.2cqw,32px);display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.kit .pr i{font-style:normal;font-size:clamp(15px,1.3cqw,19px);color:var(--q);font-variation-settings:"wdth" 108,"wght" 600}
.kit .pr b{font-size:clamp(30px,3cqw,44px);line-height:1;letter-spacing:-.04em;font-variation-settings:"wdth" 118,"wght" 820;font-variant-numeric:tabular-nums}
.kit .unit{margin-top:6px;font-size:14px;color:var(--q);min-height:2.6em}
.kit .pcard ul{margin-top:18px;list-style:none;border-top:1px solid var(--r)}
.kit .pcard li{position:relative;padding:9px 0 9px 20px;font-size:clamp(14px,1.05cqw,16px);line-height:1.3;border-bottom:1px solid var(--r)}
.kit .pcard li::before{content:"";position:absolute;left:0;top:1.15em;width:9px;height:1px;background:var(--fg)}
.kit .when{margin-top:auto;padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--q)}
.kit .when a{display:inline-flex;align-items:center;gap:8px;color:var(--fg);border-bottom:1.5px solid var(--fg);padding-bottom:2px;font-variation-settings:"wdth" 106,"wght" 650;white-space:nowrap}
.kit .when a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .3s}
.kit .pcard:hover .when a svg{transform:translateX(4px)}
.kit .pcard a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.kit .pcard{opacity:1!important;transform:none!important}.kit *{transition:none!important}}

/* «Кампания под ключ» — тот же .pcard.top (тёмный). Мобилка (<1000px):
   просто четвёртая карточка в столбце, как в эталоне (_design/kit-mockup.html,
   «Телефон») — обёртки .kitBannerMain/.kitBannerSide схлопнуты
   (display:contents), их 7 детей становятся прямыми flex-элементами
   .kitBanner (он и так .pcard, flex-column), order восстанавливает
   обычный порядок карточки: номер → заголовок → описание → цена →
   список → срок/кнопка. Десктоп (от 1000px) возвращает обёрткам display
   и раскладывает в два столбца — текст+список слева, цена и CTA справа;
   order внутри block-обёртки .kitBannerMain ни на что не влияет
   (order работает только у прямых flex/grid-детей), поэтому там снова
   действует обычный порядок разметки. */
.kitBannerMain,.kitBannerSide{display:contents}
.kitBanner .step{order:1}
.kitBanner h3{order:2}
.kitBanner .fit{order:3}
.kitBanner .pr{order:4}
.kitBanner .unit{order:5}
.kitBanner ul{order:6}
.kitBanner .when{order:7}
@media(min-width:1000px){
  /* .kit .kitBanner — специфичность .kit .pcard{flex-direction:column}
     (две склейки класса) иначе перебивает одиночный .kitBanner */
  .kit .kitBanner{margin-top:clamp(12px,1.4cqw,20px);flex-direction:row;flex-wrap:wrap;align-items:center;gap:clamp(24px,4cqw,56px)}
  .kitBannerMain,.kitBannerSide{display:block}
  .kitBannerMain{flex:1 1 320px}
  .kitBannerMain ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .kitBannerSide{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:220px}
  .kitBannerSide .when{margin-top:22px;padding-top:0;width:100%}
}

.kit .terms{margin-top:clamp(40px,5cqw,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4cqw,40px);list-style:none}
.kit .terms li{border-top:1px solid var(--ink);padding-top:14px;font-size:clamp(15px,1.2cqw,17px);line-height:1.35}
.kit .terms b{display:block;font-size:clamp(18px,1.6cqw,24px);letter-spacing:-.02em;margin-bottom:6px;font-variation-settings:"wdth" 110,"wght" 700}
.kit .terms span{color:#3B4047}
.kit .go{margin-top:clamp(40px,5cqw,72px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.kit .cta{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);border-radius:14px;padding:18px 28px;font-size:17px;font-variation-settings:"wdth" 108,"wght" 700;transition:gap .25s}
.kit .cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.kit .cta:hover{gap:18px}
.kit .go p{color:var(--quiet);font-size:15px}

@container (max-width:1000px){
  .kit .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit .terms{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .kit .fit,.kit .unit{min-height:0}
  .kitBannerMain ul{grid-template-columns:1fr}
}
@container (max-width:760px){
  .choiceGroup{flex-direction:column}
  .kit .secHead{margin-bottom:28px}
  .kit .pcards{grid-template-columns:1fr}
  .kit .pr b{font-size:clamp(34px,10.5cqw,44px)}
  .kit .terms{grid-template-columns:1fr}
  .kit .cta{display:flex;justify-content:space-between;width:100%}
  .kitBanner{flex-direction:column;align-items:stretch}
  .kitBannerSide{min-width:0}
}
/* мобилка (<1000px, вся ширина — не @container, он triggers только ниже
   ~760-800px контейнера и не покрыл бы зону 780-999px): карточки и
   баннер кампании одним столбцом — явный зазор 16px, иначе слипаются.
   У .pcards clamp(12px,1.4cqw,20px) давал ~12px на типичном телефоне,
   у #kitBanner margin-top вообще не было: он задан только внутри
   @media(min-width:1000px) чуть выше. */
@media(max-width:999px){
  .kit .pcards{gap:16px}
  .kitBanner{margin-top:16px}
  /* мобилка: третья карточка «Презентационный ролик» светлая, как первая
     и вторая — тёмной (.pcard.top) и с бейджем «Главный ролик» остаётся
     только десктоп. Снимаем модификатор .top точечно по месту в разметке
     (3-я карточка внутри #priceCards), а не трогая саму разметку/класс —
     десктопный вид (тёмная третья) этим не затрагивается. */
  #priceCards .pcard:nth-child(3){--bg:rgba(255,255,255,.55);--fg:var(--ink);--q:var(--quiet);--r:rgba(16,19,23,.14);--ln:rgba(16,19,23,.28)}
  #priceCards .pcard:nth-child(3) .badge{display:none}
}
/* колонка контента — на .in, не на .kit: .kit сам держит container-type
   для cqw и @container-брейкпоинтов выше, сузь его — и они сработают
   раньше срока на обычном десктопе. Виден только от 1000px. .in здесь
   не красит фон (дым виден насквозь), поэтому можно расширять её без
   риска — внутренний максимум у «Цен» шире общего (--cap:1400px локально). */
@media(min-width:1000px){
  .kit>.in{--cap:1400px;padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  .kit .pcards{gap:20px}
  .kit .pcard{padding:28px}
  .kit .fit{font-size:1rem;line-height:1.5}
  /* 26px по заданию; если где-то не укладывается — clamp вниз, а не перенос
     по слогам (его явно запретили): hyphens:none, overflow-wrap:normal —
     длинные слова переносятся только по границе слова */
  .kit .pcard h3{font-size:clamp(20px,1.9cqw,26px);line-height:1.1;text-wrap:balance;hyphens:none;overflow-wrap:normal}
  .kit .pr b{font-size:clamp(26px,3.1vw,44px)}
  .kit .pr i{font-size:1rem}
  .kit .unit{font-size:.85rem}
  .kit .pcard li{font-size:1rem;border-bottom:none}
  .kit .when{font-size:.85rem}
  .kit .step i{font-size:4.5rem}
  .kit .eyebrow{font-size:.85rem}
  .kit .step{font-size:.85rem}
  .kit .badge{font-size:.8rem}
  /* заголовок слева, подводка к шагам справа от него, выровнены по низу */
  .kitHead{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px}
  .kitHeadMain{text-align:left}
  .kit .shB{margin-inline:0}
  /* те же 4 колонки и тот же зазор, что у карточек — плашки условий
     внизу встают вровень с ними */
  .kit .terms{gap:20px}
  .kitBannerMain{flex:1 1 55%}
}
@media(max-width:820px){.locs.wide{grid-template-columns:1fr 1fr}}

/* --- накрывающие листы --- */
.scene{position:relative;z-index:1}
.sheet{position:relative;z-index:2;background:var(--paper);padding:max(12vh,calc(var(--hdr) + 6vh)) var(--gut) 14vh;border-radius:28px 28px 0 0;
  box-shadow:0 -40px 90px -30px rgba(7,11,27,.35);min-height:100vh}
.sheet.cover{margin-top:-100vh}
.sheet+.sheet{margin-top:-28px;box-shadow:0 -30px 60px -30px rgba(7,11,27,.18)}
.sheet+.scene{z-index:1}
/* появление строк листа */
.rv{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),filter .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv:nth-child(2){transition-delay:.05s}.rv:nth-child(3){transition-delay:.11s}.rv:nth-child(4){transition-delay:.16s}.rv:nth-child(5){transition-delay:.21s}

/* --- содержимое листов ---
   Здесь раньше стояло правило .sheet h2{max-width:16ch;...} — по тегу+классу
   оно специфичнее .secTitle{max-width:none} (класс+класс не спасал: тег
   в селекторе даёт больше веса), и 16ch в Unbounded (широкий «0») разворачивался
   в ~1070px — заголовок «Рендеры» стоял не по центру секции, а прижатым
   влево в более узкой невидимой коробке. Голых <h2> без .secTitle в
   разметке не осталось, правило удалено целиком, а не точечно. */
/* --- «От чертежа до комплекта»: та же типосистема, что у «Рендеров» --- */
/* Сама секция остаётся бумажной и даёт воздух вокруг тёмного листа,
   лист внутри идёт во всю ширину вьюпорта */
/* сверху вычитаем нижний отступ листа «Рендеры» — иначе воздуха выходит
   вдвое больше заданного */
/* воздух между подписями слайдера и синим листом держит нижний отступ
   «Рендеров», поэтому сверху секция своего почти не добавляет */
#render{padding-bottom:116px}
@media(min-width:821px){#render{padding-bottom:13vh}}
/* без нижнего отступа и без бумажного фона: синий лист ложится прямо на
   дым сайта, под собой и снизу — никакой белой полосы перед #s3, дым
   непрерывный от «Рендеров» до «Роликов» */
#sheet{padding:0;background:transparent;
  border-radius:0;box-shadow:none;min-height:0}
.navy{background:#0F1730;border-radius:28px;padding:56px 32px;color:var(--paper);
  /* ничего не вылезает за скругление */
  overflow:hidden}
@media(min-width:821px){.navy{padding:96px 64px}}
/* нижняя кромка листа отстоит от кнопки ровно так же, как кнопка от видео */
.navy{padding-bottom:56px}
@media(min-width:821px){.navy{padding-bottom:72px}}
/* --- светлое по тёмному: внутри листа чернил не остаётся --- */
.navy .shA{color:var(--paper)}
.navy .pStep .k{color:var(--paper)}
.navy .pStep .k i{color:#7A8CBE}
.navy .pStep .k b{color:var(--paper)}
.navy .pStep .k p{color:var(--paper);border-top-color:#3C4048}
/* --- слоты под материалы этапа --- */
.slot{display:block;width:100%;margin-top:22px;border-radius:14px;overflow:hidden}
/* исходный чертёж: лист А3 горизонтально на светлой подложке.
   contain — чтобы рамка листа и штамп не срезались по краям */
.slotSheet{aspect-ratio:1.414/1;background:var(--paper)}
.slotSheet img{display:block;width:100%;height:100%;object-fit:contain}
/* раскадровка: двенадцать кадров, на телефоне в две колонки */
.board{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;border-radius:0;overflow:visible}
@media(min-width:821px){.board{grid-template-columns:repeat(4,1fr)}}
.board .frame{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:#1A2340;border:1px solid #3C4048;padding:0;cursor:zoom-in;
  transition:transform .2s cubic-bezier(.16,1,.3,1)}
.board .frame img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:hover){.board .frame:hover{transform:scale(1.02)}}
/* сразу после закрытия просмотра курсор оказывается над той же ячейкой,
   и она подскакивала поверх анимации возврата — подъём ждёт движения мыши */
.board.noHover .frame:hover{transform:none}
.board .frame:focus-visible{outline:2px solid #7A8CBE;outline-offset:2px}
/* номер кадра: плашка синего листа, как на макете */
.board .frame i{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:11px;
  letter-spacing:.02em;color:var(--paper);font-weight:800;
  background:#0F1730;padding:5px 8px;border-radius:6px;line-height:1}
@media(min-width:821px){.board .frame i{font-size:13px;left:10px;bottom:10px}}
/* ролик: во всю контентную ширину, грузится только при входе в вьюпорт */
.reelBox{aspect-ratio:16/9;background:#1A2340;object-fit:cover;
  box-shadow:0 8px 24px rgba(7,11,27,.4)}
/* номера кадров раскадровки и подписи ракурсов — второстепенные метки */
.navy a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.navy a:hover{color:#7A8CBE}
/* .prTitle больше не переопределяет размер — после починки .sheet h2 выше
   «От чертежа до комплекта» использует тот же .shA, что и остальные
   заголовки секций: единая система, а не свой clamp на каждый блок. */
/* этап: номер и название капсом в шапке, под ней линейка, ниже описание */
.pStep+.pStep{margin-top:40px}
@media(min-width:821px){.pStep+.pStep{margin-top:56px}}
.row .k,.pStep .k{font-family:"Unbounded",system-ui,sans-serif;letter-spacing:normal;
  font-variation-settings:normal;color:var(--ink)}
.kTop{display:flex;align-items:baseline;gap:10px}
.row .k i,.pStep .k i{font-style:normal;font-weight:800;font-size:11px;line-height:1;letter-spacing:-.01em}
.row .k b,.pStep .k b{font-weight:800;font-size:12px;line-height:1.2;text-transform:uppercase;letter-spacing:.03em}
.row .k p,.pStep .k p{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:12.5px;line-height:1.35;font-variation-settings:"wght" 300;color:var(--ink)}
@media(min-width:821px){.row .k p,.pStep .k p{font-size:14px}}
/* десктоп (от 1000px): шаги «От чертежа до комплекта» были капс-подписью
   11-12px и описанием 14px — поднимаем до стандарта наравне с остальным.
   .navy — сама тёмная плашка (фон на ней же, не на обёртке): фон остаётся
   во всю ширину секции, сужается только внутреннее содержимое —
   через padding-inline, не max-width/margin на самой плашке. */
@media(min-width:1000px){
  .row .k i,.pStep .k i{font-size:.9rem}
  .row .k b,.pStep .k b{font-size:.9rem}
  .row .k p,.pStep .k p{font-size:1.15rem;line-height:1.55}
  .navy{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
}
.final{aspect-ratio:16/9;max-width:820px;background:#cfd0cc;overflow:hidden}
.final img{width:100%;height:100%;object-fit:cover}
.sb{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 22px;position:relative}
.sb .c{aspect-ratio:16/9;background:#d9d9d4;position:relative;overflow:hidden}
.sb .c img{width:100%;height:100%;object-fit:cover;filter:saturate(.6)}
.sb .c i{position:absolute;left:6px;bottom:4px;font-style:normal;font-size:11px;color:var(--ink);background:var(--paper);padding:0 4px}
.sb .c:not(:nth-child(6n))::after{content:"";position:absolute;right:-18px;top:50%;width:12px;height:1px;background:var(--muted)}
.sb .c:not(:nth-child(6n))::before{content:"";position:absolute;right:-9px;top:calc(50% - 3px);width:5px;height:5px;border-top:1px solid var(--muted);border-right:1px solid var(--muted);transform:rotate(45deg);z-index:1}
.ta{display:grid;grid-template-columns:repeat(4,110px) 1fr;gap:12px;align-items:end}
.ta .p{aspect-ratio:3/4;background:#d9d9d4;display:flex;align-items:flex-end;padding:6px;font-size:11px;color:var(--quiet)}
.locs{display:grid;grid-template-columns:repeat(3,1fr) 90px;gap:10px;align-self:end}
.locs .l{aspect-ratio:16/9;background:#d9d9d4;overflow:hidden}
.locs .l img{width:100%;height:100%;object-fit:cover}
.pal{display:grid;grid-template-rows:repeat(5,1fr);gap:4px}
.pal i{display:block;height:100%;min-height:10px}

/* --- 3: ролики — по объектам, экран 16:9 + список ---
   Раньше была закреплённая лента на дыму (.scene), потом тёмная navy-
   подложка со своим градиентом сверху и снизу — теперь блок прозрачный
   и стоит прямо на общем дыму сайта, без своего фона, рамок и теней на
   краях, как «Самое начало стройки?» и старые контакты из тумана.
   z-index:1 по тем же причинам, что у .film/.end: класс не .scene,
   порядок отрисовки над #smoke иначе не гарантирован.
   Плотность дыма отдельной веткой в каскаде js/main.js не размечена —
   она и не нужна: вне #film и активной ленты каскад уже отдаёт
   T.dens.lenta.swallow (~.92), ровно то же значение, что держит пауза
   «Самое начало стройки?» — проверено (window.__smokeDensity на #s3). */
.reels{position:relative;z-index:1;container-type:inline-size;color:var(--ink)}
.reels .in{padding:clamp(72px,9cqw,140px) clamp(20px,3.2cqw,48px)}

.reels .idx{margin-top:clamp(40px,6cqw,96px);list-style:none;counter-reset:n;border-bottom:1px solid var(--ink)}
.reels .idx>li{counter-increment:n;border-top:1px solid var(--ink)}
/* строка объекта: номер+название | счётчик | миниатюра справа.
   <button> по умолчанию центрирует текст — text-align:left и
   justify-items:start сбрасывают оба независимых механизма разом;
   .pic держим на width:100%, иначе без стретча миниатюра сожмётся
   до размера img. */
.reels .pj{display:grid;grid-template-columns:minmax(0,1fr) auto clamp(96px,13cqw,190px);
  justify-items:start;align-items:center;gap:clamp(14px,2.4cqw,40px);width:100%;padding:clamp(14px,1.8cqw,26px) 0;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.reels .pj .n{display:block;font-size:clamp(28px,5.6cqw,84px);line-height:1;letter-spacing:-.04em;color:var(--quiet);font-variation-settings:"wdth" 120,"wght" 800;transition:color .25s,transform .35s}
.reels .pj .n::before{content:counter(n,decimal-leading-zero);display:block;margin-bottom:clamp(6px,.8cqw,12px);font-size:13px;letter-spacing:.14em;color:var(--quiet);font-variation-settings:"wdth" 110,"wght" 600}
.reels .pj .c{justify-self:end;font-size:14px;color:var(--quiet);white-space:nowrap}
.reels .pj .pic{width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#cfd3de;filter:grayscale(1) contrast(1.05);opacity:.85;transition:filter .35s,opacity .35s}
.reels .pj .pic img{width:100%;height:100%;object-fit:cover;display:block}
.reels .pj:hover .n,.reels .idx>li.open .pj .n{color:var(--ink)}
.reels .pj:hover .n{transform:translateX(clamp(4px,.8cqw,12px))}
.reels .pj:hover .pic,.reels .idx>li.open .pj .pic{filter:none;opacity:1}
.reels .pj:focus-visible,.reels .vb:focus-visible,.reels .play:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* отсек объекта: строится и показывается по клику на .pj, под его строкой.
   scroll-margin-top держит шапку, когда .panel открывается scrollIntoView'ом. */
.reels .panel{scroll-margin-top:calc(var(--hdr) + 16px);padding:4px 0 clamp(28px,3.6cqw,56px)}
.reels .panel[hidden]{display:none}
.reels .box{max-width:min(100%,1040px);margin-inline:auto}
.reels .player{position:relative;border-radius:14px;overflow:hidden;background:#05070f;aspect-ratio:16/9;isolation:isolate;cursor:pointer;
  box-shadow:0 40px 70px -36px rgba(16,19,23,.55),0 8px 20px -10px rgba(16,19,23,.3)}
.reels .player .bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(26px) brightness(.55) saturate(1.1);z-index:0;transition:opacity .35s}
.reels .player .fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;transition:opacity .35s}
/* фон за видео остаётся размытым постером того же ролика — так и
   вертикальные, и 4:3 ролики открываются в том же 16:9 с мягкими полями,
   без чёрных полос по бокам */
.reels .player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;background:transparent}
.reels .play{position:absolute;z-index:2;left:50%;top:50%;width:clamp(56px,6cqw,92px);height:clamp(56px,6cqw,92px);transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(250,250,248,.94);border:0;display:grid;place-items:center;cursor:pointer;transition:transform .25s,opacity .25s}
/* display:grid выше бьёт по специфичности [hidden] из UA-стиля — без
   этой строки playBtn.hidden=true ничего не прячет, кнопка остаётся
   поверх видео (z-index:2) и глотает клики по нативным controls */
.reels .play[hidden]{display:none}
.reels .play svg{width:34%;height:34%;fill:var(--ink);margin-left:6%}
.reels .player:hover .play{transform:translate(-50%,-50%) scale(1.07)}

.reels .cap{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:20px}
.reels .cap small{display:block;font-size:clamp(13px,1.15cqw,16px);color:#3B4047}
.reels .cap em{margin-left:auto;font-style:normal;font-size:13px;color:var(--quiet);white-space:nowrap;display:flex;align-items:center;gap:8px}
.reels .cap em svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ряд миниатюр роликов внутри отсека — только когда роликов больше одного */
.reels .vars{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px 10px}
.reels .vb{display:block;width:clamp(104px,10.6cqw,148px);text-align:left;background:none;border:0;padding:0;cursor:pointer}
.reels .vb.v{width:clamp(56px,5.8cqw,80px)}
.reels .vb .pic{display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;opacity:.55;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s}
.reels .vb.v .pic{aspect-ratio:9/16}
.reels .vb .pic img{width:100%;height:100%;object-fit:cover;display:block}
.reels .vb:hover .pic{opacity:1}
.reels .vb[aria-current="true"] .pic{opacity:1;outline-color:var(--ink)}

@container (max-width:760px){
  .reels .secHead{margin-bottom:28px}
  .reels .player{border-radius:12px}
  .reels .pj{grid-template-columns:minmax(0,1fr) auto 84px;gap:12px}
  .reels .pj .n{font-size:clamp(26px,9cqw,38px)}
  .reels .cap em{font-size:12px}
  .reels .idx{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){.reels *{transition:none!important}}
/* колонка контента — на .in, не на .reels: .reels не красит фон (дым виден
   насквозь), но max-width на самом .in сужал бы всю строку списка, а не
   только текст — используем padding-inline, ширина ряда остаётся, колонка
   читаемости держится растущим отступом. Виден только от 1000px. */
@media(min-width:1000px){
  .reels .in{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  .reels .pj .n{font-size:clamp(26px,3.2cqw,52px)}
  .reels .pj .n::before,.reels .pj .c,.reels .cap small{font-size:.9rem}
}

/* --- 6: фильм, кадр раскрывается до краёв экрана ---
   z-index:1 обязателен: без него секция — обычный positioned-блок с
   z-index:auto и порядок отрисовки относительно #smoke (z-index:0,
   fixed) не гарантирован, как и у всех .scene (см. .scene{z-index:1}
   выше) — здесь это задано явно, т.к. класс не .scene. */
.film{position:relative;z-index:1;height:320vh;background:#05070E}
.film .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.film .box{position:relative;width:var(--fw);height:var(--fh)}
.film .box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;clip-path:inset(var(--iy) var(--ix) var(--iy) var(--ix) round var(--r));background:#05070E}
.film .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,14,0) 45%,rgba(5,7,14,.62) 100%);opacity:0;pointer-events:none}
.film .cap{position:absolute;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9AA0B2}
.film .cap.top{top:max(28px,env(safe-area-inset-top,0px))}
.film .cap.low{bottom:max(26px,env(safe-area-inset-bottom,0px))}
.film .tc{font-variant-numeric:tabular-nums;color:#FAFAF8}
.film .line{position:absolute;left:var(--gut);right:var(--gut);max-width:16ch;font-size:clamp(34px,6.2vw,104px);line-height:.96;letter-spacing:-.04em;font-variation-settings:"wdth" 120,"wght" 800;text-wrap:balance;color:#FAFAF8;opacity:0;pointer-events:none}
@media(min-width:1000px){
  .film .cap{font-size:.9rem;letter-spacing:.1em}
  .film .line{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.05}
}

/* --- 7: концовка — как это работает, оффер, контакты ---
   z-index:1 по той же причине, что у .film: класс не .scene, порядок
   отрисовки над #smoke (z-index:0, fixed) иначе не гарантирован.
   margin-top:-2px убирает хairline-шов на стыке с .film: оба фона
   начинаются тем же #05070E, но соседние блоки с sticky-детьми внутри
   иногда дают подпиксельную щель на стыке — перекрываем её тем же цветом. */
.end{--fog-top:#1B2444;--fog-mid:#39456B;--navy:#0F1730;--rule:#E2E2DE;--on-dark:#FAFAF8;--on-dark-quiet:#9AA6CC;--line-dark:rgba(250,250,248,.22);
  position:relative;z-index:1;margin-top:-2px;container-type:inline-size;background:var(--paper);color:var(--ink)}
.end a{color:inherit;text-decoration:none}
/* Подсветки — не произвольный голубой, а те же c1/c2 эталонного шейдера дыма
   (js/smoke.js, см. CLAUDE.md), только в CSS и приглушённо: сама сцена дыма
   к этому моменту уже погашена и остановлена (js/main.js), здесь — только
   цитата её палитры. Переход в чёрное растянут и разбит доп. ступенью,
   чтобы не читался резкой границей сразу под фильмом. */
.end .s1{position:relative;color:var(--on-dark);
  background:radial-gradient(65% 45% at 80% 16%,rgba(125,140,168,.16),transparent 72%),radial-gradient(55% 40% at 12% 58%,rgba(56,74,107,.20),transparent 74%),linear-gradient(180deg,#05070E 0%,#0A0E1C 18%,var(--fog-top) 34%,var(--fog-mid) 68%,#8E9AB8 90%,var(--paper) 100%);
  padding:clamp(72px,9cqw,140px) clamp(20px,3.2cqw,48px) clamp(120px,14cqw,220px)}
.end .eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-quiet);font-variation-settings:"wdth" 110,"wght" 600}
.end .h1{margin-top:18px;max-width:14ch;font-size:clamp(40px,7.4cqw,112px);line-height:.98;letter-spacing:-.04em;font-variation-settings:"wdth" 120,"wght" 800;text-wrap:balance}
.end .steps{margin-top:clamp(48px,7cqw,104px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3cqw,48px);list-style:none;position:relative}
.end .step{border-top:1px solid var(--line-dark);padding-top:18px;position:relative}
.end .step::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--on-dark)}
.end .when{font-size:clamp(30px,3.6cqw,54px);line-height:1;letter-spacing:-.035em;font-variation-settings:"wdth" 118,"wght" 800}
.end .step h3{margin-top:18px;font-size:clamp(18px,1.7cqw,24px);letter-spacing:-.015em;font-variation-settings:"wdth" 108,"wght" 650}
.end .step p{margin-top:8px;max-width:30ch;color:#C9D1EA;font-size:clamp(15px,1.25cqw,18px);line-height:1.4;font-variation-settings:"wdth" 100,"wght" 400}
.end .s2{padding:0 clamp(20px,3.2cqw,48px);margin-top:calc(-1 * clamp(72px,8cqw,120px));position:relative}
.end .offer{background:var(--navy);color:var(--on-dark);border-radius:14px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4cqw,72px);align-items:center;padding:clamp(28px,4.4cqw,72px)}
.end .price small{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-quiet);font-variation-settings:"wdth" 110,"wght" 600}
.end .price b{display:block;margin-top:10px;font-size:clamp(96px,17cqw,260px);line-height:.82;letter-spacing:-.06em;font-variation-settings:"wdth" 125,"wght" 850;font-weight:850}
.end .offer h2{font-size:clamp(26px,3.2cqw,46px);line-height:1.04;letter-spacing:-.03em;font-variation-settings:"wdth" 114,"wght" 750;text-wrap:balance}
.end .offer p{margin-top:14px;max-width:44ch;color:#C9D1EA;font-size:clamp(16px,1.35cqw,19px);line-height:1.45}
.end .cta{margin-top:26px;display:inline-flex;align-items:center;gap:12px;background:var(--paper);color:var(--ink);border-radius:14px;padding:18px 28px;font-size:17px;font-variation-settings:"wdth" 108,"wght" 700;transition:gap .25s}
.end .cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.end .cta:hover{gap:18px}
.end .cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.end .note{margin-top:14px;font-size:14px;color:var(--on-dark-quiet)}
.end .s3{padding:clamp(72px,9cqw,150px) clamp(20px,3.2cqw,48px) clamp(28px,3cqw,44px)}
.end .who{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6cqw,110px);align-items:end}
.end .close{font-size:clamp(36px,5.8cqw,88px);line-height:.98;letter-spacing:-.04em;font-variation-settings:"wdth" 120,"wght" 800;text-wrap:balance}
.end .links{display:flex;flex-direction:column}
.end .links a{display:block;border-top:1px solid var(--ink);padding:16px 0 22px;transition:padding .3s}
.end .links a:last-child{border-bottom:1px solid var(--ink)}
.end .links a:hover{padding-left:10px}
.end .links small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);font-variation-settings:"wdth" 110,"wght" 600}
.end .links span{display:block;margin-top:8px;font-size:clamp(26px,3.1cqw,46px);line-height:1.05;letter-spacing:-.03em;font-variation-settings:"wdth" 116,"wght" 780;overflow-wrap:anywhere}
.end .links a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.end .foot{margin-top:clamp(56px,7cqw,110px);padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;font-size:13px;color:var(--quiet)}
.end .foot img{height:20px;opacity:.9}
@container (max-width:760px){
  .end .s1{padding-bottom:120px}
  .end .h1{font-size:clamp(40px,12.4cqw,60px)}
  .end .steps{grid-template-columns:1fr;gap:0;margin-top:44px}
  .end .step{padding:18px 0 28px;display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px}
  .end .step::before{display:none}
  .end .when{font-size:26px;grid-row:1 / span 2;line-height:1.05}
  .end .step h3{margin-top:0;font-size:19px}
  .end .step p{grid-column:2;margin-top:6px;font-size:15px}
  .end .s2{margin-top:-64px}
  .end .offer{grid-template-columns:1fr;padding:28px 22px 30px;gap:22px}
  .end .price b{font-size:clamp(104px,34cqw,150px)}
  .end .offer h2{font-size:28px}
  .end .cta{display:flex;justify-content:space-between;width:100%}
  .end .s3{padding-top:72px}
  .end .who{grid-template-columns:1fr;gap:36px}
  .end .close{font-size:clamp(36px,11.4cqw,52px)}
  .end .links span{font-size:clamp(24px,7.4cqw,32px)}
  .end .foot{flex-direction:column;align-items:flex-start;margin-top:56px}
}
@media (prefers-reduced-motion:reduce){.end *{transition:none!important}}
/* .end .s1 красит тёмный градиент сама на себе — max-width на ней сужал бы
   этот фон до узкой плашки по центру, чиним padding-inline: фон остаётся
   во всю ширину секции, читаемая колонка — через отступ. .s3 фона не
   красит, ей тот же приём безопасен. .s2 не трогаем: у неё нет своего
   фона, а .offer (нави-карточка «Пробный кадр») занимает 100% содержимого
   .s2, инсет — на самом .offer, у него есть свой фон, который должен
   остаться полным. Виден только от 1000px. */
@media(min-width:1000px){
  .end .s1,.end .s3{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  .end .offer{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  .end .eyebrow{font-size:.85rem}
  .end .h1{font-size:clamp(2.6rem,4vw,4.2rem)}
  .end .when{font-size:1.25rem;line-height:1;letter-spacing:-.01em}
  .end .step h3{font-size:clamp(20px,1.3cqw,24px)}
  .end .step p{font-size:1.15rem;line-height:1.5}
  .end .price small{font-size:.85rem}
  .end .links small{font-size:.85rem}
  .end .foot{font-size:.85rem}
}

@media(max-width:820px){
  .row{grid-template-columns:1fr}.sb{grid-template-columns:repeat(3,1fr)}.sb .c:nth-child(3n)::after,.sb .c:nth-child(3n)::before{display:none}.ta{grid-template-columns:repeat(4,1fr)}.locs.wide{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr}
  .sb{grid-template-columns:repeat(3,1fr)}
  .sb .c:nth-child(3n)::after,.sb .c:nth-child(3n)::before{display:none}
  .ta{grid-template-columns:repeat(4,1fr)}
}
@media(max-aspect-ratio:1/1){.line1{max-width:none;left:20px;right:20px}
  .l1b{margin-top:4px}.line2{top:calc(var(--hdr) + 16vh)}.lead{max-width:calc(100% - 52px)}.ln i{font-size:min(19px,4.5vw)}  /* 19 px — потолок: при 21 самая длинная строка
       упиралась в края и теряла последние буквы. Кегль идёт от ширины экрана,
       чтобы по бокам оставался воздух */
  /* подпись на телефоне шире лида на 6 px с каждой стороны и на кегль мельче:
     при 10 px её слова занимают 322 px и линейке не остаётся ничего */
  .cap{margin-inline:-12px}.capL,.capR{font-size:8px}.wide{display:none}.narrow{display:inline}}
@media(prefers-reduced-motion:reduce){.rv{transition:none}}


/* ===== лид-экран, телефон (до 640px) =====
   Финальные значения: лид крупнее и плотнее, подпись — лесенкой с коленом.
   Десктоп этим блоком не затрагивается. */
@media(max-width:640px){
  /* блок стоит ровно посередине между шапкой и верхушкой дома: при 26vh
     сверху оставалось 155 px, снизу 126 — теперь обе щели по ~140 */
  .line2{top:24.3vh}
  .lead{max-width:calc(100% - 66px)}          /* боковые поля 33 px */
  /* 22 px — потолок. Самая длинная строка при нём требует 402 px, а на 390
     в полях 33 px остаётся 324, поэтому на узких экранах кегль идёт от ширины:
     402/22 = 18,27em */
  .ln i{font-size:min(22px,calc((100vw - 66px) / 18.27));line-height:1.19;
    font-variation-settings:"wght" 440;color:var(--ink)}
  /* подпись: строка влево, под ней линейка до колена, спуск, строка вправо */
  /* высота блока: строка, зазор до линейки, спуск колена и вторая строка */
  .cap{display:block;position:relative;margin-top:47px;margin-inline:0;
    padding-bottom:calc(35px + 1.2em)}
  .capL,.capR{display:block;flex:none;font-size:12.5px;line-height:1.2;letter-spacing:.045em;
    font-variation-settings:"wght" 300;color:var(--ink);text-indent:0}
  .capL{text-align:left}
  /* вторая строка стоит ровно на уровне низа спуска: 11 px до линейки + 24 колена */
  .capR{position:absolute;right:0;top:calc(1.2em + 39px);text-align:right}
  .capRule{position:absolute;left:0;top:calc(1.2em + 11px);width:76%;height:1px;
    background:var(--muted);transform:scaleX(0);transform-origin:left center}
  .capKnee{display:block;position:absolute;left:76%;top:calc(1.2em + 11px);width:1px;height:24px;
    background:var(--muted);transform:scaleY(0);transform-origin:top center}

  /* хореография: строки лида, затем строка подписи, линейка, колено, вторая строка */
  .ln i{transition-duration:.55s}
  .line2.on .ln:nth-child(2) i{transition-delay:.09s}
  .line2.on .ln:nth-child(3) i{transition-delay:.18s}
  .capL{opacity:0;transform:translateX(-12px);
    transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
  .capR{opacity:0;transform:translateX(12px);
    transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
  .capRule{transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .capKnee{transition:transform .15s cubic-bezier(.16,1,.3,1)}
  .line2.on .capL{opacity:1;transform:none;transition-delay:.73s}
  .line2.on .capRule{transform:scaleX(1);transition-delay:1.03s}
  .line2.on .capKnee{transform:scaleY(1);transition-delay:1.43s}
  .line2.on .capR{opacity:1;transform:none;transition-delay:1.58s}
}
@media(max-width:640px) and (prefers-reduced-motion:reduce){
  .ln i,.capL,.capR{transition:opacity .3s;transform:none;filter:none}
  .capRule{transition:opacity .3s;transform:scaleX(1)}
  .capKnee{transition:opacity .3s;transform:scaleY(1)}
}

/* шапка: при выключенной анимации подложка меняется мгновенно */
@media(prefers-reduced-motion:reduce){
  .hdr{transition:background-color .2s,border-color .2s}
}


/* ===== лайтбокс раскадровки =====
   Свой, без библиотек: кадр вырастает из своей ячейки (FLIP), листается
   стрелками, клавишами и свайпом, закрывается Esc, крестиком, тапом мимо
   и свайпом вниз. */
.lbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.lbox[hidden]{display:none}
.lbBack{position:absolute;inset:0;background:rgba(7,11,27,.94);opacity:0;
  transition:opacity .2s linear}
.lbox.on .lbBack{opacity:1}
.lbImg{position:relative;max-width:92vw;max-height:86vh;object-fit:contain;border-radius:8px;
  transform-origin:top left;will-change:transform,opacity}
.lbImg.swap{opacity:0;transition:opacity .2s linear}
.lbBtn{position:absolute;width:44px;height:44px;border-radius:50%;padding:0;
  border:1px solid rgba(250,250,248,.3);background:transparent;cursor:pointer;
  opacity:0;transition:opacity .2s linear,border-color .2s}
.lbox.on .lbBtn{opacity:1}
.lbBtn:hover{border-color:rgba(250,250,248,.7)}
.lbBtn:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
/* стрелки и крестик рисуем штрихами, без шрифтовых иконок */
.lbBtn::before,.lbBtn::after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:11px;border-top:1.5px solid var(--paper);border-left:1.5px solid var(--paper)}
.lbPrev{left:max(16px,3vw)}
.lbNext{right:max(16px,3vw)}
.lbPrev::before{transform:translate(-30%,-50%) rotate(-45deg)}
.lbPrev::after{display:none}
.lbNext::before{transform:translate(-70%,-50%) rotate(135deg)}
.lbNext::after{display:none}
.lbClose{top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,3vw)}
/* крестик — две прямые линии, а не сомкнутые уголки: иначе выходил ромб */
.lbClose::before,.lbClose::after{width:16px;height:1.5px;border:0;background:var(--paper)}
.lbClose::before{transform:translate(-50%,-50%) rotate(45deg)}
.lbClose::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* название объекта сверху по центру — им подписана галерея кадров */
.lbTitle{position:absolute;left:0;right:0;top:calc(22px + env(safe-area-inset-top,0px));
  text-align:center;font-family:"Unbounded",system-ui,sans-serif;font-size:12px;line-height:1;
  text-transform:uppercase;letter-spacing:.095em;color:var(--paper);
  font-variation-settings:"wght" 270;opacity:0;transition:opacity .2s linear;pointer-events:none}
.lbox.on .lbTitle{opacity:1}
.lbTitle:empty{display:none}
.lbCount{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  text-align:center;font-family:"Unbounded",system-ui,sans-serif;font-size:12px;line-height:1;
  text-transform:uppercase;letter-spacing:.095em;color:var(--paper);
  font-variation-settings:"wght" 270;opacity:0;transition:opacity .2s linear}
@media(min-width:821px){.lbCount{font-size:13px}}
.lbox.on .lbCount{opacity:1}
.lbCount b{font-variation-settings:"wght" 270;font-weight:400}
.folders.noHover .folder:hover{transform:none}
/* на телефоне стрелок нет — там свайп */
@media(max-width:820px){.lbPrev,.lbNext{display:none}}
/* прокрутку запирает Lenis, а не overflow: смена overflow у html на телефоне
   меняет вьюпорт, и после закрытия вся сетка заметно дёргалась */
html.lbOpen .hdr{opacity:0;pointer-events:none;transition:opacity .2s}
@media(prefers-reduced-motion:reduce){
  .lbImg,.lbBack,.lbBtn,.lbCount{transition:opacity .2s}
}


/* кнопка к галерее кадров: во всю ширину плеера, ровно посередине между
   видео и нижней кромкой синего листа — отступ сверху равен паддингу секции */
.anchor{display:block;height:0;scroll-margin-top:120px}
/* .navy a красит ссылки листа и подчёркивает их — кнопке это не нужно,
   поэтому правило кнопки записано с той же специфичностью */
.navy .kadryBtn,.kadryBtn{display:flex;align-items:center;justify-content:center;gap:18px;
  width:100%;margin-top:56px;height:56px;border:1.5px solid var(--paper);border-radius:10px;
  background:transparent;color:var(--paper);cursor:pointer;
  font-family:"Unbounded",system-ui,sans-serif;font-size:13px;line-height:1;
  text-transform:uppercase;letter-spacing:.08em;font-variation-settings:"wght" 400;
  white-space:nowrap;text-decoration:none;border-style:solid;border-width:1.5px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .1s ease}
.kadryBtn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease}
@media(min-width:821px){.navy .kadryBtn,.kadryBtn{height:60px;font-size:14px;margin-top:72px}}
@media(hover:hover){
  .navy .kadryBtn:hover{background:var(--paper);border-color:var(--paper);color:#0F1730}
  .navy .kadryBtn:hover svg{transform:translateX(4px)}
}
.navy .kadryBtn:active{transform:scale(.99)}
.navy .kadryBtn:focus-visible{outline:2px solid #7A8CBE;outline-offset:3px}

/* крестик выхода на странице кадров: держится в углу на любой прокрутке */
.closePage{position:fixed;z-index:60;top:calc(18px + env(safe-area-inset-top,0px));
  right:max(16px,3vw);width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;
  background:rgba(250,250,248,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background-color .2s,border-color .2s}
.closePage::before,.closePage::after{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:1.5px;background:var(--ink)}
.closePage::before{transform:translate(-50%,-50%) rotate(45deg)}
.closePage::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(hover:hover){.closePage:hover{background:var(--ink);border-color:var(--ink)}
  .closePage:hover::before,.closePage:hover::after{background:var(--paper)}}
.closePage:focus-visible{outline:2px solid #7A8CBE;outline-offset:3px}
@media(max-width:820px){.closePage{width:40px;height:40px;top:calc(14px + env(safe-area-inset-top,0px))}
  .closePage::before,.closePage::after{width:13px}}

/* ===== страница «Кадры по объектам» ===== */
.kadry{position:relative;z-index:2;max-width:1200px;margin:0 auto;
  padding:18vh 44px 14vh}
.kadryTitle{max-width:none;margin-bottom:0}
.kadry .secHead{margin-bottom:clamp(36px,6vh,72px)}
.backLink{display:inline-block;margin-top:18px;scroll-margin-top:140px;font-family:"Unbounded",system-ui,sans-serif;
  font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.095em;
  font-variation-settings:"wght" 270;color:var(--muted);transition:color .2s}
.backLink:hover{color:var(--ink)}

/* сетка папок */
.folders{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:700px){.folders{grid-template-columns:repeat(2,1fr);gap:40px}}
@media(min-width:1000px){.folders{grid-template-columns:repeat(3,1fr)}}

/* папка: корпус с язычком, внутри стопка кадров.
   Тёмная и светлая различаются только набором переменных ниже — сама вёрстка
   одна. Обводки у тёмной нет, но рамка стоит прозрачная: иначе светлая была бы
   на 2 px крупнее и колонки не совпали бы по высоте. */
.folder{display:block;position:relative;padding-top:26px;color:var(--ink);
  --fBody:#0F1730;
  --fEdge:transparent;
  --fShadow:0 10px 28px rgba(7,11,27,.22);
  --fShadowUp:0 16px 36px rgba(7,11,27,.30);
  --fTabBg:var(--paper);
  --fTabEdge:var(--rule);
  --fTabInk:#5A5F69;
  --fName:var(--paper);
  --fMeta:#7A8CBE;
  --fEmpty:#3C4048}
/* светлые папки. До трёх колонок цвет идёт через одну — и на телефоне, и на
   планшете: при двух колонках чётность карточки совпадает с номером колонки.
   На широком экране цвет держит колонка: 1 и 3 тёмные, светлая только средняя,
   иначе на второй строке получается шахматка. */
@media(max-width:999.98px){ .folders .folder:nth-child(2n){
  --fBody:var(--paper);
  --fEdge:var(--rule);
  --fShadow:0 8px 22px rgba(7,11,27,.10);
  --fShadowUp:0 14px 30px rgba(7,11,27,.16);
  --fTabBg:#0F1730;
  --fTabEdge:#0F1730;
  --fTabInk:var(--paper);
  --fName:var(--ink);
  --fMeta:var(--muted);
  --fEmpty:var(--rule)} }
@media(min-width:1000px){ .folders .folder:nth-child(3n+2){
  --fBody:var(--paper);
  --fEdge:var(--rule);
  --fShadow:0 8px 22px rgba(7,11,27,.10);
  --fShadowUp:0 14px 30px rgba(7,11,27,.16);
  --fTabBg:#0F1730;
  --fTabEdge:#0F1730;
  --fTabInk:var(--paper);
  --fName:var(--ink);
  --fMeta:var(--muted);
  --fEmpty:var(--rule)} }
.folderTab{position:absolute;left:20px;top:0;width:96px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:var(--fTabBg);border:1px solid var(--fTabEdge);border-bottom:0;
  border-radius:8px 8px 0 0;font-family:"Unbounded",system-ui,sans-serif;
  font-size:11px;font-weight:800;color:var(--fTabInk);line-height:1}
/* корпус растёт от содержимого: обложка, название и метка лежат внутри него,
   поэтому ни высоты, ни aspect-ratio здесь нет. Раньше корпус был 4:3, а текст
   висел под его кромкой — и на тёмной карточке белое название оказывалось
   прямо на дыму */
.folderBody{position:relative;display:flex;flex-direction:column;padding:18px;
  background:var(--fBody);border:1px solid var(--fEdge);border-radius:16px;
  box-shadow:var(--fShadow);
  transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s cubic-bezier(.16,1,.3,1)}
/* одна обложка, без стопки за корпусом */
.folderCover{display:block;width:100%;aspect-ratio:5/3;border-radius:10px;overflow:hidden}
/* кадр наезжает внутри своей рамки, поэтому рамка и режет: масштаб на самой
   картинке, а не на обёртке */
.folderCover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .24s cubic-bezier(.16,1,.3,1)}
.folderCover.pusto{background:none;border:1px solid var(--fEmpty)}
.folderName{display:block;margin-top:24px;font-family:"Unbounded",system-ui,sans-serif;
  font-size:13px;line-height:1.2;font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;color:var(--fName)}
.folderNum{display:block;margin-top:6px;font-family:"Unbounded",system-ui,sans-serif;
  font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.095em;
  font-variation-settings:"wght" 270;color:var(--fMeta)}
@media(min-width:821px){
  .folderName{font-size:14px}
  /* подъём и наезд обложки — только там, где есть настоящий hover */
  @media(hover:hover){
    .folder:hover .folderBody{transform:translateY(-6px);box-shadow:var(--fShadowUp)}
    .folder:hover .folderCover img{transform:scale(1.03)}
  }
}
@media(max-width:820px){
  .kadry{padding:14vh 20px 12vh}
  .folderTab{width:80px;height:22px;left:16px}
  .folder{padding-top:22px}
}
/* каскад появления */
.folder{opacity:0;transform:translateY(24px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.folder.in{opacity:1;transform:none}
.folder.notReady{cursor:default}
.folderErr{font-family:"Unbounded",system-ui,sans-serif;font-size:13px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){
  .folder,.folderBody,.folderCover,.folderCover img{transition:opacity .3s;transform:none}
  .folder.in{transform:none}
}


/* плашка разворота: кейс раскрывается из рамки папки и складывается обратно */
.caseFlip{position:fixed;left:0;top:0;z-index:90;background:var(--paper);border-radius:14px;
  pointer-events:none;box-shadow:0 8px 24px rgba(7,11,27,.10)}

/* ===== страница кейса объекта ===== */
.case{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:96px 20px 40px}
html.booting .case{opacity:0}
@media(min-width:900px){.case{padding:140px 64px 40px}}
.rvc{opacity:0;transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.rvc.in{opacity:1;transform:none}

.caseBack{display:inline-block;font-family:"Unbounded",system-ui,sans-serif;font-size:9.5px;
  line-height:1;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  font-variation-settings:"wght" 270;transition:color .2s}
.caseBack:hover{color:var(--ink)}
.caseTitle{margin:28px 0 0;font-family:"Unbounded",system-ui,sans-serif;font-size:26px;
  line-height:1.05;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)}
.casePlace{margin-top:8px;font-family:"Unbounded",system-ui,sans-serif;font-size:13px;line-height:1.2;
  letter-spacing:.095em;font-variation-settings:"wght" 270;color:var(--ink)}
.caseFacts{display:flex;flex-wrap:wrap;align-items:center;margin-top:20px;
  font-family:"Unbounded",system-ui,sans-serif;font-size:11px;line-height:1;font-weight:800;
  text-transform:uppercase;letter-spacing:.10em;color:var(--muted)}
.caseFacts span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--muted);margin:0 8px;vertical-align:middle}
.caseLead{margin:22px 0 0;max-width:760px;font-family:"Unbounded",system-ui,sans-serif;
  font-size:12px;line-height:1.5;font-variation-settings:"wght" 300;color:var(--ink)}
@media(min-width:900px){
  .caseTitle{font-size:40px}.casePlace{font-size:16px}
  .caseLead{font-size:15px;line-height:1.55}
}

/* исходники */
.caseSheets{margin-top:26px}
.caseRow{display:flex;align-items:baseline;justify-content:space-between;
  font-family:"Unbounded",system-ui,sans-serif}
.caseRow b{font-size:11px;line-height:1;font-weight:800;text-transform:uppercase;
  letter-spacing:.10em;color:var(--muted)}
.caseRow i{font-style:normal;font-size:9.5px;line-height:1;text-transform:uppercase;
  letter-spacing:.12em;font-variation-settings:"wght" 270;color:var(--muted)}
.sheetsRow{display:flex;gap:10px;margin-top:20px;overflow-x:auto;padding:0 20px;margin-inline:-20px;
  scroll-snap-type:x mandatory;scroll-padding-left:20px;touch-action:pan-x;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start}
.sheetsRow::-webkit-scrollbar{display:none}
.sheetItem{flex:none;display:block;scroll-snap-align:start}
.sheetCard{display:block;height:120px;padding:0;border:0;background:none;border-radius:8px;
  overflow:hidden;cursor:zoom-in}
.sheetCard img{height:100%;width:auto;display:block;border-radius:8px}
/* лист с подписью: ширину задаёт карточка, иначе длинная подпись растягивала
   ячейку вчетверо и наезжала на соседнюю. Листы без подписи живут как жили */
.sheetItem.withCap{width:200px}
.sheetItem.withCap .sheetCard{width:100%;height:auto}
.sheetItem.withCap .sheetCard img{width:100%;height:auto}
/* подпись листа: тот же регистр и трекинг, что у метки блока */
.sheetCap{display:block;margin-top:10px;font-style:normal;
  font-family:"Unbounded",system-ui,sans-serif;font-size:9.5px;line-height:1.3;
  text-transform:uppercase;letter-spacing:.10em;font-variation-settings:"wght" 270;
  color:var(--muted)}
/* текст под блоком листов */
.caseNote{margin:22px 0 0;max-width:760px;font-family:"Unbounded",system-ui,sans-serif;
  font-size:11.5px;line-height:1.55;font-variation-settings:"wght" 300;color:var(--quiet)}
@media(min-width:900px){
  /* колонок столько, сколько листов: три чертежа стоят как стояли,
     пять планировок встают одной строкой */
  .sheetsRow{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:20px;
    overflow:visible;padding:0;margin-inline:0}
  /* на широком экране ширину даёт колонка сетки, фикс 200px с телефона снимаем */
  .sheetItem,.sheetItem.withCap{width:100%}
  .sheetCard{height:auto;width:100%}
  .sheetCard img{width:100%;height:auto}
  .sheetCap{font-size:10.5px}
  .caseNote{font-size:13px;line-height:1.6}
}

/* кадры: лента на узком экране.
   Никакой карточки вокруг — лента лежит прямо на дыму. Классы свои (.caseFrames),
   с именами остальной страницы не пересекаются.
   Кадр вписывается сразу по двум сторонам: упирается в высоту ленты и никогда
   не шире экрана минус поля минус 22 px, оставленных под край следующего кадра.
   object-fit не задаём вовсе — размер целиком считает сам браузер по пропорции,
   поэтому вертикальные выходят высокими и узкими, горизонтальные ниже и шире.
   Высоту ленты кладёт скрипт в --reelH: проценты внутри кнопки-обёртки
   не от чего считать, а переменная работает и для неё, и для картинки. */
.caseFrames{margin-top:22px}
/* Нативного залипания здесь нет намеренно: доводит до центра скрипт.
   Пока работали оба, движок тянул ленту к своей точке, скрипт к своей —
   кадр доезжал рывками и отскакивал. Хозяин один. */
.caseReel{display:flex;gap:12px;align-items:center;position:relative;
  overflow-x:auto;overflow-y:visible;
  padding:0 20px;margin-inline:-20px;touch-action:pan-x;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:none;border:0;box-shadow:none;border-radius:0;
  min-height:380px}
.caseReel::-webkit-scrollbar{display:none}
/* кадр стоит серединой к середине ленты и по центру её высоты.
   Боковые приглушены, центральный в полную силу — класс .on ставит наблюдатель. */
.caseShot{flex:0 0 auto;width:auto;height:auto;
  max-height:var(--reelH,380px);max-width:calc(100vw - 62px);
  padding:0;border:0;background:none;box-shadow:none;border-radius:0;
  opacity:.55;transform:scale(.97);
  transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .26s cubic-bezier(.16,1,.3,1);
  cursor:zoom-in;display:block;line-height:0}
.caseShot.on{opacity:1;transform:none}
.caseShot img{width:auto;height:auto;
  max-height:var(--reelH,380px);max-width:calc(100vw - 62px);
  display:block;border-radius:12px}
.caseMeta{display:flex;align-items:baseline;justify-content:space-between;
  margin-top:14px;font-family:"Unbounded",system-ui,sans-serif}
.caseMeta b{font-size:11px;line-height:1;font-weight:800;text-transform:uppercase;
  letter-spacing:.10em;color:var(--ink)}
.caseMeta i{font-style:normal;font-size:9.5px;line-height:1;letter-spacing:.10em;
  font-variation-settings:"wght" 270;color:var(--muted);transition:opacity .18s linear}
.caseBar{position:relative;height:3px;margin-top:20px;background:var(--rule)}
.caseBar span{position:absolute;top:0;left:0;height:3px;background:var(--ink);
  transition:left .2s ease}
@media(prefers-reduced-motion:reduce){
  .caseShot{transition:opacity .2s linear;transform:none}
  .caseShot.on{transform:none}
}

/* кадры: кладка на широком экране */
.masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.mItem{display:block;width:100%;padding:0;border:0;background:none;border-radius:12px;
  overflow:hidden;cursor:zoom-in;transition:transform .2s ease}
.mItem img{width:100%;height:auto;display:block;border-radius:12px}
@media(hover:hover){.mItem:hover{transform:scale(1.02)}}

/* низ кейса */
.caseFoot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);margin-bottom:40px;
  font-family:"Unbounded",system-ui,sans-serif}
.caseFoot b{font-size:11px;line-height:1;font-weight:800;text-transform:uppercase;
  letter-spacing:.10em;color:var(--muted)}
.caseFoot a{font-size:9.5px;line-height:1;text-transform:uppercase;letter-spacing:.12em;
  font-variation-settings:"wght" 270;color:var(--ink);transition:opacity .2s}
.caseFoot a:hover{opacity:.6}
.caseErr{font-family:"Unbounded",system-ui,sans-serif;font-size:13px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){
  .rvc{transition:opacity .3s;transform:none}
  .mItem,.reelMeta i{transition:none}
}

/* =====================================================================
   ДЕСКТОП, ПРАВКИ 22.10: единая узкая колонка по центру, компактная
   капсула, меньше крупных заголовков и картинок. Всё внутри
   @media(min-width:1000px): мобилка (<1000px) не затронута.
   Размер основного текста (абзацы, карточки, пункты) НЕ уменьшаем —
   сужаем колонку и убираем лишний размер у заголовков, плашек и картинок.
   Блок стоит последним в файле намеренно: он перекрывает прежние
   десктопные значения (--cap 1240/1400, шапка 1280, плашка внизу и т.д.).
   ===================================================================== */
@media(min-width:1000px){
  :root{--cap:1120px;--gutter:clamp(32px,5vw,96px);--hdr:96px}

  /* шапка: узкая капсула по центру вместо полной ширины */
  .hdr{top:16px;left:0;right:0;margin-inline:auto;width:min(800px,calc(100% - 2*var(--gut)));
    height:54px;padding:0 7px 0 24px;gap:12px}
  .hdr .logo{height:17px}
  .hdr nav{gap:2px;font-size:14.5px}
  .hdr nav a{padding:6px 12px;gap:6px}
  .write{height:40px;padding:0 18px;font-size:14.5px}

  /* первый экран: нижняя плашка «Было — стало» убрана; верхняя надпись
     чуть выше, чтобы дольше оставаться в чистом кадре */
  .heroDone{display:none!important}
  #heroTop{top:calc(var(--hdr) + 2vh)}

  /* листы: колонка контента по центру, фон листа остаётся полноширинным */
  .sheet{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  #sheet{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  .navy{padding:64px 48px 56px}

  /* заголовки секций: по центру листа и спокойнее по размеру */
  .secHead .secTitle{display:block;width:100%;text-align:center}
  .secHead .secTitle .shA,.secHead .secTitle .shB{width:100%;margin-inline:0;text-align:center;text-indent:0}
  .shA{font-size:clamp(2.1rem,3.1vw,3rem)}
  .shB{font-size:1.05rem}
  .rndLead{max-width:52ch}
  .kit .secTitle,.kit .secTitle .shA,.kit .secTitle .shB{text-align:left}
  .kit .secHead .secTitle .shB{margin-inline:0}

  /* до/после: целиком в кадре — ширина считается от высоты экрана */
  .cmp{margin-top:clamp(32px,5vh,64px);margin-inline:auto;
    width:min(100%,calc((100vh - 150px)*2400/1792))}

  /* карточки «Рендеры» чуть плотнее */
  .cards{gap:20px}
  .card{padding:clamp(26px,2.1vw,32px)}

  /* ролики: список и экран уже, номер и заголовок объекта без гигантизма */
  .reels .in{padding-block:clamp(56px,6vw,96px)}
  .reels .in{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  .reels .pj .n{font-size:clamp(26px,2.8vw,42px)}
  .reels .box{max-width:min(100%,840px)}

  /* цены: колонка 1120, всё помещается в экран */
  .kit>.in{--cap:1120px;padding-inline:max(var(--gutter),calc((100% - var(--cap))/2));
    padding-block:clamp(56px,6vw,96px) clamp(48px,5vw,80px)}
  .kitHead{gap:24px}
  .kitSteps{margin-top:24px}
  .kit .pcards{margin-top:24px;gap:16px}
  .kit .pcard{padding:24px}
  .kit .step i{font-size:3.4rem}
  .kit .pcard h3{margin-top:16px}
  .kit .pr{margin-top:16px}
  .kit .fit{min-height:0}
  .kit .unit{min-height:0}
  .choice{padding:14px 20px}
  .choiceBody b{font-size:18px}
  .choiceBody small{font-size:15px}
  .kit .terms{margin-top:32px}
  .kit .go{margin-top:32px}

  /* конец: плашка «Пробный кадр» компактная, цифра 0 ₽ без гигантизма */
  .end .s1{padding-block:clamp(56px,6vw,96px) clamp(96px,10vw,150px)}
  .end .h1{font-size:clamp(2.2rem,3.4vw,3.2rem)}
  .end .steps{margin-top:40px}
  .end .when{font-size:clamp(26px,2.3vw,34px)}
  .end .s2{padding-inline:max(var(--gutter),calc((100% - var(--cap))/2))}
  .end .offer{padding:36px 44px;gap:40px;grid-template-columns:auto minmax(0,1fr);
    padding-inline:44px}
  .end .price b{font-size:clamp(84px,8vw,120px)}
  .end .offer h2{font-size:clamp(24px,2.2vw,32px)}
  .end .offer p{font-size:1.05rem}
  .end .cta{margin-top:20px;padding:15px 24px}
  .end .s3{padding-top:clamp(56px,6vw,96px)}
  .end .close{font-size:clamp(2rem,3.4vw,3.2rem)}
  .end .links span{font-size:clamp(22px,2vw,30px)}
}

/* =====================================================================
   ДЕСКТОП, ПРАВКИ 22.10 (вечер): синий лист внахлёст, мельче заголовок
   и надпись на паузе, описания шагов в две колонки, блок «Ролики»
   как «экран слева + список объектов справа». Только от 1000px.
   ===================================================================== */
@media(min-width:1000px){
  /* 1. «От чертежа до комплекта»: синий лист до краёв, поверх белого,
     скруглённый верх, неба по бокам нет. Текст стоит там же, где стоял
     (полоса cap + 48px внутреннего поля бывшей плашки) */
  #sheet{background:#0F1730;border-radius:28px;margin-top:-28px;min-height:0;
    box-shadow:0 -30px 60px -30px rgba(7,11,27,.22);
    padding-block:72px 80px;
    padding-inline:calc(max(var(--gutter),calc((100% - var(--cap))/2)) + 48px)}
  #sheet .navy{background:transparent;border-radius:0;box-shadow:none;padding:0}

  /* 4-6. описание шага — в две колонки: слева номер и название,
     справа текст половинной ширины */
  .navy .pStep .k{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:48px;align-items:start;border-top:1px solid #3C4048;padding-top:22px}
  .navy .pStep .k p{margin:0;padding:0;border-top:0;max-width:34em}
  .navy .pStep .k .kTop{padding-top:.35em}
  .pStep .slot,.pStep .frames,.pStep .reelBox{margin-top:28px}

  /* 2. надпись на паузе: меньше, без размытия, оба слова сразу */
  .pz1{font-size:clamp(22px,2.4vw,36px)}
  .pz2{font-size:clamp(13px,1.15vw,17px);margin-top:8px}
  .pz1 span,.pz2 span{transform:translateY(10px);filter:none;
    transition:opacity .5s ease,transform .5s ease}
  .pause.on .pz1 span:nth-child(2){transition-delay:.04s}
  .pause.on .pz2 span:nth-child(1){transition-delay:.12s}
  .pause.on .pz2 span:nth-child(2){transition-delay:.2s}

  /* 3. главный экран: «AI-студия» и лид мельче */
  .l1a{font-size:clamp(30px,3.2vw,48px)}
  .l1b{font-size:clamp(15px,1.7vw,26px);margin-top:4px}
  .heroH1{font-size:clamp(23px,2.05vw,30px)}
  .heroOver{font-size:12.5px}

  /* 7. ролики: слева экран выбранного объекта, справа компактный список.
     li развёрнуты в display:contents, поэтому и кнопка объекта, и его отсек —
     прямые элементы сетки. Видим только отсек открытого объекта. */
  .reels .idx{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:40px;row-gap:0;
    align-items:start;margin-top:32px;border:0}
  .reels .idx>li{display:contents;border:0;counter-increment:none}
  .reels .idx .pj{counter-increment:n}   /* li без бокса счётчик не считает */
  .reels .idx .panel{grid-column:1;grid-row:1 / span 40;padding:0;
    position:sticky;top:calc(var(--hdr) - 8px);align-self:start}
  .reels .box{max-width:none}
  .reels .idx .pj{grid-column:2;grid-template-columns:104px minmax(0,1fr) auto;
    gap:14px;padding:10px 0;border-top:1px solid rgba(16,19,23,.22)}
  .reels .idx>li:last-of-type .pj{border-bottom:1px solid rgba(16,19,23,.22)}
  .reels .pj .pic{order:-1;border-radius:6px}
  .reels .pj .n{font-size:19px;letter-spacing:-.02em;line-height:1.15;
    font-variation-settings:"wdth" 112,"wght" 760}
  .reels .pj .n::before{display:inline;margin:0 10px 0 0;font-size:12px}
  .reels .pj .c{font-size:13px}
  .reels .pj:hover .n{transform:none}
  .reels .idx>li.open .pj{background:rgba(255,255,255,.5)}
}

@media(min-width:1000px){.kit .terms{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:20px!important}.kit .terms>*{min-width:0}}