/* FORMA – „Dílna“ (28. 10. 2026): světlý papír, inkoust, limetka jen na tmavých pásech (úvod, patička, zakládající cena) */
:root{
  /* plochy */
  --paper:#f4f1ea;--paper-2:#eae6db;--paper-3:#ded9cb;--field:#fbfaf6;
  --ink:#141516;--ink-2:#26282b;--ink-60:#55585d;
  --ink-on-dark:#f4f1ea;--ink-on-dark-60:#b9b6ac;
  /* akcent (lime-ink ztmavená proti briefu: #5f7a0e má na papíře jen 4,35:1) */
  --lime:#bcd645;--lime-2:#cfe56a;--lime-ink:#526a0a;--lime-soft:#e6efb7;
  /* stav */
  --ok:#2a7148;--warn:#a63f1a;
  --field-line:#858279; /* obrys polí formuláře: 3,4:1 na papíře */
  --radius-s:6px;--radius-m:12px;--radius-l:20px;
  --shadow-1:0 1px 2px rgb(20 21 22 / .06),0 8px 24px -12px rgb(20 21 22 / .18);
  /* význam barev podle podkladu (na tmavých pásech se přepíše níž) */
  --bg:var(--paper);--bg-2:var(--paper-2);--fg:var(--ink);--mute:var(--ink-60);
  --line:var(--paper-3);--line-2:rgb(20 21 22 / .2);--edge:var(--ink);
  --pri-bg:var(--ink);--pri-fg:var(--paper);--pri-hover:#2e3033;
  --accent:var(--lime-ink);--focus:var(--lime-ink);
  --display:'Bricolage Grotesque','Bricolage Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Archivo','Archivo Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gut:1.5rem;--max:clamp(1640px,82vw,2000px);--sec:4rem
}
/* tmavé pásy */
.hero,.foot,.founder,.menu-dark{
  --bg:var(--ink);--bg-2:var(--ink-2);--fg:var(--ink-on-dark);--mute:var(--ink-on-dark-60);
  --line:rgb(244 241 234 / .14);--line-2:rgb(244 241 234 / .28);--edge:var(--ink-on-dark-60);
  --pri-bg:var(--lime);--pri-fg:var(--ink);--pri-hover:var(--lime-2);
  --accent:var(--lime);--focus:var(--lime);
  background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;scrollbar-color:var(--field-line) var(--paper-2)}
body{background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--sans);padding-bottom:76px}
::selection{background:var(--lime);color:var(--ink)}
/* Safari barví při označení i místo vedle řádků až k nejbližšímu „rámu“ (bez něj přes celou stránku). Tyhle prvky rámem jsou. */
.wrap,.founder,.founder p,.faq details p{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
input,textarea{caret-color:var(--lime-ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:.75rem;top:-4rem;background:var(--ink);color:var(--paper);padding:.7rem 1rem;z-index:99;font-weight:600}
.skip:focus{top:.75rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.jen-pc{display:none}
main:focus{outline:none} /* cíl odkazu „Přeskočit na obsah“ */
.wrap{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:1}
h2{font-size:clamp(2rem,4vw,3.4rem);margin-bottom:1rem}
h3{font-size:1.375rem;line-height:1.25;font-weight:700;letter-spacing:-.01em}
p,li,dd{text-wrap:pretty}
.sec-lead{color:var(--mute);max-width:40rem;margin-bottom:2.5rem}
.ico-svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* tlačítka: primární = inkoust na papíře, limetka na tmavém pásu */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.8rem 1.4rem;border-radius:var(--radius-s);font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;border:0;transition:background-color .2s,color .2s,box-shadow .2s}
.btn-lime{background:var(--pri-bg);color:var(--pri-fg)}
.btn-lime:hover{background:var(--pri-hover)}
.btn-line{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--edge)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--fg);background:rgb(127 127 127 / .08)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:default}
.btn-sm{min-height:44px;padding:.5rem 1rem;font-size:.95rem}

/* hlavička */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem var(--gut);background:var(--paper);border-bottom:1px solid var(--line)}
.brand{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:44px;font-stretch:125%;font-weight:800;font-size:1.45rem;letter-spacing:-.04em;text-decoration:none;line-height:1}
.top nav{display:none}
.top .btn-sm{margin-left:auto}
.top-call,.only-desk{display:none!important}
.menu-tel{display:none}
/* mobilní menu (jen se skriptem; bez něj zůstává tlačítko Ceník) */
.menu-btn{display:none}
.js .has-menu .top-cenik{display:none}
.js .has-menu .menu-btn{position:relative;z-index:2;margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem .9rem;border:0;border-radius:var(--radius-s);background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--edge);font:600 .95rem/1 var(--sans);cursor:pointer}
.menu-btn svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.menu-btn .x{display:none}
.top.open .menu-btn .x{display:block}
.top.open .menu-btn .bars{display:none}
.top.open nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:6rem var(--gut) max(1.5rem,env(safe-area-inset-bottom));background:var(--paper);overflow-y:auto}
.top.open nav a:not(.menu-tel){display:block;padding:.55rem 0;font:800 clamp(2.2rem,11vw,3.2rem)/1.1 var(--display);letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--line)}
.top.open .menu-tel{display:flex;margin-top:auto;padding-top:2rem;flex-direction:column;gap:.75rem;text-decoration:none}
.menu-tel span{font:700 1.6rem/1.2 var(--display)}
.menu-tel .btn{width:100%}
html.menu-open{overflow:hidden}

/* mobilní hlavička: Ceník vedle Menu, vejde se i na 320 px; v otevřeném menu zmizí */
@media (max-width:759px){
  .top{gap:.5rem}
  .js .has-menu .top-cenik{display:inline-flex;padding:.5rem .7rem}
  .js .has-menu .menu-btn{margin-left:0;padding:.5rem .7rem}
  .top.open .top-cenik{visibility:hidden}
}

