/* ==========================================================================
   Демо — страницата, от която се записвате. Общата система е в styles.css
   (ръководство: tmp/site-v3/components.md). Тук е само своето:
     1  горе: заглавие + „30–40 мин“, под тях видео срещата (десктоп прозорец); формата под лампата вдясно
     2  как минава: четири числа по пътя, светлината тече и ги пали; парите са последни
     3  какво ще видите: ветрило от истински екрани по ред; светлината минава веднъж по тях и спира на финансите
     4  двете карти: с вашите цени · питайте (въпросите за демото са в чата)
     5  финалът: заглавие → известието с линка за срещата каца → бутонът; номерът е второ ниво
     6  движение (само при prefers-reduced-motion: no-preference)
     7  таблет и телефон
   ========================================================================== */

/* горната лента: главният бутон е във формата — горното „Безплатно демо“ се крие на всяка ширина,
   докато той (или финалният) се вижда: общото body.cta-wide (горния коментар на demo.html) */

/* ---------- 1 · горе ---------- */
.dtop { position: relative; padding: calc(var(--nav-h) + clamp(28px, 3vw, 40px)) 0 clamp(56px, 6vw, 96px); overflow-x: clip; }
.dtop-sky { position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none;
  background: radial-gradient(ellipse 48% 55% at 16% 0%, rgba(var(--glow), .2), transparent 70%), radial-gradient(ellipse 40% 50% at 80% 0%, rgba(var(--glow), .12), transparent 70%); }
/* компютър (≥961): вляво заглавието, „30–40 мин“ и срещата една под друга; вдясно формата под лампата.
   .dtop-copy е само обвивка (display: contents) — на телефон редът е заглавие → форма → среща. */
.dtop-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto auto 1fr;
  grid-template-areas: "h1 form" "lead form" "vis form"; column-gap: clamp(44px, 5vw, 72px); align-items: start; }
.dtop-copy { display: contents; }
.dtop-copy h1 { grid-area: h1; position: relative; z-index: 2; padding-top: clamp(8px, 1.6vw, 24px); }
.dform-wrap { grid-area: form; }
.dcv { grid-area: vis; }

/* числото и едното изречение — един ред под заглавието */
.dtop-lead { grid-area: lead; position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(16px, 1.8vw, 24px); margin-top: clamp(18px, 2vw, 26px); }
.dtop-min { flex: none; display: flex; align-items: baseline; gap: .1em; white-space: nowrap;
  font-size: clamp(2.7rem, 1.5rem + 2.3vw, 4.1rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--ice); text-shadow: 0 0 44px rgba(var(--glow), .8), 0 0 14px rgba(var(--glow), .45); }
.dtop-min small { font-size: .4em; font-weight: 800; letter-spacing: -.01em; color: var(--blue-hi); text-shadow: none; }
.dtop-lead .lead { margin: 0; max-width: 12em; text-wrap: balance; }

/* видео срещата: пейзажен прозорец — споделеният екран е Reflekt на компютър (щетите на колата),
   сумата е долу, както в приложението; камерата на Николай стои на горния десен ъгъл */
.dcv { position: relative; width: 100%; max-width: 640px; margin-top: clamp(22px, 2.4vw, 30px); padding: 22px 30px 0 0; }
.dcv-halo { width: 760px; height: 520px; left: -80px; top: -30px; z-index: 0; opacity: .6; }
.dcv-win { position: relative; z-index: 1; }
/* лентата на прозореца казва, че това е среща на живо (не адрес) */
.dcv-bar { justify-content: flex-start; gap: 10px; height: 34px; padding-inline: 14px; font-size: 13px; line-height: 1; white-space: nowrap; }
.dcv-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }
.dcv-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px 1px rgba(255, 138, 128, .75); }
.dcv-share { position: relative; padding-left: 12px; font-weight: 500; color: var(--ink-3); }
.dcv-share::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; translate: 0 -50%; background: currentColor; }
.dcv-scr { background: #0b1117; }
/* панелите с цени (място в % от изреза 1600×900); „булото“ ги държи сиви, докато не ги докоснем */
.dcv-p { position: absolute; z-index: 2; pointer-events: none; opacity: 0; border-radius: 1.4cqw; }
.p-kapak { left: 57.83%; top: 13.63%; width: 11%; height: 22.81%; }
.p-lpv { left: 44.67%; top: 36.44%; width: 11.17%; height: 19.56%; }
.p-pokriv { left: 58.83%; top: 42.07%; width: 9%; height: 24.59%; }
.p-bag { left: 57.83%; top: 72.3%; width: 10.83%; height: 24%; }
.dcv-tap { position: absolute; z-index: 3; left: 50%; top: 50%; width: 6.5%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, .25) 60%, transparent); }
/* долу — сумата, както в приложението */
.dcv-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 14px 13px 18px;
  background: #0f161d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.dcv-total-l { grid-column: 1; font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.dcv-total b { grid-column: 1; font-size: clamp(1.35rem, 1.1rem + .6vw, 1.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
