/* ══════════════════════════════════════════════════════════
   СПОКОЙНО — бухгалтерия на аутсорсе
   Палитра и линия-пульс взяты из логотипа.
   У каждого блока свой способ «успокоиться»:
   услуги — стопка листов → реестр, карточки — бланк заполняется,
   шаги — закреплённая горизонтальная сцена, контакты — точка
   заливает экран.
   ══════════════════════════════════════════════════════════ */

:root{
  --paper:#FAFAF9;
  --tint:#F1F4F2;
  --card:#FFFFFF;
  --ink:#2B2E31;
  --graphite:#45484C;
  --mute:#747A80;
  --hair:#E1E4E3;
  --hair-2:#C6CBCD;
  --mint:#74B899;
  --mint-hi:#8CCBAE;
  --mint-deep:#2F7D5D;
  --mint-soft:#E5F2EC;
  --night:#23262A;

  --f:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --hdr:76px;
  --wrap:1240px;
  --gut:clamp(20px,4.4vw,56px);
  --big:clamp(30px,min(8.6vw,12.5vh),104px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.2,1.5,.3,1);

  --p:0;      /* прогресс прокрутки страницы 0…1 */
  --nerv:1;   /* «нервозность» 1…0 */
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) - 1px);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
html.js:not(.is-ready){overflow:hidden}
body{
  font:400 17px/1.6 var(--f);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
ol,ul{list-style:none;padding:0}
::selection{background:var(--mint);color:#10211A}
:focus-visible{outline:2px solid var(--mint-deep);outline-offset:4px;border-radius:6px}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}

/* ─────────── мелкая типографика ─────────── */
.eyebrow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font:400 12px/1.3 var(--m);letter-spacing:.16em;text-transform:lowercase;color:var(--mute);
}
.eyebrow i{width:34px;height:1px;background:var(--mint);flex:none}
.eyebrow--light{color:rgba(255,255,255,.56)}

.h2{
  font-weight:300;font-size:clamp(32px,5.2vw,72px);line-height:1.04;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  text-wrap:balance;
}
.h2 .w{display:inline-block;white-space:nowrap}
.h2 .l{display:inline-block}

/* ─────────── кнопки ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 28px;border-radius:999px;border:0;
  background:var(--ink);color:#fff;
  font:500 15px/1 var(--f);letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  transition:background .35s,color .35s,box-shadow .35s,transform .45s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--mint-deep)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}
.btn--ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.btn--mint{background:var(--mint);color:#13231C}
.btn--mint:hover{background:var(--mint-hi)}
.btn--line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.btn--line:hover{background:rgba(255,255,255,.08)}
.btn--sm{height:42px;padding:0 18px;font-size:14px;gap:8px}
.ico{width:20px;height:20px;flex:none}
.btn--sm .ico{width:18px;height:18px}

/* ══════════════ ВХОДЫ ══════════════ */
/* обычный мягкий вход — только для второстепенного текста */
.js .rv{
  opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s);
}
.js .rv.on{opacity:1;transform:none}

/* надзаголовок: чёрточка прочерчивается, слова выезжают из-за неё */
.js .eb span{opacity:0;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js .eb span:first-child{transform:translateX(10px)}
.js .eb span:last-child{transform:translateX(-14px);transition-delay:.28s}
.js .eb i{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.6,.05,.2,1) .1s}
.js .eb.on span{opacity:1;transform:none}
.js .eb.on i{transform:none}

