/* Design read: portfolio for biржи-clients scanning fast, confident technical-craft
   vibe, real screenshots as case art, dark near-black ground + single lime accent,
   Outfit display (not Inter), sharp/soft radius lock, asymmetric hero.
   Dials: VARIANCE 8 / MOTION 6 / DENSITY 3 (portfolio preset). */

:root{
  --bg:#0c0e10;
  --bg-2:#131619;
  --line:rgba(255,255,255,.10);
  --text:#f2f4f2;
  --muted:#9aa39c;
  --accent:#c6ff5c;
  --accent-ink:#0c0e10;
  --radius:14px;
  --radius-pill:999px;
  --maxw:1240px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:104px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Outfit',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;margin:0;letter-spacing:-.01em}
p{margin:0;color:var(--muted);line-height:1.55}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:2px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:var(--radius-pill);
  font-weight:600;font-size:15px;white-space:nowrap;
  /* 17.09 правка: живая "магнитная" кнопка вместо статичного translateY(-1px) —
     transform теперь ставит JS (app.js, initMagneticButtons) на каждый mousemove
     внутри кнопки, а пружинный cubic-bezier с перелётом (>1) как раз и даёт то
     "желе"/"ходит ходуном" ощущение, о котором просила Светлана (см. референс
     Floria — кнопка "Заказать по индивидуальному заказу", проверено численно:
     на hover реально меняется transform, не просто цвет). */
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .18s, border-color .18s, color .15s;
  will-change:transform;
}
.btn:active{transform:scale(.94)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ===== header — 17.09: убрана "плашка" (капсула-подложка) по просьбе
   Светланы — лого/нав/кнопки теперь свободно на странице, не в общей
   пилюле. Раньше здесь был #hdr с border-radius:pill+фон+тень. ===== */
#hdr-wrap{position:sticky;top:14px;z-index:30;display:flex;justify-content:center;padding:0 20px}
#hdr{
  width:100%;max-width:calc(var(--maxw) - 40px);height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 26px;border-radius:var(--radius-pill);
  background:rgba(19,22,25,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.wordmark{font-weight:800;font-size:18px}
.wordmark span{color:var(--accent)}
#hdr nav{display:flex;gap:24px}
/* Было наоборот (тускло → ярко на hover); по просьбе Светланы, сверено с
   реальным поведением референса Floria (numerик-проверка hover-цвета через
   скриншот с силовым hover, не на глаз) — там ЯРКО → ТУСКЛО на hover.
   17.09 уточнение: «чтобы гасли ещё больше... пропадала, было тёмное, и
   просто окантовочка осталась» — не просто тусклый цвет, а полностью
   прозрачная заливка с тонкой обводкой (текст-контур), буквы "гаснут"
   до пустой формы. */
#hdr nav a{color:var(--text);font-size:14.5px;font-weight:500;transition:color .2s,-webkit-text-stroke-color .2s}
#hdr nav a:hover{color:transparent;-webkit-text-stroke:1px var(--muted)}
.hdr-links{display:flex;gap:8px}
.hdr-links .btn{padding:9px 16px;font-size:13.5px}

#menuBtn{display:none;width:36px;height:36px;border:0;background:none;cursor:pointer;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:5px}
#menuBtn span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s var(--ease,ease),opacity .2s}
#menuBtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#menuBtn[aria-expanded="true"] span:nth-child(2){opacity:0}
#menuBtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#mobileMenu{display:none}

/* ===== hero ===== */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:56px 40px 80px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
  min-height:calc(100dvh - 72px);
}
.hero-text h1{
  font-size:clamp(28px,3.4vw,44px);line-height:1.12;
}
.lede{margin-top:22px;font-size:18px;max-width:46ch;color:var(--muted)}
.hero-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
/* ===== hero-stack: depth-flow carousel =====
   17.09 ~10:20 — седьмая правка. Светлана подтвердила: «диагональ
   правильная» (шестая правка — верна геометрически). Но попросила: 1)
   «уменьшить скорость» — помедленнее; 2) переосмыслить нахлёст — не
   строгое «одна за раз» из шестой правки, а дословно: «одна появлялась,
   вторая шла, третья уже уходила... плавненько, каруселька шла». То есть
   правильно понятое требование округа шестой правки было не «карточки
   никогда не видны одновременно», а «карточки не накладываются друг на
   друга В ОДНОЙ ТОЧКЕ (не толпятся у центра)» — а несколько карточек
   одновременно на РАЗНЫХ участках одного пути (одна только входит, одна
   в середине, одна уже выходит) — это ровно то, что нужно, живой конвейер.
   Пересчитала окно видимости: было 12% цикла (≈впритык к шагу стаггера
   12.5%, чтобы никогда не пересекались), стало 37.5% цикла — ровно 3
   шага стаггера (12.5%×3), так что в любой момент видно ровно ~3
   карточки, каждая на своей стадии пути (вход/середина/выход), но НЕ в
   одной точке экрана — путь общий, но фаза разная. Плюс замедлила общий
   цикл: --dur 22s → 30s (заметно медленнее), пересчитала --delay под 8
   карточек на новый цикл (30/8=3.75s шаг).

   Важная деталь по таймингу, найдена ДО деплоя python-симуляцией (точная
   формула cubic-bezier, не на глаз): с общим `var(--ease-out)` (резкий
   старт) входящая карточка визуально почти догоняла ещё не ушедшую
   переднюю карточку — 16% времени цикла две карточки оказывались ближе
   15% (в translate-% от бокса) друг к другу. С `linear` конкретно для
   heroFlow — 0% таких сближений, min-расстояние 96%, картинки идут
   действительно равномерно «вдогонку», не наступая на пятки. Поэтому
   здесь `linear`, а не общий `var(--ease-out)`. */
.hero-stack{position:relative;height:420px;perspective:1400px;overflow:hidden}
.stack-img{
  position:absolute;top:50%;left:50%;width:58%;
  border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  object-fit:cover;aspect-ratio:16/10;
  animation:heroFlow var(--dur,30s) linear infinite;
  animation-delay:var(--delay,0s);
  animation-play-state:var(--play,running);
  will-change:transform,opacity;
}
.stack-img:nth-child(1){--delay:0s;--j:-1deg}
.stack-img:nth-child(2){--delay:-3.75s;--j:1deg}
.stack-img:nth-child(3){--delay:-7.5s;--j:-1.4deg}
.stack-img:nth-child(4){--delay:-11.25s;--j:.7deg}
.stack-img:nth-child(5){--delay:-15s;--j:-.9deg}
.stack-img:nth-child(6){--delay:-18.75s;--j:1.3deg}
.stack-img:nth-child(7){--delay:-22.5s;--j:-.6deg}
.stack-img:nth-child(8){--delay:-26.25s;--j:1deg}

/* 17.09 ~14:20 — убрала "плато" на 17%→20.5% (две одинаковые точки подряд —
   карточка буквально замирала по центру на долю секунды перед тем как
   уйти). Светлана заметила именно это: "идёт, идёт, на середине
   останавливается, потом уходит" — просила гладкое движение без пауз.
   Один пик на 18.75% вместо двух одинаковых точек — интерполяция теперь
   непрерывная на всём пути, нигде не держит один и тот же transform два
   кадра подряд. */
@keyframes heroFlow{
  0%      {transform:translate(-50%,-50%) translate(0%,-190%) rotate(var(--j)) scale(.5);opacity:0;z-index:2}
  18.75% {transform:translate(-50%,-50%) translate(0%,-4%) rotate(calc(var(--j) * .3)) scale(1);opacity:1;z-index:6}
  37.5%,100% {transform:translate(-50%,-50%) translate(150%,150%) rotate(var(--j)) scale(.5);opacity:0;z-index:1}
}

.hero-stack:hover .stack-img{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .stack-img{animation:none;opacity:0;transform:translate(-50%,-50%) scale(1)}
  .stack-img:nth-child(1){opacity:1}
}

/* ===== trust strip ===== */
.trust{
  max-width:var(--maxw);margin:0 auto;padding:40px 40px 60px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  border-top:1px solid var(--line);
}
.trust-card{
  display:block;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);padding:26px 24px;transition:border-color .2s;
}
a.trust-card:hover{border-color:var(--accent)}
.trust .num{display:block;font-family:'JetBrains Mono',monospace;font-size:36px;font-weight:500;color:var(--accent)}
.trust .lbl{display:block;margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.5}
.trust-stars{display:block;color:var(--accent);letter-spacing:3px;font-size:16px;margin-bottom:10px}
.trust-quote p{color:var(--text);font-size:14.5px;line-height:1.5;margin:0 0 12px;font-style:italic}
.trust-quote .lbl{font-family:'JetBrains Mono',monospace;color:var(--accent);text-transform:none}