/* „Готово“ е част от екрана, не бутон на страницата: стъклено, без преливката на главния бутон */
.dcv-done { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 11px; font-size: 14.5px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: opacity .5s var(--ease), filter .5s var(--ease); }
.dcv-done .ic { width: 16px; height: 16px; stroke-width: 2.4; color: var(--blue-hi); }
/* камерата: кръгът е на снимката, пръстенът „говори“ е отделен (::before/::after), за да се движи евтино */
.dcv-cam { position: absolute; z-index: 2; right: 0; top: 0; width: clamp(84px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; }
.dcv-cam img { position: relative; z-index: 1; 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); }
.dcv-cam::before, .dcv-cam::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.dcv-cam::before { inset: -8px; box-shadow: 0 0 36px 8px rgba(var(--glow), .6); opacity: .75; }
.dcv-cam::after { inset: -9px; box-shadow: 0 0 0 2px rgba(156, 203, 242, .55); opacity: 0; }

/* лампата виси точно над формата: къса, конусът пада върху картата — формата е „масата“ под светлината */
.dform-wrap { position: relative; padding-top: 72px; }
.lamp-form { --lw: min(330px, 68%); --lx: 50%; --lt: 0px; --lh: 22px; }
.cone-form { --lx: 50%; --cw: 780px; --ch: 660px; --ct: 14px; --cone: .34; }

/* картата с формата: плътна, за да се чете; горният ѝ ръб и горната половина хващат светлината */
.dform { position: relative; z-index: 1; gap: 18px; padding: clamp(24px, 3vw, 34px); border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 34, 45, .88), rgba(12, 18, 25, .95));
  box-shadow: inset 0 0 0 1px rgba(186, 222, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .08), 0 50px 100px -50px rgba(0, 0, 0, .95), 0 40px 90px -56px rgba(var(--glow), .85); }
.dform::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 60%; border-radius: inherit; pointer-events: none;
  background: radial-gradient(58% 70% at 50% 0%, rgba(214, 236, 255, .2), rgba(var(--glow), .06) 55%, transparent 80%); }
.dform::after { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(232, 245, 255, .95), transparent); box-shadow: 0 0 14px 1px rgba(190, 225, 255, .55); }
.dform > * { position: relative; }
.dform-head h2 { font-size: clamp(1.7rem, 1.25rem + 1vw, 2.1rem); line-height: 1.08; letter-spacing: -.028em; }
.dform-head p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; text-wrap: balance; }
.dform .opt { margin-left: 4px; font-weight: 500; color: var(--ink-3); }
/* име и телефон — на един ред и на телефон: общото .form-row.pair */
.dform .form-error { margin-top: -2px; }
/* автоматичното попълване (тъмно, не светлосиньо) и подравняването при грешка са общите (.form в styles.css) */
.dform .btn-block { margin-top: 6px; }
/* под бутона: честната бележка за пощата и телефонът; след изпращане на тяхно място идва съобщението */
.dform-foot { display: grid; justify-items: center; gap: 0; margin-top: -4px; text-align: center; }
.dform-note { text-wrap: balance; }
.dform-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; font-size: 15px; color: var(--ink-3); }
.dform-call .ic { color: var(--blue-hi); width: 18px; height: 18px; }
.dform-call a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dform-call a:hover { color: var(--blue-hi); }
.dform.is-sent .dform-foot { display: none; }
.dform-sent { padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; color: #cfeedd; scroll-margin-block: 24px;
  background: rgba(var(--green-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--green-rgb), .28); }
.dform-sent:empty { display: none; }
.dform-sent a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); }
/* не тръгна: кехлибар, не червено — заявката не е изгубена, има телефон */
.dform-sent.is-err { color: #f6dfb8; background: color-mix(in srgb, var(--amber) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent); }
.dform button[type="submit"]:disabled { opacity: .6; cursor: progress; }
.dform-privacy { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); text-align: center; text-wrap: balance; }
.dform-privacy a { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); }

/* („Къде“ и „Удобен час“ са общи — styles.css, „формата за среща“) */

