:root{
  --bg:#0a0b0d;
  --bg-2:#101216;
  --line:#1e2127;
  --line-2:#2a2f37;
  --ink:#eae7e0;
  --ink-2:#9aa1ac;
  --ink-3:#616875;
  --gold:#d4a11a;
  --gold-soft:#e8c25e;
  --jade:#7fa6a0;
  --max:1280px;
  --pad:clamp(20px,5vw,72px);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  will-change:auto;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s;
}
nav.solid{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.nav-in{max-width:var(--max);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.mark{width:17px;height:17px;position:relative;flex:none;align-self:center}
.mark span{position:absolute;background:var(--gold);border-radius:50%;width:3px;height:3px}
.mark span:nth-child(1){left:0;top:0}
.mark span:nth-child(2){right:0;top:0;background:var(--ink-3)}
.mark span:nth-child(3){left:0;bottom:0;background:var(--ink-3)}
.mark span:nth-child(4){right:0;bottom:0;background:var(--jade)}
.mark span:nth-child(5){left:7px;top:7px;background:var(--ink)}
.brand b{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.02em}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:13px;color:var(--ink-2);letter-spacing:.01em;transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.lang{display:flex;gap:2px;margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.lang button{
  background:none;border:1px solid var(--line-2);color:var(--ink-3);
  padding:5px 9px;cursor:pointer;font:inherit;transition:.25s;
}
.lang button.on{color:var(--bg);background:var(--ink);border-color:var(--ink)}
@media(max-width:860px){
  .nav-links{display:none}
  nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  nav.solid{background:var(--bg)}
  body::before{display:none}
}

/* ---------- hero ---------- */
header{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:clamp(48px,7vw,96px);overflow:hidden}
@supports not (height:100svh){header{min-height:100vh}}
/* анимация уехала под текстовый блок: название и лид сверху, облако точек ниже */
header .wrap.hero{order:1}
#cloud{order:2;position:static;width:100%;flex:1 1 auto;min-height:44vh;opacity:1;transform:translateZ(0);margin-top:clamp(24px,4vw,56px)}
header::after{order:3}
header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 62% at 14% 60%,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 46%,transparent 74%),
             linear-gradient(to bottom,var(--bg) 0%,transparent 22%,transparent 72%,var(--bg) 100%);
}
.hero{position:relative;z-index:3;width:100%}
.hero .mono{margin-bottom:26px}
h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(42px,7vw,104px);line-height:.98;letter-spacing:-.018em;
  margin:0 0 28px;max-width:13.5ch;
}
h1 em{font-style:italic;color:var(--gold-soft)}
.hero p.lead{
  max-width:52ch;font-size:clamp(15px,1.55vw,19px);color:var(--ink-2);
  margin:0 0 44px;line-height:1.66;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  border:1px solid var(--line-2);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--mono);color:var(--ink);transition:.3s;background:none;cursor:pointer;
}
.btn:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary:hover{background:var(--gold);border-color:var(--gold);color:#17140a}
.scroll-hint{position:absolute;right:var(--pad);bottom:44px;z-index:3;writing-mode:vertical-rl;letter-spacing:.24em}
@media(max-width:860px){.scroll-hint{display:none}}
@media(max-width:860px){
  #cloud{opacity:.6;min-height:36vh}
  header::after{background:radial-gradient(90% 46% at 50% 76%,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 52%,transparent 86%),linear-gradient(to bottom,var(--bg) 0%,transparent 18%,transparent 58%,var(--bg) 96%)}
  header{justify-content:flex-start;padding-bottom:56px;min-height:640px;height:auto}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- sections ---------- */
section{position:relative;z-index:3;padding:clamp(64px,7.6vw,118px) 0;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(24px,4vw,72px);row-gap:16px;margin-bottom:clamp(34px,4vw,60px);align-items:end}
.sec-head .mono{grid-column:1/-1}
.sec-head .sec-note{padding-bottom:6px}
@media(max-width:860px){.sec-head{grid-template-columns:1fr}}
h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.4vw,62px);
  line-height:1.04;letter-spacing:-.015em;margin:0;max-width:20ch;text-wrap:balance;
}
.sec-note{color:var(--ink-2);max-width:56ch;font-size:15px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--bg);padding:clamp(22px,2.6vw,36px)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(34px,4.6vw,60px);font-weight:300;line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:12px;color:var(--ink-2);font-size:13.5px;line-height:1.5}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cap{
  background:var(--bg);padding:clamp(28px,3.4vw,52px);position:relative;
  transition:background .45s;display:grid;grid-template-rows:auto auto 1fr auto;gap:0;
}
.cap:hover{background:var(--bg-2)}
.cap .num{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.18em}
.cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.5vw,33px);margin:18px 0 14px;letter-spacing:-.01em;line-height:1.14;text-wrap:balance}
.cap p{color:var(--ink-2);font-size:15px;margin:0 0 22px}
.cap ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-self:end}
.cap li{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line-2);padding:5px 10px}
.cap::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.cap:hover::after{width:100%}
@media(max-width:860px){.caps{grid-template-columns:1fr}.cap{min-height:0}}