/* ===== why grid ===== */
.why{max-width:var(--maxw);margin:0 auto;padding:60px 40px 0}
.why h2{font-size:clamp(26px,3vw,36px);margin-bottom:32px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);padding:26px 24px;
}
.why-card svg{color:var(--accent);margin-bottom:16px}
.why-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.why-card p{font-size:13.5px;line-height:1.55;color:var(--muted)}
@media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.why-grid{grid-template-columns:1fr}.why{padding:40px 20px 0}}

/* ===== work grid ===== */
.work{max-width:var(--maxw);margin:0 auto;padding:60px 40px 0}
.work h2, .skills h2, .process h2{font-size:clamp(26px,3vw,36px);margin-bottom:32px}

/* ===== case-stack: "листы" по 3 кейса наплывают друг на друга при скролле =====
   17.09 — по просьбе Светланы (голосовое): "по три, по три в ряд... скроллим
   вниз, а оно поднималось, листочки" — тот же приём, что уже проверен в
   демо ГРЯДКА (.steps-wrap/.step): каждый лист — position:sticky;top:0 на
   всю высоту экрана, следующий лист лежит ниже по потоку и просто выше по
   z-index, поэтому при скролле он естественно "накрывает" предыдущий,
   без единой строчки JS. 20 кейсов → 7 листов по 3 (последний — 2).
   На мобильном (≤900px) эффект наплыва выключен — там и так вертикальный
   список, наслаивание там только мешало бы читать. */
