/* ==========================================================================
   Възможности — само тази страница. Системата (токени, телефон, прозорец,
   лампа, ивици, пръстени) е в styles.css; ръководството — tmp/site-v3/components.md.
   Всяка част е различна по форма:
     0 лампа над ветрило от екрани        4 оферта: сцена с дълбочина          8 обход: огромни числа + екраните
     1 талон → досие, лупа, шестте стъпки 5 два протокола, два заключени PDF    9 бенто: часове, запитвания, известия
     2 разчетен лист + A–D ламарина       6 ремонт: сцена в средата            10 екипът (карта) · без покритие (телефон)
     3 цените: телефон + големи редове    7 финанси: зелено число, два екрана  11 финалът: ламарината се изправя
   Лампата е една — дълга и тънка над ветрилото. Парите светят сами (зелено), а финалът
   е вторият подпис: ивиците около вдлъбнатината, която се изправя до бутона.
   Точките под лентите за плъзгане са общите (.dots, site.js: [data-swipe]).
   ========================================================================== */
.page-vaz .dots { margin-top: 6px; }

/* ---------- 0 · начало: дълга тънка лампа, под нея ветрило от шест екрана ---------- */
.v-head { padding-bottom: 0; }
.v-head h1 { max-width: none; }
.v-head .lead { max-width: 40em; }
.v-fan-stage { position: relative; isolation: isolate; margin-top: clamp(24px, 3vw, 40px); padding-top: 70px; }
.v-hlamp { --lw: min(1100px, 88vw); --lt: 8px; }
.v-hcone { --cw: min(1560px, 140vw); --ch: 560px; --ct: 20px; --cone: .26; }
.v-fan {
  --fw: clamp(200px, 16.4vw, 240px);
  --fs: min(206px, calc((100vw - 2 * var(--gut) - var(--fw) * 1.5) / 5));
  position: relative; z-index: 1; max-width: var(--wrap); height: calc(var(--fw) * 2.11 * .6 + 104px); margin: 0 auto;
}
.fan-i { position: absolute; top: var(--dy, 0px); left: calc(50% + (var(--i) - 2.5) * var(--fs)); width: var(--fw); translate: -50% 0; rotate: var(--r, 0deg); transform-origin: 50% 100%; z-index: var(--z, 1); border-radius: 26px;
  transition: translate .55s var(--ease), rotate .55s var(--ease); }
.fan-i:nth-child(1) { --r: -7deg; --dy: 34px; --z: 1; }
.fan-i:nth-child(2) { --r: -4deg; --dy: 12px; --z: 2; }
.fan-i:nth-child(3) { --r: -1.2deg; --dy: 0px; --z: 3; }
.fan-i:nth-child(4) { --r: 1.2deg; --dy: 0px; --z: 3; }
.fan-i:nth-child(5) { --r: 4deg; --dy: 12px; --z: 2; }
.fan-i:nth-child(6) { --r: 7deg; --dy: 34px; --z: 1; }
.fan-ph { --cut: .6; width: 100%; }
.fan-l { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 4px; rotate: calc(var(--r, 0deg) * -1); transition: rotate .55s var(--ease), color .3s; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.fan-l .ic { width: 18px; height: 18px; color: var(--blue-hi); stroke-width: 2; transition: translate .4s var(--ease); }
.fan-i:focus-visible { outline-offset: 6px; }
@media (hover: hover) {
  .fan-i:hover { translate: -50% -16px; rotate: 0deg; z-index: 6; }
  .fan-i:hover .fan-l { color: #fff; rotate: 0deg; }
  .fan-i:hover .fan-l .ic { translate: 0 3px; }
}

/* ---------- 1 · досие: талонът; лупата вади превключвателя от телефона ---------- */
.v-dosie { overflow-x: clip; }
.v-dosie-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(36px, 5vw, 72px); align-items: center; }
.v-dosie-copy h2 { max-width: none; }
.v-scan { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 30px; align-items: center; margin-top: clamp(36px, 4vw, 52px); padding: 22px 0 6px; }
.v-scan::before { content: ""; position: absolute; z-index: -1; left: -90px; top: 50%; width: 560px; height: 360px; translate: 0 -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .24), rgba(var(--glow), .06) 60%, transparent); }
.v-scan .scan { padding: 26px 24px; }
.v-scan .scan-c { width: 26px; height: 26px; }
.v-scan .plate { height: 58px; border-radius: 8px; }
.v-scan .plate-bg { padding: 0 10px; font-size: 14px; }
.v-scan .plate-n { padding: 0 18px; font-size: 1.7rem; }
.scan-out { display: grid; gap: 4px; }
.scan-out li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 22px; align-items: center; gap: 10px; min-height: 40px; font-size: 15.5px; box-shadow: inset 0 -1px 0 rgba(186, 222, 255, .08); }
.scan-out li:last-child { box-shadow: none; }
.scan-out span { color: var(--ink-3); }
.scan-out b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scan-out .ic { width: 20px; height: 20px; color: var(--green); stroke-width: 2.4; }

/* телефонът вляво, лупата излиза от него надясно-надолу; --lx/--lw — мястото и ширината ѝ в ширини на телефона */
.v-dosie-visual { --pw: 290px; --lx: .44; --lw: 1.26; --gap-l: 52px; position: relative; width: calc(var(--pw) * (var(--lx) + var(--lw))); }
.v-dosie-halo { width: 700px; height: 700px; left: 36%; top: 46%; translate: -50% -50%; opacity: .8; }
.v-dosie-ph { position: relative; width: var(--pw); }
/* превключвателят върху целия екран е общият .osw.osw-full (styles.css) */
.v-lens .osw { --pad: 10px; }
/* кръгът около превключвателя на екрана — оттук тръгва лъчът към лупата */
.v-focus { position: absolute; z-index: 3; left: 67.3%; top: 39.56%; width: 26.33cqw; height: 12.83cqw; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--blue-hi), 0 0 22px 3px rgba(var(--glow), .75); }
/* статусът горе: „Оглед“ → „Офертата не е изпратена“, щом превключвателят е на ✓ */
.v-status { position: absolute; z-index: 4; left: 8.46%; top: 21.33%; width: 83.08%; height: 12.31cqw; display: flex; align-items: center; gap: 2.6cqw; padding: 0 3.4cqw;
  border-radius: 3.4cqw; background: #2a2419; box-shadow: inset 0 0 0 .25cqw rgba(242, 183, 102, .42);
  font-size: 3.35cqw; font-weight: 700; color: var(--amber); white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease) .15s; }
.v-status i { width: 2.3cqw; height: 2.3cqw; flex: none; border-radius: 50%; background: var(--amber); box-shadow: 0 0 1.6cqw rgba(242, 183, 102, .7); }
.v-status em { display: flex; align-items: center; gap: 1.6cqw; margin-left: auto; font-style: normal; font-weight: 500; font-size: 2.75cqw; color: #8b9bad; }
.v-status em::after { content: ""; width: 1.5cqw; height: 1.5cqw; border: solid currentColor; border-width: 0 .3cqw .3cqw 0; rotate: 45deg; translate: 0 -.4cqw; }
.v-dosie-ph:has(.osw[aria-pressed="true"]) .v-status { opacity: 1; }
/* лъчът: от превключвателя на екрана до лупата */
.v-lens-beam { --ax: calc((.79 - var(--lx)) / var(--lw) * 100%); position: absolute; z-index: 4; left: calc(var(--pw) * var(--lx)); width: calc(var(--pw) * var(--lw)); top: calc(var(--pw) * .95); height: var(--gap-l); pointer-events: none;
  clip-path: polygon(calc(var(--ax) - 8.5%) 0, calc(var(--ax) + 8.5%) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(212, 235, 255, .42), rgba(var(--glow), .14)); }
/* лупата: плътна, с дебел светещ ръб — не карта, а стъкло */
.v-lens { position: absolute; z-index: 5; left: calc(var(--pw) * var(--lx)); top: calc(var(--pw) * .95 + var(--gap-l)); width: calc(var(--pw) * var(--lw)); margin: 0; padding: 12px 12px 14px; border-radius: 24px;
  background: linear-gradient(180deg, #17222d, #0f171f);
  box-shadow: inset 0 0 0 1px rgba(186, 222, 255, .16), 0 0 0 6px #0d141b, 0 0 0 7.5px rgba(156, 203, 242, .55), 0 0 46px 8px rgba(var(--glow), .42), 0 44px 80px -30px rgba(0, 0, 0, .95); }
.v-lens .sw-shot { border-radius: 13px; }
.v-lens figcaption { margin: 12px 6px 0; font-size: 15.5px; line-height: 1.42; color: var(--ink-2); text-wrap: balance; }

/* мостът към офертата: една стъклена карта-котва; светва, щом огледът е ✓ (статусът става „Офертата не е изпратена“) */
.v-next { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(26px, 3vw, 38px); min-height: 64px; padding: 12px 18px 12px 22px; border-radius: 16px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: box-shadow .6s var(--ease), background-color .6s var(--ease); }
.v-next-t { display: grid; gap: 2px; }
.v-next-t span { font-size: 14.5px; font-weight: 600; color: var(--ink-3); transition: color .6s; }
.v-next-t b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink-2); transition: color .6s, text-shadow .6s; }
.v-next .ic { width: 24px; height: 24px; color: var(--blue-hi); stroke-width: 2; transition: translate .4s var(--ease); }
.v-dosie:has(.v-lens .osw[aria-pressed="true"]) .v-next {
  background: radial-gradient(110% 140% at 0% 50%, rgba(var(--glow), .24), transparent 70%), var(--glass);
  box-shadow: inset 0 0 0 1px rgba(156, 203, 242, .45), 0 0 44px -10px rgba(var(--glow), .8); }
.v-dosie:has(.v-lens .osw[aria-pressed="true"]) .v-next-t span { color: var(--blue-hi); }
.v-dosie:has(.v-lens .osw[aria-pressed="true"]) .v-next-t b { color: var(--ice); text-shadow: 0 0 22px rgba(var(--glow), .8); }
@media (hover: hover) { .v-next:hover .ic { translate: 0 3px; } }

/* ---------- 2 · щети: листът за един панел, разчетен ---------- */
.v-shteti { overflow-x: clip; }
.v-shteti::before { content: ""; position: absolute; left: 50%; top: 48%; width: 900px; height: 900px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .22), rgba(var(--glow), .05) 60%, transparent); }
.anat { --pw: 340px; --gap: 44px; --sw: calc(var(--pw) * .952); --sh: calc(var(--sw) * 2.1641); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--pw) minmax(0, 1fr); column-gap: var(--gap); }
.anat-ph { grid-column: 2; grid-row: 1; width: var(--pw); }
/* всички бележки в един списък (за четеца и за картите на телефон); на компютър стоят от двете страни */
.anat-notes { grid-column: 1 / -1; grid-row: 1; position: relative; pointer-events: none; }
.co { position: absolute; top: calc(var(--pw) * .024 + var(--sh) * var(--y) - 13px); width: max-content; max-width: min(20rem, calc(50% - var(--pw) / 2 - var(--gap))); pointer-events: auto; }
.co-l { right: calc(50% + var(--pw) / 2 + var(--gap)); text-align: right; }
.co-r { left: calc(50% + var(--pw) / 2 + var(--gap)); }
.co > b { display: block; font-size: 1.08rem; font-weight: 700; line-height: 26px; letter-spacing: -.01em; color: var(--ink); transition: color .3s; }
.co > span:not([class]) { display: block; margin-top: 1px; font-size: .95rem; line-height: 1.4; color: var(--ink-2); }
/* линията от бележката до истинския бутон; точката е на екрана */
.co::after { content: ""; position: absolute; top: 12.25px; height: 1.5px; border-radius: 2px; pointer-events: none; transition: transform .8s var(--ease), opacity .3s; }
.co-l::after { left: calc(100% + 14px); width: calc(var(--gap) - 14px + var(--pw) * .024 + var(--sw) * var(--x)); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(156, 203, 242, .18), rgba(156, 203, 242, .85)); }
.co-r::after { right: calc(100% + 14px); width: calc(var(--gap) - 14px + var(--pw) * .024 + var(--sw) * (1 - var(--x))); transform-origin: 100% 50%;
  background: linear-gradient(270deg, rgba(156, 203, 242, .18), rgba(156, 203, 242, .85)); }
