/* tolū v5 — белый фон, чёрный Carlito, серые сферы из колод (песок рисует sand.js на холсте за текстом) */
@font-face{font-family:Carlito;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/carlito-400.woff2) format("woff2")}
@font-face{font-family:Carlito;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/carlito-700.woff2) format("woff2")}

:root{
  --bg:#fff;--ink:#0b0b0b;--soft:#5e5e5e;--faint:#8a8a8a;--line:#d6d6d6;--hair:#ececec;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
  --color-sel:#111;--color-on-sel:#fff;--color-err:#b3261e;--color-ph:#eee;--color-black:#000;--color-ring:#c4c4c4;--radius-sm:12px;
  --gut:16px;--max:1180px;
  --t-hero:clamp(2.1rem,1.35rem + 3.6vw,4.6rem);
  --t-h2:clamp(1.7rem,1.3rem + 1.9vw,2.9rem);
  --t-h3:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  --t-big:clamp(2.2rem,1.4rem + 3.8vw,5rem);
  --t-lead:clamp(1.08rem,1rem + .35vw,1.3rem);
}
@media(min-width:720px){:root{--gut:40px}}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--ink);font:400 17px/1.55 Carlito,Calibri,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
b,strong{font-weight:700}
::selection{background:var(--color-sel);color:var(--color-on-sel)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:var(--ease-out)}

canvas.sand{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s var(--ease-out)}
canvas.sand.on{opacity:1}
.sphere{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,40vw);aspect-ratio:var(--ar,1);pointer-events:none;z-index:-1}
section{position:relative}

.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:30}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* шапка */
.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 24px;
  padding:12px var(--gut);background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease-out)}
.top.scrolled{border-bottom-color:var(--hair)}
.brand img{width:84px;height:auto}
@media(min-width:720px){.brand img{width:96px}}
.tabs{display:flex;gap:4px;justify-content:center;grid-column:1/-1;grid-row:2;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;text-decoration:none;font-size:15px;color:var(--soft);padding:6px 12px;border-radius:999px;transition:color .2s ease,background-color .2s ease}
.tabs a[aria-current=page]{color:var(--ink);background:#f1f1f1}
@media(hover:hover){.tabs a:hover{color:var(--ink)}}
@media(min-width:900px){.tabs{grid-column:2;grid-row:1;margin:0;padding:0}}
.top .btn{grid-column:3;grid-row:1;justify-self:end}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--ink);
  font:inherit;font-size:16px;text-decoration:none;cursor:pointer;background:transparent;color:var(--ink);
  transition:transform .16s var(--ease-out),background-color .2s ease,color .2s ease}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:#fff}
@media(hover:hover){.btn-ink:hover{background:#2b2b2b}.btn-line:hover{background:var(--ink);color:#fff}}
.btn span{transition:transform .25s var(--ease-out)}
@media(hover:hover){.btn:hover span{transform:translateX(3px)}}
.btn-sm{min-height:38px;padding:0 16px;font-size:15px}

/* типографика */
.kicker{display:inline-block;font-size:15px;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:28px;letter-spacing:.01em}
.h1{font-weight:400;font-size:var(--t-hero);line-height:1.06;letter-spacing:-.02em;max-width:17ch}
.h1 b{font-weight:700}
.h2{font-weight:400;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.015em}
.h3{font-weight:700;font-size:var(--t-h3);line-height:1.2}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink);max-width:56ch}
.lead b{font-weight:700}
.muted{color:var(--soft)}
.big{font-size:var(--t-big);line-height:1.05;letter-spacing:-.02em}
.rule{border:0;border-top:1px solid var(--ink);width:min(320px,60%);margin:28px 0 0}
.sec{padding:88px 0}
@media(min-width:900px){.sec{padding:136px 0}}
.sec-head{display:grid;gap:18px;margin-bottom:48px}
@media(min-width:900px){.sec-head{grid-template-columns:5fr 6fr;align-items:end;gap:48px;margin-bottom:72px}}
.center{text-align:center}

/* первый экран */
.hero{min-height:calc(100svh - 104px);display:flex;align-items:flex-start;padding:40px 0 72px}
@media(min-width:900px){.hero{align-items:center;padding:56px 0 72px}}
/* на телефоне короткий заголовок первого экрана крупнее: без этого он всего вдвое больше текста и экран читается
   плоско; длинным заголовкам (creative, technology) не ставить — займут весь экран */