/* 1) «кардиограмма»: буквы стоят на ломаной и по скроллу садятся на строку */
.h2[data-h="zig"] .l{
  transform:translateY(calc(var(--z,0)*var(--q,0)*1em)) rotate(calc(var(--z,0)*var(--q,0)*18deg));
  opacity:calc(1 - var(--q,0)*.8);
}
/* 2) «табло»: буквы перекидываются, как на вокзальном табло */
.h2[data-h="flap"] .w{perspective:520px}
.js .h2[data-h="flap"] .l{
  transform:rotateX(-98deg);transform-origin:50% 100%;opacity:0;
  transition:transform .75s var(--spring),opacity .25s;
  transition-delay:calc(var(--i)*42ms);
}
.js .h2[data-h="flap"].on .l{transform:none;opacity:1}
/* 3) «проявка»: заголовок открывается за бегущей точкой */
.h2[data-h="wipe"]{position:relative;width:fit-content}
.js .h2[data-h="wipe"]{
  clip-path:inset(-12% calc(100% - .2em) -12% -2%);
  transition:clip-path 1.35s cubic-bezier(.62,.04,.2,1);
}
.js .h2[data-h="wipe"].on{clip-path:inset(-12% -.6em -12% -2%)}
.js .h2[data-h="wipe"]::after{
  content:"";position:absolute;left:0;bottom:.16em;width:.2em;height:.2em;border-radius:50%;
  background:var(--mint);
  transition:left 1.35s cubic-bezier(.62,.04,.2,1),opacity .4s ease 1.2s;
}
.js .h2[data-h="wipe"].on::after{left:100%;opacity:0}
/* 4) «выдох»: разрядка собирается, текст проявляется из расфокуса */
.js [data-h="exhale"]{
  letter-spacing:.4em;opacity:0;filter:blur(12px);
  transition:letter-spacing 2s cubic-bezier(.16,.8,.2,1),opacity 1.3s ease,filter 1.5s ease;
}
.js [data-h="exhale"].on{letter-spacing:.07em;opacity:1;filter:none}