.anat-m { display: none; }
.anat-dot { position: absolute; z-index: 4; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 3.3cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: var(--ice); box-shadow: 0 0 0 1.1cqw rgba(var(--glow), .38), 0 0 4cqw 1cqw rgba(var(--glow), .8); transition: opacity .4s var(--ease), scale .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) {
  .co:hover > b { color: var(--blue-hi); }
}

/* ---------- 3 · цените: телефонът с листите вляво, големите редове вдясно, светла линия между тях ---------- */
.v-ceni { overflow-x: clip; }
.v-ceni-grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.v-ceni-visual { position: relative; z-index: 1; display: flex; justify-content: center; }
.v-ceni-visual::before { content: ""; position: absolute; left: 50%; top: 60%; width: 760px; height: 660px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .28), rgba(var(--glow), .05) 60%, transparent); }
.ceni-ph { position: relative; width: min(310px, 100%); }
.book-ring { --ty: 0cqw; left: 3.4%; top: 55.95%; width: 93.2%; height: 16.4cqw; border-radius: 2.2cqw; translate: 0 var(--ty); transition: translate .6s var(--ease); }
.v-ceni-copy { position: relative; z-index: 3; }
.book { margin-top: clamp(26px, 3vw, 40px); display: grid; }
.book li + li { box-shadow: inset 0 1px 0 rgba(186, 222, 255, .09); }
.book button { position: relative; display: grid; gap: 5px; width: 100%; min-height: 44px; padding: 20px 20px 20px 24px; border-radius: 16px; text-align: left; transition: background-color .35s; }
.book strong { font-size: clamp(1.45rem, .95rem + 1.35vw, 2.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.028em; color: var(--ink-2); transition: color .4s, text-shadow .4s; }
.book button span { font-size: 15.5px; line-height: 1.4; color: var(--ink-3); transition: color .4s; }
.book button[aria-pressed="true"] { background: radial-gradient(110% 140% at 0% 50%, rgba(var(--glow), .2), transparent 70%), rgba(255, 255, 255, .02); }
.book button[aria-pressed="true"] strong { color: var(--ice); text-shadow: 0 0 34px rgba(var(--glow), .9), 0 0 12px rgba(var(--glow), .45); }
.book button[aria-pressed="true"] span { color: var(--ink-2); }
.book button:focus-visible { outline-offset: 2px; border-radius: 16px; }
@media (hover: hover) {
  .book button:hover strong { color: var(--ink); }
  .book button[aria-pressed="true"]:hover strong { color: var(--ice); }
}
/* светлата линия: от посочения ред до същия ред на екрана (JS смята пътя) */
.book-wire { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bw-base { fill: none; stroke: rgba(159, 207, 244, .6); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(var(--glow), .8)); }
.bw-run { display: none; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 1.3; stroke-dashoffset: .14; filter: drop-shadow(0 0 6px rgba(var(--glow), 1)); }

/* ---------- 4 · оферта: сцена с дълбочина ---------- */
.v-oferta { overflow-x: clip; }
.v-of-head { max-width: 50rem; margin-inline: auto; text-align: center; }
.v-of-head .sub { margin-inline: auto; max-width: 31em; text-wrap: balance; }
/* трите екрана стоят един зад друг; активният излиза отпред (по-голям, с ореол), другите са отзад, наклонени и притъмнени */
.of-stage { --pa: 236px; --pb: 256px; --pc: 290px; position: relative; width: min(900px, 100% - 2 * var(--gut)); height: 724px; margin: clamp(36px, 4vw, 56px) auto 0; }
.of-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1300px, 140vw); height: 820px; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .22), rgba(var(--glow), .05) 60%, transparent); }
.of-phones { position: absolute; inset: 0; }
.of-i { position: absolute; transform: rotate(var(--r)) scale(.97); transform-origin: 50% 50%; transition: transform 1s var(--ease); }
.of-a { --r: -7deg; left: calc(50% - 300px - var(--pa) / 2); top: 104px; width: var(--pa); z-index: 1; }
.of-b { --r: -2deg; left: calc(50% - 125px - var(--pb) / 2); top: 68px; width: var(--pb); z-index: 3; }
.of-c { --r: 2.5deg; left: calc(50% + 275px - var(--pc) / 2); top: 40px; width: var(--pc); z-index: 3; }
.of-ph { width: 100%; transition: filter .9s var(--ease), opacity .9s var(--ease); }
.of-i::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 190%; height: 130%; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease);
  background: radial-gradient(closest-side, rgba(var(--glow), .5), rgba(var(--glow), .12) 55%, transparent); }
.of-c::before { background: radial-gradient(closest-side, rgba(220, 238, 255, .34), rgba(var(--glow), .14) 55%, transparent); }
.v-oferta[data-front="0"] .of-a, .v-oferta[data-front="1"] .of-b { transform: rotate(0deg) scale(1.14); z-index: 5; }
.v-oferta[data-front="2"] .of-c { transform: rotate(0deg) scale(1.1); z-index: 5; }
.v-oferta[data-front="0"] .of-a::before, .v-oferta[data-front="1"] .of-b::before, .v-oferta[data-front="2"] .of-c::before { opacity: 1; }
/* задните екрани се четат — само са отзад: по-бледи и леко размазани */
.v-oferta:not([data-front="0"]) .of-a .of-ph, .v-oferta:not([data-front="1"]) .of-b .of-ph, .v-oferta:not([data-front="2"]) .of-c .of-ph { opacity: .62; filter: blur(1.5px) saturate(.8); }
.of-c .of-ph { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(0, 0, 0, .35), 0 60px 90px -40px rgba(0, 0, 0, .95), 0 0 110px rgba(210, 232, 255, .16); }
.of-ring { border-radius: 2.4cqw; opacity: 0; transition: opacity .5s var(--ease); }
/* пръстенът е върху панелите (стъпка 1) и върху „Линк за одобрение“ (стъпка 2) */
.r-rows { left: 2.6%; top: 22.2%; width: 94.8%; height: 29.4%; border-radius: 3cqw; }
.r-link { left: 4.1%; top: 55.69%; width: 91.7%; height: 29.15cqw; border-radius: 5.2cqw; }
.v-oferta[data-front="0"] .of-a .of-ring, .v-oferta[data-front="1"] .of-b .of-ring { opacity: 1; }
/* „Viber · SMS“: извита светла линия от вашия телефон до телефона на клиента */
.of-link { position: absolute; z-index: 2; left: calc(50% - 20px); top: 360px; width: 192px; height: 110px; overflow: visible; pointer-events: none; opacity: .18; transition: opacity .6s var(--ease); }
/* линията и хапчето са общите (.ln-base, .ln-run, .ln-tag — като на началото); тук — само мястото и по-малкото хапче */
.of-tag { z-index: 7; left: calc(50% + 76px); top: 360px; transform: translate(-50%, calc(-100% - 8px)); font-size: 14.5px; padding: 7px 14px; opacity: 0; transition: opacity .5s var(--ease); }
.v-oferta:not([data-pill="0"]) .of-link { opacity: 1; }
.v-oferta:not([data-pill="0"]) .of-tag { opacity: 1; }
/* статусът виси на вашия телефон и се застъпва с долния ръб на рамката */
.of-pill { position: absolute; z-index: 6; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 13px 22px 13px 17px; border-radius: 15px; white-space: nowrap;
  font-size: 1.08rem; font-weight: 800; letter-spacing: -.012em; line-height: 1.2; color: var(--ink-2);
  background: #1a222b; box-shadow: inset 0 0 0 1.5px rgba(186, 222, 255, .22), 0 22px 44px -18px rgba(0, 0, 0, .95);
  transition: background-color .5s, box-shadow .5s, color .5s; }
