/* ==========================================================================
   Началната страница: лупата, пътят на клиента, сляпата проба, местата.
   Сглобява се от build_nachalna.py; поведението е в assets/js/nachalna.js.
   ========================================================================== */

/* ---------- 1. герой: целият екран е витрината на една фирма ---------- */
.xh {
  --pt: clamp(118px, 15vh, 160px); --pb: clamp(120px, 16vh, 170px);
  --cf: clamp(10px, .86vw, 14px);
  position: relative; z-index: 3; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pt) 0 var(--pb); overflow: hidden; touch-action: pan-y;
}
/* над героя курсорът-око се свива до малката точка: лупата е „погледът“, точката е мишката */
html.lv-on .cur-eye .scaler { transform: scale(.42) !important; }
html.lv-on .cur-eye .almond, html.lv-on .cur-eye .inner > :not(.iris) { opacity: 0 !important; }

/* текстът в средата */
.xh-copy { position: relative; z-index: 2; text-align: center; max-width: 920px; }
.xh h1, .xh .xh-h1 { font-size: clamp(40px, 4.7vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -.034em; margin: 0 auto 28px; text-wrap: balance; }
.xh h1 em, .xh .xh-h1 em { font-style: normal; color: var(--forest); }
.xh .sub { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--grey-d); max-width: 600px; margin: 0 auto 32px; }
.xh .hero-ctas { justify-content: center; }
.nh-l { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.nh-l > span { display: inline-block; animation: nhUp 1.1s cubic-bezier(.2, .8, .2, 1) both; }
em.nh-l > span { animation-delay: .14s; }
.nh-in { animation: nhRise 1s cubic-bezier(.2, .8, .2, 1) both; }
.xh .sub.nh-in { animation-delay: .38s; }
.xh .hero-ctas.nh-in { animation-delay: .5s; }
.xh .hero-note.nh-in { animation-delay: .6s; }
@keyframes nhUp { from { transform: translateY(108%); } to { transform: none; } }
@keyframes nhFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nhRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* двата слоя на света */
.xh-world { position: absolute; inset: 0; pointer-events: none; }
.xh-surf { z-index: 1; }
.xh-xray {
  z-index: 3; display: flex; align-items: center; justify-content: center; padding: var(--pt) 0 var(--pb);
  clip-path: circle(0 at 50% 50%); will-change: clip-path; color: rgba(247, 245, 242, .62);
}
.xh-bg { position: absolute; inset: 0; }
.xh-surf .xh-bg {
  background: radial-gradient(rgba(26, 26, 26, .085) 1px, transparent 1.4px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 48%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 48%, #000 30%, transparent 100%);
}
.xh-xray .xh-bg {
  background:
    linear-gradient(rgba(127, 184, 159, .075) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(127, 184, 159, .075) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(90% 90% at 50% 45%, #0F3A2A 0%, #0A2419 55%, #06150E 100%);
}

/* парчетата: карти и 3D предмети. Отместването (мишка и превъртане) е общо за двата слоя */
.xc, .xo {
  position: absolute; font-size: var(--cf); line-height: 1.3;
  translate: calc(var(--px, 0) * var(--d, 1) * -26px + var(--sy, 0) * var(--d, 1) * var(--dir, 0) * var(--sk, .32) * 1px)
             calc(var(--py, 0) * var(--d, 1) * -18px - var(--sy, 0) * var(--d, 1) * .22px);
  animation: xhIn 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--in, .4s);
}
@keyframes xhIn { from { opacity: 0; transform: translateY(46px) scale(.9); } to { opacity: 1; transform: none; } }
.xc { border-radius: 1.1em; }
.xh-surf .xc { background: #fff; border: 1px solid rgba(26, 26, 26, .07); box-shadow: 0 1.8em 3.4em -1.5em rgba(26, 26, 26, .32), 0 .2em .5em rgba(26, 26, 26, .05); }
.xo img { display: block; width: 100%; height: auto; animation: xhBob 7s ease-in-out infinite; }
.xo-phone img { animation-delay: -2.4s; }
.xo-lamp img { animation-delay: -4.6s; }
.xo-pin img { animation-delay: -1.2s; animation-duration: 6s; }
@keyframes xhBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }

.xc-google { left: 3%; top: 17%; width: 21em; padding: 1.05em 1.2em 1.15em; rotate: -5deg; --dir: -1; --in: .45s; }
.xc-map { right: 3%; top: 15%; width: 17.5em; overflow: hidden; rotate: 4deg; --dir: 1; --in: .55s; }
.xc-site { left: 2.5%; bottom: 8%; width: 22.5em; overflow: hidden; rotate: 3deg; --dir: -1; --in: .65s; }
.xo-shop { right: .5%; bottom: 1%; width: clamp(220px, 21vw, 340px); --dir: 1; --in: .75s; }
.xo-phone { left: 4.5%; top: 47%; width: clamp(110px, 9vw, 160px); --dir: -1; --in: .85s; }
.xo-lamp { right: 5%; top: 49%; width: clamp(100px, 8vw, 140px); --dir: 1; --in: .9s; }
.xo-pin { left: 23%; top: 9%; width: clamp(84px, 6.5vw, 116px); --dir: -1; --in: .95s; }

/* съдържанието на картите */
.lvg-u { display: flex; align-items: center; gap: .55em; font-size: .86em; color: var(--grey); margin-bottom: .4em; }
.lvg-u i { width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 .3em #fff, inset 0 0 0 1em var(--forest); flex: none; }
.lvg-t { font-size: 1.28em; font-weight: 700; color: var(--forest); margin-bottom: .3em; letter-spacing: -.005em; }
.lvg-d { font-size: .9em; color: var(--grey-d); line-height: 1.4; }
.lvm-geo { position: relative; height: 5.4em; background: #E9EFE6; }
.lvm-geo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lvm-st { stroke: #fff; stroke-width: 7; fill: none; }
.lvm-st2 { stroke-width: 5; }
.lvm-blk { fill: #D6E2D3; }
.lvm-rt, .lvm-door { opacity: 0; }
.lvm-pin { position: absolute; left: 59.5%; top: 22%; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--signal); box-shadow: 0 .25em .5em rgba(0, 0, 0, .2); }
.lvm-pin::after { content: ""; position: absolute; inset: .36em; border-radius: 50%; background: #fff; }
.lvm-body { position: relative; display: flex; flex-direction: column; gap: .28em; padding: .8em 1em 1em; font-size: .92em; }
.lvm-body b { font-size: 1.12em; }
.lvm-s, .lvm-r { color: var(--grey-d); }
.lvm-stars { color: var(--zlato-t); letter-spacing: .06em; }
.lvm-s em { font-style: normal; color: var(--grey); }
.lvm-ok { color: var(--forest); font-weight: 700; }
.lvm-tel { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lvs-bar { display: flex; align-items: center; gap: .38em; padding: .6em .85em; background: #F1EEE8; font-size: .72em; color: var(--grey); }
.lvs-bar i { width: .75em; height: .75em; border-radius: 50%; background: #DAD5CC; }
.lvs-bar span { margin-left: .6em; padding: .15em .8em; border-radius: 99px; background: #fff; }
.lvs-hero { position: relative; padding: 1.3em 1.25em 1.35em; background: linear-gradient(135deg, #0B5A3B 0%, #003B25 100%); color: #fff; }
.lvs-h { font-size: 1.5em; font-weight: 800; letter-spacing: -.01em; margin-bottom: .25em; }
.lvs-p { font-size: .88em; opacity: .8; margin-bottom: .9em; line-height: 1.35; }
.lvs-btn { display: inline-block; padding: .5em 1.05em; border-radius: 99px; background: var(--paper); color: var(--forest); font-weight: 800; font-size: .82em; }
.lvs-sv { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; padding: .85em 1.25em .2em; }
.lvs-sv > span:not(.lv-f) { display: flex; flex-direction: column; gap: .2em; padding: .6em .7em; border-radius: .6em; background: #F4F1EB; font-size: .78em; font-weight: 700; color: var(--ink); }
.lvs-sv small { font-size: .88em; font-weight: 400; color: var(--grey); }
.lvs-foot { position: relative; display: flex; gap: 1.1em; padding: .75em 1.25em .85em; font-size: .8em; color: var(--grey-d); font-variant-numeric: tabular-nums; }
.lvs-noadr { color: var(--grey); }
.lvd-sign { position: absolute; left: 5%; top: 44%; display: flex; flex-direction: column; padding: .5em .75em .55em; border-radius: .6em; background: #fff; border: 1px solid rgba(26, 26, 26, .1); box-shadow: 0 .8em 1.6em -.7em rgba(26, 26, 26, .35); font-size: .9em; color: var(--grey); line-height: 1.25; rotate: -4deg; transform-origin: 50% -1em; animation: lvSway 7s ease-in-out infinite; }
.lvd-sign b { font-size: 1.28em; color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes lvSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } }

/* ---------- рентгенът: същият свят, погледнат отвътре ---------- */
.xh-xray .xc { background: rgba(127, 184, 159, .05); border: 1px dashed rgba(127, 184, 159, .45); }
.xh-xray .lvg-t, .xh-xray .lvm-body b, .xh-xray .lvd-sign b { color: rgba(247, 245, 242, .92); }
.xh-xray .lvg-u, .xh-xray .lvg-d, .xh-xray .lvm-s, .xh-xray .lvm-r, .xh-xray .lvs-foot, .xh-xray .lvm-s em, .xh-xray .lvs-noadr { color: rgba(247, 245, 242, .58); }
.xh-xray .lvg-u i { box-shadow: inset 0 0 0 .3em #0A2419, inset 0 0 0 1em rgba(127, 184, 159, .6); background: none; }
.xh-xray .lvm-ok { color: var(--forest-l); }
.xh-xray .lvm-stars { color: rgba(212, 186, 116, .75); }
.xh-xray .lvm-geo { background: rgba(127, 184, 159, .08); }
.xh-xray .lvm-st { stroke: rgba(127, 184, 159, .28); }
.xh-xray .lvm-blk { fill: rgba(127, 184, 159, .14); }
.xh-xray .lvm-rt { opacity: 1; fill: none; stroke: #FF8A80; stroke-width: 1.6; stroke-dasharray: 3 3.5; stroke-linecap: round; }
.xh-xray .lvm-door { opacity: 1; fill: #FF8A80; }
.xh-xray .lvm-pin { background: #FF6B61; box-shadow: 0 0 1em rgba(255, 90, 80, .6); }
.xh-xray .lvm-pin::after { background: #0A2419; }
.xh-xray .lvs-bar { background: rgba(127, 184, 159, .09); color: rgba(247, 245, 242, .5); }
.xh-xray .lvs-bar i { background: rgba(127, 184, 159, .3); }
.xh-xray .lvs-bar span { background: rgba(127, 184, 159, .12); }
.xh-xray .lvs-hero { background: rgba(127, 184, 159, .07); }
.xh-xray .lvs-sv > span:not(.lv-f) { background: rgba(127, 184, 159, .08); color: rgba(247, 245, 242, .85); }
.xh-xray .lvs-btn { background: none; color: rgba(247, 245, 242, .85); box-shadow: inset 0 0 0 1px rgba(247, 245, 242, .45); }
.xh-xray .xo img { filter: invert(1) hue-rotate(180deg) saturate(.6) brightness(.9); opacity: .85; }
.xh-xray .lvd-sign { background: rgba(10, 36, 25, .92); border: 1px dashed rgba(127, 184, 159, .5); color: rgba(247, 245, 242, .6); box-shadow: none; }
.xh-xray .lv-bad { color: #FF8A80; text-decoration: underline wavy rgba(255, 107, 97, .85); text-decoration-thickness: 1px; text-underline-offset: .28em; text-shadow: 0 0 .9em rgba(255, 90, 80, .55); }
.xh-xray .lvs-noadr::after { content: "няма"; margin-left: .3em; font-style: italic; }

/* текстът в рентгена: „наред“ се задрасква */
.xh-copy-x { color: rgba(247, 245, 242, .94); }
.xh-copy-x .nh-l { overflow: visible; }
.xh-copy-x .nh-l > span { animation: none; }
.xh-copy-x .xh-h1 em { color: var(--forest-l); }
.xh-copy-x .sub { color: rgba(247, 245, 242, .55); }
.xh-copy-x .btn { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(247, 245, 242, .5); }
.xh-copy-x .link-arrow { color: var(--forest-l); }
.xh-copy-x .hero-note { color: rgba(247, 245, 242, .55); }
.xh-strike { position: relative; color: #FF8A80; text-shadow: 0 0 .5em rgba(255, 90, 80, .35); }
.xh-strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 52%; height: .085em; border-radius: 99px; background: #FF5A4F; rotate: -4deg; box-shadow: 0 0 .35em rgba(255, 90, 80, .8); }
.xh-note { position: absolute; left: 100%; top: -.05em; translate: .12em 0; rotate: -9deg; padding: .32em .75em .36em; border-radius: 99px; background: #C62828; color: #fff; font-size: .3em; font-weight: 800; letter-spacing: 0; white-space: nowrap; box-shadow: 0 .6em 1.4em -.3em rgba(198, 40, 40, .7); }

/* знаците: в рентгена жар с етикет; отвън празни, докато не ги откриете */
.lv-f { position: absolute; width: 0; height: 0; z-index: 2; }
.lv-f > i { position: absolute; left: -.5em; top: -.5em; width: 1em; height: 1em; border-radius: 50%; }
.xh-xray .lv-f > i { background: #FF5A4F; box-shadow: 0 0 0 .25em rgba(255, 90, 80, .25), 0 0 1.2em rgba(255, 90, 80, .9); }
.xh-xray .lv-f > i::after { content: ""; position: absolute; inset: -.2em; border-radius: 50%; border: 1px solid rgba(255, 120, 110, .8); animation: lvPing 1.8s ease-out infinite; }
@keyframes lvPing { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.lv-tag { position: absolute; bottom: 1em; left: 0; transform: translateX(-50%); white-space: nowrap; padding: .38em .8em .42em; border-radius: 99px; background: #C62828; color: #fff; font-size: max(.9em, 10.5px); font-weight: 800; letter-spacing: .01em; box-shadow: 0 .6em 1.4em -.3em rgba(198, 40, 40, .6); }
.xh-surf .lv-f > i { background: var(--signal); transform: scale(0); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease; box-shadow: 0 0 0 .3em rgba(198, 40, 40, .16); }
.xh-surf .lv-f.got > i { transform: scale(.72); opacity: 1; }
.lv-f[data-f="g"] { right: 2.2em; top: 3.2em; }
.lv-f[data-f="p"] { left: 59.5%; top: 22%; }
.lv-f[data-f="p"] .lv-tag { bottom: auto; top: 1.15em; left: auto; right: -2.2em; transform: none; }
.lv-f[data-f="t"] { left: 8.6em; bottom: 1.55em; }
.lv-f[data-f="c"] { left: 33%; top: .8em; }
.lv-f[data-f="a"] { left: 64%; top: 50%; }
.lv-f[data-f="v"] { left: 25%; top: 41%; }

/* лупата свети върху хартията, а в рентгена минава сканираща вълна */
.xh-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(calc(var(--lr, 120px) * 2.6) circle at var(--lx, 50%) var(--ly, 50%), rgba(212, 186, 116, .2), rgba(212, 186, 116, .06) 45%, transparent 70%); }
.xh.live .xh-glow { opacity: 1; }
/* мека вълна без ръб: иначе изглежда като разрез в лупата */
.xh-xray .xh-bg::after { content: ""; position: absolute; left: 0; right: 0; top: -24%; height: 24%; pointer-events: none;
  background: linear-gradient(transparent, rgba(127, 184, 159, .07) 38%, rgba(127, 184, 159, .13) 50%, rgba(127, 184, 159, .07) 62%, transparent); animation: xhScan 6s linear infinite; }
@keyframes xhScan { to { transform: translateY(520%); } }
.lv-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--zlato); opacity: 0; pointer-events: none; }
.xh.live .lv-pulse { animation: lvPulse 1.4s cubic-bezier(.2, .8, .2, 1) .1s 2 both; }
@keyframes lvPulse { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

/* самата лупа */
.lv-ring { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.xh.live .lv-ring { opacity: 1; }
.lv-glass { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--zlato); box-shadow: 0 0 0 8px rgba(212, 186, 116, .13), 0 26px 50px -10px rgba(6, 21, 14, .5), inset 0 0 30px rgba(212, 186, 116, .22); background: radial-gradient(60% 50% at 32% 24%, rgba(255, 255, 255, .16), transparent 70%); }
.lv-dash { position: absolute; inset: 10px; border-radius: 50%; border: 1.2px dashed rgba(212, 186, 116, .55); animation: lvSpin 30s linear infinite; }
.lv-handle { position: absolute; left: 50%; top: 50%; width: 16px; height: 36%; margin-left: -8px; border-radius: 99px; background: linear-gradient(90deg, #0B5A3B, #003B25); box-shadow: inset 0 0 0 2px var(--zlato), 0 10px 20px -6px rgba(0, 0, 0, .35); transform: rotate(-45deg) translateY(calc(var(--lr, 100px) * 1.04)); transform-origin: 50% 0; }
@keyframes lvSpin { to { transform: rotate(360deg); } }

/* таблото долу в средата */
.xh-hud { position: absolute; left: 50%; bottom: clamp(18px, 3.2vh, 34px); translate: -50% 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); animation: nhFade .8s 1.3s ease both; }
.xh-toast { margin: 0; max-width: min(480px, calc(100vw - 32px)); padding: 11px 18px 12px; border-radius: 16px; background: rgba(10, 36, 25, .94); color: var(--paper); font-size: 14.5px; line-height: 1.45; text-align: center; box-shadow: 0 16px 34px -14px rgba(6, 21, 14, .6); opacity: 0; translate: 0 8px; transition: opacity .35s ease, translate .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.xh-toast:empty { display: none; }
/* нощният край: идва сам, след като лупата мине през всичките шест */
.xh.done .lv-ring, .xh.done .xh-glow { opacity: 0; }
.xh.done .xh-toast { display: none; }
.xh-done { max-width: min(620px, calc(100vw - 32px)); padding: 18px 22px 20px; border-radius: 24px; background: rgba(10, 36, 25, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: rgba(247, 245, 242, .82); text-align: center; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(212, 186, 116, .28); animation: nhRise .7s cubic-bezier(.2, .8, .2, 1) both; }
.xh-done p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; }
.xh-done p b { color: var(--zlato); }
.xh-toast.on { opacity: 1; translate: 0 0; }

/* таблет и телефон: парчетата отиват горе и долу, текстът остава в средата */
@media (max-width: 1099px) {
  .xh { --pt: clamp(250px, 34vw, 330px); --pb: clamp(310px, 44vw, 400px); --cf: clamp(9px, 1.55vw, 12px); min-height: 0; align-items: flex-start; }
  .xh-xray { align-items: flex-start; }
  .xh-copy { max-width: 680px; }
  .xc-google { left: -1.5%; top: clamp(84px, 11vw, 110px); }
  .xc-map { right: -1.5%; top: clamp(96px, 13vw, 124px); }
  .xc-site { left: -1.5%; bottom: clamp(70px, 10vw, 100px); }
  .xo-shop { right: -3%; bottom: clamp(48px, 8vw, 80px); width: clamp(180px, 34vw, 300px); }
  .xo-phone, .xo-lamp, .xo-pin { display: none; }
}
@media (max-width: 720px) {
  .xh { --pt: 232px; --pb: 300px; --cf: 9.4px; --sk: .1; }
  .xh h1, .xh .xh-h1 { font-size: 38px; line-height: 1.03; letter-spacing: -.03em; margin-bottom: 20px; }
  .xh .sub { font-size: 16.5px; margin-bottom: 26px; }
  .xh .hero-ctas { flex-direction: column; gap: 14px; }
  .xh .hero-ctas .btn { width: 100%; }
  .xc-google { left: -9%; top: 86px; }
  .xc-map { right: -8%; top: 98px; }
  .xc-site { left: -8%; bottom: 74px; }
  .xo-shop { right: -8%; bottom: 60px; width: 180px; }
}

/* ---------- 2. пътят на клиента ---------- */
/* лентата с картата стои точно над пътя: без двоен отстъп между тях */
.kr-promo-sec { padding-bottom: clamp(8px, 2vw, 28px); }
.nj { padding-block: clamp(60px, 7vw, 110px); }
.nj .nj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.nj h2 em { font-style: normal; color: var(--forest); }
.nj-meta { display: none; }
.nj-track { position: relative; }
.nj-img { position: relative; }
.nj-img img { display: block; width: 100%; height: 100%; object-fit: contain; animation: njBob 6.5s ease-in-out infinite; }
.nj-st:nth-of-type(2n) .nj-img img { animation-delay: -2.2s; }
.nj-st:nth-of-type(3n) .nj-img img { animation-delay: -4.1s; }
@keyframes njBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5%); } }
.nj-n { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.nj-num { font-size: 13px; font-weight: 800; color: var(--grey); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.nj-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); background: var(--chip-g-bg); padding: 5px 10px; border-radius: 99px; }
.nj-st h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.015em; margin: 0 0 6px; }
.nj-big { font-size: clamp(40px, min(4.4vw, 7vh), 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--signal); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.nj-t { font-size: 15.5px; line-height: 1.5; color: var(--grey-d); margin: 0 0 10px; max-width: 34ch; }
.nj-a { display: inline-flex; gap: 7px; font-size: 14.5px; font-weight: 800; color: var(--forest); border-bottom: 1.5px solid transparent; padding-bottom: 1px; transition: border-color .2s, gap .2s; }
.nj-a:hover { border-color: var(--forest); gap: 11px; }
.nj-end h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; margin-bottom: 14px; }
.nj-end .nj-t { max-width: 40ch; font-size: 16.5px; }
.nj-nosite b { color: var(--ink); }
.nj-end-b { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 20px 0 16px; }
.nj-src { font-size: 12.5px; color: var(--grey); margin: 0; max-width: 40ch; }

/* вертикално (телефон, таблет и намалено движение): линия с напредъка вляво */
.nj:not(.nj-h) .nj-view { margin-top: 36px; }
.nj:not(.nj-h) .nj-track { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.nj:not(.nj-h) .nj-track::before, .nj:not(.nj-h) .nj-track::after { content: ""; position: absolute; left: calc(var(--pad) + 11px); top: 10px; bottom: 40px; width: 2px; border-radius: 2px; background: rgba(0, 84, 53, .14); }
.nj:not(.nj-h) .nj-track::after { background: linear-gradient(var(--forest-l), var(--forest) 60%, var(--zlato-t)); transform-origin: 50% 0; transform: scaleY(var(--nj-p, 0)); }
.nj:not(.nj-h) .nj-path, .nj:not(.nj-h) .nj-dot { display: none; }
.nj:not(.nj-h) .nj-st { position: relative; padding-left: 48px; margin-bottom: 44px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px 40px; align-items: center; }
.nj:not(.nj-h) .nj-st::before { content: ""; position: absolute; left: 5px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(0, 84, 53, .3); transition: background .4s, box-shadow .4s; }
.nj:not(.nj-h) .nj-st.seen::before { background: var(--forest); box-shadow: 0 0 0 5px rgba(0, 84, 53, .14); }
.nj:not(.nj-h) .nj-img { aspect-ratio: 1; }
.nj:not(.nj-h) .nj-end { display: block; margin-bottom: 0; }
.nj:not(.nj-h) .nj-end::before { top: 12px; margin-top: 0; }
@media (max-width: 720px) {
  .nj:not(.nj-h) .nj-view { margin-top: 26px; }
  .nj:not(.nj-h) .nj-track::before, .nj:not(.nj-h) .nj-track::after { left: calc(var(--pad) + 6px); }
  .nj:not(.nj-h) .nj-st { grid-template-columns: 1fr; padding-left: 30px; margin-bottom: 40px; gap: 0; }
  .nj:not(.nj-h) .nj-st::before { left: 0; top: 34%; }
  .nj:not(.nj-h) .nj-img { width: min(82%, 300px); margin: -6px auto -12px; }
  .nj-big { font-size: 48px; }
  .nj-t { font-size: 15.5px; }
}

/* хоризонтално (компютър): сцената спира и пътят минава пред очите */
.nj.nj-h { padding-block: 0; }
.nj-h .nj-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-top: clamp(92px, 12vh, 132px); }
.nj-h .nj-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-bottom: 20px; flex: none; }
.nj-layers { display: flex; gap: 6px; }
.nj-layers span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; color: var(--grey); box-shadow: inset 0 0 0 1px var(--hairline); transition: background .4s, color .4s, box-shadow .4s; }
.nj-layers span.on { background: var(--forest); color: var(--paper); box-shadow: inset 0 0 0 1px var(--forest); }
.nj-ctr { font-size: 13px; font-weight: 800; color: var(--grey); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.nj-ctr b { color: var(--ink); }
.nj-h .nj-view { position: relative; flex: 1; min-height: 0; }
.nj-h .nj-track { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; will-change: transform; padding-left: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))); padding-right: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))); }
.nj-h .nj-st { position: relative; z-index: 2; flex: 0 0 clamp(270px, 25vw, 360px); margin-right: clamp(36px, 5vw, 88px); transition: opacity .5s ease; }
.nj-h .nj-st:nth-of-type(odd) { translate: 0 -2.6vh; }
.nj-h .nj-st:nth-of-type(even) { translate: 0 2.6vh; }
.nj-h .nj-img { width: min(100%, 27vh, 280px); aspect-ratio: 1; margin-bottom: clamp(34px, 5vh, 46px); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
/* спирките напред са в сиво и се оцветяват, когато клиентът стигне до тях; текстът остава с пълен контраст */
.nj-img img { transition: filter .8s ease, opacity .8s ease; }
.nj.js .nj-st:not(.seen) .nj-img img { filter: grayscale(1); opacity: .5; }
/* числото на спирка, до която клиентът още не е стигнал, чака; появява се, когато стигне */
.nj-big { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.nj.js .nj-st:not(.seen) .nj-big { opacity: 0; transform: translateY(12px); }
.nj-h .nj-st.on .nj-img { transform: scale(1.06); }
.nj-h .nj-end { flex-basis: clamp(320px, 30vw, 440px); margin-right: 0; }
.nj-path { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.nj-p0 { fill: none; stroke: rgba(0, 84, 53, .2); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
.nj-p1 { fill: none; stroke: url(#nj-gr); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(212, 186, 116, .45)); }
.nj-dot { position: absolute; left: 0; top: 0; z-index: 3; width: 20px; height: 20px; margin: -10px 0 0 -10px; will-change: transform; }
.nj-dot i { position: absolute; inset: 0; border-radius: 50%; background: var(--forest); box-shadow: inset 0 0 0 3px var(--zlato), 0 0 0 6px rgba(212, 186, 116, .22), 0 0 24px rgba(212, 186, 116, .7); }
.nj-dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(212, 186, 116, .7); animation: lvPing 2.2s ease-out infinite; }

/* ---------- 3. сляпата проба ---------- */
.bp { margin: 34px 0 48px; }
.bp-head { margin-bottom: 20px; }
.bp-head .eyebrow { margin-bottom: 8px; }
.bp-q { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; margin: 0; color: var(--grey-d); max-width: 820px; }
.bp-q b { color: var(--ink); }
.bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bp-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left;
  padding: 22px 22px 18px; border-radius: var(--r-md); background: var(--white); color: var(--ink);
  border: 1px solid var(--hairline); font: inherit; cursor: pointer;
  box-shadow: 0 24px 48px -32px rgba(26, 26, 26, .35);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .3s ease, opacity .4s ease;
}
.bp-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(26, 26, 26, .4); border-color: rgba(0, 84, 53, .35); }
.bp-card:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.bp-top { display: flex; align-items: center; gap: 12px; }
.bp-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--forest); font-weight: 800; font-size: 15px; flex: none; }
.bp-name { position: relative; font-weight: 800; font-size: 16.5px; }
.bp-blur { filter: blur(5px); color: var(--grey-d); transition: filter .5s ease, opacity .4s ease; }
.bp-real { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s ease .1s; white-space: nowrap; }
.bp-r { font-size: 14.5px; color: var(--grey-d); }
.bp-r b { color: var(--ink); font-size: 16px; }
.bp-st { color: var(--zlato-t); letter-spacing: .05em; }
.bp-cnt { color: var(--grey); }
.bp-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.bp-rows > span { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
.bp-rows > span > span { color: var(--grey); }
.bp-rows b { font-weight: 700; text-align: right; transition: color .4s ease; }
.bp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; min-height: 36px; }
.bp-pick { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 99px; font-weight: 800; font-size: 14px; color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); transition: background .25s, color .25s; }
.bp-card:hover .bp-pick { background: var(--forest); color: var(--paper); }
.bp-score { font-size: 13px; font-weight: 800; color: var(--grey); opacity: 0; transition: opacity .4s ease .2s; }
/* след избора */
.bp.done .bp-card { cursor: default; transform: none; }
.bp.done .bp-blur { filter: blur(0); opacity: 0; }
.bp.done .bp-real { opacity: 1; }
.bp.done .bp-rows .da b { color: var(--forest); }
.bp.done .bp-rows .ne b { color: var(--signal); }
.bp.done .bp-rows .da b::before { content: "✓"; }
.bp.done .bp-rows .ne b::before { content: "✕"; }
/* отметките идват ред по ред */
.bp.done .bp-rows > span:nth-child(2) b { transition-delay: .12s; }
.bp.done .bp-rows > span:nth-child(3) b { transition-delay: .24s; }
.bp.done .bp-rows b::before { display: inline-block; margin-right: .3em; animation: bpTick .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.bp.done .bp-rows > span:nth-child(2) b::before { animation-delay: .12s; }
.bp.done .bp-rows > span:nth-child(3) b::before { animation-delay: .24s; }
@keyframes bpTick { from { transform: scale(0); } to { transform: scale(1); } }
.bp.done .bp-score { opacity: 1; }
.bp.done .bp-card:not([aria-pressed="true"]) { opacity: .62; box-shadow: none; }
.bp.done .bp-card[aria-pressed="true"] { border-color: var(--forest); box-shadow: 0 0 0 1.5px var(--forest), 0 30px 60px -30px rgba(0, 84, 53, .45); }
.bp.done .bp-card[aria-pressed="true"] .bp-pick { background: var(--forest); color: var(--paper); }
.bp.done .bp-card:not([aria-pressed="true"]) .bp-pick { visibility: hidden; }
.bp.done .bp-card[data-f="b"] .bp-r b { color: var(--signal); }
.bp-out { margin-top: 22px; padding: 22px 24px; border-radius: var(--r-md); background: var(--tint); animation: lvCap .6s ease both; }
.bp-o1 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.bp-o2 { font-size: 16px; line-height: 1.55; color: var(--grey-d); margin: 0 0 10px; max-width: 760px; }
.bp-o2 b { color: var(--ink); }
.bp-o3 { font-size: 14px; color: var(--grey); margin: 0 0 12px; max-width: 760px; }
.bp-again { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 800; font-size: 14.5px; color: var(--forest); cursor: pointer; border-bottom: 1.5px solid rgba(0, 84, 53, .3); }
.bp-again:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
@media (max-width: 900px) {
  .bp-grid { grid-template-columns: 1fr; gap: 12px; }
  .bp-card { padding: 18px 18px 16px; gap: 12px; }
}

/* ---------- 4. петте свободни места ---------- */
.deal-side .seats { display: inline-flex; align-items: center; gap: 12px; }
.seat-dots { display: inline-flex; gap: 6px; }
.seat-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--zlato); animation: seatGlow 2.8s ease-in-out infinite; }
.seat-dots i:nth-child(2) { animation-delay: .22s; }
.seat-dots i:nth-child(3) { animation-delay: .44s; }
.seat-dots i:nth-child(4) { animation-delay: .66s; }
.seat-dots i:nth-child(5) { animation-delay: .88s; }
@keyframes seatGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 186, 116, 0), 0 0 4px rgba(212, 186, 116, .4); } 45% { box-shadow: 0 0 0 4px rgba(212, 186, 116, .16), 0 0 14px rgba(212, 186, 116, .85); } }

/* ==========================================================================
   Движението по цялата страница: един език навсякъде
   ========================================================================== */

/* заглавията влизат дума по дума */
.wr .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wr .w > span { display: inline-block; transform: translateY(106%); }
.wr.in .w > span { animation: nhUp .95s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 42ms + 40ms); }

/* светлина, която следва мишката в картите */
.sp { position: relative; }
.sp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 84, 53, .09), transparent 62%); }
.sp.sp-d::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 186, 116, .16), transparent 60%); }
.sp:hover::after { opacity: 1; }
.tl { transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.btn { transition: transform .18s ease, box-shadow .18s ease, translate .45s cubic-bezier(.2, .8, .2, 1); }

/* ---------- числата и лентата с проверките ---------- */
.metric b { font-variant-numeric: tabular-nums; }
.mq { position: relative; display: grid; gap: 12px; margin: clamp(38px, 5vw, 62px) calc(50% - 50vw) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mq-t { display: flex; gap: 10px; width: max-content; will-change: transform; }
.mq-t span { padding: 11px 19px 12px; border-radius: 99px; font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--ink);
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--hairline), 0 8px 20px -16px rgba(26, 26, 26, .35); }
.mq-rev .mq-t span { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1.5px rgba(0, 84, 53, .22); }
.mq-t span:nth-child(5n + 2) { background: var(--forest); color: var(--paper); box-shadow: none; }
.mq-rev .mq-t span:nth-child(5n + 2) { background: var(--chip-g-bg); color: var(--forest); }
@media (max-width: 720px) { .mq-t span { font-size: 14px; padding: 10px 16px 11px; } }

/* ---------- проблемите: сцената има дълбочина и светлина минава при смяна ---------- */
.pb-stage { perspective: 1400px; }
.pb-stage .pb-panel { transform-style: preserve-3d; }
.pb-art { position: relative; overflow: hidden; }
.pb-art::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-14deg); }
.pb-panel.on .pb-art::after { animation: pbSweep 1s cubic-bezier(.3, .6, .2, 1) .08s both; }
@keyframes pbSweep { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }

/* ---------- докладът: ветрило от три страници ---------- */
.fan { position: relative; height: clamp(360px, 34vw, 500px); margin-top: 6px; }
.fan-p { position: absolute; left: 50%; top: 3%; width: 44%; margin: 0 0 0 -22%; transform-origin: 50% 115%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), translate .35s cubic-bezier(.2, .8, .2, 1); cursor: default; }
.fan-p img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: #fff; box-shadow: 0 34px 60px -30px rgba(26, 26, 26, .5), 0 2px 6px rgba(26, 26, 26, .06); }
.fan { --fs: 50%; }
.fan-l { transform: translateX(calc(var(--f, 0) * var(--fs) * -1)) rotate(calc(var(--f, 0) * -10deg)); }
.fan-r { transform: translateX(calc(var(--f, 0) * var(--fs))) rotate(calc(var(--f, 0) * 10deg)); }
.fan-c { z-index: 2; transform: translateY(calc(var(--f, 0) * -2%)); }
.fan-p:hover { z-index: 3; translate: 0 -14px; }
.fan-p figcaption { position: absolute; left: 50%; bottom: 16px; translate: -50% 6px; padding: 7px 13px; border-radius: 99px; background: rgba(26, 26, 26, .82); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; opacity: 0; transition: opacity .3s ease, translate .3s ease; }
.fan-p:hover figcaption { opacity: 1; translate: -50% 0; }
.fan-cap { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--grey); }
.hp-scores .vl { transition: stroke-dasharray 1.6s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 720px) { .fan { height: 290px; --fs: 34%; } .fan-p { width: 46%; margin-left: -23%; } }

