/* annakotsur.com: слой v4 для внутренних страниц (сейчас /website RU+DE, дальше /seo, /audit, главная).
   Подключается ПОСЛЕ pages.css. Всё под .pg.
   1) ровный фон без полос, воздух и hairline между блоками, типографика;
   2) заголовки H2: сборка по словам (blur) и акцент-слова <b> с градиентом-переливом как у H1 героя;
   3) таблица цен с подсветкой [data-ptable];  4) 3D-карусель работ [data-coverflow];  5) FAQ-аккордеон;  6) финальный экран.
   Логика: /assets/js/pages-v4.js */

/* ───────── 1. Фон, ритм, типографика ───────── */
.pg{--sec-y:clamp(38px,4.7vw,68px);--accent-grad:linear-gradient(100deg,#818cf8 0%,#a78bfa 25%,#5eead4 50%,#a78bfa 75%,#818cf8 100%);font-size:18px}
.pg main{--text-2:#c9cbe6;--text-3:rgba(226,228,248,.66)}
.pg .section--alt{background:none}
.pg .section-head{margin-bottom:clamp(32px,4.4vw,64px)}
.pg main > .section:not(.sec--how)::before{content:"";position:absolute;top:0;left:50%;width:min(calc(var(--wrap) - 2 * var(--gutter)),calc(100% - 2 * var(--gutter)));height:1px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 18%,rgba(255,255,255,.12) 82%,transparent)}
.pg .sec--review::before,.pg .sec--form::before{display:none}
@media (max-width:720px){.pg{font-size:16.5px}}

/* герой растворяется в общий фон последними ~220px: без стыка */
.pg .hero-map .hm-bg{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 240px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 240px),transparent)}
@media (max-width:899px){.pg .hero-map .hm-bg{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 140px),transparent)}}

/* ───────── 2. H2: акцент-градиент и сборка по словам ───────── */
/* Акцент в H2: один непрерывный градиент по всему акценту (по порядку чтения, в т.ч. при переносе строки).
   После разбиения motion.js на слова pages-v4.js ставит каждому слову --off (сдвиг от начала акцента) и --bw (длина акцента):
   у всех слов один и тот же градиент и одна и та же фаза, цвет не «скачет» между словами. Перелив идёт по общему таймлайну страницы. */