@media(max-width:599px){.h1-xl{font-size:clamp(2.6rem,17vw,4rem)}}
.hero-s{min-height:0;padding:64px 0 24px}
.hero .lead{margin-top:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.cobrand{width:180px;margin-bottom:32px}
@media(min-width:720px){.cobrand{width:220px}}

/* три колонки-тезиса */
.trio{display:grid;gap:36px}
@media(min-width:820px){.trio{grid-template-columns:repeat(3,1fr);gap:40px}}
.trio li{border-top:1px solid var(--ink);padding-top:18px}
.trio h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.trio p{color:var(--soft)}
.closing{margin-top:56px;font-size:var(--t-lead);max-width:52ch}
.closing b{font-weight:700}

/* услуги: номер, заголовок, две колонки */
.svc{border-top:1px solid var(--ink);padding:36px 0 44px;display:grid;gap:24px}
.svc:last-child{border-bottom:1px solid var(--ink)}
.svc-top{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:baseline}
.svc-n{font-size:15px;color:var(--faint)}
.svc-top .h3{font-weight:400;font-size:var(--t-h2);line-height:1.12;letter-spacing:-.015em}
.svc-top p{grid-column:2;color:var(--soft);max-width:60ch}
.cols{display:grid;gap:28px}
@media(min-width:820px){.cols{grid-template-columns:1fr 1fr;gap:56px;padding-left:52px}}
.cols h4{margin:0 0 12px;font-size:15px;font-weight:400;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ticks li{position:relative;padding:7px 0 7px 22px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.95em;width:10px;height:1px;background:var(--ink)}
.ticks.dim li{color:var(--soft)}

/* «один партнёр» — строки со стрелками */
.arrows{display:grid;gap:0;margin-top:8px}
.arrows li{display:grid;gap:8px;padding:24px 0;border-top:1px solid var(--line)}
.arrows li:last-child{border-bottom:1px solid var(--line)}
.arrows h3{font-size:1.15rem;font-weight:700}
.arrows h3::after{content:" →";font-weight:400}
.arrows p{color:var(--soft);max-width:62ch}
@media(min-width:820px){.arrows li{grid-template-columns:280px 1fr;gap:40px;padding:28px 0}.arrows h3::after{content:""}}

/* логотипы */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;align-items:center;justify-items:center;margin-top:12px}
@media(min-width:720px){.logos{grid-template-columns:repeat(4,1fr);gap:48px 40px}}
.logos img{width:auto;max-width:100%;max-height:42px;mix-blend-mode:multiply;filter:grayscale(1)}
@media(min-width:720px){.logos img{max-height:56px}}
.logos-cap{color:var(--faint);font-size:15px;margin-bottom:28px}

/* переходы между направлениями */
.next{padding:24px 0 96px}
.next .h2{margin-bottom:32px}
.next-grid{display:grid;gap:12px}
@media(min-width:820px){.next-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.dir{position:relative;display:grid;align-content:start;gap:10px;min-height:220px;padding:24px 24px 64px;border:1px solid var(--ink);border-radius:20px;text-decoration:none;background:rgba(255,255,255,.72);
  transition:transform .3s var(--ease-out),background-color .3s ease,color .3s ease}
.dir-k{font-size:14px;color:var(--faint)}
.dir-t{font-size:1.6rem;line-height:1.1}
.dir-d{color:var(--soft)}
.dir-go{position:absolute;right:24px;bottom:20px;font-size:1.5rem;transition:transform .3s var(--ease-out)}
@media(hover:hover){.dir:hover{background:var(--ink);color:#fff}.dir:hover .dir-d,.dir:hover .dir-k{color:#bdbdbd}.dir:hover .dir-go{transform:translateX(4px)}}
.dir:active{transform:scale(.985)}

/* команда */
.team{display:grid;gap:56px}
@media(min-width:820px){.team{grid-template-columns:1fr 1fr;gap:48px}}
.person{display:grid;gap:20px}
@media(min-width:560px){.person{grid-template-columns:200px 1fr;gap:24px;align-items:start}}
.person img{width:100%;max-width:280px;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.person h3{font-size:1.3rem;font-weight:700;margin-bottom:10px}
.person p{color:var(--soft);font-size:16px}
.person .focus{margin-top:12px;color:var(--ink);font-size:15px}

/* манифест */
.manifesto{padding:120px 0 140px}
@media(min-width:900px){.manifesto{padding:180px 0 220px}}

/* контакты и форма */
.contact{padding:24px 0 112px}
.contact-grid{display:grid;gap:56px}
@media(min-width:900px){.contact-grid{grid-template-columns:5fr 6fr;gap:72px;align-items:start}}
.contact .lead{margin-top:20px;color:var(--soft)}
.people{display:grid;gap:22px;margin-top:36px}
.people dt{margin-bottom:4px}
.people dt b{font-weight:700}
.people dd{color:var(--soft)}
.people a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s ease}
@media(hover:hover){.people a:hover{border-color:var(--ink)}}
.lead-form{display:grid;gap:16px;padding:28px 20px;border:1px solid var(--ink);border-radius:24px;background:rgba(255,255,255,.88)}
@media(min-width:720px){.lead-form{padding:40px}}
.form-h{font-weight:400;font-size:1.7rem;line-height:1.1}
.form-sub{color:var(--soft);margin:-6px 0 6px}
.f{display:grid;gap:6px}
.f span{font-size:14px;color:var(--soft)}
.f i{font-style:normal;color:var(--faint)}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;transition:border-color .2s ease;-webkit-appearance:none;appearance:none}
.f select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0b0b'/%3E%3C/svg%3E") no-repeat right 4px center}
.f textarea{resize:vertical;min-height:96px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ink)}
.f [aria-invalid=true]{border-bottom-color:var(--color-err)}
.check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:14px;color:var(--soft);margin-top:4px}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.check a{color:var(--ink)}
.lead-form .btn{justify-self:start;margin-top:6px}
.form-msg{font-size:15px;min-height:1.4em}
.form-msg.err{color:var(--color-err)}

.foot{border-top:1px solid var(--hair);padding:28px 0 36px;background:#fff}
.foot-row{display:grid;gap:16px;align-items:center}
@media(min-width:820px){.foot-row{grid-template-columns:auto 1fr auto;gap:32px}}
.foot p{color:var(--soft)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot nav a{text-decoration:none;color:var(--soft);font-size:15px}
@media(hover:hover){.foot nav a:hover{color:var(--ink)}}

/* консалтинг */
.formats{display:grid;gap:12px}
@media(min-width:820px){.formats{grid-template-columns:repeat(3,1fr);gap:16px}}
.fmt{border:1px solid var(--ink);border-radius:20px;padding:24px;background:rgba(255,255,255,.8);display:grid;gap:10px;align-content:start}
.fmt-n{color:var(--faint);font-size:14px}
.fmt h3{font-size:1.45rem;font-weight:400;line-height:1.15}
.fmt p{color:var(--soft)}
.steps{display:grid;gap:28px;counter-reset:s}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.steps li{border-top:1px solid var(--ink);padding-top:18px}
.steps h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.steps p{color:var(--soft)}
.helps{margin-top:48px;display:grid;gap:4px;font-size:var(--t-lead)}
.helps li::before{content:"— ";color:var(--faint)}
.deep{display:grid;gap:0}
.deep>article{border-top:1px solid var(--ink);padding:36px 0 40px;display:grid;gap:22px}
.deep>article:last-child{border-bottom:1px solid var(--ink)}
.deep .h3{font-weight:400;font-size:var(--t-h2);letter-spacing:-.015em;line-height:1.12}
.deep .intro{color:var(--soft);max-width:64ch}
.meta3{display:grid;gap:28px}
@media(min-width:900px){.meta3{grid-template-columns:5fr 3fr 4fr;gap:44px}}
.meta3 h4{margin:0 0 12px;font-size:15px;font-weight:400;padding-bottom:8px;border-bottom:1px solid var(--line)}
.meta3 .fmt-line{color:var(--ink)}
.grid4{display:grid;gap:28px}
@media(min-width:720px){.grid4{grid-template-columns:1fr 1fr;gap:36px 56px}}
.grid4 li{border-top:1px solid var(--line);padding-top:16px}
.grid4 h3{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.grid4 p{color:var(--soft)}
.note{margin-top:28px;color:var(--soft)}
.ext{display:grid;gap:12px}
@media(min-width:820px){.ext{grid-template-columns:repeat(3,1fr);gap:16px}}

/* таблица выбора формата: на телефоне — карточки */
.cmp{width:100%;border-collapse:collapse;font-size:16px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.cmp thead th{font-weight:700;border-bottom:1px solid var(--ink);font-size:1.1rem}
.cmp tbody th{font-weight:400;color:var(--faint);width:18%}
@media(max-width:819px){
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp thead{display:none}
  .cmp tr{border-top:1px solid var(--ink);padding:16px 0 8px}
  .cmp tbody th{display:block;width:100%;padding:0 0 6px;border:0;color:var(--ink);font-weight:700}
  .cmp td{border:0;padding:4px 0 4px 0;display:grid;grid-template-columns:42% 1fr;gap:12px}
  .cmp td::before{content:attr(data-h);color:var(--faint)}
}

/* креатив: видео */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips li{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:15px}
.reel{display:grid;gap:28px 20px}
@media(min-width:720px){.reel{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.reel{grid-template-columns:repeat(6,1fr)}.reel>:nth-child(1),.reel>:nth-child(2){grid-column:span 3}.reel>:nth-child(n+3){grid-column:span 2}}
.vid{display:grid;gap:12px;text-decoration:none;cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left}
.vid-im{position:relative;overflow:hidden;border-radius:var(--radius-sm);aspect-ratio:16/9;background:var(--color-ph)}
.vid-im img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out),filter .4s ease;filter:grayscale(.25)}
.vid-play{position:absolute;left:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:transform .25s var(--ease-out)}
.vid-play::before{content:"";margin-left:4px;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
@media(hover:hover){.vid:hover .vid-im img{transform:scale(1.03);filter:none}.vid:hover .vid-play{transform:scale(1.06)}}
.vid:active .vid-im{transform:scale(.99)}
.vid-cap{font-size:16px}
.vid-cap small{display:block;color:var(--faint);font-size:14px}

/* лайтбокс видео */
.lb{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,.82);opacity:0;transition:opacity .2s var(--ease-out)}
.lb.open{opacity:1}
.lb[hidden]{display:none}
.lb-box{position:relative;width:min(1100px,100%);transform:scale(.96);transition:transform .25s var(--ease-out)}
.lb.open .lb-box{transform:none}
.lb-frame{aspect-ratio:16/9;background:var(--color-black);border-radius:var(--radius-sm);overflow:hidden}
.lb-frame iframe{width:100%;height:100%;border:0;display:block}
.lb-x{position:absolute;right:0;top:-48px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:transform .16s var(--ease-out)}
.lb-x:active{transform:scale(.94)}

/* технологии: раскрывашки */
.acc{border-top:1px solid var(--ink)}
.acc:last-child{border-bottom:1px solid var(--ink)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:6px 20px;align-items:baseline;padding:28px 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary .h3{font-weight:400;font-size:var(--t-h2);letter-spacing:-.015em;line-height:1.12}
.acc summary p{grid-column:2;color:var(--soft);max-width:60ch}
.acc .pm{width:28px;height:28px;position:relative;align-self:center}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;left:4px;right:4px;top:13px;height:1px;background:var(--ink);transition:transform .3s var(--ease-out)}
.acc .pm::after{transform:rotate(90deg)}
.acc[open] .pm::after{transform:rotate(0)}
.acc .cols{padding-bottom:40px}
.acc[open] .cols{animation:accIn .35s var(--ease-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}}
.stack{display:grid;gap:0}
@media(min-width:720px){.stack{grid-template-columns:1fr 1fr;column-gap:56px}}
.stack li{border-top:1px solid var(--line);padding:18px 0}
.stack h3{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.stack p{color:var(--soft)}
.how{display:grid;gap:12px}
@media(min-width:820px){.how{grid-template-columns:1fr 1fr;gap:16px}}
.how li{border:1px solid var(--ink);border-radius:20px;padding:24px;background:rgba(255,255,255,.8);display:grid;gap:10px;align-content:start}
.how .n{color:var(--faint);font-size:14px}
.how h3{font-size:1.45rem;font-weight:400}
.how p{color:var(--soft)}
.how .inc{color:var(--ink);font-size:15px}

/* поясняющая проза (политика) */
.prose{display:grid;gap:16px;max-width:62ch;margin-top:32px;color:var(--soft)}
.prose a{color:var(--ink)}

/* появление при прокрутке */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* где лежат сферы (коробка задаёт место и размер, рисует sand.js) */
.sp-hero{--w:min(122vw,640px);--x:calc(100% - var(--w)*.66);--y:calc(100% - var(--w)*.56)}
@media(min-width:900px){.sp-hero{--w:min(58vw,820px);--x:calc(100% - var(--w)*.88);--y:calc(50% - var(--w)*.38)}}
.sp-tl{--w:min(62vw,420px);--x:calc(var(--w)*-.38);--y:calc(var(--w)*-.3)}
.sp-r{--w:min(76vw,560px);--x:calc(100% - var(--w)*.42);--y:4%}
.sp-br{--w:min(86vw,600px);--x:calc(100% - var(--w)*.62);--y:calc(100% - var(--w)*.5)}
.sp-bl{--w:min(96vw,680px);--x:calc(var(--w)*-.34);--y:calc(100% - var(--w)*.46)}
.sp-man{--w:min(86vw,600px);--x:calc(100% - var(--w)*.72);--y:calc(100% - var(--w)*.62)}
@media(min-width:900px){.sp-man{--x:calc(100% - var(--w)*.95);--y:calc(50% - var(--w)*.42)}}
.rings{position:absolute;width:min(46vw,300px);height:auto;pointer-events:none;z-index:-1;color:var(--color-ring)}
.rings-bl{left:calc(min(46vw,300px)*-.42);bottom:-40px}
.rings-tr{right:calc(min(46vw,300px)*-.4);top:-60px}

/* ===== v6: акценты, чёрные полосы, выбор ситуации, глобус, CTA ===== */
:root{
  --on-ink:#fff;--on-ink-soft:#a9a9a9;--on-ink-line:rgba(255,255,255,.22);--ink-hover:#2b2b2b;--tab-on:#f1f1f1;
  --g0:#fdfdfd;--g1:#e6e6e6;--g2:#bcbcbc;--g3:#7d7d7d;--g4:#3b3b3b;
  --orb:radial-gradient(circle at 34% 30%,var(--g0) 0,var(--g1) 22%,var(--g2) 48%,var(--g3) 76%,var(--g4) 100%);
  --orb-dark:radial-gradient(circle at 34% 30%,var(--g2) 0,var(--g3) 30%,var(--g4) 70%,var(--ink) 100%);
  --radius:20px;--radius-lg:28px;--radius-xl:36px;--radius-pill:999px;
  --shadow-dock:0 10px 30px rgba(0,0,0,.22);
  --t-stat:clamp(2.6rem,1.4rem + 3.2vw,4.6rem);
  --t-num:clamp(4.5rem,3rem + 7vw,9rem);
  --t-mq:clamp(1.9rem,1.3rem + 2.6vw,3.6rem);
}

.btn-lg{min-height:56px;padding:0 30px;font-size:17px}
.btn-white{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.btn-ghost{color:var(--on-ink);border-color:var(--on-ink-line)}
@media(hover:hover){.btn-white:hover{background:var(--g1)}.btn-ghost:hover{border-color:var(--on-ink)}}
.btn-wide{width:100%}
@media(min-width:720px){.btn-wide{width:auto}}

/* первый экран: строка доказательств */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;max-width:640px;border-top:1px solid var(--ink);padding-top:18px}
.proof b{display:block;font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);line-height:1;letter-spacing:-.02em}
.proof span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--soft)}

/* бегущая строка рынков: чёрная лента под наклоном */
.ticker{overflow:hidden;padding:14px 0}
.mq-band{background:var(--ink);color:var(--on-ink);transform:rotate(-2deg);margin:8px -24px 24px;padding:18px 0;overflow:hidden}
.mq{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq-row{display:flex;align-items:center;gap:28px;padding-right:28px;font-size:var(--t-mq);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.mq-row i{flex:none;width:.55em;height:.55em;border-radius:50%;background:var(--orb)}
@keyframes mq{to{transform:translateX(-50%)}}

/* «где ваш бизнес сейчас» */
.fit-grid{display:grid;gap:24px}
@media(min-width:900px){.fit-grid{grid-template-columns:5fr 6fr;gap:48px;align-items:start}}
.fit-opts{display:grid}
.fit-o{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left;width:100%;padding:18px 4px;border:0;border-top:1px solid var(--line);background:none;font:inherit;font-size:1.15rem;color:var(--soft);cursor:pointer;
  transition:color .2s var(--ease-out),transform .25s var(--ease-out)}
.fit-o:last-child{border-bottom:1px solid var(--line)}
.fit-o i{width:18px;height:18px;border-radius:50%;border:1px solid var(--ink);transition:background-color .2s var(--ease-out)}
.fit-o[aria-selected=true]{color:var(--ink);font-weight:700}
.fit-o[aria-selected=true] i{background:var(--orb-dark);border-color:var(--ink)}
@media(hover:hover){.fit-o:hover{color:var(--ink);transform:translateX(4px)}}
.fit-o:active{transform:scale(.99)}
.fit-a{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);border-radius:var(--radius-lg);padding:32px 24px 28px;min-height:340px;display:grid;align-content:start;gap:14px}
@media(min-width:720px){.fit-a{padding:48px 44px 40px;min-height:420px}}
@media(min-width:900px){.fit-a{position:sticky;top:120px}}
.fit-orb{position:absolute;width:170px;aspect-ratio:1;right:-50px;bottom:-60px;border-radius:50%;background:var(--orb);opacity:.9;pointer-events:none}
@media(min-width:720px){.fit-orb{width:220px;right:-60px;bottom:-80px}}
.fit-k{position:relative;font-size:14px;color:var(--on-ink-soft);letter-spacing:.04em;text-transform:uppercase}
.fit-t{position:relative;font-weight:400;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.015em;max-width:16ch}
.fit-d{position:relative;color:var(--on-ink-soft);max-width:34ch;font-size:var(--t-lead);line-height:1.45}
.fit-act{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px}
.fit-more{color:var(--on-ink);text-underline-offset:4px}
.fit-a .fit-k,.fit-a .fit-t,.fit-a .fit-d{transition:opacity .2s var(--ease-out),transform .25s var(--ease-out)}
.fit-a.swap .fit-k,.fit-a.swap .fit-t,.fit-a.swap .fit-d{opacity:0;transform:translateY(6px)}

/* система: три сферы */
.chain{display:grid;gap:40px}
@media(min-width:820px){.chain{grid-template-columns:repeat(3,1fr);gap:40px}}
.chain li{position:relative;display:grid;gap:10px;align-content:start}
.c-orb{display:block;width:clamp(120px,22vw,190px);aspect-ratio:1;border-radius:50%;background:var(--orb);margin-bottom:14px}
.chain li:nth-child(2) .c-orb{background:var(--orb-dark)}
@media(min-width:820px){.chain li:not(:last-child)::after{content:"";position:absolute;top:calc(clamp(120px,22vw,190px)/2);left:clamp(130px,23vw,200px);right:-30px;border-top:1px dashed var(--ink)}}
.c-n{font-size:14px;color:var(--faint)}
.chain h3{font-size:1.35rem;font-weight:700}
.chain p{color:var(--soft)}

/* карточки услуг */
.card{border:1px solid var(--ink);border-radius:var(--radius-lg);background:rgba(255,255,255,.9);padding:28px 22px 32px;display:grid;gap:28px;margin-top:16px}
@media(min-width:820px){.card{padding:44px 48px 48px}}
.card-top{display:grid;gap:8px 32px}
@media(min-width:820px){.card-top{grid-template-columns:minmax(150px,auto) 1fr}}
.card-n{font-size:var(--t-num);line-height:.82;font-weight:700;color:transparent;-webkit-text-stroke:1px var(--ink);letter-spacing:-.04em}
.card-top .h3{font-weight:400;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.015em;margin-bottom:12px}
.card-top p{color:var(--soft);max-width:58ch;margin-bottom:22px}
.card .cols{padding-left:0}

/* чёрная полоса цифр */
.stats{background:var(--ink);color:var(--on-ink);padding:88px 0}
@media(min-width:900px){.stats{padding:120px 0}}
.stats-h{font-weight:400;font-size:15px;color:var(--on-ink-soft);letter-spacing:.04em;text-transform:uppercase;margin-bottom:40px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px}
@media(min-width:900px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:32px}.stats-3{grid-template-columns:repeat(3,1fr)}}
.stats-grid li{border-top:1px solid var(--on-ink-line);padding-top:20px}
.stats-grid b{display:block;font-size:var(--t-stat);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stats-grid span{display:block;margin-top:12px;color:var(--on-ink-soft);font-size:15px;line-height:1.4;max-width:24ch}

/* глобус */
.globe-grid{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.globe-grid{grid-template-columns:5fr 6fr;gap:56px}}
.globe-grid .lead{margin-top:20px}
.regions{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 32px}
.regions li{border:1px solid var(--ink);border-radius:var(--radius-pill);padding:6px 14px;font-size:15px}
.globe-box{position:relative;width:min(100%,620px);aspect-ratio:1;justify-self:center}
.globe{width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.globe:active{cursor:grabbing}
.globe-hint{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font-size:13px;color:var(--faint)}

/* один партнёр: три карточки со сферой */
.pillars{display:grid;gap:12px}
@media(min-width:820px){.pillars{grid-template-columns:repeat(3,1fr);gap:16px}}
.pillars li{border:1px solid var(--ink);border-radius:var(--radius);padding:28px 24px;background:rgba(255,255,255,.86);display:grid;gap:12px;align-content:start}
.p-orb{width:56px;aspect-ratio:1;border-radius:50%;background:var(--orb);margin-bottom:8px}
.pillars li:nth-child(2) .p-orb{background:var(--orb-dark)}
.pillars h3{font-size:1.3rem;font-weight:700}
.pillars p{color:var(--soft)}

/* от стратегии к ролику */
.show-grid{display:grid;gap:24px}
@media(min-width:900px){.show-grid{grid-template-columns:2fr 1fr;gap:24px}.vid-xl{grid-row:span 2}.vid-xl .vid-im{aspect-ratio:auto;height:100%;min-height:360px}}
.vid-xl{grid-template-rows:1fr auto}
.link-arrow{display:inline-block;margin-top:32px;font-size:var(--t-lead);text-underline-offset:5px}

/* логотипы бегущей строкой */
.logos-sec{padding:40px 0 88px;overflow:hidden}
.lq{display:flex;width:max-content;animation:mq 46s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent)}
.lq-row{display:flex;align-items:center;gap:64px;padding-right:64px}
.lq-row img{width:auto;height:44px;max-width:180px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1)}
@media(min-width:720px){.lq-row img{height:56px}}
@media(hover:hover){.lq:hover{animation-play-state:paused}}

/* команда: подпись на фото */
.ph{position:relative;max-width:280px}
.ph-tag{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--on-ink);border-radius:var(--radius-pill);padding:5px 12px;font-size:13px}

/* чёрная полоса призыва */
.cta-band{position:relative;overflow:hidden;width:calc(100% - 2 * var(--gut));max-width:calc(var(--max) - 2 * var(--gut));margin:24px auto 88px;background:var(--ink);color:var(--on-ink);border-radius:var(--radius-xl);padding:64px 0 60px}
@media(min-width:900px){.cta-band{padding:96px 0 88px}}
.cta-orb{position:absolute;width:min(90vw,520px);aspect-ratio:1;right:-18%;top:-30%;border-radius:50%;background:var(--orb);opacity:.85;animation:drift 18s var(--ease-io) infinite alternate;pointer-events:none}
@media(max-width:899px){.cta-orb{width:44vw;top:auto;right:-16%;bottom:-18%}}
@keyframes drift{to{transform:translate(-40px,30px) scale(1.06)}}
.cta-in{position:relative}
.cta-t{font-weight:400;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.015em;max-width:20ch}
.cta-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* карточки направлений с картинкой */
.dir-v6{padding:14px 14px 64px}
.dir-pic{display:block;aspect-ratio:16/10;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-ph);margin-bottom:10px}
.dir-pic img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease-out)}
.dir-pic.is-photo img{object-fit:cover}
.dir-pic:not(.is-photo){background:var(--bg)}
.dir-v6 .dir-k,.dir-v6 .dir-t,.dir-v6 .dir-d{padding:0 10px}
@media(hover:hover){.dir-v6:hover .dir-pic img{transform:scale(1.05)}}