.case-stack{position:relative;overflow-anchor:none}
.case-sheet{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;
  background:var(--bg);
  overflow:hidden;
}
.case-sheet::before{
  content:"";position:absolute;inset:0 0 auto 0;height:64px;
  background:linear-gradient(rgba(0,0,0,.35),transparent);
  pointer-events:none;
}
.case-stack .case-sheet:nth-child(1){z-index:1}
.case-stack .case-sheet:nth-child(2){z-index:2}
.case-stack .case-sheet:nth-child(3){z-index:3}
.case-stack .case-sheet:nth-child(4){z-index:4}
.case-stack .case-sheet:nth-child(5){z-index:5}
.case-stack .case-sheet:nth-child(6){z-index:6}
.case-stack .case-sheet:nth-child(7){z-index:7}
.case-stack .case-sheet:nth-child(8){z-index:8}
.case-sheet-num{
  position:absolute;top:94px;left:40px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
  color:var(--muted);
}
.case-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 40px;
}
.case-row-end{grid-template-columns:repeat(3,1fr)}
.case-row:has(> :only-child){grid-template-columns:1fr;max-width:420px;margin-inline:auto}

.card{
  display:block;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--bg-2);
  transition:transform .22s cubic-bezier(.16,1,.3,1), border-color .22s;
}
.card:not(.card-img-only):hover{transform:translateY(-4px);border-color:rgba(198,255,92,.4)}
.card-img-only{cursor:default}
.card-img-only img{object-position:center}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.card-body{padding:20px}
.tag{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--accent);letter-spacing:.04em;margin-bottom:10px;
}
.card h3{font-size:19px;margin-bottom:8px}
.card p{font-size:14.5px}

