/* annakotsur.com: общий набор для внутренних страниц (/website, дальше /seo и /audit). Только тёмная тема.
   Подключается ПОСЛЕ site.css. Все правила под body.pg, поэтому главная и юр. страницы не затронуты.
   Компоненты по data-атрибутам (логика в /assets/js/pages.js):
     [data-stack]    стопка карточек: sticky, предыдущая уменьшается и темнеет, линия прогресса справа (mobile: сверху)
     [data-journey]  закреплённый путь: сцена 100svh, узлы этапов внизу, бегунок; mobile и reduced-motion: список
     [data-count]    число докручивается при появлении (общий счётчик с motion.js)
     [data-gauge]    полукруглая шкала 0-100 с докрутом (для /audit)
   Нумерации «01/02» и счётчиков «3 / 7» нет: вместо них линия прогресса. */

html{background:var(--bg)}
.pg{
  --hl:rgba(255,255,255,.10);
  --hl-i:rgba(129,140,248,.55);
  --ease-r:cubic-bezier(.215,.61,.355,1);
  --sec-y:clamp(72px,9.2vw,150px);
  --glow:0 0 14px rgba(129,140,248,.75);
  background:transparent;
}

/* ───────── Фон: едва заметные диагональные лучи (CSS, fixed, без canvas) ───────── */
.pg .bg-glow::after{display:none}
.pg .bg-glow::before{content:"";position:absolute;inset:-12% -8%;opacity:.07;pointer-events:none;
  background:
    linear-gradient(112deg,transparent 14%,rgba(165,180,252,.95) 21%,transparent 30%),
    linear-gradient(112deg,transparent 38%,rgba(129,140,248,.8) 43%,transparent 49%),
    linear-gradient(112deg,transparent 60%,rgba(124,58,237,.9) 68%,transparent 77%),
    linear-gradient(112deg,transparent 84%,rgba(99,102,241,.8) 89%,transparent 96%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 60%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){
  .pg .bg-glow::before{animation:pgRays 70s ease-in-out infinite alternate}
}
@keyframes pgRays{to{transform:translate3d(-3%,0,0)}}

/* ───────── Общее: секции, заголовки ───────── */
.pg .section,.pg .section--tight{padding:var(--sec-y) 0}
.pg .section--alt{background:rgba(255,255,255,.018)}
.pg .section-head{max-width:1000px;margin-bottom:clamp(40px,6vw,88px)}
.pg .section h2{font-size:clamp(36px,5vw,64px);font-weight:500;letter-spacing:-.035em;line-height:1.02;margin-bottom:0}
.pg .section h2 b{font-weight:700}
.pg .section-head .lead{margin-top:clamp(18px,2vw,28px);font-size:clamp(17px,1.5vw,21px);max-width:60ch}
.pg .section-head--center .lead{margin-left:auto;margin-right:auto}
.pg .sec-after{margin-top:clamp(28px,3vw,44px);max-width:60ch;font-size:15.5px}
.pg .note.sec-after{font-size:13.5px}
.pg .body-h3{font:500 clamp(22px,2.4vw,32px)/1.15 var(--font-head);letter-spacing:-.025em;margin:0 0 clamp(20px,2.4vw,32px)}
@media (max-width:720px){.pg{--sec-y:76px}}

/* появление: opacity .5s linear + translate 1s cubic-bezier(.215,.61,.355,1), без blur */
.mo .pg [data-r]{transform:translateY(28px);filter:none;
  transition:opacity .5s linear,transform 1s var(--ease-r);transition-delay:calc(var(--i,0) * 100ms)}
.mo .pg [data-r].in{opacity:1;transform:none;filter:none}
.mo .pg [data-r].in.card,.mo .pg [data-r].in.pcard{transition:opacity .5s linear,transform 1s var(--ease-r)}
.mo .pg .w{transform:translateY(.4em);filter:none;transition:opacity .5s linear,transform 1s var(--ease-r);transition-delay:calc(var(--wi,0) * 50ms)}
.mo .pg .in .w,.mo .pg .in.w{opacity:1;transform:none;filter:none}
.mo .pg :is(.sec--for-whom .card,.case,.faq details,.timeline li,.terms li,.checklist li)[data-r]{transition-delay:0s}

/* ───────── 0. Первый экран страницы ───────── */
.pg .hero{padding:clamp(40px,6vw,88px) 0 clamp(56px,8vw,120px)}
.pg .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6vw,96px)}
.pg .hero h1{font-size:clamp(38px,5.4vw,78px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin-bottom:clamp(20px,2.4vw,32px)}
.pg .hero h1 b{font-weight:700}
.pg .hero .lead{font-size:clamp(17px,1.5vw,21px);max-width:34em}
.pg .hero-visual{max-width:560px}
@media (max-width:900px){.pg .hero-grid{grid-template-columns:1fr}.pg .hero-visual{max-width:460px}}

/* макет сайта «собирается» один раз при загрузке (чистый CSS, поэтому работает и до JS) */
@media (prefers-reduced-motion:no-preference){
  .pg .hero-visual > svg > *:not(defs){animation:asmIn .9s var(--ease-r) both}
  .pg .hero-visual > svg > :nth-child(2){animation-delay:.05s}
  .pg .hero-visual > svg > :nth-child(3),.pg .hero-visual > svg > :nth-child(4),.pg .hero-visual > svg > :nth-child(5),.pg .hero-visual > svg > :nth-child(6){animation-delay:.25s}
  .pg .hero-visual > svg > :nth-child(7),.pg .hero-visual > svg > :nth-child(8){animation-delay:.4s}
  .pg .hero-visual > svg > :nth-child(9){animation-delay:.55s}
  .pg .hero-visual > svg > :nth-child(10){animation-delay:.7s}
  .pg .hero-visual > svg > :nth-child(11){animation-delay:.8s}
  .pg .hero-visual > svg > :nth-child(12){animation-delay:.9s}
  .pg .hero-visual > svg > :nth-child(13){animation-delay:1s}
  .pg .hero-visual > svg > :nth-child(14){animation-delay:1.1s;animation-name:asmIn}
  .pg .hero-visual > svg > :nth-child(15){animation-delay:1.2s}
  .pg .hero-visual > svg > :nth-child(16){animation-delay:1.3s}
  .pg .hero-visual > svg > :nth-child(17) > *{animation:asmIn .8s var(--ease-r) both}
  .pg .hero-visual > svg > :nth-child(17) > :nth-child(-n+3){animation-delay:1.4s}
  .pg .hero-visual > svg > :nth-child(17) > :nth-child(n+4):nth-child(-n+6){animation-delay:1.55s}
  .pg .hero-visual > svg > :nth-child(17) > :nth-child(n+7){animation-delay:1.7s}
  .pg .hero-visual > svg > :nth-child(18),.pg .hero-visual > svg > :nth-child(19){animation-delay:1.85s}
  .pg .hero-visual > svg > :nth-child(20){animation-name:asmPhone;animation-delay:2s}
}
@keyframes asmIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes asmPhone{from{opacity:0;translate:44px 0}to{opacity:1;translate:0 0}}

/* ───────── 1. Для кого: крупные строки, не карточки ───────── */
.pg .sec--for-whom .grid,.pg .sec--for-whom .grid:has(> :nth-child(4)){display:grid;grid-template-columns:1fr;gap:0}
.pg .sec--for-whom .grid > .card:nth-child(n){
  grid-column:auto;grid-row:auto;min-height:0;overflow:visible;position:relative;
  display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:clamp(20px,3.4vw,48px);align-items:start;justify-content:start;
  padding:clamp(32px,4.4vw,60px) 0;background:none;border:0;border-radius:0;box-shadow:none}
.pg .sec--for-whom .grid > .card:nth-child(n)::after{display:none}
.pg .sec--for-whom .grid > .card:nth-child(n)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--hl-i),rgba(129,140,248,.10) 65%,transparent);transform-origin:left;transition:transform 1.2s var(--ease-r)}
.mo .pg .sec--for-whom .card[data-r]:not(.in)::before{transform:scaleX(0)}
.pg .sec--for-whom .grid > .card:nth-child(n) .card-icon{width:48px;height:48px;border-radius:14px;margin:4px 0 0}
.pg .sec--for-whom .grid > .card:nth-child(n) .card-icon svg{width:24px;height:24px}
.pg .sec--for-whom .grid > .card:nth-child(n) p{margin:0;font:500 clamp(22px,2.7vw,34px)/1.25 var(--font-head);letter-spacing:-.02em;color:var(--text);max-width:30em}
.pg .sec--for-whom .grid{border-bottom:1px solid var(--hl)}
@media (max-width:720px){.pg .sec--for-whom .grid > .card:nth-child(n){grid-template-columns:1fr;row-gap:20px}}