/* после заявки: три шага */
.nexts{display:grid;gap:18px;margin-top:32px}
.nexts li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.nexts-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-weight:700}
.nexts b{display:block;margin-bottom:2px}
.nexts p{color:var(--soft);font-size:16px}

/* выбор направления в форме */
.pick{border:0;padding:0;margin:0 0 4px;min-width:0}
.pick legend{font-size:14px;color:var(--soft);margin-bottom:10px;padding:0}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 14px;font-size:15px;transition:background-color .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out)}
.chip input:checked+span{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
@media(hover:hover){.chip:hover span{border-color:var(--ink)}}

/* кнопки внутри страниц */
.fmt-go{margin-top:8px;font-size:15px;text-underline-offset:4px}
.inline-cta{display:grid;gap:18px;align-items:center;margin-top:56px;padding-top:32px;border-top:1px solid var(--ink)}
@media(min-width:820px){.inline-cta{grid-template-columns:1fr auto}}
.inline-cta p{font-size:var(--t-lead)}

/* липкая кнопка на телефоне */
.dock{position:fixed;right:16px;bottom:16px;z-index:25;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--radius-pill);background:var(--ink);color:var(--on-ink);text-decoration:none;font-size:16px;box-shadow:var(--shadow-dock);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.dock.on{opacity:1;transform:none;pointer-events:auto}
.dock:active{transform:scale(.97)}
@media(min-width:900px){.dock{display:none}}

/* движение v6: класс mo ставится в <head>, только если посетитель не просил уменьшить движение.
   Всё, что прячет содержимое до JS, стоит под .js: запасной таймер снимает .js, и страница видна без скрипта */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* заголовок первого экрана: слова поднимаются из-под строки */
.js.mo .hero .h1:not(.split){opacity:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;animation:wordUp .75s var(--ease-out) both;animation-delay:calc(var(--i) * 40ms + 60ms)}
@keyframes wordUp{from{transform:translateY(108%)}}
.mo .hero .kicker,.mo .hero .cobrand,.mo .hero .lead,.mo .hero-cta{animation:heroIn .8s var(--ease-out) both}
.mo .hero .cobrand{animation-delay:.02s}
.mo .hero .kicker{animation-delay:.06s}
.mo .hero .lead{animation-delay:.38s}
.mo .hero-cta{animation-delay:.5s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}}