.of-pill i { grid-area: 1 / 1; width: 11px; height: 11px; border-radius: 50%; background: #8b9bad; transition: background-color .5s, box-shadow .5s; }
.of-t { grid-area: 1 / 2; text-align: center; opacity: 0; transition: opacity .4s var(--ease), translate .5s var(--ease); translate: 0 6px; }
.v-oferta[data-pill="0"] .of-t[data-t="0"], .v-oferta[data-pill="1"] .of-t[data-t="1"], .v-oferta[data-pill="2"] .of-t[data-t="2"] { opacity: 1; translate: 0 0; }
.v-oferta[data-pill="1"] .of-pill { color: var(--amber); background: #2a2419; box-shadow: inset 0 0 0 1.5px rgba(242, 183, 102, .5), 0 0 44px -8px rgba(242, 183, 102, .45), 0 22px 44px -18px rgba(0, 0, 0, .95); }
.v-oferta[data-pill="1"] .of-pill i { background: var(--amber); box-shadow: 0 0 12px rgba(242, 183, 102, .9); }
.v-oferta[data-pill="2"] .of-pill { color: var(--green); background: #13261d; box-shadow: inset 0 0 0 1.5px rgba(var(--green-rgb), .55), 0 0 54px -6px rgba(var(--green-rgb), .55), 0 22px 44px -18px rgba(0, 0, 0, .95); }
.v-oferta[data-pill="2"] .of-pill i { background: var(--green); box-shadow: 0 0 14px rgba(var(--green-rgb), .95); }
.of-pill-d { left: calc(50% - 125px); top: 580px; translate: -50% 0; transition: top 1s var(--ease), background-color .5s, box-shadow .5s, color .5s; }
.v-oferta[data-front="1"] .of-pill-d { top: 626px; }
.of-pill-m { display: none; }
/* трите стъпки под сцената — големи номерирани стъклени карти (и управление: натискане вади екрана отпред);
   активната свети с ореол, като превключвателя */
.of-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 40px auto 0; }
.of-steps li { display: flex; }
.of-steps button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 16px; row-gap: 4px; width: 100%; min-height: 44px; padding: 20px 22px 22px 20px; border-radius: var(--r); text-align: left;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.of-n { grid-row: 1 / span 2; align-self: start; min-width: .62em; font-size: clamp(2.8rem, 2rem + 1.4vw, 3.6rem); font-weight: 800; line-height: .82; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px rgba(140, 192, 236, .45); transition: color .5s, -webkit-text-stroke-color .5s, text-shadow .7s var(--ease); }
.of-steps b { align-self: end; font-size: 1.24rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink-2); transition: color .4s; }
.of-s { font-size: 15px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; transition: color .4s; }
.of-steps button[aria-pressed="true"] { background: radial-gradient(110% 130% at 0% 0%, rgba(var(--glow), .26), transparent 70%), var(--glass);
  box-shadow: inset 0 0 0 1px rgba(156, 203, 242, .45), 0 0 50px -12px rgba(var(--glow), .85), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.of-steps button[aria-pressed="true"] .of-n { color: var(--blue-hi); -webkit-text-stroke-color: transparent; text-shadow: 0 0 34px rgba(var(--glow), .9); }
.of-steps li:last-child button[aria-pressed="true"] .of-n { color: var(--green); text-shadow: 0 0 34px rgba(var(--green-rgb), .7); }
.of-steps button[aria-pressed="true"] b { color: var(--ice); }
.of-steps button[aria-pressed="true"] .of-s { color: var(--ink-2); }
@media (hover: hover) {
  .of-steps button:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08); }
  .of-steps button:hover b { color: var(--ink); }
  .of-steps button[aria-pressed="true"]:hover b { color: var(--ice); }
}