/* ---------- таблицата се пълни ред по ред ---------- */
.us-mx.mx tbody tr { opacity: 0; }
.us-mx.mx.in tbody tr { animation: nhFade .6s ease both; animation-delay: calc(var(--i, 0) * 110ms); }
.us-mx.mx .us-c { display: inline-flex; }
.us-mx.mx.in .us-c { animation: mxPop .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * 110ms + var(--j, 0) * 80ms + 180ms); }
@keyframes mxPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.us-mx tbody tr { transition: transform .25s ease; }
.us-mx tbody tr:hover td { background: #FBFAF7; }

/* ---------- сделката: цената пада, фонът диша ---------- */
.deal { overflow: hidden; isolation: isolate; }
.deal::before { content: ""; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 22% 28%, rgba(127, 184, 159, .32), transparent 70%), radial-gradient(34% 42% at 78% 72%, rgba(212, 186, 116, .2), transparent 70%), radial-gradient(30% 36% at 60% 18%, rgba(127, 184, 159, .16), transparent 70%);
  animation: dealAir 22s ease-in-out infinite alternate; }
@keyframes dealAir { from { transform: translate3d(-4%, -2%, 0) rotate(0deg); } to { transform: translate3d(5%, 3%, 0) rotate(8deg); } }
.dp-old { position: relative; display: inline-block; text-decoration: none; }
.dp-old::after { content: ""; position: absolute; left: -6%; right: -6%; top: 54%; height: 2px; border-radius: 2px; background: var(--forest-l); transform-origin: 0 50%; }
.deal.js .dp-old::after { transform: scaleX(0); transition: transform .7s cubic-bezier(.6, 0, .2, 1) .15s; }
.deal.js.in .dp-old::after { transform: scaleX(1); }
.dp-new { font-variant-numeric: tabular-nums; }