/* вход с глубиной: карточка поднимается из наклона, как лист со стола */
.js .r3d[data-reveal]{transform:perspective(1200px) rotateX(14deg) translateY(36px);transform-origin:50% 100%;
  transition:opacity .8s var(--ease-out),transform 1s var(--ease-out),background-color .3s var(--ease-out),color .3s var(--ease-out)}
.js .r3d[data-reveal].in{transform:none}
/* цифры в чёрных полосах откидываются, как табло */
.js.mo .stats-grid li[data-reveal] b{transform:perspective(600px) rotateX(-80deg);transform-origin:50% 100%;opacity:0;
  transition:transform .9s var(--ease-out) .12s,opacity .5s var(--ease-out) .12s}
.js.mo .stats-grid li[data-reveal].in b{transform:none;opacity:1}

/* параллакс кадров: запас масштаба, чтобы сдвиг не открывал край */
.js.mo .vid-im img,.js.mo .ph img,.js.mo .dir-pic.is-photo img{scale:1.1}
.ph{overflow:hidden}

/* крупные кнопки тянутся за курсором: translate отдельно от transform, нажатие не ломается */
.mo .btn-lg{transition:transform .16s var(--ease-out),translate .45s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out)}

@media(prefers-reduced-motion:reduce){.mq,.lq,.cta-orb{animation:none}.mq-band{transform:none}}