/* ══════════════ ИНТРО ══════════════ */
.intro{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility 0s linear .7s;
}
.no-js .intro{display:none}
.is-ready .intro{opacity:0;visibility:hidden;pointer-events:none}
.intro__logo{width:min(520px,74vw);transition:transform .9s var(--ease)}
.is-ready .intro__logo{transform:scale(1.04)}
.intro__mark{width:100%;height:auto;overflow:visible}
.intro__zig{stroke:var(--graphite);stroke-dasharray:1 3;stroke-dashoffset:1.02;animation:draw 1s .2s cubic-bezier(.6,.05,.3,1) forwards}
.intro__calm{stroke:var(--mint);stroke-dasharray:1 3;stroke-dashoffset:1.02;animation:draw .5s 1.12s cubic-bezier(.3,.6,.2,1) forwards}
.intro__dot{fill:var(--mint);transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .55s 1.52s cubic-bezier(.2,1.9,.4,1) forwards}
.intro__word{
  display:flex;justify-content:space-between;margin-top:.95em;
  font-weight:300;font-size:clamp(22px,5.4vw,42px);line-height:1;color:var(--graphite);text-transform:uppercase;
}
.intro__word span{opacity:0;transform:translateY(.35em);animation:up .7s var(--ease) forwards}
.intro__word span:nth-child(1){animation-delay:.50s}
.intro__word span:nth-child(2){animation-delay:.57s}
.intro__word span:nth-child(3){animation-delay:.64s}
.intro__word span:nth-child(4){animation-delay:.71s}
.intro__word span:nth-child(5){animation-delay:.78s}
.intro__word span:nth-child(6){animation-delay:.85s}
.intro__word span:nth-child(7){animation-delay:.92s}
.intro__word span:nth-child(8){animation-delay:.99s}
.intro__tag{
  margin-top:1.5em;text-align:center;color:var(--mute);
  font-size:clamp(9px,1.7vw,13px);letter-spacing:.46em;margin-right:-.46em;white-space:nowrap;
  opacity:0;animation:up .7s 1.25s var(--ease) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes up{to{opacity:1;transform:none}}

/* ══════════════ ШАПКА ══════════════ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);
  transition:background .5s,backdrop-filter .4s;
}
.hdr.is-stuck{background:rgba(250,250,249,.84);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
.hdr__in{
  height:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}

.brand{
  display:inline-flex;flex-direction:column;gap:.5em;flex:none;
  width:11em;font-size:12.5px;color:var(--graphite);text-decoration:none;
  transition:color .5s;
}
.brand__mark{width:100%;height:auto;overflow:visible}
.brand__mark *{vector-effect:non-scaling-stroke}
.brand__mark polyline{stroke:currentColor;stroke-width:1.35px}
.brand__mark line{stroke:var(--mint);stroke-width:1.9px}
.brand__dot{fill:var(--mint)}
.hdr .brand__zig{transform-origin:0 90px;transform:scaleY(calc(1 - var(--p)*.94));transition:transform .3s linear}
.brand__word{
  display:flex;justify-content:space-between;
  font-weight:400;line-height:1;text-transform:uppercase;
}
.brand--light{color:#EEF0EF}

.nav{display:flex;gap:clamp(18px,2.6vw,38px);margin-left:auto}
.nav a{
  position:relative;padding:8px 0;
  font-size:14px;font-weight:400;letter-spacing:.04em;text-decoration:none;color:var(--graphite);
  transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-cur::after{transform:scaleX(1)}

.hdr__cta{display:flex;align-items:center;gap:20px;flex:none}
.hdr__tel{font:400 14px/1 var(--f);letter-spacing:.04em;text-decoration:none;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .3s}
.hdr__tel:hover{color:var(--mint-deep)}

/* над тёмным финалом шапка темнеет */
.hdr.is-dark{background:rgba(35,38,42,.8)}
.hdr.is-dark .brand{color:#EEF0EF}
.hdr.is-dark .nav a,.hdr.is-dark .hdr__tel{color:rgba(238,240,239,.78)}
.hdr.is-dark .nav a:hover,.hdr.is-dark .hdr__tel:hover{color:#fff}
.hdr.is-dark .btn{background:var(--mint);color:#13231C}

/* линия прогресса — та же спокойная линия с точкой */
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;opacity:0;transition:opacity .4s}
.hdr.is-stuck .progress{opacity:1}
.progress i{display:block;height:100%;background:var(--mint);transform-origin:left;transform:scaleX(var(--p))}
.progress::after{
  content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--mint);
  transform:translateX(calc(var(--p)*100vw));
}

/* ══════════════ HERO ══════════════ */
.hero{
  --hp:0;
  position:relative;isolation:isolate;overflow:clip;
  min-height:100vh;min-height:100svh;
  padding:calc(var(--hdr) + clamp(14px,3.4vh,48px)) 0 clamp(28px,5vh,60px);
  display:flex;flex-direction:column;justify-content:center;
}
/* бумага кардиографа */
.hero__paper{
  position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(116,184,153,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,184,153,.15) 1px,transparent 1px),
    linear-gradient(rgba(116,184,153,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,184,153,.08) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 78% 66% at 50% 46%,#000 18%,transparent 76%);
          mask-image:radial-gradient(ellipse 78% 66% at 50% 46%,#000 18%,transparent 76%);
  transform:scale(calc(1 + var(--hp)*.12));
}
/* уходя, слои hero расслаиваются по глубине */
.hero__top{transform:translate3d(0,calc(var(--hp)*-84px),0);opacity:calc(1 - var(--hp)*1.2)}
.hero__bot{transform:translate3d(0,calc(var(--hp)*-30px),0)}

.hero__q,.hero__a{
  font-weight:300;font-size:var(--big);line-height:1;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.hero__q{color:var(--graphite);margin-top:clamp(14px,3vh,32px);min-height:1em}
.q{display:inline-block;transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s}
.q.out{opacity:0;transform:translateY(-.22em);filter:blur(6px)}
.q.pre{opacity:0;transform:translateY(.28em);transition:none}
.q span,.meter__num b{display:inline-block;animation:tremble .36s steps(1) infinite;animation-delay:calc(var(--i,0)*-.131s)}
@keyframes tremble{
  0%  {transform:translate(calc(var(--nerv)*-.012em),calc(var(--nerv)*.010em)) rotate(calc(var(--nerv)*-.55deg))}
  33% {transform:translate(calc(var(--nerv)*.011em),calc(var(--nerv)*-.014em)) rotate(calc(var(--nerv)*.45deg))}
  66% {transform:translate(calc(var(--nerv)*-.006em),calc(var(--nerv)*.015em)) rotate(calc(var(--nerv)*.6deg))}
  100%{transform:translate(calc(var(--nerv)*.009em),calc(var(--nerv)*-.008em)) rotate(calc(var(--nerv)*-.3deg))}
}

.hero__stage{position:relative;margin:clamp(2px,1.2vh,14px) 0}
.hero__line{width:100%;height:clamp(104px,22vh,200px);touch-action:pan-y}
.hero__hint{
  position:absolute;top:16%;
  right:max(var(--gut),calc((100% - var(--wrap))/2));
  font:400 11px/1 var(--m);letter-spacing:.16em;color:var(--mute);
  display:flex;align-items:center;gap:10px;
}
.hero__hint::before{content:"";width:22px;height:1px;background:var(--hair-2)}
.js.is-ready .hero__hint.is-off{opacity:0;transition:opacity .6s}

.hero__bot{
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:28px 48px;align-items:start;
}
.hero__a{justify-self:end;color:var(--ink);display:flex;align-items:baseline;margin-right:-.1em}
.hero__a i,.end__h i{
  display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--mint);flex:none;
}
.hero__info{padding-top:clamp(4px,1.4vh,18px)}
.hero__h1{font-weight:500;font-size:clamp(18px,1.55vw,22px);line-height:1.32;letter-spacing:.005em;text-wrap:balance}
.hero__lead{margin-top:14px;color:var(--mute);font-size:16px;line-height:1.62;max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3.4vh,34px)}
.hero__cta .btn{padding:0 22px}

/* вход hero после интро */
.js .hv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.js.is-ready .hv{opacity:1;transform:none}
.js .hero__a.hv{transform:translateX(38px)}
.js.is-ready .hero__a.hv{transform:none}

/* ══════════════ СЕКЦИИ ══════════════ */
.sec{padding:clamp(84px,11vw,168px) 0}
.sec--tint{background:var(--tint)}
.sec__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);
  gap:clamp(18px,2.4vw,30px) 48px;align-items:end;
  margin-bottom:clamp(44px,6vw,88px);
}
.sec__head .eyebrow{grid-column:1/-1}
.sec__note{color:var(--mute);font-size:16px;line-height:1.62;padding-bottom:.4em}