/* ---------- краят: окото ---------- */
.fin .container > .reveal { text-align: center; }
.fin .container > .reveal .lead { margin-inline: auto; }
.fin .us-ctas { justify-content: center; }
.oko { width: clamp(190px, 21vw, 290px); margin: 0 auto clamp(18px, 2.5vw, 30px); }
.oko svg { display: block; width: 100%; height: auto; overflow: visible; }
.oko-a { fill: #fff; stroke: var(--ink); stroke-width: 3.2; }
.oko-d { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 6 7; opacity: .35; }
.oko-l line { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.oko-i1 { fill: var(--forest); }
.oko-i2 { fill: none; stroke: var(--zlato); stroke-width: 3.4; }
.oko-i3 { fill: none; stroke: var(--paper); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 98 34; transform: rotate(40deg); transform-origin: 120px 84px; transform-box: view-box; }
.oko-i4 { fill: none; stroke: rgba(247, 245, 242, .35); stroke-width: 1.2; stroke-dasharray: 3 4; }
.oko-i5 { fill: var(--zlato); }
.oko-g, .oko-l { transform-origin: 120px 84px; transform-box: view-box; }
.oko.blink .oko-g { animation: okoBlink .24s ease-in-out; }
.oko.blink .oko-l { animation: okoLash .24s ease-in-out; }
@keyframes okoBlink { 50% { transform: scaleY(.06); } }
@keyframes okoLash { 50% { transform: translateY(40px) scaleY(.3); opacity: .4; } }
.oko-i { transition: transform .08s linear; }
.oko.wow .oko-i1 { fill: #0B5A3B; }
.oko.wow .oko-i2 { stroke-width: 5; }

/* ==========================================================================
   Петте места, на които се къса: карти, които се трупат при превъртане
   ========================================================================== */
.pk-stack { position: relative; margin-top: clamp(34px, 4vw, 56px); padding-bottom: 8px; }
.pk-card {
  position: sticky; top: calc(clamp(86px, 11vh, 110px) + var(--k) * 16px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  min-height: clamp(440px, 62vh, 560px); margin-bottom: clamp(22px, 3vw, 34px); padding: clamp(28px, 3.8vw, 54px);
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  transform-origin: 50% 0; transform: scale(calc(1 - var(--c, 0) * .055));
  box-shadow: 0 -14px 40px -26px rgba(26, 26, 26, .28), 0 40px 70px -46px rgba(26, 26, 26, .45);
}
.pk-card::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: #06150E; opacity: calc(var(--c, 0) * .28); pointer-events: none; }
.pk-l { background: radial-gradient(120% 100% at 0% 0%, #FFFFFF, #F7F5F2 70%); }
.pk-t { background: radial-gradient(120% 100% at 0% 0%, #F1F6EF, #E3ECE0 75%); }
.pk-d { background: radial-gradient(120% 110% at 0% 0%, #0B5A3B, #003B25 60%, #022A1B); color: var(--paper); }
.pk-s { background: radial-gradient(120% 100% at 0% 0%, #FBF7F0, #EFE7DA 75%); }
.pk-k { background: radial-gradient(120% 110% at 0% 0%, #17302A, #0C1B15 65%); color: var(--paper); }
.pk-n { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.pk-n b { font-size: clamp(54px, 6vw, 92px); font-weight: 800; line-height: .85; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.6px currentColor; opacity: .9; }
.pk-l .pk-n b, .pk-t .pk-n b, .pk-s .pk-n b { -webkit-text-stroke-color: var(--forest); }
.pk-d .pk-n b, .pk-k .pk-n b { -webkit-text-stroke-color: var(--zlato); }
.pk-n span { font-size: 13px; font-weight: 800; letter-spacing: .1em; opacity: .5; }
.pk-card h3 { font-size: clamp(24px, 2.35vw, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; }
.pk-h { margin: 0 0 18px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 700; color: var(--signal); }
.pk-d .pk-h, .pk-k .pk-h { color: #FF8A80; }
.pk-cap { margin: 0; font-size: 14px; line-height: 1.5; color: var(--grey); max-width: 40ch; }
.pk-d .pk-cap, .pk-k .pk-cap { color: rgba(247, 245, 242, .6); }
.pk-sc { position: relative; height: 100%; min-height: clamp(340px, 44vh, 440px); border-radius: var(--r-md); font-size: clamp(10.5px, .92vw, 14px); display: grid; place-items: center; overflow: hidden; }
.pk-l .pk-sc, .pk-t .pk-sc, .pk-s .pk-sc { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .06); }
.pk-d .pk-sc, .pk-k .pk-sc { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(127, 184, 159, .18); }
/* сцената се движи само докато картата е отгоре */
.pk-card:not(.on) .pk-sc *, .pk-card:not(.on) .pk-sc *::before, .pk-card:not(.on) .pk-sc *::after { animation-play-state: paused !important; }

/* сцена 1: три секунди в Google */
.s1 { position: relative; display: flex; align-items: center; gap: 2.2em; }
.s1-ph { position: relative; width: 23em; padding: 1.3em 1.2em 1.5em; border-radius: 2em; background: #fff; box-shadow: 0 2.4em 4em -2em rgba(26, 26, 26, .35), inset 0 0 0 1px rgba(26, 26, 26, .08); }
.s1-bar { display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-radius: 99px; background: #F2F1EE; margin-bottom: 1.1em; font-size: .95em; }
.s1-bar svg { width: 1.1em; height: 1.1em; fill: none; stroke: var(--grey); stroke-width: 2.4; stroke-linecap: round; flex: none; }
.s1-q { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; font-weight: 600; animation: s1Type 7.5s steps(15) infinite; }
.s1-car { width: 1.5px; height: 1.1em; background: var(--forest); animation: s1Blink .8s steps(2) infinite; }
.s1-r { position: relative; padding: .8em .9em; border-radius: 1em; margin-top: .5em; opacity: 0; animation: s1In 7.5s infinite; }
.s1-th { animation-name: s1In2; }
.s1-u { display: flex; align-items: center; gap: .5em; font-size: .78em; color: var(--grey); }
.s1-u i { width: 1.3em; height: 1.3em; border-radius: 50%; background: #E4E2DC; }
.s1-t { font-size: 1.12em; color: #1F3FA0; margin: .2em 0 .15em; font-weight: 600; }
.s1-d { font-size: .82em; color: var(--grey-d); line-height: 1.4; }
.s1-you { animation-name: s1You; }
.s1-fl, .s1-ok { position: absolute; right: .7em; top: .7em; padding: .3em .7em; border-radius: 99px; font-size: .72em; font-weight: 800; opacity: 0; }
.s1-fl { background: #F5DFDC; color: #A32222; animation: s1Fl 7.5s infinite; }
.s1-ok { background: var(--forest); color: var(--paper); animation: s1Ok 7.5s infinite; }
.s1-tap { position: absolute; left: 0; top: 0; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(26, 26, 26, .18); box-shadow: 0 0 0 .25em rgba(255, 255, 255, .9), 0 .6em 1.2em rgba(0, 0, 0, .2); animation: s1Tap 7.5s cubic-bezier(.5, 0, .3, 1) infinite; }
.s1-tm { position: relative; width: 7em; text-align: center; }
.s1-tm svg { width: 7em; height: 7em; transform: rotate(-90deg); }
.s1-tm circle { fill: none; stroke: rgba(26, 26, 26, .1); stroke-width: 3.2; }
.s1-tm .s1-tr { stroke: var(--signal); stroke-linecap: round; stroke-dasharray: 1 1; animation: s1Ring 7.5s linear infinite; }
.s1-tm b { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 2.4em; line-height: 1; }
.s1-tm b span { grid-area: 1 / 1; opacity: 0; }
.s1-tm b span:nth-child(1) { animation: s1N1 7.5s infinite; }
.s1-tm b span:nth-child(2) { animation: s1N2 7.5s infinite; }
.s1-tm b span:nth-child(3) { animation: s1N3 7.5s infinite; }
.s1-tm small { display: block; margin-top: .4em; font-size: .85em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
@keyframes s1Type { 0%, 4% { width: 0; } 16%, 92% { width: 8.6em; } 100% { width: 0; } }
@keyframes s1Blink { 50% { opacity: 0; } }
@keyframes s1In { 0%, 16% { opacity: 0; transform: translateY(.6em); } 21%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s1In2 { 0%, 19% { opacity: 0; transform: translateY(.6em); } 24%, 55% { opacity: 1; transform: none; box-shadow: none; } 60%, 92% { opacity: 1; box-shadow: 0 0 0 2px var(--forest), 0 1em 2em -1em rgba(0, 84, 53, .5); background: #F2F7F3; } 100% { opacity: 0; } }
@keyframes s1You { 0%, 16% { opacity: 0; transform: translateY(.6em); } 21%, 40% { opacity: 1; transform: none; } 46%, 92% { opacity: .42; } 100% { opacity: 0; } }
@keyframes s1Fl { 0%, 40% { opacity: 0; transform: scale(.7); } 44%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s1Ok { 0%, 58% { opacity: 0; transform: scale(.7); } 62%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s1Tap { 0%, 20% { left: 110%; top: 90%; opacity: 0; } 26% { left: 55%; top: 42%; opacity: 1; } 40% { left: 58%; top: 44%; opacity: 1; } 52% { left: 50%; top: 76%; opacity: 1; transform: scale(1); } 56% { transform: scale(.72); } 60% { transform: scale(1); } 80% { left: 50%; top: 76%; opacity: 1; } 90%, 100% { left: 50%; top: 76%; opacity: 0; } }
@keyframes s1Ring { 0%, 22% { stroke-dashoffset: 0; } 58%, 100% { stroke-dashoffset: 1; } }
@keyframes s1N1 { 0%, 20% { opacity: 0; } 22%, 34% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes s1N2 { 0%, 34% { opacity: 0; } 35%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes s1N3 { 0%, 46% { opacity: 0; } 47%, 90% { opacity: 1; color: var(--signal); } 100% { opacity: 0; } }

/* сцена 2: печели видимостта */
.s2 { width: min(92%, 34em); display: grid; gap: 1.4em; }
.s2-l { position: relative; padding: .5em; border-radius: 1.4em; background: #fff; box-shadow: 0 2em 3.4em -2em rgba(26, 26, 26, .3); }
.s2-i { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .7em; padding: .9em 1em; border-radius: 1em; }
.s2-i + .s2-i { border-top: 1px solid var(--hairline); }
.s2-i b { font-size: 1.05em; }
.s2-st { position: relative; color: #E4E0D6; letter-spacing: .05em; }
.s2-st i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--zlato-t); font-style: normal; width: 0; animation: s2Stars 8s infinite; }
.s2-i em { font-style: normal; font-size: .85em; color: var(--grey); font-variant-numeric: tabular-nums; }
.s2-no { grid-column: 2 / 4; font-size: .85em; color: var(--grey); }
.s2-ch { position: absolute; right: .9em; top: -.6em; padding: .25em .7em; border-radius: 99px; background: var(--forest); color: var(--paper); font-size: .72em; font-weight: 800; opacity: 0; animation: s2Ch 8s infinite; }
.s2-pk { position: absolute; left: .5em; right: .5em; top: .5em; height: 3.3em; border-radius: 1em; box-shadow: inset 0 0 0 2px var(--forest); background: rgba(0, 84, 53, .05); animation: s2Pk 8s cubic-bezier(.6, 0, .2, 1) infinite; }
.s2-m { padding: 1.2em 1.3em; border-radius: 1.4em; background: rgba(255, 255, 255, .7); }
.s2-r + .s2-r { margin-top: 1em; }
.s2-r > span { display: block; font-size: .82em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-d); margin-bottom: .5em; }
.s2-bs { display: grid; gap: .35em; }
.s2-bs i { display: block; height: .75em; border-radius: 99px; background: rgba(26, 26, 26, .07); position: relative; overflow: hidden; }
.s2-bs i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); animation: s2Bar 8s cubic-bezier(.2, .8, .2, 1) infinite; }
.s2-bs i.y::after { background: var(--forest); }
.s2-bs i.t::after { background: #B9C9BD; animation-delay: .15s; }
.s2-bs i { --s: var(--v); }
@keyframes s2Bar { 0%, 6% { transform: scaleX(0); } 28%, 92% { transform: scaleX(var(--s)); } 100% { transform: scaleX(0); } }
.s2-lg { display: flex; gap: 1.2em; margin: .9em 0 0; font-size: .8em; color: var(--grey-d); }
.s2-lg span { display: inline-flex; align-items: center; gap: .45em; }
.s2-lg span::before { content: ""; width: 1.4em; height: .55em; border-radius: 99px; }
.s2-lg .y::before { background: var(--forest); }
.s2-lg .t::before { background: #B9C9BD; }
@keyframes s2Stars { 0%, 8% { width: 0; } 24%, 92% { width: 100%; } 100% { width: 0; } }
@keyframes s2Pk { 0%, 26% { transform: translateY(3.95em); opacity: 0; } 30%, 44% { transform: translateY(3.95em); opacity: 1; } 56%, 90% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes s2Ch { 0%, 56% { opacity: 0; transform: translateY(.4em); } 60%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* сцена 3: пътят се къса (SVG с вградено движение) */
.s3 { width: 100%; padding: 0 1em; }
.s3-svg { display: block; width: 100%; height: auto; overflow: visible; }
.s3-b { fill: none; stroke: rgba(127, 184, 159, .22); stroke-width: 3; stroke-linecap: round; }
.s3-g { fill: none; stroke: rgba(247, 245, 242, .25); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.s3-p { fill: none; stroke: var(--forest-l); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(127, 184, 159, .6)); }
.s3-n circle { stroke: rgba(247, 245, 242, .5); stroke-width: 2; }
.s3-n6 circle { fill: transparent; stroke: rgba(247, 245, 242, .3); stroke-dasharray: 3 3; }
.s3-n text { fill: rgba(247, 245, 242, .82); font-size: 15px; font-weight: 700; text-anchor: middle; }
.s3-n6 text { fill: rgba(247, 245, 242, .38); }
.s3-d { fill: var(--zlato); filter: drop-shadow(0 0 7px rgba(212, 186, 116, .9)); }
.s3-rp { fill: none; stroke: #FF5A4F; stroke-width: 2; }
.s3-mk rect { fill: #C62828; }
.s3-mk text { fill: #fff; font-size: 14px; font-weight: 800; text-anchor: middle; }

/* сцена 4: предимствата стоят най-долу */
.s4 { width: min(94%, 38em); display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1.6em; align-items: center; }
.s4-h { margin: 0 0 .8em; font-size: .8em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-d); }
.s4-c { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: .6em; padding: .75em 1em; border-radius: 99px; background: #fff; font-weight: 800; font-size: 1.02em; box-shadow: 0 .8em 1.6em -1em rgba(26, 26, 26, .3); animation: s4Chip 8s infinite; animation-delay: calc(var(--n) * 1s); }
.s4-c i { width: 1.4em; height: 1.4em; border-radius: 50%; background: #F5DFDC; position: relative; opacity: 0; animation: s4X 8s infinite; animation-delay: calc(var(--n) * 1s); }
.s4-c i::before, .s4-c i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7em; height: 2px; margin: -1px 0 0 -.35em; background: #A32222; border-radius: 2px; transform: rotate(45deg); }
.s4-c i::after { transform: rotate(-45deg); }
.s4-w { position: relative; border-radius: 1.2em; background: #fff; overflow: hidden; box-shadow: 0 2em 3.4em -2em rgba(26, 26, 26, .35); }
.s4-bar { display: flex; gap: .35em; padding: .6em .8em; background: #F1EEE8; }
.s4-bar i { width: .65em; height: .65em; border-radius: 50%; background: #DAD5CC; }
.s4-in { padding: 1.1em 1.2em 1em; }
.s4-t { margin: 0 0 .8em; font-size: 1.35em; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.s4-ln { display: block; height: .5em; width: var(--w); border-radius: 99px; background: #EEEBE5; margin-bottom: .5em; }
.s4-btn { display: inline-block; margin: .4em 0 .9em; padding: .45em 1em; border-radius: 99px; background: var(--forest); color: var(--paper); font-size: .78em; font-weight: 800; }
.s4-f { margin: .9em 0 0; font-size: .58em; color: #B4AFA6; transform-origin: 0 100%; animation: s4Foot 8s infinite; }
.s4-sc { position: absolute; left: 0; right: 0; top: 0; height: 22%; pointer-events: none; background: linear-gradient(transparent, rgba(0, 84, 53, .12), transparent); animation: s4Scan 8s linear infinite; }
.s4-lp { position: absolute; left: 20%; bottom: -.4em; width: 7em; height: 7em; border-radius: 50%; border: 2.5px solid var(--zlato); box-shadow: 0 0 0 6px rgba(212, 186, 116, .15), 0 1em 2em -.6em rgba(0, 0, 0, .3); opacity: 0; animation: s4Lens 8s cubic-bezier(.5, 0, .2, 1) infinite; }
.s4-tag { position: absolute; right: .8em; bottom: 3.4em; padding: .35em .8em; border-radius: 99px; background: var(--zlato); color: #3D2E08; font-size: .74em; font-weight: 800; opacity: 0; animation: s4Tag 8s infinite; }
@keyframes s4Chip { 0%, 2% { box-shadow: 0 .8em 1.6em -1em rgba(26, 26, 26, .3); } 6%, 14% { box-shadow: 0 0 0 2px var(--forest), 0 1em 2em -1em rgba(0, 84, 53, .5); } 20%, 100% { box-shadow: 0 .8em 1.6em -1em rgba(26, 26, 26, .3); } }
@keyframes s4X { 0%, 14% { opacity: 0; transform: scale(.5); } 17%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s4Scan { 0% { transform: translateY(-100%); opacity: 0; } 4% { opacity: 1; } 42% { transform: translateY(460%); opacity: 1; } 46%, 100% { transform: translateY(460%); opacity: 0; } }
@keyframes s4Lens { 0%, 48% { opacity: 0; transform: translate(6em, -8em) scale(.7); } 58%, 88% { opacity: 1; transform: translate(0, 0) scale(1); } 96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes s4Foot { 0%, 56% { transform: none; color: #B4AFA6; } 62%, 88% { transform: scale(1.55); color: var(--ink); } 96%, 100% { transform: none; color: #B4AFA6; } }
@keyframes s4Tag { 0%, 62% { opacity: 0; transform: translateY(.4em); } 66%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* сцена 5: кое първо */
.s5 { width: min(92%, 34em); }
.s5-r { position: relative; display: grid; grid-template-columns: 7.6em minmax(0, 1fr) 2.2em; align-items: center; gap: .8em; padding: .5em 0; }
.s5-r > span { font-size: .92em; color: rgba(247, 245, 242, .8); }
.s5-r > i { position: relative; height: .7em; border-radius: 99px; background: rgba(247, 245, 242, .08); overflow: hidden; }
.s5-r > i b { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #7FB89F, #B9DAC9); transform-origin: 0 50%; transform: scaleX(0); animation: s5Bar 8s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: calc(var(--n) * .09s); }
.s5-r:nth-child(1) > i b { background: linear-gradient(90deg, #C9A85C, #E8D49A); }
.s5-r:nth-child(2) > i b { background: linear-gradient(90deg, #A89060, #D8C28E); }
.s5-r > em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(247, 245, 242, .9); text-align: right; }
.s5-f, .s5-s { position: absolute; right: 3.4em; top: 50%; translate: 0 -50%; padding: .3em .75em; border-radius: 99px; font-size: .74em; font-weight: 800; opacity: 0; }
.s5-f { background: var(--zlato); color: #3D2E08; box-shadow: 0 0 0 0 rgba(212, 186, 116, .6); animation: s5F 8s infinite; }
.s5-s { background: rgba(212, 186, 116, .22); color: var(--zlato); animation: s5S 8s infinite; }
.s5-r:nth-child(1)::before { content: ""; position: absolute; inset: 0 -.8em; border-radius: .8em; background: rgba(212, 186, 116, .1); box-shadow: inset 0 0 0 1px rgba(212, 186, 116, .35); opacity: 0; animation: s5Hi 8s infinite; }
.s5-n { margin: 1em 0 0; font-size: .9em; font-weight: 700; color: var(--zlato); opacity: 0; animation: s5Note 8s infinite; }
@keyframes s5Bar { 0%, 4% { transform: scaleX(0); } 26%, 92% { transform: scaleX(var(--v)); } 100% { transform: scaleX(0); } }
@keyframes s5F { 0%, 40% { opacity: 0; transform: translateX(1em); } 45%, 90% { opacity: 1; transform: none; } 52% { box-shadow: 0 0 0 .5em rgba(212, 186, 116, 0); } 100% { opacity: 0; } }
@keyframes s5S { 0%, 52% { opacity: 0; transform: translateX(1em); } 57%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s5Hi { 0%, 40% { opacity: 0; } 45%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s5Note { 0%, 62% { opacity: 0; transform: translateY(.4em); } 67%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .pk-card { grid-template-columns: 1fr; min-height: 0; top: calc(78px + var(--k) * 10px); gap: 22px; padding: 26px 22px 22px; }
  .pk-sc { min-height: 290px; height: auto; padding: 18px 0; font-size: clamp(9.5px, 2.6vw, 12px); }
  .pk-n { margin-bottom: 12px; }
  .pk-n b { font-size: 52px; }
  .pk-card h3 { font-size: 24px; margin-bottom: 12px; }
  .pk-h { font-size: 16px; margin-bottom: 12px; }
  .s1 { gap: 1em; }
  .s1-tm { width: 5.6em; }
  .s1-tm svg { width: 5.6em; height: 5.6em; }
  .s3-n text { font-size: 22px; }
  .s3-mk text { font-size: 20px; }
  .s3-mk rect { x: -130px; width: 260px; y: -19px; height: 38px; rx: 19px; }
  .s4 { grid-template-columns: 1fr; gap: 1em; }
  .s4-q { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
  .s4-h { width: 100%; margin-bottom: .2em; }
  .s4-c { margin: 0; gap: .6em; }
}

/* ==========================================================================
   Как протича: стъпките светват, докато превъртате
   ========================================================================== */
.pr { position: relative; margin-top: clamp(34px, 4vw, 54px); }
.pr-rail { position: absolute; left: 12.5%; right: 12.5%; top: 25px; height: 3px; border-radius: 3px; background: rgba(0, 84, 53, .12); }
.pr-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--forest-l), var(--forest) 60%, var(--zlato-t)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px rgba(212, 186, 116, .45); }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pr-st { position: relative; display: flex; flex-direction: column; align-items: center; }
.pr-dot { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--grey); background: var(--paper); box-shadow: inset 0 0 0 2px rgba(0, 84, 53, .2); transition: background .5s ease, color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.pr-st.done .pr-dot { background: var(--forest); color: var(--paper); box-shadow: 0 0 0 6px rgba(0, 84, 53, .12); }
.pr-st.cur .pr-dot { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(212, 186, 116, .25), 0 10px 24px -8px rgba(0, 84, 53, .6); }
.pr-card { width: 100%; margin-top: 20px; padding: 14px 14px 22px; border-radius: var(--r-md); background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .06), 0 20px 40px -32px rgba(26, 26, 26, .4); text-align: center; transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease, background .6s ease, opacity .6s ease; opacity: .72; }
.pr-st.done .pr-card { opacity: 1; }
.pr-st.cur .pr-card { transform: translateY(-8px); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 84, 53, .25), 0 30px 60px -34px rgba(0, 84, 53, .55); }
.pr-vis { position: relative; height: 150px; border-radius: var(--r-sm); background: linear-gradient(160deg, #EFF4EC, #E2EBDE); overflow: hidden; margin-bottom: 16px; display: grid; place-items: center; }
.pr-chip { display: inline-block; margin: 0 0 8px; padding: 5px 11px; border-radius: 99px; background: var(--chip-g-bg); color: var(--forest); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pr-card h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.pr-t { margin: 0 auto; max-width: 30ch; font-size: 14.5px; line-height: 1.5; color: var(--grey-d); }
.pr-st:not(.done) .pr-vis *, .pr-st:not(.done) .pr-vis *::before, .pr-st:not(.done) .pr-vis *::after { animation-play-state: paused !important; }

/* 1: въпросникът се попълва сам */
.pv1 { width: 76%; display: grid; gap: 9px; }
.pv1-f { display: grid; gap: 4px; text-align: left; }
.pv1-f small { font-size: 10.5px; font-weight: 700; color: var(--grey-d); }
.pv1-f i { position: relative; display: block; height: 18px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .08); overflow: hidden; }
.pv1-f i::after { content: ""; position: absolute; left: 6px; top: 6px; height: 6px; border-radius: 3px; background: var(--forest-l); width: 0; animation: pv1Fill 6s infinite; animation-delay: calc(var(--n) * .5s); }
.pv1-ok { justify-self: end; padding: 4px 10px; border-radius: 99px; background: var(--forest); color: var(--paper); font-size: 10.5px; font-weight: 800; opacity: 0; animation: pv1Ok 6s infinite; }
@keyframes pv1Fill { 0%, 5% { width: 0; } 20%, 90% { width: 70%; } 100% { width: 0; } }
@keyframes pv1Ok { 0%, 42% { opacity: 0; transform: scale(.7); } 48%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 2: критериите се отмятат, вие срещу тримата */
.pv2 { width: 82%; }
.pv2-g { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.pv2-g i { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .8); animation: pv2Tick 6s infinite; animation-delay: calc(var(--n) * .07s); }
.pv2-g i:nth-child(5n + 3) { animation-name: pv2Bad; }
.pv2-v { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.pv2-v span { padding: 3px 8px; border-radius: 99px; background: #fff; font-size: 10.5px; font-weight: 800; color: var(--grey-d); }
.pv2-v span:first-child { background: var(--forest); color: var(--paper); }
.pv2-sc { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(transparent, rgba(0, 84, 53, .14), transparent); animation: pv2Scan 6s linear infinite; }
@keyframes pv2Tick { 0%, 8% { background: rgba(255, 255, 255, .8); } 14%, 90% { background: var(--forest-l); } 100% { background: rgba(255, 255, 255, .8); } }
@keyframes pv2Bad { 0%, 8% { background: rgba(255, 255, 255, .8); } 14%, 90% { background: #E8A39B; } 100% { background: rgba(255, 255, 255, .8); } }
@keyframes pv2Scan { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
/* 3: страниците на доклада и видеото */
.pv3 { position: relative; width: 70%; height: 80%; }
.pv3-p { position: absolute; left: 50%; top: 50%; width: 58px; height: 80px; margin: -40px 0 0 -29px; border-radius: 6px; background: #fff; box-shadow: 0 8px 18px -8px rgba(26, 26, 26, .35); animation: pv3Fan 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.pv3-p:nth-child(1) { --r: -14deg; --x: -34px; }
.pv3-p:nth-child(2) { --r: 12deg; --x: 34px; }
.pv3-p:nth-child(3) { --r: 0deg; --x: 0px; z-index: 1; padding: 8px 7px; text-align: left; }
.pv3-p b { display: block; font-size: 6.5px; line-height: 1.2; color: var(--forest); margin-bottom: 6px; }
.pv3-p i { display: block; height: 3px; border-radius: 2px; background: #E6E2DA; margin-bottom: 4px; }
.pv3-play { position: absolute; right: 2%; bottom: 4%; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--forest); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(0, 84, 53, .5); animation: pv3Play 6s infinite; }
.pv3-play svg { width: 14px; height: 14px; fill: var(--paper); margin-left: 2px; }
@keyframes pv3Fan { 0%, 6% { transform: translateX(0) rotate(0); opacity: 0; } 24%, 90% { transform: translateX(var(--x)) rotate(var(--r)); opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 0; } }
@keyframes pv3Play { 0%, 34% { transform: scale(0); } 42% { transform: scale(1.1); } 46%, 90% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 84, 53, .5); } 60% { box-shadow: 0 0 0 10px rgba(0, 84, 53, 0); } 100% { transform: scale(0); } }
/* 4: линията расте, 30 и 90 ден */
.pv4 { position: absolute; inset: 14px 16px 18px; }
.pv4 svg { width: 100%; height: 100%; overflow: visible; }
.pv4-a { fill: none; stroke: rgba(0, 84, 53, .12); stroke-width: 3; }
.pv4-l { fill: none; stroke: var(--forest); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: pv4Draw 6s cubic-bezier(.3, .6, .2, 1) infinite; vector-effect: non-scaling-stroke; }
.pv4-a { vector-effect: non-scaling-stroke; }
.pv4-m { position: absolute; left: var(--x); top: var(--y); translate: -50% -130%; padding: 3px 8px; border-radius: 99px; background: var(--zlato); color: #3D2E08; font-size: 10.5px; font-weight: 800; opacity: 0; animation: pv4M 6s infinite; animation-delay: calc(var(--n) * .6s); }
@keyframes pv4Draw { 0%, 5% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes pv4M { 0%, 26% { opacity: 0; transform: scale(.6); } 32%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .pr-rail { left: 25px; right: auto; top: 26px; bottom: 60px; width: 3px; height: auto; }
  .pr-rail i { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); background: linear-gradient(var(--forest-l), var(--forest) 60%, var(--zlato-t)); }
  .pr-list { grid-template-columns: 1fr; gap: 18px; }
  .pr-st { flex-direction: row; align-items: flex-start; gap: 16px; }
  .pr-card { margin-top: 0; text-align: left; padding: 12px 12px 18px; }
  .pr-dot { flex: none; }
  .pr-vis { height: 140px; }
  .pr-t { margin: 0; }
}

/* ==========================================================================
   Екипът: софтуерът събира, човекът решава
   ========================================================================== */
@property --h { syntax: "<number>"; inherits: true; initial-value: 1; }
.tm { margin-top: clamp(30px, 4vw, 50px); }
.tm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.tm-card { margin: 0; --h: 1; transition: --h 1.25s cubic-bezier(.65, 0, .25, 1); transition-delay: calc(var(--d) * .2s); }
.tm[data-mode="r"] .tm-card { --h: 0; }
.tm-ph { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: #081D14; box-shadow: 0 30px 60px -36px rgba(26, 26, 26, .55), inset 0 0 0 1px rgba(26, 26, 26, .06); isolation: isolate; }
.tm-ascii { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tm-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 calc((1 - var(--h)) * 100%) 0); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.tm-card:hover .tm-ph img { transform: scale(1.035); }
.tm-scan { position: absolute; left: 0; right: 0; top: calc(var(--h) * 100%); height: 2px; margin-top: -1px; background: var(--zlato); box-shadow: 0 0 22px 5px rgba(212, 186, 116, .55); opacity: calc(var(--h) * (1 - var(--h)) * 5); pointer-events: none; z-index: 2; }
.tm-data { position: absolute; left: 14px; top: 14px; z-index: 2; margin: 0; padding: 12px 14px 10px; list-style: none; border-radius: 14px; background: rgba(8, 29, 20, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(127, 184, 159, .25); opacity: calc(1 - var(--h)); pointer-events: none; }
.tm-data li { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12.5px; font-weight: 700; color: rgba(247, 245, 242, .85); padding: 2px 0; }
.tm-data .tm-dh { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-l); margin-bottom: 4px; }
.tm-data li i { width: 14px; height: 14px; border-radius: 50%; background: var(--forest-l); position: relative; opacity: 0; }
.tm-data li i::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6.5px; border: solid #081D14; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.tm[data-mode="r"] .tm-data li i { animation: tmTick .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--n) * .28s + .35s + var(--d) * .1s); }
@keyframes tmTick { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.tm-focus { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 8px 13px; border-radius: 99px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--forest); font-size: 12.5px; font-weight: 800; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45); opacity: var(--h); translate: 0 calc((1 - var(--h)) * 10px); pointer-events: none; }
.tm-card figcaption { display: flex; flex-direction: column; }
.tm-card .m-name { font-weight: 800; font-size: 18px; margin-top: 16px; }
.tm-card .m-role { color: var(--forest); font-weight: 700; font-size: 14px; margin-top: 2px; }
.tm-card .m-note { color: var(--grey-d); font-size: 14.5px; margin-top: 8px; max-width: 36ch; }
@media (max-width: 720px) {
  .tm-grid { gap: 12px; }
  .tm-ph { border-radius: var(--r-sm); aspect-ratio: 3 / 4; }
  .tm-data, .tm-focus { display: none; }
  .tm-card .m-name { font-size: 15.5px; margin-top: 11px; }
  .tm-card .m-role { font-size: 12.5px; }
  .tm-card .m-note { display: none; }
}

/* ---------- намалено движение: всичко стои, нищо не се губи ---------- */
@media (prefers-reduced-motion: reduce) {
  .xh-xray .xh-bg::after, .xh.live .lv-pulse, .nh-l > span, .nh-in, .xh-hud, .xc, .xo, .xh-done, .bp-out, .xo img, .lvd-sign, .lv-dash, .xh-xray .lv-f > i::after, .nj-img img, .nj-dot::before, .seat-dots i { animation: none; }
  .nj-h .nj-img, .bp-card, .nj-big { transition: none; }
  .bp.done .bp-rows b::before { animation: none; }
  .wr .w > span { transform: none; }
  .wr.in .w > span, .us-mx.mx.in tbody tr, .us-mx.mx.in .us-c, .deal::before, .pb-panel.on .pb-art::after, .oko.blink .oko-g, .oko.blink .oko-l { animation: none; }
  .us-mx.mx tbody tr { opacity: 1; }
  .fan-p, .hp-scores .vl, .tl, .pk-card, .pr-card, .pr-dot, .tm-card { transition: none; }
  .tm-data li i { animation: none; opacity: 1; }
  .pk-sc *, .pk-sc *::before, .pk-sc *::after, .pr-vis *, .pr-vis *::before, .pr-vis *::after { animation-delay: -3.6s !important; animation-play-state: paused !important; }
}