/* industries */
.inds{display:flex;flex-wrap:wrap;gap:10px}
.ind{
  border:1px solid var(--line-2);padding:12px 20px;font-size:14px;color:var(--ink-2);
  transition:.3s;
}
.ind:hover{border-color:var(--gold);color:var(--ink)}

/* work */
.fig{position:relative;margin:-6px 0 4px;border:1px solid var(--line);background:linear-gradient(160deg,#0d0f13 0%,#0a0b0d 70%);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,11,13,.04) 0%,rgba(10,11,13,.16) 60%,rgba(10,11,13,.42) 100%)}
.fig svg{width:100%;height:100%;color:#7d8794;transition:color .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.fig img.shot{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transform:scale(1.14);transform-origin:top left;filter:saturate(.9) contrast(1.03);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.case:hover .fig img.shot{transform:scale(1.18);filter:saturate(1) contrast(1.05)}
.fig img.shot.light{filter:saturate(.8) brightness(.76) contrast(1.06)}
.case:hover .fig img.shot.light{filter:saturate(.9) brightness(.86) contrast(1.06)}
.case:hover .fig svg{color:#aab3bf;transform:scale(1.03)}

.work{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.case{background:var(--bg);padding:clamp(24px,2.6vw,36px);display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;transition:background .45s}
.case:hover{background:var(--bg-2)}
.case .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.case h4{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,26px);margin:0;line-height:1.2;text-wrap:balance}
.case p{margin:0;color:var(--ink-2);font-size:14.5px}
.case .metric{align-self:end;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em;line-height:1.5}
.case .metric b{color:var(--ink);font-weight:500}
@media(max-width:1040px){.work{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.work{grid-template-columns:1fr}}

/* method */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,44px)}
.step .mono{display:block;margin-bottom:16px;color:var(--gold)}
.step h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 10px}
.step p{margin:0;color:var(--ink-2);font-size:14.5px}
@media(max-width:900px){.method{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.method{grid-template-columns:1fr}}

/* quote */
.quote{border-left:1px solid var(--gold);padding-left:clamp(20px,3vw,44px);max-width:46ch}
.quote p{font-family:var(--serif);font-size:clamp(22px,2.8vw,34px);line-height:1.3;font-weight:300;margin:0;font-style:italic;color:var(--ink)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,80px);align-items:end}
.contact-grid h2{max-width:14ch}
.c-list{display:flex;flex-direction:column;gap:18px}
.c-row{display:flex;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:15px}
.c-row span:first-child{color:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.c-row a:hover{color:var(--gold-soft)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

footer{padding:34px 0 46px;border-top:1px solid var(--line);position:relative;z-index:3}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink-3);font-size:12.5px}

/* ---------- страницы портала ---------- */
.page-top{padding:calc(clamp(64px,7.6vw,118px) + 56px) 0 clamp(28px,3vw,48px);border-top:none}
.ptitle{font-family:var(--serif);font-weight:300;font-size:clamp(32px,5vw,68px);line-height:1.02;letter-spacing:-.018em;margin:18px 0 20px;max-width:18ch;text-wrap:balance}
.plead{color:var(--ink-2);font-size:clamp(15px,1.5vw,19px);max-width:62ch;margin:0 0 26px;line-height:1.62}
.pmeta{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:baseline;padding-top:18px;border-top:1px solid var(--line)}
.pmeta .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.pmeta .metric{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.pmeta .metric b{color:var(--ink);font-weight:500}
.phero{padding:0 0 clamp(36px,4vw,64px);border-top:none}
.fig.big{aspect-ratio:16/8;margin:0}
.pbody{border-top:1px solid var(--line);padding:clamp(48px,6vw,90px) 0}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(30px,5vw,80px);align-items:start}
.pblock{margin:0 0 clamp(30px,3.4vw,52px)}
.pblock h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.2vw,29px);margin:0 0 14px;letter-spacing:-.01em}
.pblock p{color:var(--ink-2);margin:0;font-size:15.5px;max-width:64ch}
.pl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;max-width:64ch}
.pl li{color:var(--ink-2);font-size:15.5px;padding-left:22px;position:relative}
.pl li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:1px;background:var(--gold)}
.paside{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);border:1px solid var(--line-2);padding:5px 10px}
.pnext{border-top:1px solid var(--line);padding:clamp(40px,4.6vw,72px) 0}
.nextlink{display:block;margin-top:14px;font-family:var(--serif);font-size:clamp(24px,3.4vw,44px);font-weight:300;line-height:1.1;transition:color .3s}
.nextlink:hover{color:var(--gold-soft)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)}
.flt{background:none;border:1px solid var(--line-2);color:var(--ink-2);padding:9px 16px;font:inherit;font-size:13px;cursor:pointer;transition:.25s}
.flt:hover{border-color:var(--ink-3);color:var(--ink)}
.flt.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
a.case{color:inherit}
a.case h4{transition:color .3s}
a.case:hover h4{color:var(--gold-soft)}
.case.hide{display:none}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}.paside{position:static}}