/* ===== v7: правки клиента 06.11.2026 — короче, плотнее, одна точка заявки (форма окном) ===== */
:root{
  --mq-bg:linear-gradient(90deg,rgba(255,255,255,.4),rgba(226,226,226,.7) 50%,rgba(255,255,255,.4));
  --scrim:rgba(10,10,10,.5);
}

/* вкладок стало шесть: на телефоне они не влезают, а центровка прятала Strategy за левым краем без прокрутки */
@media(max-width:899px){
  .tabs{justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,black 82%,transparent);mask-image:linear-gradient(90deg,black 82%,transparent)}
  .tabs a{padding:6px 10px}
}

/* меньше воздуха и прокрутки */
.sec{padding:56px 0}
@media(min-width:900px){.sec{padding:88px 0}}
.sec-head{margin-bottom:32px}
@media(min-width:900px){.sec-head{margin-bottom:48px}}
.sec-h{margin-bottom:28px}
@media(min-width:900px){.sec-h{margin-bottom:40px}}
.hero{min-height:min(calc(100svh - 104px),760px);padding:32px 0 48px}
@media(min-width:900px){.hero{padding:48px 0 56px}}
.hero-s{min-height:0;padding:48px 0 8px}
.hero-cta{margin-top:32px}
.proof{margin-top:40px}
.stats{padding:56px 0}
@media(min-width:900px){.stats{padding:80px 0}}
.stats-h{margin-bottom:28px}
.logos-sec{padding:24px 0 56px}
.cta-band{margin:16px auto 56px;padding:48px 0 44px}
@media(min-width:900px){.cta-band{padding:72px 0 64px}}
.cta-act{margin-top:28px}
.next{padding:8px 0 64px}
.acc summary{padding:22px 0}
.acc .cols{padding-bottom:28px}
.globe-box{width:min(100%,520px)}
.team{gap:40px}

