:root{--hlavni:#2c962c;--tmava:#1c5f1c;--doplnkova:#8c59c0;--cta:#c322c3;--pozadi:#f5faf5;--plocha:#e2f3e2;--text:#1b2d1b;--papir:#fffef8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Jost",Verdana,sans-serif;font-size:18px;line-height:1.6;color:var(--text);background:var(--pozadi);
background-image:repeating-linear-gradient(0deg,rgba(28,95,28,.025) 0 1px,transparent 1px 4px);min-height:100vh;display:flex;flex-direction:column;padding-bottom:96px}
main{flex:1}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:"Literata",Georgia,serif;line-height:1.2;margin:0 0 .5em;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--tmava)}
a:focus-visible,button:focus-visible{outline:3px solid var(--doplnkova);outline-offset:3px}
.sirka{max-width:1120px;margin:0 auto;padding:0 20px}
/* hlavička */
.hlava{padding:14px 0;border-bottom:2px dashed rgba(28,95,28,.3)}
.hlava .sirka{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.znak{font-family:"Literata",serif;font-weight:800;font-size:1.45rem;color:var(--tmava);text-decoration:none}
.znak span{display:inline-block;background:var(--plocha);padding:2px 10px;transform:rotate(-2deg)}
/* tlačítka */
.btn,.tl{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--cta);color:#fff;font-family:"Jost",sans-serif;font-weight:600;
font-size:19px;min-height:60px;padding:12px 28px;border:0;border-radius:4px;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--tmava)}
.btn:hover,.tl:hover{background:#a018a0}
.tl-hlava{min-height:50px;font-size:18px;padding:8px 20px}
.tl-velke{min-height:84px;min-width:320px;font-size:23px;padding:16px 34px}
/* hero */
.uvod{padding:48px 0 64px}
.uvod .sirka{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center}
.list{background:var(--papir);padding:40px 38px 34px;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.06),0 18px 30px -18px rgba(28,95,28,.4);transform:rotate(-.6deg)}
.list::before,.vystrizek::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(140,89,192,.35);transform:rotate(-4deg)}
.perex{font-size:1.15rem}
.prehled{list-style:none;margin:22px 0 26px;padding:0;counter-reset:p}
.prehled li{counter-increment:p;display:flex;gap:14px;align-items:baseline;padding:8px 0;border-bottom:1px dotted rgba(28,95,28,.4)}
.prehled li::before{content:counter(p);font-family:"Literata",serif;font-weight:800;font-size:1.6rem;color:var(--hlavni);min-width:1.2em}
.prehled a{color:var(--text);text-decoration:none}
.prehled a:hover{text-decoration:underline}
.vystrizek{position:relative;margin:0;background:#fff;padding:12px 12px 16px;transform:rotate(2.2deg);box-shadow:0 14px 28px -14px rgba(0,0,0,.45)}
.vystrizek figcaption,.foto figcaption{font-size:15px;padding-top:10px;line-height:1.4}
/* trhlina */
.trh-hore{clip-path:polygon(0 14px,4% 4px,9% 12px,15% 2px,22% 11px,30% 3px,37% 12px,45% 1px,53% 10px,60% 3px,68% 12px,76% 2px,84% 11px,91% 3px,100% 12px,100% 100%,0 100%)}
.trh-dole{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),93% calc(100% - 2px),86% calc(100% - 12px),78% calc(100% - 3px),70% calc(100% - 11px),61% calc(100% - 1px),52% calc(100% - 12px),44% calc(100% - 3px),35% calc(100% - 11px),27% calc(100% - 2px),18% calc(100% - 12px),9% calc(100% - 3px),0 calc(100% - 10px))}
/* kroky s linkou */
.koraki{position:relative}
.korak{position:relative;padding:72px 0}
.korak .sirka{position:relative;padding-left:110px}
.koraki::before{content:"";position:absolute;left:max(52px,calc((100% - 1120px)/2 + 52px));top:0;bottom:0;width:4px;background:repeating-linear-gradient(180deg,var(--doplnkova) 0 14px,transparent 14px 22px);z-index:1}
.cislo{position:absolute;left:14px;top:-6px;width:80px;height:80px;border-radius:50%;background:var(--papir);border:4px solid var(--doplnkova);display:flex;align-items:center;justify-content:center;
font-family:"Literata",serif;font-weight:800;font-size:2.4rem;color:var(--doplnkova);z-index:2}
.vzdusny{background:transparent}
.pas{background:var(--tmava);color:#fff}
.pas a{color:#fff}
.pas-svetly{background:var(--plocha)}
.uvodni{max-width:720px;font-size:1.1rem}
.seznam{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:30px}
.listek{background:var(--papir);padding:22px 24px;position:relative;border-left:6px solid var(--hlavni)}
.listek:nth-child(odd){transform:rotate(-.7deg)}
.listek:nth-child(even){transform:rotate(.6deg)}
.listek h3::before{content:"☐ ";color:var(--hlavni)}
.foto{margin:0;background:#fff;padding:10px 10px 14px;max-width:760px;margin-top:34px;transform:rotate(-1deg);box-shadow:0 12px 24px -14px rgba(0,0,0,.45)}
.foto-pas{color:var(--text)}
.dejstva{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:26px}
.karte{display:grid;gap:18px}
.dejstvo{background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.5);padding:18px 20px}
.dejstvo h3{color:#fff}
.dejstvo .vir{font-size:15px;opacity:.85;margin:0}
.velko{font-family:"Literata",serif;font-size:2.4rem;font-weight:800;line-height:1;display:block;margin-bottom:6px;color:#f3d6f3}
.infografika{margin:0;background:var(--papir);padding:12px;color:var(--text);transform:rotate(1deg)}
.infografika figcaption{font-size:15px;padding-top:8px}
.ponudba{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-top:20px}
.cena{font-family:"Literata",serif;font-size:3.6rem;font-weight:800;color:var(--cta);background:var(--papir);padding:6px 22px;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--tmava)}
/* recenze, faq */
.blok{padding:70px 0}
.recenze{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}
.recenze figure{margin:0;background:var(--papir);padding:20px;position:relative;border-top:5px solid var(--doplnkova)}
.recenze figure:nth-child(2n){transform:rotate(1deg)}
.recenze blockquote{margin:0 0 12px;font-family:"Literata",serif;font-size:1.1rem}
.recenze cite{font-style:normal;font-size:15px;font-weight:600}
.faq{max-width:780px}
.faq details{background:var(--papir);margin:0 0 12px;padding:14px 20px;border-left:5px solid var(--hlavni)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.1rem}
.faq details p{margin:10px 0 0}
.konec{background:var(--tmava);color:#fff;padding:70px 0 80px}
.konec .sirka{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.konec .foto{margin:0;color:var(--text);transform:rotate(1.5deg)}
/* patička */
.pata{background:var(--text);color:#e2f3e2;padding:24px 0;font-size:15px}
.pata .sirka{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.pata a{color:#e2f3e2;margin-right:14px}
/* podstránky */
.stran{padding:50px 0}
.stran .sirka{max-width:820px}
.stran section{margin-bottom:22px}
.obrazec{display:grid;gap:14px;max-width:520px}
.obrazec label{display:grid;gap:4px;font-weight:600}
.obrazec input,.obrazec textarea{font:inherit;padding:10px;border:2px solid var(--hlavni);background:#fff}
/* popup a lišta */
.modal-overlay{position:fixed;inset:0;background:rgba(10,30,10,.82);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:var(--papir);max-width:640px;width:100%;padding:42px 34px;text-align:center;position:relative;border-top:10px solid var(--cta)}
.modal .close{position:absolute;top:8px;right:12px;font-size:34px;background:none;border:0;cursor:pointer;color:var(--text)}
.modal .badge{display:inline-block;background:var(--doplnkova);color:#fff;padding:4px 14px;font-weight:600}
.modal h3{font-size:44px;margin:14px 0;color:var(--cta)}
.modal .offer{font-size:20px}
.modal .btn{white-space:normal;min-height:84px;font-size:23px;width:100%}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 16px;flex-wrap:wrap}
.sticky-cta > span{flex:1 1 260px;text-align:center}
.sticky-cta .btn{flex:0 0 auto;min-height:60px}
@media (max-width:860px){
 body{padding-bottom:150px}
 .uvod .sirka,.dejstva,.konec .sirka,.seznam,.recenze{grid-template-columns:1fr}
 .korak .sirka{padding-left:72px}
 .koraki::before{left:34px}
 .cislo{width:56px;height:56px;font-size:1.7rem;left:6px}
 .list{padding:30px 20px 24px}
 .tl-velke{min-width:0;width:100%}
 .foto,.vystrizek,.listek,.infografika,.konec .foto{transform:none}
 .sticky-cta{flex-direction:column;gap:8px}
 .sticky-cta > span{flex:0 0 auto}
}
@media (max-width:480px){.korak .sirka{padding-left:64px;padding-right:16px}.sirka{padding:0 16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}