/* ─────────── услуги: стопка листов → реестр ─────────── */
.svc{border-top:1px solid var(--hair)}
.svc__row{position:relative;isolation:isolate}
/* лист бумаги под строкой: виден, пока строка лежит в стопке */
.svc__row::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:5px calc(var(--gut)*-.45);border-radius:14px;background:#fff;
  box-shadow:0 0 0 1px rgba(43,46,49,.06),0 26px 44px -26px rgba(43,46,49,.42);
  opacity:var(--sheet,0);
}
.svc__a{
  display:grid;grid-template-columns:88px minmax(0,1.05fr) minmax(0,1fr) 52px;
  gap:12px 28px;align-items:center;
  padding:clamp(28px,3.2vw,42px) 0 clamp(30px,3.4vw,46px);
  text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.svc__n{font:400 13px/1 var(--m);letter-spacing:.12em;color:var(--mute);transition:color .4s}
.svc__t{
  font-weight:400;font-size:clamp(20px,2.3vw,31px);line-height:1.2;letter-spacing:.005em;
  transition:transform .6s var(--ease);
}
.svc__d{color:var(--mute);font-size:16px;line-height:1.6;max-width:48ch}
.svc__go{
  justify-self:end;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:var(--hair-2);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:background .45s,color .45s,box-shadow .45s,transform .6s var(--ease);
}
.svc__go svg{width:20px;height:20px}
/* разделитель — мини-кардиограмма: нервная в покое, ровная под курсором */
.svc__line{position:absolute;left:0;bottom:-9px;width:100%;height:18px;overflow:visible;pointer-events:none;opacity:var(--rule,1)}
.svc__line path{
  fill:none;stroke:var(--hair-2);stroke-width:1.4px;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  transform-origin:0 9px;
  transition:transform .8s var(--ease),stroke .5s;
}
.svc__row.is-calm .svc__line path{transform:scaleY(.001);stroke:var(--mint)}
.svc__row.is-calm .svc__n{color:var(--mint-deep)}
.svc__row.is-calm .svc__t{transform:translateX(10px)}
.svc__row.is-calm .svc__go{background:var(--mint);color:#13231C;box-shadow:inset 0 0 0 1px var(--mint);transform:rotate(-45deg)}

/* ─────────── для кого: бланк заполняется ─────────── */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.who__c{
  --n:0;--t0:calc(var(--n)*.17s);
  position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.8vw,40px);border-radius:22px;background:var(--card);
  box-shadow:0 1px 0 rgba(43,46,49,.04),0 22px 50px -34px rgba(43,46,49,.22);
}
.who__frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.who__frame rect{
  fill:none;stroke:var(--mint);stroke-width:1.5px;
  stroke-dasharray:1 3;stroke-dashoffset:1.01;
}
.who__big{
  position:relative;align-self:flex-start;
  font-weight:300;font-size:clamp(64px,8.4vw,124px);line-height:.9;letter-spacing:.06em;
  color:var(--card);-webkit-text-stroke:2px var(--hair-2);paint-order:stroke fill;
  margin-bottom:clamp(30px,4vw,64px);
}
.who__big::after{
  content:attr(data-t);position:absolute;inset:0;
  color:var(--mint);-webkit-text-stroke:0;
  clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease);
}
.who__c.is-on .who__big::after{clip-path:inset(0 0 0 0)}
.who__t{font-weight:500;font-size:20px;line-height:1.25;margin-bottom:18px}
.who__l{display:grid;gap:12px;margin-bottom:34px}
.who__l li{position:relative;padding-left:22px;color:var(--graphite);font-size:15.5px;line-height:1.5}
.who__l li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.tick{position:absolute;left:0;top:.16em;width:19px;height:19px;overflow:visible}
.tick circle{fill:none;stroke:var(--mint);stroke-width:1.3}
.tick path{fill:none;stroke:var(--mint-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.who__go{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:6px 0;font-size:14.5px;font-weight:500;letter-spacing:.02em;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--hair-2);transition:color .3s,border-color .3s;
}
.who__go svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.who__go:hover{color:var(--mint-deep);border-color:var(--mint)}
.who__go:hover svg{transform:translateX(5px)}

/* сценарий: рамка → штамп → заголовок → галочки по одной → ссылка */
.js .who__c{
  background:transparent;box-shadow:none;
  transition:background .8s var(--ease) calc(var(--t0) + .8s),box-shadow 1s var(--ease) calc(var(--t0) + .9s);
}
.js .who__c.on{background:var(--card);box-shadow:0 1px 0 rgba(43,46,49,.04),0 22px 50px -34px rgba(43,46,49,.22)}
.js .who__frame rect{
  transition:stroke-dashoffset 1.25s cubic-bezier(.6,.05,.25,1) var(--t0),stroke 1s ease calc(var(--t0) + 1.4s);
}
.js .who__c.on .who__frame rect{stroke-dashoffset:0;stroke:var(--hair)}
.js .who__big{
  opacity:0;transform:scale(1.6) rotate(-9deg);transform-origin:30% 60%;
  transition:transform .55s var(--spring) calc(var(--t0) + .62s),opacity .18s linear calc(var(--t0) + .62s);
}
.js .who__c.on .who__big{opacity:1;transform:none}
/* штамп ложится залитым, потом краска «высыхает» в контур */
.js .who__c.on .who__big::after{animation:ink 1.3s var(--ease) calc(var(--t0) + .62s) backwards}
@keyframes ink{0%,42%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
.js .who__t{
  clip-path:inset(0 0 100% 0);transform:translateY(16px);
  transition:clip-path .8s var(--ease) calc(var(--t0) + .95s),transform .8s var(--ease) calc(var(--t0) + .95s);
}
.js .who__c.on .who__t{clip-path:inset(-10% 0 -20% 0);transform:none}
.js .who__l li{
  --tj:calc(var(--t0) + 1.12s + var(--j,0)*.14s);
  padding-left:30px;opacity:0;transform:translateX(-12px);
  transition:opacity .6s ease var(--tj),transform .7s var(--ease) var(--tj);
}
.js .who__l li::before{display:none}
.js .who__c.on .who__l li{opacity:1;transform:none}
.js .tick circle,.js .tick path{stroke-dasharray:1 3;stroke-dashoffset:1.01}
.js .tick circle{transition:stroke-dashoffset .55s var(--ease) calc(var(--tj) + .05s)}
.js .tick path{transition:stroke-dashoffset .4s var(--ease) calc(var(--tj) + .42s)}
.js .who__c.on .tick circle,.js .who__c.on .tick path{stroke-dashoffset:0}
.js .who__go{opacity:0;transition:opacity .8s ease calc(var(--t0) + 1.9s),color .3s,border-color .3s}
.js .who__c.on .who__go{opacity:1}

/* ─────────── как работаем ─────────── */
.proc{position:relative;padding:clamp(84px,11vw,168px) 0}
.proc__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;
  margin-bottom:clamp(44px,6vw,88px);
}
.proc__title .eyebrow{margin-bottom:clamp(18px,2.4vw,30px)}
.proc__title .sec__note{margin-top:clamp(14px,2.2vh,24px);max-width:46ch;padding-bottom:0}
.proc__view{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.meter,.flood{display:none}

.steps{position:relative;padding-top:clamp(140px,15vw,190px)}
.steps__line{
  position:absolute;top:0;left:calc(var(--gut)*-1);
  width:calc(100% + var(--gut)*2);height:clamp(120px,13vw,160px);
  max-width:none;
}
.steps__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,40px)}
.step{opacity:.26;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.step.on{opacity:1;transform:none}
.step__lvl{
  display:flex;align-items:baseline;gap:10px;margin-bottom:26px;
  font:400 11.5px/1 var(--m);letter-spacing:.14em;color:var(--mute);
}
.step__lvl b{font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:4ch}
.step--calm .step__lvl b{color:var(--mint-deep)}
.step__n{display:block;font:400 12px/1 var(--m);letter-spacing:.14em;color:var(--mute);margin-bottom:12px}
.step__t{font-weight:400;font-size:clamp(20px,1.9vw,26px);line-height:1.2;margin-bottom:12px}
.step__d{color:var(--mute);font-size:15.5px;line-height:1.6;max-width:34ch}

/* закреплённая сцена: экран стоит, шаги едут вдоль линии */
.pin-ok .proc{padding:0}
.pin-ok .proc__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--hdr);
}
.pin-ok .proc__head{margin-bottom:clamp(10px,3vh,38px)}
.pin-ok .h2--proc{font-size:clamp(30px,min(4.4vw,7.4vh),62px)}
.pin-ok .proc__view{max-width:none;padding:0}
.pin-ok .steps{
  --edge:max(var(--gut),calc((100vw - var(--wrap))/2));
  width:max-content;padding:clamp(108px,19vh,180px) var(--edge) 0;
  will-change:transform;
}
.pin-ok .steps__line{left:0;width:100%;height:clamp(100px,18vh,170px)}
.pin-ok .steps__list{display:flex;gap:0}
.pin-ok .step{flex:none;width:clamp(320px,38vw,560px);padding-right:clamp(32px,5vw,84px)}
.pin-ok .step__lvl{display:none}

