/* Лендинг demchenko.blog: секции, ноутбук, страницы кейсов. Токены: tokens.css, база: base.css.
   Тёмная графитовая страница, один гротеск, линии вместо карточек. Цвет приносят только работы:
   портрет, скриншоты, сцены, рабочий стол. Анимируем transform, opacity, filter. */

:root{--nav-h:64px;interpolate-size:allow-keywords}
html{scroll-padding-top:calc(var(--nav-h) + 16px);scrollbar-gutter:stable;background:var(--page)}
body{min-height:100vh}

/* пока main.js не запустился, всё видно (страховка, если модуль не загрузится) */
html:not(.is-ready) .kw-head .kw{opacity:1;filter:none;transform:none;transition:none}
html:not(.is-ready) .reveal{opacity:1;transform:none;transition:none}

.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nw{white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:var(--r-pill);background:var(--text);color:var(--page);font-size:var(--t-small)}
.skip:focus{top:12px}
.btn span{display:inline-block}

/* текстовая ссылка со стрелкой */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:500;letter-spacing:-.01em;color:var(--text);
  transition:color var(--d-1) var(--ease-out)}
.link-arrow span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size var(--d-3) var(--ease-out)}
.link-arrow .ic{width:17px;height:17px;color:var(--text-2);transition:transform var(--d-2) var(--ease-out),color var(--d-1)}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover span{background-size:100% 1px}
  .link-arrow:hover .ic{color:var(--text)}
  a.link-arrow[target]:hover .ic{transform:translate(2px,-2px)}
  a.link-arrow[href^="#"]:hover .ic{transform:translateY(2px)}
}

/* ---------- навигация ---------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);transition:background-color var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out)}
.nav.is-stuck{background:rgba(22,22,22,.78);-webkit-backdrop-filter:saturate(1.2) blur(18px);backdrop-filter:saturate(1.2) blur(18px);box-shadow:0 1px 0 var(--hair)}
.nav__in{height:100%;display:flex;align-items:center;gap:24px}
.nav__me{font-weight:500;font-size:.9375rem;letter-spacing:-.01em;white-space:nowrap}
.nav__links{margin-left:auto;display:flex;gap:28px}
.nav__links a{font-size:.9375rem;color:var(--text-2);transition:color var(--d-1)}
.nav__links a:hover{color:var(--text)}
.nav__cta{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 16px;border-radius:var(--r-pill);background:var(--text);color:var(--page);
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;transition:background-color var(--d-1)}
.nav__cta .ic{width:15px;height:15px}
.nav__cta:hover{background:#fff}
@media (max-width:859px){.nav__links{display:none}.nav__cta{margin-left:auto}}

/* ---------- заголовки секций ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end;
  margin-bottom:clamp(40px,4.6vw,72px)}
.sec-head .t-h2{max-width:12em}
.sec-head__lead{font-size:var(--t-lead);line-height:1.45;color:var(--text-2);max-width:24em;padding-bottom:.3em}
@media (max-width:899px){.sec-head{grid-template-columns:1fr}}
.section+.section{border-top:1px solid var(--hair)}

/* ---------- 1. первый экран ---------- */
.hero{position:relative;overflow:clip}
.hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:0 24px;
  min-height:min(calc(100svh - var(--nav-h)),920px)}
