/* ─────────────────────────────────────────────────────────
   KADR — витрина. Светлая, редакционная.
   Отдельная от рабочего места: там тёмный интерфейс, потому что
   смотрят на кадры; здесь смотрят на страницу, поэтому бумага.
   ───────────────────────────────────────────────────────── */

/* Палитра, шкала и гарнитуры — в токены.css, он подключается первым.
   Здесь только то, что относится к самой витрине. */

*,*::before,*::after{ box-sizing:border-box; }
/* Кнопки и поля не наследуют гарнитуру сами — иначе браузер ставит Arial. */
button,input,textarea,select{ font:inherit; }
figure,figcaption,h1,h2,h3,p,ul,li,dl,dd,table{ margin:0; }
ul{ padding:0; list-style:none; }

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

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
:where(a,button,input,summary):focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.lab{
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ─────────── шапка ─────────── */
.top{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top-in{ display:flex; align-items:center; gap:var(--s6); height:62px; }
.mark{
  font-family:var(--disp); font-weight:800; font-size:1.1875rem;
  letter-spacing:-.03em; display:flex; align-items:center; gap:9px;
}
.mark i{ width:9px; height:16px; background:var(--acc); display:block; }
/* Меню пряталось ниже 880 px и ничем не заменялось: на телефоне
   «Работы, Модели, Цена, API, Вопросы» становились недостижимы, кроме
   как пролистать всю страницу целиком. Теперь оно не исчезает, а
   переезжает под шапку лентой с прокруткой пальцем. */
.menu{
  display:flex; gap:var(--s4); margin-left:auto; font-size:.9375rem;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  max-width:100%; white-space:nowrap;
}
.menu::-webkit-scrollbar{ display:none; }
@media (min-width:880px){ .menu{ gap:var(--s5); overflow:visible; } }
@media (max-width:879px){
  .top .wrap{ flex-wrap:wrap; }
  .menu{
    order:9; width:100%; margin:var(--s3) 0 0; padding-top:var(--s3);
    border-top:1px solid var(--line-2); font-size:.875rem;
  }
  .menu a{ padding:6px 0; }
}
.menu a{ color:var(--dim); transition:color .2s var(--ease); }
.menu a:hover{ color:var(--ink); }

.cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 var(--s5); border:1px solid transparent;
  font:inherit; font-weight:600; font-size:.9375rem; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cta-1{ background:var(--acc); color:var(--on-acc); }
.cta-1:hover{ background:var(--acc-hi); }
.cta-2{ border-color:var(--line-2); }
.cta-2:hover{ border-color:var(--ink); }
.top .cta{ margin-left:auto; min-height:38px; padding:0 var(--s4); font-size:.875rem; }
@media (min-width:880px){ .top .cta{ margin-left:0; } }

/* ─────────── первый экран ─────────── */
.hero{ padding-block:var(--s9) var(--s7); }
h1{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(2.6rem,7.4vw,7rem); line-height:.9;
  letter-spacing:-.05em; text-wrap:balance; max-width:15ch;
}
h1 em{ font-style:normal; color:var(--acc); }
.stand{
  margin-top:var(--s5); max-width:44ch;
  font-size:1.125rem; color:var(--ink-2);
}
.hero-row{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.hero-facts{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6);
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line);
}
.hero-facts b{ font-weight:600; color:var(--ink); }

/* ─────────── лента работ ─────────── */
.bands{ padding-block:var(--s6) var(--s8); overflow:hidden; }
.band-h{ padding-inline:var(--pad);
  display:flex; align-items:baseline; gap:var(--s4);
  margin-bottom:var(--s4); flex-wrap:wrap;
}
.band-h p{ color:var(--dim); font-size:.9375rem; max-width:52ch; }

/* Ленты идут непрерывно — по решению владельца. Метка модели проявляется
   на движущейся плитке, поэтому останавливать ничего не нужно. */
.track{
  display:flex; width:max-content; gap:var(--s3);
  animation:ход var(--скорость,64s) linear infinite;
  will-change:transform;
}
.track.rev{ animation-direction:reverse; }
.track + .track{ margin-top:var(--s3); }
@keyframes ход{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - var(--s3)/2)); } }

.strip{ display:flex; gap:var(--s3); }
.work{
  position:relative; height:min(46vh,340px); flex:none;
  overflow:hidden; background:var(--paper-2);
}
.work img{ height:100%; width:auto; transition:transform .5s var(--ease); }
.work:hover img{ transform:scale(1.04); }