/* ===== reviews – 30.10: колода карточек (фишка 69, образец maximatherapy).
   Секция высокая, внутри sticky-экран .rv-pin; app.js двигает карточки
   transform/opacity от прогресса прокрутки: верхнюю снимает вверх с поворотом,
   под ней следующая. Шаг на карточку --rv-step, после последней – хвост
   0,35 шага, и секция мягко уезжает. Reduced-motion – обычная сетка. ===== */
.reviews{
  --rv-n:8;--rv-step:68svh;
  position:relative;
  height:calc(100svh + (var(--rv-n) - 1 + .35) * var(--rv-step));
}
#reviews{scroll-margin-top:0}
.rv-pin{
  position:sticky;top:0;height:100svh;overflow:clip;
  max-width:var(--maxw);margin:0 auto;
  padding:96px 40px 32px;
  display:grid;grid-template-columns:minmax(260px,.75fr) 1.25fr;
  gap:56px;align-items:center;
}
.rv-head{position:relative;z-index:20}
.rv-head h2{font-size:clamp(26px,3vw,36px);margin-bottom:16px}
.rv-lead{font-size:16px;max-width:34ch;margin-bottom:28px}
.rv-nav{display:flex;align-items:center;gap:14px}
.rv-arrow{
  all:unset;box-sizing:border-box;cursor:pointer;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);
  transition:border-color .2s,background-color .2s,transform .16s var(--ease-out),opacity .2s;
}
.rv-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rv-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rv-arrow:active{transform:scale(.97)}
.rv-arrow:disabled{opacity:.35;cursor:default}
@media (hover:hover){.rv-arrow:not(:disabled):hover{border-color:var(--accent)}}
.rv-count{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.rv-count b{color:var(--text);font-weight:500}

.rv-deck{
  position:relative;height:clamp(300px,calc(100svh - 190px),460px);
  display:grid;place-items:center;touch-action:pan-y;
}
.rv-deck:focus-visible{outline:none}
.rv-card{
  --c:var(--accent);--ink:#0c0e10;--ink-2:rgba(12,14,16,.74);--ink-line:rgba(12,14,16,.16);
  position:absolute;inset:0;margin:auto;
  width:min(560px,100%);height:100%;
  transform-origin:50% 75%;will-change:transform;
  backface-visibility:hidden;
}
.rv-plate{
  position:relative;height:100%;
  padding:30px 34px;border-radius:22px;
  background:var(--c);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 28px 60px -24px rgba(0,0,0,.75),0 6px 16px rgba(0,0,0,.25);
}
.rv-gloss{display:none}
.rv-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px}
.rv-rate{display:inline-flex;align-items:center;gap:8px}
.rv-stars{letter-spacing:3px;font-size:16px}
.rv-plus{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;padding:3px 8px;border-radius:var(--radius-pill);border:1px solid var(--ink-line)}
.rv-platform{font-family:'JetBrains Mono',monospace;font-size:12px;padding:5px 11px;border-radius:var(--radius-pill);border:1px solid var(--ink-line);color:var(--ink-2)}
.rv-quote{
  color:var(--ink);font-size:clamp(18px,1.55vw,21px);line-height:1.45;font-weight:500;
  letter-spacing:-.005em;text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}
.rv-more{
  all:unset;cursor:pointer;align-self:flex-start;
  font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--ink-line);transition:text-decoration-color .2s;
  margin-top:-4px;
}
.rv-more[hidden]{display:none}
.rv-more:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
@media (hover:hover){.rv-more:hover{text-decoration-color:currentColor}}
.rv-who{display:flex;flex-direction:column;gap:3px;padding-top:16px;border-top:1px solid var(--ink-line)}
.rv-name{font-size:16px;font-weight:600}
.rv-project{font-size:14px;color:var(--ink-2);line-height:1.4}
.rv-site{
  align-self:flex-start;margin-top:4px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--ink-line);text-underline-offset:3px;
  transition:text-decoration-color .2s;
}
.rv-site:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){.rv-site:hover{text-decoration-color:currentColor}}