/* большой счётчик волнения */
.pin-ok .meter{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.meter{--nerv:1}
.meter__cap{font:400 12px/1 var(--m);letter-spacing:.2em;color:var(--mute);transition:color .5s}
.meter__num{
  display:flex;align-items:baseline;
  font-weight:300;font-size:clamp(76px,min(11.5vw,21vh),184px);line-height:.8;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--paper);-webkit-text-stroke:2.6px var(--graphite);paint-order:stroke fill;
  transition:color .7s var(--ease),-webkit-text-stroke-color .7s var(--ease);
}
.meter__num i{font-style:normal;font-size:.4em;margin-left:.1em;-webkit-text-stroke-width:1.8px}
.meter.is-calm .meter__cap{color:var(--mint-deep)}
.meter.is-calm .meter__num{color:var(--mint);-webkit-text-stroke-color:var(--mint)}

/* мятная волна, которая идёт перед тёмной заливкой */
.pin-ok .flood{
  display:block;position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--mint);clip-path:circle(0px at 0px 0px);
}

/* ══════════════ КОНТАКТЫ + ПОДВАЛ ══════════════ */
.end{
  --fp:0px;   /* запас сверху, по которому идёт заливка */
  position:relative;isolation:isolate;overflow:clip;
  background:var(--night);color:#EEF0EF;
  padding-top:calc(var(--fp) + clamp(150px,17vw,250px));
}
.pin-ok .end{margin-top:calc(-100vh - var(--fp));z-index:6}
.end::before{
  content:"";position:absolute;inset:var(--fp) 0 0;z-index:-1;
  background-image:
    linear-gradient(rgba(116,184,153,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,184,153,.07) 1px,transparent 1px);
  background-size:120px 120px;background-position:center top;
  -webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%);
}
/* якорь ниже на высоту шапки: переход по меню приземляется на полностью залитый финал */
.end__anchor{position:absolute;left:0;top:calc(var(--fp) + var(--hdr));width:1px;height:1px;pointer-events:none}
.end__line{position:absolute;top:calc(var(--fp) + clamp(34px,4.4vw,70px));left:0;width:100%;height:clamp(84px,9vw,120px)}
.pin-ok .end__line{top:calc(var(--fp) + var(--hdr) + clamp(10px,2vh,30px))}
.end__in{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:26px;
  padding-bottom:clamp(70px,9vw,130px);
}
.end__in .eyebrow{margin-bottom:6px}
.end__h span{white-space:nowrap}
.end__side{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 64px;align-items:end;
  margin-top:clamp(22px,3.4vw,52px);padding-top:clamp(24px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.1);
}
.end__h{
  font-weight:300;font-size:clamp(40px,8.6vw,132px);line-height:.98;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;
}
.end__h i{margin-left:.02em}
.end__lead{color:rgba(238,240,239,.66);font-size:17px;line-height:1.62;max-width:36ch}
.end__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px}
.end__tel{
  font-weight:300;font-size:clamp(24px,2.5vw,34px);line-height:1;letter-spacing:.05em;
  color:#fff;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:linear-gradient(var(--mint),var(--mint)) 0 100%/0 1.5px no-repeat;padding-bottom:8px;
  transition:background-size .6s var(--ease);
}
.end__tel:hover{background-size:100% 1.5px}
/* кнопка в финале «вдыхает» после появления */
.js .end .rv:not(.on) .btn--mint{opacity:0}
.js .end .rv.on .btn--mint{animation:inhale .9s var(--spring) 1.05s backwards}
@keyframes inhale{from{transform:scale(.82);opacity:0}}

