/* Klára – animovaný explainer „jak to funguje“ + blok „Vyzkoušejte na sobě“.
   Bez závislostí. Barvy a písma přebírá z proměnných LP (var(--primary) atd.),
   takže se přizpůsobí i novému designu. Vlastní proměnné mají prefix --kx-. */

.kx{
  --kx-bg:var(--bg,#F7F5F0);
  --kx-surface:var(--surface,#FFFFFF);
  --kx-surface-2:var(--surface-2,#F0EDE6);
  --kx-ink:var(--ink,#1A2320);
  --kx-muted:var(--muted,#56625E);
  --kx-line:var(--line,#E2DED5);
  --kx-primary:var(--primary,#0D6B62);
  --kx-primary-hover:var(--primary-hover,#0A5850);
  --kx-primary-ink:var(--primary-ink,#FFFFFF);
  --kx-primary-soft:var(--primary-soft,#E1F0EC);
  --kx-accent:var(--accent,#B4532A);
  --kx-accent-soft:var(--accent-soft,#F8E9E1);
  --kx-warn-bg:var(--warn-bg,#FFF1C9);
  --kx-warn-ink:var(--warn-ink,#5C4100);
  --kx-red:var(--red,#C0362C);
  --kx-green:var(--green,#1F7A4D);
  --kx-grey:var(--grey,#7A8581);
  --kx-radius:var(--radius,16px);
  --kx-radius-sm:var(--radius-sm,10px);
  --kx-shadow:var(--shadow,0 1px 2px rgba(20,30,25,.05),0 8px 24px rgba(20,30,25,.06));
  --kx-font:var(--font,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  --kx-font-head:var(--font-head,var(--kx-font));
  --kx-max:var(--max,1120px);
  --kx-head-w:var(--kx-heading-weight,500);
  --kx-bezel:#0E1513;
  --kx-call-a:#134540;
  --kx-call-b:#0A231F;
  font-family:var(--kx-font);
  color:var(--kx-ink);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .kx{
    --kx-bg:var(--bg,#0F1412);
    --kx-surface:var(--surface,#161D1A);
    --kx-surface-2:var(--surface-2,#1C2522);
    --kx-ink:var(--ink,#E6ECE9);
    --kx-muted:var(--muted,#9DAAA5);
    --kx-line:var(--line,#2A3531);
    --kx-primary:var(--primary,#5CC2B3);
    --kx-primary-hover:var(--primary-hover,#7BD3C6);
    --kx-primary-ink:var(--primary-ink,#062420);
    --kx-primary-soft:var(--primary-soft,#173430);
    --kx-accent:var(--accent,#E89A74);
    --kx-accent-soft:var(--accent-soft,#3A2419);
    --kx-warn-bg:var(--warn-bg,#3A2F10);
    --kx-warn-ink:var(--warn-ink,#F5DE9C);
    --kx-red:var(--red,#F07A6E);
    --kx-green:var(--green,#6CCB98);
    --kx-grey:var(--grey,#93A09B);
    --kx-shadow:var(--shadow,0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25));
    --kx-bezel:#050807;
  }
}
:root[data-theme="dark"] .kx{
  --kx-bg:var(--bg,#0F1412);--kx-surface:var(--surface,#161D1A);--kx-surface-2:var(--surface-2,#1C2522);
  --kx-ink:var(--ink,#E6ECE9);--kx-muted:var(--muted,#9DAAA5);--kx-line:var(--line,#2A3531);
  --kx-primary:var(--primary,#5CC2B3);--kx-primary-hover:var(--primary-hover,#7BD3C6);--kx-primary-ink:var(--primary-ink,#062420);
  --kx-primary-soft:var(--primary-soft,#173430);--kx-warn-bg:var(--warn-bg,#3A2F10);--kx-warn-ink:var(--warn-ink,#F5DE9C);
  --kx-red:var(--red,#F07A6E);--kx-green:var(--green,#6CCB98);--kx-grey:var(--grey,#93A09B);--kx-bezel:#050807;
}

.kx *,.kx *::before,.kx *::after{box-sizing:border-box}
.kx-section{padding:64px 0}
@media (min-width:900px){.kx-section{padding:96px 0}}
.kx-band{background:var(--kx-surface);border-top:1px solid var(--kx-line);border-bottom:1px solid var(--kx-line)}
:where(.kx-wrap){max-width:var(--kx-max);margin:0 auto;padding:0 16px}
:where(.kx-head){max-width:720px;margin-bottom:36px}
:where(.kx-eyebrow){display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kx-primary);margin-bottom:12px}
:where(.kx) :where(h2){font-family:var(--kx-font-head);font-size:clamp(1.6rem,4vw,2.3rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:0 0 .5em}
:where(.kx-lead){font-size:1.1rem;color:var(--kx-muted);max-width:60ch;margin:0}
:where(.kx a:not(.kx-btn)){color:var(--kx-primary)}
.kx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kx :focus-visible{outline:3px solid var(--kx-primary);outline-offset:3px}

/* =========================================================
   1) PŘEHRÁVAČ
   ========================================================= */
.kx-player{display:grid;gap:24px;grid-template-areas:"cap" "stage" "ctrl";align-items:center}
@media (min-width:880px){
  .kx-player{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);grid-template-areas:"cap stage" "ctrl stage";column-gap:48px;row-gap:28px}
  .kx-cap{align-self:end}
  .kx-ctrl{align-self:start}
}
.kx-cap{grid-area:cap;max-width:520px}
.kx-ctrl{grid-area:ctrl;max-width:520px}
.kx-stage{grid-area:stage;position:relative;display:grid;place-items:center;padding:8px 0}
.kx-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(460px,96%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--kx-primary-soft) 0%,transparent 68%);pointer-events:none}

.kx-step{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--kx-primary);background:var(--kx-primary-soft);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.kx-live h3{font-family:var(--kx-font-head);font-size:clamp(1.5rem,3.2vw,2.05rem);font-weight:var(--kx-head-w);line-height:1.15;margin:0 0 12px;letter-spacing:-.015em}
.kx-live p{margin:0;color:var(--kx-muted);font-size:1.05rem;line-height:1.6;min-height:5em}
@media (min-width:880px){.kx-live p{min-height:4.8em}}
.kx-cap-cta{margin-top:16px}
:where(.kx-btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font:600 1rem var(--kx-font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;background:var(--kx-primary);color:var(--kx-primary-ink);transition:background .15s,border-color .15s}
:where(.kx a.kx-btn){color:var(--kx-primary-ink)}
:where(.kx-btn:hover){background:var(--kx-primary-hover)}
:where(.kx-btn--ghost){background:transparent;color:var(--kx-ink);border-color:var(--kx-line)}
:where(.kx-btn--ghost:hover){background:transparent;border-color:var(--kx-primary);color:var(--kx-primary)}

/* ovládání */
.kx-bar{display:flex;align-items:center;gap:14px}
.kx-play{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--kx-primary);color:var(--kx-primary-ink);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.kx-play:hover{background:var(--kx-primary-hover)}
.kx-play svg{width:20px;height:20px}
.kx-play .kx-i-play{display:none}
.kx-player.is-paused .kx-play .kx-i-play{display:block}
.kx-player.is-paused .kx-play .kx-i-pause{display:none}
.kx-segs{display:flex;gap:6px;flex:1;min-width:0;list-style:none;margin:0;padding:0}
.kx-segs li{flex:1;min-width:0}
.kx-seg{display:block;width:100%;background:none;border:0;padding:10px 0 6px;cursor:pointer;text-align:left;color:var(--kx-muted);font:600 .72rem var(--kx-font)}
.kx-seg-track{display:block;height:6px;border-radius:99px;background:var(--kx-line);overflow:hidden}
.kx-seg-track i{display:block;height:100%;width:0;background:var(--kx-primary);border-radius:99px}
.kx-seg-num{display:block;margin-top:6px;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx-seg[aria-current="step"]{color:var(--kx-ink)}
.kx-seg:hover .kx-seg-track{background:color-mix(in srgb,var(--kx-line) 60%,var(--kx-primary))}
.kx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:14px;font-size:.9rem;color:var(--kx-muted)}
.kx-meta b{color:var(--kx-ink);font-weight:600}
.kx-linkbtn{background:none;border:0;padding:4px 0;font:inherit;color:var(--kx-primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* telefon (sdílený rámeček v režimu animace) */
.kx-device{position:relative;width:268px;height:548px;padding:11px;border-radius:46px;background:var(--kx-bezel);box-shadow:0 30px 60px -20px rgba(10,25,20,.45),0 0 0 1px rgba(255,255,255,.06) inset}
.kx-device::after{content:"";position:absolute;right:-3px;top:120px;width:3px;height:56px;border-radius:0 3px 3px 0;background:var(--kx-bezel)}
@media (max-width:420px){.kx-device{width:250px;height:516px}}
.kx-scenes{position:relative;width:100%;height:100%;list-style:none;margin:0;padding:0;border-radius:36px;overflow:hidden;background:var(--kx-surface)}
.kx-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.kx-scene.is-active{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.kx-scene.is-leaving{visibility:visible}
.kx-phone{height:100%}
.kx-figcap{display:none}

.kx-player[data-scene="0"]:not(.is-paused) .kx-device{animation:kx-buzz 2.4s ease-in-out .2s 1}
@keyframes kx-buzz{0%,12%,24%,36%,48%,100%{transform:rotate(0)}3%,15%,27%,39%{transform:rotate(-1.4deg) translateX(-1px)}6%,18%,30%,42%{transform:rotate(1.4deg) translateX(1px)}9%,21%,33%,45%{transform:rotate(-.8deg)}}

/* =========================================================
   Obrazovky
   ========================================================= */
.kx-screen{position:relative;height:100%;display:flex;flex-direction:column;background:var(--kx-surface);color:var(--kx-ink);font-size:12.5px;line-height:1.42;overflow:hidden;text-align:left}
.kx-screen::before{content:"";position:absolute;top:9px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:14px;background:var(--kx-bezel);z-index:3}
.kx-screen::after{content:"";position:absolute;bottom:7px;left:50%;width:96px;height:4px;margin-left:-48px;border-radius:4px;background:currentColor;opacity:.28;z-index:3}
.kx-status{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;font-size:11px;font-weight:700;position:relative;z-index:2}
.kx-status svg{width:30px;height:11px;fill:currentColor}
.kx-body{flex:1;min-height:0;padding:8px 14px 16px;display:flex;flex-direction:column;gap:8px;position:relative}

/* příchozí hovor */
.kx-screen--call{background:linear-gradient(165deg,var(--kx-call-a),var(--kx-call-b));color:#fff}
.kx-incoming{text-align:center;padding-top:34px}
.kx-incoming small{display:block;font-size:11.5px;opacity:.75;letter-spacing:.02em}
.kx-incoming b{display:block;font:600 21px/1.25 var(--kx-font);margin:8px 0 4px;letter-spacing:.01em}
.kx-incoming span{font-size:11.5px;opacity:.75}
.kx-answer{margin-top:auto;display:flex;justify-content:space-around;padding:0 6px 26px}
.kx-answer div{display:grid;justify-items:center;gap:7px;font-size:10.5px;opacity:.85}
.kx-round{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;position:relative}
.kx-round svg{width:24px;height:24px;fill:#fff}
.kx-round--no{background:#E5484D}
.kx-round--no svg{transform:rotate(135deg)}
.kx-round--yes{background:#30A46C}
.kx-scene.is-active .kx-round--yes::before,.kx-scene.is-active .kx-round--yes::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(48,164,108,.7);animation:kx-ring 1.4s ease-out infinite}
.kx-scene.is-active .kx-round--yes::after{animation-delay:.7s}
@keyframes kx-ring{from{transform:scale(1);opacity:1}to{transform:scale(1.7);opacity:0}}
.kx-missed{position:absolute;left:12px;right:12px;bottom:18px;display:grid;gap:8px;z-index:4}
.kx-note{background:var(--kx-surface);color:var(--kx-ink);border-radius:16px;padding:11px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.kx-note-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--kx-accent-soft);color:var(--kx-red)}
.kx-note-ico svg{width:16px;height:16px;fill:currentColor}
.kx-note b{display:block;font-size:12.5px}
.kx-note span{font-size:11px;color:var(--kx-muted)}
.kx-fwd{justify-self:center;display:inline-flex;align-items:center;gap:7px;background:var(--kx-surface);color:var(--kx-ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.kx-fwd svg{width:14px;height:14px;fill:none;stroke:var(--kx-primary);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* hovor s Klárou */
.kx-callhead{text-align:center;padding:8px 0 4px}
.kx-av{width:58px;height:58px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;background:var(--kx-primary);color:var(--kx-primary-ink);font:600 23px var(--kx-font-head);position:relative}
.kx-scene.is-active .kx-av--talk::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--kx-primary);opacity:.35;animation:kx-talk 1.6s ease-in-out infinite}
@keyframes kx-talk{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.08);opacity:.12}}
.kx-callname{font:700 15px/1.2 var(--kx-font)}
.kx-callsub{font-size:11px;color:var(--kx-muted)}
.kx-rec{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:3px 10px;border-radius:999px;background:var(--kx-surface-2);font-size:10.5px;color:var(--kx-muted)}
.kx-rec i{width:7px;height:7px;border-radius:50%;background:var(--kx-red)}
.kx-scene.is-active .kx-rec i{animation:kx-blink 1.2s steps(2,start) infinite}
@keyframes kx-blink{to{visibility:hidden}}
.kx-wave{display:flex;justify-content:center;align-items:center;gap:3px;height:20px;margin:2px 0 4px}
.kx-wave span{width:3px;height:100%;border-radius:3px;background:var(--kx-primary);opacity:.8;transform:scaleY(.25)}
.kx-scene.is-active .kx-wave span{animation:kx-wave 1s ease-in-out infinite}
.kx-wave span:nth-child(2){animation-delay:-.2s!important}.kx-wave span:nth-child(3){animation-delay:-.5s!important}.kx-wave span:nth-child(4){animation-delay:-.1s!important}.kx-wave span:nth-child(5){animation-delay:-.7s!important}.kx-wave span:nth-child(6){animation-delay:-.35s!important}.kx-wave span:nth-child(7){animation-delay:-.6s!important}
@keyframes kx-wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

.kx-minihead{display:flex;align-items:center;gap:9px;padding:4px 0 8px;border-bottom:1px solid var(--kx-line);margin-bottom:2px}
.kx-minihead .kx-av{width:30px;height:30px;font-size:13px;margin:0}
.kx-minihead b{display:block;font-size:12.5px;line-height:1.2}
.kx-minihead div span{font-size:10.5px;color:var(--kx-muted)}
.kx-minihead .kx-rec{margin:0 0 0 auto;padding:2px 8px}
.kx-av--grey{background:var(--kx-surface-2)!important;color:var(--kx-muted)!important}

.kx-msg{position:relative;max-width:90%;padding:8px 11px;border-radius:14px;font-size:12.3px;line-height:1.42;overflow-wrap:anywhere}
.kx-msg small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--kx-muted);margin-bottom:2px}
.kx-msg--k{align-self:flex-start;background:var(--kx-primary-soft);border-bottom-left-radius:4px}
.kx-msg--k small{color:var(--kx-primary)}
.kx-msg--c{align-self:flex-end;background:var(--kx-surface-2);border-bottom-right-radius:4px}
.kx-msg--big{font-size:12.8px;max-width:100%}
.kx-dots{position:absolute;left:11px;top:24px;display:flex;gap:4px;opacity:0}
.kx-dots i{width:6px;height:6px;border-radius:50%;background:var(--kx-primary);opacity:.6}

/* odbavený obchodník */
.kx-endcard{margin-top:auto;background:var(--kx-surface);border:1px solid var(--kx-line);border-radius:14px;padding:11px 12px;box-shadow:0 10px 24px rgba(10,25,20,.12)}
.kx-endcard b{display:block;font-size:12.5px;margin-bottom:6px}
.kx-endcard p{margin:6px 0 0;font-size:11px;color:var(--kx-muted)}
.kx-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--kx-surface-2);color:var(--kx-muted)}
.kx-tag i{width:8px;height:8px;border-radius:50%;background:var(--kx-grey)}
.kx-tag--free{background:var(--kx-surface-2);color:var(--kx-ink)}
.kx-tag--free em{font-style:normal;color:var(--kx-green)}

/* aplikace – shrnutí */
.kx-appbar{display:flex;align-items:center;gap:9px;padding:2px 0 10px;border-bottom:1px solid var(--kx-line)}
.kx-logo{flex:none;width:28px;height:28px;border-radius:8px;background:var(--kx-primary);color:var(--kx-primary-ink);display:grid;place-items:center;font:600 14px var(--kx-font-head)}
.kx-appbar b{display:block;font-size:13px;line-height:1.2}
.kx-appbar div span{display:block;font-size:10.5px;color:var(--kx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.kx-sum{border:1px solid var(--kx-line);border-radius:14px;padding:11px 12px;background:var(--kx-surface);box-shadow:0 8px 22px rgba(10,25,20,.10);position:relative}
.kx-sum::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--kx-green)}
.kx-sum-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px}
.kx-sum-top .kx-tag{background:transparent;padding:0;color:var(--kx-ink)}
.kx-sum-top .kx-tag i{background:var(--kx-green)}
.kx-sum-top time{font-size:10px;color:var(--kx-muted);white-space:nowrap}
.kx-sum b{display:block;font-size:13px;line-height:1.3}
.kx-sum .kx-tel{font-size:10.5px;color:var(--kx-muted)}
.kx-sum p{margin:6px 0 8px;font-size:12px}
.kx-urg{display:inline-block;font-size:10.5px;font-weight:700;background:var(--kx-warn-bg);color:var(--kx-warn-ink);padding:3px 8px;border-radius:999px}
.kx-acts{display:flex;gap:6px;margin-top:10px}
.kx-acts span{flex:1;text-align:center;font-size:11px;font-weight:700;padding:7px 6px;border-radius:999px;border:1.5px solid var(--kx-line)}
.kx-acts .kx-callback{background:var(--kx-primary);border-color:var(--kx-primary);color:var(--kx-primary-ink)}
.kx-scene.is-active .kx-callback{animation:kx-pop .6s ease 3.2s 2}
@keyframes kx-pop{50%{transform:scale(1.06)}}
.kx-rows{display:grid;gap:6px;margin-top:4px}
.kx-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--kx-muted);padding:8px 10px;border-radius:10px;background:var(--kx-surface-2)}
.kx-row i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--kx-grey)}
.kx-row b{color:var(--kx-ink);font-weight:600}
.kx-row time{margin-left:auto;font-size:10px}

/* závěrečná obrazovka */
.kx-end{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;padding:0 10px 30px}
.kx-end .kx-logo{width:62px;height:62px;border-radius:18px;font-size:28px}
.kx-end b{font:var(--kx-head-w) 20px/1.2 var(--kx-font-head);letter-spacing:-.01em}
.kx-end p{margin:0;font-size:12px;color:var(--kx-muted)}
.kx-end span.kx-fakebtn{display:inline-block;margin-top:4px;background:var(--kx-primary);color:var(--kx-primary-ink);font-weight:700;font-size:12px;padding:9px 16px;border-radius:999px}

/* postupné objevování v rámci scény */
.kx-in{opacity:0;transform:translateY(10px)}
.kx-scene.is-active .kx-in{animation:kx-in .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
.kx-scene.is-active .kx-msg--k .kx-text{opacity:0;animation:kx-fade .35s ease forwards;animation-delay:calc(var(--d,0s) + .9s)}
.kx-scene.is-active .kx-msg--k .kx-dots{animation:kx-typing .9s ease forwards;animation-delay:var(--d,0s)}
.kx-scene.is-active .kx-dim{animation:kx-dim .5s ease forwards;animation-delay:var(--d,0s)}
@keyframes kx-in{to{opacity:1;transform:none}}
@keyframes kx-fade{to{opacity:1}}
@keyframes kx-typing{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
@keyframes kx-dim{to{opacity:.12;filter:blur(1px)}}
/* scéna, která právě odchází, i scéna zobrazená kliknutím při pauze: konečný stav */
.kx-scene.is-leaving .kx-in,.kx-scene.is-settled .kx-in{opacity:1;transform:none;animation:none}
.kx-scene.is-leaving .kx-text,.kx-scene.is-settled .kx-text{opacity:1;animation:none}
.kx-scene.is-leaving .kx-dots,.kx-scene.is-settled .kx-dots{opacity:0;animation:none}
.kx-scene.is-leaving .kx-dim,.kx-scene.is-settled .kx-dim{opacity:.12;filter:blur(1px);animation:none}
.kx-player.is-paused .kx-scene,.kx-player.is-paused .kx-scene *,.kx-player.is-paused .kx-scene *::before,.kx-player.is-paused .kx-scene *::after,.kx-player.is-paused .kx-device{animation-play-state:paused!important}

/* =========================================================
   Statický storyboard (prefers-reduced-motion nebo volba „všechny kroky“)
   ========================================================= */
.kx-player[data-mode="static"]{display:block}
.kx-player[data-mode="static"] .kx-cap,.kx-player[data-mode="static"] .kx-bar{display:none}
.kx-player[data-mode="static"] .kx-ctrl{max-width:none;margin-top:28px}
.kx-player[data-mode="static"] .kx-stage{display:block;place-items:normal;padding:0}
.kx-player[data-mode="static"] .kx-stage::before{display:none}
.kx-player[data-mode="static"] .kx-device{width:auto;height:auto;padding:0;background:none;box-shadow:none;border-radius:0;animation:none!important}
.kx-player[data-mode="static"] .kx-device::after{display:none}
.kx-player[data-mode="static"] .kx-scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:40px 24px;height:auto;overflow:visible;border-radius:0;background:none;counter-reset:kxs}
.kx-player[data-mode="static"] .kx-scene{position:static;opacity:1;visibility:visible;transition:none;display:flex;flex-direction:column;gap:14px}
.kx-player[data-mode="static"] .kx-phone{height:476px;width:100%;max-width:248px;margin:0 auto;padding:9px;border-radius:40px;background:var(--kx-bezel);box-shadow:0 18px 40px -18px rgba(10,25,20,.45)}
.kx-player[data-mode="static"] .kx-screen{border-radius:31px}
.kx-player[data-mode="static"] .kx-figcap{display:block;max-width:300px;margin:0 auto;text-align:center}
.kx-figcap b{display:block;font:var(--kx-head-w) 1.15rem/1.3 var(--kx-font-head);margin-bottom:4px}
.kx-figcap b::before{counter-increment:kxs;content:counter(kxs) ". ";color:var(--kx-primary)}
.kx-scene--end .kx-figcap b::before{content:"";counter-increment:none}
.kx-figcap span{font-size:.94rem;color:var(--kx-muted);line-height:1.5}
.kx-player[data-mode="static"] .kx-in,.kx-player[data-mode="static"] .kx-text{opacity:1;transform:none;animation:none!important}
.kx-player[data-mode="static"] .kx-dots{display:none}
.kx-player[data-mode="static"] .kx-dim{opacity:.12;filter:blur(1px);animation:none!important}
.kx-player[data-mode="static"] .kx-scene *,.kx-player[data-mode="static"] .kx-scene *::before,.kx-player[data-mode="static"] .kx-scene *::after{animation:none!important}
.kx-player[data-mode="static"] .kx-meta{justify-content:center}

/* =========================================================
   2) VYZKOUŠEJTE NA SOBĚ
   ========================================================= */
.kt-grid{display:grid;gap:24px;align-items:start}
@media (min-width:920px){.kt-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px}}
.kt-form{background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:var(--kx-radius);padding:24px}
@media (max-width:480px){.kt-form{padding:18px}}
.kt-typ{border:0;padding:0;margin:0 0 18px;min-width:0}
.kt-typ legend{font-weight:600;font-size:.92rem;margin-bottom:8px;padding:0}
.kt-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kt-opt{position:relative;display:block;cursor:pointer}
.kt-opt input{position:absolute;opacity:0;width:1px;height:1px}
.kt-opt span{display:block;height:100%;border:1.5px solid var(--kx-line);border-radius:var(--kx-radius-sm);padding:11px 12px;background:var(--kx-surface);transition:border-color .15s,background .15s}
.kt-opt b{display:block;font-size:.98rem}
.kt-opt small{display:block;font-size:.8rem;color:var(--kx-muted);line-height:1.35;margin-top:2px}
.kt-opt input:checked + span{border-color:var(--kx-primary);background:var(--kx-primary-soft);box-shadow:inset 0 0 0 1px var(--kx-primary)}
.kt-opt input:focus-visible + span{outline:3px solid var(--kx-primary);outline-offset:2px}
.kt-field{display:grid;gap:6px;margin-bottom:14px;min-width:0}
.kt-field[hidden]{display:none}
.kt-field label{font-weight:600;font-size:.92rem}
.kt-field label span{font-weight:400;color:var(--kx-muted)}
.kt-field input,.kt-field select{font:inherit;color:var(--kx-ink);background:var(--kx-surface);border:1.5px solid var(--kx-line);border-radius:var(--kx-radius-sm);padding:11px 12px;min-height:46px;width:100%;min-width:0}
.kt-field input::placeholder{color:var(--kx-muted);opacity:.75}
.kt-field input:focus,.kt-field select:focus{border-color:var(--kx-primary);outline:none;box-shadow:0 0 0 3px var(--kx-primary-soft)}
.kt-hint{font-size:.82rem;color:var(--kx-muted)}
.kt-row{display:grid;gap:0 14px}
@media (min-width:560px){.kt-row{grid-template-columns:1fr 1fr}}

.kt-prev{background:var(--kx-surface);border:1px solid var(--kx-line);border-radius:var(--kx-radius);padding:24px;box-shadow:var(--kx-shadow)}
@media (min-width:920px){.kt-prev{position:sticky;top:24px}}
@media (max-width:480px){.kt-prev{padding:18px}.kt-who .kx-rec{display:none}}
.kt-prev-label{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kx-primary);margin:0 0 14px}
.kt-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.kt-who .kx-av{width:46px;height:46px;font-size:19px;margin:0;flex:none}
.kt-who b{display:block;font-weight:600;font-size:1.05rem;line-height:1.2}
.kt-who div span{font-size:.85rem;color:var(--kx-muted)}
.kt-who .kx-rec{margin:0 0 0 auto;font-size:.75rem;flex:none}
.kt-bubble{margin:0;background:var(--kx-primary-soft);border-radius:18px 18px 18px 6px;padding:16px 18px;font-size:1.05rem;line-height:1.55;overflow-wrap:anywhere}
.kt-bubble q{quotes:"„" "“"}
.kt-voice{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.kt-voice .kx-btn{min-height:44px;padding:10px 18px;font-size:.95rem}
.kt-voice .kx-btn[aria-pressed="true"]{border-color:var(--kx-primary);color:var(--kx-primary)}
.kt-voice-msg{font-size:.85rem;color:var(--kx-muted);margin:0}
.kt-note{font-size:.85rem;color:var(--kx-muted);margin:8px 0 0}
.kt-cta{margin-top:20px;width:100%;min-height:56px;font-size:1.05rem;text-align:center;line-height:1.3}
.kt-fine{font-size:.9rem;color:var(--kx-muted);margin:10px 0 0;text-align:center}