/* шторка «читать полностью»: справа на компьютере, по центру на телефоне */
.rv-sheet{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;color:var(--text);overflow:hidden;
}
.rv-sheet::backdrop{background:transparent}
.rv-sheet-scrim{position:absolute;inset:0;background:rgba(6,7,8,.66);opacity:0;transition:opacity .2s cubic-bezier(.23,1,.32,1)}
.rv-sheet-panel{
  position:absolute;top:0;right:0;height:100%;width:min(540px,100%);
  background:var(--bg-2);border-left:1px solid var(--line);
  padding:96px 48px 48px;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;justify-content:center;gap:22px;
  transform:translate3d(100%,0,0);
  transition:transform .2s cubic-bezier(.23,1,.32,1);
}
.rv-sheet.is-open .rv-sheet-scrim{opacity:1}
.rv-sheet.is-open .rv-sheet-panel{transform:none;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.rv-sheet-close{
  all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:24px;right:24px;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--text);transition:border-color .2s,transform .16s var(--ease-out);
}
.rv-sheet-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rv-sheet-close:active{transform:scale(.97)}
.rv-sheet-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (hover:hover){.rv-sheet-close:hover{border-color:var(--accent)}}
.rv-sheet-rate .rv-stars{color:var(--accent)}
.rv-sheet-rate .rv-plus{--ink-line:rgba(255,255,255,.18);color:var(--text)}
.rv-sheet-rate:empty,.rv-sheet-rate .rv-rate:empty{display:none}
.rv-sheet-quote{color:var(--text);font-size:clamp(18px,1.6vw,21px);line-height:1.55;font-weight:500;text-wrap:pretty}
.rv-sheet-who{display:flex;flex-direction:column;gap:4px;padding-top:18px;border-top:1px solid var(--line)}
.rv-sheet-who b{font-size:16px;font-weight:600;color:var(--text)}
.rv-sheet-who span{font-size:14px;color:var(--muted)}
.rv-sheet-who .rv-sheet-platform{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent)}
.rv-sheet-panel .rv-site{--ink:var(--text);--ink-line:rgba(255,255,255,.25)}
.rv-sheet-panel .rv-site[hidden]{display:none}

@media (max-width:900px){
  .reviews{--rv-step:62svh}
  .rv-pin{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;
    gap:18px;padding:88px 20px 24px;
  }
  /* на телефоне снятая карточка уходит под заголовок, а не поверх текста */
  .rv-head{
    display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;
    background:var(--bg);margin:-88px -20px 0;padding:88px 20px 10px;
  }
  .rv-head h2{margin-bottom:6px}
  .rv-lead{grid-column:1 / -1;grid-row:2;font-size:14.5px;max-width:none;margin-bottom:0}
  .rv-nav{grid-column:2;grid-row:1;gap:8px}
  .rv-arrow{width:44px;height:44px}
  .rv-count{min-width:52px;font-size:12px}
  .rv-deck{height:min(470px,100%)}
  .rv-plate{padding:26px 24px;gap:14px;border-radius:20px}
  .rv-quote{font-size:18px}
}
@media (max-width:700px){
  .rv-sheet-panel{
    top:50%;left:16px;right:16px;bottom:auto;height:auto;width:auto;max-height:84svh;
    border:1px solid var(--line);border-radius:22px;padding:72px 24px 28px;
    transform:translate3d(0,-46%,0) scale(.97);opacity:0;
    transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s cubic-bezier(.23,1,.32,1);
  }
  .rv-sheet.is-open .rv-sheet-panel{transform:translate3d(0,-50%,0);opacity:1;transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .25s cubic-bezier(.23,1,.32,1)}
  .rv-sheet-close{top:16px;right:16px}
}