/* ───────── 2. [data-stack]: стопка карточек ─────────
   Без JS и при reduced-motion это обычный список карточек. Sticky включается только при no-preference. */
.pg .sec--problem .grid-2,.pg [data-stack]{display:block;columns:auto;position:relative;padding-right:36px;
  --st-top:calc(var(--nav-h) + 24px);--st-step:16px}
.pg .st-card,.pg .voice{margin:0 0 clamp(18px,3vw,32px);padding:clamp(26px,3.4vw,52px);border-radius:30px;position:relative;
  background:linear-gradient(160deg,#17173b 0%,#10102a 62%);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(24px,5vw,80px);align-items:center;
  min-height:clamp(260px,26vw,360px)}
.pg .voice:nth-child(even){margin-left:0;background:linear-gradient(160deg,#17173b 0%,#10102a 62%);border-radius:30px}
.pg .voice::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#04040e;opacity:var(--dim,0);pointer-events:none;left:auto;top:auto;font:inherit;color:inherit;width:auto;height:auto}
.pg .voice p{margin:0;font:500 clamp(22px,2.7vw,38px)/1.2 var(--font-head);letter-spacing:-.025em;color:var(--text);max-width:19em}
.pg .st-art{display:flex;align-items:center;justify-content:center;min-width:0}
.pg .st-art svg{width:100%;max-width:340px;height:auto;overflow:visible}
.pg .st-prog{display:none}
@media (prefers-reduced-motion:no-preference){
  .pg [data-stack] > .st-card{position:sticky;top:calc(var(--st-top) + var(--k,0) * var(--st-step));
    margin-bottom:clamp(90px,17vh,170px);scale:var(--sc,1);transform-origin:50% 0;will-change:scale}
  .pg [data-stack] > .st-card:last-child{margin-bottom:0}
  /* reveal-анимация карточек отключена: их «появление» это наезд при скролле */
  .mo .pg [data-stack] > .st-card[data-r],.mo .pg [data-stack] > .st-card[data-r].in{opacity:1;transform:none;transition:none}
  .pg .st-prog{display:block;position:absolute;top:0;bottom:0;right:7px;width:2px;pointer-events:none}
  .pg .st-prog b{position:sticky;top:var(--st-top);display:block;height:calc(100vh - var(--nav-h) - 48px);height:calc(100svh - var(--nav-h) - 48px);
    background:rgba(255,255,255,.10);border-radius:2px}
  .pg .st-prog i{position:absolute;inset:0;border-radius:2px;background:#818cf8;box-shadow:var(--glow);transform:scaleY(var(--sp,0));transform-origin:top}
}
@media (max-width:760px){
  .pg .sec--problem .grid-2,.pg [data-stack]{padding-right:0;--st-top:calc(var(--nav-h) + 16px);--st-step:10px}
  .pg .st-card,.pg .voice{grid-template-columns:1fr;row-gap:20px;min-height:0;padding:22px 20px 24px;border-radius:24px}
  .pg .voice p{font-size:clamp(21px,6vw,26px)}
  .pg .st-art{order:-1}
  .pg .st-art svg{max-width:210px}
  .pg [data-stack] > .st-card{margin-bottom:clamp(70px,13vh,120px)}
  /* mobile: линия прогресса горизонтальная, сверху блока, липнет вместе с ним */
  .pg .st-prog{position:sticky;top:var(--nav-h);right:auto;bottom:auto;width:auto;height:2px;z-index:6;margin:0 0 14px}
  .pg .st-prog b{position:static;height:2px;width:100%}
  .pg .st-prog i{transform:scaleX(var(--sp,0));transform-origin:left}
}
/* мини-графики карточек: цвета и анимация по появлению (.on ставит pages.js) */
.s-ghost{fill:none;stroke:var(--svg-line-2);stroke-width:1.2;stroke-dasharray:4 5}
.s-redl{fill:none;stroke:var(--red-t);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sa-wire{fill:none;stroke:var(--purple-light);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.pg-js .st-card .sa-draw{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);transition:stroke-dashoffset 1.1s var(--ease-r) .3s}
html.pg-js .st-card.on .sa-draw{stroke-dashoffset:0}
html.pg-js .st-card .sa-fade{opacity:0;transition:opacity .6s linear .5s}
html.pg-js .st-card.on .sa-fade{opacity:1}
html.pg-js .st-card .sa-pop{transform-box:fill-box;transform-origin:center;scale:.4;opacity:0;transition:scale .8s var(--ease-r) .6s,opacity .4s linear .6s}
html.pg-js .st-card.on .sa-pop{scale:1;opacity:1}
html.pg-js .st-card .sa-away{transition:translate 1.8s var(--ease-r) .5s,opacity 1.4s linear .9s}
html.pg-js .st-card.on .sa-away{translate:58px 0;opacity:.18}
html.pg-js .st-card .sa-grow{transform-box:fill-box;transform-origin:left;scale:1 1;transition:scale 1s var(--ease-r) .4s}
html.pg-js .st-card .sa-low{transform-box:fill-box;transform-origin:bottom;scale:1 1;transition:scale 1.1s var(--ease-r) .4s}
html.pg-js .st-card.on .sa-low{scale:1 .12}
html.pg-js .st-card .sa-spin{transform-box:fill-box;transform-origin:50% 50%;rotate:0deg;transition:rotate 2.4s var(--ease-r) .5s}
html.pg-js .st-card.on .sa-spin{rotate:250deg}

/* ───────── 3. [data-journey]: закреплённый путь ─────────
   База (mobile, reduced-motion, без JS): вертикальная линия слева, этапы списком, макеты мелко под каждым.
   html.jr-ok (pages.js: >= 900px, no-preference, высота >= 560): сцена 100svh, текст слева, макет справа, внизу линия с узлами. */
.pg .timeline{display:grid;grid-auto-flow:row;grid-auto-columns:auto;gap:clamp(48px,7vw,88px);padding:0 0 0 44px;position:relative;counter-reset:none}
.pg .timeline::before,.pg .timeline::after{content:"";position:absolute;left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto;border-radius:2px}
.pg .timeline::before{background:rgba(255,255,255,.12)}
.pg .timeline::after{background:#818cf8;box-shadow:var(--glow);transform:scaleY(var(--tl,0));transform-origin:top;transition:none}
.pg .timeline li{position:relative;counter-increment:none}
.pg .timeline li::before,.section--alt .pg .timeline li::before{content:"";position:absolute;left:-44px;top:10px;margin:0;width:16px;height:16px;border-radius:50%;
  background:#0a0a18;border:2px solid rgba(255,255,255,.28);box-shadow:none;color:transparent;font-size:0;transition:background .4s,border-color .4s,box-shadow .4s}
.pg .timeline li.on::before{background:#818cf8;border-color:#818cf8;box-shadow:var(--glow)}
.pg .timeline li:last-child::before{width:16px;height:16px;border-radius:50%}
.pg .timeline h3{font:500 clamp(28px,3.4vw,46px)/1.08 var(--font-head);letter-spacing:-.03em;color:var(--text);margin:0 0 clamp(12px,1.4vw,20px);max-width:16em}
.pg .timeline p{font-size:clamp(16.5px,1.3vw,19px);line-height:1.6;max-width:46ch}
.pg .jr-art{margin-top:22px;max-width:340px}
.pg .jr-art svg{width:100%;height:auto;overflow:visible}
.pg .jr-track{display:none}
@media (min-width:700px){
  .pg .timeline li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);column-gap:clamp(24px,5vw,72px);align-items:center}
  .pg .jr-art{margin-top:0}
}
.pg .sec--how .sec-after{margin-top:clamp(36px,4vw,56px)}

@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  /* 90svh хода на шаг + 30svh запаса: собранная картинка стоит на месте (заземление), быстрый скролл не проскакивает шаг */
  html.jr-ok .pg [data-journey]{padding:0;height:calc(var(--jr-n,4) * 120vh);height:calc(var(--jr-n,4) * 120svh)}
  html.jr-ok .pg [data-journey] > .wrap{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));
    display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding-top:clamp(20px,4.5vh,52px);padding-bottom:clamp(16px,3.5vh,36px)}
  html.jr-ok .pg [data-journey] .section-head{margin-bottom:clamp(8px,2vh,24px)}
  html.jr-ok .pg [data-journey] h2{font-size:clamp(34px,4.4vw,60px)}
  html.jr-ok .pg [data-journey] .timeline{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,96px);
    align-items:center;gap:0 clamp(32px,5vw,96px);padding:0;min-height:0;position:static}
  html.jr-ok .pg [data-journey] .timeline::before,html.jr-ok .pg [data-journey] .timeline::after{display:none}
  html.jr-ok .pg [data-journey] .timeline li{display:contents}
  html.jr-ok .pg [data-journey] .timeline li::before{display:none}
  html.jr-ok .pg [data-journey] .timeline li > div:first-child{grid-area:1/1;opacity:0;translate:0 22px;pointer-events:none;
    transition:opacity .5s linear,translate .9s var(--ease-r)}
  html.jr-ok .pg [data-journey] .timeline li > .jr-art{grid-area:1/2;justify-self:end;align-self:center;width:100%;max-width:min(560px,52vh * 1.34);margin:0;opacity:0;scale:.96;
    transition:opacity .5s linear,scale .9s var(--ease-r)}
  html.jr-ok .pg [data-journey] .timeline li.is-active > div:first-child{opacity:1;translate:0 0;pointer-events:auto}
  html.jr-ok .pg [data-journey] .timeline li.is-active > .jr-art{opacity:1;scale:1}
  html.jr-ok .pg [data-journey] .timeline li[data-r]{opacity:1;transform:none;transition:none}
  html.jr-ok .pg [data-journey] .timeline h3{font-size:clamp(30px,3.8vw,56px)}
  html.jr-ok .pg [data-journey] .sec-after{margin-top:6px;font-size:14px}

  html.jr-ok .pg .jr-track{display:block;position:relative;height:70px;margin:clamp(8px,2vh,22px) 10px 0}
  .pg .jr-line{position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(255,255,255,.12);border-radius:2px}
  .pg .jr-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--jp,0) * 100%);background:#818cf8;box-shadow:var(--glow);border-radius:2px}
  .pg .jr-node{position:absolute;top:4px;left:calc(var(--x,0) * 100%);width:16px;height:16px;margin-left:-8px;border-radius:50%;
    background:#0a0a18;border:2px solid rgba(255,255,255,.28);transition:background .4s,border-color .4s,box-shadow .4s}
  .pg .jr-node.on{background:#818cf8;border-color:#818cf8}
  .pg .jr-node em{position:absolute;top:26px;left:50%;translate:-50% 0;white-space:nowrap;font:500 clamp(13px,1.15vw,16px)/1.2 var(--font-text);font-style:normal;color:var(--text-3);transition:color .4s}
  .pg .jr-node.on em{color:var(--text-2)}
  .pg .jr-node.cur em{color:var(--text)}
  .pg .jr-node.first em{left:-8px;translate:0 0}
  .pg .jr-node.last em{left:auto;right:-8px;translate:0 0}
  .pg .jr-run{position:absolute;top:2px;left:calc(var(--jp,0) * 100%);width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff;
    border:5px solid #818cf8;box-shadow:0 0 0 6px rgba(129,140,248,.18),var(--glow)}
}

/* макеты этапов: появление по .on (на сцене .on = активный этап, в списке = попал в экран) */
.jr-art .a-paper{fill:#f4f4fb}
.jr-art .a-ln{fill:#c9c9e2}
.jr-art .a-ln2{fill:#a8a8c9}
.jr-art .a-tx{stroke:#c9c9e2}
.jr-art .a-ok{fill:none;stroke:#22c55e;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.jr-art .a-grn{fill:#22c55e}
.jr-art .a-gl{fill:none;stroke:#22c55e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.jr-art .a-line{fill:none;stroke:var(--purple-light);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.jr-art .a-tree{fill:none;stroke:var(--purple-light);stroke-width:1.8;stroke-linecap:round}
html.pg-js .jr-art .a-draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.2s var(--ease-r) calc(var(--d,0) * 1s)}
html.pg-js li.on .jr-art .a-draw{stroke-dashoffset:0}
html.pg-js .jr-art .a-pop{transform-box:fill-box;transform-origin:center;scale:.3;opacity:0;transition:scale .7s var(--ease-r) calc(var(--d,0) * 1s),opacity .4s linear calc(var(--d,0) * 1s)}
html.pg-js li.on .jr-art .a-pop{scale:1;opacity:1}
html.pg-js .jr-art .a-drop{opacity:0;translate:0 -16px;transition:opacity .5s linear calc(var(--d,0) * 1s),translate .9s var(--ease-r) calc(var(--d,0) * 1s)}
html.pg-js li.on .jr-art .a-drop{opacity:1;translate:0 0}
html.pg-js .jr-art .a-rise{transform-box:fill-box;transform-origin:bottom;scale:1 .05;transition:scale 1s var(--ease-r) calc(var(--d,0) * 1s)}
html.pg-js li.on .jr-art .a-rise{scale:1 1}
html.pg-js .jr-art .a-wipe{transform-box:fill-box;transform-origin:left;scale:0 1;transition:scale .9s var(--ease-r) calc(var(--d,0) * 1s)}
html.pg-js li.on .jr-art .a-wipe{scale:1 1}

/* ───────── 4. Цены: три тарифа крупно ───────── */
.pg .pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch;border-bottom:1px solid var(--hl)}
.pg .pcard,.pg .pcard--featured{position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);
  padding:clamp(30px,3.6vw,56px) clamp(20px,2.8vw,44px) clamp(30px,3.6vw,52px);border:0;border-top:1px solid var(--hl);border-radius:0;background:none;box-shadow:none;
  transition:none}
.pg .pcard + .pcard{border-left:1px solid var(--hl)}
.pg .pcard:first-child{padding-left:0}
.pg .pcard:last-child{padding-right:0}
.pg .pcard--featured{background:radial-gradient(90% 70% at 50% 0%,rgba(99,102,241,.16),transparent 72%);border-top:2px solid #818cf8}
.pg .pcard--featured::after{display:none}
.pg .pcard-badge{position:static;align-self:flex-start;margin:0 0 -4px;padding:5px 12px;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:var(--r-pill);background:var(--grad);color:#fff}
.pg .pcard-name{font:500 clamp(22px,2.1vw,30px)/1.15 var(--font-head);letter-spacing:-.025em;min-height:0}
.pg .pcard-price{display:flex;align-items:baseline;gap:10px;font:600 clamp(40px,4.4vw,58px)/1 var(--font-head);letter-spacing:-.045em;padding:0 0 clamp(14px,1.6vw,22px);border-bottom:1px solid var(--hl)}
.pg .pcard-price .pre,.pg .pcard-price .post{font:500 clamp(17px,1.5vw,21px) var(--font-text);letter-spacing:0;color:var(--text-3)}
.pg .pcard-for{font-size:clamp(16px,1.3vw,18.5px);line-height:1.55}
@supports (grid-template-rows:subgrid){
  .pg .pricing{grid-template-rows:auto auto auto 1fr}
  .pg .pcard,.pg .pcard--featured{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:clamp(14px,1.6vw,22px)}
  .pg .pcard:not(.pcard--featured){grid-template-rows:subgrid}
  .pg .pcard:not(.pcard--featured) .pcard-name{grid-row:2}
  .pg .pcard:not(.pcard--featured) .pcard-price{grid-row:3}
  .pg .pcard:not(.pcard--featured) .pcard-for{grid-row:4}
}
.pg .sec--pricing .sec-cta{margin-top:clamp(32px,4vw,56px)}
@media (max-width:900px){
  .pg .pricing{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter) 18px;border-bottom:0}
  .pg .pricing::-webkit-scrollbar{display:none}
  .pg .pcard,.pg .pcard--featured,.pg .pcard:first-child,.pg .pcard:last-child{flex:0 0 min(80vw,340px);scroll-snap-align:center;display:flex;
    padding:28px 22px 26px;border:1px solid var(--hl);border-radius:26px;background:rgba(255,255,255,.03)}
  .pg .pcard + .pcard{border-left:1px solid var(--hl)}
  .pg .pcard--featured{border:1.5px solid rgba(129,140,248,.7);background:radial-gradient(90% 70% at 50% 0%,rgba(99,102,241,.2),transparent 72%)}
}

/* ───────── 5. Impressum: текст-блок + лист документа (единственный светлый предмет) ───────── */
.pg .sec--included > .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(40px,7vw,120px);align-items:center}
.pg .sec--included > .wrap > *{grid-column:1 / -1}
.pg .sec--included > .wrap > .section-head{grid-column:1;grid-row:1;margin-bottom:clamp(36px,5vw,64px)}
.pg .sec--included > .wrap > .doc-sheet{grid-column:2;grid-row:1;margin-bottom:clamp(36px,5vw,64px)}
.pg .doc-sheet{justify-self:center;width:min(100%,330px);rotate:3deg;filter:drop-shadow(0 50px 50px rgba(0,0,0,.6)) drop-shadow(0 0 70px rgba(99,102,241,.25))}
.pg .doc-sheet svg{width:100%;height:auto;overflow:visible}
html.pg-js .doc-sheet .a-draw{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);transition:stroke-dashoffset 1.1s var(--ease-r) calc(var(--d,0) * 1s)}
html.pg-js .doc-sheet.on .a-draw{stroke-dashoffset:0}
.doc-sheet .a-paper{fill:#f4f4fb}.doc-sheet .a-ln{fill:#d3d3e6}.doc-sheet .a-ln2{fill:#a8a8c9}.doc-sheet .a-hd{fill:#6366f1}
.doc-sheet .a-ok{fill:none;stroke:#22c55e;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pg .incl,.pg .incl--icons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,7vw,120px);border-top:0}
.pg .incl--icons li,.pg .incl li{align-items:center;gap:clamp(14px,1.6vw,22px);padding:clamp(18px,2vw,26px) 0;border:0;border-bottom:1px solid var(--hl);border-radius:0;
  background:none;font:500 clamp(18px,1.6vw,22px)/1.35 var(--font-text);color:var(--text);transform:none}
.pg .incl--icons{border-top:1px solid var(--hl)}
.pg .incl--icons li:nth-child(2){border-top:0}
.pg .incl--icons .ic{width:44px;height:44px;border-radius:13px}
.pg .incl--icons .ic svg{width:22px;height:22px}
@media (hover:hover){.pg .incl--icons li:hover{border-color:var(--hl);transform:none}}
@media (max-width:860px){
  .pg .sec--included > .wrap{display:block}
  .pg .doc-sheet{width:min(70%,250px);margin:0 auto clamp(36px,8vw,52px)}
  .pg .incl,.pg .incl--icons{grid-template-columns:1fr}
  .pg .incl--icons li:nth-child(2){border-top:0}
}

/* ───────── 6. Результаты: по кейсу на ряд ───────── */
.pg .sec--cases .grid-3{display:block}
.pg .case{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);row-gap:0;align-content:center;align-items:center;
  padding:clamp(48px,6vw,96px) 0;border:0;border-top:1px solid var(--hl);border-radius:0;background:none;box-shadow:none}
.pg .sec--cases .case:last-child{border-bottom:1px solid var(--hl)}
.pg .case .case-chart,.pg .case:first-child .case-chart,.pg .case:last-child .case-chart{
  grid-column:1;grid-row:1 / span 3;display:block;margin:0;padding:0;background:none;border:0}
.pg .case:last-child .case-chart{display:flex;align-items:center;justify-content:flex-start}
.pg .case .case-chart svg,.pg .case:first-child .case-chart svg{width:100%;max-height:none}
.pg .case h3,.pg .case p{grid-column:2}
.pg .case h3{align-self:end;font:600 clamp(26px,3vw,42px)/1.1 var(--font-head);letter-spacing:-.03em;margin:0 0 clamp(16px,2vw,28px)}
.pg .case p{align-self:start;font-size:clamp(17px,1.4vw,20px);line-height:1.6}
.pg .case .case-meta{margin-top:20px;padding-top:16px}
.pg .case-chart .stars{gap:8px}
.pg .case-chart .stars svg{width:clamp(40px,5.2vw,68px);height:clamp(40px,5.2vw,68px)}
.pg .ch-num{font-size:19px}
.pg .sec--cases > .wrap > .note{max-width:60ch}
@media (max-width:820px){
  .pg .case{grid-template-columns:1fr;row-gap:20px}
  .pg .case .case-chart,.pg .case:first-child .case-chart,.pg .case:last-child .case-chart{grid-column:1;grid-row:auto}
  .pg .case h3,.pg .case p{grid-column:1}
}

/* ───────── 7. Отзывы: крупно 5,0, звёзды (золотые), кнопка ───────── */
.pg .sec--review{background:radial-gradient(60% 90% at 50% 55%,rgba(99,102,241,.20),transparent 70%)}
.pg .review-card{max-width:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.pg .review-card .section-head{display:contents}
.pg .sec--review .review-card h2{order:1;margin:0;font:500 clamp(20px,2vw,26px)/1.2 var(--font-head);letter-spacing:-.01em;color:var(--text-2)}
.pg .review-card .lead{order:2;margin:clamp(8px,1.6vw,20px) 0 0;max-width:none;font-size:clamp(17px,1.6vw,22px);color:var(--text-2)}
.pg .review-card .lead strong{display:block;font:500 clamp(120px,21vw,280px)/.9 var(--font-head);letter-spacing:-.06em;margin:0 0 clamp(20px,2.6vw,36px)}
.pg .review-card .stars{order:3;margin:clamp(24px,3.4vw,48px) 0}
.pg .review-card .stars svg{width:clamp(30px,3.4vw,46px);height:clamp(30px,3.4vw,46px)}
.pg .review-card .btn-row{order:4}

/* ───────── 8. Условия / что фиксируется / чек-лист: строки с тонкими разделителями ───────── */
.pg .terms{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,7vw,120px);border:0;border-bottom:1px solid var(--hl)}
.pg .terms li,.pg .terms li:not(:nth-child(3n+1)){flex-direction:row;align-items:flex-start;gap:clamp(16px,2vw,24px);padding:clamp(26px,3vw,40px) 0;border:0;border-top:1px solid var(--hl)}
.pg .terms .ic{width:48px;height:48px;border-radius:14px}
.pg .terms span.t{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--text)}
@media (max-width:900px){
  .pg .terms li,.pg .terms li:nth-child(even),.pg .terms li:not(:nth-child(3n+1)){padding:clamp(24px,5vw,32px) 0!important;border-left:0!important}
  .pg .terms{grid-template-columns:1fr}
}
.pg .checklist{max-width:none;border:0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--hl)}
.pg .checklist li{padding:clamp(22px,2.6vw,36px) 0;gap:clamp(16px,2vw,28px);border-top:1px solid var(--hl)}
.pg .checklist li:first-child{border-top:1px solid var(--hl)}
.pg .checklist p{font:500 clamp(19px,2vw,28px)/1.3 var(--font-head);letter-spacing:-.02em}

/* DE: блоки «region» и «choice» (текст + иллюстрация) без карточной рамки */
.pg .split{gap:clamp(40px,6vw,96px)}
.pg .split-art{padding:0;background:none;border:0;box-shadow:none}

/* ───────── 9. FAQ ───────── */
.pg .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px)}
.pg .faq-grid .section-head{margin:0}
.pg .faq summary{font:500 clamp(19px,1.9vw,24px)/1.3 var(--font-head);letter-spacing:-.015em;padding:clamp(22px,2.6vw,30px) 2px}
.pg .faq summary::after{flex:0 0 40px;height:40px;color:var(--purple-light);
  background:linear-gradient(currentColor,currentColor) center/14px 1.8px no-repeat,linear-gradient(currentColor,currentColor) center/1.8px 14px no-repeat}
.pg .faq details[open] summary::after{transform:none;background:linear-gradient(currentColor,currentColor) center/14px 1.8px no-repeat var(--chip-bg)}
.pg .faq .faq-a{padding:0 56px clamp(24px,3vw,34px) 2px;font-size:clamp(16.5px,1.3vw,19px);line-height:1.65}
@media (max-width:900px){.pg .faq-grid{grid-template-columns:1fr}.pg .faq .faq-a{padding-right:0}}

/* ───────── 10. Форма: только стиль ───────── */
.pg .sec--form{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.pg .sec--form > .wrap{width:100%}
.pg .form-wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.pg .form-side{position:sticky;top:calc(var(--nav-h) + 48px)}
.pg .form-side .section-head{margin-bottom:clamp(20px,2.4vw,32px)}
.pg .form-side h2{font-size:clamp(44px,6vw,84px)}
.pg .form-side > p{font-size:clamp(17px,1.4vw,20px);max-width:36ch}
.pg .form-art{display:none}
.pg .lead-form{padding:clamp(24px,3vw,44px);border:1px solid var(--hl);border-radius:26px;background:rgba(255,255,255,.03);box-shadow:none}
.pg .lead-form::before{left:clamp(24px,3vw,44px);right:clamp(24px,3vw,44px);background:linear-gradient(90deg,transparent,var(--purple-light),transparent)}
.pg .field input,.pg .field textarea,.pg .field select{background:#0a0a18;border-color:rgba(255,255,255,.14)}
.pg .field input:focus,.pg .field textarea:focus,.pg .field select:focus{border-color:var(--purple-light);box-shadow:0 0 0 4px var(--indigo-glow)}
@media (max-width:900px){.pg .sec--form{min-height:0;display:block}.pg .form-wrap{grid-template-columns:1fr;gap:36px}.pg .form-side{position:static}}

/* ───────── 11. Финальный CTA крупно ───────── */
.pg .sec--cta{padding:clamp(40px,6vw,90px) 0 var(--sec-y)}
.pg .cta-band{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,3.6vw,48px);padding:clamp(44px,7vw,120px) clamp(24px,6vw,100px);border-radius:clamp(26px,3vw,40px)}
.pg .cta-band h2{font-size:clamp(40px,6.6vw,92px);font-weight:500;letter-spacing:-.04em;line-height:1;max-width:12em;margin:0 0 clamp(14px,1.8vw,24px)}
.pg .cta-band p{font-size:clamp(17px,1.5vw,21px);max-width:44ch}
.pg .cta-mark{width:clamp(280px,40vw,620px);right:-4%;bottom:-18%;opacity:.09}
@media (max-width:820px){.pg .cta-band{padding:44px 22px}.pg .cta-band .btn{width:100%}}

/* ───────── [data-gauge]: полукруглая шкала 0-100 (на /website не используется) ───────── */
.gauge{position:relative;display:block;width:100%;max-width:300px}
.gauge svg{width:100%;height:auto;overflow:visible}
.gauge .g-track,.gauge .g-fill{fill:none;stroke-width:12;stroke-linecap:round}
.gauge .g-track{stroke:rgba(255,255,255,.10)}
.gauge .g-fill{stroke:var(--g-c,#818cf8);stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 8px var(--g-c,#818cf8));transition:stroke-dashoffset 1.6s var(--ease-r)}
.gauge.on .g-fill{stroke-dashoffset:calc(100 - var(--g,0))}
.gauge[data-tone="good"]{--g-c:#22c55e}.gauge[data-tone="mid"]{--g-c:#f59e0b}.gauge[data-tone="bad"]{--g-c:#ef4444}
.gauge .g-val{position:absolute;left:0;right:0;bottom:2%;text-align:center;font:600 clamp(40px,4.6vw,64px)/1 var(--font-head);letter-spacing:-.045em;color:var(--text)}
.gauge .g-val small{font:500 .36em var(--font-text);letter-spacing:0;color:var(--text-3);margin-left:4px}
@media (prefers-reduced-motion:reduce){.gauge .g-fill{transition:none;stroke-dashoffset:calc(100 - var(--g,0))}}

@media (prefers-reduced-motion:reduce){
  .pg .timeline li::before{background:#818cf8;border-color:#818cf8}
}

.pg .hero-kicker{display:flex;align-items:center;gap:12px;margin:0 0 clamp(12px,1.6vw,20px);font:500 clamp(14px,1.15vw,16px)/1.2 var(--font-text);color:var(--purple-light)}
.pg .hero-kicker::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--purple-light))}
/* H1 /website: фиксированные переносы (строки не склеиваются и не рвутся на любой ширине), подстрока мельче */
.pg h1 .h1-l{display:block;white-space:nowrap}
.pg h1 .h1-sub{display:block;margin-top:.32em;font-size:.5em;font-weight:400;letter-spacing:-.01em;color:rgba(244,244,251,.78)}
/* ТЗ-45/46: блок «Линкбилдинг: упоминания и ссылки» (/seo, /de/seo): 4 карточки с 3D-боксом (pilot-art.js) */
.pg .mentions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.pg .mention{display:flex;flex-direction:column;padding:clamp(12px,1.2vw,16px) clamp(12px,1.2vw,16px) clamp(16px,1.6vw,22px)}
.pg .mention .jr-art{max-width:none;width:100%;margin:0 0 16px}
.pg .mention h3{margin:0 0 8px;font:500 clamp(18px,1.5vw,21px)/1.25 var(--font-head);letter-spacing:-.02em}
.pg .mention p{margin:0;font-size:15.5px;line-height:1.5;color:var(--text-2)}
.pg .mention-case{margin:clamp(12px,1.8vh,20px) 0 0;max-width:none;padding-left:14px;border-left:2px solid var(--purple-light);font-size:clamp(15px,1.3vw,18px);line-height:1.4;color:var(--text)}
.pg .mention-case b{color:var(--green-t);font-weight:700;white-space:nowrap}
.pg .sec--mentions .section-head .lead{max-width:min(100%,980px)}
@media (max-width:1100px){.pg .mentions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pg .mentions{grid-template-columns:1fr}}
@media (min-width:901px){
  .pg .sec--mentions .section-head{margin-bottom:clamp(12px,2.4vh,28px)}
  .pg .sec--mentions .section-head .lead{font-size:clamp(15px,2vh,19px)}
  .pg .sec--mentions .mention .jr-art{margin-bottom:clamp(8px,1.4vh,14px)}
  .pg .sec--mentions .mention h3{margin-bottom:clamp(4px,.8vh,8px)}
  .pg .sec--mentions .mention p{font-size:clamp(13px,1.7vh,15.5px);line-height:1.4}
  .pg .sec--mentions .cta-row{margin-top:clamp(10px,2vh,24px);padding-top:clamp(10px,1.6vh,18px);padding-bottom:clamp(10px,1.6vh,18px)}
}
.pg .sec--mentions .cta-row .btn-arrow{flex:none}