/* ---------- 2 · как минава: четири числа; линията и точките са само фон ---------- */
/* спирките са подмрежа: числата, заглавията и изречението стоят на едни и същи редове */
.route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 3.2vw, 44px); row-gap: 0; padding-top: 44px; }
.route::before, .route::after { content: ""; position: absolute; left: 4px; right: 0; top: 4px; height: 1px; pointer-events: none; }
.route::before { background: linear-gradient(90deg, rgba(140, 192, 236, .22), rgba(140, 192, 236, .22) 80%, transparent); }
.route::after { height: 2px; top: 3.5px; background: linear-gradient(90deg, var(--blue-hi), var(--ice) 55%, var(--green) 88%, rgba(111, 220, 166, 0)); box-shadow: 0 0 12px rgba(var(--glow), .9); transform-origin: 0 50%; }
.stop { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.stop::before { content: ""; position: absolute; left: 0; top: -44px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 14px 3px rgba(var(--glow), .9); }
.stop-money::before { background: var(--green); box-shadow: 0 0 14px 3px rgba(var(--green-rgb), .7); }
/* числата стоят на дъното на реда си: старата цена е над новата, без да бута останалите */
.stop-big { align-self: end; display: flex; align-items: baseline; gap: .08em; white-space: nowrap; font-size: clamp(3rem, 1.4rem + 3vw, 4.4rem); font-weight: 800; line-height: .95; letter-spacing: -.04em;
  color: var(--ice); text-shadow: 0 0 44px rgba(var(--glow), .8), 0 0 14px rgba(var(--glow), .45); }
/* броящите се цифри са с еднаква ширина — нищо не подскача, докато броят */
.stop-big [data-to] { font-variant-numeric: tabular-nums; }
.stop-big small { margin-left: .06em; font-size: .4em; font-weight: 800; letter-spacing: -.01em; color: var(--blue-hi); text-shadow: none; }
.stop h3 { margin-top: 16px; font-size: 1.22rem; }
.stop > p:not(.stop-big) { margin-top: 8px; max-width: 22em; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* парите: 588 € (зачеркнато, светло, половината от 490) над зеленото 490 €/год, под него „2 месеца безплатно“ */
.stop-money .stop-big { flex-direction: column; align-items: flex-start; gap: .14em; }
.stop-old { position: relative; font-size: .5em; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink-2); text-shadow: none; text-decoration: none; }
.stop-old::after { content: ""; position: absolute; left: -5%; right: -5%; top: 56%; height: 2px; border-radius: 2px; background: var(--red);
  box-shadow: 0 0 6px rgba(255, 138, 128, .45); rotate: -5deg; transform-origin: 0 50%; }
.stop-now { display: flex; align-items: baseline; color: var(--green); text-shadow: 0 0 40px rgba(var(--green-rgb), .5), 0 0 12px rgba(var(--green-rgb), .3); }
.stop-now small { margin-left: .08em; font-size: .36em; color: #a8ecca; text-shadow: none; }
.stop h3.stop-gift { font-size: 1.15rem; font-weight: 700; color: var(--green); text-shadow: 0 0 18px rgba(var(--green-rgb), .45); }

/* ---------- 3 · какво ще видите: ветрилото ---------- */
.dsee { overflow-x: clip; }
.dsee::before { content: ""; position: absolute; left: 50%; top: 60%; width: min(1300px, 150vw); height: 780px; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .25), rgba(var(--glow), .06) 60%, transparent 100%); }
/* по-малко застъпване на голям екран: десните телефони се четат и без мишка */
.fan { --w: 206px; --sp: min(150px, calc((100vw - 460px) / 6)); --rot: 4.5deg; --arc: 9px;
  position: relative; height: calc(var(--w) * 2.11 + 190px); margin: clamp(40px, 5vw, 60px) auto 0; }
/* всяка карта: --k от −3 до 3 (място във ветрилото), --z (кой е отгоре; 30′ е над 25′), --n (поред: старт … 30′) */
.fan-item { position: absolute; left: 50%; top: 10px; width: var(--w); margin-left: calc(var(--w) / -2); z-index: var(--z, 1);
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--k) * var(--sp))) translateY(calc(var(--k) * var(--k) * var(--arc))) rotate(calc(var(--k) * var(--rot))) scale(var(--s, 1)); }
.fan-mid { --s: 1.06; }
/* частта от срещата — светеща дума, изправена (картата е наклонена, думата — не) */
.fan-cap { margin-bottom: 14px; text-align: center; white-space: nowrap; rotate: calc(var(--k) * var(--rot) * -1);
  font-size: clamp(1.25rem, 1rem + .55vw, 1.55rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ice); text-shadow: 0 0 30px rgba(var(--glow), .85), 0 0 10px rgba(var(--glow), .4); transition: color .4s, text-shadow .4s; }
