/* ═══════════════════════════════════════════════════════════════════
   DIGITAL CLOUD · внутренние страницы · v2
   ───────────────────────────────────────────────────────────────────
   Направление: «нежный воздух». Белая бумага, голубая дымка,
   лавандовый акцент. Логотип — 4 круга, и они же становятся
   главным движением страницы (созвездие, которое собирается).

   Движение: только transform/opacity · UI < 300ms · появление 520–760ms
   Кривые: ease-out cubic-bezier(.23,1,.32,1) — вход
           ease-in-out cubic-bezier(.77,0,.175,1) — морфинг
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* цвет */
  --ink:#0b1f2a; --ink-2:#12303d;
  --paper:#ffffff; --paper-2:#f4fafc; --paper-3:#eaf5f9;
  --muted:#5b7c8a; --faint:#93aeb9;
  --signal:#7c6ce0; --signal-2:#6a58d8; --signal-3:#5a48c9;
  --signal-soft:rgba(124,108,224,.10);
  --sky:#cdeaf1; --sky-2:#e8f5f9; --sky-3:#dff1f6;
  --lav:#e0d0f8;
  --line:rgba(11,31,42,.14); --line-soft:rgba(11,31,42,.075);
  --line-signal:rgba(124,108,224,.34);

  /* шрифт */
  --sans:'DM Sans',system-ui,sans-serif;
  --display:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* движение */
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-soft:cubic-bezier(.16,.84,.24,1);
  --m-1:150ms; --m-2:230ms; --m-3:420ms; --m-4:680ms;

  /* сетка */
  --max:1180px; --gutter:clamp(20px,5vw,64px);
  --nav-h:68px;
}

*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:6px}

.wrap{width:min(var(--max),100%);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font:500 10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 0 · Индикатор прокрутки ──────────────────────────────────── */
.scrollbar{
  position:fixed;inset:0 0 auto;z-index:80;height:2px;
  background:linear-gradient(90deg,var(--signal),var(--sky));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* ── 1 · Шапка ─────────────────────────────────────────────────── */
.pnav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  transition:border-color var(--m-2) var(--ease),background var(--m-2) var(--ease),box-shadow var(--m-2) var(--ease);
}
.pnav.is-stuck{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--line-soft);
  box-shadow:0 20px 44px -38px rgba(11,31,42,.55);
}
.pnav__inner{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  min-height:var(--nav-h);
}

/* логотип: реальная геометрия — 4 круга разного размера */
.pbrand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.pbrand__mark{
  width:30px;height:auto;flex-shrink:0;overflow:visible;
  transition:transform var(--m-3) var(--ease);
}
.pbrand__mark circle{
  fill:var(--signal);fill-opacity:1;
  transform-box:fill-box;transform-origin:center;
  transition:transform var(--m-3) var(--ease),fill var(--m-2) var(--ease);
}
/* при наведении круги «дышат» — расходятся на 1px */
.pbrand:hover .pbrand__mark circle:nth-child(1){transform:translate(-1.2px,-1px)}
.pbrand:hover .pbrand__mark circle:nth-child(2){transform:translate(1.4px,-.6px)}
.pbrand:hover .pbrand__mark circle:nth-child(3){transform:translate(-1px,1.2px)}
.pbrand:hover .pbrand__mark circle:nth-child(4){transform:translate(1px,.8px)}
.pbrand__text{font:700 15.5px var(--display);letter-spacing:-.045em;white-space:nowrap}

.pnav__links{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);margin-left:auto}
.pnav__links a{
  position:relative;font-size:13px;color:var(--muted);
  padding:7px 0;transition:color var(--m-1) var(--ease);
}
.pnav__links a:after{
  content:'';position:absolute;left:0;right:0;bottom:1px;height:1.5px;
  background:var(--signal);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--m-2) var(--ease);
}
.pnav__links a:hover{color:var(--ink)}
.pnav__links a[aria-current="page"]{color:var(--ink);font-weight:500}
.pnav__links a[aria-current="page"]:after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.pnav__links a:hover:after{transform:scaleX(1)}}

.pnav__cta{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 17px;border-radius:99px;
  border:1px solid rgba(11,31,42,.2);
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:background var(--m-2) var(--ease),color var(--m-2) var(--ease),border-color var(--m-2) var(--ease),transform var(--m-1) var(--ease),box-shadow var(--m-2) var(--ease);
}
.pnav__cta:hover{
  background:var(--signal);border-color:var(--signal);color:#fff;
  box-shadow:0 14px 30px -14px rgba(124,108,224,.6);
}
.pnav__cta:active{transform:scale(.97)}

.pnav__burger{
  display:none;position:relative;width:40px;height:40px;margin-left:auto;
  border:1px solid var(--line);border-radius:50%;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color var(--m-2) var(--ease),background var(--m-2) var(--ease);
}
.pnav__burger:hover{border-color:var(--line-signal);background:var(--signal-soft)}
/* Линии строго из центра кнопки. Кнопка — flex-контейнер, поэтому обычные
   span'ы вставали в ряд по горизонтали и «крестик» разваливался.
   absolute + translate(-50%,-50%) держит обе линии на одной оси. */
