/* ============================================================
   „Уебсайтове“ (elements/web): видът и движението на секциите.
   Образец: site/src/styles/webhero.css, web.css и websell.css в прототипа.
   Подредбата на страницата и нещата, които Пламен може да сменя (въздух, фонове),
   са в CSS на страницата (WPBakery → Page settings → Custom CSS).
   Цветът на стаята е var(--room) (циан #2AC4EA на бизнес страниците).
   ============================================================ */

/* ---------- общо ---------- */
.pfx .wx-dot { color: var(--room, #2AC4EA); font-weight: 800; }
.pfx .wx-h2 { font-size: clamp(48px, 6.6vw, 112px); line-height: .96; letter-spacing: -.05em; font-weight: 200; }
.pfx .wx-h2 b { font-weight: 800; }
.pfx .wx-muted { margin-top: 22px; max-width: 440px; color: rgba(237, 239, 241, .62); }
.pfx .wx-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pfx .wx-mag { display: inline-block; }
.pfx .wx-at::before { content: '@'; }
.pfx .wx-spark { position: relative; }
.wx-spark-cv { position: absolute; z-index: 5; pointer-events: none; }
/* видеата се показват чак когато тръгнат (дотогава се вижда снимката под тях) */
.pfx .wx-v { opacity: 0; transition: opacity .6s; }
.pfx .wx-v.is-play { opacity: var(--o, 1); }
/* цветната линия горе: частта на стаята показва докъде сте стигнали */
.plabo-line i.on .wx-progress-b { display: block; height: 100%; background: color-mix(in srgb, var(--room, #2AC4EA) 55%, #000); transform-origin: left; transform: scaleX(0); }

/* ============================================================
   Хиро „чертеж → сайт“
   ============================================================ */
.pfx.wbh { position: relative; display: flex; align-items: center; min-height: 100svh; overflow: clip; background: #07080A; color: #EDEFF1; }
.pfx.wbh::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 62% 50%, rgba(7, 8, 10, 0) 45%, rgba(7, 8, 10, .9) 100%); }

/* мрежата от 12 колони зад всичко: линиите слизат отгоре при отваряне */
.pfx.wbh .wb-grid { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(12, 1fr); pointer-events: none; }
.pfx.wbh .wb-grid i { border-left: 1px solid rgba(255, 255, 255, .05); transform-origin: 50% 0; animation: wb-col 1.8s var(--ease-io) both; animation-delay: calc(var(--k) * 70ms); }
.pfx.wbh .wb-grid i:last-child { border-right: 1px solid rgba(255, 255, 255, .05); }
@keyframes wb-col { from { transform: scaleY(0); } }

.pfx.wbh .wb-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(36px, 4.4vw, 90px); padding-block: 104px 80px; }
.pfx.wbh .wb-copy { will-change: transform; }
.pfx.wbh .wb-label { color: var(--room, #2AC4EA); }
.pfx.wbh .wb-title { margin-top: 22px; font-size: clamp(50px, 5.6vw, 104px); line-height: .9; letter-spacing: -.05em; font-weight: 200; color: inherit; }
.pfx.wbh .wb-title .pvp-dot, .pfx.wbh .wb-title .wx-dot { font-variation-settings: 'wght' 900; font-weight: 900; }
.pfx.wbh .wb-sub { max-width: 440px; margin: 28px 0 34px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.6; color: rgba(237, 239, 241, .76); }
.pfx.wbh .wx-row .btn-ghost { color: #EDEFF1; }

/* прозорецът */
.pfx.wbh .wb-stage { position: relative; margin-right: calc(var(--pad, 24px) * -.5); will-change: transform; }
.pfx.wbh .wb-tilt { position: relative; will-change: transform; }
.pfx.wbh .wb-browser { display: block; color: inherit; border-radius: 14px; overflow: clip; background: #0A0D11; box-shadow: 0 90px 160px -70px rgba(42, 196, 234, .4), 0 0 0 1px rgba(255, 255, 255, .09); }
.pfx.wbh .wb-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; background: #14171B; }
.pfx.wbh .wb-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #2B3036; }
.pfx.wbh .wb-url { display: inline-flex; align-items: center; margin-left: 14px; padding: 4px 14px; min-width: 40%; border-radius: 999px; background: #0C0E11; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.pfx.wbh .wb-url i { width: 1px; height: 13px; margin-left: 2px; background: var(--room, #2AC4EA); animation: wb-caret 1s steps(1) infinite; }
@keyframes wb-caret { 50% { opacity: 0; } }

.pfx.wbh .wb-view { position: relative; aspect-ratio: 5 / 3; overflow: clip; background: #090C10; }

/* чертежът: линиите се изрисуват една след друга; при всяка смяна се изрисуват наново, по-бързо.
   --u пази дебелината на линиите еднаква, колкото и да е голям прозорецът (слага го web.js). */
.pfx.wbh .wb-plan { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pfx.wbh .wb-plan line, .pfx.wbh .wb-plan rect { fill: none; stroke: var(--room, #2AC4EA); stroke-width: calc(1.3 * var(--u, 1)); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; animation: wb-draw .9s var(--ease-io) both; animation-delay: calc(var(--i) * 55ms + 300ms); }
.pfx.wbh .wb-cols line { stroke-width: calc(1 * var(--u, 1)); opacity: .2; }
.pfx.wbh .wb-plan .wb-dim { opacity: .55; }
.pfx.wbh .wb-plan.is-re line, .pfx.wbh .wb-plan.is-re rect { animation-duration: .55s; animation-delay: calc(var(--i) * 16ms + 80ms); }
@keyframes wb-draw { to { stroke-dashoffset: 0; } }
.pfx.wbh .wb-notes text { fill: var(--room, #2AC4EA); font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: 0; animation: wb-note .6s ease both 1.5s; }
.pfx.wbh .wb-plan.is-re .wb-notes text { animation-delay: .55s; }
@keyframes wb-note { to { opacity: .8; } }

/* истинският сайт: „отпечатва се“ отгоре надолу и се прибира нагоре */
.pfx.wbh .wb-site { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
.pfx.wbh .wb-site > img, .pfx.wbh .wb-site > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.pfx.wbh .wb-site.is-on { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.6, 0, .25, 1); }
.pfx.wbh .wb-site.is-out { clip-path: inset(0 0 100% 0); transition: clip-path .8s cubic-bezier(.6, 0, .4, 1); }
html:not([data-js]) .pfx.wbh .wb-site.is-first { clip-path: none; }
.pfx.wbh .wb-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 2px; background: var(--room, #2AC4EA); box-shadow: 0 0 22px 3px rgba(42, 196, 234, .55); pointer-events: none; }
.pfx.wbh .wb-scan.s-site { animation: wb-down 1.1s cubic-bezier(.6, 0, .25, 1) both, wb-fade .4s 1.1s both; }
.pfx.wbh .wb-scan.s-out { animation: wb-up .8s cubic-bezier(.6, 0, .4, 1) both, wb-fade .3s .8s both; }
@keyframes wb-down { from { top: 0; } to { top: calc(100% - 2px); } }
@keyframes wb-up { from { top: calc(100% - 2px); } to { top: 0; } }
@keyframes wb-fade { to { opacity: 0; } }

/* лупата: под мишката сайтът изчезва и се вижда чертежът */
.pfx.wbh .wb-lens { position: absolute; left: -110px; top: -110px; z-index: 4; width: 220px; height: 220px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 196, 234, .9); opacity: 0; transition: opacity .35s; pointer-events: none; }
.pfx.wbh .wb-lens b { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: #07080A; font-size: 10px; line-height: 1.4; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--room, #2AC4EA); white-space: nowrap; }
.pfx.wbh .wb-view.is-lens .wb-lens { opacity: 1; }
.pfx.wbh .wb-view.is-lens .wb-site { -webkit-mask-image: radial-gradient(circle 110px at var(--mx) var(--my), transparent 98%, #000 100%); mask-image: radial-gradient(circle 110px at var(--mx) var(--my), transparent 98%, #000 100%); }

/* ъгли като при печат */
.pfx.wbh .wb-mark { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(42, 196, 234, .7); pointer-events: none; }
.pfx.wbh .wb-mark.tl { left: -16px; top: -16px; border-width: 1px 0 0 1px; }
.pfx.wbh .wb-mark.tr { right: -16px; top: -16px; border-width: 1px 1px 0 0; }
.pfx.wbh .wb-mark.bl { left: -16px; bottom: -16px; border-width: 0 0 1px 1px; }
.pfx.wbh .wb-mark.br { right: -16px; bottom: -16px; border-width: 0 1px 1px 0; }

/* подпис и линийки за проектите */
.pfx.wbh .wb-cap { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px 22px; margin-top: 34px; }
.pfx.wbh .wb-num { font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--room, #2AC4EA); white-space: nowrap; }
.pfx.wbh .wb-num b { font-weight: inherit; }
.pfx.wbh .wb-num i { font-style: normal; color: rgba(237, 239, 241, .38); }
.pfx.wbh .wb-name { display: block; animation: wb-name .7s var(--ease-out) both; }
.pfx.wbh .wb-name[hidden] { display: none; }
.pfx.wbh .wb-name b { display: block; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.pfx.wbh .wb-name span { font-size: 14px; color: rgba(237, 239, 241, .58); }
@keyframes wb-name { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.pfx.wbh .wb-more { white-space: nowrap; }
.pfx.wbh .wb-ticks { display: flex; gap: 8px; margin-top: 20px; }
.pfx.wbh .wb-ticks button { position: relative; flex: 1; height: 20px; min-height: 0; padding: 0; border-radius: 0 !important; /* Salient слага 4px на всички бутони */ }
.pfx.wbh .wb-ticks button::before, .pfx.wbh .wb-ticks i { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; }
.pfx.wbh .wb-ticks button::before { background: rgba(255, 255, 255, .14); transition: background-color .3s; }
.pfx.wbh .wb-ticks button:hover::before { background: rgba(255, 255, 255, .32); }
.pfx.wbh .wb-ticks i { background: var(--room, #2AC4EA); transform: scaleX(0); transform-origin: 0 50%; }
.pfx.wbh .wb-ticks .is-on i { transform: scaleX(1); }
.pfx.wbh .wb-ticks i.is-run { animation: wb-tick var(--t) linear both; }
@keyframes wb-tick { from { transform: scaleX(0); } }

/* линията „надолу“ */
.pfx.wbh .wb-scroll { position: absolute; left: 50%; bottom: 26px; z-index: 2; width: 1px; height: 64px; overflow: clip; background: rgba(255, 255, 255, .14); }
.pfx.wbh .wb-scroll i { position: absolute; inset: 0; background: var(--room, #2AC4EA); animation: wb-cue 2.4s var(--ease-io) infinite; }
@keyframes wb-cue { 0% { transform: translate3d(0, -100%, 0); } 60%, 100% { transform: translate3d(0, 100%, 0); } }

@media (max-width: 999px) {
  .pfx.wbh .wb-in { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 96px 72px; }
  .pfx.wbh .wb-stage { order: -1; width: min(100%, 680px); margin: 0 auto; }
  .pfx.wbh .wb-title { font-size: clamp(46px, 12vw, 88px); }
  .pfx.wbh::after { background: radial-gradient(ellipse 110% 80% at 50% 40%, rgba(7, 8, 10, 0) 50%, rgba(7, 8, 10, .85) 100%); }
  .pfx.wbh .wb-scroll { display: none; }
}
@media (max-width: 640px) {
  .pfx.wbh .wb-in { padding-block: 86px 56px; gap: 28px; }
  .pfx.wbh .wb-bar { height: 30px; padding: 0 12px; gap: 6px; }
  .pfx.wbh .wb-bar > i { width: 8px; height: 8px; }
  .pfx.wbh .wb-url { margin-left: 8px; padding: 3px 10px; font-size: 11px; }
  .pfx.wbh .wb-notes, .pfx.wbh .wb-mark { display: none; }
  .pfx.wbh .wb-cap { grid-template-columns: auto 1fr; margin-top: 18px; }
  .pfx.wbh .wb-more { grid-column: 2; justify-self: start; }
  .pfx.wbh .wb-ticks { margin-top: 12px; }
  .pfx.wbh .wb-name b { font-size: 19px; }
  .pfx.wbh .wb-name span { font-size: 13px; }
}

/* ============================================================
   Манифест
   ============================================================ */
.pfx.wxm { position: relative; overflow: clip; background: #07080A; color: #EDEFF1; }
.pfx.wxm .wxm-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.pfx.wxm.has-video::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7, 8, 10, .92), rgba(7, 8, 10, .55)); pointer-events: none; }
.pfx.wxm .wxm-in { position: relative; z-index: 2; }
.pfx.wxm .wxm-line { font-size: clamp(40px, 6.2vw, 106px); line-height: 1.06; letter-spacing: -.05em; font-weight: 200; will-change: opacity, filter, transform; }
.pfx.wxm .wxm-line b { font-weight: 800; }
.pfx.wxm .wxm-line:nth-child(2) { padding-left: 7vw; }
.pfx.wxm .wxm-line:nth-child(3) { padding-left: 14vw; }
.pfx.wxm .wxm-line:nth-child(4) { padding-left: 21vw; }
@media (max-width: 900px) {
  .pfx.wxm .wxm-line:nth-child(2) { padding-left: 4vw; }
  .pfx.wxm .wxm-line:nth-child(3) { padding-left: 8vw; }
  .pfx.wxm .wxm-line:nth-child(4) { padding-left: 12vw; }
}

/* ============================================================
   „Защо с мен“ (три обещания)
   ============================================================ */
.pfx.wso { background: #fff; color: var(--ink, #16181B); }
.pfx .ws-head { display: grid; gap: 18px; justify-items: start; }
.pfx .ws-h2 { font-size: clamp(42px, 6vw, 108px); line-height: .96; letter-spacing: -.055em; font-weight: 200; }
.pfx .ws-h2 b { font-weight: 800; }
.pfx.wso .ws-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(48px, 8vh, 90px); }
.pfx.wso .ws-card { position: relative; display: grid; gap: 14px; align-content: start; min-height: 360px; padding: clamp(26px, 2.8vw, 42px); background: #F4F7F8; overflow: clip; transition: background-color .6s var(--ease), color .6s; }
.pfx.wso .ws-card:hover { background: #07080A; color: #EDEFF1; }
.pfx.wso .ws-card h3 { margin-top: auto; font-size: clamp(28px, 2.6vw, 42px); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; }
.pfx.wso .ws-card p { line-height: 1.65; color: var(--muted, #5C6166); transition: color .6s; }
.pfx.wso .ws-card:hover p { color: rgba(237, 239, 241, .7); }

/* бързо: лента, която се пълни за секунда и половина */
.pfx.wso .ws-fast { display: grid; gap: 10px; }
.pfx.wso .ws-fast i { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(42, 196, 234, .18); overflow: clip; }
.pfx.wso .ws-fast i::after { content: ''; position: absolute; inset: 0; background: var(--room, #2AC4EA); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.7, 0, .2, 1); }
.pfx.wso .ws-fast.is-go i::after, html:not([data-js]) .pfx.wso .ws-fast i::after { transform: none; }
.pfx.wso .ws-fast b { font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--room, #2AC4EA); }
.pfx.wso .ws-fast .ws-done, .pfx.wso .ws-fast.is-done .ws-wait, html:not([data-js]) .pfx.wso .ws-fast .ws-wait { display: none; }
.pfx.wso .ws-fast.is-done .ws-done, html:not([data-js]) .pfx.wso .ws-fast .ws-done { display: block; }

/* запомнящо се: буквите натежават една след друга и се връщат */
.pfx.wso .ws-mem { display: flex; font-size: clamp(40px, 4vw, 64px); line-height: 1; letter-spacing: -.04em; }
.pfx.wso .ws-mem i { font-style: normal; font-weight: 200; animation: ws-w 3.6s var(--ease-io) infinite; animation-delay: calc(var(--k, 0) * 1s); }
@keyframes ws-w { 0%, 100% { font-weight: 200; } 30% { font-weight: 900; color: var(--room, #2AC4EA); } 60% { font-weight: 200; } }

/* цената: „цял екип“ е зачеркнато, остава „един автор“ */
.pfx.wso .ws-price { display: grid; gap: 4px; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15; letter-spacing: -.03em; }
.pfx.wso .ws-price s { font-weight: 200; opacity: .45; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--room, #2AC4EA); }
.pfx.wso .ws-price b { font-weight: 800; }

/* ============================================================
   „Какво получавате“ и „За кого“
   ============================================================ */
.pfx.wsi { background: #07080A; color: #EDEFF1; }
.pfx.wsi .label { color: var(--room, #2AC4EA); }
.pfx.wsi .ws-inc-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 7vw, 120px); }
.pfx.wsi .ws-inc-in > div:first-child { display: grid; gap: 18px; align-content: start; justify-items: start; }
.pfx.wsi .ws-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; width: 100%; margin-top: 22px; }
.pfx.wsi .ws-list li { display: flex; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid rgba(237, 239, 241, .12); font-size: 17px; line-height: 1.45; }
.pfx.wsi .ws-list i { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--room, #2AC4EA); transform: translateY(-1px); }
.pfx.wsi .ws-for { display: grid; gap: 4px; align-content: start; }
.pfx.wsi .ws-for .label { justify-self: start; }
.pfx.wsi .ws-for-it { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; padding: 20px 0; border-bottom: 1px solid rgba(237, 239, 241, .12); }
.pfx.wsi .ws-for-it span { grid-row: span 2; font-size: 12px; font-weight: 700; color: var(--room, #2AC4EA); padding-top: 9px; }
.pfx.wsi .ws-for-it b { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.pfx.wsi .ws-for-it em { font-style: normal; color: rgba(237, 239, 241, .6); }
.pfx.wsi .ws-mid { margin-top: 30px; }
.pfx.wsi .ws-ghost { color: #EDEFF1; }
@media (max-width: 1000px) {
  .pfx.wso .ws-cards, .pfx.wsi .ws-inc-in { grid-template-columns: minmax(0, 1fr); }
  .pfx.wso .ws-card { min-height: 280px; }
}
@media (max-width: 600px) { .pfx.wsi .ws-list { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   „Избрани сайтове“: без скрипт (и при „намалено движение“) лентата се плъзга сама;
   със скрипт (.is-scrub) сцената е „лепкава“ и лентата върви хоризонтално със скрола.
   ============================================================ */
.pfx.wxs { position: relative; background: #07080A; color: #EDEFF1; }
.pfx.wxs .wxs-pin { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(42, 196, 234, .5) transparent; }
.pfx.wxs.is-scrub .wxs-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.pfx.wxs .wxs-track { display: flex; align-items: center; gap: clamp(64px, 7vw, 150px); width: max-content; padding: var(--space, 120px) var(--pad, 24px); }
.pfx.wxs.is-scrub .wxs-track { height: 100%; padding-block: 0; will-change: transform; }
/* min-width: min-content: най-дългата дума („следващият“) не излиза от кутията, затова краят на лентата не се реже */
.pfx.wxs .wxs-intro, .pfx.wxs .wxs-outro { flex: 0 0 auto; width: min(540px, 80vw); min-width: min-content; }
.pfx.wxs .wxs-intro .label { color: inherit; }
.pfx.wxs .wxs-intro .wx-h2 { margin-top: 18px; }
.pfx.wxs .wxs-outro .btn { margin-top: 36px; }
.pfx.wxs .wxs-site { flex: 0 0 auto; width: min(62vw, 980px); display: flex; flex-direction: column; gap: 28px; }
.pfx.wxs .wxs-tilt { will-change: transform; }
.pfx.wxs .wxs-shot { display: block; color: inherit; border-radius: 14px; overflow: clip; background: #111316; box-shadow: 0 70px 140px -70px rgba(42, 196, 234, .38), 0 0 0 1px rgba(255, 255, 255, .07); }
.pfx.wxs .wxs-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; background: #15181C; }
.pfx.wxs .wxs-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2B3036; }
.pfx.wxs .wxs-bar span { margin-left: 14px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfx.wxs .wxs-img { position: relative; aspect-ratio: 16 / 9.2; overflow: clip; background: #111316; }
/* по-широко от рамката: снимката се движи леко срещу посоката (паралакс) */
.pfx.wxs .wxs-media { position: absolute; top: 0; bottom: 0; left: -7%; width: 114%; }
.pfx.wxs .wxs-media > img, .pfx.wxs .wxs-media > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pfx.wxs .wxs-swipe { display: inline-flex; margin-top: 30px; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--room, #2AC4EA); animation: wxs-nudge 2.4s var(--ease-io) infinite; }
.pfx.wxs .wxs-swipe .is-touch { display: none; }
@media (hover: none) { .pfx.wxs .wxs-swipe .is-fine { display: none; } .pfx.wxs .wxs-swipe .is-touch { display: inline; } }
@keyframes wxs-nudge { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(10px, 0, 0); } }
.pfx.wxs .wxs-cap { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px 24px; }
.pfx.wxs .wxs-num { font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--room, #2AC4EA); }
.pfx.wxs .wxs-cap h3 { font-size: clamp(30px, 3.2vw, 54px); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.pfx.wxs .wxs-cap p { grid-column: 2; color: rgba(237, 239, 241, .6); }
.pfx.wxs .wxs-cap .link { grid-column: 3; grid-row: 1; white-space: nowrap; }
.pfx.wxs .wxs-progress { display: none; position: absolute; left: var(--pad, 24px); right: var(--pad, 24px); bottom: 34px; height: 2px; background: rgba(255, 255, 255, .1); }
.pfx.wxs.is-scrub .wxs-progress { display: block; }
.pfx.wxs .wxs-progress i { display: block; height: 100%; background: var(--room, #2AC4EA); transform-origin: left; transform: scaleX(0); }
@media (max-width: 900px) {
  .pfx.wxs .wxs-track { gap: 44px; }
  .pfx.wxs .wxs-site { width: 82vw; gap: 20px; }
  .pfx.wxs .wxs-intro, .pfx.wxs .wxs-outro { width: 78vw; }
  .pfx.wxs .wxs-progress { bottom: 22px; }
}
@media (max-width: 700px) {
  .pfx.wxs .wxs-cap { grid-template-columns: auto 1fr; gap: 4px 14px; }
  .pfx.wxs .wxs-cap h3 { font-size: 30px; }
  .pfx.wxs .wxs-cap p { font-size: 14px; }
  .pfx.wxs .wxs-cap .link { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

/* ============================================================
   „Процес“
   ============================================================ */
.pfx.wxp { background: #F4F6F7; color: var(--ink, #16181B); }
.pfx.wxp .wxp-in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 6vw, 110px); }
.pfx.wxp .wxp-sticky { position: sticky; top: 150px; display: grid; gap: 22px; justify-items: start; }
.pfx.wxp .wxp-text { color: var(--muted, #5C6166); }
.pfx.wxp .wxp-steps-w { position: relative; padding-left: 64px; }
.pfx.wxp .wxp-line { position: absolute; left: 15px; top: 10px; bottom: 60px; width: 2px; background: #DDE3E6; }
.pfx.wxp .wxp-line i { display: block; height: 100%; background: var(--room, #2AC4EA); transform-origin: top; }
.pfx.wxp.is-anim .wxp-line i { transform: scaleY(0); }
.pfx.wxp .wxp-step { position: relative; padding-bottom: clamp(56px, 9vh, 100px); transition: opacity .9s var(--ease); }
.pfx.wxp.is-anim .wxp-step { opacity: .26; }
.pfx.wxp.is-anim .wxp-step.is-lit { opacity: 1; }
.pfx.wxp .wxp-step::before { content: ''; position: absolute; left: -56px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--room, #2AC4EA); box-shadow: 0 0 0 7px rgba(42, 196, 234, .18); transition: background-color .5s, box-shadow .5s; }
.pfx.wxp.is-anim .wxp-step::before { background: #F4F6F7; box-shadow: inset 0 0 0 2px #C9D1D5; }
.pfx.wxp.is-anim .wxp-step.is-lit::before { background: var(--room, #2AC4EA); box-shadow: 0 0 0 7px rgba(42, 196, 234, .18); }
.pfx.wxp .wxp-num { font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--muted, #5C6166); }
.pfx.wxp .wxp-step h3 { margin-top: 6px; font-size: clamp(34px, 3.8vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -.045em; }
.pfx.wxp .wxp-step p { max-width: 46ch; margin-top: 12px; font-size: 18px; line-height: 1.6; color: var(--muted, #5C6166); }
@media (max-width: 900px) {
  .pfx.wxp .wxp-in { grid-template-columns: minmax(0, 1fr); }
  .pfx.wxp .wxp-sticky { position: static; }
}
@media (max-width: 640px) {
  .pfx.wxp .wxp-steps-w { padding-left: 44px; }
  .pfx.wxp .wxp-step::before { left: -36px; }
  .pfx.wxp .wxp-line { left: 7px; }
}

/* ============================================================
   Числата
   ============================================================ */
.pfx.wxn { background: #F4F6F7; color: var(--ink, #16181B); }
.pfx.wxn .wxn-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); }
.pfx.wxn .wxn-stat { padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.pfx.wxn .wxn-stat b { display: block; font-size: clamp(64px, 8vw, 128px); line-height: .9; font-weight: 800; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pfx.wxn .wxn-stat > span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted, #5C6166); max-width: 18ch; }
.pfx.wxn .wxn-tea { margin-top: 30px; font-size: clamp(22px, 2vw, 30px); line-height: 1.4; font-weight: 200; font-style: italic; color: var(--muted, #5C6166); }

/* ============================================================
   Финал
   ============================================================ */
.pfx.wxf { position: relative; overflow: clip; background: #07080A; color: #EDEFF1; }
.pfx.wxf .wxf-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.pfx.wxf::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #07080A, rgba(7, 8, 10, .35) 40%, rgba(7, 8, 10, .6)); pointer-events: none; }
.pfx.wxf .wxf-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.pfx.wxf .wxf-wink { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; font-weight: 200; font-style: italic; color: rgba(237, 239, 241, .6); }
.pfx.wxf .wxf-title { margin-top: 26px; font-size: clamp(54px, 9vw, 158px); line-height: .92; letter-spacing: -.055em; font-weight: 200; }
.pfx.wxf .wxf-title b { font-weight: 800; }
.pfx.wxf .wxf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 84px); margin-top: 60px; }
.pfx.wxf .wxf-btn { display: grid; place-items: center; width: clamp(160px, 15vw, 224px); aspect-ratio: 1; border-radius: 50%; background: var(--room, #2AC4EA); color: var(--room-ink, #0B2530); font-size: 18px; line-height: 1.2; font-weight: 800; text-align: center; transition: transform .6s var(--ease-out), box-shadow .6s; }
.pfx.wxf .wxf-btn:hover { color: var(--room-ink, #0B2530); transform: scale(1.06); box-shadow: 0 30px 80px -20px rgba(42, 196, 234, .6); }
.pfx.wxf .wxf-contacts { display: flex; flex-direction: column; gap: 8px; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; font-weight: 200; letter-spacing: -.02em; }
.pfx.wxf .wxf-contacts a { transition: color .3s; }
.pfx.wxf .wxf-contacts a:first-child { font-weight: 800; }
.pfx.wxf .wxf-contacts a:hover { color: var(--room, #2AC4EA); }
@media (max-width: 640px) { .pfx.wxf .wxf-cta { gap: 30px; } }

/* ---------- намалено движение ---------- */
@media (prefers-reduced-motion: reduce) {
  .pfx.wbh .wb-grid i, .pfx.wbh .wb-plan line, .pfx.wbh .wb-plan rect, .pfx.wbh .wb-notes text, .pfx.wbh .wb-url i, .pfx.wbh .wb-scroll i { animation: none; stroke-dashoffset: 0; }
  .pfx.wbh .wb-notes text { opacity: .8; }
  .pfx.wbh .wb-site.is-on, .pfx.wbh .wb-site.is-out { transition: none; }
  .pfx.wbh .wb-name { animation: none; }
  .pfx.wso .ws-mem i, .pfx.wxs .wxs-swipe { animation: none; }
}