/* ---------- 5 · протоколи: приемане и предаване, подпис с пръст, два заключени PDF ---------- */
.v-proto { overflow-x: clip; }
.v-proto-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.v-proto-stage { --k: 1; position: relative; height: calc(var(--k) * 720px); }
.v-proto-stage::before { content: ""; position: absolute; left: 42%; top: 48%; width: 760px; height: 760px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(215, 235, 255, .14), rgba(var(--glow), .1) 55%, transparent); }
.pr-a, .pr-b, .pr-out { position: absolute; }
.pr-a { z-index: 1; left: 0; top: calc(var(--k) * 10px); width: calc(var(--k) * 262px); rotate: -4deg; }
/* подписът стои встрани от приемането — застъпват се само ръбовете, текстът на протокола остава чист */
/* изрязан от полето за подпис надолу: краткият преход в горния ръб е над празното поле, не над текст — без млечна мъгла */
.pr-b { z-index: 2; left: calc(var(--k) * 236px); top: calc(var(--k) * 96px); width: calc(var(--k) * 224px); rotate: 3.5deg; }
.pr-ring { left: 7.18%; top: 87.72%; width: 85.64%; height: 16.24cqw; border-radius: 3.6cqw; }
/* от „Подпиши и заключи“ излизат двата заключени PDF: светла линия надолу, картите висят на нея */
.pr-out { z-index: 3; left: calc(var(--k) * 318px); top: calc(var(--k) * 566px); display: grid; gap: 10px; width: max-content; max-width: calc(100% - var(--k) * 324px); }
.pr-out::before { content: ""; position: absolute; z-index: -1; left: 33px; top: calc(var(--k) * -28px); bottom: 34px; width: 2px; border-radius: 2px; transform-origin: 50% 0;
  background: linear-gradient(180deg, #fff, rgba(212, 235, 255, .8) 40%, rgba(var(--glow), .6)); box-shadow: 0 0 12px 1px rgba(var(--glow), .9); }
.pr-card { position: relative; } /* пренасяне: общото .fx-wrap */
.pr-card b { font-size: .98rem; }
.fx-note span span { color: #bccad8; }
.pr-card-b .note-ic { background: linear-gradient(180deg, #3f9a6e, #2a7a53); }
.v-proto-copy h2 { max-width: none; font-size: clamp(2.05rem, 1rem + 2.6vw, 3.3rem); }
.pr-list { margin-top: 30px; display: grid; gap: 22px; }
.pr-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.pr-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.2rem; font-weight: 800; color: #fff; background: var(--btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 26px -12px rgba(var(--glow), .9); }
.pr-list h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pr-list p { margin-top: 4px; color: var(--ink-2); max-width: 24em; }
.pr-lock { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding-top: 22px; box-shadow: inset 0 1px 0 rgba(186, 222, 255, .1); font-weight: 600; color: var(--ink); text-wrap: pretty; }
.pr-lock .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--green); stroke-width: 2; }

/* ---------- 6 · ремонт: заглавие, после лентата Старт → Готова е и телефонът; часовникът е малко хапче на края на светлината ---------- */
.v-remont { overflow-x: clip; }
.v-rm { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v-rm .sub { margin-inline: auto; max-width: 30em; text-wrap: balance; }
.rm-stage { --p: 0; position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 760px; margin-top: clamp(64px, 6vw, 84px); }
.rm-stage::before { content: ""; position: absolute; left: 50%; top: 30%; width: 780px; height: 620px; translate: -50% -50%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .24), rgba(var(--glow), .05) 60%, transparent); }
/* лентата на времето: пълни се, а хапчето с часовете се вози на края ѝ */
.rm-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; }
.rm-track { grid-column: 2; grid-row: 1; position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.rm-time { position: absolute; left: calc(var(--p) * 100%); bottom: 18px; translate: calc(var(--p) * -100%) 0; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 12px; white-space: nowrap;
  background: #16212c; box-shadow: inset 0 0 0 1px rgba(156, 203, 242, .35), 0 0 30px -6px rgba(var(--glow), .8), 0 16px 30px -14px rgba(0, 0, 0, .9); }
.rm-time::after { content: ""; position: absolute; left: clamp(14px, calc(var(--p) * 100%), calc(100% - 14px)); top: 100%; width: 2px; height: 12px; translate: -50% 0; background: linear-gradient(180deg, rgba(156, 203, 242, .7), transparent); }
.rm-time-n { font-size: 1.12rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rm-time-n b { font-weight: 800; color: var(--ice); }
.rm-time-ex { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.rm-fill { position: absolute; inset: 0; border-radius: inherit; transform: scaleX(var(--p)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--ice)); box-shadow: 0 0 16px rgba(var(--glow), .9); }
.rm-a, .rm-b { grid-row: 1; font-size: 15.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; transition: color .5s, text-shadow .5s; }
.rm-a { grid-column: 1; }
.rm-b { grid-column: 3; }
.rm-stage.run .rm-a, .rm-stage.done .rm-b { color: var(--ice); text-shadow: 0 0 16px rgba(var(--glow), .9); }
.rm-ph { --cut: .76; width: min(330px, 78vw); margin-top: 30px; }
/* редът на офертата: след одобрението приложението пише „одобрена <дата>“ — не „чака одобрение“ */
.rm-q { position: absolute; z-index: 2; left: 17.1%; top: 36.02%; width: 31%; height: 4.3cqw; padding-left: .68cqw; display: flex; align-items: center;
  background: #15191f; font-size: 3.2cqw; font-weight: 400; line-height: 1; letter-spacing: 0; color: #96a4b4; white-space: nowrap; }
.rm-ring { border-radius: 2.2cqw; }
.rm-start { left: 20.9%; top: 51.7%; width: 67.6%; height: 6.2%; }
.rm-done { left: 20.9%; top: 59.1%; width: 67.6%; height: 6.3%; }
.rm-tap { left: 55%; top: 62.2%; }
.rm-stage.done .rm-start { opacity: .4; transition: opacity .6s; }

/* ---------- украинските екрани („Карпати PDR“): слоевете на техните места (% от екрана 1170 × 2532) ---------- */
/* статусът е висока карта (точка, статус, „змінити“, стрелка една под друга) */
:lang(uk) .v-status { top: 22.31%; height: 26.84cqw; flex-direction: column; justify-content: center; gap: 1.4cqw; font-size: 3.6cqw; }
:lang(uk) .v-status em { margin-left: 0; flex-direction: column; gap: 1.2cqw; font-size: 3cqw; }
:lang(uk) .v-focus { left: 67.56%; top: 47.14%; }
/* превключвателят е по-ниско — лъчът и лупата тръгват от него */
:lang(uk) .v-lens-beam { top: calc(var(--pw) * 1.14); }
:lang(uk) .v-lens { top: calc(var(--pw) * 1.14 + var(--gap-l)); }
:lang(uk) .rm-start { left: 21.11%; top: 59.08%; width: 67.26%; height: 6.16%; }
:lang(uk) .rm-done { left: 21.11%; top: 66.35%; width: 67.26%; height: 6.16%; }
:lang(uk) .rm-tap { top: 69.4%; }
:lang(uk) .ob-start { top: 55.13%; height: 31.28cqw; }
:lang(uk) .b-today { left: 14.5%; top: 34%; width: 14.31%; height: 63.8%; }

/* ---------- полските екрани („Wisła PDR“): статусът е висока карта като в украинския; превключвателят — по-горе от него ---------- */
:lang(pl) .v-status { top: 22.31%; height: 26.84cqw; flex-direction: column; justify-content: center; gap: 1.4cqw; font-size: 3.6cqw; }
:lang(pl) .v-status em { margin-left: 0; flex-direction: column; gap: 1.2cqw; font-size: 3cqw; }
:lang(pl) .v-focus { left: 67.56%; top: 44.53%; }
:lang(pl) .v-lens-beam { top: calc(var(--pw) * 1.08); }
:lang(pl) .v-lens { top: calc(var(--pw) * 1.08 + var(--gap-l)); }
:lang(pl) .rm-start { left: 21.11%; top: 59.08%; width: 67.26%; height: 6.16%; }
:lang(pl) .rm-done { left: 21.11%; top: 66.35%; width: 67.26%; height: 6.16%; }
:lang(pl) .rm-tap { top: 69.4%; }
:lang(pl) .ob-start { top: 55.13%; height: 31.28cqw; }
/* днес е понеделник — първата плочка */
:lang(pl) .b-today { left: 0.73%; top: 33.97%; width: 14.86%; height: 63.8%; }

/* ---------- 7 · финанси: потокът — предаване → редът на екрана → месецът ---------- */
.v-fin { overflow-x: clip; }
.v-fin-head { max-width: 44rem; margin-inline: auto; text-align: center; }
.v-fin-head .sub { margin-inline: auto; max-width: 30em; text-wrap: balance; }
/* три колони: протоколът за предаване (на височината на реда „Градушка“) · телефонът с финансите · месецът и отчетът */
.v-flow { --fw: 290px; --cg: clamp(36px, 4.4vw, 64px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--fw) minmax(0, 1fr); align-items: center; column-gap: var(--cg);
  margin-top: clamp(44px, 5vw, 64px); }
.v-fin-halo { width: 980px; height: 720px; left: 50%; top: 50%; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(var(--green-rgb), .13), rgba(var(--glow), .1) 55%, transparent); }
.fl-hand { position: relative; z-index: 2; justify-self: end; align-self: start; margin-top: calc(var(--fw) * 1.126 - 34px); width: max-content; max-width: 100%; white-space: normal; }
.fl-hand b { font-size: 1.05rem; }
/* светлата нишка от протокола до реда на екрана */
.fl-hand::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--cg) + 22px); height: 2px; margin-top: -1px; border-radius: 2px; transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, rgba(212, 235, 255, .7), #fff); box-shadow: 0 0 12px 1px rgba(var(--glow), .9); }
.fl-wire { display: none; }
.fl-ph { position: relative; z-index: 1; width: var(--fw); }
.fl-row { left: 3.2%; top: 49.6%; width: 93.6%; height: 7.8%; border-radius: 3cqw; }
.fl-inc { --rc: var(--green); left: 3.6%; top: 14.6%; width: 45.4%; height: 8.9%; border-radius: 3cqw; box-shadow: 0 0 0 2px var(--green), 0 0 24px 2px rgba(var(--green-rgb), .6); background: rgba(var(--green-rgb), .08); }
.fl-month { position: relative; z-index: 2; justify-self: start; display: grid; justify-items: start; }
.fin-num { display: flex; align-items: baseline; gap: .08em; font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-num b, .fin-num .cur { color: var(--green); text-shadow: 0 0 26px rgba(var(--green-rgb), .5), 0 0 70px rgba(var(--green-rgb), .25); transition: color .6s, text-shadow .8s; }
.fin-num .cur { font-size: .5em; }
.fin-eq { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.fin-sheet { --cut: .44; width: 250px; margin-top: 26px; rotate: 2deg; }
.fin-line { margin-top: 16px; max-width: 17em; font-size: 1.02rem; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
/* върху истинския бутон „Изпрати по имейл“: при изпращане става зелен */
.fs-real { position: absolute; z-index: 3; left: 4.62%; top: 77.25%; width: 90.7%; height: 13.25cqw; border-radius: 3.1cqw; pointer-events: none; }
.fs-real::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #2d9a66, #1e8a5a); box-shadow: 0 0 5cqw rgba(var(--green-rgb), .45); opacity: 0; }
.fs-plane { position: absolute; z-index: 1; left: 25.6%; top: 50%; width: 4.7cqw; height: 4.7cqw; margin-top: -2.35cqw; color: #fff; stroke-width: 2; opacity: 0; }
.fs-ok { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2cqw; font-size: 4.2cqw; font-weight: 700; color: #fff; white-space: nowrap; opacity: 0; }
.fs-ok .ic { width: 5cqw; height: 5cqw; stroke-width: 2.4; }
.fs-tap { left: 50%; top: 80.3%; }
/* сумата, която излита от реда на екрана към месеца (JS я слага и маха) */
.lg-fly { position: absolute; z-index: 6; pointer-events: none; padding: 6px 12px; border-radius: 11px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--green); background: #10241b; box-shadow: inset 0 0 0 1px rgba(var(--green-rgb), .5), 0 0 30px rgba(var(--green-rgb), .5); }

/* ---------- 8 · обход: огромните числа, под тях екраните ---------- */
.v-obhod { overflow-x: clip; }
.v-ob-head { max-width: 50rem; }
.v-ob-head .sub { max-width: 30em; }
.ob-count { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 60px); padding-top: 42px; text-align: center; }
/* тънка светла линия отгоре: светлината минава по нея и пали числата едно по едно */
.ob-count::before { content: ""; position: absolute; left: 3%; right: 3%; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 235, 255, .85) 14%, #fff 50%, rgba(212, 235, 255, .85) 86%, transparent); box-shadow: 0 0 16px 2px rgba(var(--glow), .85); }
.ob-count::after { content: ""; position: absolute; left: 50%; top: 0; width: 110%; height: 150%; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(var(--glow), .22), transparent 75%); }
.ob-count b { display: inline-flex; align-items: baseline; justify-content: center; font-size: clamp(4.4rem, 1.8rem + 6.4vw, 8.4rem); font-weight: 800; line-height: .92; letter-spacing: -.04em; color: var(--ice); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 56px rgba(var(--glow), .9), 0 0 18px rgba(var(--glow), .55); transition: color .6s, text-shadow .6s; }
.ob-count small { margin-left: .03em; font-size: .46em; color: var(--blue-hi); }
.ob-sign { margin-right: .02em; }
.ob-count li > span { display: block; margin-top: 12px; font-size: 17px; color: var(--ink-2); }
.v-ob-stage { position: relative; margin-top: clamp(40px, 5vw, 60px); padding-bottom: 7%; }
.v-ob-halo { width: 900px; height: 700px; left: 55%; top: 50%; translate: -50% -50%; opacity: .7; }
.ob-win { position: relative; width: 82%; margin-left: auto; }
.ob-ph { position: absolute; z-index: 2; left: 2%; bottom: 0; width: 24%; rotate: -3deg; }
.ob-phm { display: none; }
.ob-next { left: 83.52%; top: 90.25%; width: 14.61%; height: 6.69%; border-radius: 2.2cqw; }
.ob-sum { left: 68.59%; top: 9%; width: 17.03%; height: 9.75%; border-radius: .9cqw; }
.ob-start { left: 4.1%; top: 71.21%; width: 91.7%; height: 24.02cqw; border-radius: 5.2cqw; }
.ob-sum-f { left: 62.4%; top: 7.6%; width: 33.5%; height: 8.9%; border-radius: 3cqw; }
.ob-next-f { left: 47.4%; top: 84.1%; width: 48.2%; height: 6.3%; border-radius: 7cqw; }

/* ---------- 9 · денят: часове, запитвания, известия ---------- */
/* фактурите: текстови карти със значка, без екрани */
.v-fak-cards { margin-top: clamp(28px, 4vw, 44px); }
.v-fak-cards .card { gap: 12px; }
.v-fak-cards .card p { max-width: 38em; }
.v-bento { grid-auto-rows: auto; }
.v-bento .card { gap: 0; padding: 0; min-height: 420px; }
.v-bento .card > * { position: relative; }
.b-text { padding: 28px 28px 0; }
.b-text h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.b-text p { margin-top: 6px; max-width: 24em; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
/* часове: текстът горе вляво, календарът наднича вдясно, седмицата от началния екран — широка лента отдолу, днешният ден пулсира */
.b-hours .b-text { max-width: 20rem; }
.b-peek { position: absolute !important; right: 30px; top: 40px; bottom: 0; width: 250px; overflow: hidden; padding: 8px 8px 0; border-radius: 38px 38px 0 0;
  background: linear-gradient(160deg, #4a5765, #141b23 22%, #0a0f14 70%); box-shadow: 0 -16px 60px -26px rgba(var(--glow), .6); transition: translate .7s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.b-peek img { width: 100%; border-radius: 30px 30px 0 0; }
.b-week { position: absolute !important; z-index: 2; left: 24px; right: 24px; bottom: 24px; display: block; border-radius: 14px; overflow: hidden; background: #0d141b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .95), 0 -20px 50px -30px rgba(var(--glow), .6); }
.b-week img { width: 100%; }
.b-today { position: absolute; left: 57.3%; top: 33.2%; width: 13.8%; height: 64.6%; border-radius: 18% / 11%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--blue-hi), 0 0 22px 3px rgba(var(--glow), .8); }
.b-hours::after { content: ""; position: absolute; right: 0; top: 0; width: 70%; height: 100%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 60% 40%, rgba(var(--glow), .2), transparent 70%); }
/* запитвания: линкът за рекламата над истинския екран, който се подава отдолу */
.b-link { display: flex; align-items: center; gap: 8px; margin: 18px 28px 22px; padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: 14px; line-height: 1.35; color: var(--ink-3); overflow-wrap: anywhere; }
.b-link .ic { width: 14px; height: 14px; flex: none; stroke-width: 2.2; }
.b-link b { display: inline-block; font-weight: 700; color: var(--blue-hi); transition: opacity .3s, translate .4s var(--ease), filter .3s; }
.b-link b.swap { opacity: 0; translate: 0 6px; filter: blur(3px); }
.b-inq-peek { flex: none; width: 72%; height: 236px; margin: auto auto 0; padding: 8px 8px 0; overflow: hidden; border-radius: 42px 42px 0 0;
  background: linear-gradient(160deg, #4a5765, #141b23 22%, #0a0f14 70%); box-shadow: 0 -16px 60px -26px rgba(var(--glow), .6); transition: translate .7s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.b-inq-peek img { width: 100%; border-radius: 34px 34px 0 0; }
.inq-src { left: 3%; top: 13.6%; width: 94%; height: 9.8%; border-radius: 4.5cqw; }
.inq-row { left: 3.4%; top: 25.1%; width: 92.8%; height: 8%; border-radius: 4.5cqw; }
.b-inq::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 100%, rgba(var(--glow), .18), transparent 70%); }
/* известия: широка карта — текстът вляво, известията падат вдясно */
.v-bento .b-notes { min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px; padding-right: 36px; }
.b-notes .b-text { padding: 36px 0 36px 36px; }
.b-notes .b-text h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.b-toasts { display: grid; gap: 10px; padding: 30px 0; max-width: 460px; justify-self: end; width: 100%; }
.b-toasts .toast { padding: 11px 13px; border-radius: 14px; }
.b-toasts .toast-ic { width: 36px; height: 36px; border-radius: 9px; }
.b-toasts .toast:nth-child(2) { margin-left: -22px; margin-right: 22px; }
.b-toasts .toast:nth-child(3) { margin-left: -44px; margin-right: 44px; }
.b-notes::after { content: ""; position: absolute; right: 0; top: 0; width: 60%; height: 100%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 80% at 70% 50%, rgba(var(--glow), .18), transparent 70%); }
@media (hover: hover) {
  .b-hours:hover .b-peek, .b-inq:hover .b-inq-peek { translate: 0 -10px; }
}

/* ---------- 10 · екипът (карта) · без покритие (истински телефон с лентата за връзката) ---------- */
.v-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pair { position: relative; display: flex; flex-direction: column; isolation: isolate; }
.pair h2 { font-size: clamp(1.9rem, 1.2rem + 1.5vw, 2.45rem); }
.pair .sub { margin-top: 12px; font-size: 1.05rem; }
.v-team { padding: clamp(28px, 3.4vw, 44px); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014)); box-shadow: inset 0 0 0 1px var(--edge), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.v-team::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, rgba(var(--glow), .18), transparent 70%); }
.team { margin-top: auto; padding-top: 28px; }
.tsw-hint { margin: 10px 4px 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
/* (превключвателят .tsw и колите .team-cars са общите — styles.css) */
/* без покритие: не карта, а истинският телефон; лентата стои под заглавието на екрана, опашката излита в нея */
.v-off .sub { max-width: 28em; }
.off-stage { --pw: 300px; position: relative; height: calc(var(--pw) * 2.108 * .5 + 10px); margin-top: 26px; }
.off-stage::before { content: ""; position: absolute; left: calc(var(--pw) / 2); top: 50%; width: 620px; height: 520px; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--glow), .22), transparent); }
.off-ph { --cut: .5; position: absolute; left: 0; top: 0; width: var(--pw); }
.off-strip { position: absolute; z-index: 3; left: 0; right: 0; top: 6.56%; height: 15cqw; display: grid; align-items: center; justify-items: start; padding: 0 4.1cqw;
  background: linear-gradient(180deg, #13212d, #0f1a22); }
.off-strip .netbar { grid-area: 1 / 1; min-height: 0; gap: 2.2cqw; padding: 2cqw 3.6cqw; border-radius: 2.8cqw; font-size: 4.6cqw; }
.off-strip .netbar .ic { width: 4.8cqw; height: 4.8cqw; }
.off-strip .netbar-up, .off-strip .netbar-ok { opacity: 0; }
.off-q { --fx: -170px; position: absolute; z-index: 4; left: calc(var(--pw) * .72); top: calc(var(--pw) * .44); display: grid; gap: 8px; width: max-content; }
.off-q li { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 8px 14px 8px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, #1a2531, #121a22); box-shadow: inset 0 0 0 1px rgba(186, 222, 255, .14), 0 18px 36px -18px rgba(0, 0, 0, .95); }
.off-q li:nth-child(1) { --fy: -85px; }
.off-q li:nth-child(2) { --fy: -139px; }
.off-q li:nth-child(3) { --fy: -193px; }
.off-q .ic { width: 20px; height: 20px; flex: none; color: var(--green); stroke-width: 2.4; opacity: 0; }
.off-dev { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15.5px; font-weight: 600; color: var(--ink-2); }
.off-dev .ic { width: 24px; height: 24px; flex: none; color: var(--blue-hi); }

/* ---------- 11 · финалът: истинският екран от демото (споделеният Reflekt и Николай на камерата), до него заглавието и бутонът ---------- */
.v-final { overflow-x: clip; padding-block: clamp(96px, 10vw, 140px) clamp(84px, 8vw, 110px); }
.v-final::before { content: ""; position: absolute; left: 36%; top: 52%; width: 1200px; height: 820px; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .24), rgba(var(--glow), .06) 60%, transparent 100%); }
.v-final-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
.v-final-copy h2 { max-width: 11ch; font-size: clamp(2.4rem, 1rem + 3.8vw, 4.3rem); letter-spacing: -.035em; line-height: 1.02; }
.v-final-copy > p:not(.final-contact) { margin-top: 18px; max-width: 24em; font-size: 1.15rem; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.v-final-copy .btn-xl { margin-top: 34px; }
.v-final-copy .final-contact { justify-content: flex-start; }
.v-final-vis { position: relative; padding: 26px 34px 0 0; }
.v-final-halo { width: 820px; height: 560px; left: 46%; top: 50%; translate: -50% -50%; opacity: .75; }
.v-meet { position: relative; z-index: 1; }
.v-meet-bar { justify-content: flex-start; gap: 10px; height: 34px; padding-inline: 14px; font-size: 13.5px; line-height: 1; white-space: nowrap; }
.v-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }
.v-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px 1px rgba(255, 138, 128, .75); }
.v-share { position: relative; padding-left: 12px; font-weight: 500; color: var(--ink-3); }
.v-share::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; translate: 0 -50%; background: currentColor; }
.v-meet .win-scr img { display: block; }
/* Николай на камерата — кръгът е на горния десен ъгъл, пръстенът „говори“ меко */
.v-cam { position: absolute; z-index: 2; right: 0; top: 0; width: clamp(88px, 8.4vw, 118px); aspect-ratio: 1; border-radius: 50%; }
.v-cam img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #1a232c;
  box-shadow: 0 0 0 3px var(--blue-hi), 0 0 0 7px rgba(9, 14, 19, .9), 0 26px 44px -16px rgba(0, 0, 0, .95), 0 0 44px 6px rgba(var(--glow), .45); }