/* цифры проекта */
.facts{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fact{background:var(--bg);padding:18px 20px}
.fact dt{color:var(--ink-3);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.fact dd{margin:0;font-family:var(--serif);font-size:clamp(18px,2vw,25px);font-weight:300;line-height:1.2;color:var(--ink)}
.aside-box{display:flex;flex-direction:column;gap:12px}
@media(max-width:620px){.facts{grid-template-columns:1fr}}

.fig.big{aspect-ratio:16/7;place-items:center}
.fig.big svg{width:min(560px,70%);height:auto;max-height:78%}
.pbody{padding-top:clamp(36px,4vw,64px)}
.pblock:first-child{margin-top:0}

/* мягкая жизнь схем */
@media (prefers-reduced-motion: no-preference){
  .fig svg{animation:figDrift 11s ease-in-out infinite alternate}
  .fig.big svg{animation:figDrift 16s ease-in-out infinite alternate}
  @keyframes figDrift{
    0%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(0,-4px,0) scale(1.012)}
    100%{transform:translate3d(2px,2px,0) scale(1.004)}
  }
  .case:hover .fig svg{animation-play-state:paused}
}
a.cap{color:inherit;display:flex;flex-direction:column}
a.cap h3{transition:color .3s}
a.cap:hover h3{color:var(--gold-soft)}

/* галерея экранов проекта */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.gal .gfig{position:relative;border:1px solid var(--line);background:#0d0f13;aspect-ratio:16/9;overflow:hidden}
.gal .gfig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.05),rgba(10,11,13,.38))}
.gal img{width:100%;height:100%;object-fit:cover;object-position:top left;transform:scale(1.02);transform-origin:top left;filter:saturate(.9) contrast(1.03);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gal img.light{filter:saturate(.8) brightness(.78) contrast(1.05)}
.gal .gfig:hover img{transform:scale(1.08)}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}