/* модель проявляется при наведении */
.chip{
  position:absolute; inset:auto var(--s3) var(--s3) var(--s3);
  display:flex; align-items:center; gap:var(--s3);
  padding:9px var(--s4); background:rgba(14,14,17,.86);
  backdrop-filter:blur(8px); color:#F6F5F2;
  opacity:0; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.work:hover .chip,.work:focus-within .chip{ opacity:1; transform:none; }
.chip .m{ font-weight:600; font-size:.875rem; white-space:nowrap; }
.chip .ar{
  margin-left:auto; font-size:.75rem; letter-spacing:.08em;
  color:rgba(246,245,242,.6); font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  .track{ animation:none; overflow-x:auto; scrollbar-width:thin; }
  .work{ opacity:1; animation:none; }
  .work img{ transition:none; }
  .work:hover img{ transform:none; }
  .chip{ opacity:1; transform:none; }
}

/* ─────────── секции ─────────── */
section{ scroll-margin-top:76px; }
h2{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:1;
  letter-spacing:-.04em; text-wrap:balance;
}
.sec-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s4) var(--s7); }
.sec-h p{ color:var(--dim); max-width:46ch; margin-left:auto; }

/* модели */
.models{ padding-block:var(--s9) var(--s8); }
.mtable{ margin-top:var(--s7); border-top:1px solid var(--line-2); }
.mrow{
  display:grid; gap:var(--s2) var(--s5); padding-block:var(--s5);
  border-bottom:1px solid var(--line);
  grid-template-columns:1fr auto;
  align-items:baseline;
}
@media (min-width:820px){
  .mrow{ grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto auto; }
}
.mname{ font-weight:600; font-size:1.0625rem; }
.mdesc{ color:var(--dim); font-size:.9375rem; }
.mar{ color:var(--dim); font-size:.8125rem; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.mprice{
  font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:1.0625rem;
}
.mprice span{ color:var(--dim); font-weight:400; font-size:.8125rem; }

/* цена */
.price{ padding-block:var(--s8); background:var(--paper-2); border-block:1px solid var(--line); }
.calc{ display:grid; gap:var(--s7); margin-top:var(--s7); align-items:start; }
@media (min-width:980px){ .calc{ grid-template-columns:minmax(0,1fr) 360px; gap:var(--s8); } }
.field-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s4); }
.count{ font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:24px;
  background:var(--line-2); cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px;
  border-radius:50%; background:var(--acc); border:3px solid var(--paper-2); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--acc);
  border:3px solid var(--paper-2); cursor:grab;
}
.ticks{ display:flex; justify-content:space-between; margin-top:var(--s3); }
/* Факт вместо решения: цена одна и её не выбирают. Левая узкая рамка —
   не кнопка и не карточка, а сноска, которой доверяют не глядя. */
.calc-факт{
  margin-top:var(--s6); padding:var(--s4) var(--s5);
  border-left:2px solid var(--acc); background:var(--acc-fog);
  font-size:.9375rem; line-height:1.5;
}
.calc-факт b{ display:block; font-family:var(--disp); font-size:1.0625rem;
  font-weight:700; margin-bottom:2px; }

.total{ padding:var(--s6); background:var(--deep); color:var(--on-deep); }
.total .lab{ color:color-mix(in srgb,var(--on-deep) 60%,transparent); }
.tsum{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(2.4rem,6vw,3.4rem); line-height:1;
  letter-spacing:-.04em; margin-block:var(--s3) var(--s2);
  font-variant-numeric:tabular-nums;
}
.tsub{ color:color-mix(in srgb,var(--on-deep) 72%,transparent); font-size:.9375rem; }
.total .cta{ width:100%; margin-top:var(--s5); }
.tfine{ margin-top:var(--s4); font-size:.875rem; color:color-mix(in srgb,var(--on-deep) 60%,transparent); }

/* как это работает */
.how{ padding-block:var(--s9); }
.steps{ display:grid; gap:var(--s6); margin-top:var(--s7); counter-reset:ш; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); gap:var(--s7); } }
.step{ padding-top:var(--s4); border-top:2px solid var(--ink); }
.step::before{
  counter-increment:ш; content:counter(ш);
  display:block; font-family:var(--disp); font-weight:700;
  font-size:.875rem; color:var(--acc); margin-bottom:var(--s3);
}
.step h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em; }
.step p{ margin-top:var(--s3); color:var(--dim); font-size:.9375rem; }