/* ==========================================================================
   движение — само ако е позволено; без него всичко е на мястото си
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* началото: лампата трепва и пали; всеки екран светва чак щом картинката е готова (.lit от JS) — от средата навън */
  .v-hlamp::before, .v-hlamp .lamp-bar::after { animation: lampOn 1s .3s linear both; }
  .v-hcone { animation: coneOn 1.2s .55s var(--ease) both; }
  .fan-i { animation: vFanIn .9s var(--ease) calc(.05s + var(--i) * 55ms) backwards; }
  .fan-ph { transition: filter 1.1s var(--ease) calc(var(--o) * .24s); }
  .js .fan-i:not(.lit) .fan-ph { filter: brightness(.16) saturate(.3); }
  .fan-l { transition: rotate .55s var(--ease), color .3s, opacity .7s var(--ease) calc(.2s + var(--o) * .24s); }
  .js .fan-i:not(.lit) .fan-l { opacity: 0; }

  /* талонът: номерът, VIN и колата се отмятат едно след друго */
  .js .v-scan:not(.in) .plate { opacity: 0; transform: scale(.92); filter: blur(6px); }
  .v-scan .plate { transition: opacity .7s var(--ease) .15s, transform .9s var(--ease) .15s, filter .7s var(--ease) .15s; }
  .js .v-scan .scan-out li { transition: opacity .6s var(--ease), translate .7s var(--ease); transition-delay: calc(.9s + var(--i) * .45s); }
  .js .v-scan:not(.in) .scan-out li { opacity: 0; translate: -12px 0; }
  .js .v-scan .scan-out .ic { transition: scale .5s var(--ease), opacity .4s; transition-delay: calc(1.15s + var(--i) * .45s); }
  .js .v-scan:not(.in) .scan-out .ic { opacity: 0; scale: .4; }
  /* лупата: излиза от телефона, щом досието се покаже; кръгът около превключвателя пулсира леко */
  .v-lens, .v-lens-beam { transition: opacity .8s var(--ease), translate .9s var(--ease), scale .9s var(--ease); }
  .v-lens, .v-lens-beam { transition-delay: .45s; }
  .js .v-dosie-visual:not(.in) .v-lens { opacity: 0; translate: -30px -24px; scale: .9; }
  .js .v-dosie-visual:not(.in) .v-lens-beam { opacity: 0; }
  .v-dosie.vis .v-focus { animation: ringPulse 2.4s ease-in-out infinite; }

  /* разчетеният лист: линиите се изтеглят към бутоните, после светват точките */
  .js .anat .co { transition: opacity .7s var(--ease), translate .8s var(--ease), box-shadow .4s, background-color .4s; transition-delay: calc(.25s + var(--o) * .11s); }
  .js .anat:not(.in) .co { opacity: 0; }
  .js .co-l::after, .js .co-r::after { transition-delay: calc(.45s + var(--o) * .11s); }
  .js .anat:not(.in) .co::after { transform: scaleX(0); }
  .js .anat-dot { transition-delay: calc(.95s + var(--o) * .11s); }
  .js .anat:not(.in) .anat-dot { opacity: 0; scale: .3; }
  .js .anat .anat-ph { transition: translate 1.1s var(--ease), opacity .8s; }
  .js .anat:not(.in) .anat-ph { opacity: 0; translate: 0 40px; }

  /* цените: телефонът излиза отдолу; линията се изтегля до посочения ред и по нея тича светлина */
  .js .v-ceni-visual:not(.in) .ceni-ph { opacity: 0; translate: 0 60px; }
  .v-ceni-visual .ceni-ph { transition: translate 1.1s var(--ease), opacity .8s; }
  .book-wire.draw .bw-base { animation: vDraw .7s var(--ease) both; }
  .v-ceni.vis .book-wire.draw .bw-run { display: block; animation: run 2.4s var(--ease-io) .7s infinite both; }

  /* офертата: екраните се разместват плавно; линията тича, щом линкът е изпратен; „Одобрявам“ се натиска */
  .js .of-phones:not(.in) .of-i { opacity: 0; translate: 0 50px; }
  .of-phones .of-i { transition: transform 1s var(--ease), opacity .8s var(--ease), translate 1s var(--ease); }
  .of-phones .of-b { transition-delay: 0s, .12s, .12s; }
  .of-phones .of-c { transition-delay: 0s, .24s, .24s; }
  .v-oferta.vis:not([data-pill="0"]) .ln-run { display: block; animation: run 2.4s var(--ease-io) infinite both; }
  .v-oferta.press .approve-btn { animation: press 1s var(--ease) both; }
  .v-oferta.press .approve-btn::after { animation: tap .9s ease-out both; }
  .v-oferta[data-front="0"].vis .of-a .of-ring, .v-oferta[data-front="1"].vis .of-b .of-ring { animation: ringPulse 2.2s ease-in-out .3s 2; }

  /* протоколите: снимките на четирите ъгъла, подписът се рисува, после бутонът и двата заключени PDF по линията */
  .v-proto-stage.in .r-snap { animation: snap 3.2s var(--ease) infinite both; }
  .v-proto-stage.in .r-snap.s1 { animation-delay: .5s; }
  .v-proto-stage.in .r-snap.s2 { animation-delay: .8s; }
  .v-proto-stage.in .r-snap.s3 { animation-delay: 1.1s; }
  .v-proto-stage.in .r-snap.s4 { animation-delay: 1.4s; }
  .v-proto:not(.vis) .r-snap { animation-play-state: paused; }
  .js .v-proto-stage:not(.in) .fx-sign { stroke-dashoffset: 1; }
  .v-proto-stage.in .fx-sign { animation: sign 1.3s cubic-bezier(.55, .1, .35, 1) 1s both; }
  .js .v-proto-stage:not(.in) .pr-ring { opacity: 0; }
  .v-proto-stage.in .pr-ring { animation: ringOn .4s var(--ease) 2.3s both, ringPulse 2.2s ease-in-out 2.7s 2; }
  .js .v-proto-stage:not(.in) .pr-out::before { transform: scaleY(0); }
  .pr-out::before { transition: transform .8s var(--ease-io) 2.7s; }
  .js .v-proto-stage:not(.in) .pr-card { opacity: 0; }
  .v-proto-stage.in .pr-card-a { animation: cardIn .7s var(--ease) 3.1s both; }
  .v-proto-stage.in .pr-card-b { animation: cardIn .7s var(--ease) 3.45s both; }
  .js .v-proto-stage .pr-a, .js .v-proto-stage .pr-b { transition: translate 1.2s var(--ease), opacity .9s; }
  .js .v-proto-stage .pr-b { transition-delay: .15s; }
  .js .v-proto-stage:not(.in) .pr-a { opacity: 0; translate: -40px 30px; }
  .js .v-proto-stage:not(.in) .pr-b { opacity: 0; translate: 40px 50px; }

  /* ремонтът: екранът се избистря, „Старт“ светва, лентата се пълни, „Готова е“ се натиска */
  .rm-ph { transition: opacity 1s var(--ease), filter 1s var(--ease); }
  .js .rm-stage:not(.run) .rm-ph { opacity: .3; filter: blur(10px); }
  .js .rm-stage:not(.run) .rm-start, .js .rm-stage:not(.done) .rm-done { opacity: 0; }
  .rm-stage.run .rm-start { animation: ringOn .4s var(--ease) both, ringPulse 2s ease-in-out .4s 1; }
  .rm-stage.done .rm-done { animation: ringOn .4s var(--ease) both, ringPulse 2.2s ease-in-out .5s 3; }
  .js .rm-tap { opacity: 0; }
  .rm-stage.done .rm-tap { animation: tap .9s var(--ease) both; }

  /* парите — потокът (vazmozhnosti.js → .s1 .s2 .s3 .sent): протоколът светва и нишката стига реда, редът светва,
     сумата излита към месеца и той се събира; накрая отчетът тръгва от истинския бутон */
  .js .v-flow:not(.s1) .fl-hand { opacity: .4; filter: saturate(.3); transform: translateX(-16px); }
  .fl-hand { transition: opacity .7s var(--ease), filter .7s var(--ease), transform .8s var(--ease); }
  .js .v-flow:not(.s1) .fl-hand::after { transform: scaleX(0); }
  .fl-hand::after { transition: transform .7s var(--ease-io) .35s; }
  .js .v-flow:not(.s2) .fl-row, .js .v-flow:not(.s3) .fl-inc { opacity: 0; scale: 1.08; }
  .fl-row, .fl-inc { transition: opacity .45s var(--ease), scale .55s var(--ease); }
  .v-flow.s2 .fl-row { animation: ringPulse 2.2s ease-in-out .45s 2; }
  .v-flow.s3 .fl-inc { animation: ringPulse 2.2s ease-in-out .45s 2; }
  .js .v-flow:not(.s3) .fin-num b, .js .v-flow:not(.s3) .fin-num .cur { color: #3f7a5e; text-shadow: none; }
  .js .v-flow:not(.in) .fl-ph { opacity: 0; translate: 0 40px; }
  .js .v-flow:not(.in) .fl-month { opacity: 0; translate: 24px 0; }
  .fl-ph, .fl-month { transition: opacity .9s var(--ease), translate 1.1s var(--ease); }
  .fl-month { transition-delay: .15s; }
  /* отчетът тръгва от истинския бутон: докосване, самолетчето излита, бутонът става зелен */
  .v-flow.sent .fs-tap { animation: tap .9s var(--ease) both; }
  .v-flow.sent .fs-plane { animation: vPlane 1.1s var(--ease-io) .1s both; }
  .v-flow.sent .fs-real::before { animation: vShow .5s var(--ease) .55s both; }
  .v-flow.sent .fs-ok { animation: vIn .5s var(--ease) .75s both; }

  /* обходът: светлината минава по линията и пали числата едно по едно (site.js: [data-sweep]) */
  .js .v-obhod:not(.in) .ob-count::before { clip-path: inset(-30px 100% -30px -30px); }
  .v-obhod.in .ob-count::before { animation: vSweep 1.2s linear both; }
  .js .v-obhod .ob-count li:not(.lit) b { color: #2a3642; text-shadow: none; }
  .js .v-obhod .ob-count li:not(.lit) small { color: #2a3642; }
  .js .v-obhod .ob-count li:not(.lit) > span { opacity: .45; }
  .ob-count li > span { transition: opacity .6s var(--ease); }
  .js .v-ob-stage:not(.in) .ob-win { opacity: .2; filter: blur(12px); }
  .v-ob-stage .ob-win { transition: opacity 1.1s var(--ease), filter 1.1s var(--ease); }
  .js .v-ob-stage:not(.in) .ob-ph, .js .v-ob-stage:not(.in) .ob-phm { translate: 0 70px; opacity: 0; }
  .v-ob-stage .ob-ph, .v-ob-stage .ob-phm { transition: translate 1.2s var(--ease) .2s, opacity .8s .2s; }
  .js .v-ob-stage:not(.in) .ob-ring { opacity: 0; }
  .v-ob-stage.in .ob-start { animation: ringOn .4s var(--ease) .9s both, ringPulse 2.2s ease-in-out 1.3s 2; }
  .v-ob-stage.in .ob-next, .v-ob-stage.in .ob-next-f { animation: ringOn .4s var(--ease) 1.7s both, ringPulse 2.2s ease-in-out 2.1s 2; }
  .v-ob-stage.in .ob-sum, .v-ob-stage.in .ob-sum-f { animation: ringOn .4s var(--ease) .9s both, ringPulse 2.2s ease-in-out 1.3s 3; }

  /* (бентото влиза със стъпка; посочената карта се повдига — общото правило за .card в [data-stagger]) */
  /* часове: днешният ден пулсира */
  .v-den.vis .b-today { animation: vToday 2.6s ease-in-out infinite; }
  /* запитванията: пръстенът върви от „откъде идват“ към запитването със снимките */
  .inq-src { animation: vAltA 4.8s ease-in-out infinite; }
  .inq-row { animation: vAltB 4.8s ease-in-out infinite; }
  .v-den:not(.vis) .inq-src, .v-den:not(.vis) .inq-row, .v-den:not(.vis) .b-today { animation-play-state: paused; }

  /* известията падат едно след друго */
  .js .b-toasts:not(.in) .toast { opacity: 0; translate: 0 -16px; scale: .96; }
  .b-toasts .toast { transition: opacity .7s var(--ease), translate .8s var(--ease), scale .8s var(--ease); }
  .b-toasts.in .toast:nth-child(3) { transition-delay: .3s; }
  .b-toasts.in .toast:nth-child(2) { transition-delay: .75s; }
  .b-toasts.in .toast:nth-child(1) { transition-delay: 1.2s; }

  /* без покритие: чакат → качва (записите излитат нагоре в лентата) → качено, и пак (спи извън екрана — [data-live]) */
  .off-strip .netbar-off { animation: vBarOff 9s linear infinite; }
  .off-strip .netbar-up { animation: vBarUp 9s linear infinite; }
  .off-strip .netbar-ok { animation: vBarOk 9s linear infinite; }
  .off-strip .netbar-up .spin { animation: spin 1.2s linear infinite; }
  .off-q li:nth-child(1) { animation: vQ0 9s var(--ease-io) infinite; }
  .off-q li:nth-child(2) { animation: vQ1 9s var(--ease-io) infinite; }
  .off-q li:nth-child(3) { animation: vQ2 9s var(--ease-io) infinite; }
  .off-q li:nth-child(1) .ic { animation: vChk0 9s var(--ease) infinite; }
  .off-q li:nth-child(2) .ic { animation: vChk1 9s var(--ease) infinite; }
  .off-q li:nth-child(3) .ic { animation: vChk2 9s var(--ease) infinite; }
  .v-pair:not(.vis) .off-strip *, .v-pair:not(.vis) .off-q li, .v-pair:not(.vis) .off-q .ic { animation-play-state: paused; }

  /* финалът: екранът на срещата изплува, камерата идва след него; точката „На живо“ диша, докато секцията се вижда */
  .js .v-final-vis:not(.in) .v-meet { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(10px); }
  .v-meet { transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease); }
  .js .v-final-vis:not(.in) .v-cam { opacity: 0; scale: .6; }
  .v-cam { transition: opacity .7s var(--ease) .6s, scale .8s var(--ease) .6s; }
  .v-final-vis.in .v-live i { animation: vLive 2.4s ease-in-out 4; }
}

/* без движение: крайното състояние — всичко е качено, отметките са там */
@media (prefers-reduced-motion: reduce) {
  .off-strip .netbar-off, .off-strip .netbar-up { opacity: 0; }
  .off-strip .netbar-ok { opacity: 1; }
  .off-q .ic { opacity: 1; }
}

@keyframes vLive { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes vFanIn { from { opacity: 0; translate: -50% 40px; } }
@keyframes vFanUp { from { opacity: 0; translate: 0 36px; } }
@keyframes vFlow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes vSweep { from { clip-path: inset(-30px 100% -30px -30px); } to { clip-path: inset(-30px -30px -30px -30px); } }
@keyframes vDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vPlane { 0% { transform: none; opacity: 1; } 55% { opacity: 1; } 100% { transform: translate(34cqw, -30cqw) rotate(-12deg) scale(.7); opacity: 0; } }
@keyframes vShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes vIn { from { opacity: 0; transform: translateY(1.6cqw); } to { opacity: 1; transform: none; } }
@keyframes vToday { 0%, 100% { box-shadow: 0 0 0 2px var(--blue-hi), 0 0 18px 2px rgba(var(--glow), .6); } 50% { box-shadow: 0 0 0 3px var(--ice), 0 0 34px 8px rgba(var(--glow), .95); } }
@keyframes vAltA { 0%, 46% { opacity: 1; } 52%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vAltB { 0%, 46% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vBarOff { 0%, 31% { opacity: 1; } 34%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vBarUp { 0%, 31% { opacity: 0; } 34%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes vBarOk { 0%, 64% { opacity: 0; } 67%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes vChk0 { 0%, 34% { opacity: 0; scale: .4; } 37%, 100% { opacity: 1; scale: 1; } }
@keyframes vChk1 { 0%, 42% { opacity: 0; scale: .4; } 45%, 100% { opacity: 1; scale: 1; } }
@keyframes vChk2 { 0%, 50% { opacity: 0; scale: .4; } 53%, 100% { opacity: 1; scale: 1; } }
/* записът чака; щом се качи, отлита нагоре в лентата и изчезва; накрая идват нови */
@keyframes vQ0 { 0%, 38% { translate: 0 0; scale: 1; opacity: 1; } 46% { translate: var(--fx) var(--fy); scale: .45; opacity: 0; } 94% { translate: 0 14px; scale: 1; opacity: 0; } 100% { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes vQ1 { 0%, 46% { translate: 0 0; scale: 1; opacity: 1; } 54% { translate: var(--fx) var(--fy); scale: .45; opacity: 0; } 95% { translate: 0 14px; scale: 1; opacity: 0; } 100% { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes vQ2 { 0%, 54% { translate: 0 0; scale: 1; opacity: 1; } 62% { translate: var(--fx) var(--fy); scale: .45; opacity: 0; } 96% { translate: 0 14px; scale: 1; opacity: 0; } 100% { translate: 0 0; scale: 1; opacity: 1; } }

/* ==========================================================================
   размери
   ========================================================================== */
@media (max-width: 1100px) {
  .anat { --pw: 300px; --gap: 30px; }
  .co { max-width: min(19rem, calc(50% - var(--pw) / 2 - var(--gap))); }
  .co > span:not([class]) { font-size: .9rem; }
  .v-dosie-visual { --pw: 256px; }
  .v-proto-stage { --k: .84; }
  .v-proto-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  .v-flow { --fw: 256px; }
  .v-scan { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; }
  .scan-out { width: 100%; max-width: 380px; }
  .of-stage { --pa: 214px; --pb: 232px; --pc: 262px; height: 660px; }
  .of-a { left: calc(50% - 272px - var(--pa) / 2); top: 96px; }
  .of-b { left: calc(50% - 114px - var(--pb) / 2); top: 64px; }
  .of-c { left: calc(50% + 250px - var(--pc) / 2); top: 38px; }
  .of-link { left: calc(50% - 20px); top: 330px; width: 176px; height: 98px; }
  .of-tag { left: calc(50% + 68px); top: 330px; }
  .of-pill-d { left: calc(50% - 114px); top: 522px; }
  .v-oferta[data-front="1"] .of-pill-d { top: 564px; }
  .ceni-ph { width: min(280px, 100%); }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .v-bento .span-7 { grid-column: span 7; }
  .v-bento .span-5 { grid-column: span 5; }
  .b-hours .b-text { max-width: 16.5rem; }
  .b-peek { right: 22px; width: 210px; }
  .b-inq-peek { width: 84%; }
}

/* ветрилото става лента за плъзгане, преди да опре в ръбовете */
@media (max-width: 1000px) {
  .v-fan-stage { padding-top: 50px; }
  .v-hlamp { --lw: 82vw; --lt: 6px; }
  .v-hcone { --cw: 170vw; --ch: 420px; --ct: 16px; }
  .v-fan { display: flex; gap: 12px; height: auto; max-width: none; padding: 6px var(--gut) 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .v-fan::-webkit-scrollbar { display: none; }
  .fan-i { position: relative; left: auto; top: auto; flex: 0 0 min(44vw, 204px); translate: none; rotate: none; scroll-snap-align: start; }
  .fan-l { rotate: none; }
  @media (hover: hover) { .fan-i:hover { translate: 0 -8px; } }
  @media (prefers-reduced-motion: no-preference) { .fan-i { animation-name: vFanUp; } }
  .v-dosie-grid { grid-template-columns: minmax(0, 1fr); }
  .v-dosie-visual { justify-self: center; margin-top: 8px; }
}

/* телефон и тесен таблет */
@media (max-width: 860px) {
  .v-dosie-copy h2 { max-width: none; }
  .v-scan { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; margin-top: 24px; padding-top: 10px; background: radial-gradient(60% 50% at 50% 30%, rgba(var(--glow), .2), transparent 100%); }
  .v-scan::before { display: none; }
  .v-scan .plate { height: 54px; }
  .v-scan .plate-n { font-size: 1.6rem; padding: 0 16px; }
  .scan-out { width: 100%; max-width: 360px; }
  .v-dosie-visual { --pw: min(60vw, 244px); --lx: .16; --lw: 1.24; --gap-l: 40px; }
  .v-dosie-halo { width: 120vw; height: 120vw; left: 50%; }
  .v-lens { padding: 10px 10px 12px; border-radius: 20px; }
  .v-lens figcaption { margin-top: 10px; font-size: 14.5px; }
  /* досието на телефон: заглавие → табелата → телефонът с лупата → едно изречение → мостът към офертата */
  .v-dosie-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .v-dosie-copy { display: contents; }
  .v-dosie-copy h2 { order: 1; }
  .v-scan { order: 2; }
  .v-dosie-visual { order: 3; align-self: center; margin-top: 28px; }
  .v-dosie-sub { order: 4; margin-top: 24px; }
  .v-next { order: 5; align-self: flex-start; margin-top: 18px; }

  /* разчетеният лист: номерата стоят до телефона, бележките стават карти за плъзгане с точки */
  .anat { --pw: min(64vw, 262px); grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .anat-ph { grid-column: 1; justify-self: center; }
  .anat-notes { grid-column: 1; grid-row: 2; display: flex; align-items: flex-start; gap: 12px; margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; pointer-events: auto; }
  .anat-notes::-webkit-scrollbar { display: none; }
  .co { position: relative; top: auto; left: auto; right: auto; flex: 0 0 min(82%, 330px); width: auto; max-width: none; min-height: 112px; padding: 18px 18px 18px 58px; text-align: left; scroll-snap-align: start;
    border-radius: 16px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge); }
  .co::after { display: none; }
  .co::before, .anat-m { content: attr(data-n); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13.5px; font-weight: 800; line-height: 1; color: #0b1016; background: var(--ice); box-shadow: 0 0 14px rgba(var(--glow), .8); }
  .co::before { position: absolute; left: 18px; top: 17px; }
  .co.on { background: radial-gradient(90% 120% at 0% 0%, rgba(var(--glow), .2), transparent 70%), var(--glass); box-shadow: inset 0 0 0 1px rgba(156, 203, 242, .4); }
  .anat-m { position: absolute; z-index: 2; top: calc(var(--pw) * .024 + var(--sh) * var(--y) - 14px); left: calc(50% + var(--s) * (var(--pw) / 2 + 22px)); translate: -50% 0; transition: scale .4s var(--ease), opacity .4s, box-shadow .4s; }
  .anat:has(.co.on) .anat-m:not(.on) { opacity: .4; scale: .85; }
  .anat:has(.co.on) .anat-dot:not(.on) { opacity: .35; scale: .8; }
  .anat-m.on { scale: 1.15; box-shadow: 0 0 0 4px rgba(var(--glow), .35), 0 0 20px rgba(var(--glow), 1); }
  .anat-dot.on { scale: 1.5; box-shadow: 0 0 0 1.4cqw rgba(var(--glow), .45), 0 0 6cqw 2cqw rgba(var(--glow), .95); }
  .co > b { font-size: 1.05rem; line-height: 26px; }
  .co > span:not([class]) { font-size: .95rem; }
  .anat-dot { width: 3.8cqw; }
  .js .anat .co { transition-delay: calc(.2s + var(--o) * .05s); }
  .js .anat:not(.in) .co { translate: 0 10px; }

  /* цените на телефон: заглавие → телефонът → четирите думи (без сивите подредове) → едно изречение */
  .v-ceni-grid { display: flex; flex-direction: column; gap: 0; }
  .v-ceni-copy { display: contents; }
  .v-ceni-copy h2 { order: 1; }
  .v-ceni-visual { order: 2; margin-top: 26px; }
  .book { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .v-ceni-sub { order: 4; margin-top: 18px; }
  .book li + li { box-shadow: none; }
  .book button { display: flex; align-items: center; min-height: 56px; padding: 10px 14px; border-radius: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge); }
  .book button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(156, 203, 242, .45), 0 0 30px -10px rgba(var(--glow), .8); }
  .book strong { font-size: 1.08rem; line-height: 1.2; }
  .book button span { display: none; }
  .book-wire { display: none; }
  .ceni-ph { width: min(70vw, 280px); }

  /* офертата: лента за плъзгане с точки; статусът и надписът следват картата */
  .of-stage { width: auto; height: auto; margin-top: 28px; }
  .of-stage::before { width: 140vw; height: 110vw; }
  .of-link, .of-tag { display: none; }
  .of-phones { position: relative; inset: auto; display: flex; gap: 14px; padding: 16px var(--gut) 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .of-phones::-webkit-scrollbar { display: none; }
  .of-i { position: relative; left: auto; top: auto; flex: 0 0 min(64vw, 256px); width: auto; transform: none !important; scroll-snap-align: start; }
  .of-i::before { display: none; }
  .v-oferta .of-i .of-ph { filter: none !important; }
  .of-pill-d { display: none; }
  .of-pill-m { position: relative; left: auto; bottom: auto; translate: none; display: grid; width: max-content; margin: 14px auto 0; font-size: 1rem; }
  .of-steps { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
  .of-steps li { grid-area: 1 / 1; visibility: hidden; }
  .v-oferta[data-front="0"] .of-steps li:nth-child(1), .v-oferta[data-front="1"] .of-steps li:nth-child(2), .v-oferta[data-front="2"] .of-steps li:nth-child(3) { visibility: visible; }
  .of-steps button { padding: 16px 18px 18px 16px; }
  .of-n { font-size: 2.6rem; }

  /* протоколите на телефон: заглавие → двата листа и двата PDF → по едно изречение за всеки протокол */
  .v-proto-grid { display: flex; flex-direction: column; gap: 0; }
  .v-proto-copy { display: contents; }
  .v-proto-copy h2 { order: 1; font-size: var(--fs-h2); }
  .v-proto-stage { order: 2; }
  .pr-list { order: 3; margin-top: 26px; gap: 16px; }
  .pr-lock { display: none; }
  .v-proto-stage { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 460px; margin: 28px auto 0; }
  .v-proto-stage::before { width: 130vw; height: 130vw; }
  .pr-a, .pr-b, .pr-out { position: relative; left: auto; right: auto; top: auto; bottom: auto; grid-area: 1 / 1; }
  .pr-a { width: min(52vw, 230px); justify-self: start; align-self: start; rotate: -3deg; }
  .pr-b { width: min(44vw, 200px); justify-self: end; align-self: start; margin-top: 56px; rotate: 3deg; }
  .pr-out { grid-area: 2 / 1; justify-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; margin-top: 22px; gap: 10px; }
  .pr-out::before { display: none; }
  .pr-card { padding: 10px 12px 10px 10px; gap: 10px; }
  .pr-card .note-ic { width: 38px; height: 38px; }
  .pr-card b { font-size: .92rem; }

  /* ремонтът: надписите под лентата, лентата — през цялата ширина (хапчето с часовете има къде да се вози) */
  .rm-stage { margin-top: 60px; }
  .rm-bar { grid-template-columns: auto auto; justify-content: space-between; row-gap: 12px; }
  .rm-a { grid-column: 1; grid-row: 2; }
  .rm-b { grid-column: 2; grid-row: 2; }
  .rm-track { grid-column: 1 / -1; grid-row: 1; margin-inline: 14px; }
  .rm-a, .rm-b { font-size: 14px; }
  .rm-time { padding: 7px 12px; }
  .rm-time-n { font-size: 1.02rem; }
  .rm-ph { width: min(76vw, 300px); margin-top: 24px; }

  /* парите на телефон: протоколът → нишката надолу → телефонът → месецът и едно изречение (без листа за отчета) */
  .v-flow { --fw: min(66vw, 268px); grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 26px; margin-top: 32px; }
  .fl-hand { justify-self: center; margin-top: 0; }
  .fl-hand::after { left: 50%; top: 100%; width: 2px; height: 26px; margin: 0 0 0 -1px; transform-origin: 50% 0; background: linear-gradient(180deg, #fff, rgba(212, 235, 255, .5)); }
  .js .v-flow:not(.s1) .fl-hand::after { transform: scaleY(0); }
  .js .v-flow:not(.s1) .fl-hand { transform: translateY(-12px); }
  .fl-month { justify-self: center; justify-items: center; text-align: center; }
  .fin-num { font-size: clamp(2.6rem, 1rem + 9vw, 3.4rem); }
  .fl-month .fin-sheet { display: none; }
  .fin-line { margin-top: 12px; }
  .v-fin-halo { width: 140vw; height: 140vw; }

  /* обходът: числата в ред, на мястото на компютъра — самият обход в телефона */
  .ob-count { gap: 8px; margin-top: 34px; padding-top: 30px; }
  .ob-count b { font-size: clamp(2.6rem, .6rem + 10vw, 4rem); }
  .ob-count li > span { margin-top: 8px; font-size: 14.5px; line-height: 1.35; }
  .v-ob-stage { margin-top: 32px; padding-bottom: 0; display: flex; justify-content: center; }
  .ob-win, .ob-ph { display: none; }
  .ob-phm { display: block; position: relative; width: min(74vw, 300px); }
  .v-ob-halo { width: 130vw; height: 100vw; left: 50%; }

  .v-bento .card { min-height: 480px; }
  .b-peek { left: 50%; right: auto; top: 150px; width: 70%; translate: -50% 0; }
  .b-week { display: none; }
  @media (hover: hover) { .b-hours:hover .b-peek { translate: -50% -10px; } }
  .b-text { padding: 22px 22px 0; }
  .b-link { margin: 16px 22px 18px; }
  .b-inq-peek { width: 76%; height: 250px; }
  .v-bento .b-notes { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-right: 0; }
  .b-notes .b-text { padding: 22px 22px 0; }
  .b-notes .b-text h3 { font-size: 1.4rem; }
  .b-toasts { padding: 20px 16px 22px; margin-top: auto; justify-self: auto; }
  .b-toasts .toast:nth-child(2) { margin-left: 8px; margin-right: 0; }
  .b-toasts .toast:nth-child(3) { margin-left: 16px; margin-right: 0; }

  /* екипът и без покритие: две карти за плъзгане с точки */
  /* лентата е самата .wrap (тя вече е от ръба до ръба) — затова без отрицателни полета, само полето отвътре */
  .v-pair-grid { display: flex; align-items: stretch; gap: 12px; margin-inline: 0; padding: 4px var(--gut) 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .v-pair-grid::-webkit-scrollbar { display: none; }
  .pair { flex: 0 0 min(88vw, 400px); scroll-snap-align: start; padding: 24px 20px; border-radius: 20px; overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014)); box-shadow: inset 0 0 0 1px var(--edge), 0 30px 60px -40px rgba(0, 0, 0, .9); }
  .pair h2 { font-size: 1.7rem; }
  .tsw { font-size: 1.02rem; padding-left: 16px; }
  .team-cars li { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'plate sum' 'car sum'; gap: 2px 10px; padding: 9px 14px 9px 10px; }
  .team-cars .plate { grid-area: plate; justify-self: start; }
  .tc-car { grid-area: car; font-size: 13.5px; }
  .tc-sum { grid-area: sum; }
  .off-stage { --pw: min(58vw, 220px); margin-top: 20px; }
  .off-q { --fx: -80px; left: calc(var(--pw) * .26); top: calc(var(--pw) * .5); gap: 6px; }
  .off-q li { min-height: 44px; padding: 7px 12px 7px 14px; font-size: 14px; }
  .off-q li:nth-child(1) { --fy: -84px; }
  .off-q li:nth-child(2) { --fy: -134px; }
  .off-q li:nth-child(3) { --fy: -184px; }
  .off-dev { margin-top: 18px; font-size: 14.5px; align-items: flex-start; }

  /* финалът на телефон: заглавие → екранът от срещата → едно изречение → бутонът → контактите */
  .v-final-grid { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .v-final-copy { display: contents; }
  .v-final-copy h2 { order: 1; margin-inline: auto; }
  .v-final-vis { order: 2; width: 100%; max-width: 480px; margin-top: 30px; padding: 20px 22px 0 0; }
  .v-final-copy > p:not(.final-contact) { order: 3; margin-top: 22px; }
  .v-final-copy .btn-xl { order: 4; margin-top: 26px; }
  .v-final-copy .final-contact { order: 5; justify-content: center; }
  .v-cam { width: 78px; }
  .v-meet-bar { height: 30px; font-size: 13.5px; }
}

@media (max-width: 380px) {
  .scan-out li { grid-template-columns: 52px minmax(0, 1fr) 20px; font-size: 15px; }
  .rm-a, .rm-b { font-size: 12.5px; }
}