.fan-mid .fan-cap { color: #fff; }
.fan-dots { display: none; }
.dsee-more { position: relative; margin-top: 18px; text-align: center; }
/* ветрилото (≥961): картата .is-on се вдига и идва отпред — при обхождането (demo.js) и при посочване;
   докато тече обхождането или мишката е върху карта (.focus), другите притъмняват. В покой отпред са финансите. */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .fan-item > * { transition: translate .6s var(--ease), filter .5s var(--ease), color .4s, text-shadow .4s; }
}
@media (min-width: 961px) {
  .fan-item.is-on { z-index: 20; }
  .fan-item.is-on > * { translate: 0 -24px; }
  .fan-item.is-on .fan-cap { color: #fff; }
  .fan.focus .fan-item:not(.is-on) .phone { filter: brightness(.5) saturate(.8); }
  .fan.focus .fan-item:not(.is-on) .fan-cap { color: #6f8499; text-shadow: none; }
}
/* без скрипта — само посочване */
@media (hover: hover) and (min-width: 961px) {
  html:not(.js) .fan-item:hover { z-index: 20; }
  html:not(.js) .fan-item:hover > * { translate: 0 -24px; }
  html:not(.js) .fan:has(.fan-item:hover) .fan-item:not(:hover) .phone { filter: brightness(.5) saturate(.8); }
}

/* ---------- 4 · двете карти ---------- */
.dpair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.dcard { gap: 0; padding: 0; }
.dcard-visual { position: relative; flex: 1; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 34px 30px 4px; }
.dpair > .dcard:first-child .dcard-visual { background: radial-gradient(60% 72% at 50% 58%, rgba(var(--glow), .2), transparent 72%); }
.dcard-text { padding: 22px 30px 30px; }
.dcard-text h2 { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.08; letter-spacing: -.028em; }
.dcard-text p { margin-top: 10px; max-width: 30em; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* истинският лист за панела (изрязан вътре в листа — една рамка, не две): B = 12, цената идва от листата.
   Изрезът свършва веднага след цената; кутийката D избледнява към ръба (прозрачността е в самата картинка). */
.dshot { position: relative; width: min(100%, 540px); margin: 0; border-radius: 16px; overflow: hidden; container-type: inline-size; background: #1c232a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 70px -34px rgba(0, 0, 0, .95), 0 24px 70px -34px rgba(var(--glow), .7); }
.dshot picture, .dshot img { display: block; width: 100%; }
.dshot .r-price { left: 76.46%; top: 11.37%; width: 22.35%; height: 13.95%; border-radius: 2.4cqw; }
.dshot .t-b { left: 42.87%; top: 64.38%; width: 12.4%; }

/* въпросите за демото като съобщения: натискате въпрос → „пише…“ → отговорът на Николай */
.chat { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.chat-qs { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chat .bub { max-width: 92%; min-height: 46px; padding: 11px 16px; border-radius: 18px 18px 6px 18px; font-size: 15.5px; font-weight: 500; line-height: 1.35; text-align: left; color: var(--ink-2); text-wrap: pretty;
  background: rgba(85, 145, 196, .13); box-shadow: inset 0 0 0 1px rgba(156, 203, 242, .26);
  transition: background-color .3s, color .3s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.chat .bub[aria-expanded="true"] { color: #fff; background: linear-gradient(180deg, rgba(85, 145, 196, .6), rgba(59, 115, 163, .48));
  box-shadow: inset 0 0 0 1px rgba(156, 203, 242, .42), 0 14px 30px -16px rgba(var(--glow), .9); }
.chat .bub:focus-visible { outline-offset: 3px; border-radius: 18px 18px 6px 18px; }
.chat .bub:active { transform: scale(.98); }
@media (hover: hover) {
  .chat .bub:not([aria-expanded="true"]):hover { color: var(--ink); background: rgba(85, 145, 196, .26); }
}
.chat-him { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; }
.chat-him img { width: 60px; height: 60px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 12px 24px -10px rgba(0, 0, 0, .9); }
.chat-reply { flex: 1; min-width: 0; display: grid; gap: 5px; justify-items: start; }
.chat-who { padding-left: 4px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
/* „пише…“ и отговорите стоят на едно място: клетката е висока колкото най-дългия отговор — нищо не подскача */
.chat-slot { display: grid; justify-items: start; align-items: start; width: 100%; }
.chat-slot > * { grid-area: 1 / 1; }
.typing { display: none; gap: 5px; padding: 15px 17px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--edge); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.chat.typing-on .typing { display: inline-flex; }
.bub-him { padding: 11px 16px; border-radius: 18px 18px 18px 6px; font-size: 15.5px; line-height: 1.45; color: var(--ink); text-wrap: pretty;
  background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px var(--edge-2), 0 14px 30px -18px rgba(0, 0, 0, .8); }
.bub-him .was { color: var(--ink-3); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.bub-him b { font-weight: 700; color: #fff; }
.bub-him .gift { color: var(--green); }
.bub-him .link { white-space: nowrap; }
.js .chat-slot .bub-him { visibility: hidden; opacity: 0; }
.js .chat-slot .bub-him.on { visibility: visible; opacity: 1; }
html:not(.js) .chat-slot .bub-him:not([data-a="0"]) { display: none; }

/* ---------- 5 · финалът ---------- */
.dcall { position: relative; padding-block: clamp(96px, 10vw, 150px) clamp(96px, 10vw, 140px); text-align: center; overflow: hidden; }
.dcall::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1200px, 160vw); height: 760px; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .2), rgba(var(--glow), .05) 60%, transparent 100%); }
.dcall-head { position: relative; z-index: 1; display: flex; justify-content: center; }
.dcall h2 { max-width: 20ch; font-size: clamp(2.2rem, 1rem + 3.4vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; }
/* известието с линка за срещата: стъклото на тостовете, по-голямо; каца и по него минава отблясък */
.dcall-note { position: relative; z-index: 1; display: flex; justify-content: center; margin-block: clamp(36px, 4vw, 52px) clamp(30px, 3.4vw, 44px); }
.dinv { width: min(100%, 480px); gap: 14px; padding: 16px 18px 16px 16px; border-radius: 20px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -24px rgba(0, 0, 0, .95), 0 0 70px -20px rgba(var(--glow), .8); }
.dinv-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 13px; color: #fff; background: var(--btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -10px rgba(var(--glow), .95); }
.dinv-ic .ic { width: 24px; height: 24px; stroke-width: 2; }
.dinv .toast-txt { font-size: 14.5px; }
.dinv .toast-txt b { font-size: 16.5px; }
.dinv-glint { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(226, 242, 255, .22) 48%, rgba(226, 242, 255, .08) 54%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 100% 0; }
.dcall-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
/* бутонът е най-силното нещо тук: широк, с ореола на героя; номерът и пощата са ред под него */
.dcall-halo { left: 50%; top: 50%; width: 760px; height: 300px; translate: -50% -50%; z-index: -1; opacity: .8; }
.dcall-btn { min-width: min(100%, 460px); font-size: 21px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 18px 44px -12px rgba(var(--glow), 1), 0 0 70px -10px rgba(var(--glow), .55); }
.dcall-num { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin-top: 26px; padding: 2px 10px; border-radius: 12px; white-space: nowrap;
  font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--ice); text-shadow: 0 0 18px rgba(var(--glow), .45); transition: color .3s, text-shadow .3s; }
.dcall-num .ic { width: .8em; height: .8em; stroke-width: 2; color: var(--blue-hi); }
.dcall-num:hover { color: #fff; text-shadow: 0 0 24px rgba(var(--glow), .8); }
.dcall-hours { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; font-size: 1.05rem; color: var(--ink-2); }
.dcall-hours a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); }
.dcall-hours a:hover { color: var(--blue-hi); }

/* ==========================================================================
   6 · движение — само ако е позволено; иначе всичко е на мястото си веднага
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* горе: текстът влиза, после формата изплува под лампата и срещата се „свързва“ */
  .dtop-copy h1 { animation: up .9s var(--ease) both; }
  .dtop-lead { animation: up .9s .1s var(--ease) both; }
  .dtop .glow { animation: ignite 1s .25s linear both; }
  .dform { animation: up 1s .2s var(--ease) both; }
  .dcv-win { animation: rise 1.1s .3s var(--ease) both; }
  .dcv-halo { animation: fade 1.4s .3s var(--ease) both; }
  .dcv-cam { animation: camIn .8s .9s var(--ease) both; }
  .dcv-live i { animation: liveDot 2.4s ease-in-out infinite; animation-play-state: paused; }
  /* Николай „говори“: мек пръстен, бавно (4,6 s), докато горната част се вижда */
  .dcv-cam::before { animation: talkGlow 4.6s ease-in-out infinite; animation-play-state: paused; }
  .dcv-cam::after { animation: talkRing 4.6s ease-out infinite; animation-play-state: paused; }
  .dtop.vis .dcv-cam::before, .dtop.vis .dcv-cam::after, .dtop.vis .dcv-live i { animation-play-state: running; }
  /* формата хваща светлината чак когато лампата светне (.lit) */
  .dform::before, .dform::after { transition: opacity 1.2s var(--ease); }
  .js .dtop:not(.lit) .dform::before, .js .dtop:not(.lit) .dform::after { opacity: 0; }

  /* схемата: панелите са сиви, докато не ги докоснем; сумата се събира в demo.js (.dcv-anim) */
  .dcv-anim .dcv-p { opacity: 1; background: rgba(13, 19, 24, .2); -webkit-backdrop-filter: grayscale(1) brightness(.62); backdrop-filter: grayscale(1) brightness(.62); transition: opacity .55s var(--ease); }
  .dcv-anim .dcv-p.on { opacity: 0; }
  .dcv-tap.go { animation: tap .9s ease-out both; }
  .dcv-anim:not(.full) .dcv-done { opacity: .4; filter: saturate(.4); }
  .dcv-anim.full .dcv-done { animation: doneOn .9s var(--ease); }

  /* пътят: светлината тече и пали числата едно след друго (броят се в demo.js) */
  .route::after { transition: transform 2.2s linear .2s; }
  .js .route:not(.in)::after { transform: scaleX(0); }
  .stop::before, .stop-big, .stop-now, .stop h3, .stop > p:not(.stop-big) { transition: color .6s, text-shadow .9s var(--ease), background-color .5s, box-shadow .6s, opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(.2s + var(--i, 0) * .55s); }
  .js .route:not(.in) .stop::before { background: #22303d; box-shadow: none; }
  .js .route:not(.in) :is(.stop-big, .stop-big small, .stop-now, .stop-now small) { color: #223040; text-shadow: none; }
  .stop-big small, .stop-old { transition: color .6s, opacity .8s var(--ease); transition-delay: calc(.2s + var(--i, 0) * .55s); }
  .js .route:not(.in) .stop-old { opacity: .25; }
  .stop-old::after { transition: scale .5s var(--ease) calc(.6s + var(--i, 0) * .55s); }
  .js .route:not(.in) .stop-old::after { scale: 0 1; }
  .js .route:not(.in) .stop h3, .js .route:not(.in) .stop > p:not(.stop-big) { opacity: .3; transform: translateY(8px); }

  /* ветрилото: картите се раздават от тестето в средата — отляво надясно, минута след минута */
  .fan-item { transition: transform 1.4s var(--ease), opacity .9s var(--ease); transition-delay: calc(.1s + var(--n, 0) * .12s); }
  .js .fan:not(.in) .fan-item { opacity: 0; transform: translateX(0) translateY(120px) rotate(0deg) scale(.9); }

  /* листът за панела: докосване на B, после кръг около цената */
  .js .dshot:not(.in) .r-price { opacity: 0; scale: 1.15; }
  .dshot .r-price { transition: opacity .5s var(--ease) 1s, scale .6s var(--ease) 1s; }
  .dshot.in .r-price { animation: ringPulse 2.2s ease-in-out 1.6s 3; }
  .dshot.in .t-b { animation: tap 1s ease-out .45s both; }

  /* въпросите идват едно след друго; после Николай отговаря на първия (demo.js), натискане пита следващ */
  .chat-qs > *, .chat-him { transition: opacity .6s var(--ease), transform .7s var(--ease), background-color .3s, color .3s, box-shadow .35s var(--ease); transform-origin: 100% 100%; }
  .chat-him { transform-origin: 0 100%; }
  .js .chat:not(.in) :is(.chat-qs > *, .chat-him) { opacity: 0; transform: translateY(14px) scale(.95); }
  .chat-qs > :nth-child(2) { transition-delay: .3s, .3s, 0s, 0s, 0s; }
  .chat-qs > :nth-child(3) { transition-delay: .6s, .6s, 0s, 0s, 0s; }
  .chat-qs > :nth-child(4) { transition-delay: .9s, .9s, 0s, 0s, 0s; }
  .chat-him { transition-delay: 1.25s; }
  .chat.settled .chat-qs > * { transition-delay: 0s; }
  .chat.typing-on .typing i { animation: typing 1s ease-in-out infinite; }
  .chat.typing-on .typing i:nth-child(2) { animation-delay: .15s; }
  .chat.typing-on .typing i:nth-child(3) { animation-delay: .3s; }
  .js .chat-slot .bub-him.on { animation: ansIn .55s var(--ease); }

  /* финалът: известието пада отгоре като истинско (щом се покаже), после по него минава отблясък */
  .js .dcall-note:not(.in) .dinv { opacity: 0; transform: translateY(-28px) scale(.96); filter: blur(8px); }
  .dinv { transition: opacity .7s var(--ease) .2s, transform .8s var(--ease) .2s, filter .7s var(--ease) .2s; }
  .dcall-note.in .dinv-glint { animation: dinvGlint 1.4s var(--ease-io) 1s both; }
  .js .dcall-note:not(.in) .dcall-halo { opacity: 0; }
  .dcall-halo { transition: opacity 1.2s var(--ease) .3s; }
}
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes ansIn { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes camIn { from { opacity: 0; transform: scale(.6); } }
@keyframes talkGlow { 0%, 100% { opacity: .5; } 45% { opacity: 1; } }
@keyframes talkRing { 0% { opacity: 0; transform: scale(1); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes doneOn { 0% { filter: brightness(1); } 35% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
@keyframes dinvGlint { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }

/* ==========================================================================
   7 · таблет и телефон
   ========================================================================== */
/* ветрилото остава ветрило до 961 px: по-малки карти, по-гъсто; формата е малко по-тясна */
@media (max-width: 1180px) {
  .fan { --w: 176px; --sp: calc((100vw - 400px) / 6); --rot: 3.5deg; --arc: 8px; }
  .dtop-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .dtop-lead .lead { max-width: 11em; }
}

/* ≤960: една колона — заглавие, форма, видео срещата; ветрилото става редица за плъзгане с точки */
@media (max-width: 960px) {
  .dtop-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "h1" "lead" "form" "vis"; row-gap: 0; }
  .dtop-copy h1 { padding-top: 0; max-width: 14ch; }
  .dform-wrap { width: 100%; max-width: 560px; margin-top: 30px; }
  .dcv { margin-top: 44px; }

  .fan { display: flex; gap: 16px; height: auto; margin: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 36px var(--gut) 64px; scroll-padding-inline: var(--gut); margin-block: 0 -40px; }
  .fan::-webkit-scrollbar { display: none; }
  .fan-item { position: relative; left: auto; top: auto; margin: 0; flex: 0 0 230px; transform: none; scroll-snap-align: start; }
  .fan-cap { rotate: none; margin-bottom: 12px; font-size: 1.35rem; }
  .fan-mid .fan-cap { color: var(--ice); }
  /* точките са общите (.dots в styles.css, site.js: [data-swipe]) */
  .js .fan-dots { position: relative; display: flex; margin-top: 0; }
  .dsee-more { margin-top: 2px; }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .fan-item { transition-delay: calc(var(--n, 0) * .08s); }
  .js .fan:not(.in) .fan-item { transform: translateY(34px); }
}
/* таблет: колоната е в средата — заглавие, число, форма и срещата една под друга */
@media (min-width: 561px) and (max-width: 960px) {
  .dtop-grid { justify-items: center; }
  .dtop-copy h1 { text-align: center; }
  .dtop-lead { justify-content: center; }
  .dcv { max-width: 600px; }
}

@media (max-width: 860px) {
  .dtop { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 48px; }
  .dtop-lead { margin-top: 14px; gap: 14px; }
  .dtop-min { font-size: 2.6rem; }
  .dtop-lead .lead { font-size: 1.06rem; line-height: 1.4; }
  .dform-wrap { padding-top: 50px; }
  .lamp-form { --lw: 62%; --lh: 20px; }
  .lamp-form .lamp-bar::after { top: 4px; bottom: 4px; }
  .cone-form { --cw: 170vw; --ch: 520px; --ct: 12px; }
  .dform { gap: 16px; padding: 22px 18px 16px; border-radius: 18px; }
  .dform-head h2 { font-size: 1.7rem; }
  .dform-head p { margin-top: 4px; font-size: 15px; line-height: 1.4; }
  .dway-seg .ic { display: none; }
  .dway-seg span { padding: 0 6px; font-size: 14.5px; }
  .dcv { padding: 18px 20px 0 0; }
  .dcv-halo { width: 480px; height: 360px; left: -40px; }
  .dcv-bar { font-size: 13.5px; padding-inline: 12px; height: 32px; }
  .dcv-cam { width: 76px; }

  .fan-item { flex-basis: min(54vw, 230px); }

  .dpair { grid-template-columns: 1fr; gap: 12px; }
  .dcard-visual { min-height: 0; padding: 26px 18px 0; }
  .dcard-text { padding: 20px 20px 24px; }
  .chat .bub, .bub-him { font-size: 15px; }
  .chat-him img { width: 52px; height: 52px; }

  .dcall { padding-block: 84px 92px; }
  .dcall-note { margin-block: 30px 26px; }
  .dinv { padding: 13px 14px 13px 13px; gap: 12px; border-radius: 18px; }
  .dinv-ic { width: 42px; height: 42px; border-radius: 12px; }
  .dinv .toast-txt { font-size: 14px; }
  .dinv .toast-txt b { font-size: 15.5px; }
  .dcall-halo { width: 460px; height: 240px; }
  .dcall-btn { width: 100%; min-width: 0; max-width: 420px; font-size: 19px; padding: 18px 24px; }
  .dcall-num { margin-top: 22px; font-size: 1.3rem; }
  /* часовете и пощата — на два реда, без висяща точка */
  .dcall-hours { flex-direction: column; gap: 0; margin-top: 2px; }
  .dcall-hours .dot-sep { display: none; }
}

/* таблет (601–860): пътят е решетка 2 × 2 — всяка спирка има своя точка и своя отсечка светлина */
@media (min-width: 601px) and (max-width: 860px) {
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: 40px; row-gap: 48px; padding-top: 0; }
  .route::before, .route::after { display: none; }
  .stop { grid-row: auto; display: block; padding-top: 38px; }
  .stop::before { top: 0; }
  .stop::after { content: ""; position: absolute; left: 4px; right: -40px; top: 4px; height: 1px; pointer-events: none; transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(156, 203, 242, .9), rgba(156, 203, 242, .2)); box-shadow: 0 0 10px rgba(var(--glow), .7); }
  .stop:nth-child(2n)::after { right: 0; background: linear-gradient(90deg, rgba(156, 203, 242, .9), transparent); }
  .stop-money::after { background: linear-gradient(90deg, var(--green), transparent); box-shadow: 0 0 10px rgba(var(--green-rgb), .6); }
  .stop-big { font-size: 3.4rem; }
}
@media (min-width: 601px) and (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .stop::after { transition: scale 1s var(--ease) calc(.2s + var(--i, 0) * .55s); }
  .js .route:not(.in) .stop::after { scale: 0 1; }
}

/* телефон (≤600): пътят е отвесен — линия отляво, светлината тече надолу и пали точките;
   числото вляво, един ред до него; парите — последни и зелени */
@media (max-width: 600px) {
  .route { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 34px; padding: 4px 0 4px 34px; }
  .route::before, .route::after { left: 4px; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto; }
  .route::before { background: linear-gradient(180deg, rgba(140, 192, 236, .24), rgba(140, 192, 236, .24) 85%, transparent); }
  .route::after { left: 3.5px; width: 2px; background: linear-gradient(180deg, var(--blue-hi), var(--ice) 55%, var(--green) 90%); transform-origin: 50% 0; }
  .stop { grid-row: auto; grid-template-rows: none; grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .stop::before { left: -34px; top: 50%; translate: 0 -50%; }
  .stop-big { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: 2.8rem; }
  .stop h3 { grid-column: 2; align-self: end; margin-top: 0; font-size: 1.04rem; line-height: 1.3; }
  .stop > p:not(.stop-big) { grid-column: 2; align-self: start; margin-top: 3px; font-size: 14.5px; line-height: 1.4; }
  .stop-money { grid-template-columns: minmax(0, 1fr); padding-top: 4px; }
  .stop-money::before { top: 3.9rem; }
  .stop-money .stop-big { grid-row: auto; font-size: 3.3rem; }
  .stop-money h3, .stop-money > p:not(.stop-big) { grid-column: 1; }
  .stop h3.stop-gift { margin-top: 12px; font-size: 1.15rem; }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .js .route:not(.in)::after { transform: scaleY(0); }
}

/* телефон (≤560): бутонът на формата влиза в първия екран — име и телефон на един ред, по-малко въздух над лампата;
   листът за панела е по-тесен и по-едър изрез (B с 12 и цената; A и D отрязани по краищата) */
@media (max-width: 560px) {
  .dtop { padding-top: calc(var(--nav-h) + 18px); }
  .dtop-lead { margin-top: 12px; }
  .dform-wrap { padding-top: 36px; margin-top: 22px; }
  .lamp-form { --lh: 18px; }
  .dform { gap: 14px; padding: 20px 16px 14px; }
  .dform-head h2 { font-size: 1.6rem; }
  .dform-head p { font-size: 14.5px; }
  .dway legend { margin-bottom: 6px; }
  .dform .btn-block { margin-top: 4px; }
  .dcv { margin-top: 36px; }

  .dshot { width: 100%; }
  .dshot .r-price { left: 71.8%; top: 6.94%; width: 26.8%; height: 15.55%; border-radius: 3cqw; }
  .dshot .t-b { left: 31.57%; top: 66.03%; width: 14.9%; }
}

/* много тесни телефони (360, 320): бутонът се пренася, нищо не излиза отдясно */
@media (max-width: 400px) {
  .dform .btn-block { white-space: normal; padding-inline: 18px; font-size: 17px; text-align: center; }
  .dcall-btn { white-space: normal; text-align: center; }
  .dway-seg span { font-size: 14px; padding: 0 3px; }
  .dtop-min { font-size: 2.3rem; }
  .stop:not(.stop-money) { grid-template-columns: 5.8rem minmax(0, 1fr); }
  .stop-big { font-size: 2.5rem; }
  .stop-money .stop-big { font-size: 3rem; }
  .stop-money::before { top: 3.6rem; }
  /* надписът над сумата се пренася, не се реже; камерата е по-малка и не стига до схемата */
  .dcv { padding: 14px 16px 0 0; }
  .dcv-cam { width: 62px; }
  .dcv-total { padding-inline: 12px; column-gap: 10px; }
  .dcv-total-l { text-wrap: balance; }
  .dcv-done { padding: 8px 12px; font-size: 14px; }
  .chat .bub { max-width: 100%; }
}

/* /en/start: какво става след формата — три реда с номер, вместо видео срещата */
.start-next { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: sn; max-width: 34rem; }
.start-next li { position: relative; padding-left: 46px; color: var(--ink-2); font-size: 16px; line-height: 1.5; counter-increment: sn; }
.start-next li::before { content: counter(sn); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--glow), .16); box-shadow: inset 0 0 0 1px rgba(var(--glow), .35); color: var(--blue-hi); font-weight: 700; font-size: 15px; }
.start-next b { display: block; color: var(--ink); font-weight: 650; }
.dform .field .opt { margin-left: 4px; font-weight: 500; color: var(--ink-3); }
.start-lead .lead { max-width: 30em; text-wrap: pretty; }