/* Страница «Накрутка поведенческих факторов» (/nakrutka-povedencheskih-faktorov), 26.09.2026.
   Каркас в стиле шаблона Aior — классы pf-pos-* из positions.css, здесь только своё (префикс pf-promo).
   Виджеты аудитории (pf-audience-*), график (pf-chart), макет шагов (pf-process-board) и калькулятор (pf-price-calculator)
   используют старые стили из pf-index.css / pf-theme.css и здесь только подгоняются. */

/* Hero */
.pf-page .pf-promo-hero__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 8px 16px; border-radius: 99px; background: #ffffffb3; border: 1px solid #fff; color: #1f5fe8; font-size: 14px; font-weight: 500; box-shadow: 0 8px 20px -12px #2a4a7a44; }
.pf-promo-hero__pin { background: linear-gradient(145deg,#ff8fb1,#e0457b) !important; box-shadow: inset 0 3px 0 #ffffff55, 0 22px 30px -10px #e0457b88 !important; }
.pf-promo-hero .pf-pos-hero__torus { top: 400px; }
.pf-promo-hero .pf-pos-hero__pin { top: 480px; right: 7%; }
.pf-promo-hero__frame { padding-bottom: 12px; border-bottom: 1px solid #ffffffcc; border-radius: 26px; }
.pf-page .pf-promo-hero__video { display: block; width: 100%; height: auto; border-radius: 16px; background: #0c1830; box-shadow: 0 0 0 1px #10304a0d; }
.pf-promo-hero__float b { font-size: 34px !important; }
.pf-page.pf-pos .pf-promo-hero h1 { max-width: 1200px; font-size: clamp(34px,4.4vw,62px); }

/* Полоса «из чего состоит сессия» */
.pf-page .pf-promo-stack li { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 22px; }
.pf-page .pf-promo-stack li.is-blue { background-image: linear-gradient(95deg,#1f5fe8,#4f93ff); }
.pf-page .pf-promo-stack li.is-violet { background-image: linear-gradient(95deg,#6b55e0,#a855f7); }
.pf-page .pf-promo-stack li.is-orange { background-image: linear-gradient(95deg,#f07b1e,#ffb800); }
.pf-page .pf-promo-stack li.is-green { background-image: linear-gradient(95deg,#0b8f63,#12c7a0); }
.pf-page .pf-promo-stack li.is-sky { background-image: linear-gradient(95deg,#1f8fe8,#35c6e8); }

/* Кому подходит */
.pf-promo-aud { padding: 100px 0 110px; }
.pf-page.pf-pos .pf-promo-aud__title { margin-top: 18px; }
.pf-promo-aud__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 50px; }
.pf-promo-aud__card { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 6px; background: #fff; border: 1px solid #10304a12; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.pf-promo-aud__card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; opacity: .5; }
.pf-promo-aud__card.is-owner::before { background: radial-gradient(circle,#bcd4ff,transparent 70%); }
.pf-promo-aud__card.is-seo::before { background: radial-gradient(circle,#bff0dc,transparent 70%); }
.pf-promo-aud__card.is-agency::before { background: radial-gradient(circle,#e3d8ff,transparent 70%); }
.pf-promo-aud__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -30px #2a4a7a66; }
.pf-page .pf-promo-aud__tag { position: relative; align-self: flex-start; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.is-owner .pf-promo-aud__tag { background: #1f5fe81a; color: #1f5fe8; }
.is-seo .pf-promo-aud__tag { background: #0fb37a1a; color: #0b8f63; }
.is-agency .pf-promo-aud__tag { background: #7c5cf01a; color: #6b55e0; }
.pf-page .pf-promo-aud__card h3 { position: relative; margin: 18px 0 10px; color: #14304c; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.pf-page .pf-promo-aud__card > p { position: relative; margin: 0 0 22px; color: #4a5d74; font-size: 14px; line-height: 1.7; }
/* Мини-сцены в карточках (components/pf/audience-scene.tsx), мультяшный объём */
.pf-promo-aud__card .pfs { display: block; width: 100%; height: auto; margin: auto 0 20px; border-radius: 6px; overflow: hidden; }
.pfs * { transform-box: view-box; }
.pfs text { font-family: inherit; }
.pfs--rank .pfs-bg { fill: #eef4ff; } .pfs--tags .pfs-bg { fill: #eaf8f2; } .pfs--projects .pfs-bg { fill: #f2eeff; }
.pfs-floor { fill: #14304c; opacity: .05; }
.pfs-caption { font-size: 11px; fill: #4a5d74; }

/* rank: ступеньки и прыгун */
.pfs-step { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(.2); opacity: 0; transition: transform .6s cubic-bezier(.34,1.6,.6,1), opacity .3s; }
.pfs.is-in .pfs-step { transform: none; opacity: 1; }
.pfs-num { font-size: 15px; font-weight: 800; fill: #ffffffcc; }
.pfs-num.is-top { font-size: 19px; fill: #fff; }
.pfs-flag { opacity: 0; transition: opacity .3s 2.3s; }
.pfs.is-in .pfs-flag { opacity: 1; }
.pfs-flag-cloth { transform-origin: 293px 9px; animation: pfs-wave 1.2s ease-in-out infinite alternate; }
@keyframes pfs-wave { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(5deg) scaleX(1.04); } }
.pfs-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pfs.is-in .pfs-spark { animation: pfs-spark 1.1s cubic-bezier(.34,1.6,.6,1) forwards, pfs-twinkle 2.4s ease-in-out 1.2s infinite; }
@keyframes pfs-spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 60% { opacity: 1; transform: scale(1.4) rotate(40deg); } 100% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes pfs-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pfs-hopper { transform: translate(55px,100px); }
.pfs.is-in .pfs-hopper { animation: pfs-hop 2.6s cubic-bezier(.45,0,.3,1) .5s forwards; }
@keyframes pfs-hop {
  0% { transform: translate(55px,100px); }
  18% { transform: translate(90px,58px); } 28% { transform: translate(125px,76px); }
  38% { transform: translate(160px,34px); } 48% { transform: translate(195px,52px); }
  58% { transform: translate(230px,10px); } 68%,100% { transform: translate(265px,28px); }
}
.pfs-blob { transform-origin: 0 0; animation: pfs-breathe 2.4s ease-in-out infinite; }
.pfs.is-in .pfs-blob { animation: pfs-squash 2.6s linear .5s, pfs-breathe 2.4s ease-in-out 3.1s infinite; }
@keyframes pfs-squash {
  0% { transform: scale(1.15,.82); } 6% { transform: scale(.9,1.12); } 24% { transform: scale(1); } 28% { transform: scale(1.18,.8); }
  32% { transform: scale(.9,1.12); } 44% { transform: scale(1); } 48% { transform: scale(1.18,.8); } 52% { transform: scale(.9,1.12); }
  64% { transform: scale(1); } 68% { transform: scale(1.22,.78); } 74% { transform: scale(.94,1.08); } 80%,100% { transform: scale(1); }
}
@keyframes pfs-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.04,.96); } }

/* tags: пульт с тумблерами */
.pfs-label { font-size: 14px; font-weight: 600; fill: #14304c; }
.pfs-track { fill: #10304a1a; }
.pfs-track-on { opacity: 0; transition: opacity .3s; }
.pfs.is-in .pfs-track-on { opacity: 1; }
.pfs-knob { transition: transform .5s cubic-bezier(.34,1.8,.6,1); }
.pfs.is-in .pfs-knob { transform: translateX(22px); }
.pfs-lamp { fill: #c9d3e0; transition: fill .3s 1.6s, filter .3s 1.6s; }
.pfs.is-in .pfs-lamp { fill: #2ee6a6; filter: drop-shadow(0 0 5px #2ee6a6); animation: pfs-twinkle 1.6s ease-in-out 1.9s infinite; }

/* projects: веер карточек-сайтов и значок */
.pfs-site { opacity: 0; transform: translateY(70px) scale(.9); transition: transform .7s cubic-bezier(.34,1.5,.6,1), opacity .3s; }
.pfs.is-in .pfs-site { opacity: 1; transform: none; }
.pfs-domain { font-size: 11px; font-weight: 600; fill: #14304c; }
.pfs-badge { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.pfs.is-in .pfs-badge { animation: pfs-pop .7s cubic-bezier(.34,1.8,.6,1) .8s forwards, pfs-wiggle 3s ease-in-out 1.8s infinite; }
@keyframes pfs-pop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
@keyframes pfs-wiggle { 0%,80%,100% { transform: scale(1) rotate(0); } 85% { transform: scale(1.08) rotate(-8deg); } 90% { transform: scale(1.08) rotate(8deg); } 95% { transform: scale(1) rotate(-3deg); } }
.pfs-badge-num { font-size: 16px; font-weight: 800; fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pfs *, .pfs { animation: none !important; transition: none !important; }
  .pfs .pfs-hopper { transform: translate(265px,28px); }
  .pfs .pfs-badge, .pfs .pfs-spark { transform: none; opacity: 1; }
}
.pf-page .pf-promo-aud__link { display: inline-flex; align-items: center; gap: 6px; color: #1f5fe8; font-size: 14px; font-weight: 600; }
.pf-page .pf-promo-aud__link svg { transition: transform .2s; }
.pf-page .pf-promo-aud__link:hover svg { transform: translateX(3px); }

/* Шаги: кнопки-заголовки и активный шаг */
.pf-promo-steps li button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.pf-page .pf-promo-steps li span { color: #c5cfdc !important; transition: color .25s; }
.pf-page .pf-promo-steps li h3 { color: #6b7a8f !important; transition: color .25s; }
.pf-promo-steps li::before { background: #10304a1a !important; transition: background .25s; }
.pf-page .pf-promo-steps li p { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .25s; }
.pf-promo-steps li.is-active::before { background: linear-gradient(180deg,#1f5fe8,#4f93ff) !important; }
.pf-page .pf-promo-steps li.is-active span { color: #1f5fe8 !important; }
.pf-page .pf-promo-steps li.is-active h3 { color: #14304c !important; }
.pf-page .pf-promo-steps li.is-active p { max-height: 120px; opacity: 1; }
.pf-promo-steps li:not(.is-active) button:hover h3 { color: #1f5fe8 !important; }
.pf-promo-board { margin: 0 !important; max-width: none !important; animation: pos-fade .45s ease; }
.pf-promo-board .pf-pos-btn { margin: 18px 0 10px; }
.pf-promo-board dd.is-live { color: #0b8f63 !important; font-weight: 700; }

/* Тёмная полоса: график и мини-панель */
.pf-promo-dark__list { display: grid; gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; }
.pf-page .pf-promo-dark__list li { display: flex; align-items: center; gap: 12px; color: #dfe8f7; font-size: 15px; }
.pf-promo-dark__list svg { flex-shrink: 0; color: #12c7a0; }
.pf-promo-dark__cards { position: relative; padding-bottom: 60px; }
.pf-promo-chart { max-width: 460px; margin: 0 !important; border-radius: 20px !important; box-shadow: 0 30px 60px -20px #00000088 !important; transform: rotate(-2deg); }
.pf-promo-chart .pf-chip { background: #0fb37a1f !important; color: #0b8f63 !important; }
.pf-promo-dark__mini { position: absolute; right: 0; bottom: 0; width: 260px; padding: 20px; border-radius: 18px; background: linear-gradient(160deg,#16294a,#0c1830); border: 1px solid #ffffff1f; box-shadow: 0 30px 60px -20px #00000099; transform: rotate(3deg); animation: pos-float 6s ease-in-out infinite alternate; }
.pf-page .pf-promo-dark__mini .pf-eyebrow { display: block; margin-bottom: 12px; color: #8fa3c2; font-size: 11px; letter-spacing: .1em; }
.pf-promo-dark__mini div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #ffffff14; }
.pf-page .pf-promo-dark__mini span { color: #dfe8f7; font-size: 13px; }
.pf-page .pf-promo-dark__mini b { color: #12c7a0; font-size: 15px; }

/* Цены: пробный период, переключатель периода, карточки */
.pf-promo-trial { display: flex; align-items: center; gap: 20px; margin-top: 44px; padding: 24px 28px; border-radius: 22px; background: linear-gradient(120deg,#1f5fe8,#4f93ff); color: #fff; box-shadow: 0 24px 50px -30px #1f5fe8aa; }
/* Иконка подарка: тёплый градиент на синем фоне, пульсирующее свечение, покачивание и пробегающий блик (03.10.2026) */
.pf-promo-trial__icon { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(145deg,#ffd166 0%,#ff9f43 45%,#ff5c8a 100%); box-shadow: inset 0 2px 0 #ffffff66, 0 0 0 0 #ffc24b99; animation: promo-gift-glow 2.4s ease-in-out infinite; }
.pf-promo-trial__icon svg { position: relative; z-index: 1; filter: drop-shadow(0 2px 3px #b2410f66); animation: promo-gift-wiggle 2.4s ease-in-out infinite; transform-origin: 50% 70%; }
.pf-promo-trial__icon::after { content: ""; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg,transparent,#ffffffb3,transparent); transform: skewX(-20deg); animation: promo-gift-shine 2.4s ease-in-out infinite; }
@keyframes promo-gift-glow {
  0%, 100% { box-shadow: inset 0 2px 0 #ffffff66, 0 0 0 0 #ffc24b99, 0 8px 18px -6px #ff5c8a88; }
  50% { box-shadow: inset 0 2px 0 #ffffff66, 0 0 0 10px #ffc24b00, 0 10px 26px -4px #ff9f43cc; }
}
@keyframes promo-gift-wiggle {
  0%, 55%, 100% { transform: rotate(0) scale(1); }
  62% { transform: rotate(-12deg) scale(1.12); }
  70% { transform: rotate(10deg) scale(1.12); }
  78% { transform: rotate(-6deg) scale(1.06); }
  86% { transform: rotate(0) scale(1); }
}
@keyframes promo-gift-shine { 0%, 40% { left: -60%; } 70%, 100% { left: 130%; } }
.pf-page .pf-promo-trial b { display: block; color: #fff; font-size: 19px; font-weight: 600; }
.pf-page .pf-promo-trial p { margin: 4px 0 0; color: #e6efff; font-size: 14px; line-height: 1.6; }
.pf-promo-trial .pf-pos-btn { flex-shrink: 0; margin-left: auto; }
.pf-promo-periods { display: flex; width: max-content; max-width: 100%; margin: 36px auto 0; padding: 5px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #1f5fe81f, 0 10px 26px -18px #2a4a7a66; }
.pf-page .pf-promo-periods button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 99px; background: transparent; color: #14304c; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.pf-page .pf-promo-periods button em { padding: 2px 7px; border-radius: 99px; background: #0fb37a1f; color: #0b8f63; font-size: 11px; font-style: normal; }
.pf-page .pf-promo-periods button.is-active { background: linear-gradient(120deg,#1f5fe8,#4f93ff); color: #fff; }
.pf-page .pf-promo-periods button.is-active em { background: #ffffff33; color: #fff; }
.pf-page .pf-promo-billing { margin: 14px 0 0; text-align: center; color: #6b7a8f; font-size: 13px; }
.pf-promo-pricing .pf-pos-pricing__grid { margin-top: 30px; }
.pf-page .pf-promo-plan-badge { display: inline-block; margin: 12px 0 0; padding: 4px 10px; border-radius: 99px; background: #1f5fe814; color: #1f5fe8; font-size: 11px; font-weight: 600; }
.pf-page .pf-promo-plan-billing { margin-top: 10px !important; color: #8a9aae !important; font-size: 12px !important; }
.pf-promo-calc { margin-top: 30px !important; border-radius: 22px !important; }

@media (max-width: 991px) {
  .pf-promo-aud__grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .pf-promo-dark__cards { padding-bottom: 0; }
  .pf-promo-dark__mini { position: relative; width: auto; margin-top: 16px; transform: none; animation: none; }
  .pf-promo-chart { transform: none; max-width: none; }
  .pf-promo-trial { flex-direction: column; align-items: flex-start; }
  .pf-promo-trial .pf-pos-btn { margin-left: 0; }
}
@media (max-width: 575px) {
  .pf-page .pf-promo-stack li { font-size: 17px !important; }
  .pf-page .pf-promo-periods button { padding: 10px 12px; font-size: 13px; }
  .pf-promo-aud__card { padding: 22px; }
  .pf-promo-trial { padding: 20px; }
  .pf-promo-trial .pf-pos-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-promo-dark__mini, .pf-promo-board, .pf-promo-trial__icon, .pf-promo-trial__icon svg, .pf-promo-trial__icon::after { animation: none !important; }
}