/* reduced-motion: никакого полёта – обычная сетка карточек */
.reviews.is-flat{height:auto}
.reviews.is-flat .rv-pin{position:static;height:auto;overflow:visible;display:block;padding:60px 40px}
.reviews.is-flat .rv-head{display:block;margin:0;padding:0;background:none}
.reviews.is-flat .rv-nav,.reviews.is-flat .rv-hint{display:none}
.reviews.is-flat .rv-lead{margin-bottom:28px}
.reviews.is-flat .rv-deck{height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;place-items:stretch}
.reviews.is-flat .rv-quote{display:block;-webkit-line-clamp:unset;overflow:visible}
.reviews.is-flat .rv-plate{height:auto}
.reviews.is-flat .rv-card{position:relative;inset:auto;width:auto;height:auto;margin:0;justify-content:flex-start;will-change:auto}
@media (max-width:900px){.reviews.is-flat .rv-pin{padding:40px 20px}}
@media (prefers-reduced-motion:reduce){
  .rv-sheet-scrim,.rv-sheet-panel,.rv-sheet.is-open .rv-sheet-panel{transition:none}
}

/* ===== пластины отзывов – 30.10, выбран вариант «эмаль и металл»
   (стекло было вариантом B, отклонено; app.js всегда ставит data-plate="a").
   Общее: толщина (торец 3 px + двойная тень), фаска светлее основного
   цвета, блик .rv-gloss – отдельный слой, двигается только transform'ом
   (от наклона карточки в колоде и от мыши), наклон ±6° только мышью. ===== */