.hero__text{position:relative;z-index:2;padding-block:clamp(48px,7vw,112px) clamp(56px,7vw,120px)}
.hero__kicker{font-size:var(--t-small);color:var(--text-2);margin-bottom:clamp(20px,2.4vw,32px);animation:rise 700ms var(--ease-out) both}
.hero__title{max-width:9.5em}
.hero__title .kw{transition-duration:700ms}
.hero__lead{margin-top:clamp(24px,2.6vw,36px);max-width:27em;font-size:var(--t-lead);line-height:1.45;color:var(--text-2);animation:rise 700ms var(--ease-out) 260ms both}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:clamp(32px,3.4vw,44px);animation:rise 700ms var(--ease-out) 360ms both}
.hero__note{margin-top:20px;font-size:var(--t-small);color:var(--text-3);animation:rise 700ms var(--ease-out) 440ms both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* портрет растворяется в фоне страницы: фон фото и страницы одного цвета */
.hero__me{position:relative;align-self:end;margin-right:calc(var(--gutter) * -1);margin-left:-12%;
  animation:photo-in 1400ms var(--ease-out) 100ms both}
.hero__me img{width:100%;height:auto;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 44%),linear-gradient(180deg,transparent 0,#000 34%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 44%),linear-gradient(180deg,transparent 0,#000 34%,#000 78%,transparent 100%);mask-composite:intersect}
@keyframes photo-in{from{opacity:0;transform:scale(1.03)}}
@media (max-width:899px){
  .hero__in{grid-template-columns:1fr;min-height:0}
  .hero__text{padding-bottom:8px;order:2;margin-top:-14vw}
  .hero__me{order:1;margin:0 calc(var(--gutter) * -1) 0 auto;width:min(100% + var(--gutter),560px)}
  .hero__me img{-webkit-mask:linear-gradient(90deg,transparent 0,#000 22%,#000 90%,transparent),linear-gradient(180deg,transparent 0,#000 18%,#000 62%,transparent 96%);-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent 0,#000 22%,#000 90%,transparent),linear-gradient(180deg,transparent 0,#000 18%,#000 62%,transparent 96%);mask-composite:intersect}
}

/* ---------- 2. рабочий стол ---------- */
.deskbox{padding-top:clamp(64px,8vw,128px);padding-bottom:clamp(32px,4vw,64px);border-top:1px solid var(--hair)}
.deskbox__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;align-items:baseline;gap:12px 40px;margin-bottom:clamp(40px,5vw,72px)}
.deskbox__title{font-size:var(--t-h3);font-weight:500;letter-spacing:-.02em}
.deskbox__hint{color:var(--text-2);max-width:34em}
@media (max-width:759px){.deskbox__head{grid-template-columns:1fr}.deskbox__head .btn{justify-self:start}}

.hero__device{position:relative;container-type:inline-size}

/* экран (общий для ноутбука и телефона) */
.screen{position:relative;overflow:hidden;background:#0a0a0a;isolation:isolate}
.screen__poster,.screen__os{position:absolute;inset:0}
.screen__poster img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 700ms var(--ease-out) 650ms}
.is-open .screen__poster img,.phone.is-on .screen__poster img{opacity:1}
.screen__os{opacity:0;transition:opacity 500ms var(--ease-out)}
.screen__os.is-on{opacity:1}
.screen__hit{position:absolute;inset:0;z-index:4;display:grid;place-items:center;cursor:pointer;border-radius:inherit}
.screen__hit:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.screen__pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:var(--r-pill);background:#fff;color:#141414;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;box-shadow:0 8px 28px -8px rgba(0,0,0,.5);
  opacity:0;transform:translateY(6px) scale(.97);transition:opacity var(--d-2) var(--ease-out),transform var(--d-2) var(--ease-out)}
.screen__pill .ic{width:18px;height:18px}
.screen__hit:focus-visible .screen__pill{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.screen__hit:hover .screen__pill{opacity:1;transform:none}}
@media (hover:none){.screen__pill{display:none}}

/* ноутбук: CSS 3D. Крышка на петле, клавиатурная часть лежит в перспективе. */
.laptop{--W:min(1080px,calc((100cqw - 2 * var(--gutter)) / 1.12));width:var(--W);margin-inline:auto;position:relative;
  perspective:calc(var(--W) * 4);perspective-origin:50% 38%;margin-bottom:calc(var(--W) * .08)}
.laptop__rig{position:relative;transform-style:preserve-3d}
.laptop__lid{position:relative;aspect-ratio:100/66;transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(-88deg);
  transition:transform 1150ms cubic-bezier(.5,0,.15,1)}
.laptop.is-open .laptop__lid{transform:rotateX(0deg)}
.laptop.is-instant .laptop__lid,.laptop.is-instant .screen__poster img{transition:none}
.laptop__face,.laptop__back{position:absolute;inset:0;border-radius:calc(var(--W) * .026) calc(var(--W) * .026) calc(var(--W) * .006) calc(var(--W) * .006);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.laptop__face{background:#060606;padding:calc(var(--W) * .019) calc(var(--W) * .02) calc(var(--W) * .041);
  box-shadow:0 0 0 calc(var(--W) * .0028) #3a3a3d,inset 0 0 0 1px rgba(255,255,255,.06)}
.laptop__face::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--W) * .024);border-radius:0 0 calc(var(--W) * .006) calc(var(--W) * .006);
  background:#2a2a2d;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.laptop__back{transform:rotateY(180deg);background:#2e2e31;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.laptop__screen{width:100%;height:100%;border-radius:calc(var(--W) * .008) calc(var(--W) * .008) 2px 2px}
.laptop__notch{position:absolute;z-index:3;top:0;left:50%;width:calc(var(--W) * .1);height:calc(var(--W) * .017);transform:translateX(-50%);
  background:#060606;border-radius:0 0 calc(var(--W) * .008) calc(var(--W) * .008)}
.laptop__notch::after{content:'';position:absolute;left:50%;top:42%;width:calc(var(--W) * .0055);height:calc(var(--W) * .0055);border-radius:50%;
  transform:translate(-50%,-50%);background:#18181c;box-shadow:inset 0 0 0 1px #24242a}
[data-os=win] .laptop__notch{top:calc(var(--W) * -.0125);width:calc(var(--W) * .0055);height:calc(var(--W) * .0055);border-radius:50%;background:#18181c;box-shadow:inset 0 0 0 1px #24242a}
[data-os=win] .laptop__notch::after{content:none}
.laptop__base{position:absolute;left:-1.8%;right:-1.8%;top:100%;height:calc(var(--W) * .62);transform-origin:50% 0;transform:rotateX(90deg);
  transform-style:preserve-3d;background:#303033;border-radius:calc(var(--W) * .004) calc(var(--W) * .004) calc(var(--W) * .03) calc(var(--W) * .03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.laptop__kb{position:absolute;left:9.5%;right:9.5%;top:7%;height:44%;border-radius:calc(var(--W) * .006);background:#1c1c1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Crect x='1.4' y='1.8' width='17.2' height='16.4' rx='2.4' fill='%230e0e10'/%3E%3C/svg%3E") 0 0/calc(100% / 14) calc(100% / 6)}
.laptop__pad{position:absolute;left:31%;right:31%;top:58%;height:34%;border-radius:calc(var(--W) * .01);background:#353538;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.laptop__front{position:absolute;left:0;right:0;bottom:0;height:calc(var(--W) * .016);transform-origin:50% 100%;transform:rotateX(-90deg);
  background:#222225;border-radius:0 0 calc(var(--W) * .03) calc(var(--W) * .03)}
.laptop__front::after{content:'';position:absolute;left:50%;top:0;width:13%;height:45%;transform:translateX(-50%);background:#18181a;border-radius:0 0 999px 999px}
.laptop__shadow{position:absolute;inset:2% 1% -6%;transform:translateZ(-3px);background:rgba(0,0,0,.6);filter:blur(calc(var(--W) * .022));border-radius:8%}

/* телефон */
.phone{display:none;width:min(300px,78vw);margin-inline:auto;position:relative}
.phone__body{position:relative;aspect-ratio:300/622;border-radius:48px;background:#0b0b0b;padding:10px;
  box-shadow:0 0 0 1.5px #3a3a3c,inset 0 0 0 1px rgba(255,255,255,.08),0 40px 70px -28px rgba(0,0,0,.8)}
.phone__screen{width:100%;height:100%;border-radius:39px;clip-path:inset(0 round 39px)}
.phone__island{position:absolute;z-index:3;top:11px;left:50%;width:31%;height:26px;transform:translateX(-50%);border-radius:var(--r-pill);background:#000}
@media (max-width:759px){.laptop{display:none}.phone{display:block}}

/* ---------- 3. работы для клиентов ---------- */
.needs__grid{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);gap:32px clamp(32px,4vw,64px);align-items:start}
.needs__side{position:sticky;top:calc(var(--nav-h) + 24px);z-index:5}
.needs__list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.need-tab{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 0 17px;border-bottom:1px solid var(--hair);
  color:var(--text-3);transition:color var(--d-2) var(--ease-out)}
.need-tab__chip{font-size:clamp(1.0625rem,.95rem + .35vw,1.25rem);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.need-tab__count{font-size:var(--t-micro);font-family:var(--mono);color:var(--text-3);font-variant-numeric:tabular-nums}
.need-tab__bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden;opacity:0;transition:opacity var(--d-2)}
.need-tab__bar i{position:absolute;inset:0;background:var(--text);transform-origin:0 50%;transform:scaleX(0)}
.need-tab.is-active{color:var(--text)}
.need-tab.is-active .need-tab__count{color:var(--text-2)}
.needs.is-playing .need-tab.is-playing .need-tab__bar{opacity:1}
.need-tab.is-playing:not(.is-active){color:var(--text-2)}
@media (hover:hover) and (pointer:fine){.need-tab:not(.is-active):hover{color:var(--text-2)}}

.needs__stage{container-type:inline-size;min-height:1px}
.stage-ph__screen{aspect-ratio:16/10;background:#1B1B1B;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--hair);
  display:flex;justify-content:center;padding:4.9cqw 6% 0}
.stage-ph__cap{font-size:3.1cqw;line-height:1.12;font-weight:500;letter-spacing:-.03em;color:var(--text);text-align:center;text-wrap:balance;max-width:24em}
.stage-ph__bar{height:40px;margin-top:14px}
@container (max-width:639px){.stage-ph__screen{aspect-ratio:4/5;padding-top:6cqw}.stage-ph__cap{font-size:5.8cqw}}

.needs__panels{margin-top:clamp(28px,3vw,40px)}
.js .need-panel:not(.is-active){display:none}
.need-panel.is-active{animation:panel-in 420ms var(--ease-out) both}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}}
.no-js .need-panel+.need-panel{margin-top:64px}
.need-panel:focus{outline:none}
.cases{border-top:1px solid var(--hair)}
.case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;align-items:baseline;gap:4px 24px;padding:20px 0 21px;border-bottom:1px solid var(--hair)}
.case__ind{font-size:var(--t-small);color:var(--text-3);line-height:1.4}
.case__title{font-size:clamp(1.0625rem,.98rem + .3vw,1.25rem);font-weight:500;letter-spacing:-.018em;line-height:1.3;transition:color var(--d-1)}
.case .ic{width:18px;height:18px;align-self:center;color:var(--text-3);transition:transform var(--d-2) var(--ease-out),color var(--d-1)}
@media (hover:hover) and (pointer:fine){
  .case:hover .ic{transform:translateX(4px);color:var(--text)}
  .cases:hover .case:not(:hover) .case__title{color:var(--text-2)}
}
.need-panel__cta{margin-top:24px}
@media (max-width:899px){
  .needs__grid{grid-template-columns:minmax(0,1fr)}
  .needs__side{top:var(--nav-h);margin-inline:calc(var(--gutter) * -1);background:rgba(22,22,22,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .needs__list{flex-direction:row;overflow-x:auto;scrollbar-width:none;border:0;gap:22px;padding:0 var(--gutter);box-shadow:inset 0 -1px 0 var(--hair)}
  .needs__list::-webkit-scrollbar{display:none}
  .need-tab{flex:none;border:0;padding:14px 0 13px}
  .need-tab__count{display:none}
  .need-tab.is-active{box-shadow:inset 0 -1px 0 var(--text)}
}
@media (max-width:639px){
  .case{grid-template-columns:minmax(0,1fr) auto}
  .case__ind{grid-column:1;order:1}
  .case__title{grid-column:1;order:0}
  .case .ic{grid-row:1 / span 2;grid-column:2}
}

/* ---------- 4. отзывы ---------- */
.score{display:flex;align-items:flex-end;gap:20px;justify-self:end}
.score__num{font-size:clamp(4rem,2.6rem + 4vw,7rem);line-height:.8;letter-spacing:-.06em;font-weight:400;font-variant-numeric:tabular-nums}
.score__label{font-size:var(--t-small);color:var(--text-2);line-height:1.6}
.score__label .link-arrow{font-size:var(--t-small);margin-top:2px}
@media (max-width:899px){.score{justify-self:start}}
.shots{columns:3 320px;column-gap:20px}
.shot{display:block;break-inside:avoid;margin-bottom:20px;border-radius:var(--r);overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px var(--hair);transition:transform var(--d-3) var(--ease-out),opacity var(--d-2)}
.shot img{width:100%;filter:saturate(.9)}
@media (hover:hover) and (pointer:fine){
  .shots:hover .shot:not(:hover){opacity:.62}
  .shot:hover{transform:translateY(-3px)}
}

/* ---------- 5. как работать ---------- */
.paths__grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}
.path{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3vw,40px) clamp(24px,4vw,64px) 8px 0}
.path+.path{padding-left:clamp(24px,4vw,64px);border-left:1px solid var(--hair)}
.path__n{font-family:var(--mono);font-size:var(--t-micro);color:var(--text-3)}
.path__title{margin-top:clamp(40px,5vw,80px);font-size:clamp(2rem,1.4rem + 2vw,3.25rem);line-height:1;letter-spacing:-.04em;font-weight:500}
.path__lead{margin-top:18px;max-width:24em;font-size:1.125rem;line-height:1.5;color:var(--text-2)}
.path .link-arrow{margin-top:28px}
@media (max-width:759px){
  .paths__grid{grid-template-columns:1fr}
  .path{padding-right:0}
  .path+.path{padding-left:0;border-left:0;border-top:1px solid var(--hair);margin-top:40px}
  .path__title{margin-top:28px}
}

/* ---------- 6. свои продукты ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 20px}
.tile{display:flex;flex-direction:column;min-width:0}
.tile--vx{grid-column:span 8}
.tile--ve{grid-column:span 4}
.tile--kl{grid-column:span 5}
.tile--fl{grid-column:span 7}
.tile--fa{grid-column:span 12}
.tile__media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair);isolation:isolate}
.tile--vx .tile__media,.tile--ve .tile__media{height:clamp(320px,36vw,520px)}
.tile--kl .tile__media,.tile--fl .tile__media{height:clamp(300px,30vw,440px)}
.tile--fa .tile__media{height:clamp(260px,30vw,420px)}
.tile__media img,.tile__media video{transition:transform 900ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tile:hover .tile__media>*{transform:scale(1.02)}}
.tile__media>*{transition:transform 900ms var(--ease-out)}
.tile__cap{padding:16px 2px 4px}
.tile__name{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:1.125rem;font-weight:500;letter-spacing:-.02em}
.tile__st{font-size:var(--t-micro);font-weight:400;color:var(--text-3);letter-spacing:0}
.tile__st.is-on{color:var(--green)}
.tile__one{margin-top:6px;font-size:var(--t-small);line-height:1.5;color:var(--text-2);max-width:34em}

/* содержимое плиток */
.m-vx{position:absolute;inset:0}
.m-vx__desk{position:absolute;left:6%;top:9%;width:80%;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.m-vx__phone{position:absolute;right:6%;top:16%;width:22%;aspect-ratio:9/19;border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 0 0 5px #0b0b0b,0 0 0 6px #333,0 30px 60px -16px rgba(0,0,0,.8)}
.m-vx__phone video{width:100%;height:100%;object-fit:cover}
.m-reel{position:absolute;inset:0;display:grid;place-items:center}
.m-reel video{height:86%;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.m-phones{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;gap:5%;padding-top:8%}
.m-phones img{width:38%;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -20px rgba(0,0,0,.8)}
.m-phones img+img{margin-top:10%}
.m-shot{position:absolute;inset:0;padding:7% 7% 0}
.m-shot img{width:100%;border-radius:10px 10px 0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.m-trio{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.m-trio img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (max-width:899px){
  .tile--vx,.tile--ve,.tile--kl,.tile--fl,.tile--fa{grid-column:span 12}
  .tile--ve .tile__media{height:clamp(420px,110vw,560px)}
  .tile--vx .tile__media{height:clamp(240px,62vw,460px)}
}
.proj-more{margin-top:clamp(64px,7vw,112px);display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);gap:24px clamp(32px,4vw,64px)}
.proj-more__title{font-size:var(--t-h3);font-weight:500;letter-spacing:-.02em}
.proj-more__rows{border-top:1px solid var(--hair)}
.proj-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:4px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair)}
.proj-row b{font-weight:500;letter-spacing:-.015em}
.proj-row span{font-size:var(--t-small);color:var(--text-2);line-height:1.5}
.proj-row .ic{width:18px;height:18px;align-self:center;color:var(--text-3);transition:transform var(--d-2) var(--ease-out),color var(--d-1)}
@media (hover:hover) and (pointer:fine){.proj-row:hover .ic{transform:translateX(4px);color:var(--text)}}
@media (max-width:899px){.proj-more{grid-template-columns:1fr}}
@media (max-width:639px){.proj-row{grid-template-columns:minmax(0,1fr) auto}.proj-row span{grid-column:1}.proj-row .ic{grid-column:2;grid-row:1 / span 2}}

/* ---------- 7. обо мне ---------- */
.about__grid{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);gap:24px clamp(32px,4vw,64px)}
.about__label{font-size:var(--t-small);font-weight:400;color:var(--text-3);padding-top:.7em}
.about__text{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.375rem);line-height:1.22;letter-spacing:-.03em;font-weight:400;max-width:22em;text-wrap:pretty}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--hair)}
.facts div{padding:20px 20px 0 0}
.facts div+div{padding-left:20px;border-left:1px solid var(--hair)}
.facts dt{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.75rem);line-height:1;letter-spacing:-.045em;font-weight:400}
.facts dd{margin-top:10px;font-size:var(--t-small);color:var(--text-2);line-height:1.45}
@media (max-width:899px){
  .about__grid{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0;border-left:0}
  .facts div:nth-child(n+3){margin-top:24px;border-top:1px solid var(--hair)}
}

/* ---------- 8. вопросы ---------- */
.faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,4vw,64px);align-items:start}
.faq__list{border-top:1px solid var(--hair)}
.faq__item{border-bottom:1px solid var(--hair)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none;
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:500;letter-spacing:-.018em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .ic{color:var(--text-3);transition:transform var(--d-2) var(--ease-out)}
.faq__item[open] summary .ic{transform:rotate(45deg)}
.faq__item::details-content{block-size:0;overflow:hidden;transition:block-size var(--d-3) var(--ease-out),content-visibility var(--d-3) allow-discrete}
.faq__item[open]::details-content{block-size:auto}
.faq__a p{padding:0 48px 24px 0;color:var(--text-2);max-width:36em}
@media (max-width:899px){.faq__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 9. финал и подвал ---------- */
.final{padding-block:clamp(96px,12vw,200px) clamp(80px,9vw,140px);border-top:1px solid var(--hair)}
.final__title{font-size:clamp(2.75rem,1.4rem + 5.4vw,7rem);line-height:.95;letter-spacing:var(--track-display);font-weight:500;max-width:11em;text-wrap:balance}
.final__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(40px,5vw,72px)}
.final__lead{font-size:var(--t-lead);color:var(--text-2);max-width:26em}
.foot{border-top:1px solid var(--hair)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:28px 36px;font-size:var(--t-small);color:var(--text-3)}
.foot__meta{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{transition:color var(--d-1)}
.foot a:hover{color:var(--text)}

/* ---------- стол на весь экран ---------- */
html.is-desk{overflow:hidden}
.desk{position:fixed;inset:0;z-index:1000;background:#0a0a0a;opacity:0;transition:opacity 240ms var(--ease-out)}
.desk.is-on{opacity:1}
.desk[hidden]{display:none}
.desk__os{position:absolute;inset:0;height:100dvh}
.desk__exit{position:absolute;z-index:20;top:max(12px,env(safe-area-inset-top));right:12px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;
  border-radius:var(--r-pill);background:#fff;color:#141414;font-size:.9375rem;font-weight:500;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.desk__exit .ic{width:18px;height:18px}
.desk__exit[hidden]{display:none}
.hero__device.is-zooming{position:relative;z-index:70;will-change:transform}
.is-zooming .screen__pill{opacity:0;transition:none}
html.is-zoom .nav,html.is-zoom main>:not(.deskbox),html.is-zoom .deskbox__head{opacity:0;transition:opacity 260ms var(--ease-out)}

/* ---------- лайтбокс ---------- */
.lightbox{padding:0;border:0;background:transparent;overflow:visible;max-width:min(940px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.lightbox::backdrop{background:rgba(8,8,8,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[open]{animation:fade-in 220ms var(--ease-out)}
.lightbox[open] img{animation:lb-in 220ms var(--ease-out)}
.lightbox[open]::backdrop{animation:fade-in 220ms var(--ease-out)}
@keyframes lb-in{from{opacity:0;transform:scale(.97)}}
@keyframes fade-in{from{opacity:0}}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 96px);border-radius:var(--r);background:#fff}
.lightbox__x{position:fixed;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#141414;
  transition:transform var(--d-1) var(--ease-out)}
.lightbox__x:active{transform:scale(.94)}

/* ---------- страница кейса ---------- */
.article{padding-top:clamp(40px,6vw,96px);padding-bottom:var(--section)}
.article__wrap{max-width:calc(920px + 2 * var(--gutter))}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--t-small);color:var(--text-3)}
.crumbs a{transition:color var(--d-1)}
.crumbs a:hover{color:var(--text)}
.article__title{margin-top:24px;max-width:15em}
.article__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px;margin-top:40px;padding-top:20px;border-top:1px solid var(--hair)}
.article__meta dt,.article__body h2{font-size:var(--t-micro);color:var(--text-3);font-weight:400}
.article__meta dd{margin:6px 0 0;font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.ba{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ba__col{padding:24px 24px 28px 0}
.ba__col--a{padding-left:24px;border-left:1px solid var(--hair)}
.ba__k{font-size:var(--t-micro);color:var(--text-3)}
.ba__v{margin-top:12px;font-size:clamp(1.25rem,1.05rem + .7vw,1.75rem);line-height:1.2;letter-spacing:-.025em;font-weight:500;color:var(--text-2)}
.ba__col--a .ba__v{color:var(--text)}
.article__body{margin-top:56px;display:flex;flex-direction:column;gap:40px}
.article__body h2{margin-bottom:10px}
.article__body p{font-size:1.1875rem;line-height:1.6;max-width:38em;color:var(--text)}
.article__facts{display:flex;flex-direction:column}
.article__facts li{padding:12px 0;border-top:1px solid var(--hair);font-size:1.0625rem;line-height:1.5;color:var(--text-2)}
.article__facts li:last-child{border-bottom:1px solid var(--hair)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:5px 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:var(--t-micro);color:var(--text-2)}
.article__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:56px}
.related{margin-top:clamp(72px,9vw,120px)}
.related__title{font-size:var(--t-h3);font-weight:500;letter-spacing:-.02em}
.related__list{margin-top:20px;border-top:1px solid var(--hair)}
.related__list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--hair)}
.related__ind{grid-column:1;font-size:var(--t-micro);color:var(--text-3)}
.related__list b{grid-column:1;font-weight:500;letter-spacing:-.015em}
.related__list .ic{grid-column:2;grid-row:1 / span 2;color:var(--text-3);transition:transform var(--d-2) var(--ease-out),color var(--d-1)}
@media (hover:hover){.related__list a:hover .ic{transform:translateX(4px);color:var(--text)}}
.notfound{min-height:50vh}
.notfound .t-lead{margin-top:16px}
@media (max-width:639px){
  .article__meta{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .ba__col--a{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
}

@media (prefers-reduced-motion:reduce){
  .hero__kicker,.hero__lead,.hero__ctas,.hero__note,.hero__me,.need-panel.is-active,.lightbox[open],.lightbox[open] img{animation:none}
  .laptop__lid,.screen__poster img{transition:none}
}