/* вопросы */
.faq{ padding-block:var(--s7) var(--s9); }
.qs{ margin-top:var(--s6); border-top:1px solid var(--line-2); }
details{ border-bottom:1px solid var(--line); }
summary{
  padding-block:var(--s5); cursor:pointer; list-style:none;
  font-weight:600; font-size:1.0625rem;
  display:flex; align-items:center; gap:var(--s4);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:''; margin-left:auto; width:11px; height:11px; flex:none;
  border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg) translateY(-3px); transition:transform .25s var(--ease);
}
details[open] summary::after{ transform:rotate(225deg) translateY(-3px); }
details p{ padding-bottom:var(--s5); color:var(--dim); max-width:64ch; }

/* подвал */
.foot{ padding-block:var(--s8); background:var(--deep-2); color:var(--on-deep); }
.foot h2{ max-width:14ch; }
.foot .cta-2{ border-color:color-mix(in srgb,var(--on-deep) 30%,transparent); color:var(--on-deep); }
.foot .cta-2:hover{ border-color:var(--on-deep); }
.foot-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s6);
  margin-top:var(--s8); padding-top:var(--s5);
  border-top:1px solid color-mix(in srgb,var(--on-deep) 20%,transparent);
}
.foot .lab{ color:color-mix(in srgb,var(--on-deep) 55%,transparent); }
.foot nav{ display:flex; flex-wrap:wrap; gap:var(--s5); font-size:.9375rem; }
.foot nav a{ color:color-mix(in srgb,var(--on-deep) 70%,transparent); }
.foot nav a:hover{ color:var(--on-deep); }
.foot .mark i{ background:var(--acc); }


/* Токены ночной темы живут в токены.css. Здесь — только то, что
   нельзя выразить токеном: подложки, картинки, состояния. */

/* тёмный блок «К оплате» на тёмном фоне потерялся бы — поднимаем */
/* Подложка плитки и обводка бегунка берутся из токенов, поэтому
   разводить их по темам отдельно больше не нужно. */
.work{ background:var(--paper-3); }

/* ─────────── переключатель темы ─────────── */
.theme{
  width:36px; height:36px; flex:none; margin-left:var(--s4);
  display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--line-2); color:var(--ink); font:inherit;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.theme:hover{ border-color:var(--ink); }
.theme svg{ width:16px; height:16px; }
.theme .луна{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .солнце{ display:none; }
  :root:not([data-theme="light"]) .theme .луна{ display:block; }
}
:root[data-theme="dark"] .theme .солнце{ display:none; }
:root[data-theme="dark"] .theme .луна{ display:block; }
:root[data-theme="light"] .theme .солнце{ display:block; }
:root[data-theme="light"] .theme .луна{ display:none; }

/* ─────────── появление при прокрутке ─────────── */
.rise{ opacity:0; transform:translateY(18px); }
.rise.in{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .rise,.rise.in{ opacity:1; transform:none; transition:none; }
}

/* кадры ленты проявляются каскадом при первом показе */
.work{ opacity:0; animation:проявить .6s var(--ease) forwards; }
@keyframes проявить{ to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .work{ opacity:1; animation:none; }
}

/* ─────────── премиальный слой ─────────── */

/* тонкое зерно поверх всего: убирает «плоскость» больших заливок */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .grain{ opacity:.7; mix-blend-mode:soft-light; }
}
:root[data-theme="dark"] .grain{ opacity:.7; mix-blend-mode:soft-light; }

/* первый экран: текст слева, действие справа */
.hero-grid{ display:grid; gap:var(--s6); margin-top:var(--s6); align-items:end; }
@media (min-width:980px){
  .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:var(--s8); }
  .hero-side{ text-align:right; }
  .hero-side .hero-row{ justify-content:flex-end; }
  .hero-side .hero-facts{ justify-content:flex-end; }
}
.hero-side .hero-row{ margin-top:0; }
.hero{ padding-block:var(--s9) var(--s6); }

/* заголовок ленты */
.band-h{ max-width:var(--max); margin:0 auto var(--s5); }
.band-h h2{ font-size:clamp(1.7rem,3.6vw,2.9rem); }

/* плитка: рамка тонкая, тень мягкая, наведение сдержанное */
.work{
  border:1px solid var(--line);
  box-shadow:0 12px 40px -18px rgba(0,0,0,.55);
}
.work:hover{ z-index:2; }
.work:hover img{ transform:scale(1.05); }