/* живые виджеты */
.fig.live{position:relative;background:linear-gradient(160deg,#0e1218 0%,#0a0b0d 72%);display:block;aspect-ratio:16/8}
.fig.live canvas{display:block;width:100%;height:100%}
.fig.live::after{display:none}
.live-tag{position:absolute;left:14px;top:12px;z-index:2;color:var(--gold);opacity:.85}
.gal{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* верх страницы проекта: текст и визуал рядом */
.phead{padding:calc(clamp(56px,6vw,90px) + 56px) 0 clamp(34px,4vw,60px);border-top:none}
.phead-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(26px,4vw,64px);align-items:center;margin-bottom:12px}
.phead-text .ptitle{font-size:clamp(28px,3.4vw,50px);margin:14px 0 16px;max-width:16ch}
.phead-text .plead{font-size:clamp(14.5px,1.25vw,17px);margin-bottom:20px;max-width:46ch}
.phead-text .pmeta{padding-top:14px;gap:12px 24px}
.phead-visual .fig{margin:0}
.phead-visual .fig.big{aspect-ratio:16/10}
@media(max-width:1000px){
  .phead-grid{grid-template-columns:1fr}
  .phead-text .ptitle{max-width:18ch}
}

.gal{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* доказательные цифры в первом экране */
.hero-facts{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,54px);margin:0 0 34px;padding-top:6px}
.hero-facts .hf{max-width:210px}
.hero-facts b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.02em}
.hero-facts span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.45}
@media(max-width:860px){.hero-facts{gap:16px 26px}.hero-facts .hf{max-width:44%}}

/* акцентная кнопка в шапке */
.nav-cta{border:1px solid var(--gold);color:var(--gold-soft)!important;padding:8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:.28s}
.nav-cta:hover{background:var(--gold);color:#17140a!important}

/* бегущая строка отраслей */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{display:flex;gap:10px;width:max-content;animation:marq 46s linear infinite}
.marquee .ind{white-space:nowrap;border:1px solid var(--line-2);padding:12px 20px;font-size:14px;color:var(--ink-2);transition:.3s}
.marquee .ind:hover{border-color:var(--gold);color:var(--ink)}
.marquee:hover .marquee-row{animation-play-state:paused}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){.marquee-row{animation:none;flex-wrap:wrap;width:auto}}

header{padding-top:96px}
.hero .mono{margin-bottom:22px}
@media(max-width:860px){header{padding-top:84px}}