.ftr{border-top:1px solid rgba(255,255,255,.1)}
.ftr__in{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-block:30px 34px}
.ftr__nav{display:flex;gap:28px}
.ftr__nav a{font-size:13.5px;letter-spacing:.04em;color:rgba(238,240,239,.62);text-decoration:none;transition:color .3s}
.ftr__nav a:hover{color:#fff}
.ftr__legal{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12.5px;line-height:1.5;color:rgba(238,240,239,.46);text-align:right}
.ftr__legal span:empty{display:none}

/* ─────────── мобильная панель связи ─────────── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(35,38,42,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translateY(110%);transition:transform .6s var(--ease);
}
.dock.is-on{transform:none}
.dock .btn{flex:1;height:50px;padding:0 12px}

/* ══════════════ АДАПТИВ ══════════════ */
@media (max-width:1180px){
  .hero__bot{grid-template-columns:minmax(0,1fr)}
  .hero__a{order:-1}
  .hero__info{max-width:520px}
}
@media (max-width:1020px){
  .nav{display:none}
  .who{grid-template-columns:minmax(0,1fr)}
  .who__c{--n:0 !important;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:0 32px;align-items:start}
  .who__big{grid-row:1 / span 3;margin-bottom:0}
  .who__go{justify-self:start}
}
@media (max-width:860px){
  :root{--hdr:66px}
  body{font-size:16px}
  .sec__head,.proc__head{grid-template-columns:minmax(0,1fr)}
  .sec__note{max-width:46ch}

  .svc__a{grid-template-columns:40px minmax(0,1fr) 42px;gap:8px 10px;align-items:start}
  .svc__n{padding-top:.55em}
  .svc__d{grid-column:2 / 3;font-size:15px}
  .svc__go{grid-column:3;grid-row:1;width:42px;height:42px}
  .svc__go svg{width:17px;height:17px}
  .svc__row.is-calm .svc__t{transform:none}
  .svc__row::before{inset:4px -10px}

  /* линия шагов становится вертикальной, шаги выезжают от неё */
  .steps{padding-top:0;padding-left:64px}
  .steps__line{left:0;top:0;width:52px;height:100%}
  .steps__list{grid-template-columns:minmax(0,1fr);gap:46px}
  .step{transform:translateX(26px)}
  .step__lvl{margin-bottom:14px}
  .step__d{max-width:42ch}

  .end__side{grid-template-columns:minmax(0,1fr)}
  .end__cta{flex-direction:column;align-items:flex-start}
  .ftr__in{flex-direction:column;align-items:flex-start}
  .ftr__legal{align-items:flex-start;text-align:left}

  .dock{display:flex}
  .ftr{padding-bottom:env(safe-area-inset-bottom)}
}
@media (max-width:620px){
  .hdr__tel{display:none}
  .brand{font-size:11.5px}
  .hero{justify-content:flex-start;padding-top:calc(var(--hdr) + 26px)}
  .hero__eyebrow i{display:none}
  .hero__eyebrow{gap:6px 14px}
  .hero__cta .btn{flex:1 1 100%}
  .hero__hint{display:none}
  .who__c{display:flex}
  .who__big{margin-bottom:26px}
  .ftr__nav{gap:20px;flex-wrap:wrap}
}

@media (hover:none){
  .hero__hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .q span,.meter__num b{animation:none}
  .intro{display:none}
  .hero__top,.hero__bot,.hero__paper{transform:none;opacity:1}
}