.pnav__burger span{
  position:absolute;top:50%;left:50%;
  display:block;width:15px;height:1.5px;margin:0;
  background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%) translateY(-3.5px);
  transition:transform var(--m-2) var(--ease),opacity var(--m-1) var(--ease);
}
.pnav__burger span:last-child{transform:translate(-50%,-50%) translateY(3.5px)}
.pnav__burger[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.pnav__burger[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

.pnav__panel{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  border-top:1px solid transparent;
  background:rgba(255,255,255,.97);
  transition:grid-template-rows var(--m-3) var(--ease),border-color var(--m-2) var(--ease);
}
.pnav__panel.is-open{grid-template-rows:1fr;border-top-color:var(--line-soft)}
.pnav__panel > .wrap{overflow:hidden}
.pnav__panel nav{display:grid;padding:8px 0 16px}
.pnav__panel a{
  display:flex;align-items:center;min-height:46px;
  font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translate3d(0,-6px,0);
  transition:opacity var(--m-2) var(--ease),transform var(--m-2) var(--ease);
}
.pnav__panel.is-open a{opacity:1;transform:none}
.pnav__panel.is-open a:nth-child(1){transition-delay:30ms}
.pnav__panel.is-open a:nth-child(2){transition-delay:55ms}
.pnav__panel.is-open a:nth-child(3){transition-delay:80ms}
.pnav__panel.is-open a:nth-child(4){transition-delay:105ms}
.pnav__panel.is-open a:nth-child(5){transition-delay:130ms}
.pnav__panel.is-open a:nth-child(6){transition-delay:155ms}
.pnav__panel.is-open a:nth-child(7){transition-delay:180ms}
.pnav__panel.is-open a:nth-child(8){transition-delay:205ms}
.pnav__panel.is-open a:nth-child(9){transition-delay:230ms}
.pnav__panel a:last-child{border-bottom:0;color:var(--signal);font-weight:500}
@media (max-width:960px){
  .pnav__links{display:none}
  .pnav__cta{display:none}
  .pnav__burger{display:flex}
  /* на мобиле в шапке остаётся только бургер — бренд убран (только в шапке, футер не трогаем) */
  .pnav__inner>.pbrand{display:none}
}

/* ── 2 · Заголовок страницы ───────────────────────────────────── */
.phero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(64px,10vw,124px) 0 clamp(48px,7vw,84px);
  background:
    radial-gradient(120% 90% at 88% 6%,#ffffff 0%,rgba(255,255,255,0) 58%),
    linear-gradient(168deg,#eaf6fa 0%,#cdeaf1 56%,#ddf0f6 100%);
}
/* мягкая сетка */
.phero:before{
  content:'';position:absolute;z-index:-1;inset:0;opacity:.55;
  background-image:
    linear-gradient(rgba(11,31,42,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,42,.045) 1px,transparent 1px);
  background-size:clamp(48px,6vw,88px) clamp(48px,6vw,88px);
  mask-image:linear-gradient(118deg,transparent 8%,#000 68%);
  -webkit-mask-image:linear-gradient(118deg,transparent 8%,#000 68%);
}
/* нижняя растушёвка в бумагу — доводим до чистого белого,
   иначе на стыке с белой секцией видна полоса */
.phero:after{
  content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.34) 42%,
    rgba(255,255,255,.78) 74%,
    #ffffff 100%);
  pointer-events:none;
}

/* ── ФИШКА: логотип-созвездие ─────────────────────────────────── */
/* 4 круга реального логотипа. На входе они разлетаются и собираются
   в правильную формацию. При движении мыши — параллакс по глубине. */
.phero__mark{
  position:absolute;z-index:-1;
  right:clamp(12px,4vw,72px);top:clamp(4px,2.4vw,36px);
  width:min(34vw,400px);height:auto;overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 26px 64px rgba(63,127,150,.22));
}
.phero__mark circle{
  fill:#7fbdd4;fill-opacity:1;
  mix-blend-mode:normal;
  transform-box:fill-box;transform-origin:center;
  /* стартовое состояние: разлетевшиеся круги */
  transform:translate3d(var(--sx,0),var(--sy,0),0) scale(var(--ss,1));
  opacity:0;
  transition:
    transform 1100ms var(--ease-out) var(--sd,0ms),
    opacity 620ms var(--ease-out) var(--sd,0ms);
}
.phero__mark circle:nth-child(1){--sx:-46px;--sy:-38px;--ss:.6;--sd:60ms}
.phero__mark circle:nth-child(2){--sx:52px;--sy:-26px;--ss:.55;--sd:150ms}
.phero__mark circle:nth-child(3){--sx:-38px;--sy:44px;--ss:.62;--sd:240ms}
.phero__mark circle:nth-child(4){--sx:40px;--sy:36px;--ss:.58;--sd:330ms}
.phero.is-in .phero__mark circle{
  transform:translate3d(calc(var(--px,0px) * var(--depth,1)),calc(var(--py,0px) * var(--depth,1)),0) scale(1);
  opacity:1;
}
.phero__mark circle:nth-child(1){--depth:1.5}
.phero__mark circle:nth-child(2){--depth:2.4}
.phero__mark circle:nth-child(3){--depth:.9}
.phero__mark circle:nth-child(4){--depth:1.9}
/* после сборки — медленное дыхание */
.phero.is-in .phero__mark circle{animation:markBreathe 9s ease-in-out infinite alternate}
.phero.is-in .phero__mark circle:nth-child(2){animation-delay:-2.2s}
.phero.is-in .phero__mark circle:nth-child(3){animation-delay:-4.4s}
.phero.is-in .phero__mark circle:nth-child(4){animation-delay:-6.6s}
@keyframes markBreathe{
  from{translate:0 0}
  to{translate:7px -9px}
}

.phero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:#3f6273;margin-bottom:24px;
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity 520ms var(--ease-out) 40ms,transform 620ms var(--ease-out) 40ms;
}
.phero__eyebrow:before{content:'';display:block;width:26px;height:1px;background:currentColor}
.phero h1{
  font:500 clamp(40px,6.6vw,86px)/.93 var(--display);
  letter-spacing:-.072em;margin:0;max-width:12ch;
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 620ms var(--ease-out) 120ms,transform 760ms var(--ease-out) 120ms;
}
.phero h1 em{font-style:normal;color:var(--signal)}
.phero__lede{
  margin:26px 0 0;max-width:44ch;
  font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:#3f6273;
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity 620ms var(--ease-out) 220ms,transform 760ms var(--ease-out) 220ms;
}
.phero.is-in .phero__eyebrow,
.phero.is-in h1,
.phero.is-in .phero__lede{opacity:1;transform:none}

@media (max-width:900px){
  .phero__mark{width:min(46vw,340px);right:-4%;top:-2%}
}
@media (max-width:620px){
  .phero__mark{width:min(52vw,240px);right:-8%;top:0}
}

/* ── 3 · Секции ───────────────────────────────────────────────── */
.psec{padding:clamp(56px,7.5vw,104px) 0}
.psec--tint{background:var(--paper-2)}
.psec--sky{background:linear-gradient(180deg,#f4fafc 0%,#e8f5f9 100%)}
.psec__head{margin-bottom:clamp(30px,4vw,56px);max-width:62ch}
.psec__head h2{
  font:500 clamp(27px,3.5vw,46px)/1.02 var(--display);
  letter-spacing:-.058em;margin:0 0 14px;
}
.psec__head h2 em{font-style:normal;color:var(--signal)}
.psec__head p{margin:0;color:var(--muted);font-size:15px;line-height:1.66}
.psec__label{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--muted);margin-bottom:16px;
}
.psec__label:before{content:'';display:block;width:22px;height:1px;background:currentColor}

/* ── 4 · Карточки ─────────────────────────────────────────────── */
.cards{display:grid;gap:clamp(12px,1.6vw,18px)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.cards--3,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards--2,.cards--3,.cards--4{grid-template-columns:1fr}}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(22px,2.5vw,32px);
  border:1px solid var(--line-soft);border-radius:20px;
  background:#fff;
  transition:border-color var(--m-2) var(--ease),transform var(--m-2) var(--ease),box-shadow var(--m-2) var(--ease);
}
/* прожектор под курсором — координаты пишет JS в --mx/--my */
.card:before{
  content:'';position:absolute;z-index:-1;inset:0;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(124,108,224,.10),transparent 68%);
  transition:opacity var(--m-3) var(--ease);
  pointer-events:none;
}
/* тонкая линия-акцент сверху, растёт при наведении */
.card:after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--signal),var(--sky));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--m-3) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    border-color:var(--line-signal);
    transform:translateY(-4px);
    box-shadow:0 26px 52px -34px rgba(11,31,42,.42);
  }
  .card:hover:before{opacity:1}
  .card:hover:after{transform:scaleX(1)}
}
.card__num{
  font:500 10px var(--mono);letter-spacing:.16em;
  color:var(--faint);margin-bottom:16px;
  transition:color var(--m-2) var(--ease);
}
.card:hover .card__num{color:var(--signal)}
.card h3{
  font:600 clamp(16px,1.7vw,20px)/1.25 var(--display);
  letter-spacing:-.035em;margin:0 0 10px;
}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.66}
.card p + p{margin-top:10px}
.card strong{color:var(--ink);font-weight:600}
.card--accent{background:linear-gradient(160deg,#f8f6ff 0%,#fff 62%);border-color:rgba(124,108,224,.2)}
.card--sky{background:linear-gradient(160deg,#f4fafc 0%,#fff 62%)}

/* ── 5 · Аккордеон (FAQ) ──────────────────────────────────────── */
.acc{display:grid;gap:9px}
.acc__item{
  border:1px solid var(--line-soft);border-radius:16px;
  background:#fff;overflow:hidden;
  transition:border-color var(--m-2) var(--ease),background var(--m-2) var(--ease),box-shadow var(--m-2) var(--ease);
}
.acc__item:hover{border-color:var(--line-signal)}
.acc__item.is-open{
  border-color:rgba(124,108,224,.42);
  background:linear-gradient(180deg,#faf9ff 0%,#fff 42%);
  box-shadow:0 20px 44px -38px rgba(124,108,224,.6);
}
.acc__btn{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  padding:19px clamp(16px,2vw,26px);text-align:left;
  font:500 15px/1.45 var(--sans);color:var(--ink);
  transition:color var(--m-1) var(--ease);
}
.acc__btn:hover{color:var(--signal)}
.acc__idx{
  flex-shrink:0;font:500 10px/1.9 var(--mono);letter-spacing:.1em;
  color:var(--faint);min-width:22px;
  transition:color var(--m-2) var(--ease);
}
.acc__item.is-open .acc__idx{color:var(--signal)}
.acc__q{flex:1;min-width:0}
.acc__sign{
  flex-shrink:0;position:relative;width:24px;height:24px;margin-top:0;
  border-radius:50%;background:rgba(11,31,42,.05);
  transition:background var(--m-2) var(--ease),transform var(--m-3) var(--ease);
}
.acc__sign:before,.acc__sign:after{
  content:'';position:absolute;left:50%;top:50%;
  background:var(--ink);border-radius:1px;
  transition:transform var(--m-3) var(--ease),opacity var(--m-2) var(--ease),background var(--m-2) var(--ease);
}
.acc__sign:before{width:9px;height:1.5px;transform:translate(-50%,-50%)}
.acc__sign:after{width:1.5px;height:9px;transform:translate(-50%,-50%)}
.acc__item.is-open .acc__sign{background:var(--signal);transform:rotate(90deg)}
.acc__item.is-open .acc__sign:before,
.acc__item.is-open .acc__sign:after{background:#fff}
.acc__item.is-open .acc__sign:after{opacity:0;transform:translate(-50%,-50%) scaleY(0)}
.acc__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--m-3) var(--ease);
}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__body > div{overflow:hidden}
.acc__inner{
  padding:0 clamp(16px,2vw,26px) 22px calc(clamp(16px,2vw,26px) + 36px);
  color:var(--muted);font-size:14px;line-height:1.76;
  opacity:0;transform:translate3d(0,-6px,0);
  transition:opacity var(--m-3) var(--ease),transform var(--m-3) var(--ease);
}
.acc__item.is-open .acc__inner{opacity:1;transform:none;transition-delay:70ms}
.acc__inner strong{color:var(--ink);font-weight:600}
.acc__inner a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.acc__inner p{margin:0 0 10px}
.acc__inner p:last-child{margin-bottom:0}
@media (max-width:620px){
  .acc__inner{padding-left:clamp(16px,2vw,26px)}
  .acc__idx{display:none}
}

/* фильтры */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,36px)}
.filter{
  padding:9px 17px;border-radius:99px;
  border:1px solid var(--line);background:#fff;
  font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
  transition:background var(--m-2) var(--ease),color var(--m-2) var(--ease),border-color var(--m-2) var(--ease),transform var(--m-1) var(--ease),box-shadow var(--m-2) var(--ease);
}
.filter:hover{border-color:var(--line-signal);color:var(--ink)}
.filter:active{transform:scale(.97)}
.filter[aria-pressed="true"]{
  background:var(--signal);border-color:var(--signal);color:#fff;
  box-shadow:0 12px 26px -14px rgba(124,108,224,.7);
}

/* ── 6 · Таблицы ──────────────────────────────────────────────── */
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable caption{
  text-align:left;font:500 10px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding-bottom:10px;
}
.ptable th,.ptable td{
  padding:12px 15px;text-align:left;
  border-bottom:1px solid var(--line-soft);
}
.ptable th{
  font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:rgba(11,31,42,.025);
}
.ptable th:first-child{border-top-left-radius:10px}
.ptable th:last-child{border-top-right-radius:10px}
.ptable td{color:var(--muted)}
.ptable td:first-child{color:var(--ink);font-weight:500}
.ptable tr:last-child td{border-bottom:0}
.ptable tbody tr{transition:background var(--m-1) var(--ease)}
.ptable tbody tr:hover{background:rgba(124,108,224,.035)}
.ptable--tight th,.ptable--tight td{padding:9px 12px;font-size:13px}
.table-wrap{
  border:1px solid var(--line-soft);border-radius:16px;
  overflow:hidden;background:#fff;
  box-shadow:0 18px 40px -40px rgba(11,31,42,.4);
}

/* ── 7 · Шаги (how-to) — таймлайн с растущей линией ───────────── */
.steps{position:relative;display:grid;gap:0;border-top:1px solid var(--line-soft)}
/* вертикальная линия прогресса */
.steps:before{
  content:'';position:absolute;left:calc(clamp(52px,7vw,96px) / 2);top:0;bottom:0;
  width:1px;background:var(--line-soft);
}
.steps:after{
  content:'';position:absolute;left:calc(clamp(52px,7vw,96px) / 2);top:0;
  width:1px;height:var(--fill,0%);
  background:linear-gradient(180deg,var(--signal),var(--sky));
  transition:height 120ms linear;
}
.step{
  position:relative;
  display:grid;grid-template-columns:clamp(52px,7vw,96px) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px);
  padding:clamp(24px,3vw,36px) 0;
  border-bottom:1px solid var(--line-soft);
}
.step__num{
  position:relative;z-index:1;
  font:500 clamp(22px,3vw,34px)/1 var(--display);
  letter-spacing:-.05em;color:var(--faint);
  transition:color var(--m-3) var(--ease),transform var(--m-3) var(--ease);
}
.step:hover .step__num{color:var(--signal);transform:translateX(2px)}
.step__body h3{
  font:600 clamp(17px,2vw,23px)/1.2 var(--display);
  letter-spacing:-.04em;margin:0 0 12px;
}
.step__body p{margin:0 0 10px;color:var(--muted);font-size:14.5px;line-height:1.72}
.step__body p:last-child{margin-bottom:0}
.step__body strong{color:var(--ink);font-weight:600}
.step__body a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.step__body ul{margin:0 0 10px;padding-left:18px;color:var(--muted);font-size:14.5px;line-height:1.72}
.step__body li{margin-bottom:4px}
.step__body .table-wrap{margin:14px 0}
.note{
  display:flex;gap:11px;margin-top:14px;padding:15px 17px;
  border-radius:14px;border:1px solid rgba(124,108,224,.22);
  background:rgba(124,108,224,.05);
  color:#4a3f8f;font-size:13.5px;line-height:1.66;
}
.note:before{
  content:'!';flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:var(--signal);color:#fff;font:700 11px/18px var(--sans);
  text-align:center;margin-top:1px;
}
@media (max-width:620px){
  .step{grid-template-columns:1fr;gap:8px}
  .step__num{font-size:20px}
  .steps:before,.steps:after{display:none}
}

/* ── 8 · Длинный юридический текст ────────────────────────────── */
.doc{max-width:74ch}
.doc h2{
  font:500 clamp(21px,2.6vw,30px)/1.15 var(--display);
  letter-spacing:-.045em;margin:clamp(36px,4vw,54px) 0 16px;
  padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--line-soft);
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{
  font:600 16px/1.3 var(--display);letter-spacing:-.02em;
  margin:26px 0 10px;color:var(--ink);
}
.doc p{margin:0 0 13px;color:var(--muted);font-size:14.5px;line-height:1.8}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.doc ul{margin:0 0 14px;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.8}
.doc li{margin-bottom:6px}
.doc li::marker{color:var(--faint)}
.doc .table-wrap{margin:16px 0}
.doc__meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  padding:15px 19px;margin-bottom:clamp(26px,3vw,38px);
  border:1px solid var(--line-soft);border-radius:14px;
  background:var(--paper-2);
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* под-навигация по документам */
.subnav{
  position:sticky;top:var(--nav-h);z-index:40;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:11px 0;margin-bottom:clamp(26px,3vw,42px);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  flex-shrink:0;padding:8px 15px;border-radius:99px;
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
  transition:background var(--m-2) var(--ease),color var(--m-2) var(--ease);
}
.subnav a:hover{background:rgba(11,31,42,.05);color:var(--ink)}
.subnav a.is-active{background:var(--signal);color:#fff}

/* ── 9 · Цифры ────────────────────────────────────────────────── */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,2vw,24px);
  padding:clamp(26px,3.4vw,42px);
  border-radius:22px;border:1px solid var(--line-soft);
  background:linear-gradient(160deg,#f8f6ff 0%,#f4fafc 100%);
}
.stat{position:relative}
.stat + .stat:before{
  content:'';position:absolute;left:calc(clamp(12px,2vw,24px) / -2);top:6%;bottom:6%;
  width:1px;background:var(--line-soft);
}
.stat__value{
  font:500 clamp(28px,4vw,46px)/1 var(--display);
  letter-spacing:-.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat__label{
  margin-top:9px;font:500 10px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3):before{display:none}
}

/* ── 10 · Контакты ────────────────────────────────────────────── */
.contact{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
  padding:clamp(22px,2.5vw,30px);
  border:1px solid var(--line-soft);border-radius:20px;background:#fff;
  transition:border-color var(--m-2) var(--ease),transform var(--m-2) var(--ease),box-shadow var(--m-2) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .contact:hover{
    border-color:var(--line-signal);transform:translateY(-4px);
    box-shadow:0 26px 52px -34px rgba(11,31,42,.42);
  }
}
.contact__icon{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;margin-bottom:14px;
  background:var(--signal-soft);color:var(--signal);
  transition:background var(--m-2) var(--ease),color var(--m-2) var(--ease),transform var(--m-2) var(--ease);
}
.contact:hover .contact__icon{background:var(--signal);color:#fff;transform:scale(1.04)}
.contact__icon svg{width:19px;height:19px}
.contact h3{font:600 16px/1.3 var(--display);letter-spacing:-.03em;margin:0 0 4px}
.contact__value{font-size:14px;color:var(--ink);word-break:break-word}
.contact__note{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:10px}

/* ── 11 · Код / реферал ───────────────────────────────────────── */
.codebox{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:clamp(22px,2.6vw,32px);
  border-radius:20px;border:1px dashed rgba(124,108,224,.42);
  background:linear-gradient(160deg,#f8f6ff 0%,#fff 70%);
}
.codebox__value{
  font:500 clamp(18px,2.6vw,28px)/1 var(--mono);
  letter-spacing:.02em;color:var(--ink);
}
.codebox__copy{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:0 17px;border-radius:99px;
  border:1px solid rgba(11,31,42,.2);
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:background var(--m-2) var(--ease),color var(--m-2) var(--ease),border-color var(--m-2) var(--ease),transform var(--m-1) var(--ease);
}
.codebox__copy:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.codebox__copy:active{transform:scale(.97)}
.codebox__copy.is-done{background:#0f9d6e;border-color:#0f9d6e;color:#fff}

.pricepair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
@media (max-width:560px){.pricepair{grid-template-columns:1fr}}
.pricepair__card{
  padding:clamp(24px,3vw,36px);border-radius:20px;text-align:center;
  border:1px solid var(--line-soft);background:#fff;
  transition:border-color var(--m-2) var(--ease),transform var(--m-2) var(--ease),box-shadow var(--m-2) var(--ease);
}
.pricepair__card:hover{transform:translateY(-3px);box-shadow:0 24px 48px -36px rgba(11,31,42,.4)}
.pricepair__card--new{border-color:rgba(15,157,110,.3);background:linear-gradient(160deg,#f2fdf8 0%,#fff 70%)}
.pricepair__value{font:500 clamp(28px,4vw,42px)/1 var(--display);letter-spacing:-.06em}
.pricepair__card--old .pricepair__value{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
.pricepair__label{margin-top:9px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pricepair__badge{
  display:inline-block;margin-top:12px;padding:5px 12px;border-radius:99px;
  background:rgba(15,157,110,.12);color:#0f9d6e;
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
}

/* ── 12 · Список с галочками ──────────────────────────────────── */
.checks{display:grid;gap:0;list-style:none;margin:0;padding:0}
.checks li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-size:14.5px;line-height:1.66;color:var(--muted);
}
.checks li:last-child{border-bottom:0}
.checks li:before{
  content:'';flex-shrink:0;width:17px;height:17px;margin-top:4px;
  border-radius:50%;background:rgba(124,108,224,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6ce0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat;
}
.checks strong{color:var(--ink);font-weight:600}

/* ── 13 · CTA-полоса ──────────────────────────────────────────── */
.pcta{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(48px,6.5vw,88px) 0;
  /* Мягкая «шторка» сверху гасит резкий стык с предыдущей секцией.
     Стартовый #f9fcfd — ровно середина между белым (#fff) и подложкой
     (#f4fafc): разница с любым из них ≤6 единиц, стык не читается. */
  background:linear-gradient(180deg,
    #f9fcfd 0%,
    #f1f8fb 14%,
    #e4f3f8 30%,
    #d5ecf3 48%,
    #cdeaf1 62%,
    #dff1f6 82%,
    #ffffff 100%);
}
.pcta:before{
  content:'';position:absolute;z-index:-1;right:-8%;top:-40%;
  width:min(46vw,460px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.pcta__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(22px,3vw,44px);
}
.pcta h2{
  font:500 clamp(27px,3.7vw,48px)/1 var(--display);
  letter-spacing:-.062em;margin:0;max-width:18ch;
}
.pcta h2 em{font-style:normal;color:var(--signal)}
.pcta__actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 23px;border-radius:99px;
  border:1px solid var(--ink);
  font:500 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;
  transition:background var(--m-2) var(--ease),color var(--m-2) var(--ease),border-color var(--m-2) var(--ease),transform var(--m-1) var(--ease),box-shadow var(--m-2) var(--ease);
}
.btn svg{width:14px;height:14px;transition:transform var(--m-2) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
/* кнопка отправки: при наведении иконка и текст поднимаются вместе, а не уезжают вправо */
.sign__submit:hover svg{transform:translateY(-2px)}
.sign__submit:hover{transform:translateY(-2px)}
.btn--signal{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--signal:hover{
  background:var(--signal-2);border-color:var(--signal-2);
  box-shadow:0 18px 40px -18px rgba(124,108,224,.66);
}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(11,31,42,.24)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── 14 · Футер ───────────────────────────────────────────────── */
.pfoot{
  background:#fff;border-top:1px solid var(--line-soft);
  padding:clamp(36px,4.6vw,58px) 0 28px;
}
.pfoot__top{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:clamp(26px,4vw,60px);padding-bottom:clamp(26px,3vw,38px);
}
.pfoot__brand{max-width:290px}
.pfoot__brand .pbrand{margin-bottom:14px}
.pfoot__brand p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.66}
.pfoot__cols{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,76px)}
.pfoot__col h4{
  margin:0 0 13px;font:500 10px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.pfoot__col nav{display:grid;gap:2px}
.pfoot__col a{
  position:relative;display:inline-block;
  font-size:13.5px;color:var(--muted);padding:4px 0;
  transition:color var(--m-1) var(--ease);
}
.pfoot__col a:after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--m-2) var(--ease);
}
.pfoot__col a:hover{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.pfoot__col a:hover:after{transform:scaleX(1)}}
.pfoot__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--faint);
}
.pfoot__bottom a{color:var(--muted);transition:color var(--m-1) var(--ease)}
.pfoot__bottom a:hover{color:var(--signal)}

/* ── 15 · Движение ────────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity var(--m-4) var(--ease-out),transform 760ms var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none}
.reveal--d1{transition-delay:80ms}
.reveal--d2{transition-delay:160ms}
.reveal--d3{transition-delay:240ms}

/* каскад внутри списков */
.stagger > *{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity 560ms var(--ease-out),transform 620ms var(--ease-out);
}
.stagger.is-in > *{opacity:1;transform:none}
.stagger.is-in > *:nth-child(1){transition-delay:0ms}
.stagger.is-in > *:nth-child(2){transition-delay:55ms}
.stagger.is-in > *:nth-child(3){transition-delay:110ms}
.stagger.is-in > *:nth-child(4){transition-delay:165ms}
.stagger.is-in > *:nth-child(5){transition-delay:220ms}
.stagger.is-in > *:nth-child(6){transition-delay:275ms}
.stagger.is-in > *:nth-child(7){transition-delay:330ms}
.stagger.is-in > *:nth-child(8){transition-delay:385ms}
.stagger.is-in > *:nth-child(9){transition-delay:440ms}
.stagger.is-in > *:nth-child(10){transition-delay:495ms}
.stagger.is-in > *:nth-child(n+11){transition-delay:550ms}

/* ── 16 · Reduced motion / no-js ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .phero__mark circle{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .phero__eyebrow,.phero h1,.phero__lede{opacity:1!important;transform:none!important;transition:none!important}
  .reveal,.stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .acc__body,.acc__inner,.pnav__panel,.pnav__panel a{transition:none!important}
  .card,.contact,.btn,.pnav__cta,.filter,.codebox__copy,.pricepair__card{transition:none!important}
  .steps:after{transition:none}
  .scrollbar{display:none}
}
.no-js .reveal,.no-js .stagger > *{opacity:1!important;transform:none!important}
.no-js .phero__mark circle{opacity:1!important;transform:none!important}
.no-js .phero__eyebrow,.no-js .phero h1,.no-js .phero__lede{opacity:1!important;transform:none!important}

/* ── 17 · Модалка входа / регистрации ─────────────────────────── */
.auth{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity var(--m-2) var(--ease-out),visibility 0s linear var(--m-2);
}
.auth.is-open{opacity:1;visibility:visible;transition:opacity var(--m-2) var(--ease-out),visibility 0s}
.auth__scrim{
  position:absolute;inset:0;background:rgba(11,31,42,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.auth__card{
  position:relative;width:min(430px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 40px 90px -40px rgba(11,31,42,.5),0 2px 6px rgba(11,31,42,.06);
  padding:clamp(24px,4vw,34px);
  transform:translate3d(0,14px,0) scale(.985);opacity:0;
  transition:transform var(--m-3) var(--ease-out),opacity var(--m-2) var(--ease-out);
}
.auth.is-open .auth__card{transform:none;opacity:1}
.auth__close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);cursor:pointer;
  transition:color var(--m-1) var(--ease-out),border-color var(--m-1) var(--ease-out),transform var(--m-1) var(--ease-out);
}
.auth__close:hover{color:var(--ink);border-color:rgba(11,31,42,.3)}
.auth__close:active{transform:scale(.94)}
.auth__close svg{width:14px;height:14px}
.auth__mark{display:block;width:46px;height:auto;margin-bottom:16px;overflow:visible}
.auth__mark circle{
  fill:#7fbdd4;fill-opacity:1;transform-box:fill-box;transform-origin:center;
  transform:translate3d(0,6px,0) scale(.82);opacity:0;
  transition:transform 620ms var(--ease-out) var(--sd,0ms),opacity 420ms var(--ease-out) var(--sd,0ms);
}
.auth__mark circle:nth-child(1){--sd:40ms}
.auth__mark circle:nth-child(2){--sd:100ms}
.auth__mark circle:nth-child(3){--sd:160ms}
.auth__mark circle:nth-child(4){--sd:220ms}
.auth.is-open .auth__mark circle{transform:none;opacity:1}
.auth__title{font:600 clamp(21px,3vw,25px)/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.auth__sub{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 20px}
.auth__form{display:grid;gap:12px}
.auth__field{display:grid;gap:6px}
.auth__field label{
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);transition:color var(--m-1) var(--ease-out);
}
.auth__field:focus-within label{color:var(--signal)}
.auth__field input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-2);font:400 14px var(--sans);color:var(--ink);
  transition:border-color var(--m-1) var(--ease-out),background var(--m-1) var(--ease-out),box-shadow var(--m-1) var(--ease-out);
}
.auth__field input::placeholder{color:var(--faint)}
.auth__field input:focus{outline:none;border-color:var(--signal);background:#fff;box-shadow:0 0 0 3px rgba(124,108,224,.14)}
.auth__field input[aria-invalid="true"]{border-color:#d9534f;background:#fff6f6}
.auth__forgot{margin:-4px 0 0;text-align:right;font-size:12px;line-height:1.4;
  max-height:24px;opacity:1;overflow:hidden;
  transition:max-height var(--m-2) var(--ease-out),opacity var(--m-2) var(--ease-out),margin var(--m-2) var(--ease-out)}
.auth.is-register .auth__forgot{max-height:0;opacity:0;margin:0}
.auth__forgot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;
  transition:color var(--m-1) var(--ease-out)}
.auth__forgot a:hover{color:var(--signal)}
.auth__extra{
  display:grid;gap:12px;overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height var(--m-3) var(--ease-out),opacity var(--m-2) var(--ease-out);
}
.auth.is-register .auth__extra{max-height:220px;opacity:1}
.auth__consent{
  display:grid;gap:10px;margin-top:4px;overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height var(--m-3) var(--ease-out),opacity var(--m-2) var(--ease-out);
}
.auth.is-register .auth__consent{max-height:260px;opacity:1}
.auth__check{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-size:11.5px;line-height:1.5;color:var(--muted)}
.auth__check input{flex:0 0 auto;width:16px;height:16px;margin-top:1px;accent-color:var(--signal);cursor:pointer}
.auth__check a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.auth__check input[aria-invalid="true"]{outline:2px solid #d9534f;outline-offset:1px;border-radius:3px}
.auth__error{
  display:none;font-size:12px;line-height:1.45;color:#c0392b;
  background:#fdf1f0;border:1px solid #f3d3d0;border-radius:10px;padding:9px 12px;
}
.auth__error.is-on{display:block}
.auth__submit{width:100%;justify-content:center;margin-top:6px}
.auth__submit:active{transform:scale(.985)}
.auth__status{margin:0;font-size:12px;line-height:1.45;color:var(--signal);text-align:center;min-height:1em}
.auth__switch{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.auth__switch button{
  background:none;border:0;padding:0;font:inherit;color:var(--signal);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
body.auth-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .auth,.auth__card,.auth__mark circle,.auth__extra,.auth__consent{transition:none!important}
  .auth__mark circle{transform:none;opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════
   15 · ЭКРАН ДОСТУПА (gate) — /block/<reason>
   ───────────────────────────────────────────────────────────────────
   Светлая «нежная» тема вместо тёмной модалки. На фоне — размытая
   имитация кабинета, поверх — карточка-препятствие. Логотип-созвездие
   собирается из 4 кругов, как и на остальных страницах.
   ═══════════════════════════════════════════════════════════════════ */
.gate{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100dvh;display:grid;place-items:center;
  padding:clamp(28px,5vw,72px) var(--gutter);
  background:linear-gradient(180deg,#f4fafc 0%,#e8f5f9 48%,#ffffff 100%);
}
/* бумажная сетка, гаснет к низу */
.gate:before{
  content:'';position:absolute;z-index:-2;inset:0;
  background-image:
    linear-gradient(rgba(11,31,42,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,42,.04) 1px,transparent 1px);
  background-size:clamp(48px,6vw,88px) clamp(48px,6vw,88px);
  mask-image:radial-gradient(130% 92% at 50% 0%,#000 0%,transparent 74%);
  -webkit-mask-image:radial-gradient(130% 92% at 50% 0%,#000 0%,transparent 74%);
  pointer-events:none;
}
/* размытая имитация кабинета — глубина без отвлечения */
.gate__mock{
  position:absolute;z-index:-1;inset:0;
  display:grid;place-items:center;
  filter:blur(15px) saturate(.85);opacity:.55;
  pointer-events:none;user-select:none;
}
.gate__mock-inner{width:min(980px,92vw);display:grid;gap:14px}
.gate__mock-bar{height:46px;border-radius:14px;background:#fff;border:1px solid var(--line-soft)}
.gate__mock-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gate__mock-card{height:118px;border-radius:18px;background:#fff;border:1px solid var(--line-soft)}
@media (max-width:640px){
  .gate__mock-row{grid-template-columns:1fr}
  .gate__mock-card:nth-child(n+2){display:none}
}

.gate__card{
  position:relative;width:min(520px,100%);
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:clamp(26px,4vw,42px);
  box-shadow:0 44px 96px -46px rgba(11,31,42,.42),0 2px 8px rgba(11,31,42,.05);
  text-align:center;
  opacity:0;transform:translate3d(0,16px,0) scale(.99);
  animation:gateIn 620ms var(--ease-out) 80ms forwards;
}
@keyframes gateIn{to{opacity:1;transform:none}}
.gate__card--narrow{width:min(440px,100%)}

/* логотип-созвездие: 4 круга собираются */
.gate__mark{display:block;width:56px;height:auto;margin:0 auto 20px;overflow:visible}
.gate__mark circle{
  fill:#7fbdd4;transform-box:fill-box;transform-origin:center;
  transform:translate3d(0,8px,0) scale(.8);opacity:0;
  animation:gateMark 700ms var(--ease-out) forwards;
}
.gate__mark circle:nth-child(1){animation-delay:180ms}
.gate__mark circle:nth-child(2){animation-delay:250ms}
.gate__mark circle:nth-child(3){animation-delay:320ms}
.gate__mark circle:nth-child(4){animation-delay:390ms}
@keyframes gateMark{to{transform:none;opacity:1}}

.gate__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--faint);margin-bottom:14px;
}
.gate__eyebrow:before{content:'';display:block;width:20px;height:1px;background:currentColor}
.gate__title{
  font:600 clamp(22px,3.4vw,29px)/1.14 var(--display);
  letter-spacing:-.045em;color:var(--ink);margin:0 0 10px;
}
.gate__text{
  margin:0;color:var(--muted);font-size:14.5px;line-height:1.68;
  max-width:42ch;margin-inline:auto;
}
.gate__text strong{color:var(--ink);font-weight:600}
.gate__actions{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:26px;
}
.gate__actions .btn{flex:1 1 auto;min-width:150px}
.gate__foot{
  margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--faint);
}
.gate__foot a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}

/* форма анкеты внутри gate */
.gate__form{display:grid;gap:12px;margin-top:22px;text-align:left}
.gate__form .auth__field input,
.gate__form .auth__field select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-2);font:400 14px var(--sans);color:var(--ink);
  transition:border-color var(--m-1) var(--ease-out),background var(--m-1) var(--ease-out),box-shadow var(--m-1) var(--ease-out);
}
.gate__form .auth__field select{appearance:none;cursor:pointer}
.gate__form .auth__field input::placeholder{color:var(--faint)}
.gate__form .auth__field input:focus,
.gate__form .auth__field select:focus{
  outline:none;border-color:var(--signal);background:#fff;
  box-shadow:0 0 0 3px rgba(124,108,224,.14);
}
.gate__form .auth__field input[aria-invalid="true"]{border-color:#d9534f;background:#fff6f6}
.gate__form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.gate__form-row{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════
   16 · ДВУХФАКТОРНАЯ АУТЕНТИФИКАЦИЯ — /verify-2fa
   ───────────────────────────────────────────────────────────────────
   ФИШКА: 6 ячеек кода + логотип-созвездие, который загорается
   по мере ввода. Ввёл 6 цифр — все 4 круга светятся, код уходит сам.
   ═══════════════════════════════════════════════════════════════════ */
.otp{
  display:flex;gap:clamp(6px,1.4vw,10px);justify-content:center;
  margin:24px 0 0;
}
.otp__cell{
  width:clamp(42px,11vw,54px);height:clamp(54px,14vw,64px);
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
  font:600 clamp(20px,4.6vw,26px)/1 var(--display);color:var(--ink);
  text-align:center;caret-color:var(--signal);
  transition:border-color var(--m-1) var(--ease-out),background var(--m-1) var(--ease-out),box-shadow var(--m-1) var(--ease-out),transform var(--m-1) var(--ease-out);
}
.otp__cell:focus{
  outline:none;border-color:var(--signal);background:#fff;
  box-shadow:0 0 0 3px rgba(124,108,224,.14);
}
.otp__cell.is-filled{border-color:rgba(124,108,224,.42);background:#fff}
.otp__cell.is-error{
  border-color:#d9534f;background:#fff6f6;
  animation:otpShake 320ms var(--ease-out);
}
@keyframes otpShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* созвездие-индикатор: круги загораются по мере ввода */
.otp__mark{display:block;width:56px;height:auto;margin:0 auto 20px;overflow:visible}
.otp__mark circle{
  fill:#cfe3ea;transform-box:fill-box;transform-origin:center;
  transition:fill var(--m-3) var(--ease),transform var(--m-3) var(--ease);
}
.otp__mark circle.is-lit{fill:#7c6ce0;transform:scale(1.06)}

.otp__hint{
  margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--faint);
  text-align:center;
}
.otp__error{
  display:none;margin:14px 0 0;font-size:12.5px;line-height:1.45;color:#c0392b;
  background:#fdf1f0;border:1px solid #f3d3d0;border-radius:10px;padding:9px 12px;
  text-align:center;
}
.otp__error.is-on{display:block}
.otp__submit{width:100%;justify-content:center;margin-top:18px}
.otp__submit[disabled]{opacity:.55;cursor:not-allowed}
.otp__submit[disabled]:hover{transform:none;box-shadow:none}
.otp__back{
  display:inline-block;margin-top:16px;font-size:12.5px;color:var(--muted);
  text-decoration:underline;text-underline-offset:2px;
  transition:color var(--m-1) var(--ease-out);
}
.otp__back:hover{color:var(--signal)}

@media (prefers-reduced-motion:reduce){
  .gate__card,.gate__mark circle,.otp__cell,.otp__mark circle{animation:none!important;transition:none!important}
  .gate__card{opacity:1;transform:none}
  .gate__mark circle{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   17 · ВОССТАНОВЛЕНИЕ ПАРОЛЯ — /reset-password
   ───────────────────────────────────────────────────────────────────
   ФИШКА: двухшаговый рельс прогресса. Линия между шагами заливается
   сигнальным цветом, а логотип-созвездие досвечивает круги по мере
   прохождения: 2 круга после отправки кода, 4 — после смены пароля.
   ═══════════════════════════════════════════════════════════════════ */
.rsteps{
  display:flex;align-items:center;justify-content:center;
  margin:0 0 22px;
}
.rsteps__item{display:flex;align-items:center;gap:8px}
.rsteps__dot{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;
  font:500 11px/1 var(--mono);color:var(--faint);
  transition:background var(--m-2) var(--ease-out),border-color var(--m-2) var(--ease-out),color var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out);
}
.rsteps__dot.is-on{
  border-color:var(--signal);background:var(--signal);color:#fff;
  transform:scale(1.06);
}
.rsteps__dot.is-done{
  border-color:var(--signal);background:var(--signal-soft);color:var(--signal);
}
.rsteps__label{
  font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);transition:color var(--m-2) var(--ease-out);
}
.rsteps__item.is-on .rsteps__label{color:var(--ink)}
.rsteps__line{
  position:relative;width:clamp(28px,9vw,64px);height:1px;
  background:var(--line);margin:0 10px;overflow:hidden;
}
.rsteps__line:after{
  content:'';position:absolute;inset:0;background:var(--signal);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--m-3) var(--ease-out);
}
.rsteps__line.is-on:after{transform:scaleX(1)}
@media (max-width:520px){
  .rsteps__label{display:none}
  .rsteps__line{width:clamp(40px,18vw,80px)}
}

/* панели шагов */
.rstep{display:none}
.rstep.is-on{display:block;animation:rstepIn 380ms var(--ease-out) both}
@keyframes rstepIn{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}
.rstep .gate__form{margin-top:20px}
.rstep .gate__form .btn{width:100%;justify-content:center}
.rstep .gate__form .btn + .btn{margin-top:2px}
.rstep .otp{margin:0 0 4px}

/* подсказка под полем пароля */
.rfield-hint{
  margin:0;font-size:11.5px;line-height:1.45;color:var(--faint);
}
.rfield-hint b{color:var(--muted);font-weight:500}

/* экран успеха */
.rdone{text-align:center;padding:6px 0 0}
.rdone__icon{
  width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--signal-soft);color:var(--signal);
  animation:rdonePop 520ms var(--ease-out) both;
}
.rdone__icon svg{width:26px;height:26px}
@keyframes rdonePop{
  0%{opacity:0;transform:scale(.7)}
  60%{transform:scale(1.06)}
  100%{opacity:1;transform:scale(1)}
}
.rdone .gate__text{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .rstep.is-on,.rdone__icon{animation:none!important}
  .rsteps__dot,.rsteps__line:after{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   18 · ПОДТВЕРЖДЕНИЕ EMAIL — /verify-email/<token>
   ───────────────────────────────────────────────────────────────────
   ФИШКА: печать-подтверждение. Кольцо обводится по кругу, затем
   внутри прорисовывается галочка (stroke-dashoffset). Состояние
   «успех» дорисовывает галочку, «ошибка» — крест.
   ═══════════════════════════════════════════════════════════════════ */
.seal{
  position:relative;width:88px;height:88px;margin:0 auto 22px;
  display:grid;place-items:center;
}
.seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal__ring{
  fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264;
  transform:rotate(-90deg);transform-origin:center;
  animation:sealRing 900ms var(--ease-out) 120ms forwards;
}
@keyframes sealRing{to{stroke-dashoffset:0}}
.seal__tick{
  fill:none;stroke:var(--signal);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:44;stroke-dashoffset:44;
  animation:sealTick 460ms var(--ease-out) 780ms forwards;
}
@keyframes sealTick{to{stroke-dashoffset:0}}
.seal__cross{
  fill:none;stroke:#d9534f;stroke-width:3.4;
  stroke-linecap:round;
  stroke-dasharray:44;stroke-dashoffset:44;
  animation:sealTick 460ms var(--ease-out) 780ms forwards;
}
.seal__cross-a,.seal__cross-b{transform-origin:center}
.seal.is-error .seal__ring{stroke:#d9534f}
.seal.is-error .seal__tick{display:none}
.seal:not(.is-error) .seal__cross{display:none}
.seal__halo{
  position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,var(--signal-soft) 0%,transparent 68%);
  opacity:0;animation:sealHalo 700ms var(--ease-out) 900ms forwards;
}
@keyframes sealHalo{to{opacity:1}}
.seal.is-error .seal__halo{
  background:radial-gradient(circle,rgba(217,83,79,.12) 0%,transparent 68%);
}

/* строка-подсказка под кнопкой */
.seal-note{
  margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--faint);
  text-align:center;
}
.seal-note b{color:var(--muted);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .seal__ring,.seal__tick,.seal__cross,.seal__halo{animation:none!important}
  .seal__ring{stroke-dashoffset:0}
  .seal__tick,.seal__cross{stroke-dashoffset:0}
  .seal__halo{opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════
   19 · СТРАНИЦА ПРЕСЕЙВА — /presave/<id>
   ───────────────────────────────────────────────────────────────────
   ФИШКА: обложка стоит на «подиуме» с отражением и мягким гало,
   а строки площадок выезжают каскадом. При наведении строка
   сдвигается и слева заливается сигнальная полоса.
   ═══════════════════════════════════════════════════════════════════ */
.plink{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100dvh;
  padding:clamp(24px,5vw,56px) var(--gutter) clamp(32px,6vw,64px);
  background:linear-gradient(180deg,#f4fafc 0%,#e8f5f9 46%,#ffffff 100%);
}
.plink:before{
  content:'';position:absolute;z-index:-2;inset:0;
  background-image:
    linear-gradient(rgba(11,31,42,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,42,.04) 1px,transparent 1px);
  background-size:clamp(48px,6vw,88px) clamp(48px,6vw,88px);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 72%);
  pointer-events:none;
}
.plink__inner{
  position:relative;z-index:1;
  width:min(520px,100%);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}

/* шапка-бренд */
.plink__brand{
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:clamp(24px,4vw,36px);
  color:var(--ink);text-decoration:none;
  opacity:0;animation:plinkUp 560ms var(--ease-out) 60ms forwards;
}
.plink__brand svg{width:26px;height:auto;overflow:visible}
.plink__brand svg circle{fill:#7fbdd4}
.plink__brand span{
  font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
@keyframes plinkUp{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}

/* обложка на подиуме */
.plink__stage{
  position:relative;width:clamp(200px,58vw,264px);aspect-ratio:1;
  margin-bottom:clamp(54px,9vw,70px);
  opacity:0;animation:plinkCover 760ms var(--ease-out) 140ms forwards;
}
@keyframes plinkCover{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.94)}
  to{opacity:1;transform:none}
}
.plink__glow{
  position:absolute;inset:-18%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(124,108,224,.20) 0%,rgba(205,234,241,.28) 46%,transparent 70%);
  filter:blur(18px);
  animation:plinkGlow 7s var(--ease-in-out) infinite;
}
@keyframes plinkGlow{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.07);opacity:1}
}
.plink__cover{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:22px;background:var(--paper-3);
  box-shadow:0 30px 70px -30px rgba(11,31,42,.45),0 2px 8px rgba(11,31,42,.06),0 0 0 1px rgba(11,31,42,.06);
}
.plink__cover img{width:100%;height:100%;object-fit:cover;display:block}
.plink__cover:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(11,31,42,.14));
}
/* отражение под обложкой */
.plink__reflect{
  position:absolute;left:8%;right:8%;top:calc(100% + 6px);height:19%;
  border-radius:22px;overflow:hidden;pointer-events:none;
  transform:scaleY(-1);opacity:.13;
  mask-image:linear-gradient(180deg,transparent 0%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 100%);
  filter:blur(4px);
}
.plink__reflect img{width:100%;height:100%;object-fit:cover;display:block}

/* логотип вместо обложки */
.plink__logo{
  width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(150deg,#eaf5f9 0%,#dff1f6 52%,#e0d0f8 100%);
}
.plink__logo svg{width:74%;height:auto;overflow:visible}
.plink__logo circle{
  fill:#7c6ce0;transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(.7);
  animation:plinkDot 620ms var(--ease-out) forwards;
}
.plink__logo circle:nth-child(1){animation-delay:320ms}
.plink__logo circle:nth-child(2){animation-delay:400ms}
.plink__logo circle:nth-child(3){animation-delay:480ms}
.plink__logo circle:nth-child(4){animation-delay:560ms}
@keyframes plinkDot{to{opacity:1;transform:none}}

/* название / артист */
.plink__meta{
  text-align:center;margin-bottom:clamp(22px,4vw,30px);
  opacity:0;animation:plinkUp 560ms var(--ease-out) 300ms forwards;
}
.plink__title{
  font:600 clamp(22px,4.4vw,30px)/1.16 var(--display);
  letter-spacing:-.04em;color:var(--ink);margin:0 0 6px;
  overflow-wrap:anywhere;
}
.plink__artist{
  margin:0;font-size:14px;line-height:1.5;color:var(--muted);
  overflow-wrap:anywhere;
}
.plink__artist:empty{display:none}

/* список площадок */
.plink__list{
  width:100%;display:grid;gap:9px;
}
.plink__item{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:12px 16px 12px 14px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform var(--m-2) var(--ease-out),border-color var(--m-2) var(--ease-out),box-shadow var(--m-2) var(--ease-out);
  animation:plinkUp 520ms var(--ease-out) backwards;
}
.plink__item:before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--signal);transform:scaleY(0);transform-origin:center;
  transition:transform var(--m-2) var(--ease-out);
}
.plink__item:hover{
  transform:translate3d(3px,0,0);
  border-color:var(--line-signal);
  box-shadow:0 12px 28px -16px rgba(11,31,42,.34);
}
.plink__item:hover:before{transform:scaleY(1)}
.plink__item:active{transform:translate3d(1px,0,0) scale(.995)}
.plink__icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line-soft);
}
.plink__icon img{width:24px;height:24px;object-fit:contain;display:block}
.plink__icon span{
  font:600 14px/1 var(--display);color:var(--signal);
}
.plink__name{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.plink__label{
  font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.plink__value{
  font:500 14.5px/1.25 var(--sans);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.plink__arrow{
  flex:0 0 auto;width:16px;height:16px;color:var(--faint);
  transition:color var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out);
}
.plink__item:hover .plink__arrow{color:var(--signal);transform:translateX(3px)}

/* подвал */
.plink__foot{
  margin:clamp(26px,5vw,38px) 0 0;
  display:inline-flex;align-items:center;gap:8px;
  font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
  opacity:0;animation:plinkUp 560ms var(--ease-out) 620ms forwards;
}
.plink__foot i{
  display:block;width:5px;height:5px;border-radius:50%;
  background:var(--signal);opacity:.7;
}

@media (prefers-reduced-motion:reduce){
  .plink__brand,.plink__stage,.plink__meta,.plink__foot,.plink__item,.plink__logo circle{animation:none!important;opacity:1!important;transform:none!important}
  .plink__glow{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   20 · СОЗДАНИЕ ПРЕСЕЙВА — /presave/create
   ───────────────────────────────────────────────────────────────────
   ФИШКА: загрузчик обложки — пунктирная рамка, которая при перетаскивании
   заливается сигнальным цветом; превью появляется с масштабом.
   ═══════════════════════════════════════════════════════════════════ */
.pcreate{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100dvh;
  padding:clamp(24px,5vw,56px) var(--gutter) clamp(40px,7vw,72px);
  background:linear-gradient(180deg,#f4fafc 0%,#e8f5f9 46%,#ffffff 100%);
}
.pcreate:before{
  content:'';position:absolute;z-index:-2;inset:0;
  background-image:
    linear-gradient(rgba(11,31,42,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,42,.04) 1px,transparent 1px);
  background-size:clamp(48px,6vw,88px) clamp(48px,6vw,88px);
  mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 70%);
  pointer-events:none;
}
.pcreate__inner{position:relative;z-index:1;width:min(560px,100%);margin:0 auto}

.pcreate__head{text-align:center;margin-bottom:clamp(24px,4vw,34px)}
.pcreate__mark{
  display:block;width:52px;height:auto;margin:0 auto 18px;overflow:visible;
}
.pcreate__mark circle{
  fill:#7fbdd4;transform-box:fill-box;transform-origin:center;
  transform:translate3d(0,8px,0) scale(.8);opacity:0;
  animation:gateMark 700ms var(--ease-out) forwards;
}
.pcreate__mark circle:nth-child(1){animation-delay:120ms}
.pcreate__mark circle:nth-child(2){animation-delay:190ms}
.pcreate__mark circle:nth-child(3){animation-delay:260ms}
.pcreate__mark circle:nth-child(4){animation-delay:330ms}
.pcreate__title{
  font:600 clamp(23px,4vw,31px)/1.14 var(--display);
  letter-spacing:-.045em;color:var(--ink);margin:0 0 8px;
}
.pcreate__sub{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}

/* карточка-секция */
.pcreate__card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(18px,3.4vw,26px);
  box-shadow:0 24px 56px -40px rgba(11,31,42,.34),0 1px 3px rgba(11,31,42,.04);
}
.pcreate__card + .pcreate__card{margin-top:14px}
.pcreate__label{
  display:block;margin:0 0 12px;
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}

/* загрузчик обложки */
.pcreate__cover{
  display:flex;gap:16px;align-items:flex-start;
}
.pcreate__drop{
  position:relative;flex:0 0 auto;
  width:clamp(96px,26vw,124px);aspect-ratio:1;
  border:1.5px dashed rgba(11,31,42,.22);border-radius:16px;
  background:var(--paper-2);cursor:pointer;overflow:hidden;
  display:grid;place-items:center;gap:6px;
  transition:border-color var(--m-2) var(--ease-out),background var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out);
}
.pcreate__drop:hover{border-color:var(--line-signal);background:#fff}
.pcreate__drop:active{transform:scale(.985)}
.pcreate__drop.is-drag{
  border-color:var(--signal);background:var(--signal-soft);
  border-style:solid;
}
.pcreate__drop svg{width:24px;height:24px;color:var(--faint);transition:color var(--m-2) var(--ease-out)}
.pcreate__drop:hover svg{color:var(--signal)}
.pcreate__drop span{
  font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);
}
.pcreate__drop img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity var(--m-3) var(--ease-out),transform var(--m-3) var(--ease-out);
}
.pcreate__drop.has-image img{opacity:1;transform:none}
.pcreate__drop.has-image svg,
.pcreate__drop.has-image span{opacity:0;pointer-events:none}
.pcreate__drop.has-image{border-style:solid;border-color:var(--line)}
.pcreate__drop-clear{
  position:absolute;top:6px;right:6px;z-index:2;
  width:24px;height:24px;border-radius:50%;border:0;
  display:none;place-items:center;cursor:pointer;
  background:rgba(11,31,42,.62);color:#fff;
  transition:background var(--m-1) var(--ease-out),transform var(--m-1) var(--ease-out);
}
.pcreate__drop.has-image .pcreate__drop-clear{display:grid}
.pcreate__drop-clear:hover{background:rgba(11,31,42,.85)}
.pcreate__drop-clear:active{transform:scale(.9)}
.pcreate__drop-clear svg{width:11px;height:11px;color:#fff}

.pcreate__cover-info{flex:1 1 auto;min-width:0;display:grid;gap:8px;align-content:start}
.pcreate__cover-info h4{
  margin:0;font:600 14px/1.3 var(--sans);color:var(--ink);
}
.pcreate__cover-info p{
  margin:0;font-size:12px;line-height:1.55;color:var(--muted);
}
.pcreate__cover-info .btn{justify-self:start;margin-top:2px}

/* поля */
.pcreate__fields{display:grid;gap:12px}
.pcreate__fields .auth__field input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-2);font:400 14px var(--sans);color:var(--ink);
  transition:border-color var(--m-1) var(--ease-out),background var(--m-1) var(--ease-out),box-shadow var(--m-1) var(--ease-out);
}
.pcreate__fields .auth__field input::placeholder{color:var(--faint)}
.pcreate__fields .auth__field input:focus{
  outline:none;border-color:var(--signal);background:#fff;
  box-shadow:0 0 0 3px rgba(124,108,224,.14);
}

/* строки площадок */
.pcreate__rows{display:grid;gap:9px}
.pcreate__row{
  display:flex;align-items:center;gap:11px;
  padding:8px 12px 8px 8px;
  border:1px solid var(--line-soft);border-radius:13px;
  background:var(--paper-2);
  transition:border-color var(--m-2) var(--ease-out),background var(--m-2) var(--ease-out);
}
.pcreate__row:focus-within{border-color:var(--line-signal);background:#fff}
.pcreate__row.is-filled{border-color:rgba(124,108,224,.34);background:#fff}
.pcreate__row-logo{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;overflow:hidden;
  background:#fff;border:1px solid var(--line-soft);
}
.pcreate__row-logo img{width:20px;height:20px;object-fit:contain;display:block}
.pcreate__row-logo span{font:600 12px/1 var(--display);color:var(--signal)}
.pcreate__row input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;
  font:400 13.5px var(--sans);color:var(--ink);padding:6px 0;
}
.pcreate__row input::placeholder{color:var(--faint)}
.pcreate__row input:focus{outline:none}
.pcreate__row-check{
  flex:0 0 auto;width:16px;height:16px;color:var(--signal);
  opacity:0;transform:scale(.7);
  transition:opacity var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out);
}
.pcreate__row.is-filled .pcreate__row-check{opacity:1;transform:none}

/* отправка */
.pcreate__submit{
  width:100%;justify-content:center;margin-top:16px;
}
.pcreate__msg{
  display:none;margin-top:14px;padding:12px 14px;border-radius:12px;
  font-size:13px;line-height:1.55;
}
.pcreate__msg.is-on{display:block}
.pcreate__msg.is-error{color:#c0392b;background:#fdf1f0;border:1px solid #f3d3d0}
.pcreate__msg.is-ok{color:#1c7a4a;background:#f0faf4;border:1px solid #cfe9d9}
.pcreate__msg a{color:var(--signal);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.pcreate__msg .btn{margin-top:10px}

.pcreate__foot{
  margin:22px 0 0;text-align:center;
  font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}

@media (max-width:520px){
  .pcreate__cover{flex-direction:column;align-items:stretch}
  .pcreate__drop{width:100%;aspect-ratio:16/9}
  .pcreate__cover-info .btn{justify-self:stretch;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .pcreate__mark circle{animation:none!important;opacity:1;transform:none}
  .pcreate__drop img,.pcreate__row-check{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   21 · Документы и информация (legal.html)
   ═══════════════════════════════════════════════════════════════ */

/* полоса прогресса чтения — тонкая линия под шапкой */
.legalprog{
  position:fixed;left:0;right:0;top:0;z-index:60;height:2px;
  pointer-events:none;background:transparent;
}
.legalprog__bar{
  height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--signal) 0%,#7fbdd4 62%,var(--sky) 100%);
  box-shadow:0 0 14px rgba(124,108,224,.5);
  transition:transform 90ms linear;
}

/* ФИШКА: реестр-оглавление — карточки-строки с растущей линией */
.legaltoc{display:grid;gap:8px;margin-bottom:clamp(30px,4vw,48px)}
.legaltoc__row{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(12px,2vw,20px);
  padding:16px clamp(16px,2.2vw,22px);
  border:1px solid var(--line-soft);border-radius:15px;background:#fff;
  text-decoration:none;color:inherit;overflow:hidden;
  animation:legalRow 520ms var(--ease-out) backwards;
  transition:border-color var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out),box-shadow var(--m-2) var(--ease-out);
}
.legaltoc__row:before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--signal);transform:scaleY(0);transform-origin:center;
  transition:transform var(--m-2) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .legaltoc__row:hover{
    transform:translate3d(3px,0,0);
    border-color:var(--line-signal);
    box-shadow:0 14px 32px -20px rgba(11,31,42,.36);
  }
  .legaltoc__row:hover:before{transform:scaleY(1)}
}
.legaltoc__row:active{transform:translate3d(1px,0,0) scale(.996)}
@keyframes legalRow{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

.legaltoc__num{
  font:500 11px/1 var(--mono);letter-spacing:.12em;
  color:var(--faint);min-width:26px;
  transition:color var(--m-2) var(--ease-out);
}
.legaltoc__row:hover .legaltoc__num{color:var(--signal)}
.legaltoc__body{min-width:0;display:grid;gap:3px}
.legaltoc__title{
  font:600 clamp(14.5px,1.7vw,17px)/1.25 var(--display);
  letter-spacing:-.03em;color:var(--ink);
}
.legaltoc__desc{font-size:12.5px;line-height:1.5;color:var(--muted)}
.legaltoc__arrow{
  flex:0 0 auto;width:16px;height:16px;color:var(--faint);
  transition:color var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out);
}
.legaltoc__row:hover .legaltoc__arrow{color:var(--signal);transform:translateX(3px)}

/* карточки преимуществ 01..10 — тонкая нумерация, без рамок-шума */
.legalgrid{display:grid;gap:clamp(10px,1.4vw,16px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.legalgrid{grid-template-columns:1fr}}
.legalgrid__item{
  position:relative;padding:clamp(16px,2vw,22px);
  border:1px solid var(--line-soft);border-radius:16px;background:#fff;
  transition:border-color var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out),box-shadow var(--m-2) var(--ease-out);
}
.legalgrid__item:hover{
  border-color:var(--line-signal);transform:translateY(-2px);
  box-shadow:0 18px 40px -30px rgba(11,31,42,.4);
}
.legalgrid__num{
  font:500 10px/1 var(--mono);letter-spacing:.16em;
  color:var(--faint);margin-bottom:11px;
  transition:color var(--m-2) var(--ease-out);
}
.legalgrid__item:hover .legalgrid__num{color:var(--signal)}
.legalgrid__item h3{
  font:600 clamp(14.5px,1.6vw,16.5px)/1.28 var(--display);
  letter-spacing:-.028em;margin:0 0 7px;color:var(--ink);
}
.legalgrid__item p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted)}

/* тарифы — три карточки */
.legalplans{display:grid;gap:clamp(10px,1.4vw,16px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:880px){.legalplans{grid-template-columns:1fr}}
.legalplan{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line-soft);border-radius:18px;background:#fff;
  transition:border-color var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out),box-shadow var(--m-2) var(--ease-out);
}
.legalplan:hover{
  border-color:var(--line-signal);transform:translateY(-3px);
  box-shadow:0 24px 50px -34px rgba(11,31,42,.42);
}
.legalplan--accent{border-color:rgba(124,108,224,.28);background:linear-gradient(160deg,#f8f6ff 0%,#fff 62%)}
.legalplan--accent:after{
  content:'Популярный';position:absolute;top:0;right:0;
  padding:5px 13px;border-radius:0 18px 0 13px;
  background:var(--signal);color:#fff;
  font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.legalplan__name{
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.legalplan__price{
  display:flex;align-items:baseline;gap:5px;
  font:500 clamp(26px,3.4vw,38px)/1 var(--display);
  letter-spacing:-.055em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.legalplan__price small{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--faint)}
.legalplan__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.legalplan__list li{
  position:relative;padding-left:19px;
  font-size:13px;line-height:1.5;color:var(--muted);
}
.legalplan__list li:before{
  content:'';position:absolute;left:0;top:4px;width:11px;height:11px;
  border-radius:50%;background:rgba(124,108,224,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6ce0' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:7px;background-position:center;background-repeat:no-repeat;
}

@media (prefers-reduced-motion:reduce){
  .legaltoc__row{animation:none!important;opacity:1!important;transform:none!important}
  .legaltoc__row,.legalgrid__item,.legalplan{transition:none!important}
  .legalprog__bar{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   22 · Подписание договора (contract.html)
   ═══════════════════════════════════════════════════════════════ */

.sign{
  position:relative;isolation:isolate;overflow-x:clip;
  min-height:100dvh;
  padding:0 0 clamp(40px,7vw,72px);
  background:linear-gradient(180deg,#f4fafc 0%,#e8f5f9 42%,#ffffff 100%);
}
.sign:before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(11,31,42,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,31,42,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 72%);
}

.sign__head{text-align:center;padding:clamp(30px,5vw,54px) var(--gutter) clamp(18px,3vw,28px)}
.sign__badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  background:var(--signal-soft);border:1px solid rgba(124,108,224,.22);
  font:500 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--signal);margin-bottom:16px;
}
.sign__badge i{
  display:block;width:5px;height:5px;border-radius:50%;background:var(--signal);
  animation:signPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes signPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(124,108,224,.5)}
  50%{opacity:.55;box-shadow:0 0 0 6px rgba(124,108,224,0)}
}
.sign__title{
  font:600 clamp(24px,4.4vw,36px)/1.1 var(--display);
  letter-spacing:-.05em;color:var(--ink);margin:0 0 10px;
}
.sign__title em{font-style:normal;color:var(--signal)}
.sign__sub{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}

/* ФИШКА: сегментный рельс готовности документа */
.signrail{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.signrail__inner{
  width:min(720px,100%);margin:0 auto;padding:11px var(--gutter);
  display:flex;align-items:center;gap:clamp(8px,1.6vw,16px);
}
.signrail__step{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
  transition:color var(--m-2) var(--ease-out);
}
.signrail__dot{
  display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(11,31,42,.18);
  transition:background var(--m-2) var(--ease-out),box-shadow var(--m-2) var(--ease-out),transform var(--m-2) var(--ease-out);
}
.signrail__step.is-on{color:var(--ink)}
.signrail__step.is-on .signrail__dot{
  background:var(--signal);transform:scale(1.3);
  box-shadow:0 0 0 3px rgba(124,108,224,.16);
}
.signrail__step.is-done{color:#1c7a4a}
.signrail__step.is-done .signrail__dot{
  background:#2fa36b;box-shadow:0 0 0 3px rgba(47,163,107,.16);
}
.signrail__bar{
  flex:1 1 auto;min-width:20px;height:2px;border-radius:2px;
  background:rgba(11,31,42,.09);overflow:hidden;
}
.signrail__fill{
  height:100%;width:100%;transform-origin:left center;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--signal) 0%,#7fbdd4 100%);
  transition:transform 280ms var(--ease-out);
}
.signrail__pct{
  flex:0 0 auto;font:500 10px/1 var(--mono);color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:32px;text-align:right;
}
@media (max-width:560px){
  .signrail__step span{display:none}
  .signrail__inner{gap:10px}
}

.sign__inner{
  position:relative;z-index:1;width:min(720px,100%);margin:0 auto;
  padding:clamp(18px,3.2vw,30px) var(--gutter) 0;
}

.sign__warn{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 16px;margin-bottom:16px;border-radius:14px;
  background:#fffaf0;border:1px solid #f3e2c0;
  font-size:12.5px;line-height:1.55;color:#8a6412;
}
.sign__warn svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px;color:#c99a2e}

.sign__card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(18px,3.2vw,26px);
  box-shadow:0 24px 56px -44px rgba(11,31,42,.34),0 1px 3px rgba(11,31,42,.04);
}
.sign__card + .sign__card{margin-top:14px}
.sign__card-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.sign__card-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--signal-soft);border:1px solid rgba(124,108,224,.18);
  color:var(--signal);
}
.sign__card-icon svg{width:18px;height:18px}
.sign__card-icon--sig{background:rgba(127,189,212,.16);border-color:rgba(127,189,212,.32);color:#3d8ba6}
.sign__card-icon--ok{background:rgba(47,163,107,.1);border-color:rgba(47,163,107,.22);color:#1c7a4a}
.sign__card-title{
  font:600 16px/1.25 var(--display);letter-spacing:-.03em;
  color:var(--ink);margin:0;
}
.sign__card-sub{margin:2px 0 0;font-size:11.5px;line-height:1.4;color:var(--faint)}

.sign__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.sign__row{grid-template-columns:1fr}}

.sign__field{position:relative;display:grid;gap:6px;margin-bottom:14px;align-content:start}
.sign__field:last-child{margin-bottom:0}
.sign__field > label{
  display:flex;align-items:center;align-self:start;gap:5px;
  font:500 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.sign__req{color:var(--signal);font-size:11px;line-height:1}
.sign__opt{
  font:400 9px/1 var(--mono);letter-spacing:.06em;text-transform:none;
  color:var(--faint);background:var(--paper-2);border:1px solid var(--line-soft);
  padding:2px 6px;border-radius:5px;
}
.sign__field input[type=text],
.sign__field input[type=tel],
.sign__field select{
  width:100%;height:44px;padding:0 13px;line-height:1.2;
  border:1px solid var(--line);border-radius:11px;
  background:var(--paper-2);
  font:400 13.5px var(--sans);color:var(--ink);
  transition:border-color var(--m-1) var(--ease-out),background var(--m-1) var(--ease-out),box-shadow var(--m-1) var(--ease-out);
}
.sign__field input::placeholder{color:var(--faint)}
.sign__field input:focus,
.sign__field select:focus{
  outline:none;border-color:var(--signal);background:#fff;
  box-shadow:0 0 0 3px rgba(124,108,224,.14);
}
.sign__field select{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b7c8a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  padding-right:34px;
}
.sign__field input.valid,
.sign__field select.valid{border-color:rgba(47,163,107,.5);background:#f7fdfa}
.sign__field input.invalid,
.sign__field select.invalid{border-color:rgba(217,83,79,.55);background:#fff8f8}
.sign__hint{font:400 10.5px/1.4 var(--mono);color:var(--faint);letter-spacing:.02em}
.sign__hint.is-error{color:#c0392b}
.sign__hint.is-valid{color:#1c7a4a}

.sign__drop{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;
  max-height:230px;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 44px -20px rgba(11,31,42,.34),0 2px 6px rgba(11,31,42,.06);
}
.sign__drop-item{
  padding:9px 13px;font-size:12.5px;line-height:1.4;color:var(--ink);
  cursor:pointer;border-bottom:1px solid var(--line-soft);
  transition:background var(--m-1) var(--ease-out);
}
.sign__drop-item:last-child{border-bottom:0}
.sign__drop-item:hover{background:var(--signal-soft)}

.sign__file{
  display:grid;place-items:center;gap:7px;
  padding:clamp(20px,3.4vw,28px);
  border:1.5px dashed rgba(11,31,42,.22);border-radius:14px;
  background:var(--paper-2);cursor:pointer;text-align:center;
  transition:border-color var(--m-2) var(--ease-out),background var(--m-2) var(--ease-out);
}
.sign__file:hover{border-color:var(--line-signal);background:#fff}
.sign__file svg{width:26px;height:26px;color:var(--faint);transition:color var(--m-2) var(--ease-out)}
.sign__file:hover svg{color:var(--signal)}
.sign__file p{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.sign__file.is-uploaded{border-style:solid;border-color:rgba(47,163,107,.42);background:#f5fcf8}
.sign__file.is-uploaded svg{color:#2fa36b}
.sign__file.is-uploaded p{color:#1c7a4a;font-weight:500}

.sign__sig{position:relative;margin-top:2px}
.sign__sig canvas{
  display:block;width:100%;height:130px;
  border:1.5px dashed rgba(11,31,42,.22);border-radius:14px;
  background:var(--paper-2);cursor:crosshair;touch-action:none;
  transition:border-color var(--m-2) var(--ease-out),background var(--m-2) var(--ease-out);
}
.sign__sig canvas:hover{border-color:var(--line-signal);background:#fff}
.sign__sig.is-signed canvas{border-style:solid;border-color:rgba(124,108,224,.4);background:#fff}
.sign__sig-ph{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);opacity:.75;
  transition:opacity var(--m-2) var(--ease-out);
}
.sign__sig-tools{display:flex;gap:8px;margin-top:10px}

.sign__check{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 12px;
}
.sign__check input{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;
  accent-color:var(--signal);cursor:pointer;
}
.sign__check a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.sign__check b{color:var(--ink);font-weight:600}
.sign__check input[aria-invalid="true"]{outline:2px solid #d9534f;outline-offset:1px;border-radius:3px}

.sign__msg{
  display:none;margin-top:12px;padding:11px 14px;border-radius:11px;
  font-size:12.5px;line-height:1.5;text-align:center;
}
.sign__msg.is-on{display:block}
.sign__msg.is-error{color:#c0392b;background:#fdf1f0;border:1px solid #f3d3d0}
.sign__msg.is-ok{color:#1c7a4a;background:#f0faf4;border:1px solid #cfe9d9}
.sign__msg.is-busy{color:var(--muted);background:var(--paper-2);border:1px solid var(--line-soft)}

.sign__block{display:none}
.sign__block.is-on{display:block;animation:signBlock 320ms var(--ease-out)}
@keyframes signBlock{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

.sign__submit{width:100%;justify-content:center;margin-top:14px}
.sign__submit:active{transform:scale(.985)}

/* итоговый прогресс под кнопкой отправки */
.signprog{margin-top:18px}
.signprog__track{
  height:6px;border-radius:99px;background:rgba(11,31,42,.09);
  overflow:hidden;
}
.signprog__fill{
  display:block;height:100%;width:100%;border-radius:99px;
  transform-origin:left center;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--signal) 0%,#7fbdd4 100%);
  transition:transform 320ms var(--ease-out),background 320ms var(--ease-out);
}
.signprog__meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:9px;
  font:500 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);
}
.signprog__pct{
  color:var(--muted);font-variant-numeric:tabular-nums;
  transition:color var(--m-2) var(--ease-out);
}
.signprog.is-done .signprog__fill{background:linear-gradient(90deg,#2fa36b 0%,#5cc08f 100%)}
.signprog.is-done .signprog__pct{color:#1c7a4a}
@media (prefers-reduced-motion:reduce){.signprog__fill{transition:none!important}}

@media (prefers-reduced-motion:reduce){
  .sign__badge i{animation:none!important}
  .sign__block.is-on{animation:none!important}
  .signrail__fill{transition:none!important}
  .signrail__dot{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   23 · Образец договора (contract_template.html)
   ═══════════════════════════════════════════════════════════════ */

.paperwrap{
  position:relative;isolation:isolate;overflow:hidden;min-height:100dvh;
  padding:clamp(24px,4vw,48px) 0 clamp(40px,7vw,72px);
  background:linear-gradient(180deg,#f4fafc 0%,#e8f5f9 40%,#ffffff 100%);
}
.paperwrap:before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(11,31,42,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,31,42,.04) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 60% at 50% 0%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 60% at 50% 0%,#000 0%,transparent 70%);
}

.paper__tools{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-bottom:clamp(16px,2.4vw,24px);
}
.paper__warn{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 16px;margin-bottom:14px;border-radius:14px;
  background:#fffaf0;border:1px solid #f3e2c0;
  font-size:12.5px;line-height:1.55;color:#8a6412;
}
.paper__warn svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px;color:#c99a2e}
.paper__warn a{color:var(--signal);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.paper__note{
  padding:14px 18px;margin-bottom:14px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--line-soft);
  font-size:12.5px;line-height:1.65;color:var(--muted);
}
.paper__note strong{color:var(--ink);font-weight:600}
.paper__note ol{margin:8px 0 0;padding-left:18px}
.paper__note li{margin-bottom:4px}

.paper{
  position:relative;width:min(880px,100%);margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,4.4vw,56px);
  box-shadow:0 30px 70px -50px rgba(11,31,42,.4),0 1px 3px rgba(11,31,42,.04);
  font-size:13.5px;line-height:1.75;color:var(--muted);
}
.paper a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}

.paper .main-title{
  text-align:center;font:600 clamp(15px,2.4vw,19px)/1.35 var(--display);
  letter-spacing:.04em;color:var(--ink);margin:0 0 22px;text-transform:uppercase;
}
.paper .header-right{
  text-align:right;font:400 12px/1.75 var(--mono);
  color:var(--faint);margin-bottom:2px;
}
.paper .section-title{
  font:600 12.5px/1.4 var(--display);letter-spacing:.03em;color:var(--ink);
  text-transform:uppercase;margin:26px 0 10px;padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.paper p{margin:0 0 11px;color:var(--muted);font-size:13.5px;line-height:1.75}
.paper strong{color:var(--ink);font-weight:600}
.paper .sub{
  margin:0 0 5px;padding-left:16px;
  font-size:13px;line-height:1.7;color:var(--muted);
}
.paper .field,
.paper .field-wide,
.paper .field-xwide{
  display:inline-block;border-bottom:1px solid rgba(11,31,42,.28);
  vertical-align:baseline;min-width:44px;height:1.05em;
}
.paper .field-wide{min-width:120px}
.paper .field-xwide{min-width:200px}
.paper .sign-block{margin-top:30px;padding-top:6px;border-top:1px solid var(--line)}
.paper .sign-table{width:100%;border-collapse:collapse;margin:12px 0}
.paper .sign-table td{
  width:50%;vertical-align:top;padding:10px 14px 10px 0;
  font-size:12.5px;line-height:1.75;color:var(--muted);
}
.paper .sign-line{
  display:inline-block;min-width:150px;height:1.05em;
  border-bottom:1px solid rgba(11,31,42,.3);
}
.paper .page-break{height:1px;margin:34px 0;background:var(--line-soft)}
.paper .appendix-title{
  text-align:center;font:600 14px/1.35 var(--display);
  letter-spacing:.06em;color:var(--ink);text-transform:uppercase;margin:0 0 14px;
}

@media (max-width:640px){
  .paper .sign-table td{display:block;width:100%;padding-right:0}
  .paper .field-xwide{min-width:120px}
}

@media print{
  .pnav,.pfoot,.paper__tools,.paper__warn,.paper__note,.paperwrap:before{display:none!important}
  .paperwrap{background:#fff;padding:0;min-height:0}
  .paper{border:0;box-shadow:none;border-radius:0;padding:0;max-width:none;width:100%}
  .paper .section-title{break-after:avoid}
  .paper p{orphans:3;widows:3}
  .paper .page-break{break-after:page;background:none}
}

/* ── совместимость: имена классов, которые выставляет JS contract.html ── */
.fields-block{display:none}
.fields-block.active{display:block;animation:signBlock 320ms var(--ease-out)}

.dropdown-list{display:none}
.dropdown-item{
  padding:9px 13px;font-size:12.5px;line-height:1.4;color:var(--ink);
  cursor:pointer;border-bottom:1px solid var(--line-soft);
  transition:background var(--m-1) var(--ease-out);
}
.dropdown-item:last-child{border-bottom:0}
.dropdown-item:hover{background:var(--signal-soft)}
.dropdown-item span{display:block;overflow-wrap:anywhere}

.field-hint{font:400 10.5px/1.4 var(--mono);color:var(--faint);letter-spacing:.02em}
.field-hint.error{color:#c0392b}
.field-hint.valid{color:#1c7a4a}

.file-zone.uploaded{border-style:solid;border-color:rgba(47,163,107,.42);background:#f5fcf8}
.file-zone.uploaded svg{color:#2fa36b}
.file-zone.uploaded p{color:#1c7a4a;font-weight:500}

.msg{display:none;margin-top:12px;padding:11px 14px;border-radius:11px;
  font-size:12.5px;line-height:1.5;text-align:center}
.msg:not(:empty){display:block}
.msg.msg-error{color:#c0392b;background:#fdf1f0;border:1px solid #f3d3d0}
.msg.msg-success{color:#1c7a4a;background:#f0faf4;border:1px solid #cfe9d9}

.signature-area{
  display:block;width:100%;height:130px;
  border:1.5px dashed rgba(11,31,42,.22);border-radius:14px;
  background:var(--paper-2);cursor:crosshair;touch-action:none;
  transition:border-color var(--m-2) var(--ease-out),background var(--m-2) var(--ease-out);
}
.signature-area:hover{border-color:var(--line-signal);background:#fff}
.signature-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);opacity:.75;
}

/* поля, которые генерирует JS (renderCisDocFields) — те же стили, что .sign__field */
.form-group{position:relative;display:grid;gap:6px;margin-bottom:14px;align-content:start}
.form-group > label{
  display:flex;align-items:center;align-self:start;gap:5px;
  font:500 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.form-group input[type=text],
.form-group select{
  width:100%;height:44px;padding:0 13px;line-height:1.2;
  border:1px solid var(--line);border-radius:11px;
  background:var(--paper-2);
  font:400 13.5px var(--sans);color:var(--ink);
  transition:border-color var(--m-1) var(--ease-out),background var(--m-1) var(--ease-out),box-shadow var(--m-1) var(--ease-out);
}
.form-group input::placeholder{color:var(--faint)}
.form-group input:focus,
.form-group select:focus{
  outline:none;border-color:var(--signal);background:#fff;
  box-shadow:0 0 0 3px rgba(124,108,224,.14);
}
.form-group input.valid{border-color:rgba(47,163,107,.5);background:#f7fdfa}
.form-group input.invalid{border-color:rgba(217,83,79,.55);background:#fff8f8}
.required-star{color:var(--signal);font-size:11px;line-height:1}
.optional-tag{
  font:400 9px/1 var(--mono);letter-spacing:.06em;text-transform:none;
  color:var(--faint);background:var(--paper-2);border:1px solid var(--line-soft);
  padding:2px 6px;border-radius:5px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.checkbox-label{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 12px;
}
.checkbox-label input{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;
  accent-color:var(--signal);cursor:pointer;
}
.checkbox-label a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.checkbox-label strong{color:var(--ink);font-weight:600}
.signature-wrapper{position:relative;margin-top:2px}
.signature-toolbar{display:flex;gap:8px;margin-top:10px;align-items:center}

/* ═══════════════════════════════════════════════════════════════════
   24 · Быстрый акцепт новой редакции (п. 10.11)
   Три явные зоны: сводка данных → зона действия → доп. действия
   ═══════════════════════════════════════════════════════════════════ */

.ed-lead{
  margin:0 0 16px;font-size:13.5px;line-height:1.68;color:var(--muted);
  max-width:62ch;
}
.ed-lead b{color:var(--ink);font-weight:600}
.ed-lead a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}

/* ── сводка сохранённых данных ── */
.ed-facts{
  margin:0 0 18px;padding:2px 14px;border-radius:14px;
  border:1px solid var(--line-soft);background:var(--paper-2);
}
.ed-facts__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.ed-facts__row:last-child{border-bottom:0}
.ed-facts dt{
  margin:0;flex:0 0 auto;
  font:500 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}
.ed-facts dd{
  margin:0;min-width:0;text-align:right;overflow-wrap:anywhere;
  font-size:13px;font-weight:500;color:var(--ink);
}
.ed-facts dd.is-ok{color:#1c7a4a;font-weight:600}

/* ── зона действия: отделена фоном ── */
.ed-action{
  padding:16px 16px 18px;border-radius:16px;
  background:var(--signal-soft);
  border:1px solid rgba(124,108,224,.2);
}
.ed-action .checkbox-label{margin:0 0 14px;font-size:12.5px}
.ed-action .sign__submit{margin-top:0}
.ed-action .msg{margin-bottom:0}

/* ── доп. действия: два явных перехода, не текст ── */
.ed-alt{
  margin-top:20px;padding-top:8px;
  border-top:1px solid var(--line-soft);
  display:grid;
}
.ed-alt__item{
  display:flex;align-items:center;gap:12px;
  padding:12px 4px;border-radius:10px;
  text-decoration:none;color:inherit;cursor:pointer;
  transition:background var(--m-2) var(--ease-out);
}
.ed-alt__item + .ed-alt__item{border-top:1px solid var(--line-soft)}
.ed-alt__icon{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--line-soft);color:var(--muted);
  transition:background var(--m-2) var(--ease-out),color var(--m-2) var(--ease-out),
             border-color var(--m-2) var(--ease-out);
}
.ed-alt__icon svg{width:15px;height:15px}
.ed-alt__body{flex:1 1 auto;min-width:0;display:grid;gap:1px}
.ed-alt__label{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4}
.ed-alt__hint{font-size:11.5px;line-height:1.45;color:var(--faint)}
.ed-alt__arrow{
  flex:0 0 auto;color:var(--faint);
  transition:transform var(--m-2) var(--ease-out),color var(--m-2) var(--ease-out);
}
.ed-alt__arrow svg{display:block;width:14px;height:14px}

@media (hover:hover) and (pointer:fine){
  .ed-alt__item:hover{background:var(--paper-2)}
  .ed-alt__item:hover .ed-alt__icon{
    background:#fff;border-color:var(--line-signal);color:var(--signal);
  }
  .ed-alt__item:hover .ed-alt__arrow{transform:translateX(3px);color:var(--signal)}
}
@media (max-width:560px){
  .ed-action{padding:14px}
  .ed-alt__hint{display:none}
  .ed-facts__row{gap:12px}
  .ed-facts dd{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .ed-alt__item,.ed-alt__icon,.ed-alt__arrow{transition:none!important}
  .ed-alt__item:hover .ed-alt__arrow{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   БЛОГ · индекс и статья
   ───────────────────────────────────────────────────────────────────
   Переиспользуем .phero / .psec / .doc / .pcta / .pfoot.
   Добавляем только то, чего нет: карточки списка, сетку статьи,
   оглавление, мета-строку, блок автора.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Хлебные крошки ── */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:18px;color:var(--faint);
}
.crumbs a{color:var(--muted);transition:color var(--m-2) var(--ease-out)}
.crumbs a:hover{color:var(--signal)}
.crumbs span[aria-current]{color:var(--ink)}

/* ── Мета-строка статьи ── */
.postmeta{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin-top:clamp(20px,2.6vw,30px);color:var(--faint);
}
.postmeta span{position:relative}
.postmeta span+span:before{
  content:'';position:absolute;left:-12px;top:50%;
  width:3px;height:3px;border-radius:50%;background:currentColor;
  transform:translateY(-50%);
}

/* ── Список статей ── */
.postlist{
  display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
}
.postcard{
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line-soft);border-radius:18px;
  background:#fff;
  transition:border-color var(--m-2) var(--ease-out),
             box-shadow var(--m-2) var(--ease-out),
             transform var(--m-2) var(--ease-out);
}
.postcard__meta{
  display:flex;justify-content:space-between;gap:12px;
  color:var(--faint);
}
.postcard__title{
  font:600 clamp(19px,2.2vw,23px)/1.22 var(--display);
  letter-spacing:-.035em;margin:0;color:var(--ink);
}
.postcard__desc{
  margin:0;color:var(--muted);font-size:14px;line-height:1.65;
  flex:1 1 auto;
}
.postcard__more{
  display:inline-flex;align-items:center;gap:8px;
  font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal);
}
.postcard__more svg{width:14px;height:14px;transition:transform var(--m-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .postcard:hover{
    border-color:var(--line-signal);
    box-shadow:0 22px 48px -30px rgba(11,31,42,.4);
    transform:translateY(-2px);
  }
  .postcard:hover .postcard__more svg{transform:translateX(4px)}
}
.postempty{color:var(--muted);font-size:15px}

/* ── Сетка статьи ── */
.postgrid{
  display:grid;gap:clamp(32px,4.5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,268px);
  align-items:start;
}
.doc--post{max-width:70ch}
.doc--post h2{scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc--post h3{scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc--post p{font-size:15px;line-height:1.82}
.doc--post ul,.doc--post ol{font-size:15px;line-height:1.82}
.doc--post ol{padding-left:22px;margin:0 0 14px;color:var(--muted)}
.doc--post ol li{margin-bottom:8px}
.doc--post ol li::marker{color:var(--faint);font-variant-numeric:tabular-nums}
.doc--post blockquote{
  margin:20px 0;padding:16px 20px;
  border-left:2px solid var(--signal);border-radius:0 12px 12px 0;
  background:var(--paper-2);color:var(--ink);font-size:14.5px;line-height:1.75;
}
.doc--post blockquote p:last-child{margin-bottom:0}
.doc--post .lead{
  font-size:clamp(16px,1.7vw,18px);line-height:1.7;color:var(--ink);
  margin-bottom:clamp(22px,2.6vw,30px);
}
.doc--post .note{
  margin:20px 0;padding:16px 20px;border-radius:14px;
  border:1px solid var(--line-soft);background:var(--paper-2);
  font-size:14px;line-height:1.72;color:var(--muted);
}
.doc--post .note strong{color:var(--ink)}
.doc--post .checklist{list-style:none;padding:0;margin:0 0 16px}
.doc--post .checklist li{
  position:relative;padding-left:26px;margin-bottom:9px;
  font-size:14.5px;line-height:1.7;color:var(--muted);
}
.doc--post .checklist li:before{
  content:'';position:absolute;left:0;top:.55em;
  width:13px;height:7px;
  border-left:1.6px solid var(--signal);border-bottom:1.6px solid var(--signal);
  transform:rotate(-45deg);
}

/* ── Блок автора ── */
.postauthor{
  display:flex;gap:16px;align-items:flex-start;
  margin-top:clamp(38px,4.5vw,56px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line-soft);
}
.postauthor__mark{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--paper-2);
  border:1px solid var(--line-soft);
}
.postauthor__mark svg{width:26px;height:auto}
.postauthor__mark circle{fill:var(--signal);opacity:.85}
.postauthor strong{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.postauthor p{margin:0;font-size:13px;line-height:1.65;color:var(--faint)}

/* ── Боковая колонка ── */
.postaside{
  position:sticky;top:calc(var(--nav-h) + 24px);
  display:grid;gap:16px;
}
.postaside__box{
  padding:18px 20px;border:1px solid var(--line-soft);
  border-radius:16px;background:var(--paper-2);
}
.postaside__label{color:var(--faint);margin-bottom:12px}
.posttoc{display:grid;gap:2px}
.posttoc a{
  display:block;padding:7px 0;font-size:13px;line-height:1.5;
  color:var(--muted);border-bottom:1px solid transparent;
  transition:color var(--m-2) var(--ease-out);
}
.posttoc a:last-child{border-bottom:0}
.posttoc a:hover{color:var(--signal)}

/* ── Адаптив ── */
@media (max-width:1000px){
  .postgrid{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .postaside{position:static;grid-template-columns:1fr 1fr}
  .doc--post{max-width:none}
  /* min-width:0 обязателен: иначе min-content таблицы распирает
     грид-колонку и появляется горизонтальный скролл. */
  .postgrid>*{min-width:0}
}
@media (max-width:640px){
  .postaside{grid-template-columns:1fr}
  .postmeta{font-size:9px;gap:6px 18px}
  .postmeta span+span:before{left:-10px}
  .postauthor{flex-direction:column;gap:12px}
  /* Таблицы в статье на узких экранах: уменьшаем кегль и отступы,
     чтобы min-content не выталкивал колонку за пределы контейнера. */
  .doc--post table{font-size:12px}
  .doc--post th,.doc--post td{padding:7px 8px}
}
@media (prefers-reduced-motion:reduce){
  .postcard,.postcard__more svg,.posttoc a,.crumbs a{transition:none!important}
  .postcard:hover{transform:none}
  .postcard:hover .postcard__more svg{transform:none}
}