/* главная: заголовок первого экрана — единственная фраза */
.h1-home{font-size:clamp(2.3rem,1.2rem + 5vw,5.4rem);line-height:1.02;max-width:13ch}
@media(max-width:599px){.h1-home{font-size:clamp(2.6rem,16.4vw,4rem)}}
.proof-2{grid-template-columns:repeat(2,1fr);max-width:420px}

/* лента регионов: горизонтально, светлая полупрозрачная, полные названия */
.ticker{padding:0}
.mq-light{transform:none;margin:0;padding:14px 0;background:var(--mq-bg);color:var(--ink);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mq-light .mq-row{gap:22px;padding-right:22px;font-size:clamp(1.15rem,1rem + .9vw,1.7rem)}
.mq-light .mq-row i{width:.42em;height:.42em}

/* цепочка: сферы песком, а не заливкой */
.chain-h{max-width:24ch;margin-bottom:36px}
@media(min-width:900px){.chain-h{margin-bottom:56px}}
/* высота у всех трёх одна, ширина — от пропорции картинки: заголовки встают в одну линию */
.chain-sand{--sh:clamp(130px,16vw,190px)}
.c-sand{position:relative;display:block;height:var(--sh);width:auto;max-width:100%;justify-self:start;aspect-ratio:var(--ar,1);margin-bottom:10px}
.c-sand::before{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--orb);opacity:.22;filter:blur(24px);pointer-events:none}
@media(min-width:820px){.chain-sand li:not(:last-child)::after{top:calc(var(--sh)/2);left:calc(var(--sh)*1.25);right:-30px}}
/* на телефоне сфера слева от текста: три шага на одном экране, а не на трёх */
@media(max-width:819px){
  .chain-sand{--sh:104px;gap:28px}
  .chain-sand li{grid-template-columns:var(--sh) 1fr;column-gap:18px;row-gap:6px;align-items:start}
  .chain-sand .c-sand{grid-column:1;grid-row:1/4;margin:0;width:var(--sh);height:auto;justify-self:center}
  .chain-sand .c-n,.chain-sand h3,.chain-sand p{grid-column:2}
}

