/* the closing wordmark: ZAVETGOTH printed across the full width in the same live halftone as «Как работает» */
.wm{margin:clamp(72px,12vh,140px) 0 0;padding-inline:var(--gl) var(--gr);overflow:hidden}
.wm .big{position:relative;margin:0;white-space:nowrap;text-align:center;font:400 calc((100vw - 40px)/3.5)/.9 Head,var(--disp);letter-spacing:-.01em;color:transparent;text-transform:uppercase}
.wm .big-dots{left:50%;translate:-50% 0}
.gf-on .foot{margin-top:clamp(20px,3vh,36px)}

/* demos sit in front of a big silk folder back; the frame and its slides are not changed */
.gf-on .feat .frame.shots{isolation:isolate}
.gf-big{position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;
  background:linear-gradient(180deg,#ffffff1a 0%,#fff0 24%),linear-gradient(180deg,#0000 35%,#000d 100%),linear-gradient(180deg,#242427,#0e0e10);box-shadow:inset 0 1px 0 #ffffff24}

/* the demo cards take the folder glass: clear at the top, nearly solid at the bottom, a lit top edge */
.gf-on.lk-glass .feat .shots .ui-card,.gf-on.lk-glass.boost .feat .shots .ui-card{background:linear-gradient(180deg,#1c1c1f8c 0%,#0f0f11d9 45%,#080809f7 100%);box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff40,0 50px 80px -40px #000}

/* project pages: the same folder glass for the scheme and the buttons */
.gf-case .flow{background:linear-gradient(180deg,#1c1c1f73 0%,#0f0f11d1 45%,#080809f5 100%);box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff3d,0 40px 70px -40px #000;border-radius:22px}
.gf-case .flow li{background:linear-gradient(180deg,#ffffff14,#ffffff08);box-shadow:inset 0 1px 0 #ffffff1f;border-radius:14px}
.gf-case .go a{border-radius:99px;padding:8px 8px 8px 20px;gap:14px;background:linear-gradient(180deg,#1c1c1f,#0b0b0c);box-shadow:inset 0 0 0 1px #ffffff26,inset 0 1px 0 #ffffff33}
.gf-case .go a::after{content:"";width:34px;height:34px;border-radius:50%;background:#f4f4f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%230a0a0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.gf-case .prob pre{border-radius:14px;background:#0b0b0d;box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 1px 0 #ffffff26}

/* quiet section titles (concept.js): 01 — Проекты ———— 6 проектов */
.sx-old{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);margin:0!important;padding:0!important}
.sx{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,20px);max-width:1313px;margin:0 auto clamp(36px,6vh,64px);padding-inline:var(--gl) var(--gr);box-sizing:content-box}
.work>.sx,.contact>.sx{padding-inline:0}
.sx-n{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--t3);transform:translateY(-.35em)}
.sx-t{font:500 clamp(28px,3.2vw,46px)/1 var(--sans);letter-spacing:-.035em;color:var(--t1);white-space:nowrap}
.sx-l{flex:1;align-self:center;height:1px;min-width:24px;background:linear-gradient(90deg,#ffffff38,#ffffff0d)}
.sx-c{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--t3);white-space:nowrap}
.contact .sx{max-width:800px}
@media (max-width:560px){.sx{gap:10px}.sx-c{display:none}.sx-t{font-size:28px}}
/* the sections no longer need the tall gap the giant titles used */
.gf-on .how{padding-top:clamp(56px,10vh,110px)}
.sx{box-sizing:border-box;width:calc(100% - var(--gl) - var(--gr));padding-inline:0}
.work>.sx,.contact>.sx{width:auto}
.sx-c{display:none}
.sx-l{background:linear-gradient(90deg,#ffffff2e,#ffffff00)}

/* Plain wordmark and a centered contact list in its original row style. */
.hero .brand h1{color:#f2f2ee;text-shadow:none}
.gf-on .contact .tiles{width:100%;max-width:680px;margin-inline:auto}
.gf-on .contact .sx{max-width:680px;justify-content:center;margin-inline:auto;margin-bottom:32px}
.contact .sx .sx-n,.contact .sx .sx-l{display:none}
.contact .sx .sx-t{text-align:center}
@media(max-width:560px){.gf-on .contact .tiles{max-width:100%}}

/* A quiet threshold between the project index and interactive demonstrations. */
.gf-on .how{margin-top:clamp(88px,9vw,128px);padding-top:0;scroll-margin-top:100px}
.demo-divider{display:flex;align-items:center;gap:24px;max-width:1560px;margin:0 auto 56px}
.demo-divider h2{flex:none;margin:0;font:500 13px/1.4 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:#d0d0d2}
.demo-divider>span{height:1px;flex:1;background:linear-gradient(90deg,#ffffff38,#ffffff16 65%,#fff0)}
.gf-on .how>.demo-divider+.feat{padding-top:0}
@media(max-width:900px){.gf-on .how{margin-top:80px}.demo-divider{gap:18px;margin-bottom:36px}.demo-divider h2{font-size:11px;letter-spacing:.08em}}
/* Demo arrival: the copy leads, then the panel rises out of the page's depth. */
@media(prefers-reduced-motion:no-preference){
  .demo-arrival{opacity:0;transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
  .f-text.demo-arrival{transform:translateY(24px)}
  .shots.demo-arrival{transform:perspective(1200px) translateY(64px) rotateX(7deg) scale(.96);transform-origin:50% 100%;transition-duration:.6s,.9s;transition-delay:80ms}
  .demo-divider.demo-arrival{transform:translateY(12px)}
  .demo-divider.demo-arrival>span{transform:scaleX(.12);transform-origin:left;transition:transform 1s var(--ease-out)}
  .demo-arrival.demo-arrived{opacity:1;transform:none}
  .demo-divider.demo-arrived>span{transform:none}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .shots.demo-arrival{transform:translateY(36px) scale(.975);transition-duration:.5s,.7s;transition-delay:0s}
  .shots.demo-arrival.demo-arrived{transform:none}
}
/* 05.11: no number before «Проекты»; the demos title uses the same voice as «Проекты» */
.work .sx-n{display:none}
.demo-divider h2{font:500 clamp(28px,3.2vw,46px)/1 var(--sans);letter-spacing:-.035em;text-transform:none;color:var(--t1)}
.demo-divider{gap:clamp(12px,1.4vw,20px)}
@media(max-width:560px){.demo-divider h2{font-size:28px;letter-spacing:-.035em}}
/* perf 05.11: the terminal screens are hidden inside the folders, their blur over the video only cost frames; the projects scale while dimming */
.gf-on .scr{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.work{will-change:opacity,transform}
/* 06.11: one arrow per button — the text arrows are gone; a link to a demo on the main page points down, outside links point out */
.gf-case .go a[href^="./#"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' fill='none' stroke='%230a0a0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}