.reviews[data-plate] .rv-card{perspective:1100px}
.reviews[data-plate] .rv-plate{
  --ink:#f5f1ea;--ink-2:rgba(245,241,234,.8);--ink-line:rgba(255,255,255,.2);
  overflow:hidden;isolation:isolate;
  transform-style:flat;will-change:transform;
  transition:transform .5s cubic-bezier(.23,1,.32,1);
}
.reviews[data-plate] .rv-plate.is-tilting{transition:transform .12s linear}
.reviews[data-plate] .rv-plate > :not(.rv-gloss){position:relative;z-index:2}
.reviews[data-plate] .rv-gloss{
  display:block;position:absolute;z-index:1;pointer-events:none;
  top:-60%;left:-30%;width:70%;height:220%;
  transform:translate3d(0,0,0) rotate(18deg);
  will-change:transform;
  transition:transform .5s cubic-bezier(.23,1,.32,1);
}
.reviews[data-plate] .rv-plate.is-tilting .rv-gloss{transition:transform .12s linear}
/* гравировка: светлый текст с тенью «вдавлен» в пластину */
.reviews[data-plate] .rv-quote,
.reviews[data-plate] .rv-name{text-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.07)}
.reviews[data-plate] .rv-project,
.reviews[data-plate] .rv-more,
.reviews[data-plate] .rv-site,
.reviews[data-plate] .rv-platform{text-shadow:0 1px 0 rgba(0,0,0,.4)}
.reviews[data-plate] .rv-platform,
.reviews[data-plate] .rv-plus{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.22);color:var(--ink)}
/* металлические звёзды */
.reviews[data-plate] .rv-card .rv-stars{font-size:17px;
  background:linear-gradient(180deg,#fff7dc 0%,#f0d58f 38%,#a8813c 52%,#e9c97c 70%,#fff1c4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));
}

/* ---------- эмаль и металл ---------- */
.reviews[data-plate="a"] .rv-card[data-tone="emerald"]{--c:#0e5543;--c2:#0a3a2e;--edge:#062a21;--rim:#6fd1ae}
.reviews[data-plate="a"] .rv-card[data-tone="garnet"]{--c:#6b1830;--c2:#4a0f20;--edge:#310914;--rim:#e98aa0}
.reviews[data-plate="a"] .rv-card[data-tone="sapphire"]{--c:#173a7a;--c2:#0f2655;--edge:#09183a;--rim:#8fb2f2}
.reviews[data-plate="a"] .rv-card[data-tone="bronze"]{--c:#62482a;--c2:#3a2a17;--edge:#241a0e;--rim:#ecd09a}
.reviews[data-plate="a"] .rv-card[data-tone="graphite"]{--c:#2e333b;--c2:#1c2026;--edge:#111418;--rim:#c9ced6}
.reviews[data-plate="a"] .rv-plate{
  border:1.5px solid transparent;
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.14),transparent 55%) padding-box,
    linear-gradient(160deg,var(--c) 0%,var(--c2) 100%) padding-box,
    linear-gradient(135deg,var(--rim) 0%,rgba(255,255,255,.25) 22%,var(--edge) 50%,var(--rim) 78%,rgba(255,255,255,.5) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 6px rgba(0,0,0,.35),
    0 3px 0 var(--edge),
    0 4px 0 rgba(0,0,0,.35),
    0 34px 60px -22px rgba(0,0,0,.8),
    0 10px 22px rgba(0,0,0,.35);
}
.reviews[data-plate="a"] .rv-gloss{
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,.17) 48%,rgba(255,255,255,.05) 62%,transparent 100%);
}

@media (prefers-reduced-motion:reduce){
  .reviews[data-plate] .rv-plate,.reviews[data-plate] .rv-gloss{transition:none}
}

/* телефон: карусель hero уезжала вправо за экран и раздвигала страницу
   (весь сайт на 390 px показывался уменьшенным) – обрезаем по краю hero */
@media (max-width:900px){.hero{overflow-x:clip}}

/* ===== skills ===== */
.skills{max-width:var(--maxw);margin:0 auto;padding:20px 40px 60px}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pills span{
  padding:11px 20px;border:1px solid var(--line);border-radius:var(--radius-pill);
  font-size:14.5px;color:var(--text);
}

/* ===== process ===== */
.process{max-width:var(--maxw);margin:0 auto;padding:20px 40px 80px}
.flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  border-top:1px solid var(--line);padding-top:32px;
}
.flow-step{position:relative;padding-left:2px}
.flow-step:not(:last-child)::after{
  content:'';position:absolute;top:6px;right:-11px;width:1px;height:38px;background:var(--line);
}
.flow-n{display:block;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);margin-bottom:14px;letter-spacing:.04em}
.flow-step h3{font-size:18px;margin-bottom:10px}
.flow-step p{font-size:14.5px}

/* ===== chat demo ===== */
.chatdemo{max-width:700px;margin:0 auto;padding:60px 40px 0}
.chatdemo h2{font-size:clamp(26px,3vw,36px);margin-bottom:32px;text-align:center}
.chat-mock{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);padding:28px;display:flex;flex-direction:column;gap:14px;
}
.chat-bubble{
  max-width:78%;padding:13px 16px;border-radius:14px;font-size:14.5px;line-height:1.5;
  position:relative;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;
}
.chat-mock.in-view .chat-bubble{opacity:1;transform:translateY(0)}
.chat-mock.in-view .chat-in{transition-delay:.05s}
.chat-mock.in-view .chat-typing{transition-delay:.6s}
.chat-mock.in-view .chat-out{transition-delay:1.5s}
.chat-in{align-self:flex-start;background:#20242a;color:var(--text);border-bottom-left-radius:4px}
.chat-out{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.chat-out a{color:var(--accent-ink);text-decoration:underline}
.chat-time{display:block;margin-top:6px;font-size:10.5px;opacity:.55;font-family:'JetBrains Mono',monospace}
.chat-typing{
  align-self:flex-start;background:#20242a;padding:14px 18px;display:flex;gap:5px;
  visibility:hidden;
}
.chat-mock.in-view .chat-typing{visibility:visible;transition-delay:.6s}
.chat-mock.in-view .chat-typing ~ .chat-out{visibility:visible}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typing-blink 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (max-width:640px){.chatdemo{padding:40px 20px 0}.chat-bubble{max-width:90%}}

/* ===== cta block ===== */
.cta-block{
  max-width:var(--maxw);margin:0 auto 80px;padding:64px 40px;
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--bg-2);
}
.cta-block h2{font-size:clamp(22px,2.6vw,30px);max-width:20ch}

/* ===== footer ===== */
footer{
  max-width:var(--maxw);margin:0 auto;padding:28px 40px 50px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);
}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}
.status-live{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12.5px}
.status-live .dot{width:7px;height:7px;border-radius:50%;background:#5fe37a;box-shadow:0 0 0 0 rgba(95,227,122,.6);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(95,227,122,.5)}
  70%{box-shadow:0 0 0 6px rgba(95,227,122,0)}
  100%{box-shadow:0 0 0 0 rgba(95,227,122,0)}
}

