/* ===== токены шаблона: меняй здесь, изменится везде ===== */
:root{
  --bg:#f5f5f7;--ink:#1c1c1e;--mut:#8a8a90;--mid:#5f5f66;--card:#262626;--line:#cfcfd4;--acc:#8b5cf6;
  --fs:14px;--lh:1.5;
  --wrap:1440px;--pad-x:clamp(16px,8.34vw,120px);
  --grid-gap:12px;           /* промежуток между тремя колонками сетки */
  --nav-gap:10px;            /* между ссылками в меню сверху */
  --av:46px;                 /* квадрат аватара = высота двух строк: имя + подпись (21+4+21) */
  --s-head-pad:16px;         /* внутренние отступы шапки сверху и снизу */
  --s-head-who:56px;         /* от шапки до блока с именем */
  --s-who-content:96px;      /* от блока с именем до контента */
  --s-sec:56px;              /* вокруг пунктирных разделителей между разделами */
  --s-block:24px;            /* между текстом и информативными блоками, от текста до картинки */
  --s-img:40px;              /* между картинками и контентом выше/ниже */
  --s-title:16px;            /* от заголовка «решение» до текста */
  --s-para:8px;              /* между абзацами */
  --s-caption:8px;           /* подпись под картинкой */
  --s-row:24px;              /* строки с подписью: нижний отступ и промежуток */
  --s-footer:112px;          /* от контента до футера (на главной и в плитках — 40) */
  --s-bottom:16px;           /* от футера до низа страницы */
  --radius:14px;--label-w:140px;--text-max:46em;--photo:192px;
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs)/var(--lh) "SF Pro Display","SF Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;text-transform:lowercase;-webkit-font-smoothing:antialiased}
b,strong{font-weight:400}
button{font:inherit;text-transform:inherit}
a{color:inherit;text-decoration:none}
p,figure{margin:0}
small{font-size:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x) var(--s-bottom);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.home,body.lite{--s-who-content:24px;--s-footer:40px}
/* шапка */
nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:var(--s-head-pad) 0}
nav>a{overflow-wrap:anywhere}
.navl a,.navl span{margin-right:var(--nav-gap)}
.head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);align-items:start;margin:var(--s-head-who) 0 var(--s-who-content)}
.who{display:flex;gap:8px;align-items:flex-start}
.who i{width:var(--av);height:var(--av);border:1px solid #d9534f;border-radius:50%;flex:none}
.who .av{width:var(--av);height:var(--av);flex:none;object-fit:contain}
.who small{display:block;margin-top:4px;color:var(--mut)}
.head .go{justify-self:end}
/* разделы кейса: подпись в 1-й колонке, контент во 2-й и 3-й */
.sec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);padding:var(--s-sec) 0}
.sec.first{padding-top:0}
.sec:last-of-type{padding-bottom:0}
.sec+.sec{border-top:1px dashed var(--line)}
.lab{grid-column:1;position:sticky;top:24px;align-self:start;display:flex;gap:24px}
.lab .n{width:24px;flex:none}
.r{grid-column:2/4;min-width:0}
.b>p,.sub p,.sol p{max-width:var(--text-max)}
.b p+p{margin-top:var(--s-para)}
.b.gray{color:var(--mid)}
.r>.b+.b{margin-top:var(--s-block)}
.r>.b-image+.b,.r>.b+.b-image,.r>.b-solution+.b,.r>.b+.b-solution{margin-top:var(--s-img)}
.r>.b-image.tight{margin-top:var(--s-block)}
/* строки «подпись + текст» */
.sub{display:grid;grid-template-columns:var(--label-w) 1fr;gap:var(--grid-gap);padding-bottom:var(--s-row);border-bottom:1px solid var(--line);margin-bottom:var(--s-row)}
.sub:last-child{padding-bottom:0;border-bottom:0;margin-bottom:0}
.sub .k{color:var(--mut)}
.sub p+p{margin-top:var(--s-para)}
/* решения */
.b-solution .t{margin-bottom:var(--s-title)}
.b-solution .d{color:var(--mid)}
.b-solution .d+.d{margin-top:var(--s-para)}
.part+.part{margin-top:var(--s-img)}
.part.tight{margin-top:var(--s-block)!important}
.b-solution .d+.part,.b-solution p.d+.part{margin-top:var(--s-para)}
.b-solution .t+.part{margin-top:0}
.part .d+.shots{margin-top:var(--s-block)}
.shots{display:grid;gap:var(--grid-gap)}
.shots.c2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* картинки */
.imgs{display:grid;gap:var(--grid-gap);align-items:start}
.imgs.c2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.imgs.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.it figcaption{margin-top:var(--s-caption);color:var(--mut)}
.it img{width:100%;border-radius:var(--radius)}
.zb{display:block;width:100%;border:0;padding:0;background:none;color:inherit;text-align:left;cursor:zoom-in;outline:none}
.zb:focus,.zb:focus-visible{outline:none}
.it.framed .box{position:relative;display:block;background:var(--card);border-radius:var(--radius);padding:18px 18px 40px}
.it.framed img{border-radius:8px}
.zh{position:absolute;right:18px;bottom:12px;color:#8d8d94}
.ph{background:var(--card);color:#8d8d94;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;aspect-ratio:16/9}
/* плитки, схемы, замки */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--grid-gap)}
.stat{background:var(--card);color:#a2a2a8;border-radius:var(--radius);min-height:170px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
.stat b{color:#f2f2f4}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s6{grid-column:span 6}
.flow{display:grid;gap:var(--grid-gap)}
.flowrow{background:var(--card);color:#d6d6db;border-radius:var(--radius);padding:22px;display:grid;gap:12px}
.who2{color:#8d8d94}
.steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.steps span{border:1px solid #4a4a50;border-radius:999px;padding:6px 14px}
.steps i{font-style:normal;color:#6c6c72}
.flowrow.me .steps span{border-color:var(--acc);color:#fff}
.more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--grid-gap)}
.more p{margin-bottom:10px;color:var(--mid)}
.lock{background:var(--card);color:#c9c9ce;border-radius:var(--radius);min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px}
.lock svg{width:48px;height:48px;flex:none;opacity:.85}
.lock small{color:#8d8d94}
/* главная, проекты, папки */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.cols .c1{grid-column:1}.cols .c2{grid-column:2}
.cols p+p{margin-top:var(--s-para)}
.tiles,.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.tiles{margin-top:var(--s-img)}
.tl{aspect-ratio:392/358;border-radius:var(--radius);overflow:hidden}
.tl .zb{height:100%}
.tl img{width:100%;height:100%;object-fit:cover;border-radius:0}
.tl .ph{height:100%;border-radius:0}
.tile{background:var(--card);color:#c9c9ce;border-radius:var(--radius);aspect-ratio:392/358;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px;min-width:0;overflow-wrap:anywhere}
.tile svg{width:48px;height:48px;flex:none;margin-bottom:10px}
.tile small{color:#8d8d94}
.tile:hover:not(.locked){background:#303033}
/* футер: три колонки, фото во второй */
.fw{margin-top:auto;padding-top:var(--s-footer)}   /* футер прибит к низу страницы, от контента не ближе --s-footer */
.foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);align-items:stretch}
.foot .f1,.foot .f3{display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow-wrap:anywhere}
.foot .f3{align-items:flex-end;text-align:right}
.foot .f2 img{width:min(100%,var(--photo));aspect-ratio:1;object-fit:cover;border-radius:10px}
/* увеличение */
dialog{border:0;padding:0;background:transparent;width:auto;max-width:min(92vw,1100px);max-height:92vh;overflow:visible}
dialog::backdrop{background:rgba(0,0,0,.78)}
dialog img{max-width:100%;max-height:88vh;width:auto;height:auto;margin:0 auto;border-radius:var(--radius)}
dialog button{position:absolute;top:-12px;right:-12px;border:0;background:#f5f5f7;border-radius:50%;width:32px;height:32px;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (max-width:820px){
  :root{--pad-x:16px;--s-head-who:32px;--s-who-content:40px;--s-sec:40px;--s-footer:64px;--s-img:32px}
  body.home,body.lite{--s-who-content:24px;--s-footer:40px}
  .head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:16px}
  .head .who{grid-column:1/-1}.head .go{justify-self:end;text-align:right}
  .sec,.cols{grid-template-columns:minmax(0,1fr);gap:16px}
  .sec{padding:var(--s-sec) 0}.sec:last-of-type{padding-bottom:0}
  .lab,.r,.cols .c1,.cols .c2{grid-column:auto;position:static}
  .sub{grid-template-columns:minmax(0,1fr);gap:4px}
  .imgs.c2,.imgs.c3,.shots.c2,.more{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr)}.s2,.s3,.s6{grid-column:auto}
  .tiles,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .it.framed .box{padding:12px 12px 36px}.zh{right:12px}
  .flowrow{padding:16px}.steps span{border-radius:16px}
  .foot{grid-template-columns:minmax(0,1fr);gap:16px}
  .foot .f2{order:-1}.foot .f2 img{width:120px}
  .foot .f1,.foot .f3{justify-content:flex-start;gap:4px;align-items:flex-start;text-align:left}
  dialog{max-width:94vw}dialog img{max-height:82vh}dialog button{top:8px;right:8px}}
@media (max-width:520px){
  .tiles,.grid{grid-template-columns:minmax(0,1fr)}
  .tile{aspect-ratio:auto;min-height:200px}}