/* консалтинг: форматы раскрывашками, под ними — расширенная работа */
.acc .meta3{padding:0 0 28px}
@media(min-width:820px){.acc .meta3{padding-left:36px}}
.acc .intro{color:var(--soft);max-width:64ch;margin:0 0 20px}
@media(min-width:820px){.acc .intro{padding-left:36px}}
.who{margin-top:14px;color:var(--ink)}
.sub-h{margin:48px 0 8px}
.sub-lead{color:var(--soft);max-width:60ch;margin-bottom:20px}
.acc-body{padding-bottom:12px}
.acc[open] .acc-body{animation:accIn .25s var(--ease-out)}
.acc-body > .who{padding-bottom:28px}
@media(min-width:820px){.acc-body > .who{padding-left:36px}}
.acc-body > .intro:last-child{padding-bottom:16px}
.sec-tight{padding-top:24px}
@media(min-width:900px){.sec-tight{padding-top:32px}}
.add-h{margin-bottom:20px}
@media(min-width:1100px){.grid4-c{grid-template-columns:repeat(4,1fr);gap:28px}}
@media(prefers-reduced-motion:reduce){.acc[open] .acc-body,.acc[open] .cols{animation:none}}
/* команда из одного человека: одна широкая карточка, а не половина сетки */
@media(min-width:820px){.team-1{grid-template-columns:1fr;max-width:860px}.team-1 .person{grid-template-columns:260px 1fr;gap:40px}}