.pg .section h2 b{font-weight:700;color:transparent;-webkit-text-fill-color:transparent;
  background-image:var(--accent-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
.pg .section h2 b.is-split{background:none}
.pg .section h2 b .w{--off:0px;--bw:240px;background-image:var(--accent-grad);background-size:calc(var(--bw) * 2) 100%;background-position:calc(var(--off) * -1) 0;
  background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .pg .section h2 b:not(.is-split){animation:pgShift 10s ease-in-out infinite alternate}
  .pg .section h2 b .w{animation:pgShiftW 10s ease-in-out infinite alternate}
}
@keyframes pgShift{from{background-position:0 0}to{background-position:100% 0}}
@keyframes pgShiftW{from{background-position:calc(var(--off) * -1) 0}to{background-position:calc(var(--off) * -1 - var(--bw)) 0}}
.mo .pg .w{transform:translateY(.4em);will-change:transform;backface-visibility:hidden;
  transition:opacity .7s var(--ease-r),transform .9s var(--ease-r),filter .7s var(--ease-r);transition-delay:calc(var(--wi,0) * 70ms)}
.mo .pg .in .w,.mo .pg .in.w{opacity:1;transform:none;filter:none;will-change:auto}

/* ───────── 3. Таблица цен с подсветкой ───────── */
.pg .ptable{position:relative;max-width:1100px;margin:0 auto}
.pg .pt-tabs{display:none}
.pg .pt-wrap{position:relative}
.pg .pt-spot{position:absolute;top:-14px;bottom:-14px;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:26px;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(120% 60% at var(--mx,50%) var(--my,0%),rgba(129,140,248,.28),transparent 62%),linear-gradient(180deg,rgba(99,102,241,.16),rgba(99,102,241,.05));
  box-shadow:inset 0 0 0 1px rgba(129,140,248,.5),0 30px 80px -30px rgba(99,102,241,.7);
  transition:transform .55s var(--ease-r),width .55s var(--ease-r),opacity .4s}
.pg .ptable.is-ready .pt-spot{opacity:1}
.pg .pt{position:relative;z-index:1;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.pg .pt th,.pg .pt td{padding:16px 18px;text-align:left;vertical-align:top;font-size:16.5px;line-height:1.4;color:var(--text-2);border-top:1px solid rgba(255,255,255,.08)}
.pg .pt thead th,.pg .pt thead td{border-top:0;padding-top:22px;padding-bottom:26px;vertical-align:bottom}
.pg .pt col.pt-l{width:25%}
.pg .pt tbody th[scope=row]{font-weight:500;color:var(--text);padding-left:6px}
.pg .pt tbody td{transition:color .3s}
.pg .pt .is-on{color:var(--text)}
.pg .pt-col{all:unset;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:100%;cursor:pointer;border-radius:14px}
.pg .pt-col:focus-visible{outline:2px solid #a5b4fc;outline-offset:6px}
.pg .pt-name{font:500 clamp(18px,1.8vw,24px)/1.15 var(--font-head);letter-spacing:-.02em;color:var(--text)}
.pg .pt-price{font:600 clamp(34px,4vw,54px)/1 var(--font-head);letter-spacing:-.045em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pg .pt-price .pre{font:500 clamp(15px,1.3vw,18px) var(--font-text);letter-spacing:0;color:var(--text-3);margin-right:4px}
.pg .pt-badge{align-self:flex-start;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--btn-bg,#6366f1)}
.pg .pt-ck{display:block;width:26px;height:26px;overflow:visible}
.pg .pt-ck path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4}
.pg .pt-ck .b{stroke:rgba(226,228,248,.32)}
.pg .pt-ck .a{stroke:#5eead4;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .2s ease;filter:drop-shadow(0 0 6px rgba(94,234,212,.55))}
.pg .pt .is-on .pt-ck .a{stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease-r) calc(var(--i,0) * 60ms)}
.pg .pt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg .pt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(36px,4vw,56px)}
.pg .pt-foot p{margin:0;max-width:62ch;font-size:16.5px}
.pg .pt-foot .pt-note{font-size:14.5px;color:var(--text-3);margin-top:8px}
@media (max-width:760px){
  .pg .pt-tabs{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}
  .pg .pt-tabs button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 16px;border-radius:999px;border:1px solid var(--border-h,rgba(255,255,255,.2));font:500 15px/1.2 var(--font-text);color:var(--text-2);transition:background .3s,color .3s,border-color .3s}
  .pg .pt-tabs button[aria-pressed=true]{background:var(--btn-bg,#6366f1);border-color:transparent;color:#fff}
  .pg .pt-tabs button:focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}
  .pg .pt-spot{display:none}
  .pg .pt,.pg .pt tbody,.pg .pt thead,.pg .pt tr{display:block;width:100%}
  .pg .pt colgroup,.pg .pt thead td{display:none}
  .pg .pt thead th{display:none;padding:0 0 18px}
  .pg .pt[data-active="0"] thead th[data-c="0"],.pg .pt[data-active="1"] thead th[data-c="1"],.pg .pt[data-active="2"] thead th[data-c="2"]{display:block}
  .pg .pt-name{display:none}
  .pg .pt-col{cursor:default;pointer-events:none}
  .pg .pt-price{font-size:clamp(44px,13vw,60px)}
  .pg .pt tbody tr{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
  .pg .pt tbody th,.pg .pt tbody td{display:block;padding:0;border:0}
  .pg .pt tbody th[scope=row]{flex:1 1 auto;padding:0}
  .pg .pt tbody td{display:none;flex:0 1 52%;text-align:right;color:var(--text)}
  .pg .pt[data-active="0"] tbody td[data-c="0"],.pg .pt[data-active="1"] tbody td[data-c="1"],.pg .pt[data-active="2"] tbody td[data-c="2"]{display:block}
  .pg .pt td .pt-ck{margin-left:auto}
  .pg .pt-foot{flex-direction:column;align-items:stretch}
  .pg .pt-foot .btn{width:100%}
}

/* ───────── 4. Карусель «Мои работы» (3D coverflow) ───────── */
.pg .cf{--cfw:clamp(300px,36vw,520px);position:relative;outline:0}
.pg .cf:focus-visible .cf-stage{outline:2px solid #a5b4fc;outline-offset:8px;border-radius:20px}
.pg .cf-stage{position:relative;height:calc(var(--cfw) * .78 + 176px);perspective:1600px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.pg .cf-stage.is-drag{cursor:grabbing}
.pg .cf-item{position:absolute;left:50%;top:0;width:var(--cfw);margin:0 0 0 calc(var(--cfw) / -2);
  transform:translateX(calc(var(--d,0) * var(--cfw) * .6)) translateZ(calc(var(--a,0) * -170px)) rotateY(calc(var(--s,0) * -44deg));
  z-index:calc(10 - var(--a,0));opacity:calc(1 - var(--a,0) * .22);filter:brightness(calc(1 - var(--a,0) * .24));
  transition:transform .65s var(--ease-r),opacity .5s,filter .5s;transform-style:preserve-3d;cursor:pointer}
.pg .cf-item.is-far{opacity:0;pointer-events:none}
.pg .cf-item.is-c{cursor:default}
.pg .cf-win{border-radius:16px;overflow:hidden;background:#12122e;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(129,140,248,.06)}
.pg .cf-item.is-c .cf-win{border-color:rgba(129,140,248,.5);box-shadow:0 50px 100px -30px rgba(99,102,241,.55),0 30px 60px -30px rgba(0,0,0,.8)}
.pg .cf-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#1a1a3c;border-bottom:1px solid rgba(255,255,255,.08)}
.pg .cf-bar i{width:9px;height:9px;border-radius:50%;background:#ef4444}
.pg .cf-bar i:nth-child(2){background:#f59e0b}.pg .cf-bar i:nth-child(3){background:#22c55e}
.pg .cf-bar b{flex:1;height:16px;margin-left:10px;border-radius:8px;background:rgba(255,255,255,.07)}
.pg .cf-view{position:relative;height:calc(var(--cfw) * .78 - 34px);overflow:hidden;background:#fff}
.pg .cf-shot{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transform:translateY(0);transition:transform .7s ease;-webkit-user-drag:none;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .pg .cf-item.is-c .cf-shot,.pg .cf-item:hover .cf-shot{transform:translateY(var(--cf-max,0px));transition:transform var(--cf-dur,12s) linear .6s}
}
.pg .cf-item figcaption{display:flex;flex-direction:column;gap:3px;margin-top:20px;text-align:center;opacity:0;transition:opacity .4s}
.pg .cf-item.is-c figcaption{opacity:1;transition-delay:.2s}
.pg .cf-name{font:500 clamp(20px,2vw,26px)/1.15 var(--font-head);letter-spacing:-.02em;color:var(--text)}
.pg .cf-type,.pg .cf-meta{font-size:15px;line-height:1.4;color:var(--text-3)}
.pg .cf-res{margin-top:6px;font-size:17px;line-height:1.4;font-weight:500;color:#5eead4}
.pg .cf-sub{font-size:14.5px;line-height:1.4;color:var(--text-3)}
.pg .cf-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.pg .cf-btn{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-h,rgba(255,255,255,.2));color:var(--text);transition:background .25s,border-color .25s,opacity .25s}
.pg .cf-btn:hover{background:rgba(129,140,248,.18);border-color:rgba(129,140,248,.6)}
.pg .cf-btn:focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}
.pg .cf-btn[disabled]{opacity:.3;cursor:default;pointer-events:none}
.pg .cf-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg .cf-dots{display:flex;gap:8px}
.pg .cf-dots button{all:unset;box-sizing:border-box;cursor:pointer;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,width .3s}
.pg .cf-dots button[aria-current=true]{width:26px;border-radius:4px;background:#818cf8}
.pg .cf-dots button:focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}
@media (max-width:720px){
  .pg .cf{--cfw:min(76vw,330px)}
  .pg .cf-stage{height:calc(var(--cfw) * 1.12 + 196px)}
  .pg .cf-view{height:calc(var(--cfw) * 1.12 - 34px)}
  .pg .cf-item{transform:translateX(calc(var(--d,0) * var(--cfw) * .78)) translateZ(calc(var(--a,0) * -150px)) rotateY(calc(var(--s,0) * -38deg))}
  .pg .cf-item[data-a="2"]{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.pg .cf-item,.pg .cf-shot{transition:none}}

/* ───────── 5. FAQ: аккордеон с анимированной линией ───────── */
.pg .faq{border-top:0;display:flex;flex-direction:column;gap:6px}
.pg .faq details{position:relative;border:0;border-radius:18px;transition:background .35s}
.pg .faq details::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:rgba(255,255,255,.1)}
.pg .faq details::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,#818cf8,#5eead4);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease-r)}
.pg .faq details[open]:not(.is-closing){background:rgba(129,140,248,.075)}
.pg .faq details[open]:not(.is-closing)::before{transform:scaleY(1)}
.pg .faq summary{padding:clamp(20px,2.4vw,28px) 22px;transition:color .25s}
.pg .faq summary::after{flex:0 0 40px;height:40px;border-radius:50%;border:1px solid var(--border-h,rgba(255,255,255,.2));color:#a5b4fc;transform:none;
  background:linear-gradient(currentColor,currentColor) center/14px 1.8px no-repeat,linear-gradient(currentColor,currentColor) center/1.8px 14px no-repeat;
  transition:background-size .35s var(--ease-r),background-color .3s,border-color .3s}
.pg .faq details[open]:not(.is-closing) summary::after{transform:none;background-color:rgba(129,140,248,.2);border-color:rgba(129,140,248,.6);
  background:linear-gradient(currentColor,currentColor) center/14px 1.8px no-repeat,linear-gradient(currentColor,currentColor) center/1.8px 0 no-repeat}
.pg .faq .faq-a{padding:0 64px clamp(22px,2.6vw,30px) 22px;animation:none!important}
@media (max-width:900px){.pg .faq .faq-a{padding-right:22px}}

/* ───────── 6. Финальный экран: «Начните с концепции» + форма ───────── */
.pg .sec--form{position:relative;background:radial-gradient(60% 70% at 18% 40%,rgba(99,102,241,.16),transparent 70%)}
.pg .form-side h2{font-size:clamp(40px,5.2vw,76px);line-height:1.02}
.pg .form-side .form-lead{margin:0 0 18px;font-size:clamp(17px,1.4vw,20px);max-width:34ch;color:var(--text)}
.pg .form-side .form-next{font-size:16px;max-width:36ch}

/* Градиентный текст (background-clip:text) красится только внутри своего бокса. У блочных строк H1 и у слов-кусочков
   line-height ≈ 1, поэтому хвосты g, p, y, у, р, д выходили за бокс и срезались. Запас снизу компенсирован отрицательным отступом. */
.pg h1 b,.pg h1 .h1-acc,.pg .section h2 b,.pg .section h2 b .w{padding-bottom:.18em;margin-bottom:-.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.nw{white-space:nowrap}