/* метка: модель, стиль и пропорция */
.chip{ flex-wrap:wrap; gap:6px var(--s3); }
.chip .st{
  font-size:.75rem; padding:2px 8px; border:1px solid rgba(246,245,242,.28);
  color:rgba(246,245,242,.82); white-space:nowrap;
}

/* ползунок: заполненная часть до бегунка */
input[type=range]{
  background:linear-gradient(to right,
    var(--acc) 0 var(--доля,10%), var(--line-2) var(--доля,10%) 100%);
}

/* итог крупнее и с моноширинными цифрами */
.tsum{ font-variant-numeric:tabular-nums; letter-spacing:-.05em; }
.count{ letter-spacing:-.03em; }

/* строки моделей подсвечиваются при наведении */
.mrow{ transition:background .25s var(--ease); }
.mrow:hover{ background:color-mix(in srgb,var(--ink) 4%,transparent); }

/* кнопки: мягкий подъём */
.cta{ transition:background .2s var(--ease), color .2s var(--ease),
      border-color .2s var(--ease), transform .2s var(--ease); }
.cta:hover{ transform:translateY(-1px); }
.cta:active{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .cta:hover,.work:hover img{ transform:none; }
}


/* ─────────── сравнение цен ───────────
   Не карточки, а строки таблицы: сравнение читается столбцом, а карточка
   вокруг каждой строки — пункт 15 чек-листа запретов. */
.против{ padding-block:var(--s9) var(--s8); }
.сравн{ margin-top:var(--s7); border-top:1px solid var(--line-2); }

.ср-ряд{
  display:grid; gap:var(--s2) var(--s5);
  grid-template-columns:minmax(0,1fr) auto;
  padding-block:var(--s5);
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
@media (min-width:820px){
  .ср-ряд{ grid-template-columns:minmax(0,1fr) 9rem 9rem 11rem; }
}

.ср-шапка{
  padding-block:var(--s3);
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
}
@media (max-width:819px){
  /* на узком экране шапка таблицы бесполезна: колонок всё равно две */
  .ср-шапка{ display:none; }
}

.ср-имя{ font-weight:600; font-size:1.0625rem; }
.ср-их{
  color:var(--dim); font-variant-numeric:tabular-nums;
  text-decoration:line-through; text-decoration-thickness:1px;
}
.ср-наш{
  color:var(--acc); font-weight:600;
  font-variant-numeric:tabular-nums; font-size:1.125rem;
}
.ср-раз{ color:var(--dim); font-size:.9375rem; white-space:nowrap; }
@media (max-width:819px){
  .ср-их,.ср-наш,.ср-раз{ font-size:.9375rem; }
  .ср-раз{ grid-column:1 / -1; }
}

.ср-сноска{
  margin-top:var(--s5); max-width:64ch;
  font-size:.875rem; color:var(--dim); line-height:1.6;
}

/* ─────────── раздел про API ─────────── */
.апи-блок{
  padding-block:var(--s9);
  background:var(--paper-2);
  border-block:1px solid var(--line);
}
.апи-сетка{ display:grid; gap:var(--s7); align-items:center; }
@media (min-width:1000px){
  .апи-сетка{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s8); }
}
.апи-лид{
  margin-top:var(--s5); max-width:46ch;
  font-size:1.0625rem; color:var(--ink-2);
}
.апи-блок .lab{ margin-bottom:var(--s3); }
.апи-блок .hero-row{ margin-top:var(--s6); }

.апи-плюсы{ margin-top:var(--s5); display:grid; gap:var(--s3); }
.апи-плюсы li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3);
  color:var(--dim); font-size:.9375rem; line-height:1.6;
}
.апи-плюсы li::before{
  content:''; width:6px; height:6px; margin-top:.62em;
  background:var(--acc);
}

/* Текст пункта одной ячейкой: иначе <span> и текстовые узлы становятся
   отдельными ячейками сетки и абзац рассыпается по словам. */
.апи-плюсы .пт{ display:block; min-width:0; }

.апи-пример{
  margin:0; padding:var(--s5);
  background:var(--deep); color:var(--on-deep);
  border:1px solid var(--line);
  overflow-x:auto;
  font-size:.8125rem; line-height:1.65;
}
.апи-пример code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  /* Переносим по словам: горизонтальная прокрутка внутри блока кода
     на витрине не нащупывается, и строка выглядела просто обрезанной. */
  white-space:pre-wrap;
  word-break:break-word;
}