/* Общие стили для всех страниц сайта «Сетка». Подключается в <head> каждой страницы. */
/* переход между страницами: тёмная шторка снизу вверх, по центру — значок «Сетки» в плашке как у иконки приложения */
.pt{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:3000;background:#131415;transform:translate3d(0,101%,0);pointer-events:none;display:flex;align-items:center;justify-content:center;will-change:transform}
.pt.go{transform:none;pointer-events:auto;transition:transform .9s cubic-bezier(.77,0,.175,1) .08s}
html.pt-in .pt{transform:none;pointer-events:auto}
.pt.out{transform:translate3d(0,101%,0);transition:transform .9s cubic-bezier(.77,0,.175,1) .3s}
.pt .app{position:relative;width:max(28px,calc(100vw/1440*36));height:max(28px,calc(100vw/1440*36))}   /* иконка перехода — 36U, мин. 28px (было 56U/44px, затем 28U — чуть увеличили) */
.pt .app>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pt .app .ic{position:absolute;left:50%;top:50%;width:50%;height:50%;transform:translate(-50%,-50%);fill:#131415}
.pt .app{transform:scale(.86);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.pt.go .app,html.pt-in .pt .app{transform:none;opacity:1;transition-delay:.45s}
html.pt-in .pt .app{transition:none!important;opacity:1!important;transform:none!important}   /* на новой странице значок сразу виден, без повторного проявления */
.pt.out .app{transform:none;opacity:1}
html.pt-in::before{content:"";position:fixed;inset:0;z-index:2999;background:#131415 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.00 50.00 L99.99 64.39 L99.94 68.79 L99.87 71.95 L99.76 74.50 L99.63 76.67 L99.46 78.57 L99.27 80.28 L99.04 81.83 L98.79 83.25 L98.50 84.56 L98.18 85.77 L97.83 86.90 L97.44 87.96 L97.03 88.95 L96.57 89.88 L96.09 90.76 L95.56 91.58 L95.00 92.35 L94.40 93.08 L93.76 93.76 L93.08 94.40 L92.35 95.00 L91.58 95.56 L90.76 96.09 L89.88 96.57 L88.95 97.03 L87.96 97.44 L86.90 97.83 L85.77 98.18 L84.56 98.50 L83.25 98.79 L81.83 99.04 L80.28 99.27 L78.57 99.46 L76.67 99.63 L74.50 99.76 L71.95 99.87 L68.79 99.94 L64.39 99.99 L50.00 100.00 L35.61 99.99 L31.21 99.94 L28.05 99.87 L25.50 99.76 L23.33 99.63 L21.43 99.46 L19.72 99.27 L18.17 99.04 L16.75 98.79 L15.44 98.50 L14.23 98.18 L13.10 97.83 L12.04 97.44 L11.05 97.03 L10.12 96.57 L9.24 96.09 L8.42 95.56 L7.65 95.00 L6.92 94.40 L6.24 93.76 L5.60 93.08 L5.00 92.35 L4.44 91.58 L3.91 90.76 L3.43 89.88 L2.97 88.95 L2.56 87.96 L2.17 86.90 L1.82 85.77 L1.50 84.56 L1.21 83.25 L0.96 81.83 L0.73 80.28 L0.54 78.57 L0.37 76.67 L0.24 74.50 L0.13 71.95 L0.06 68.79 L0.01 64.39 L0.00 50.00 L0.01 35.61 L0.06 31.21 L0.13 28.05 L0.24 25.50 L0.37 23.33 L0.54 21.43 L0.73 19.72 L0.96 18.17 L1.21 16.75 L1.50 15.44 L1.82 14.23 L2.17 13.10 L2.56 12.04 L2.97 11.05 L3.43 10.12 L3.91 9.24 L4.44 8.42 L5.00 7.65 L5.60 6.92 L6.24 6.24 L6.92 5.60 L7.65 5.00 L8.42 4.44 L9.24 3.91 L10.12 3.43 L11.05 2.97 L12.04 2.56 L13.10 2.17 L14.23 1.82 L15.44 1.50 L16.75 1.21 L18.17 0.96 L19.72 0.73 L21.43 0.54 L23.33 0.37 L25.50 0.24 L28.05 0.13 L31.21 0.06 L35.61 0.01 L50.00 0.00 L64.39 0.01 L68.79 0.06 L71.95 0.13 L74.50 0.24 L76.67 0.37 L78.57 0.54 L80.28 0.73 L81.83 0.96 L83.25 1.21 L84.56 1.50 L85.77 1.82 L86.90 2.17 L87.96 2.56 L88.95 2.97 L89.88 3.43 L90.76 3.91 L91.58 4.44 L92.35 5.00 L93.08 5.60 L93.76 6.24 L94.40 6.92 L95.00 7.65 L95.56 8.42 L96.09 9.24 L96.57 10.12 L97.03 11.05 L97.44 12.04 L97.83 13.10 L98.18 14.23 L98.50 15.44 L98.79 16.75 L99.04 18.17 L99.27 19.72 L99.46 21.43 L99.63 23.33 L99.76 25.50 L99.87 28.05 L99.94 31.21 L99.99 35.61Z' fill='%23FFFBF6'/%3E%3Csvg x='25' y='25' width='50' height='50' viewBox='334.11 3.43 154.73 154.74' fill='%23131415'%3E%3Crect x='401.53' y='94.98' width='19.9' height='63.18'/%3E%3Cpath d='m421.43,60.55v-26.02h-19.9v26.02c0,1.84-1.5,3.34-3.34,3.34h-64.08v19.9h154.74v-19.9h-64.08c-1.84,0-3.34-1.5-3.34-3.34Z'/%3E%3Cpolygon points='421.43 3.43 401.53 3.43 334.11 3.43 334.11 23.33 334.11 23.33 398.19 23.33 424.77 23.33 488.84 23.33 488.84 3.43 421.43 3.43'/%3E%3C/svg%3E%3C/svg%3E") no-repeat center/max(28px,calc(100vw/1440*36))}   /* ранняя шторка сразу со значком — между страницами значок не пропадает (не «мигает») */
/* ================= подвал для всех страниц, кроме главной (как на главной: Телеграм, «сетка — на связи.», меню, контакты) =================
   На странице достаточно поставить <footer class="sfoot"></footer> — содержимое собирает site.js.
   Тексты — белые с наложением difference: читаются на любом фоне страницы. */
.sfoot{--su:calc(100vw/1440);--sd:max(1px,calc(100vw/1600));--sm:var(--m,1px);position:relative;overflow:hidden;font-family:"Suisse Intl","Suisse Int'l","SuisseIntl","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-0.02em}
.sfoot a{color:inherit;text-decoration:none}
.sfoot .sf-tg{color:#fff}
.sf-tgz{position:relative;height:calc(var(--su)*420)}
.sf-tg{position:absolute;left:calc(var(--su)*556);top:calc(var(--su)*280);width:calc(var(--su)*432);height:calc(var(--su)*432);transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:4;color:#fff;font-size:calc(var(--sd)*21);font-weight:400;line-height:1;white-space:nowrap}
.sf-tg::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sf-tg,#17212B);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.sf-tg .tw{position:relative;display:block;width:12em;height:calc(var(--sd)*56);overflow:hidden}
.sf-tg .ti,.sf-tg .tt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .55s cubic-bezier(.65,0,.15,1),opacity .4s ease}
.sf-tg .ti svg{width:calc(var(--sd)*50);height:calc(var(--sd)*44);transform:translateX(-3px)}
.sf-tg .tt{transform:translateY(100%);opacity:0;letter-spacing:-0.03em}
.sf-tg:hover::before{transform:scale(.9)}
.sf-tg:hover .ti{transform:translateY(-100%);opacity:0}
.sf-tg:hover .tt{transform:none;opacity:1}
.sf-c{position:relative;height:max(100vh,calc(var(--su)*760));height:max(100svh,calc(var(--su)*760))}
.sf-bl{mix-blend-mode:difference;color:#fff}
.sf-hello{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - .082em - var(--su)*48));display:flex;align-items:center;font-size:calc(100vw/1440*250);line-height:1;white-space:nowrap;z-index:2}
.sf-hello a{display:inline-block;letter-spacing:-0.05em}
.sf-hello a span{display:inline-block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.sf-hello .sp{display:inline-block;width:.152em}
.sf-hello .brk{display:none}
.sf-hello .ln{display:inline-block;width:1.155em;height:max(1px,.013em);margin:0 .059em 0 .092em;background:currentColor;align-self:center;transform:translateY(.106em)}
.sf-vc{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;z-index:3;pointer-events:none;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(calc(var(--sd)*5.65));backdrop-filter:blur(calc(var(--sd)*5.65));opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.sf-vc.on{opacity:1;transform:translate(-50%,-50%)}
.sf-vc .vi{position:absolute;inset:var(--ring,calc(var(--sd)*8));border-radius:50%;overflow:hidden;background:#ddd;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
.sf-vc video{display:block;width:100%;height:100%;object-fit:cover}
.sf-nav{position:absolute;left:calc(var(--su)*28);bottom:calc(var(--su)*22);z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.sf-nav a{position:relative;display:block;width:max-content;font-size:calc(var(--su)*26);line-height:calc(var(--su)*33);color:rgba(255,255,255,.42);transition:transform .9s cubic-bezier(.16,1,.3,1),color .35s ease}
.sf-nav a.big{font-size:calc(var(--su)*94);line-height:calc(var(--su)*104);color:#fff;letter-spacing:-0.02em;margin-left:calc(var(--su)*-4)}
.sf-nav a:not(.big):hover{color:#fff;transform:translateX(.85em)}
.sf-foot{position:absolute;right:calc(var(--su)*17);bottom:calc(var(--su)*40);z-index:2;display:grid;grid-template-columns:auto auto;column-gap:calc(var(--su)*120)}
.sf-fc{display:flex;flex-direction:column}
.sf-rl{position:relative;display:block;width:max-content;font-size:calc(var(--su)*18);line-height:calc(var(--su)*24);font-weight:400;letter-spacing:-0.03em;color:#fff;transition:transform .9s cubic-bezier(.16,1,.3,1),color .35s ease}
.sf-fl .sf-rl{color:rgba(255,255,255,.42)}
.sf-rl .fa,.sf-nav a .fa{position:absolute;left:0;top:50%;width:.62em;height:.5em;overflow:visible;opacity:0;transform:translate(-1.25em,-50%);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s ease;pointer-events:none}
.sf-rl:hover{transform:translateX(.85em)}
.sf-rl:hover .fa,.sf-nav a:not(.big):hover .fa{opacity:1;transform:translate(-.85em,-50%)}
.sf-fl .sf-rl:hover,.sf-fc:not(.sf-fl) .sf-rl:hover{color:#fff}
.sf-fc:not(.sf-fl):hover .sf-rl{color:rgba(255,255,255,.42)}
.sf-fc:not(.sf-fl) .sf-rl:hover{color:#fff}
.sf-rl.docs{cursor:default}
.sf-rl.docs:hover{transform:none;color:rgba(255,255,255,.42)}
@media (max-width:959px),(max-width:1199px) and (orientation:portrait){
.sf-tgz{height:auto;padding:calc(var(--sm)*20) calc(var(--sm)*12) 0}
.sf-tg{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;aspect-ratio:1;font-size:calc(var(--sm)*17)}
.sf-tg:hover::before{transform:none}
.sf-tg .ti{animation:sfTgI 3.3s cubic-bezier(.65,0,.15,1) infinite}
.sf-tg .tt{animation:sfTgT 3.3s cubic-bezier(.65,0,.15,1) infinite}
.sf-tg .ti svg{width:calc(var(--sm)*42);height:calc(var(--sm)*37)}
.sf-c{height:max(100svh,calc(var(--sm)*640))}
.sf-hello{top:40%;left:0;width:100%;transform:translateY(-50%);flex-wrap:wrap;justify-content:center;line-height:.66}
.sf-hello .brk{display:block;flex-basis:100%;height:0}
.sf-hello .ln{width:.5em;margin:0 .04em 0 0;transform:translateY(.05em)}
.sf-hello .sp{display:none}
.sf-hello a span{transition:none}
.sf-nav{display:none}
.sf-foot{right:0;width:100%;bottom:calc(calc(var(--sm)*110) + env(safe-area-inset-bottom));grid-template-columns:1fr auto;column-gap:calc(var(--sm)*16);padding:0 calc(var(--sm)*16)}
.sf-rl{font-size:calc(var(--sm)*16);line-height:calc(var(--sm)*22)}
}
@keyframes sfTgI{0%,38%{transform:none;opacity:1}50%,88%{transform:translateY(-100%);opacity:0}100%{transform:none;opacity:1}}
@keyframes sfTgT{0%,38%{transform:translateY(100%);opacity:0}50%,88%{transform:none;opacity:1}100%{transform:translateY(100%);opacity:0}}

/* ---------- шапка страниц кейсов (кроме главной): сжатие до иконки логотипа при прокрутке вниз, разворот при прокрутке вверх ---------- */
.hd-ico{display:none}
@media (min-width:960px) and (orientation:landscape),(min-width:1200px){
  .hd-ico{display:block;position:absolute;left:calc(var(--u)*17);top:calc(var(--u)*17 + var(--d)*10);height:calc(var(--d)*30);opacity:0;transform:translate3d(calc(var(--d)*-10),0,0);pointer-events:none;transition:opacity .5s ease,transform .8s cubic-bezier(.65,0,.2,1)}
  .hd-ico svg{display:block;height:100%;width:auto;fill:#fff}
  /* сжатие: пункты уходят → линия сжимается → появляется иконка */
  body.hd-min .hd-ico{opacity:1;transform:none;pointer-events:auto;transition-delay:.5s}
  body.hd-min .dnav a{opacity:0!important;pointer-events:none!important}
  body.hd-min .dnav .ul{width:0!important;transition-delay:.25s}
  /* разворот (обратный порядок): иконка уходит → линия вытягивается → возвращаются пункты; класс hd-exp живёт ~1.1 с */
  body.hd-exp .dnav .ul{transition-delay:.25s}
  body.hd-exp .dnav a:not(.home){transition-delay:.55s}
}

/* ---------- логотип «Сетка» на телефоне (страницы проектов): после начала прокрутки остаётся только знак «Т» с ® ---------- */
@media (max-width:959px),(max-width:1199px) and (orientation:portrait){
  /* обратно: сначала проявляются буквы, затем логотип целиком возвращается на место */
  #wmark svg .wl,#wmark svg .wt{transition:transform .8s cubic-bezier(.65,0,.2,1) .35s,opacity .4s ease 0s}
  /* при прокрутке: сначала весь логотип сдвигается влево (знак «Т» встаёт на поле), затем остальные буквы гаснут */
  body.hd-off #wmark svg .wl,body.hd-off #wmark svg .wt{transform:translateX(-334.11px);transition:transform .8s cubic-bezier(.65,0,.2,1) 0s,opacity .4s ease .7s}
  body.hd-off #wmark svg .wl{opacity:0}
}