/* ===== mobile ===== */
@media (max-width:900px){
  #hdr{padding:0 8px 0 18px}
  #hdr nav,.hdr-links{display:none}
  #menuBtn{display:flex}
  #mobileMenu{
    display:flex;flex-direction:column;gap:2px;
    max-width:calc(var(--maxw) - 40px);margin:8px auto 0;padding:10px;
    border-radius:16px;border:1px solid var(--line);
    background:var(--bg-2);
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .25s var(--ease-out,ease-out),opacity .2s;
  }
  #mobileMenu.open{max-height:320px;opacity:1}
  #mobileMenu a{padding:12px 14px;border-radius:10px;font-size:15px;color:var(--text)}
  #mobileMenu a:hover,#mobileMenu a:focus-visible{background:rgba(255,255,255,.06)}
  .hero{grid-template-columns:1fr;padding:40px 20px 56px;min-height:auto}
  .hero-stack{height:280px;margin-top:20px}
  .trust{grid-template-columns:1fr;padding:32px 20px 40px;gap:16px}
  .work,.skills,.process{padding-left:20px;padding-right:20px}
  .case-sheet{position:static;height:auto;padding-block:36px 0;overflow:visible}
  .case-sheet::before{display:none}
  .case-sheet-num{position:static;display:block;margin-bottom:14px}
  .case-row{grid-template-columns:1fr;padding:0 20px;gap:16px}
  .flow{grid-template-columns:1fr 1fr;gap:26px 18px}
  .flow-step::after{display:none}
  .cta-block{flex-direction:column;align-items:flex-start;margin-left:20px;margin-right:20px;padding:36px 24px}
  footer{padding:24px 20px 40px;flex-direction:column}
}
.case-stack .case-sheet:nth-child(9){z-index:9}
.case-stack .case-sheet:nth-child(12){z-index:12}
.case-row:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}
@media (max-width:900px){.case-row:has(> :nth-child(2):last-child){grid-template-columns:1fr}}
.case-stack .case-sheet:nth-child(10){z-index:10}
.case-stack .case-sheet:nth-child(11){z-index:11}

/* ===== 16.10: тексты по Ильяхову ===== */
.hero-link{align-self:center;font-size:15px;opacity:.75;border-bottom:1px solid currentColor;padding-bottom:2px}
.hero-link:hover{opacity:1}
.stories{padding:clamp(48px,8vw,110px) clamp(16px,4vw,56px) 0}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.story{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--surface,rgba(255,255,255,.03))}
.story-tag{display:inline-block;font-size:12px;letter-spacing:.04em;color:var(--accent);margin-bottom:12px}
.story h3{font-size:22px;margin-bottom:14px;line-height:1.15}
.story p{font-size:15px;line-height:1.5;opacity:.85;margin-bottom:8px}
.story b{color:var(--text)}
.craft{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;padding:clamp(48px,8vw,110px) clamp(16px,4vw,56px) 0}
.craft-list{list-style:none;margin-top:20px;display:grid;gap:12px}
.craft-list li{position:relative;padding-left:28px;font-size:16px;line-height:1.45;opacity:.9}
.craft-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.craft-no .craft-list li::before{content:'✕';color:#ff7a6b}
@media (max-width:860px){.story-grid,.craft{grid-template-columns:1fr}}
.case-stack .case-sheet:nth-child(13){z-index:13}.case-stack .case-sheet:nth-child(14){z-index:14}.case-stack .case-sheet:nth-child(15){z-index:15}.case-stack .case-sheet:nth-child(16){z-index:16}.case-stack .case-sheet:nth-child(17){z-index:17}.case-stack .case-sheet:nth-child(18){z-index:18}.case-stack .case-sheet:nth-child(19){z-index:19}
.case-stack .case-sheet:nth-child(20){z-index:20}