/* оглавление на странице проекта */
.ptoc{display:flex;flex-direction:column;gap:2px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ptoc .mono{margin-bottom:10px}
.ptoc a{font-size:14px;color:var(--ink-2);padding:6px 0 6px 12px;border-left:1px solid var(--line);transition:.25s}
.ptoc a:hover{color:var(--ink);border-left-color:var(--gold)}

/* плавнее и без скачка: меньше сдвиг, короче переход */
.rv{transform:translateY(10px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.fig,.gal .gfig{background:#0d0f13}
.fig img.shot,.gal img{background:#0d0f13}
.hero-facts{margin-bottom:26px}
.hero p.lead{margin-bottom:30px}
h1{margin-bottom:22px}

/* интерактивный макет в рамке */
.mockframe{position:relative;overflow:hidden;background:#0d0f13}
.mockframe iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:top left;pointer-events:none}
.mockframe::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px var(--line)}

/* реальная система против концепта */
.vis-note{margin-top:10px;color:var(--ink-3)}
.bdg{display:inline-block;padding:2px 7px;border-radius:3px;font-size:9.5px;letter-spacing:.1em;margin-right:8px;vertical-align:middle}
.bdg-real{background:rgba(79,209,165,.14);color:#6fd6b0}
.bdg-con{background:rgba(120,140,180,.14);color:#93a3bd}
.mockframe.concept::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(147,163,189,.25)}

.gal .gfig{transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .8s,border-color .8s}
.gal .gfig.on{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 12px 34px rgba(0,0,0,.45)}
.gal .gfig.on img{transform:scale(1.07)}

/* «было — стало» */
.pout{margin:-6px 0 20px;padding-left:14px;border-left:2px solid var(--gold);color:var(--ink);font-size:15px;line-height:1.55;max-width:52ch}
.cout{margin:-4px 0 4px;font-size:13.5px;color:var(--ink-3);line-height:1.5}

.pl.deep li{padding-left:20px;margin-bottom:4px;font-size:15px;line-height:1.62;color:var(--ink-2)}
.pl.deep li::before{top:12px;width:9px;background:var(--gold)}

/* ================= аудит интерфейса 20.09: выравнивание, шапка, мобильное меню ================ */

/* 1. Фиксированная шапка больше не режет заголовок при переходе по якорю */
html{scroll-padding-top:96px}
section[id],[id]{scroll-margin-top:96px}

/* 2. Подпись визуала вынесена над рамкой, а не лежит поверх шапки макета */
.visual{margin:0;display:block}
.vis-cap{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:var(--ink-3)}
.vis-cap::after{content:"";flex:1;height:1px;background:var(--line)}
.live-tag{display:none}

/* 3. Галерея: число колонок равно числу снимков, ряд заполняется целиком */
.gal{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px}
@media(max-width:900px){.gal{grid-template-columns:repeat(min(var(--n,2),2),minmax(0,1fr))}}
@media(max-width:560px){.gal{grid-template-columns:minmax(0,1fr)}}
.gal .gfig{aspect-ratio:16/10}
.gal img{transform:none}
.gal .gfig:hover img{transform:scale(1.04)}

/* 4. Снимок в карточке показывается целиком сверху, без произвольного увеличения */
.fig img.shot{transform:none;object-position:top center}
.case:hover .fig img.shot{transform:scale(1.03)}
.fig.big{aspect-ratio:16/10}

/* 5. Мобильное меню */
.burger{display:none;background:none;border:1px solid var(--line-2);width:40px;height:36px;
  padding:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.burger span{display:block;width:16px;height:1px;background:var(--ink-2);transition:.25s}
nav.open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
nav.open .burger span:nth-child(2){opacity:0}
nav.open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:860px){
  .burger{display:flex}
  .nav-in{gap:12px;padding-top:12px;padding-bottom:12px}
  .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:var(--bg);
    border-bottom:1px solid var(--line);padding:6px var(--pad) 18px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .35s ease,opacity .25s;
  }
  nav.open .nav-links{max-height:70vh;opacity:1;pointer-events:auto}
  .nav-links a{font-size:15px;padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{margin-top:14px;text-align:center;padding:13px 16px}
}

/* 6. Мелочи выравнивания */
.case{grid-template-rows:auto auto auto auto 1fr auto}
.hero-facts .hf{min-width:120px}
@media(max-width:560px){
  .hero-facts{gap:14px 20px}
  .hero-facts .hf{max-width:none;flex:1 1 40%}
  .btn{padding:13px 20px;font-size:12px}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
}

/* 7. Снимок экрана показывается целиком: пропорция рамки равна пропорции макета */
.fig{aspect-ratio:16/10}
.vis-open{display:none;margin-top:10px;color:var(--ink-3)}
.vis-open:hover{color:var(--gold-soft)}
@media(max-width:860px){
  .vis-open{display:inline-block}
  .gal .gfig{aspect-ratio:16/10}
}

/* 8. Вложенные блоки страницы проекта не должны наследовать отступы и линию раздела */
section.pblock{padding:0;border-top:none}
.pblock{margin:0 0 clamp(26px,2.6vw,40px)}
.pcol{max-width:780px}
.pgrid{align-items:start}
.pblock h3{margin-bottom:12px}

/* 9. Телефон: «Цифры» остаются таблицей, оглавление не дублирует содержание */
@media(max-width:620px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{padding:14px 14px}
  .fact dt{font-size:9.5px;letter-spacing:.12em;margin-bottom:6px}
  .fact dd{font-size:17px;line-height:1.25}
}
@media(max-width:900px){
  .ptoc{display:none}
  .paside{gap:16px}
}

/* 10. «Цифры» — строками, а не сеткой: нечётное число ячеек больше не оставляет дыру */
.facts{display:block;grid-template-columns:none;background:none;border:1px solid var(--line);max-width:640px}
.fact{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:13px 18px;border-bottom:1px solid var(--line);background:none}
.fact:last-child{border-bottom:none}
.fact dt{margin:0;flex:1 1 auto}
.fact dd{margin:0;text-align:right;font-size:clamp(17px,1.6vw,22px);white-space:nowrap}
.fact dd:not(:only-child){flex:0 1 auto}
@media(max-width:620px){
  .facts{grid-template-columns:none;max-width:none}
  .fact{padding:12px 14px;gap:14px}
  .fact dt{font-size:10px}
  .fact dd{font-size:16px;white-space:normal}
}

/* 11. Телефон: без рамок в рамках — карточки во всю ширину, разделены линией */
@media(max-width:720px){
  .work,.caps,.stats,.facts{border:none;background:none;gap:0}
  .case,.cap,.stat{padding-left:0;padding-right:0;border-bottom:1px solid var(--line);background:none}
  .case:last-child,.cap:last-child,.stat:last-child{border-bottom:none}
  .case:hover,.cap:hover{background:none}
  .fig,.gal .gfig,.mockframe{border:none}
  .fig::after{border-radius:0}
  .facts{border:1px solid var(--line)}
  .filters{margin-left:0}
}

/* 12. Кадры проекта с подписями и видео */
.gal{align-items:start}
.gitem{margin:0;display:flex;flex-direction:column;gap:8px}
.gitem .gfig{aspect-ratio:16/10}
.gcap{font-size:12.5px;line-height:1.45;color:var(--ink-3);padding-right:6px}
.gal video{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
  filter:saturate(.92) contrast(1.02)}
.gal video.light{filter:saturate(.85) brightness(.82) contrast(1.04)}
@media(max-width:560px){.gcap{font-size:12px}}
.fig.live video.shot{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}

/* 13. Знак «Инварианта» в первом экране */
#mark3d{position:absolute;right:calc(var(--pad) * -0.2);top:50%;transform:translateY(-50%);
  width:min(52%,680px);height:min(78vh,680px);z-index:2;pointer-events:none;display:block}
@media(max-width:1000px){#mark3d{width:62%;height:52vh;opacity:.75}}
@media(max-width:720px){#mark3d{position:absolute;right:-6%;top:22%;transform:none;width:78%;height:36vh;opacity:.55}}
/* знак в шапке: три оболочки плоско */
.mark{width:22px;height:22px;color:var(--gold);display:block;flex:none;align-self:center}
.mark svg{width:100%;height:100%;display:block}
/* на узком экране знак не должен спорить с текстом */
@media(max-width:720px){
  #mark3d{top:6%;right:-14%;width:72%;height:30vh;opacity:.32}
}
@media(max-width:480px){
  #mark3d{opacity:.26;height:26vh}
}

/* 14. Знак в шапке — живой холст вместо плоской марки */
.mark{width:28px;height:28px;color:var(--gold);display:block;flex:none;align-self:center}
.mark canvas{width:100%;height:100%;display:block}
@media(max-width:720px){.mark{width:23px;height:23px}}