/* úvod: jediné velké tmavé místo */
.hero-in{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:2.5rem var(--gut) 3.5rem;display:grid;gap:2.75rem}
.hl{position:relative;display:inline-block}
.hl-line{position:absolute;left:-.04em;right:-.04em;bottom:-.14em;width:calc(100% + .08em);height:.24em;overflow:visible;fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lead{color:var(--mute);font-size:1.125rem;margin:1.4rem 0 1.8rem;max-width:34rem}
.cta{display:grid;gap:.6rem}
.price-line{margin-top:1.25rem;color:var(--mute);font-size:.95rem;line-height:1.5}
.price-line a{color:var(--fg);text-decoration-color:var(--lime)}
/* plocha pro prst aspoň 44 px bez změny vzhledu: výplň kolem textu, záporný okraj ji vrací z rozvržení */
.price-line a,.cmp-note a{display:inline-block;padding:.8rem 0;margin:-.8rem 0}
.who{margin-top:.5rem;font-size:.875rem;color:var(--mute)}

/* spirála ukázek: náhledy webů po šroubovici, roztáčí je js/spirala.js (třída is-live).
   Bez skriptu, při omezeném pohybu a úspoře dat statický vějíř pěti karet. Pohyb jen přes transform/opacity/filter. */
.proof{display:grid;gap:1.75rem;min-width:0}
.reel{margin:0;min-width:0}
.reel-stage{--cw:clamp(84px,25vw,112px);position:relative;height:calc(var(--cw) * 3.6);margin:0 calc(var(--gut) * -1);perspective:calc(var(--cw) * 6);perspective-origin:50% 45%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.reel-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(100%,calc(var(--cw) * 5.2));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(244 241 234 / .075),rgb(244 241 234 / .02) 62%,rgb(244 241 234 / 0));pointer-events:none}
.reel-ring{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.reel-ring li{position:absolute;left:50%;top:50%;width:var(--cw);margin:calc(var(--cw) * -1.04) 0 0 calc(var(--cw) / -2)}
.reel-card{display:block;position:relative;padding:3px;border-radius:calc(var(--cw) * .15);background:#1c1e20;box-shadow:inset 0 0 0 1px rgb(244 241 234 / .16),0 26px 40px -24px rgb(0 0 0 / .9);-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.reel-card img{display:block;width:100%;height:auto;aspect-ratio:300/615;object-fit:cover;object-position:top;border-radius:calc(var(--cw) * .15 - 3px);background:var(--ink-2);pointer-events:none;-webkit-user-drag:none}
.reel-rim{position:absolute;inset:0;border-radius:calc(var(--cw) * .15);box-shadow:inset 0 0 0 1px rgb(188 214 69 / .9),0 0 22px -6px rgb(188 214 69 / .55);opacity:0;pointer-events:none}
.reel-card:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
/* statický vějíř (výchozí stav bez skriptu) */
.reel-stage:not(.is-live) li{transform-origin:50% 190%}
.reel-stage:not(.is-live) li:nth-child(n+6){display:none}
.reel-stage:not(.is-live) li:nth-child(1){z-index:3}
.reel-stage:not(.is-live) li:nth-child(2){z-index:2;transform:rotate(11deg);filter:brightness(.62)}
.reel-stage:not(.is-live) li:nth-child(3){z-index:2;transform:rotate(-11deg);filter:brightness(.62)}
.reel-stage:not(.is-live) li:nth-child(4){z-index:1;transform:rotate(22deg);filter:brightness(.38)}
.reel-stage:not(.is-live) li:nth-child(5){z-index:1;transform:rotate(-22deg);filter:brightness(.38)}
/* se skriptem a pohybem: spirála se ukáže až roztočená (pojistka: kdyby skript nedorazil, vějíř se ukáže sám) */
@media (prefers-reduced-motion:no-preference){
  .js .reel-stage:not(.is-live):not(.is-static) .reel-ring{opacity:0;animation:reel-pojistka 0s 2.5s forwards}
  @keyframes reel-pojistka{to{opacity:1}}
  .reel-stage.is-live .reel-ring{transition:opacity 1s ease-out}
}
.reel-stage.is-live{cursor:grab}
.reel-stage.is-drag{cursor:grabbing}
.reel-stage.is-live li{transform-origin:50% 50%;will-change:transform,opacity}
.reel-stage.is-live .reel-card{will-change:filter}
.reel-stage.is-live .reel-rim{will-change:opacity}
.reel figcaption{display:grid;justify-items:center;gap:.15rem;margin-top:.35rem;text-align:center}
.reel-now{display:grid;font:700 1.05rem/1.3 var(--display);color:var(--fg);min-height:1.3em}
/* název aktivní ukázky: dvě vrstvy přes sebe se prolnou (js/spirala.js) */
.reel-now>span{grid-area:1/1;opacity:0;transition:opacity .2s ease-out}
.reel-now>span.is-on{opacity:1}
.proof-checks{list-style:none;padding:0;display:grid;gap:.4rem}
.proof-checks li{display:grid;grid-template-columns:1.5rem 1fr;gap:.8rem;padding:.8rem 0;border-top:1px solid var(--line);font-size:.95rem;line-height:1.35;color:var(--mute)}
.proof-checks .ico-svg{color:var(--lime);margin-top:.1rem}
.proof-checks b{color:var(--fg);font:700 1.1rem/1.25 var(--display)}

/* sekce na papíře */
.work,.benefits,.pricing,.steps,.about,.faq,.contact{padding:var(--sec) 0}
.benefits,.steps,.contact{background:var(--paper-2)}
.pricing,.about,.faq{border-top:1px solid var(--line)}

/* ukázky */
/* srovnání „Stejný penzion. Dva weby.“ (29. 10. 2026): velký telefon, vlevo typický starý web, vpravo ukázka.
   Předěl se táhne kdekoli po obrazovce (app.js), klávesnicí přes skrytý posuvník. Pohyb jen přes clip-path a translate (žádný posun rozvržení). */
.compare{--pos:50%;--pw:min(calc(100vw - 3rem),clamp(250px,calc((100vh - 215px) * .462),380px));
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:1.75rem;
  margin:0 calc(var(--gut) * -1) 4.5rem;padding:2.75rem var(--gut) 2.5rem;
  background:radial-gradient(90% 55% at 50% 52%,var(--field) 0,var(--paper-2) 100%);border-block:1px solid var(--line)}
@supports (height:100svh){.compare{--pw:min(calc(100vw - 3rem),clamp(250px,calc((100svh - 215px) * .462),380px))}}
.cmp-head{text-align:center;max-width:34rem}
.cmp-title{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800;line-height:.98;letter-spacing:-.035em;margin-bottom:.9rem}
.cmp-title span{display:block;color:var(--ink-60)}
.cmp-lead{color:var(--mute);font-size:1rem}
.cmp-device{margin:0;display:grid;justify-items:center;gap:.85rem;width:var(--pw)}
.cmp-phone{position:relative;width:100%;padding:7px;border-radius:calc(var(--pw) * .14);background:#1c1e20;box-shadow:inset 0 0 0 1px rgb(244 241 234 / .16),0 0 0 1px rgb(20 21 22 / .9),0 60px 80px -50px rgb(20 21 22 / .6),0 22px 34px -22px rgb(20 21 22 / .45)}
/* boční tlačítka telefonu */
.cmp-phone::before,.cmp-phone::after{content:"";position:absolute;width:3px;background:#2b2d30;pointer-events:none}
.cmp-phone::before{right:-3px;top:24%;height:11%;border-radius:0 2px 2px 0}
.cmp-phone::after{left:-3px;top:18%;height:6.5%;border-radius:2px 0 0 2px;box-shadow:0 calc(var(--pw) * .19) 0 #2b2d30}
.cmp-screen{position:relative;overflow:hidden;aspect-ratio:390/844;border-radius:calc(var(--pw) * .14 - 7px);background:var(--ink-2);isolation:isolate;container-type:inline-size;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.cmp-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;-webkit-user-drag:none}
.cmp-old-img{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;translate:calc(var(--p,50) * 1cqw) 0;background:var(--paper);box-shadow:0 0 0 .5px rgb(20 21 22 / .25),0 0 16px rgb(20 21 22 / .35);pointer-events:none}
.cmp-knob{position:absolute;left:0;top:50%;pointer-events:none;translate:clamp(30px,calc(var(--p,50) * 1cqw),calc(100cqw - 30px)) 0;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px rgb(20 21 22 / .1),0 12px 26px -10px rgb(20 21 22 / .6);transition:scale .3s cubic-bezier(.2,.7,.25,1)}
.cmp-knob::before,.cmp-knob::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border:solid var(--ink);border-width:0 0 2px 2px}
.cmp-knob::before{left:12px;transform:rotate(45deg)}
.cmp-knob::after{right:12px;transform:rotate(-135deg)}
.cmp-screen:hover .cmp-knob,.compare.is-drag .cmp-knob{scale:1.1}
.compare.is-drag .cmp-screen{cursor:grabbing}
.compare.is-focus .cmp-knob{outline:3px solid var(--focus);outline-offset:3px}
.cmp-tags{display:flex;justify-content:space-between;gap:.4rem;width:100%;padding:0;font:500 .75rem/1.2 var(--sans);color:var(--ink)}
/* dva malé štítky pod telefonem (ne v rozích displeje, tam by překryly logo a tlačítko ukázky) */
.cmp-tag{padding:.35rem .6rem;border-radius:999px;white-space:nowrap;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);transition:color .35s ease-out}
.cmp-tag-old::before{content:"← "}
.cmp-tag-new::after{content:" →"}
.compare[data-side=new] .cmp-tag-old,.compare[data-side=old] .cmp-tag-new{color:var(--ink-60)}
.compare[data-side=new] .cmp-tag-new{color:var(--lime-ink)}
.cmp-list{list-style:none;padding:0;width:100%;max-width:31rem}
.cmp-list li{display:grid;grid-template-columns:6.25rem minmax(0,1fr);column-gap:1rem;padding:.95rem 0;border-top:1px solid var(--line-2)}
.cmp-list li:last-child{border-bottom:1px solid var(--line-2)}
.cmp-k{grid-row:span 2;padding-top:.2rem;font:600 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.cmp-old{font-size:.92rem;line-height:1.4;color:var(--ink-60);text-decoration:line-through 1px transparent;transition:color .35s ease-out,text-decoration-color .35s ease-out}
.cmp-new{margin-top:.15rem;font:700 1.22rem/1.25 var(--display);letter-spacing:-.01em;color:var(--ink);transition:color .35s ease-out}
.compare[data-side=old] .cmp-old{color:var(--ink)}
.compare[data-side=old] .cmp-new{color:var(--ink-60)}
.compare[data-side=new] .cmp-old{text-decoration-color:var(--ink-60)}
.compare[data-side=new] .cmp-new{color:var(--lime-ink)}
.cmp-note{max-width:31rem;font-size:.85rem;line-height:1.5;color:var(--mute);text-align:center}
.cmp-note a{color:var(--fg);font-weight:600;text-decoration-color:var(--line-2)}
.cmp-note a:hover{text-decoration-color:var(--fg)}
@media (min-width:860px){
  .compare{--pw:clamp(250px,calc((100vh - 150px) * .462),380px)}
  @supports (height:100svh){.compare{--pw:clamp(250px,calc((100svh - 150px) * .462),380px)}}
  .compare{grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:"dev ." "dev head" "dev list" "dev note" "dev .";justify-items:start;column-gap:clamp(3rem,7vw,7rem);row-gap:0;
    margin:0 0 5.5rem;padding:clamp(2.75rem,5vw,4.5rem) clamp(2.5rem,6vw,6rem);border:0;border-radius:var(--radius-l);
    background:radial-gradient(42% 70% at 24% 50%,var(--field) 0,var(--paper-2) 100%)}
  .cmp-device{grid-area:dev}
  .cmp-head{grid-area:head;text-align:left;margin-bottom:2.25rem}
  .cmp-lead{max-width:27rem;font-size:1.05rem}
  .cmp-list{grid-area:list}
  .cmp-list li{grid-template-columns:7.5rem minmax(0,1fr);padding:1.1rem 0}
  .cmp-new{font-size:1.4rem}
  .cmp-note{grid-area:note;text-align:left;margin-top:1.5rem}
}

.demos{list-style:none;padding:0;display:grid;gap:2.5rem}
.demo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.25rem;align-items:start;align-content:start}
.demo-shot{display:block;position:relative}
/* náhled ukázky: první obrazovka telefonu ve stejném rámu všude (hlavní stránka i galerie) */
.shot-phone{display:block;border-radius:18px;padding:5px;background:var(--ink-2);box-shadow:0 18px 36px -24px rgba(20,21,22,.55);transition:transform .2s ease-out,box-shadow .2s ease-out}
.shot-phone img{display:block;width:100%;aspect-ratio:390/760;object-fit:cover;object-position:top;border-radius:13px;background:var(--paper-2)}
.shot-phone:hover,li:hover>.shot-phone,li:hover>a>.shot-phone{transform:translateY(-4px);box-shadow:var(--shadow-1),0 24px 40px -24px rgba(20,21,22,.55)}
.demo h3{margin-bottom:.6rem}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.tags li{font:600 .8rem/1.2 var(--sans);padding:.32rem .65rem;border-radius:999px;background:var(--lime-soft);color:var(--lime-ink)}
.demo p{color:var(--mute);font-size:.97rem;margin-bottom:.4rem}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-underline-offset .2s ease-out,text-decoration-color .2s}
.more::after{content:"→";display:inline-block;margin-left:.4rem;transition:transform .2s ease-out}
.more:hover{text-underline-offset:6px;text-decoration-color:currentColor}
.more:hover::after{transform:translateX(4px)}
.g-obor{color:var(--mute);font:500 .875rem/1.3 var(--sans);margin-bottom:.35rem}
/* tlačítko do galerie hned pod čtyřmi ukázkami (pruh „Další ukázky“ je od 30. 10. 2026 pryč) */
.demos-cta{margin-top:3rem}
.btn-galerie{width:100%;min-height:56px;font-size:1.05rem}
.btn-galerie::after{content:"→";margin-left:.25rem;transition:transform .2s ease-out}
.btn-galerie:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.btn-galerie:hover::after{transform:translateX(4px)}

/* přínosy „Jeden den vašeho podniku“ (30. 10. 2026): tři chvíle týdne – poledne, soumrak, noc (js/prinos.js).
   Základ = statická verze (bez skriptu, omezený pohyb, úspora dat, nízké okno): tři pásy pod sebou, statické hodiny
   u každé chvíle, karty v konečném stavu; noc končí oblými rohy nad Postupem (v rozích papír-2 jako Postup).
   .is-live: za obsahem přilepené nebe přes celé okno; den, soumrak a noc se prolínají jen přes opacity v mezerách mezi
   chvílemi, barva textu se řídí oblohou (.is-dusk), hodiny se protočí jako počítadlo v ceníku. */
.benefits{--sheet-r:clamp(28px,2.5vw,36px);--ck-fill:rgb(128 118 104 / .15);
  --sky-day-l:radial-gradient(62% 58% at 84% -6%,rgb(255 224 160 / .5),transparent 70%),radial-gradient(46% 42% at 6% -4%,rgb(255 238 206 / .5),transparent 72%);
  --sky-eve:radial-gradient(72% 46% at 16% 104%,rgb(226 132 92 / .2),transparent 70%),radial-gradient(56% 42% at 90% 2%,rgb(204 136 160 / .18),transparent 72%),linear-gradient(#2a2130,#45303f 38%,#5e3744 72%,#64383b);
  --sky-night:radial-gradient(40% 36% at 84% 12%,rgb(244 241 234 / .08),transparent 70%),var(--ink);
  --stars-a:radial-gradient(1.6px 1.6px at 21px 37px,rgb(244 241 234 / .95) 30%,transparent),radial-gradient(1.2px 1.2px at 139px 91px,rgb(244 241 234 / .75) 30%,transparent),radial-gradient(2px 2px at 83px 171px,rgb(244 241 234 / .9) 30%,transparent),radial-gradient(1.5px 1.5px at 203px 29px,rgb(214 232 140 / .9) 30%,transparent),radial-gradient(1.1px 1.1px at 47px 241px,rgb(244 241 234 / .7) 30%,transparent),radial-gradient(1.7px 1.7px at 271px 193px,rgb(244 241 234 / .85) 30%,transparent);
  --stars-a-s:223px 211px,281px 239px,317px 293px,359px 263px,401px 337px,457px 389px;
  --stars-b:radial-gradient(1.3px 1.3px at 97px 59px,rgb(244 241 234 / .8) 30%,transparent),radial-gradient(2.3px 2.3px at 177px 133px,rgb(244 241 234 / .95) 30%,transparent),radial-gradient(1.1px 1.1px at 31px 157px,rgb(244 241 234 / .7) 30%,transparent),radial-gradient(1.5px 1.5px at 251px 71px,rgb(214 232 140 / .8) 30%,transparent),radial-gradient(1.2px 1.2px at 133px 263px,rgb(244 241 234 / .75) 30%,transparent),radial-gradient(1.8px 1.8px at 311px 227px,rgb(244 241 234 / .85) 30%,transparent);
  --stars-b-s:241px 223px,307px 271px,331px 251px,373px 307px,419px 349px,467px 401px;
  position:relative;isolation:isolate;padding-bottom:0;
  background:var(--sky-day-l),linear-gradient(var(--paper) calc(100% - 3rem),var(--paper-2) 0)}
.bf-sky,.bf-clock{display:none}
.benefit-list{list-style:none;padding:0;margin:2.25rem 0 0}
.bm{position:relative;padding:2.75rem 0 3.25rem}
.bm-day{padding-top:.5rem}
/* soumrak a noc: světlý text (kontrast AA na celé obloze ověřen) */
.bm-eve,.bm-night{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bm-eve{--fg:var(--paper);--mute:#ebe3d8;--line:rgb(244 241 234 / .16);color:var(--fg);background:var(--sky-eve)}
.bm-night{--fg:var(--ink-on-dark);--mute:var(--ink-on-dark-60);--line:rgb(244 241 234 / .14);color:var(--fg);padding-bottom:4.5rem;border-radius:0 0 var(--sheet-r) var(--sheet-r);
  background:var(--stars-a),var(--stars-b),var(--sky-night);background-size:var(--stars-a-s),var(--stars-b-s),auto}
.bm-night::before{content:"";position:absolute;right:clamp(1.5rem,11vw,12rem);top:2.5rem;width:clamp(40px,4.4vw,64px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fffdf6 0,#efe9da 50%,#d6cfbd 100%);box-shadow:0 0 50px 6px rgb(244 241 234 / .13),0 0 140px 36px rgb(244 241 234 / .05)}
.bm-in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"clock" "when" "say" "card" "txt";align-items:start;perspective:1200px}
.bm-clock{grid-area:clock;display:flex;align-items:flex-start;margin-bottom:.9rem;font:800 clamp(3.6rem,10vw,7.5rem)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ck-fill)}
.bm-eve .bm-clock,.bm-night .bm-clock{--ck-fill:rgb(244 241 234 / .12)}
.bm-clock span{font-size:.3em;line-height:1.2;margin:.2em .45em 0 0;letter-spacing:0}
.b-when{grid-area:when;font:500 .8rem/1.4 var(--mono);color:var(--mute);letter-spacing:.02em;margin-bottom:.7rem}
.bm .b-say{grid-area:say;color:var(--fg);font:800 clamp(2rem,4.4vw,3.8rem)/1.04 var(--display);letter-spacing:-.03em;margin-bottom:1.6rem;max-width:15em}
.bm-txt{grid-area:txt}
.bm-txt h3{font-size:1.2rem;margin-bottom:.4rem;color:var(--fg)}
.bm-txt p{color:var(--mute);max-width:34rem}

/* ilustrační karty „odpověď webu“ (aria-hidden; smyšlené údaje, označené) */
.bf-card{grid-area:card;width:100%;max-width:25rem;margin:0 0 1.9rem;perspective:1100px}
.bf-ui{position:relative;border-radius:18px;padding:1.2rem 1.25rem .95rem;background:var(--field);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgb(20 21 22 / .08),0 34px 64px -34px rgb(20 21 22 / .5),0 10px 22px -12px rgb(20 21 22 / .22)}
.ui-ico{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-note{margin-top:.85rem;font:500 .68rem/1.3 var(--mono);letter-spacing:.03em;color:var(--ink-60)}
.ui-title{font:700 1.15rem/1.2 var(--display);letter-spacing:-.01em;padding-bottom:.7rem;border-bottom:1.5px solid var(--ink)}
.ui-rows{list-style:none;padding:0}
.ui-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.62rem 0;border-bottom:1px solid rgb(20 21 22 / .1);font-size:.95rem;line-height:1.35}
.ui-rows b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-quiet{display:flex;align-items:center;gap:.55rem;margin-top:.8rem;font-size:.9rem;color:var(--ink-60)}
.ui-field{display:flex;align-items:center;gap:.55rem;padding:.35rem .35rem .35rem .85rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgb(20 21 22 / .18);font-size:.98rem;color:var(--ink)}
.ui-field .ui-ico{color:var(--ink-60)}
.ui-field .sq{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.ui-field b{padding:.5rem .9rem;border-radius:999px;background:var(--ink);color:var(--paper);font:600 .82rem/1 var(--sans)}
.ui-res{--rh:4.1rem;list-style:none;padding:0;margin-top:.85rem;display:grid;gap:.5rem}
.ui-res li{position:relative;height:var(--rh);border-radius:12px;padding:.6rem .95rem;display:grid;align-content:center;gap:.4rem}
.res-you{z-index:1;background:var(--lime-soft);box-shadow:inset 0 0 0 1.5px var(--lime-ink)}
.res-you b{font:700 1rem/1.1 var(--display);color:var(--ink)}
.res-you span{display:flex;gap:.35rem}
.res-you i{font:600 .72rem/1 var(--sans);font-style:normal;padding:.32rem .55rem;border-radius:999px;background:var(--field);color:var(--lime-ink)}
.res-x{background:var(--paper-2)}
.res-x i{display:block;width:62%;height:.55rem;border-radius:4px;background:var(--paper-3)}
.res-x i+i{width:38%;height:.45rem}
.ui-book{background:linear-gradient(160deg,rgb(244 241 234 / .11),rgb(244 241 234 / .035));color:var(--paper);
  box-shadow:inset 0 1px 0 rgb(244 241 234 / .2),inset 0 0 0 1px rgb(244 241 234 / .12),0 40px 70px -40px rgb(0 0 0 / .9)}
.ui-ok{display:flex;align-items:center;gap:.75rem;font:700 1.3rem/1.2 var(--display);letter-spacing:-.01em}
.ui-check{display:grid;place-items:center;width:2.2rem;height:2.2rem;flex:none;border-radius:50%;background:var(--lime);color:var(--ink)}
.ui-check svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ui-push{display:flex;align-items:center;gap:.6rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid rgb(244 241 234 / .14);font-size:.92rem;color:var(--ink-on-dark)}
.ui-push .ui-ico{color:var(--lime)}
.ui-book .ui-note{color:var(--ink-on-dark-60)}

/* živá verze: přilepené nebe, hodiny, psaní dotazu, příjezd karty (třídy dává js/prinos.js) */
.benefits.is-live{padding:0;overflow:clip;background:linear-gradient(var(--paper) 50%,var(--ink) 50%)}
/* nebe zabírá místo v toku (obsah se přes něj vytáhne záporným okrajem nadpisu), takže na konci sekce odjede nahoru
   celé i s hvězdami a měsícem; spodní okraj je čistá --ink, na kterou navazuje telefon Postupu */
.benefits.is-live .bf-sky{display:block;position:sticky;top:0;z-index:0;height:100vh;height:100lvh;overflow:hidden;pointer-events:none}
.benefits.is-live .bf-head{margin-top:-100vh;margin-top:-100lvh}
.sky{position:absolute;inset:0}
.sky-day{background:var(--sky-day-l),var(--paper)}
/* zlatá hodina mezi polednem a soumrakem: prolnutí jde přes teplé světlo, ne přes šedou */
.sky-gold{background:radial-gradient(85% 60% at 18% 100%,rgb(236 150 92 / .5),transparent 72%),radial-gradient(60% 50% at 85% 0,rgb(255 214 170 / .45),transparent 70%),linear-gradient(#f1dcc4,#e7b48f)}
.sky-eve{background:var(--sky-eve)}
.sky-night{background:var(--sky-night)}
/* hvězdy jen v horní části, u spodního okraje noc přechází do čisté --ink (na ni navazuje telefon Postupu) */
.sky-stars{position:absolute;left:0;right:0;top:-6%;bottom:0;background:var(--stars-a);background-size:var(--stars-a-s);
  -webkit-mask-image:linear-gradient(#000 0 36%,transparent 70%);mask-image:linear-gradient(#000 0 36%,transparent 70%);animation:bf-tw 4.6s ease-in-out infinite alternate}
.sky-stars-2{background:var(--stars-b);background-size:var(--stars-b-s);animation-duration:3.3s;animation-delay:-1.6s}
.sky-moon{position:absolute;right:clamp(1.5rem,11vw,12rem);top:11%;width:clamp(44px,5vw,76px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fffdf6 0,#efe9da 50%,#d6cfbd 100%);box-shadow:0 0 0 10px rgb(244 241 234 / .03),0 0 60px 8px rgb(244 241 234 / .14),0 0 160px 40px rgb(244 241 234 / .05)}
@keyframes bf-tw{from{opacity:.5}to{opacity:1}}
.benefits:not(.in-view) .sky-stars,.benefits:not(.is-night) .sky-stars{animation-play-state:paused}
.benefits.is-live.in-view .sky-day,.benefits.is-live.in-view .sky-gold,.benefits.is-live.in-view .sky-eve,.benefits.is-live.in-view .bf-clock{will-change:opacity}
.benefits.is-live.in-view .sky-moon,.benefits.is-live.in-view .sky-stars{will-change:transform,opacity}
/* barva textu podle oblohy, ne podle chvíle: na světlé obloze tmavý, po ztmavnutí (.is-dusk, js/prinos.js) světlý; čitelné v každé poloze */
.benefits.is-live .bf-head,.benefits.is-live .bm{--fg:var(--ink);--mute:var(--ink-60);--line:var(--paper-3);color:var(--fg)}
.benefits.is-live.is-dusk .bf-head,.benefits.is-live.is-dusk .bm{--fg:var(--paper);--mute:#ebe3d8;--line:rgb(244 241 234 / .16)}
.benefits.is-live .bf-head h2,.benefits.is-live .b-when,.benefits.is-live .b-say,.benefits.is-live .bm-txt h3,.benefits.is-live .bm-txt p{transition:color .3s ease-out}
/* velké hodiny: pásky znaků (generovaný obsah) se posunou jen transformací při změně data-m (0 den, 1 soumrak, 2 noc) */
.benefits.is-live .bf-clock{display:flex;position:absolute;left:max(var(--gut),calc(50% - var(--max) / 2));bottom:clamp(1rem,5vh,3.5rem);align-items:flex-start;
  font:800 clamp(6rem,14.5vw,15rem)/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;color:rgb(128 118 104 / .28)}
/* síla hodin: skript mění jen opacity (u čtené chvíle slabý vodoznak, v mezeře mezi chvílemi asi 2–3× výraznější) */
/* okénko jedné číslice: ořez jen nahoře a dole (clip-path), do stran glyf přesahovat smí */
.ck-c{display:block;height:1em;clip-path:inset(0 -.3em)}
.ck-c+.ck-c,.ck-colon+.ck-c,.ck-c+.ck-colon{margin-left:-.035em}
.ck-s{display:block;white-space:pre;transition:transform 1.4s cubic-bezier(.16,.84,.24,1)}
.ck-day{font-size:.28em;height:1.2em;line-height:1.2;margin:.2em .45em 0 0}
.ck-day .ck-s::before{content:"Út\A Ne\A Po"}
.ck-h1 .ck-s::before{content:"1\A 2"}
.ck-h2 .ck-s::before{content:"1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2"}
.ck-m1 .ck-s::before{content:"4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4"}
.ck-m2 .ck-s::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0"}
.ck-colon{margin:0 -.02em}
.ck-h1 .ck-s{transition-delay:.05s}.ck-h2 .ck-s{transition-delay:.1s}.ck-m1 .ck-s{transition-delay:.15s}.ck-m2 .ck-s{transition-delay:.2s}
.bf-clock[data-m="1"] .ck-day .ck-s{transform:translateY(-1.2em)}
.bf-clock[data-m="2"] .ck-day .ck-s{transform:translateY(-2.4em)}
.bf-clock[data-m="2"] .ck-h1 .ck-s{transform:translateY(-1em)}
.bf-clock[data-m="1"] .ck-h2 .ck-s{transform:translateY(-8em)}
.bf-clock[data-m="2"] .ck-h2 .ck-s{transform:translateY(-11em)}
.bf-clock[data-m="1"] .ck-m1 .ck-s{transform:translateY(-6em)}
.bf-clock[data-m="2"] .ck-m1 .ck-s{transform:translateY(-10em)}
.bf-clock[data-m="1"] .ck-m2 .ck-s{transform:translateY(-5em)}
.bf-clock[data-m="2"] .ck-m2 .ck-s{transform:translateY(-10em)}
/* rozvržení: chvíle čtené běžným posouváním, mezi nimi skoro celé okno nebe (tam se prolíná obloha a točí hodiny) */
.benefits.is-live .bf-head,.benefits.is-live .benefit-list{position:relative;z-index:1}
.benefits.is-live .bf-head{padding-top:var(--sec)}
.benefits.is-live .benefit-list{margin:0}
/* mezera mezi chvílemi 0,28 okna (2 × 14svh), za poslední chvílí jen malý okraj listu nad telefonem Postupu */
.benefits.is-live .bm{padding:14vh 0;padding:14svh 0;background:none;border-radius:0}
.benefits.is-live .bm-day{padding-top:clamp(2.5rem,9vh,6rem)}
.benefits.is-live .bm-night{padding-bottom:2.5rem}
/* konec Přínosů je tmavý list přes připnutý Postup (45 % okna): telefon pod ním už odjíždí s hovorem na displeji, takže než poslední
   text zmizí pod hlavičkou, je vidět krok 1. Stejný pohyb jako Ceník přes Postup, jen opačným směrem; rohy jako list Ceníku. */
.benefits.is-live:has(+ .steps.is-live){z-index:1;margin-bottom:-45vh;margin-bottom:-45svh;border-radius:0 0 var(--sheet-r) var(--sheet-r)}
.benefits.is-live .bm-night::before,.benefits.is-live .bm-clock{display:none}
.benefits.is-live .bm-in{grid-template-areas:"when" "say" "card" "txt"}
/* dotaz se napíše po znacích s kurzorem: skript po 48 ms přidává znakům třídu .on a kurzor (.cur) posouvá za poslední
   znak (žádné animace po znacích, jen přepnutí třídy); karta má vlastní spouštěč is-card (vjede do obrazu) a na dotaz nečeká */
.bm{--t0:.3s}
.b-say .ch,.sq .ch{position:relative}
.benefits.is-live .b-say .ch,.benefits.is-live .sq .ch{opacity:0}
.benefits.is-live .b-say .ch.on,.benefits.is-live .is-typed .b-say .ch{opacity:1}
.benefits.is-live .is-card .sq .ch{animation:bf-in 0s calc(var(--t0) + var(--i) * 42ms) forwards}
.benefits.is-live .b-say .ch::after{content:"";position:absolute;right:-.07em;top:.12em;height:.84em;width:.065em;border-radius:1px;background:currentColor;opacity:0}
.benefits.is-live .b-say .ch.cur::after{opacity:1}
.benefits.is-live .b-say .ch.blink::after{animation:bf-blink 1.05s steps(1) 3}
@keyframes bf-in{to{opacity:1}}
@keyframes bf-blink{0%{opacity:1}50%{opacity:0}}
.benefits.is-live .bf-card{opacity:0;translate:0 2.5rem;rotate:x 24deg;transform-origin:50% 100%;
  transition:opacity .6s ease-out,translate 1.1s cubic-bezier(.2,.85,.2,1),rotate 1.1s cubic-bezier(.2,.85,.2,1)}
.benefits.is-live .is-card .bf-card{opacity:1;translate:none;rotate:none}
.benefits.is-live .ui-rows li,.benefits.is-live .ui-quiet{opacity:0;translate:0 .5rem;transition:opacity .4s ease-out,translate .6s cubic-bezier(.2,.85,.2,1)}
.benefits.is-live .is-card .ui-rows li,.benefits.is-live .is-card .ui-quiet{opacity:1;translate:none;transition-delay:calc(var(--t0) + var(--r,0) * 110ms)}
.ui-rows li:nth-child(2){--r:1}.ui-rows li:nth-child(3){--r:2}.ui-quiet{--r:4}
/* výsledky hledání jen klidně naběhnou (prolnutí shora dolů); „Váš podnik“ je 2. výsledek, pořadí se nemění (nic neslibujeme) */
.benefits.is-live .ui-res li{opacity:0;transition:opacity .5s ease-out}
.benefits.is-live .is-card .ui-res li{opacity:1;transition-delay:calc(var(--t0) + .4s + var(--r,0) * 140ms)}
.ui-res li:nth-child(2){--r:1}.ui-res li:nth-child(3){--r:2}
.benefits.is-live .ui-ok{opacity:0;scale:.9;transition:opacity .4s ease-out,scale .55s cubic-bezier(.3,1.45,.5,1)}
.benefits.is-live .is-card .ui-ok{opacity:1;scale:none;transition-delay:var(--t0)}
.benefits.is-live .ui-push{opacity:0;translate:0 -.6rem;transition:opacity .45s ease-out,translate .7s cubic-bezier(.2,.85,.2,1)}
.benefits.is-live .is-card .ui-push{opacity:1;translate:none;transition-delay:calc(var(--t0) + .4s)}
/* chvíle, které při načtení už byly nad oknem: rovnou hotové */
.benefits.is-live .is-done .ch{animation:none!important;opacity:1}
.benefits.is-live .is-done .ch::after{animation:none!important;opacity:0}
.benefits.is-live .is-done .bf-card,.benefits.is-live .is-done .bf-card *{transition:none!important}
/* živé Přínosy nad statickým Postupem (Postup se nevešel do okna): noc dole oblé rohy jako ve statické verzi */
.benefits.is-live:has(+ .steps:not(.is-live)){border-radius:0 0 var(--sheet-r) var(--sheet-r)}
/* počítač: text vlevo, karta vpravo uprostřed chvíle */
@media (min-width:900px){
  .bm-in{grid-template-columns:minmax(0,1fr) minmax(0,24rem);grid-template-areas:"clock card" "when card" "say card" "txt card";column-gap:clamp(3rem,7vw,7.5rem)}
  .bf-card{align-self:center;justify-self:end;margin:0}
  .benefits.is-live .bm-in{grid-template-areas:"when card" "say card" "txt card"}
}
/* tisk: chvíle pod sebou na bílém, karty a dotazy v konečném stavu */
@media print{
  .bf-sky,.bm-night::before{display:none!important}
  .benefits,.bm{background:none!important;color:var(--ink);border-radius:0}
  .bm{--fg:var(--ink);--mute:var(--ink-60);padding:1.5rem 0!important}
  .bm .ch{opacity:1!important;animation:none!important}
  .bm .ch::after{display:none!important}
  .bf-card,.ui-rows li,.ui-quiet,.ui-res li,.ui-ok,.ui-push{opacity:1!important;translate:none!important;rotate:none!important;scale:none!important;transition:none!important}
  .ui-book{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .ui-book .ui-note,.ui-push{color:var(--ink)}
}
/* telefon: hodiny menší u spodního kraje nad lištou „Zavolat / Napsat SMS“ */
@media (max-width:759px){
  .benefits.is-live .bf-clock{left:var(--gut);bottom:calc(76px + 1rem);font-size:clamp(4rem,21vw,6.2rem)}
}

/* kontrolní list na osobních stránkách /pro/ (seznam s políčky a razítko „Ověřeno“); .how používá i kontrolní pult */
.checks{list-style:none;padding:0;counter-reset:bod}
.checks li{display:grid;grid-template-columns:2rem 1fr 22px;gap:.6rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--line-2);counter-increment:bod}
.checks li::before{content:counter(bod,decimal-leading-zero);font:500 .85rem/1.65 var(--mono);color:var(--ink-60);font-variant-numeric:tabular-nums}
.checks .t{font-size:1rem;line-height:1.4}
.how{display:block;margin-top:.3rem;font:500 .78rem/1.45 var(--mono);color:var(--ink-60)}
.box{position:relative;width:22px;height:22px;margin-top:.1rem;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--field)}
.box svg{position:absolute;left:50%;top:50%;width:26px;height:26px;fill:none;stroke:var(--lime-ink);stroke-width:2.6;transform:translate(-46%,-56%) rotate(-6deg);stroke-linecap:round;stroke-linejoin:round}
/* políčko bez SVG (osobní stránky /pro/): fajfka perem čistě z CSS */
.box:empty::after{content:"";position:absolute;left:.48rem;top:.05rem;width:.42rem;height:.85rem;border:solid var(--lime-ink);border-width:0 .16rem .16rem 0;transform:rotate(38deg)}
.stamp{position:absolute;right:1rem;bottom:1.25rem;display:grid;place-items:center;width:7.4rem;height:7.4rem;border-radius:50%;color:var(--lime-ink);background:rgb(230 239 183 / .55);box-shadow:inset 0 0 0 3px var(--lime),inset 0 0 0 7px transparent,inset 0 0 0 8px var(--lime-ink);font:800 1rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;transform:rotate(-6deg)}

/* ===== Kontrolní pult (30. 10. 2026): „Než vám web předám, projde kontrolou“ =====
   Papírový pult (--paper-2) se zaoblenými rohy pod tmavým ceníkem: hlavička listu, 10 dlaždic (text na papíře, nad ním
   tmavý displej s přístrojem, kde smí limetka), na konci počítadlo a video razítka. Bento: telefon 1 sloupec, od 760 px
   2 sloupce (01 a 10 přes celou šířku), od 1180 px 3 sloupce (01 a 10 přes dva). Přístroj je „scéna“ 24 × 10,5 em,
   velikost písma scény se dopočítá ze šířky displeje (container query), strop podle výšky displeje v rem.
   Základ = hotový stav (bez skriptu, omezený pohyb, úspora dat, tisk). Třídy dává js/kontrola.js: .is-wait = výchozí stav
   před spuštěním, .is-run = přechody do hotového stavu (jen transform a opacity; fajfka, trasa a stupnice malým
   stroke-dashoffset), .is-done = hotovo. Zpoždění --d, doba přístroje do odškrtnutí --kd (čte ji i skript). */
.protocol{--e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1);--e-back:cubic-bezier(.2,1,.3,1);--d-panel:#1f2123;
  padding:calc(var(--sec) * .7) 0}
.kp-desk{border-radius:28px;background:var(--paper-2);box-shadow:inset 0 0 0 1px rgb(20 21 22 / .07);padding:1.7rem .55rem .55rem}
.kp-head{padding:0 .7rem 1.4rem;margin-bottom:.8rem;border-bottom:2px solid var(--ink)}
.kp-head h2{font-size:clamp(2.2rem,4.4vw,4rem);letter-spacing:-.035em;line-height:.98;margin-bottom:1rem}
.kp-intro p{color:var(--ink-60);max-width:34rem}
.kp-fields{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin-top:1.1rem;font:500 .8rem/1.4 var(--mono)}
.kp-fields div{display:flex;gap:.5rem;align-items:baseline}
.kp-fields dt{color:var(--ink-60)}
.kp-fields dd{border-bottom:1px solid var(--ink);padding:0 .2rem .1rem;min-width:7rem}
.kp-fields .blank{color:var(--ink-60)}
.kp-grid{list-style:none;padding:0;display:grid;gap:.55rem}
.kp,.kp-sum{border-radius:18px;background:var(--field);box-shadow:0 0 0 1px rgb(20 21 22 / .07),0 1px 2px rgb(20 21 22 / .05),0 18px 34px -26px rgb(20 21 22 / .45)}
.kp{position:relative;display:flex;flex-direction:column;min-width:0;padding:.4rem}
.kp .t{display:block;padding:.8rem .6rem .75rem;font-size:.98rem;line-height:1.42}
.kp .how{margin-top:.45rem;font-size:.78rem}

/* displej přístroje: lišta (číslo, název, štítek ilustrace, fajfka) a scéna */
.kp-scr{position:relative;display:flex;flex-direction:column;height:9.75rem;padding:.2rem 0 .3rem;overflow:hidden;border-radius:13px;color:var(--ink-on-dark);
  background-color:var(--ink);background-image:radial-gradient(120% 90% at 0 0,rgb(244 241 234 / .07),transparent 62%);box-shadow:inset 0 0 0 1px rgb(244 241 234 / .06);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none}
.kp-scr::before{content:"";position:absolute;inset:0;background:radial-gradient(rgb(244 241 234 / .075) .7px,transparent 1.1px) 0 0/13px 13px;pointer-events:none}
.kp-scr::after{content:"";position:absolute;z-index:3;top:0;bottom:0;left:-50%;width:42%;background:linear-gradient(100deg,transparent,rgb(244 241 234 / .1),transparent);opacity:0;pointer-events:none}
.kp-bar{position:relative;z-index:2;display:flex;align-items:center;gap:.55rem;flex:none;height:1.85rem;padding:0 .45rem 0 .7rem;
  font:600 .64rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-on-dark-60);white-space:nowrap}
.kp-no{font:500 .68rem/1 var(--mono);letter-spacing:0;color:var(--ink-on-dark)}
.kp-il{margin-left:auto;font-size:.56rem;letter-spacing:.1em}
.kp-ok{position:relative;display:grid;place-items:center;flex:none;width:1.2rem;height:1.2rem;margin-left:auto;color:var(--ink)}
.kp-il+.kp-ok{margin-left:0}
.kp-ok::before,.kp-ok::after{content:"";position:absolute;inset:0;border-radius:50%}
.kp-ok::before{box-shadow:inset 0 0 0 1.5px rgb(244 241 234 / .3)}
.kp-ok::after{background:var(--lime)}
.kp-ok svg{position:relative;z-index:1;width:.82rem;height:.82rem;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.kp-area{position:relative;display:block;flex:1;min-height:0;container-type:inline-size}
.kp-st{position:absolute;left:50%;top:50%;display:block;width:24em;height:10.5em;margin:-5.25em 0 0 -12em;font-size:11px;font-size:min(3.9cqw,.7rem);line-height:1.2}
.kp-st i,.kp-st em{font-style:normal}
.kp-st>*{position:absolute}
.kp-ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* počítadlo: pásek číslic se posune jen transformací (konečná poloha je v základu) */
.od{display:inline-block;height:1em;overflow:hidden;line-height:1;vertical-align:-.2em}
.od-s{display:flex;flex-direction:column}
.od-s i{display:block;height:1em;font-style:normal}

/* pohyb (jen se skriptem): výchozí stav, spuštění a odškrtnutí */
.kp.is-wait .kp-st{opacity:.38}
.kp.is-run .kp-st{transition:opacity .5s ease-out}
.kp.is-wait .kp-ok::after{transform:scale(0)}
.kp.is-wait .kp-ok svg{stroke-dashoffset:1}
.kp.is-run .kp-ok::after{transition:transform .45s var(--e-back) var(--kd)}
.kp.is-run .kp-ok svg{transition:stroke-dashoffset .3s ease-out calc(var(--kd) + .18s)}
.kp.is-run .kp-scr::after{animation:kp-glare 1.1s ease-out calc(var(--kd) + .05s) both}
@keyframes kp-glare{0%{opacity:0;transform:translateX(0)}25%{opacity:1}100%{opacity:0;transform:translateX(400%)}}

/* 01 hovor: ťuknutí na tlačítko, vlna, číslo se vytočí */
.kp-1{--kd:2s}
.k1-btn{left:2.6em;top:3.3em;width:3.9em;height:3.9em;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:var(--ink)}
.k1-btn .kp-ico{position:relative;width:1.75em;height:1.75em;stroke-width:1.9}
.k1-ring,.k1-wave{position:absolute;inset:0;border-radius:50%}
.k1-ring{border:1.5px solid rgb(188 214 69 / .55);transform:scale(1.45);opacity:.6}
.k1-ring2{transform:scale(1.95);opacity:.25}
.k1-wave{background:rgb(188 214 69 / .4);opacity:0}
.k1-txt{left:9.2em;top:2.1em;right:0}
.k1-lbl{display:block;margin-bottom:.4em;font-weight:600;letter-spacing:.02em;color:var(--ink-on-dark-60)}
.k1-num{display:block;white-space:nowrap;font:700 1.62em/1.1 var(--display);font-variant-numeric:tabular-nums}
.k1-num i{display:inline-block}
.k1-via{display:block;margin-top:.55em;font-size:.86em;font-weight:600;color:var(--lime)}
.k1-tap{left:3.45em;top:4.15em;width:2.2em;height:2.2em;border-radius:50%;background:rgb(244 241 234 / .55);box-shadow:0 0 0 .4em rgb(244 241 234 / .12);opacity:0}
.kp.is-wait .k1-ring{opacity:0;transform:scale(1)}
.kp.is-wait .k1-lbl,.kp.is-wait .k1-num i,.kp.is-wait .k1-via{opacity:0;transform:translateY(.45em)}
.kp-1.is-run .k1-tap{animation:k1-tap 1.1s var(--e-io) .05s both}
.kp-1.is-run .k1-btn{animation:k1-press .45s var(--e-io) .4s both}
.kp-1.is-run .k1-wave{animation:k1-wave .9s var(--e-out) .5s both}
.kp-1.is-run .k1-lbl{transition:opacity .3s ease-out .72s,transform .5s var(--e-out) .72s}
.kp-1.is-run .k1-lbl i{animation:k1-dot .8s ease-in-out .95s 2 both}
.kp-1.is-run .k1-lbl i+i{animation-delay:1.1s}
.kp-1.is-run .k1-lbl i+i+i{animation-delay:1.25s}
.kp-1.is-run .k1-num i{transition:opacity .2s ease-out,transform .45s var(--e-out);transition-delay:calc(.8s + var(--i,0) * 55ms)}
.kp-1.is-run .k1-via{transition:opacity .4s ease-out 1.5s,transform .6s var(--e-out) 1.5s}
.kp-1.is-run .k1-ring{transition:opacity .6s ease-out 1.35s,transform 1s var(--e-out) 1.35s}
.kp-1.is-run .k1-ring2{transition-delay:1.5s}
@keyframes k1-tap{0%{opacity:0;transform:translate(3.4em,2.6em) scale(1.3)}38%{opacity:1;transform:translate(0,0) scale(1.15)}48%{transform:translate(0,0) scale(.8)}60%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(.8em,1em) scale(1.1)}}
@keyframes k1-press{0%,100%{transform:scale(1)}45%{transform:scale(.9)}}
@keyframes k1-wave{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.7)}}
@keyframes k1-dot{0%,100%{opacity:1}50%{opacity:.15}}

/* 02 čitelnost: lupa přejede dva telefony a drobné písmo se zvětší */
.kp-2{--kd:2.15s}
.k2-ph{bottom:-2.6em;padding:.42em;border-radius:1.3em;background:var(--d-panel);box-shadow:inset 0 0 0 .13em rgb(244 241 234 / .22),0 1em 2em -1em rgb(0 0 0 / .7)}
.k2-ph::before{content:"";position:absolute;z-index:1;left:50%;top:.78em;border-radius:99px;background:var(--d-panel)}
.k2-a{left:2.4em;width:9.4em;height:12.4em}
.k2-a::before{width:2.6em;height:.62em;margin-left:-1.3em}
.k2-b{left:13.4em;width:7.8em;height:11em}
.k2-b::before{width:.55em;height:.55em;margin-left:-.275em}
.k2-in{display:block;height:100%;overflow:hidden;padding:1.75em .8em 0;border-radius:.92em;background:var(--paper);color:var(--ink)}
.k2-tx{display:block;transform-origin:0 0}
.k2-tx b{display:block;margin-bottom:.45em;font:700 1.08em/1.08 var(--display);letter-spacing:-.01em}
.k2-tx span{display:flex;justify-content:space-between;padding:.32em 0;border-top:1px solid rgb(20 21 22 / .12);font-size:.86em;font-weight:600}
.k2-b .k2-tx{font-size:.88em}
.k2-lens{left:0;top:0;width:4.6em;height:4.6em;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgb(255 255 255 / .34),rgb(255 255 255 / .07) 46%,rgb(188 214 69 / .1));
  box-shadow:inset 0 0 0 .24em var(--ink-on-dark),0 .7em 1.4em -.5em rgb(0 0 0 / .75);transform:translate(19.6em,-.4em) scale(.6)}
.k2-lens i{position:absolute;left:83%;top:83%;width:2.5em;height:.62em;border-radius:99px;background:var(--ink-on-dark);transform:rotate(45deg);transform-origin:0 50%}
.kp.is-wait .k2-tx{transform:scale(.46)}
.kp.is-wait .k2-lens{opacity:0;transform:translate(-5em,3.6em) scale(1)}
.kp-2.is-run .k2-tx{transition:transform .75s var(--e-out) .62s}
.kp-2.is-run .k2-b .k2-tx{transition-delay:1.3s}
.kp-2.is-run .k2-lens{animation:k2-lens 2.05s var(--e-io) .1s both}
@keyframes k2-lens{0%{opacity:0;transform:translate(-5em,3.6em) scale(1)}12%{opacity:1}28%,40%{transform:translate(4.3em,3.5em) scale(1.06)}62%,74%{transform:translate(14.5em,4.3em) scale(1.06)}100%{opacity:1;transform:translate(19.6em,-.4em) scale(.6)}}

/* 03 ťuknutí: dvě ťuknutí po cestě Úvod → Ceník → Hodiny, pak kalendář se svátkem */
.kp-3{--kd:2.3s}
.k3-cnt{left:0;top:.7em;width:5.8em;text-align:center}
.k3-od{font:800 5.4em/1 var(--display);letter-spacing:-.04em;color:var(--lime)}
.k3-od .od-s{transform:translateY(-2em)}
.k3-cnt small{display:block;margin-top:.35em;font-size:.9em;font-weight:600;color:var(--ink-on-dark-60)}
.k3-path{left:7.2em;top:.5em;display:flex;gap:1.4em}
.k3-path i{position:relative;width:4.6em;padding:.42em 0;border-radius:99px;text-align:center;font-weight:600;box-shadow:inset 0 0 0 1px rgb(244 241 234 / .24)}
.k3-path i+i::before{content:"";position:absolute;left:-.95em;top:50%;width:.42em;height:.42em;margin-top:-.21em;border:solid rgb(244 241 234 / .45);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.k3-mk{position:absolute;left:.9em;bottom:-.55em;width:2.8em;height:.22em;border-radius:99px;background:var(--lime);transform:translateX(12em)}
.k3-cal{left:7.2em;right:0;top:3.85em}
.k3-cal-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45em}
.k3-cal-h b{font:700 1em/1 var(--display)}
.k3-cal-h em{font-size:.84em;font-weight:600;color:var(--lime);transform-origin:100% 50%}
.k3-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.22em}
.k3-days i,.k3-hol>span{display:flex;flex-direction:column;align-items:center;gap:.28em;padding:.42em 0 .45em;border-radius:.45em;font-size:.76em;font-weight:600;line-height:1}
.k3-days i{position:relative;background:var(--d-panel);color:var(--ink-on-dark-60)}
.k3-days b{font:700 1.5em/1 var(--display);color:var(--ink-on-dark)}
.k3-hol>span{position:absolute;inset:0;font-size:1em;background:var(--lime);color:var(--ink)}
.k3-hol>span b{color:var(--ink)}
.k3-tap{left:0;top:0;width:2em;height:2em;border-radius:50%;background:rgb(244 241 234 / .5);box-shadow:0 0 0 .38em rgb(244 241 234 / .12);opacity:0}
.kp.is-wait .k3-od .od-s{transform:translateY(0)}
.kp.is-wait .k3-mk{transform:translateX(0)}
.kp.is-wait .k3-cal{opacity:0;transform:translateY(.7em)}
.kp.is-wait .k3-hol>span,.kp.is-wait .k3-cal-h em{opacity:0;transform:scale(.6)}
.kp-3.is-run .k3-od .od-s{animation:k3-od 1.5s var(--e-out) both}
.kp-3.is-run .k3-mk{animation:k3-mk 1.5s var(--e-out) both}
.kp-3.is-run .k3-tap{animation:k3-tap 1.5s var(--e-io) both}
.kp-3.is-run .k3-cal{transition:opacity .4s ease-out 1.4s,transform .6s var(--e-out) 1.4s}
.kp-3.is-run .k3-hol>span{transition:opacity .2s ease-out 1.8s,transform .5s var(--e-back) 1.8s}
.kp-3.is-run .k3-cal-h em{transition:opacity .25s ease-out 1.95s,transform .5s var(--e-back) 1.95s}
@keyframes k3-od{0%,30%{transform:translateY(0)}40%,66%{transform:translateY(-1em)}76%,100%{transform:translateY(-2em)}}
@keyframes k3-mk{0%,30%{transform:translateX(0)}40%,66%{transform:translateX(6em)}76%,100%{transform:translateX(12em)}}
@keyframes k3-tap{0%{opacity:0;transform:translate(17.5em,5.5em) scale(1.3)}20%{opacity:1;transform:translate(14.5em,.52em) scale(1.1)}28%{transform:translate(14.5em,.52em) scale(.8)}36%{transform:translate(14.5em,.52em) scale(1)}58%{transform:translate(20.5em,.52em) scale(1.1)}64%{transform:translate(20.5em,.52em) scale(.8)}72%{opacity:1;transform:translate(20.5em,.52em) scale(1)}100%{opacity:0;transform:translate(21.3em,2.3em) scale(1.1)}}

/* 04 navigace: obecná mapka, špendlík dopadne ke dveřím, trasa se dokreslí */
.kp-4{--kd:1.95s}
.k4-map{left:0;top:0;width:24em;height:10.5em;overflow:visible}
.k4-str{fill:none;stroke:rgb(244 241 234 / .1);stroke-width:7;stroke-linecap:round}
.k4-river{fill:none;stroke:rgb(244 241 234 / .05);stroke-width:14;stroke-linecap:round}
.k4-park{fill:rgb(188 214 69 / .11)}
.k4-rt{fill:none;stroke:var(--lime);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.k4-me{fill:var(--ink-on-dark);stroke:rgb(244 241 234 / .22);stroke-width:5}
.k4-door{fill:none;stroke:var(--ink-on-dark);stroke-width:1.8;stroke-linejoin:round}
.k4-pin{left:17.9em;top:3.14em;width:2.2em;height:2.66em;transform-origin:1.1em 2.66em}
.k4-pin::before{content:"";position:absolute;left:0;top:0;width:2.2em;height:2.2em;border-radius:50% 50% 50% 0;background:var(--lime);transform:rotate(-45deg)}
.k4-pin i{position:absolute;left:.72em;top:.72em;width:.76em;height:.76em;border-radius:50%;background:var(--ink)}
.k4-sh{left:18.35em;top:5.6em;width:1.3em;height:.42em;border-radius:50%;background:rgb(0 0 0 / .6)}
.k4-lbl{left:11.6em;top:6.75em;padding:.42em .75em;border-radius:99px;background:var(--paper);color:var(--ink);transform-origin:85% 0}
.k4-lbl span{display:block;font-size:.9em;font-weight:600;line-height:1}
.kp.is-wait .k4-rt{stroke-dashoffset:1}
.kp.is-wait .k4-pin,.kp.is-wait .k4-sh{opacity:0}
.kp.is-wait .k4-lbl{opacity:0;transform:scale(.6)}
.kp-4.is-run .k4-pin{animation:k4-drop .8s var(--e-io) .15s both}
.kp-4.is-run .k4-sh{animation:k4-sh .8s var(--e-io) .15s both}
.kp-4.is-run .k4-rt{transition:stroke-dashoffset .9s var(--e-io) .8s}
.kp-4.is-run .k4-lbl{transition:opacity .2s ease-out 1.55s,transform .5s var(--e-back) 1.55s}
@keyframes k4-drop{0%{opacity:0;transform:translateY(-6em) scale(1,1.1)}50%{opacity:1;transform:translateY(0) scale(1,1.08)}64%{transform:translateY(0) scale(1.14,.84)}80%{transform:translateY(-.45em) scale(.96,1.05)}100%{opacity:1;transform:translateY(0) scale(1,1)}}
@keyframes k4-sh{0%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1)}64%{transform:scale(1.25)}80%{transform:scale(.85)}100%{opacity:1;transform:scale(1)}}

/* 05 rychlost: obecný měřič, ručička a počítadla */
.kp-5{--kd:1.9s}
.k5-g{left:0;top:1.5em;width:12.8em;height:7em;overflow:visible}
.k5-tr,.k5-v{fill:none;stroke-width:8;stroke-linecap:round}
.k5-tr{stroke:rgb(244 241 234 / .12)}
.k5-v{stroke:var(--lime);stroke-dasharray:100 101;stroke-dashoffset:2}
.k5-nd{left:6.29em;top:3.3em;width:.22em;height:4.6em;border-radius:.11em;background:var(--ink-on-dark);transform-origin:50% 100%;transform:rotate(86.4deg)}
.k5-hub{left:5.85em;top:7.35em;width:1.1em;height:1.1em;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 .22em var(--ink-on-dark)}
.k5-sc{left:.35em;top:8.55em;width:12.1em;display:flex;justify-content:space-between}
.k5-sc small{font-size:.74em;font-weight:600;color:var(--ink-on-dark-60)}
.k5-r{left:14.2em;top:1em;right:0}
.k5-r>small{display:block;font-size:.86em;font-weight:600;color:var(--ink-on-dark-60)}
.k5-big{display:flex;align-items:flex-end;margin:.1em 0 .14em;font:800 4.5em/1 var(--display);letter-spacing:-.035em}
.k5-big .od{vertical-align:0}
.k5-big small{margin:0 0 .16em .14em;font:600 .2em/1 var(--sans);letter-spacing:0;color:var(--ink-on-dark-60)}
.k5-t{font:700 1.4em/1 var(--display);color:var(--ink-on-dark)}
.k5-a .od-s{transform:translateY(-9em)}
.k5-b .od-s{transform:translateY(-18em)}
.k5-c .od-s{transform:translateY(-2em)}
.k5-d .od-s{transform:translateY(-11em)}
.kp.is-wait .k5-v{stroke-dashoffset:101}
.kp.is-wait .k5-nd{transform:rotate(-90deg)}
.kp.is-wait .k5-r .od-s{transform:translateY(0)}
.kp-5.is-run .k5-v{transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.15,1) .2s}
.kp-5.is-run .k5-nd{animation:k5-nd 1.6s cubic-bezier(.3,.7,.15,1) .2s both}
.kp-5.is-run .k5-r .od-s{transition:transform 1.3s cubic-bezier(.3,.7,.15,1) .2s}
@keyframes k5-nd{0%{transform:rotate(-90deg)}72%{transform:rotate(91deg)}86%{transform:rotate(84.5deg)}100%{transform:rotate(86.4deg)}}

/* 06 písmo a kontrast: posuvník zvětší písmo, měřič kontrastu */
.kp-6{--kd:1.9s}
.k6-aa{left:.2em;top:.1em;font:800 5em/1 var(--display);letter-spacing:-.04em;transform-origin:0 85%}
.k6-sl{left:.4em;top:6.5em;width:10.2em;height:3em}
.k6-ab{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-end;height:1.7em;font-family:var(--display);font-weight:800;line-height:1;color:var(--ink-on-dark-60)}
.k6-ab i:first-child{font-size:.95em}
.k6-ab i:last-child{font-size:1.7em}
.k6-tr{position:absolute;left:0;right:0;bottom:.35em;height:.34em;border-radius:99px;background:rgb(244 241 234 / .14)}
.k6-f{position:absolute;inset:0;border-radius:inherit;background:var(--lime);transform-origin:0 50%;transform:scaleX(.86)}
.k6-k{position:absolute;left:0;top:50%;width:1.3em;height:1.3em;margin-top:-.65em;border-radius:50%;background:var(--ink-on-dark);box-shadow:0 .2em .5em rgb(0 0 0 / .5);transform:translateX(8.12em)}
.k6-ct{left:12.8em;right:0;top:.55em}
.k6-ct small{display:block;font-size:.86em;font-weight:600;color:var(--ink-on-dark-60)}
.k6-ct b{display:block;margin:.08em 0 .32em;font:800 3.6em/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.k6-ct b .k6-c{margin:0 .1em 0 .12em}
.k6-od{font-variant-numeric:tabular-nums}
.k6-od .od-s{transform:translateY(-6em)}
.k6-bar{position:relative;display:block;height:.34em;border-radius:99px;background:rgb(244 241 234 / .14)}
.k6-bf{position:absolute;inset:0;border-radius:inherit;background:var(--lime);transform-origin:0 50%;transform:scaleX(.7)}
.k6-th{position:absolute;left:45%;top:-.4em;width:2px;height:1.14em;background:var(--ink-on-dark)}
.k6-ct em{display:block;margin-top:.6em;font-size:.8em;font-weight:600;color:var(--ink-on-dark-60)}
.kp.is-wait .k6-aa{transform:scale(.52)}
.kp.is-wait .k6-f{transform:scaleX(.14)}
.kp.is-wait .k6-k{transform:translateX(.78em)}
.kp.is-wait .k6-bf{transform:scaleX(0)}
.kp.is-wait .k6-od .od-s{transform:translateY(0)}
.kp-6.is-run .k6-aa,.kp-6.is-run .k6-f,.kp-6.is-run .k6-k{transition:transform .95s var(--e-io) .2s}
.kp-6.is-run .k6-bf,.kp-6.is-run .k6-od .od-s{transition:transform .8s var(--e-out) 1.05s}

/* 07 náhled odkazu: holý odkaz v obecném chatu se rozbalí do náhledu s fotkou a názvem */
.kp-7{--kd:1.85s}
.k7-in{left:0;top:.4em;padding:.6em .85em;border-radius:1em 1em 1em .3em;background:#2b2d30;transform-origin:0 100%}
.k7-bare{right:0;bottom:.3em;padding:.6em .85em;border-radius:1em 1em .3em 1em;background:var(--paper);color:var(--lime-ink);font-weight:600;text-decoration:underline;text-underline-offset:.15em;opacity:0;transform-origin:100% 100%}
.k7-card{right:0;bottom:.3em;width:14.2em;padding:.38em .38em .62em;border-radius:1em 1em .3em 1em;background:var(--paper);color:var(--ink);transform-origin:100% 100%}
.k7-card picture{display:block}
.k7-card img{display:block;width:100%;height:4.3em;object-fit:cover;object-position:50% 26%;border-radius:.7em .7em .25em .25em;background:var(--ink-2)}
.k7-card b{display:block;margin:.45em .4em 0;font:700 1.02em/1.15 var(--display)}
.k7-card em{display:block;margin:.12em .4em 0;font-size:.84em;color:var(--ink-60)}
.k7-card u{display:block;margin:.32em .4em 0;font-size:.8em;font-weight:600;line-height:1;text-decoration:none;color:var(--lime-ink)}
.kp.is-wait .k7-in{opacity:0;transform:scale(.6)}
.kp.is-wait .k7-card{opacity:0;transform:scale(.5)}
.kp.is-wait .k7-card picture{opacity:0}
.kp-7.is-run .k7-in{transition:opacity .2s ease-out .1s,transform .5s var(--e-back) .1s}
.kp-7.is-run .k7-bare{animation:k7-bare 1s var(--e-out) .45s both}
.kp-7.is-run .k7-card{transition:opacity .25s ease-out 1.05s,transform .65s var(--e-back) 1.02s}
.kp-7.is-run .k7-card picture{transition:opacity .5s ease-out 1.35s}
@keyframes k7-bare{0%{opacity:0;transform:scale(.6)}22%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}

/* 08 web a profil podniku: dvě karty se spárují řádek po řádku */
.kp-8{--kd:1.95s}
.k8-c{top:.15em;width:9.5em;height:10.2em;padding:.75em .75em 0;border-radius:.85em;background:var(--d-panel);box-shadow:inset 0 0 0 1px rgb(244 241 234 / .08)}
.k8-l{left:0}
.k8-r{right:0}
.k8-c b{display:block;height:1.6em;font:700 1.02em/1.1 var(--display);white-space:nowrap}
.k8-c i{display:flex;align-items:center;gap:.45em;height:2.35em;border-top:1px solid rgb(244 241 234 / .09);font-weight:600;white-space:nowrap}
.k8-c .kp-ico{width:1.15em;height:1.15em;color:var(--ink-on-dark-60)}
.k8-ln{left:9.5em;top:3.6em;width:5em;height:.16em;border-radius:99px;background:var(--lime);transform-origin:0 50%}
.k8-l2{top:5.95em}
.k8-l3{top:8.3em}
.k8-ck{left:11.25em;top:2.93em;width:1.5em;height:1.5em;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 0 0 .3em var(--ink)}
.k8-c2{top:5.28em}
.k8-c3{top:7.63em}
.k8-ck svg,.k9-ok svg,.k10-bk em svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.k8-l1{--d:.55s}.k8-l2{--d:.95s}.k8-l3{--d:1.35s}.k8-c1{--d:.78s}.k8-c2{--d:1.18s}.k8-c3{--d:1.58s}
.kp.is-wait .k8-l{opacity:0;transform:translateX(-1.4em)}
.kp.is-wait .k8-r{opacity:0;transform:translateX(1.4em)}
.kp.is-wait .k8-ln{transform:scaleX(0)}
.kp.is-wait .k8-ck{opacity:0;transform:scale(.3)}
.kp-8.is-run .k8-c{transition:opacity .35s ease-out .05s,transform .6s var(--e-out) .05s}
.kp-8.is-run .k8-ln{transition:transform .38s var(--e-out) var(--d)}
.kp-8.is-run .k8-ck{transition:opacity .2s ease-out var(--d),transform .45s var(--e-back) var(--d)}

/* 09 cookies: lišta vyjede a rozpadne se, web nic neukládá */
.kp-9{--kd:2.05s}
.k9-pg{left:1em;right:1em;top:0;bottom:-1.4em;overflow:hidden;border-radius:.8em .8em 0 0;background:var(--paper);color:var(--ink)}
.k9-pg b{position:absolute;left:.9em;top:.7em;font:700 1em/1 var(--display)}
.k9-nav{position:absolute;right:.9em;top:.85em;width:3.4em;height:.36em;--b:linear-gradient(rgb(20 21 22 / .25),rgb(20 21 22 / .25));background:var(--b) 0 0/.9em 100% no-repeat,var(--b) 1.25em 0/.9em 100% no-repeat,var(--b) 2.5em 0/.9em 100% no-repeat}
.k9-hero{position:absolute;left:.9em;right:.9em;top:2.2em;height:3.3em;border-radius:.5em;background:linear-gradient(120deg,var(--paper-3),#cfc8b6)}
.k9-ln{position:absolute;left:.9em;top:6.1em;width:62%;height:.42em;border-radius:99px;background:rgb(20 21 22 / .14)}
.k9-ln2{top:6.9em;width:44%}
.k9-bar,.k9-bits{left:1.6em;right:1.6em;bottom:.45em;height:3em}
.k9-bar{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:0 .45em 0 .85em;border-radius:.65em;background:var(--ink-2);color:var(--ink-on-dark);box-shadow:0 .5em 1.2em -.4em rgb(0 0 0 / .55);opacity:0}
.k9-bar span{overflow:hidden;font-size:.86em;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.k9-bar b{flex:none;padding:.5em .8em;border-radius:99px;background:var(--lime);color:var(--ink);font-size:.8em;font-weight:600;line-height:1}
.k9-bits{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr}
.k9-bits i{background:var(--ink-2);opacity:0}
.k9-bits i:nth-child(1){border-top-left-radius:.65em;--x:-1.4em;--y:2.6em;--r:-32deg}
.k9-bits i:nth-child(2){--x:-.5em;--y:3.4em;--r:24deg}
.k9-bits i:nth-child(3){--x:.3em;--y:2.9em;--r:-48deg}
.k9-bits i:nth-child(4){--x:.9em;--y:3.6em;--r:36deg}
.k9-bits i:nth-child(5){border-top-right-radius:.65em;--x:1.6em;--y:2.7em;--r:58deg}
.k9-bits i:nth-child(6){border-bottom-left-radius:.65em;--x:-1.1em;--y:2.2em;--r:44deg}
.k9-bits i:nth-child(7){--x:-.2em;--y:2.5em;--r:-22deg}
.k9-bits i:nth-child(8){--x:.6em;--y:2.1em;--r:64deg}
.k9-bits i:nth-child(9){--x:1.2em;--y:2.4em;--r:-38deg}
.k9-bits i:nth-child(10){border-bottom-right-radius:.65em;--x:1.9em;--y:2em;--r:28deg}
.k9-ok{left:0;right:0;bottom:1.15em;width:max-content;margin:auto;display:flex;align-items:center;gap:.4em;padding:.5em .85em;border-radius:99px;background:var(--field);box-shadow:inset 0 0 0 1px rgb(20 21 22 / .14),0 .4em 1em -.5em rgb(20 21 22 / .35);color:var(--ink);font-size:.86em;font-weight:600;line-height:1}
.k9-ok svg{color:var(--lime-ink)}
.kp.is-wait .k9-ok{opacity:0;transform:scale(.6)}
.kp-9.is-run .k9-bar{animation:k9-bar 1.05s var(--e-out) .15s both}
.kp-9.is-run .k9-bits i{animation:k9-fall .85s cubic-bezier(.45,0,.8,.3) both;animation-delay:calc(1.2s + var(--i,0) * 28ms)}
.kp-9.is-run .k9-ok{transition:opacity .25s ease-out 1.75s,transform .5s var(--e-back) 1.75s}
@keyframes k9-bar{0%{opacity:1;transform:translateY(140%)}35%{transform:translateY(0)}99%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes k9-fall{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}

/* 10 zabezpečení a zálohy: zámek na adrese zaklapne, rozbitá stránka se obnoví ze zálohy */
.kp-10{--kd:1.95s}
.k10-url{left:0;right:0;top:0;height:2.5em;display:flex;align-items:center;gap:.65em;padding:0 1em;border-radius:99px;background:var(--d-panel);box-shadow:inset 0 0 0 1px rgb(244 241 234 / .1);font-weight:600}
.k10-lock{position:relative;width:1em;height:1.3em;flex:none}
.k10-sh{position:absolute;left:.2em;top:0;width:.6em;height:.8em;border:.15em solid var(--lime);border-bottom:0;border-radius:.4em .4em 0 0}
.k10-bd{position:absolute;left:0;bottom:0;width:1em;height:.78em;border-radius:.18em;background:var(--lime)}
.k10-pg{left:0;top:3.25em;width:13.6em;height:7.25em;overflow:hidden;border-radius:.75em;background:var(--paper)}
.k10-pg i{position:absolute}
.k10-b1{left:.8em;top:.75em;width:6em;height:.9em;border-radius:.3em;background:var(--ink)}
.k10-b2{left:.8em;top:2.1em;right:.8em;height:2.7em;border-radius:.45em;background:linear-gradient(120deg,var(--paper-3),#cfc8b6)}
.k10-b3{left:.8em;top:5.4em;width:9em;height:.42em;border-radius:99px;background:rgb(20 21 22 / .16);box-shadow:0 .8em 0 rgb(20 21 22 / .1)}
.k10-x{right:.6em;top:.6em;padding:.35em .6em;border-radius:99px;background:var(--warn);color:var(--paper);font-size:.72em;font-weight:600;line-height:1;opacity:0}
.k10-bk{left:14.5em;right:0;top:3.25em;height:7.25em;padding:.8em .9em;border-radius:.75em;background:var(--d-panel);box-shadow:inset 0 0 0 1px rgb(244 241 234 / .08)}
.k10-bk .kp-ico{display:block;width:1.9em;height:1.9em;margin-bottom:.45em;color:var(--lime)}
.k10-bk b{display:block;font:700 1.05em/1.1 var(--display)}
.k10-bk small{display:block;margin-top:.15em;font-size:.82em;font-weight:600;color:var(--ink-on-dark-60)}
.k10-bk em{position:absolute;left:.9em;bottom:.8em;display:flex;align-items:center;gap:.3em;font-size:.82em;font-weight:600;line-height:1;color:var(--lime);transform-origin:0 50%}
.kp.is-wait .k10-lock{opacity:.35}
.kp.is-wait .k10-sh{transform:translateY(-.32em)}
.kp.is-wait .k10-b1{transform:translate(1.6em,.5em) rotate(-9deg)}
.kp.is-wait .k10-b2{transform:translate(-.9em,.9em) rotate(5deg)}
.kp.is-wait .k10-b3{transform:translate(2.2em,.5em) rotate(-6deg)}
.kp.is-wait .k10-x{opacity:1}
.kp.is-wait .k10-bk{opacity:0;transform:translateY(.6em)}
.kp.is-wait .k10-bk em{opacity:0;transform:scale(.6)}
.kp-10.is-run .k10-lock{transition:opacity .3s ease-out .2s}
.kp-10.is-run .k10-sh{transition:transform .35s var(--e-back) .3s}
.kp-10.is-run .k10-bk{transition:opacity .35s ease-out .5s,transform .6s var(--e-out) .5s}
.kp-10.is-run .k10-bk .kp-ico{animation:k10-spin .9s var(--e-io) .8s both}
.kp-10.is-run .k10-b1,.kp-10.is-run .k10-b2,.kp-10.is-run .k10-b3{transition:transform .6s var(--e-back) 1.15s}
.kp-10.is-run .k10-b2{transition-delay:1.22s}
.kp-10.is-run .k10-b3{transition-delay:1.29s}
.kp-10.is-run .k10-x{transition:opacity .25s ease-out 1.1s}
.kp-10.is-run .k10-bk em{transition:opacity .2s ease-out 1.6s,transform .5s var(--e-back) 1.6s}
@keyframes k10-spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

/* závěr: počítadlo bodů a razítko. Video (Higgsfield, ilustrační, AI) přidá skript; bez něj poslední snímek s nápisem.
   Rámeček .kp-frame má vždy poměr videa 16 : 9 a ořez dělá okno .kp-vid (jeho poměr a poloha rámečku podle šířky),
   takže nápis na pečeti (67,3 % / 62,4 % záběru) sedí stejně na videu i na obrázku. */
.kp-fin{display:grid;gap:.55rem;margin-top:.55rem}
.kp-sum{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"l t" "c s" "g g";align-items:end;gap:.3rem .9rem;padding:1rem 1.1rem 1.1rem}
.kp-sum-l{grid-area:l;font:600 .68rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60)}
.kp-stav{grid-area:t;display:grid;justify-items:end;font:700 1rem/1.2 var(--display)}
.kp-sum-l,.kp-stav{align-self:baseline}
.kp-stav i{grid-area:1/1;font-style:normal}
.kp-stav i:first-child{opacity:0;color:var(--ink-60)}
.kp-stav i:last-child{color:var(--lime-ink)}
.kp-stav i:last-child::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;border-radius:50%;background:currentColor;vertical-align:.08em}
.kp-fin.is-wait .kp-stav i:first-child{opacity:1}
.kp-fin.is-wait .kp-stav i:last-child{opacity:0}
.kp-fin.is-sealed .kp-stav i{transition:opacity .7s ease-out}
.kp-cnt{grid-area:c;display:flex;align-items:flex-end;font:800 clamp(3.4rem,9vw,6.2rem)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.kp-cnt .od{vertical-align:0}
.kp-cnt small{margin:0 0 .12em .1em;font-size:.34em;letter-spacing:-.01em;color:var(--ink-60)}
.kp-od1 .od-s{transform:translateY(calc(var(--t,1) * -1em))}
.kp-od0 .od-s{transform:translateY(calc(var(--n,10) * -1em))}
.kp-sum-s{grid-area:s;padding-bottom:.7rem;color:var(--ink-60);font-size:.95rem}
.kp-segs{grid-area:g;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin-top:.6rem}
.kp-segs i{height:.5rem;border-radius:2px;background:var(--lime-ink)}
.kp-fin.is-cnt .od-s{transition:transform .6s var(--e-out)}
.kp-fin.is-cnt .kp-segs i{opacity:.15;transition:opacity .35s ease-out}
.kp-fin.is-cnt .kp-segs i.on{opacity:1}
.kp-vid{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;border-radius:18px;background:#3a2a1d;box-shadow:0 0 0 1px rgb(20 21 22 / .1),0 22px 40px -28px rgb(20 21 22 / .6)}
.kp-frame{position:absolute;top:-20%;left:-56.2%;height:125%;aspect-ratio:16/9;container-type:inline-size}
.kp-still{display:block}
.kp-still img,.kp-v{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* nápis vyražený do pečeti: pečeť je vidět šikmo (elipsa ~0,45), světlo zleva shora */
.kp-seal{position:absolute;left:67.3%;top:62.4%;width:19.3%;aspect-ratio:1;margin:-9.65% 0 0 -9.65%;display:grid;place-items:center;border-radius:50%;transform:scale(1,.455) rotate(-1deg)}
.kp-seal::before{content:"";position:absolute;inset:9%;border-radius:50%;box-shadow:inset 0 .5cqi .2cqi rgb(0 0 0 / .3),0 .4cqi .1cqi rgb(255 255 255 / .1)}
.kp-seal span{font:800 2.85cqi/1 var(--display);letter-spacing:.11em;text-transform:uppercase;color:rgb(28 34 8 / .5);text-shadow:0 .2em .05em rgb(255 255 255 / .14),0 -.12em .06em rgb(0 0 0 / .4)}
.kp-fin.is-live .kp-still{display:none}
.kp-fin.is-wait .kp-seal{opacity:0;transform:scale(1.06,.48) rotate(-1deg)}
.kp-fin.is-sealed .kp-seal{transition:opacity 1s ease-out,transform 1.4s var(--e-out)}

/* telefon (30. 10. 2026, zkompaktnění): kratší hlavička a okraje; se skriptem a na výšku jeden společný displej přilepený nad seznamem
   (js/kontrola.js přesune displeje dlaždic do .kp-dock a dá sekci třídu kp-docked), ukazuje přístroj právě čteného bodu;
   body jsou krátké karty s číslem, fajfkou po odškrtnutí a rámečkem u čteného bodu. Bez skriptu displej v každé dlaždici. */
@media (max-width:759px){
  .protocol{padding:2rem 0}
  .kp-desk{padding:1.2rem .45rem .45rem}
  .kp-head{padding:0 .55rem 1rem;margin-bottom:.55rem}
  .kp-head h2{font-size:2.05rem;margin-bottom:.7rem}
  .kp-intro p{font-size:.95rem;line-height:1.5}
  .kp-fields{gap:.3rem .75rem;margin-top:.8rem;font-size:.7rem}
  .kp-fields dd{min-width:0;padding:0 .1rem .1rem}
  .kp-grid{gap:.45rem}
  .kp{padding:.3rem}
  .kp .t{padding:.65rem .5rem .6rem}
  .kp-docked .kp-dock{position:sticky;top:var(--kp-top,64px);z-index:3;margin-top:-.45rem;padding:.45rem 0;background:var(--paper-2)}
  .kp-dock-box{position:relative;height:10.5rem;overflow:hidden;border-radius:13px;background:var(--ink);box-shadow:0 14px 28px -20px rgb(20 21 22 / .55)}
  .kp-dock .kp{position:absolute;inset:0;padding:0;border-radius:0;background:none;box-shadow:none;opacity:0;visibility:hidden;transition:opacity .35s ease-out,visibility 0s linear .35s}
  .kp-dock .kp.is-on{opacity:1;visibility:visible;transition:opacity .35s ease-out}
  .kp-dock .kp-scr{height:100%;border-radius:0}
  .kp-dock .kp-st{font-size:min(3.9cqw,.71rem)}
  .kp-docked .kp-grid{counter-reset:kpb}
  .kp-docked .kp-grid .kp{padding:0;counter-increment:kpb}
  .kp-docked .kp-grid .kp::before{content:counter(kpb,decimal-leading-zero);position:absolute;left:.85rem;top:.95rem;font:500 .75rem/1 var(--mono);color:var(--ink-60)}
  .kp-docked .kp-grid .kp::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--lime-ink);opacity:0;transition:opacity .3s ease-out;pointer-events:none}
  .kp-docked .kp-grid .kp.is-on::after{opacity:1}
  .kp-docked .kp-grid .t{position:relative;padding:.75rem .85rem .8rem 2.8rem;font-size:.95rem;line-height:1.4}
  .kp-docked .kp-grid .t::before,.kp-docked .kp-grid .t::after{content:"";position:absolute;left:.8rem;top:2.05rem;width:1.15rem;height:1.15rem;border-radius:50%}
  .kp-docked .kp-grid .t::before{box-shadow:inset 0 0 0 1.5px rgb(20 21 22 / .28)}
  .kp-docked .kp-grid .t::after{background:var(--lime-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4' fill='none' stroke='%23fbfaf6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50%/72% no-repeat;transition:opacity .3s ease-out,transform .45s var(--e-out)}
  .kp-docked .kp-grid .kp.is-wait .t::after,.kp-docked .kp-grid .kp.is-run:not(.is-done) .t::after{opacity:0;transform:scale(.5)}
}
@media (min-width:760px){
  .kp-desk{padding:2.6rem 1.25rem 1.25rem;border-radius:32px}
  .kp-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem 3rem;align-items:end;padding:0 .9rem 1.9rem;margin-bottom:1.25rem}
  .kp-head h2{margin:0}
  .kp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
  .kp-scr{height:10.5rem}
  .kp-st{font-size:min(3.9cqw,.756rem)}
  .kp-w .kp-st{font-size:min(3.9cqw,.94rem)}
  .kp-w{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:.4rem}
  .kp-w .kp-scr{grid-column:2;grid-row:1;height:14rem}
  .kp-w .t{grid-column:1;grid-row:1;align-self:end;padding:1.4rem 1.2rem 1.15rem;font:700 clamp(1.3rem,2vw,1.62rem)/1.18 var(--display);letter-spacing:-.012em;text-wrap:balance}
  .kp-w .how{margin-top:.8rem;font-size:.76rem;letter-spacing:0}
  .kp-fin{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:.9rem}
  .kp-sum{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:1.3rem 1.4rem 1.4rem}
  .kp-stav{justify-items:start;margin-top:.55rem;font-size:1.2rem}
  .kp-cnt{margin-top:auto}
  .kp-sum-s{padding:0 0 .9rem}
  .kp-vid{aspect-ratio:16/9}
  .kp-frame{top:0;left:0;width:100%;height:auto}
}
@media (min-width:1180px){
  .kp-desk{padding:3.2rem 2rem 2rem}
  .kp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kp-w{grid-column:span 2}
  .kp-w .kp-scr{height:auto}
  .kp-scr{height:10.75rem}
  .kp-st{font-size:min(3.9cqw,.78rem)}
  .kp-fin{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kp-vid{grid-column:span 2;aspect-ratio:2.1}
  .kp-frame{top:-13.6%}
}
@media print{
  .kp-desk{box-shadow:none;border:1px solid var(--line-2)}
  .kp-scr,.kp-vid{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ceník (29. 10. 2026): jediný tmavý pás uprostřed papíru – vstupenka se zakládající cenou, skleněné karty balíčků
   (bez backdrop-filter: sklo dělá průhledný gradient, světlý lem a odlesk), ceny jako počítadlo, za kartami světelný prach.
   Základ = statická verze (bez skriptu, omezený pohyb, úspora dat). .is-live dává js/cenik.js.
   30. 10. 2026: pás končí zaoblenými rohy na papíře; za živým Postupem (.steps.is-live) se přes něj nasune jako list:
   horní okraj −100svh (= výška připnuté vrstvy), takže list dojede nahoru přesně ve chvíli, kdy se Postup odepne.
   Pohyb listu dělá jen posouvání stránky, skript nic neposouvá. Ořez (clip) drží prach v zaoblených rozích. */
.pricing{--bg:var(--ink);--bg-2:var(--ink-2);--fg:var(--ink-on-dark);--mute:var(--ink-on-dark-60);
  --line:rgb(244 241 234 / .14);--line-2:rgb(244 241 234 / .16);--edge:var(--ink-on-dark-60);--accent:var(--lime);--focus:var(--lime);
  --pri-bg:var(--lime);--pri-fg:var(--ink);--pri-hover:var(--lime-2);
  --sheet-r:clamp(28px,2.5vw,36px);
  position:relative;isolation:isolate;overflow:clip;border-top:0;border-radius:0 0 var(--sheet-r) var(--sheet-r);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:radial-gradient(70% 38% at 50% 12%,rgb(188 214 69 / .07),transparent 70%),radial-gradient(60% 30% at 80% 62%,rgb(244 241 234 / .045),transparent 70%),var(--ink)}
.steps.is-live + .pricing{z-index:1;margin-top:-100vh;margin-top:-100svh;border-radius:var(--sheet-r);box-shadow:inset 0 1px 0 rgb(244 241 234 / .1),0 -26px 60px -18px rgb(20 21 22 / .42)}
.pr-anchor{position:absolute;left:0;top:0;width:1px;height:1px}
.pr-face{display:flex;align-items:center;gap:1rem;max-width:34rem;margin-bottom:2rem}
.pr-face picture{flex:none}
.pr-face img{width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--ink-2);box-shadow:0 0 0 2px var(--line-2)}
.pr-face p{color:var(--fg);font-size:1rem;line-height:1.45}
.pricing h2{font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.035em;line-height:.95}
.pricing .sec-lead{font-size:1.1rem}
.pricing .wrap{position:relative;z-index:1}
.pr-dust{position:sticky;top:0;display:block;width:100%;height:100vh;margin-bottom:-100vh;pointer-events:none;opacity:.9;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}

/* vstupenka */
.pricing .founder{--fg:var(--ink);--mute:var(--ink-60);--line-2:rgb(20 21 22 / .2);--focus:var(--lime-ink);
  background:none;color:var(--ink);padding:0;margin:0 0 3.5rem;border-radius:0;overflow-x:visible;perspective:1400px;-webkit-font-smoothing:auto}
.tk-card{position:relative;display:grid;border-radius:18px;background:var(--paper);overflow:hidden;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 2px 0 rgb(0 0 0 / .25),0 50px 90px -40px rgb(0 0 0 / .85)}
.tk-main{position:relative;z-index:1;padding:1.6rem 1.35rem 1.5rem}
.founder-left{font-size:.95rem;color:var(--mute);margin-bottom:.9rem}
.founder-left b{display:inline-block;margin-top:.5rem;padding:.3rem .75rem;border-radius:999px;background:var(--ink);color:var(--lime);font-weight:600;font-variant-numeric:tabular-nums}
.founder p+p{margin-top:.6rem}
.founder p{max-width:40rem}
.founder-was{display:block;font:400 1rem/1.4 var(--sans);letter-spacing:0;color:var(--mute);margin-top:.35rem}
.founder b{font-weight:600}
.founder h3{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;margin-bottom:.8rem;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.founder .tk-main p:last-child{color:var(--mute)}
.founder .tk-main p:last-child b{color:var(--fg)}
/* ústřižek: perforace (čárkovaná linka + dva výřezy v barvě pásu), razítko „1 z 1“, čárový kód */
.tk-stub{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.35rem 1.25rem;background:var(--paper-2);border-top:2px dashed rgb(20 21 22 / .28)}
.tk-stub::before,.tk-stub::after{content:"";position:absolute;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.tk-stub::before{left:0}.tk-stub::after{left:100%}
.tk-stamp{display:grid;place-items:center;width:6.2rem;height:6.2rem;border-radius:50%;color:var(--lime-ink);
  box-shadow:inset 0 0 0 3px var(--lime-ink),inset 0 0 0 7px transparent,inset 0 0 0 8px rgb(82 106 10 / .7);
  font:800 1.45rem/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform:rotate(-8deg);white-space:nowrap}
.tk-code{flex:1;max-width:9rem;height:2.6rem;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 13px);opacity:.75}
/* holografický lesk: přerostlá vrstva s duhovým pruhem, posouvá se jen transformací (bez přemalování) */
.tk-holo{position:absolute;z-index:2;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none;opacity:.22;
  background:linear-gradient(115deg,transparent 38%,rgb(188 214 69 / .3) 45%,rgb(130 205 255 / .26) 50%,rgb(255 160 225 / .22) 55%,transparent 62%)}

/* balíčky jako matné sklo */
.plans{display:grid;gap:1.25rem;align-items:stretch;perspective:1600px}
.pricing .plan{position:relative;padding:1.75rem 1.4rem;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgb(244 241 234 / .09),rgb(244 241 234 / .025) 48%,rgb(244 241 234 / .05));
  box-shadow:inset 0 1px 0 rgb(244 241 234 / .2),inset 0 0 0 1px rgb(244 241 234 / .1),0 40px 70px -40px rgb(0 0 0 / .9)}
.pricing .plan::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgb(255 255 255 / .07),transparent 32%)}
.pricing .plan-pick{background:linear-gradient(160deg,rgb(244 241 234 / .13),rgb(244 241 234 / .04) 50%,rgb(188 214 69 / .07));
  box-shadow:inset 0 1px 0 rgb(244 241 234 / .26),inset 0 0 0 1px rgb(188 214 69 / .5),0 50px 90px -40px rgb(0 0 0 / .95),0 0 60px -20px rgb(188 214 69 / .25)}
.pl-glow{position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgb(244 241 234 / .16),rgb(188 214 69 / .05) 55%,transparent);transition:opacity .35s ease-out}
.plan:hover .pl-glow{opacity:1}
.pick{display:inline-block;margin-bottom:.8rem;padding:.3rem .75rem;border-radius:999px;background:var(--lime);color:var(--ink);font:600 .8rem/1.3 var(--sans)}
.plan h3{font-size:2rem;font-weight:800;margin-bottom:.3rem;letter-spacing:-.025em}
.plan-for{color:var(--mute);font-size:.95rem;margin-bottom:1.1rem}
.plan dl{margin-bottom:1.2rem;border-top:1px solid var(--line-2)}
.plan dl div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.15rem 1rem;padding:.55rem 0;border-bottom:1px solid var(--line-2)}
.plan dt{color:var(--mute);font-size:.95rem}
.plan dd{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
/* cena „od 12 900 Kč“ zůstane na jednom řádku: na úzké kartě nebo se zvětšeným písmem se zmenší podle šířky karty */
.pricing .plan{container-type:inline-size}
.plan dl div:first-child dd{font:700 clamp(1.25rem,6.4vw,1.65rem)/1.1 var(--display);font-size:min(1.65rem,12.5cqi);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.plan-pick dl div:first-child dd{color:var(--lime)}
.plan dl .year dt,.plan dl .year dd{color:var(--fg);font-weight:600}
.plan ul,.all-plans ul{padding-left:1.1rem;display:grid;gap:.4rem;font-size:.97rem}
.plan li::marker,.all-plans li::marker{color:var(--lime)}
/* počítadlo: číslice jsou svislé pásky 0–9 0–9, posune se jen transform; čtečky čtou skutečný text v .sr */
.odo{display:inline-block;white-space:nowrap;-webkit-user-select:none;user-select:none}
.odo-t::before{content:attr(data-t)}
.odo-c{display:inline-block;height:1.1em;overflow:hidden;vertical-align:top}
.odo-s{display:block;white-space:pre;line-height:1.1;text-align:center;transform:translateY(calc(var(--n,0) * -1.1em))}
.odo-s::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"}
.plans-cta{display:none}
.all-plans{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.all-plans h3{margin-bottom:1rem;font-size:1.5rem}
.all-plans li{color:var(--ink-on-dark)}
.all-plans b{font-weight:600;color:var(--paper)}

@media (min-width:760px){
  .tk-card{grid-template-columns:minmax(0,1fr) 13.5rem}
  .tk-main{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);column-gap:2.5rem;padding:2.4rem 2.5rem}
  .tk-main .founder-left{grid-row:span 3;margin:0}
  .tk-stub{flex-direction:column;justify-content:center;gap:1.4rem;padding:1.5rem 1rem;border-top:0;border-left:2px dashed rgb(20 21 22 / .28)}
  .tk-stub::before,.tk-stub::after{top:0;left:-1px}
  .tk-stub::after{top:100%}
  .tk-stamp{width:7.4rem;height:7.4rem;font-size:1.7rem}
  .tk-code{flex:none;width:7.5rem;max-width:none}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pricing .plan{padding:2.1rem 1.8rem}
  .pricing .plan-pick{margin-top:-1.5rem;padding-top:3.25rem}
  .all-plans ul{display:block;columns:2;column-gap:3rem}
  .all-plans li{break-inside:avoid;margin-bottom:.5rem}
}

/* živý ceník: rozdání karet z jednoho balíčku (počítač) / vyjetí s naklopením (telefon), počítadlo */
.pricing.is-live .plan{transition:opacity .5s ease-out,translate 1s cubic-bezier(.2,.85,.2,1),rotate 1s cubic-bezier(.2,.85,.2,1),scale 1s cubic-bezier(.2,.85,.2,1)}
.pricing.is-live .odo-s{transition:transform 1.6s cubic-bezier(.16,.84,.24,1);transition-delay:calc(.5s + var(--i,0) * .09s)}
@media (min-width:760px){
  .pricing.is-live:not(.is-dealt) .odo-s{transform:none!important}
  .pricing.is-live:not(.is-dealt) .plan{opacity:0;translate:0 3rem;scale:.92}
  .pricing.is-live:not(.is-dealt) .plan:first-child{translate:calc(100% + 1.25rem) 3.4rem;rotate:-5deg}
  .pricing.is-live:not(.is-dealt) .plan:last-child{translate:calc(-100% - 1.25rem) 3.8rem;rotate:5deg}
  .pricing.is-live .plan-pick{z-index:2}
  .pricing.is-live .plan:first-child{transition-delay:0s,.32s,.32s,.32s}
  .pricing.is-live .plan:last-child{transition-delay:0s,.44s,.44s,.44s}
  .pricing.is-live .plan-pick{transition-delay:0s,.12s,.12s,.12s}
}
@media (max-width:759px){
  .pricing.is-live .plan:not(.in){opacity:0;translate:0 2.5rem;rotate:x 18deg}
  .pricing.is-live .plan{transform-origin:50% 0}
  .pricing.is-live .plan:not(.in) .odo-s{transform:none!important}
}

/* postup (29. 10. 2026): 3D telefon postavený v CSS, displej podle kroku (hovor, skica, skládání z dílů, hotový web).
   Základ = statická verze: telefon s hotovým webem a kroky pod sebou. .is-live (js/postup.js): sekce se připne,
   celý telefon s displejem přes celou obrazovku odjede na své místo a kroky se střídají. Mění se jen transform a opacity. */
.steps{position:relative}
.st-anchor{position:absolute;left:0;top:0;width:1px;height:1px}
.story-grid{display:grid;gap:2.5rem}
.story-media{margin:0;order:-1}
.steps ol{list-style:none;padding:0;display:grid;gap:1.75rem;margin-top:2rem;counter-reset:krok}
.steps li{position:relative;padding-left:3.4rem;counter-increment:krok}
.steps li::before{content:counter(krok);position:absolute;left:0;top:0;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);font:700 1.05rem/1 var(--display);color:var(--ink)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:1.2rem;top:2.4rem;width:1px;height:calc(100% - .65rem);background:var(--ink)}
.steps h3{margin:.3rem 0 .4rem}
.steps p{color:var(--mute);max-width:32rem}
@media (max-width:899px){
  .story-copy{display:contents}
  .story-copy h2{order:-2;margin-bottom:0}
  .steps .story-steps{margin-top:0}
}
@media (min-width:900px){
  .story-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:4rem;align-items:center}
  .story-media{order:0}
}

/* telefon: tělo s tloušťkou (4 vrstvy za čelem), zaoblení, odlesk, měkký stín na papíře */
.ph-stage{--pw:clamp(190px,52vw,250px);position:relative;width:var(--pw);height:calc(var(--pw) / .48);margin:0 auto;perspective:1500px}
.ph-buzz{position:absolute;inset:0;transform-style:preserve-3d}
.ph{position:absolute;inset:0;border-radius:calc(var(--pw) * .15);transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(6deg)}
/* tloušťka těla: 6 zaoblených obrysů po 1,5 px za čelem, takže boky sledují zaoblení při každém natočení */
.ph-l{position:absolute;inset:0;border-radius:inherit;background:#3d4045}
.ph-l1{transform:translateZ(-1.5px)}.ph-l2{transform:translateZ(-3px)}.ph-l3{transform:translateZ(-4.5px);background:#34373b}.ph-l4{transform:translateZ(-6px);background:#2f3236}.ph-l5{transform:translateZ(-7.5px);background:#2a2c30}.ph-l6{transform:translateZ(-9px);background:#18191b}
.ph-face{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;
  background:linear-gradient(145deg,#5a5e64,#232528 22%,#141517 60%,#3c3f44);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18),inset 0 0 0 calc(var(--pw) * .014) #0c0d0e}
.ph-screen{position:absolute;inset:calc(var(--pw) * .035);border-radius:calc(var(--pw) * .118);background:var(--ink);transform-style:preserve-3d}
.scr{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.scr-live picture,.scr-live img{width:100%;height:100%}
.scr-live img{object-fit:cover;object-position:50% 0}
.ph-notch{position:absolute;left:50%;top:calc(var(--pw) * .065);width:28%;height:calc(var(--pw) * .075);margin-left:-14%;border-radius:99px;background:#050506;transform:translateZ(3px)}
.ph-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255 / .2),rgb(255 255 255 / .04) 26%,transparent 42%);transform:translateZ(3.5px)}
.ph-shadow{position:absolute;left:-4%;right:-22%;top:10%;bottom:-6%;border-radius:40%;background:radial-gradient(closest-side,rgb(20 21 22 / .32),rgb(20 21 22 / .12) 55%,transparent);transform:translate(10%,4%)}
.scr-url{position:absolute;left:9%;right:9%;bottom:3%;display:flex;align-items:center;justify-content:center;gap:.4em;height:7.5%;border-radius:99px;
  background:rgb(28 29 31 / .86);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);color:var(--paper);font:600 calc(var(--pw) * .048)/1 var(--sans);letter-spacing:.01em}
.scr-url i{width:.7em;height:.85em;border-radius:2px;background:var(--lime);-webkit-mask:linear-gradient(#000,#000) 0 100%/100% 62% no-repeat,radial-gradient(circle at 50% 100%,transparent 34%,#000 36%,#000 58%,transparent 60%) 50% 0/80% 70% no-repeat;mask:linear-gradient(#000,#000) 0 100%/100% 62% no-repeat,radial-gradient(circle at 50% 100%,transparent 34%,#000 36%,#000 58%,transparent 60%) 50% 0/80% 70% no-repeat}
.scr-online{position:absolute;left:6%;top:10.5%;display:flex;align-items:center;gap:.45em;padding:.45em .8em;border-radius:99px;background:rgb(20 21 22 / .85);color:var(--paper);font:600 calc(var(--pw) * .042)/1 var(--sans)}
.scr-online i{width:.55em;height:.55em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 .22em rgb(188 214 69 / .25)}
.scr-flash{position:absolute;inset:0;background:#fffdf6;opacity:0;pointer-events:none}
.scr-build,.scr-sketch,.scr-call,.st-lvh,.st-dim{display:none}
@media (min-width:900px){.ph-stage{--pw:clamp(220px,22vw,280px)}}

/* živý příběh */
.steps.is-live{z-index:0;padding:0;overflow:clip}
/* 560lvh příběh + 100svh, po které se přes připnutý Postup nasouvá Ceník (ten má horní okraj −100svh) */
.story.is-live{height:660vh;height:calc(560lvh + 100svh)}
.is-live .story-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:5rem 0 1.5rem}
.is-live .story-grid{width:100%;overflow-x:visible} /* zvětšený telefon nesmí ořezat .wrap (ořez dělá celá sekce) */
/* měrka výšky okna bez lišty prohlížeče (100lvh): zvětšený displej musí na začátku zakrýt i ji */
.is-live .st-lvh{display:block;position:absolute;left:0;top:0;width:1px;height:100vh;height:100lvh;visibility:hidden;pointer-events:none}
.is-live .scr-build,.is-live .scr-sketch,.is-live .scr-call{display:block}
.is-live .ph-stage{--pw:clamp(220px,calc((100vh - 8.5rem) * .48),330px);z-index:3}
@supports (height:100svh){.is-live .ph-stage{--pw:clamp(220px,calc((100svh - 8.5rem) * .48),330px)}}
.is-live .ph{transform:none}
.is-live .ph-shadow{transform:none}
.is-live.in-view .ph-stage,.is-live.in-view .ph,.is-live.in-view .ph-shadow,.is-live.in-view .story-grid{will-change:transform}
/* ztmavení Postupu pod nasouvajícím se Ceníkem (opacitu píše skript); 100lvh kryje i pruh pod lištou prohlížeče */
.is-live .st-dim{display:block;position:absolute;left:0;right:0;top:0;z-index:4;height:100vh;height:100lvh;background:var(--ink);opacity:0;pointer-events:none}
.is-live.in-view .st-dim{will-change:opacity}
.is-live .ph-notch,.is-live .ph-glare,.is-live .ph-shadow{opacity:0}
.is-live .scr-live,.is-live .scr-sketch,.is-live .scr-call{opacity:0}
.is-live .scr-flash{display:block}

/* 1 hovor */
.scr-call{background:radial-gradient(130% 60% at 50% 0,#30343a,#111214 70%);color:var(--paper);text-align:center}
.call-who{position:absolute;left:0;right:0;top:17%;display:grid;justify-items:center;gap:.5em;font:400 calc(var(--pw) * .045)/1.2 var(--sans);color:var(--ink-on-dark-60)}
.call-who b{font:800 calc(var(--pw) * .085)/1.1 var(--display);color:var(--paper);letter-spacing:-.02em}
.call-av{display:grid;place-items:center;width:calc(var(--pw) * .26);height:calc(var(--pw) * .26);margin-bottom:.4em;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 2px rgb(188 214 69 / .6);color:var(--lime);font:800 calc(var(--pw) * .12)/1 var(--display)}
.call-btns{position:absolute;left:14%;right:14%;bottom:12%;display:flex;justify-content:space-between}
.call-btns i{position:relative;width:calc(var(--pw) * .19);height:calc(var(--pw) * .19);border-radius:50%;background:#c4442a center/48% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.call-no{transform:rotate(135deg)}
.call-btns .call-yes{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23141516' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.call-yes::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--lime);opacity:0}
.story.ring .call-yes::after{animation:zvonek 1.3s cubic-bezier(.2,.6,.3,1) infinite}
.story.ring .ph-buzz{animation:vibrace 1.6s linear infinite}
@keyframes zvonek{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes vibrace{0%,24%,100%{transform:none}3%,11%,19%{transform:translateX(-2px) rotate(-1.1deg)}7%,15%{transform:translateX(2px) rotate(1.1deg)}}

/* 2 skica tužkou (stroke-dashoffset podle průběhu) */
.scr-sketch{background:#f4f1ea repeating-linear-gradient(0deg,transparent 0 13px,rgb(20 21 22 / .06) 13px 14px)}
.scr-sketch svg{position:absolute;inset:4% 3%;width:94%;height:92%;fill:none;stroke:#2b2d31;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scr-sketch svg>path{stroke-dasharray:1 2;stroke-dashoffset:1}
.scr-sketch .pencil path{fill:#d9b45e;stroke:#2b2d31;stroke-width:1.2}

/* 3 výroba: díly webu přiletí z prostoru a zacvaknou (transformy píše skript) */
.scr-build{overflow:visible;transform-style:preserve-3d;background:#22190f linear-gradient(#2a2019,#1b140f)}
.bp{position:absolute;left:5%;right:5%;display:block;border-radius:calc(var(--pw) * .028);opacity:0;color:#f2e6d6;backface-visibility:hidden}
.bp b{display:block;font-weight:800;font-family:var(--display);letter-spacing:-.02em}
.bp-head{left:0;right:0;top:0;height:9%;display:flex;align-items:center;justify-content:space-between;padding:0 7% 0 8%;border-radius:calc(var(--pw) * .118) calc(var(--pw) * .118) 0 0;background:#2b2019;box-shadow:inset 0 -1px 0 rgb(242 230 214 / .1)}
.bp-head b{font-size:calc(var(--pw) * .06);padding-top:4%}
.bp-head i{width:24%;height:42%;margin-top:4%;border-radius:99px;box-shadow:inset 0 0 0 1.5px #d6b892}
.bp-photo{left:0;right:0;top:9%;height:34%;overflow:hidden;border-radius:0;background:#3a2a1f}
.bp-photo picture,.bp-photo img{display:block;width:100%;height:100%}
.bp-photo img{object-fit:cover;object-position:50% 34%}
.bp-title{top:45.5%;height:11%;display:grid;justify-items:center;align-content:center;gap:.5em;text-align:center}
.bp-title b{font-size:calc(var(--pw) * .074);line-height:1.05}
.bp-title i{width:56%;height:calc(var(--pw) * .02);border-radius:4px;background:#c9a77d;opacity:.8}
.bp-menu{top:59%;height:16%;padding:4% 6%;display:grid;align-content:start;gap:.55em;background:rgb(242 230 214 / .06);box-shadow:inset 0 0 0 1px rgb(242 230 214 / .14)}
.bp-menu b{font-size:calc(var(--pw) * .05);margin-bottom:.15em}
.bp-menu i{height:calc(var(--pw) * .016);border-radius:3px;background:linear-gradient(90deg,rgb(242 230 214 / .55) 0 46%,transparent 46% 74%,rgb(201 167 125 / .8) 74%)}
.bp-map{top:77.5%;height:10%;overflow:hidden;background:linear-gradient(28deg,transparent 46%,rgb(242 230 214 / .25) 47% 50%,transparent 51%),linear-gradient(-62deg,transparent 30%,rgb(242 230 214 / .18) 31% 33%,transparent 34%),#2d3a33}
.bp-map i{position:absolute;left:58%;top:22%;width:calc(var(--pw) * .06);height:calc(var(--pw) * .06);border-radius:50% 50% 50% 0;background:#a9c7ab;transform:rotate(-45deg)}
.bp-btn{top:89.5%;height:6.5%;display:grid;place-items:center;border-radius:99px;background:#a9c7ab;color:#1b140f;font:700 calc(var(--pw) * .048)/1 var(--sans)}

/* kroky vlevo: aktivní velký, ostatní malé a tlumené (polohy dopočítá skript, mění se jen transform a opacity) */
.is-live .story-copy h2{margin-bottom:0}
.is-live .story-steps{--fs:clamp(1.9rem,3vw,2.8rem);position:relative;display:block;margin-top:2.25rem}
.is-live .story-steps li{position:absolute;left:0;right:0;top:0;padding-left:3.4rem;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease-out}
.is-live .story-steps li.is-on{opacity:1}
.is-live .story-steps li::after{display:none}
.is-live .story-steps li::before{content:"0" counter(krok);top:calc(var(--fs) * .525);width:auto;height:auto;background:none;box-shadow:none;transform:translateY(-50%);font:600 .85rem/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink-60);transition:color .4s}
.is-live .story-steps li.is-on::before{color:var(--lime-ink)}
.is-live .story-steps h3{margin:0;font-size:var(--fs);line-height:1.05;white-space:nowrap;letter-spacing:-.03em;color:var(--ink-60);transform-origin:0 50%;transform:scale(.5);transition:transform .8s cubic-bezier(.2,.8,.2,1),color .4s ease-out}
.is-live .story-steps li.is-on h3{transform:none;color:var(--ink)}
.is-live .story-steps p{margin-top:.8rem;opacity:0;transform:translateY(.5rem);transition:opacity .35s ease-out,transform .5s ease-out}
.is-live .story-steps li.is-on p{opacity:1;transform:none;transition-delay:.18s}
/* průběh 1 → 4 jako tenká linka vlevo od kroků */
.is-live .story-steps::before{content:"";position:absolute;left:.62rem;top:0;bottom:0;width:1px;background:var(--line-2)}
.is-live .story-steps::after{content:"";position:absolute;left:.62rem;top:0;bottom:0;width:1px;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--pp,0))}
.is-live .story-steps li{padding-left:2.4rem}
.is-live .story-steps li::before{left:-.32rem;background:var(--paper-2);padding:.25rem 0}

/* telefon a tablet: telefon nahoře, pod ním jen aktivní krok a linka průběhu */
@media (max-width:899px){
  .is-live .story-pin{padding:4.4rem 0 calc(76px + .6rem)}
  .is-live .story-grid{gap:.9rem}
  .is-live .story-copy h2{font-size:clamp(1.6rem,6.6vw,2.2rem);text-align:center}
  .is-live .ph-stage{--pw:clamp(120px,calc((100vh - 25rem) * .48),250px)}
  @supports (height:100svh){.is-live .ph-stage{--pw:clamp(120px,calc((100svh - 25rem) * .48),250px)}}
  .is-live .story-steps{--fs:1.4rem;margin:0;padding-top:1rem}
  .is-live .story-steps::before,.is-live .story-steps::after{left:0;right:0;top:0;bottom:auto;width:auto;height:2px}
  .is-live .story-steps::after{transform-origin:0 50%;transform:scaleX(var(--pp,0))}
  .is-live .story-steps li,.is-live .story-steps li.is-done{opacity:0;padding-left:2.2rem}
  .is-live .story-steps li.is-on{opacity:1}
  .is-live .story-steps li::before{left:0;background:none}
  .is-live .story-steps h3,.is-live .story-steps li.is-on h3{transform:none;white-space:normal}
  .is-live .story-steps p{margin-top:.4rem;font-size:.97rem;line-height:1.5}
}
@media (min-width:900px) and (max-height:760px){.is-live .story-steps p{font-size:.95rem;line-height:1.5}}
/* tisk: skutečný text cen, obě sekce plně viditelné a bez transformací, Postup jako statická verze, tmavý pás světle */
@media print{
  .odo,.pr-dust,.tk-holo,.pl-glow,.st-lvh,.st-dim,.is-live .scr-call,.is-live .scr-sketch,.is-live .scr-build,.is-live .scr-flash{display:none!important}
  dd[data-odo] .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .pricing *,.steps *{transition:none!important;animation:none!important}
  .pricing{--fg:var(--ink);--mute:var(--ink-60);--line:var(--paper-3);--line-2:rgb(20 21 22 / .25);background:none;color:var(--ink)}
  .steps.is-live + .pricing{margin-top:0;box-shadow:none;border-radius:0}
  .pricing .plan,.is-live .story-copy h2,.is-live .story-steps,.is-live .story-steps li,.is-live .story-steps p,.is-live .scr-live,.is-live .scr-online,.is-live .scr-url,.is-live .ph-notch,.is-live .ph-glare{opacity:1!important}
  .tk-card,.pricing .plan,.is-live .story-grid,.is-live .story-copy h2,.is-live .story-steps,.is-live .story-steps li,.is-live .story-steps p,.is-live .story-steps h3,.is-live .ph-stage,.is-live .scr-online,.is-live .scr-url{transform:none!important}
  .pricing .plan{translate:none!important;rotate:none!important;scale:none!important;background:none;box-shadow:none;border:1px solid var(--line-2)}
  .tk-card{box-shadow:none;border:1px solid var(--line-2)}
  .plan-pick dl div:first-child dd,.all-plans li,.all-plans b{color:var(--ink)}
  .pick,.founder-left b{background:none;color:var(--ink);border:1px solid var(--ink)}
  .story.is-live{height:auto!important}
  .is-live .story-pin{position:static;height:auto;display:block;padding:1.5rem 0}
  .is-live .story-steps{height:auto!important}
  .is-live .story-steps li{position:relative;margin-bottom:1rem}
  .is-live .story-steps h3{white-space:normal;color:var(--ink)}
  .is-live .ph{transform:rotateY(-14deg) rotateX(6deg)!important}
  .ph-buzz,.ph,.ph-face,.ph-screen{transform-style:flat!important}
  .ph-l{display:none}
}

/* o mně */
.about .wrap{display:grid;gap:2rem}
/* fotka 4:5 se zaobleným rohem a rámečkem; rámeček drží místo i barvu, než se obrázek načte */
.portrait{width:min(260px,62vw);aspect-ratio:1;margin:0;border:4px solid var(--paper-2);border-radius:50%;background:var(--paper-2);overflow:hidden}
.portrait picture{display:block;height:100%}
.portrait-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#c9cacd}
.about p{max-width:36rem;margin-bottom:1rem;font-size:1.08rem}

/* otázky */
.faq details{border-top:1px solid var(--line-2);max-width:48rem;border-radius:var(--radius-s);transition:background-color .25s}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq details[open]{background:var(--paper-2);border-top-color:transparent}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:60px;padding:.7rem .9rem;font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.6rem;height:.6rem;margin-right:.3rem;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-25%) rotate(45deg);transition:transform .25s ease-out}
.faq details[open] summary::after{transform:translateY(20%) rotate(-135deg)}
.faq details p{color:var(--mute);padding:0 .9rem 1.2rem;max-width:42rem}
/* plynulé rozbalení tam, kde to prohlížeč umí (jinak se otevře hned) */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .25s ease-out,content-visibility .25s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* kontakt */
.contact .wrap{display:grid;gap:3rem}
.contact h2{margin-bottom:1.75rem}
.contact-phone{display:block;font:800 clamp(2rem,5vw,3.4rem)/1.05 var(--display);letter-spacing:-.02em;text-decoration:none;font-variant-numeric:tabular-nums;margin:.25rem 0 .9rem}
.contact-phone:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.contact-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 .6rem}
.contact-mail{display:inline-flex;align-items:center;min-height:44px;font:700 clamp(1.2rem,2.4vw,1.5rem)/1.2 var(--display);margin-bottom:1rem;text-decoration-color:var(--line-2)}
.contact-direct p{color:var(--mute);max-width:28rem}
/* formulář jako věta k vyplnění (30. 10. 2026): pole jsou podtržené mezery ve velké větě, zpráva se rozbalí tlačítkem.
   Bez skriptu je výběr „a chci …“ skrytý (nemá name, jen předvyplňuje zprávu) a zpráva je vidět rovnou. */
.form{position:relative;max-width:62rem}
.req{font-weight:400;color:var(--mute);font-size:.85rem;margin-left:.3rem}
.form-title{margin-bottom:.8rem;font:600 .8rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60)}
.fv-veta{max-width:22em;font:700 clamp(1.45rem,3vw,2.5rem)/1.72 var(--display);letter-spacing:-.015em;color:var(--ink)}
.fv-veta input,.fv-veta select{display:inline-block;width:6em;max-width:100%;min-height:44px;height:1.38em;margin:0;padding:0 .08em;vertical-align:baseline;
  font:inherit;letter-spacing:inherit;color:var(--ink);background:transparent;border:0;border-radius:4px 4px 0 0;box-shadow:inset 0 -2px 0 var(--ink);transition:box-shadow .15s,background-color .15s}
#f-jmeno{width:5.6em}
#f-podnik{width:8.2em}
#f-kontakt{width:9.4em}
@supports (field-sizing:content){.fv-veta input,.fv-veta select,#f-jmeno,#f-podnik,#f-kontakt{field-sizing:content;width:auto;min-width:2.5em}}
.fv-veta ::placeholder{color:var(--ink-60);opacity:1}
.fv-veta input:hover,.fv-veta select:hover{background:rgb(255 255 255 / .4)}
.fv-veta input:focus,.fv-veta select:focus{outline:none;background:rgb(255 255 255 / .6);box-shadow:inset 0 -3px 0 var(--lime-ink)}
.fv-veta input:focus-visible,.fv-veta select:focus-visible{outline:3px solid var(--lime-ink);outline-offset:3px}
.fv-veta [aria-invalid=true]{box-shadow:inset 0 -3px 0 var(--warn)}
/* pole s chybou pod sebou: na počítači hláška prodlouží řádek věty, ale nezmění šířku pole (záporný pravý okraj) */
.fv-f{display:inline-flex;flex-direction:column;align-items:flex-start;vertical-align:baseline;max-width:100%}
.fv-chci{display:none}
.fv.is-js .fv-chci{display:inline}
.fv-sel{position:relative;display:inline-block}
.fv-sel select{-webkit-appearance:none;appearance:none;width:auto;padding-right:.95em;cursor:pointer}
.fv-sel::after{content:"";position:absolute;right:.32em;top:50%;width:.28em;height:.28em;margin-top:-.24em;border:solid var(--ink);border-width:0 .085em .085em 0;transform:rotate(45deg);pointer-events:none}
.field-err{display:block;margin-top:.35rem;color:var(--warn);font-size:.95rem;font-weight:600}
.field-err[hidden]{display:none}
.fv-f .field-err{width:17rem;margin:.1rem -17rem .5rem 0;font:600 .95rem/1.35 var(--sans);letter-spacing:0}
.fv-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem;margin-top:.45rem}
.fv-hint{padding:.6rem 0;font-size:.92rem;color:var(--ink-60)}
.fv-add{min-height:44px;padding:.5rem 0;border:0;background:none;color:var(--ink);font:600 1rem/1.2 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.fv-add:hover{text-decoration-thickness:2px}
.fv-msg{display:grid;gap:.4rem;max-width:40rem;margin-top:.9rem}
.fv-msg label{font-weight:600;font-size:.95rem}
.fv-msg textarea{width:100%;min-height:7.5rem;padding:.8rem .9rem;font:inherit;color:var(--ink);background:var(--field);border:0;border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px var(--field-line);resize:vertical;transition:box-shadow .15s}
.fv-msg textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.fv-msg textarea:focus-visible{outline:3px solid var(--lime-ink);outline-offset:2px}
.fv-msg textarea::placeholder{color:var(--ink-60);opacity:1}
@media (prefers-reduced-motion:no-preference){.fv-msg.is-open{animation:fv-in .45s cubic-bezier(.16,1,.3,1) both}}
@keyframes fv-in{from{opacity:0;transform:translateY(-.6rem)}}
.fv-send{width:100%;min-height:56px;margin-top:1.3rem;padding:.9rem 1.6rem;font-size:1.06rem}
.fv-send .ico-svg{width:1.3rem;height:1.3rem;transition:transform .2s ease-out}
.fv-send:hover .ico-svg{transform:translateX(3px)}
.form[aria-busy=true] .btn{opacity:.7;cursor:progress}
.fv .privacy{max-width:40rem}
@media (min-width:760px){.fv-send{width:auto;min-width:13rem}}
/* mobil: věta se rozpadne na bloky pod sebou s viditelnými popisky, nic neskáče ani se neořezává */
@media (max-width:759px){
  .fv-veta{display:grid;gap:1rem;max-width:none;font:400 1.0625rem/1.4 var(--sans);letter-spacing:0}
  .fv-w{display:none}
  .fv.is-js .fv-chci{display:contents}
  .fv-f{display:grid;gap:.35rem;width:100%}
  .fv-veta label.sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-weight:600;font-size:.95rem;color:var(--ink)}
  .fv-sel{display:block}
  .fv-veta input,.fv-veta select,#f-jmeno,#f-podnik,#f-kontakt{field-sizing:fixed;display:block;width:100%;min-width:0;height:52px;padding:0 .9rem;background:var(--field);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px var(--field-line)}
  .fv-sel select{padding-right:2.2rem}
  .fv-sel::after{right:1rem;width:.5rem;height:.5rem;margin-top:-.35rem;border-width:0 2px 2px 0}
  .fv-veta input:focus,.fv-veta select:focus{background:var(--field);box-shadow:inset 0 0 0 2px var(--ink)}
  .fv-veta [aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--warn)}
  .fv-f .field-err{width:auto;margin:0}
}
.privacy{font-size:.875rem;color:var(--mute);margin-top:.8rem}
.privacy a{display:inline-block;padding:.5rem 0}
.hp{display:none}
/* kontakt na hlavní stránce: tmavý pás s „živým obrazem“ (telefon na kavárenském stolku), video jen dekorace (js/kontakt-video.js) */
.contact-video{padding:0 0 var(--sec)}
.cv-band{--bg:var(--ink);--fg:var(--ink-on-dark);--mute:var(--ink-on-dark-60);--line-2:rgb(244 241 234 / .28);--edge:var(--ink-on-dark-60);--pri-bg:var(--lime);--pri-fg:var(--ink);--pri-hover:var(--lime-2);--focus:var(--lime);
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--fg);margin-bottom:var(--sec);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.cv-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.cv-media img,.cv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cv-v{opacity:0;transition:opacity .6s linear}
.cv-v.is-on{opacity:1}
.cv-media::after{content:"";position:absolute;inset:auto 0 0;height:38%;z-index:1;background:linear-gradient(rgb(20 21 22 / 0),var(--ink))}
.cv-band>.wrap{position:relative;z-index:1;margin-top:-2.5rem;padding-bottom:var(--sec)}
.cv-band .contact-direct p{color:var(--mute)}
.cv-band .contact-mail{text-decoration-color:var(--lime)}
.cv-btn{position:absolute;z-index:2;top:.75rem;right:.75rem;display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgb(244 241 234 / .55);border-radius:999px;background:rgb(20 21 22 / .55);color:var(--ink-on-dark);cursor:pointer}
.cv-btn.is-on{display:inline-flex}
.cv-btn:hover{background:rgb(20 21 22 / .8)}
.cv-btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
/* pauza videa: neviditelná, ukáže se při najetí myší na pás s videem a při fokusu z klávesnice (WCAG 2.2.2), 29. 10. 2026 */
.cv-btn{opacity:0;transition:opacity .2s}
.cv-btn:focus-visible{opacity:1}
@media (hover:hover){.cv-band:hover .cv-btn{opacity:1}}
.cv-ico{width:.72rem;height:.8rem;border-left:.24rem solid currentColor;border-right:.24rem solid currentColor}
.cv-btn[aria-pressed="true"] .cv-ico{width:0;height:0;border:0;border-top:.42rem solid transparent;border-bottom:.42rem solid transparent;border-left:.7rem solid currentColor;margin-left:.15rem}
.contact.contact-video .wrap{display:block}
@media (min-width:1100px){
  .cv-band{display:flex;align-items:center;min-height:max(36rem,min(50vw,88svh))}
  .cv-media{position:absolute;top:0;bottom:0;right:0;left:calc(max(var(--gut),50% - var(--max) / 2) + 24rem);aspect-ratio:auto}
  .cv-media img,.cv-v{object-position:62% 60%}
  .cv-media::after{inset:0;height:auto;background:linear-gradient(90deg,var(--ink) 0,rgb(20 21 22 / .82) 12%,rgb(20 21 22 / .3) 30%,rgb(20 21 22 / 0) 46%),linear-gradient(0deg,rgb(20 21 22 / .45),rgb(20 21 22 / 0) 28%)}
  .cv-band>.wrap{width:100%;margin-top:0;padding-top:var(--sec)}
  .cv-band .contact-direct{max-width:31rem}
  .cv-btn{top:auto;bottom:1rem;right:1rem}
}

/* patička */
.foot{padding:3.5rem 0 2rem;font-size:.875rem;color:var(--mute)}
.foot .wrap{display:grid;gap:1.25rem}
.foot-brand{font-stretch:125%;font-weight:800;font-size:1.3rem;color:var(--fg);letter-spacing:-.04em}
.foot-brand span{display:block;margin-top:.6rem;font:800 clamp(1.7rem,3.6vw,2.6rem)/1.05 var(--display);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.foot a{display:inline-flex;align-items:center;min-height:44px}
/* telefon: patička sahá i do rezervy pro spodní lištu (body padding-bottom 76px), ať pod ní nezůstane světlý pruh */
@media (max-width:759px){body:not(.page) .foot{margin-bottom:-76px;padding-bottom:calc(2rem + 76px)}}
.foot-links{display:flex;flex-wrap:wrap;gap:0 1.25rem}

/* mobilní lišta */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.6rem var(--gut) max(.6rem,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line-2);transform:translateY(100%);visibility:hidden;transition:transform .3s ease-out,visibility .3s}
.sticky.on{transform:none;visibility:visible}

@media (min-width:760px){
  :root{--gut:3rem;--sec:7rem}
  body{padding-bottom:0;font-size:1.1rem}
  .top nav{display:flex;gap:1.75rem;margin-left:auto;margin-right:1.25rem}
  .top .btn-sm{margin-left:0}
  .top-cenik,.only-touch,.js .has-menu .menu-btn{display:none!important}
  .top-call{display:inline-flex!important}
  .only-desk{display:inline-flex!important}
  .jen-pc{display:inline}
  .plans-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:3rem}
  .top nav a{text-decoration:none;color:var(--mute);font-weight:400;padding:.6rem 0}
  .top nav a:hover,.top nav a[aria-current=page]{color:var(--fg)}
  .top nav a:hover{text-decoration:underline;text-underline-offset:6px}
  .hero-in{gap:3rem;padding-top:5rem;padding-bottom:5.5rem}
  .cta{display:flex;flex-wrap:wrap}
  .reel-stage{--cw:118px;margin:0}
  .proof-checks{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
  .proof-checks li{font-size:.9rem}
  /* 4 ukázky: tablet 2 × 2 (náhled nad textem), od 1100 px čtyři vedle sebe */
  .demos{grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5rem 2.5rem}
  .demo{grid-template-columns:1fr;gap:1.4rem}
  .demo-shot{max-width:250px}
  .btn-galerie{width:auto;padding:.9rem 2rem}
  .checks{columns:2;column-gap:3rem;padding-bottom:1rem}
  .checks li{break-inside:avoid}
  .stamp{right:2.75rem;bottom:auto;top:2.5rem;width:8.6rem;height:8.6rem;font-size:1.15rem}
  .about .wrap{grid-template-columns:260px 1fr;gap:4.5rem;align-items:center}
  .contact .wrap{grid-template-columns:1fr 1fr;gap:4.5rem}
  .foot .wrap{grid-template-columns:1.6fr 1.2fr 1.2fr;align-items:start}
  .sticky{display:none}
}
@media (min-width:1000px){
  .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:3rem;padding-top:2.5rem;padding-bottom:2.75rem}
  /* celý úvod i s řádkem přínosů se vejde na první obrazovku 1280 × 720 (tuning v2) */
  .proof{gap:1.1rem}
  .proof-checks li{padding:.65rem 0}
  .reel-stage{--cw:clamp(112px,9.4vw,132px);margin-right:calc(var(--gut) * -1)}
}
@media (min-width:1100px){.demos{grid-template-columns:repeat(3,minmax(0,1fr));gap:3.5rem 2.5rem}}
@media (min-width:1280px){.demos{grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem}.demo-shot{max-width:none}}
/* velká obrazovka: úvod vyplní šířku stejně jako obsah pod ním */
@media (min-width:1500px){h1{font-size:clamp(5.2rem,4.7vw,7.6rem)}.lead{font-size:1.3rem;max-width:40rem}.reel-stage{--cw:clamp(150px,10.5vw,220px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* jednoduché stránky (zásady, poděkování, 404) */
.page{padding-bottom:0}
.doc{padding:3rem 0 4rem}
.doc .wrap{max-width:calc(46rem + 2 * var(--gut))}
.doc h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.doc h2{font-size:1.4rem;margin:2.2rem 0 .5rem}
.doc p{color:var(--mute);margin-bottom:1rem;max-width:40rem}
.doc .doc-lead{color:var(--fg);font-size:1.15rem}
.doc .btn{margin-top:.5rem}
.doc-meta{font-size:.9rem}

/* osobní stránka /pro/ */
.pro-for{font:600 .9rem var(--sans);color:var(--lime-ink);margin-bottom:1rem}
.pro .doc-lead{margin-bottom:1.5rem}
.pro-note{font-size:.9rem}
.pro-checks{margin:.5rem 0 1rem;background:var(--paper-2);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius-s);padding:.5rem 1.1rem}
.pro-checks li:last-child{border-bottom:0}
.pro-checks .t{color:var(--ink)}
.pro-checks b{font-weight:600}
.pro-price{border-radius:var(--radius-m);padding:1.2rem 1.25rem;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--paper);margin-bottom:1rem}
.pro-price p{color:var(--fg);margin-bottom:.6rem}
.pro-price p:last-child{color:var(--mute);margin-bottom:0}
.pro-price s{color:var(--mute)}
.pro-contact{display:grid}
.pro-sheet{position:relative;margin-bottom:6rem}
.pro-stamp{top:auto;right:.5rem;bottom:-5.6rem;width:6.6rem;height:6.6rem;font-size:.85rem}
.pro .contact-btns{margin-top:.2rem}
.doc .stamp{max-width:none;margin:0;color:var(--lime-ink)}
[hidden]{display:none!important}

/* galerie ukázek podle oboru (/ukazky/) – doladí se v části 2 */
.galerie-sec{padding:2.5rem 0 1rem}
.galerie-sec .lead{margin-bottom:1.4rem}
.obory{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
/* bez JS je filtr skrytý a vidět jsou všechny ukázky; třídu js a obor z odkazu ?obor= dává skript v hlavičce galerie ještě před vykreslením */
html:not(.js) .obory{display:none}
html[data-obor=salony] .g-card:not([data-obor=salony]),html[data-obor=gastro] .g-card:not([data-obor=gastro]),html[data-obor=ubytovani] .g-card:not([data-obor=ubytovani]),html[data-obor=sluzby] .g-card:not([data-obor=sluzby]),html[data-obor=zdravi] .g-card:not([data-obor=zdravi]),html[data-obor=premium] .g-card:not([data-premium]){display:none}
html[data-obor=salony] .g-sk:not([data-sk=salony]),html[data-obor=gastro] .g-sk:not([data-sk=gastro]),html[data-obor=ubytovani] .g-sk:not([data-sk=ubytovani]),html[data-obor=sluzby] .g-sk:not([data-sk=sluzby]),html[data-obor=zdravi] .g-sk:not([data-sk=zdravi]),html[data-obor=premium] .g-sk:not([data-ma-premium]){display:none}
.g-sk>h2{margin:0 0 1.25rem;font-size:clamp(1.6rem,3vw,2.2rem)}
html[data-obor]:not([data-obor=vse]) .g-sk>h2{display:none}
.obory button{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem .95rem;border:0;border-radius:999px;background:var(--paper-2);color:var(--ink);font:600 .95rem/1.2 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.obory button:hover{background:var(--paper-3)}
.obory button span{font-weight:500;font-size:.85rem;color:var(--ink-60);font-variant-numeric:tabular-nums}
.obory [aria-pressed=true]{background:var(--ink);color:var(--paper)}
.obory [aria-pressed=true]:hover{background:var(--ink-2)}
.obory [aria-pressed=true] span{color:var(--ink-on-dark-60)}
.obory .ob-prem{background:var(--lime-soft);color:var(--lime-ink);letter-spacing:.08em;text-transform:uppercase;font-family:var(--display);font-weight:800;font-size:.85rem}
.obory .ob-prem span{color:var(--lime-ink);letter-spacing:0}
.obory .ob-prem:hover{background:var(--lime-2)}
.obory .ob-prem[aria-pressed=true]{background:var(--ink);color:var(--lime)}
.obory .ob-prem[aria-pressed=true] span{color:var(--ink-on-dark-60)}
.gal-count{font-size:.9rem;color:var(--mute);margin-bottom:1.5rem}
/* zarovnání (tuning v2): karta se neroztahuje na výšku řádku a volné místo se nepřidává pod náhled,
   takže náhledy (pevný poměr 390/760, object-fit cover, odshora) i nadpisy v jednom řádku sedí na stejné výšce */
.galerie{list-style:none;padding:0;display:grid;gap:1.5rem;margin-bottom:3rem;align-items:start}
.g-card{display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,1fr);gap:1rem;align-items:start;align-content:start;padding-top:1.5rem;border-top:1px solid var(--line)}
.g-card[hidden]{display:none}
.g-card h3{font:700 1.375rem/1.2 var(--display);letter-spacing:-.01em;margin-bottom:.5rem}
.g-card p{color:var(--mute);font-size:.97rem}
/* nálepka „Premium“ na rámu náhledu vlajkové ukázky: limetka jen na tmavém, papírový lem ji oddělí od rámu */
.g-shot{position:relative}
.g-badge{position:absolute;z-index:1;top:-.55rem;left:-.45rem;padding:.42rem .62rem .38rem;border-radius:4px;background:var(--ink);color:var(--lime);font:800 .75rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 2px var(--paper),0 8px 16px -8px rgba(20,21,22,.6);transform:rotate(-4deg);pointer-events:none}
.gal-cta .contact-direct p{margin-bottom:.4rem}
@media (min-width:760px){
  .galerie-sec{padding:4.5rem 0 2rem}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 2.25rem}
  .g-card{grid-template-columns:1fr;gap:1rem;padding-top:0;border-top:0}
  .g-shot{max-width:240px}
}
@media (min-width:1100px){.galerie{grid-template-columns:repeat(4,minmax(0,1fr))}.g-shot{max-width:230px}}

/* ===== Hlavní stránka: pohyb a hloubka (28. 10. 2026 večer) ===== */
.hero{position:relative;isolation:isolate;overflow:hidden}

/* podtržení „svůj web“ se dotáhne tužkou */
@media (prefers-reduced-motion:no-preference){
  .home .hl-line path{stroke-dasharray:1;stroke-dashoffset:0;animation:tah .9s cubic-bezier(.6,.1,.3,1) .45s backwards}
  @keyframes tah{from{stroke-dashoffset:1}}
}


/* karty ukázek se jen krátce rozsvítí, až se k nim dojede (třídu rv dává app.js jen kartám pod první obrazovkou) */
.js:not(.no-anim) .rv{opacity:0}
.js:not(.no-anim) .rv.in{opacity:1;transition:opacity .2s ease-out}

/* náhled ukázky: při najetí myší se obrazovka telefonu jemně posune, jako by se stránka rolovala */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .home .shot-phone img{transition:object-position 1.6s cubic-bezier(.3,.1,.2,1)}
  .home .shot-phone:hover img,.home li:hover>.shot-phone img{object-position:50% 100%}
}

/* tisk a uložení do PDF: ukázat i sekce, ke kterým se nedoscrollovalo */
@media print{.js .rv{opacity:1!important;transform:none!important}}

/* Dvě služby: přepínač nad lištou a pás na hlavní stránce */
.top{min-height:64px;padding-block:0}
.brand{margin-left:-2px;transform:translateY(1px)}
@media (min-width:760px){.top{min-height:68px}}
.sluzby{display:flex;gap:1.5rem;padding:0 var(--gut);background:var(--ink);color:var(--ink-on-dark-60);font-size:.9rem}
.sluzby a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.sluzby a:hover{color:var(--ink-on-dark)}
.sluzby a:focus-visible{outline-color:var(--lime)}
.sluzby a[aria-current]{color:var(--ink-on-dark);font-weight:600;box-shadow:inset 0 -2px 0 var(--lime)}
.druha{padding:var(--sec) 0;background:var(--bg-2)}
.druha-text p{max-width:36rem;margin-bottom:1.75rem}
@media print{.sluzby{display:none}}

/* Kontrolní list: viditelných 5 bodů, bez skriptu a při tisku všech 10 */
@media screen{.js .kp-grid:not(.kp-vse)>.kp:nth-child(n+6){display:none}}
.kp-vse-btn{margin:1rem 0}
html:not(.js) .kp-vse-btn,.kp-grid.kp-vse~.kp-vse-btn{display:none}
.kp-list.kp-vse~.kp-vse-btn{display:none}