/* кейсы */
.soon{border:1px dashed var(--ink);border-radius:var(--radius-lg);padding:28px 24px;display:grid;gap:10px;max-width:720px}
.soon p{color:var(--soft)}
@media(min-width:900px){.h1-big{font-size:clamp(4.6rem,7vw,6.4rem)}}
@media(min-width:900px){.terms{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:start}}

/* переходы: четыре карточки на странице кейсов */
@media(min-width:820px){.next-grid.n4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.next-grid.n4{grid-template-columns:repeat(4,1fr)}}

/* контакты */
.contact{padding:16px 0 72px}
.contact-side .lead{margin-top:0}

/* форма заявки окном: на компьютере по центру, на телефоне листом снизу */
.dlg{width:min(560px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--radius-lg);background:var(--bg);color:var(--ink);overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),overlay .24s var(--ease-out) allow-discrete,display .24s var(--ease-out) allow-discrete}
.dlg[open]{opacity:1;transform:none}
@starting-style{.dlg[open]{opacity:0;transform:translateY(12px) scale(.98)}}
.dlg::backdrop{background:var(--scrim);opacity:0;transition:opacity .24s var(--ease-out),overlay .24s var(--ease-out) allow-discrete,display .24s var(--ease-out) allow-discrete}
.dlg[open]::backdrop{opacity:1}
@starting-style{.dlg[open]::backdrop{opacity:0}}
@media(max-width:719px){
  .dlg{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(100%)}
  .dlg[open]{transform:none}
  @starting-style{.dlg[open]{transform:translateY(100%)}}
}
@media(prefers-reduced-motion:reduce){.dlg,.dlg::backdrop{transition:none}}
.dlg-box{position:relative}
.dlg .lead-form{border:0;border-radius:0;background:none;padding:28px 20px 24px}
@media(min-width:720px){.dlg .lead-form{padding:40px 40px 32px}}
.dlg .form-h{padding-right:44px}
.dlg-x{position:absolute;right:12px;top:12px;z-index:1;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;transition:transform .16s var(--ease-out)}
.dlg-x:active{transform:scale(.94)}
html:has(.dlg[open]){overflow:hidden}

/* v7: движение вместо снятых блоков (слово владельца 06.11.2026 «Да, добавь»). Только при классе mo:
   при «уменьшить движение» его нет, и всё стоит на месте. Линия над пунктом прочерчивается слева направо,
   содержимое открытого аккордеона выходит по частям. Только transform и opacity. */
.acc summary,.steps li,.grid4 li{position:relative}
.js.mo .acc[data-reveal],.js.mo .steps li[data-reveal],.js.mo .grid4 li[data-reveal]{border-top-color:transparent}
.js.mo .acc[data-reveal] summary::before,.js.mo .steps li[data-reveal]::before,.js.mo .grid4 li[data-reveal]::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-out) calc(var(--d,0ms) + 120ms)}
.js.mo .grid4 li[data-reveal]::before{background:var(--line)}
.js.mo .steps li[data-reveal]::before{top:0}
.js.mo .acc[data-reveal].in summary::before,.js.mo .steps li[data-reveal].in::before,.js.mo .grid4 li[data-reveal].in::before{transform:none}
.mo .acc[open] .acc-body,.mo .acc[open] .cols{animation:none}
.mo .acc[open] .acc-body > :not(.meta3),.mo .acc[open] .meta3 > *,.mo .acc[open] .cols > *{animation:accIn .28s var(--ease-out) both}
.mo .acc[open] .acc-body > :nth-child(2),.mo .acc[open] .meta3 > :nth-child(1),.mo .acc[open] .cols > :nth-child(2){animation-delay:50ms}
.mo .acc[open] .meta3 > :nth-child(2),.mo .acc[open] .cols > :nth-child(3){animation-delay:100ms}
.mo .acc[open] .meta3 > :nth-child(3),.mo .acc[open] .acc-body > :nth-child(3),.mo .acc[open] .cols > :nth-child(4){animation-delay:150ms}
.mo .acc[open] .meta3 > *{animation-name:accUp}
@keyframes accUp{from{opacity:0;transform:translateY(10px)}}