@font-face{font-family:"Baloo 2";font-weight:500;font-display:swap;src:url(fonty/baloo2-500.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url(fonty/baloo2-700.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(fonty/baloo2-800.woff2) format("woff2")}

:root{
  --ink:#232b20;
  --ink-soft:#4a5846;
  --paper:#f1fae6;
  --paper-2:#e4f4d3;
  --white:#fff;
  --sun:#ffb02e;
  --sun-deep:#b86e00;
  --leaf:#2f9e44;
  --leaf-deep:#237a34;
  --pink:#ffc2d4;
  --sky:#3b9eff;
  --sky-soft:#d9ecff;
  --rose-soft:#ffdcdd;
  --lime-soft:#d8f5dc;
  --butter:#fff1c2;
  --lilac:#e8dcff;
  --radius:28px;
  --font:"Baloo 2",Nunito,"Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-weight:500;font-size:1.1875rem;line-height:1.5;color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(circle at 12% 8%,#fff 0,transparent 38%),radial-gradient(circle at 92% 30%,var(--paper-2) 0,transparent 42%);
  background-attachment:fixed;
  overflow-x:hidden;
}
::selection{background:var(--sun);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:4px solid var(--sky);outline-offset:3px;border-radius:12px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.ico{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 16px;border-radius:99px;z-index:50}
.skip:focus{left:12px}

/* horní lišta */
.ribbon{background:var(--pink);font-weight:700;font-size:1rem;text-align:center;padding:8px 16px;border-bottom:3px solid var(--ink)}
.ribbon b{background:var(--white);border:2px solid var(--ink);border-radius:99px;padding:0 12px;margin-left:8px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:20px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;font-size:1.65rem;font-weight:800;text-decoration:none;margin-right:auto}
.brand img{width:44px;height:44px;border-radius:12px}
.nav a.link{font-weight:700;text-decoration:none;padding:6px 4px;border-bottom:3px solid transparent}
.nav a.link:hover{border-color:var(--sun)}

/* tlačítka */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:800 1.2rem/1 var(--font);text-decoration:none;color:var(--ink);
  background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:14px 26px 12px;
  box-shadow:0 5px 0 var(--ink);cursor:pointer;transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s cubic-bezier(.2,.8,.2,1),background .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.big{font-size:1.6rem;padding:20px 38px 17px}
.btn.green{background:var(--leaf);color:#fff}
.btn.green:hover{background:var(--leaf-deep)}
.btn.ghost{background:var(--white)}
.btn.small{font-size:1rem;padding:9px 18px 7px;box-shadow:0 3px 0 var(--ink)}
.btn .ico{width:1.3em;height:1.3em;stroke-width:2.6}

/* hrdina */
.hero{padding:34px 0 70px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:46px;align-items:center}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.9rem)}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--sun) 62% 92%,transparent 92%);padding:0 4px;margin:0 -4px}
.hero .lead{font-size:1.35rem;color:var(--ink-soft);margin:22px 0 30px;max-width:30ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero .fine{margin-top:18px;font-size:1rem;color:var(--ink-soft)}
.hero .fine b{color:var(--ink)}

.stage{position:relative;padding:10px 0 24px}
.window{
  background:var(--white);border:3px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:0 14px 0 -4px rgba(35,43,32,.14),0 28px 50px -18px rgba(35,43,32,.38);
}
.window img{width:100%;height:auto}
.stage .win-graf{transform:rotate(-1.6deg);width:92%;margin-left:auto}
.stage .taskbar{
  position:relative;z-index:2;width:90%;margin:-12px 0 0 -2%;transform:rotate(1.2deg);
  background:#fbf3e4;border:3px solid var(--ink);border-radius:18px;padding:10px 8px;
  box-shadow:0 14px 0 -4px rgba(35,43,32,.14),0 24px 40px -16px rgba(35,43,32,.4)
}
.stage .taskbar img{border-radius:10px;width:100%}
.sticker{
  position:absolute;right:-6px;top:-14px;z-index:3;transform:rotate(9deg);
  width:118px;height:118px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);
  display:grid;place-content:center;text-align:center;font-weight:800;font-size:1.9rem;line-height:.95;
  box-shadow:0 5px 0 var(--ink)
}
.sticker small{display:block;font-size:.95rem;font-weight:700}

.perks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;padding:22px 0 8px;font-weight:700;font-size:1.05rem;list-style:none;margin:0}
.perks li{display:flex;align-items:center;gap:8px}
.perks .ico{color:var(--leaf);stroke-width:3.2;width:1.25em;height:1.25em}

/* sekce */
section{padding:84px 0}
.band{background:var(--white);border-block:3px solid var(--ink)}
.section-head{text-align:center;max-width:38ch;margin:0 auto 54px}
.section-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.section-head p{margin-top:14px;color:var(--ink-soft);font-size:1.25rem}

.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.row+.row{margin-top:96px}
.row.flip .copy{order:2}
.row h3{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px}
.row p{color:var(--ink-soft);max-width:34ch}
.row ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.row li{display:flex;gap:10px;align-items:flex-start;font-weight:700}
.row li .ico{color:var(--leaf);stroke-width:3.2;margin-top:3px;width:1.2em;height:1.2em}
.shot{position:relative}
.shot .window{transform:rotate(1.2deg)}
.row.flip .shot .window{transform:rotate(-1.2deg)}
.shot .taskbar-shot{background:#fbf3e4;border:3px solid var(--ink);border-radius:18px;padding:14px 12px;box-shadow:0 14px 0 -4px rgba(35,43,32,.14),0 28px 50px -18px rgba(35,43,32,.38);transform:rotate(1.2deg)}
.shot .taskbar-shot img{border-radius:10px}
.callout{
  position:absolute;background:var(--butter);border:3px solid var(--ink);border-radius:18px;padding:6px 16px 4px;
  font-weight:800;font-size:1.05rem;box-shadow:0 4px 0 var(--ink);white-space:nowrap
}
.callout.a{left:-10px;bottom:-26px;transform:rotate(-3deg)}
.callout.b{right:-8px;top:-22px;transform:rotate(3deg);background:var(--sky-soft)}

/* barevné dlaždice */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.tile{border:3px solid var(--ink);border-radius:var(--radius);padding:26px 24px 24px;box-shadow:0 6px 0 var(--ink);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tile:hover{transform:translateY(-4px) rotate(-.6deg)}
.tile:nth-child(even):hover{transform:translateY(-4px) rotate(.6deg)}
.tile .badge{width:60px;height:60px;border-radius:20px;background:var(--white);border:3px solid var(--ink);display:grid;place-content:center;margin-bottom:16px}
.tile .badge .ico{width:30px;height:30px}
.tile h3{font-size:1.65rem;margin-bottom:8px}
.tile p{font-size:1.08rem;color:var(--ink)}
.t1{background:var(--sky-soft)}.t2{background:var(--lime-soft)}.t3{background:var(--butter)}
.t4{background:var(--rose-soft)}.t5{background:var(--lilac)}.t6{background:#d4f2ee}
.dots{display:flex;gap:8px;margin-top:14px}
.dots i{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);display:block}

/* kroky */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);padding:34px 26px 26px;box-shadow:0 6px 0 var(--ink)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:-24px;left:24px;width:52px;height:52px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);display:grid;place-content:center;font-weight:800;font-size:1.7rem;line-height:1;padding-top:3px}
.steps h3{font-size:1.6rem;margin-bottom:8px}
.steps p{color:var(--ink-soft);font-size:1.08rem}
.note{margin:46px auto 0;max-width:62ch;background:var(--butter);border:3px solid var(--ink);border-radius:var(--radius);padding:20px 26px;display:flex;gap:16px;align-items:flex-start;font-size:1.08rem}
.note .ico{width:34px;height:34px;margin-top:2px;color:var(--sun-deep)}

/* FAQ */
.faq{max-width:780px;margin:0 auto;display:grid;gap:14px}
details{background:var(--white);border:3px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink)}
summary{list-style:none;cursor:pointer;font-weight:800;font-size:1.3rem;padding:16px 60px 12px 24px;position:relative;border-radius:22px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:18px;top:50%;translate:0 -52%;width:34px;height:34px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);display:grid;place-content:center;font-size:1.5rem;line-height:1;padding-bottom:3px;transition:rotate .25s cubic-bezier(.2,.8,.2,1)}
details[open] summary::after{rotate:45deg}
details p{padding:0 24px 20px;color:var(--ink-soft)}

/* závěrečná výzva */
.final{background:var(--leaf-deep);color:#fff;border-block:3px solid var(--ink);text-align:center;padding:84px 0 92px;position:relative;overflow:hidden}
.final h2{font-size:clamp(2.2rem,4.8vw,3.8rem);max-width:18ch;margin:0 auto 14px}
.final p{font-size:1.3rem;margin-bottom:34px;color:#eaffee}
.final .btn.big{background:var(--sun);color:var(--ink)}
.final .meta{margin-top:22px;font-size:1.02rem;color:#eaffee}
.final .bubble{position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.3);pointer-events:none}
.final .bubble.x{width:220px;height:220px;left:-60px;top:-60px}
.final .bubble.y{width:320px;height:320px;right:-110px;bottom:-130px}

footer{padding:34px 0 44px;font-size:1rem;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer a{font-weight:700}

/* jediný nápadný pohyb: vyskočení hrdiny */
@media (prefers-reduced-motion:no-preference){
  .hero .copy>*,.stage{animation:pop .7s cubic-bezier(.16,1,.3,1) both}
  .hero .copy>:nth-child(2){animation-delay:.08s}
  .hero .copy>:nth-child(3){animation-delay:.16s}
  .hero .copy>:nth-child(4){animation-delay:.24s}
  .stage{animation-delay:.18s}
  .stage .taskbar{animation:slide .8s .5s cubic-bezier(.16,1,.3,1) both}
  .sticker{animation:stick .7s .7s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes pop{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  @keyframes slide{from{opacity:0;translate:-30px 0}to{opacity:1;translate:0 0}}
  @keyframes stick{from{opacity:0;scale:.3;rotate:-30deg}to{opacity:1;scale:1;rotate:0deg}}
}

@media (max-width:900px){
  body{font-size:1.125rem}
  .hero,.row{grid-template-columns:1fr;gap:34px}
  .hero{padding-top:14px}
  .row.flip .copy{order:0}
  .row+.row{margin-top:70px}
  .steps{grid-template-columns:1fr;gap:38px}
  section{padding:62px 0}
  .nav a.link{display:none}
  .stage .win-graf{width:100%}
  .stage .taskbar{width:94%}
  .sticker{width:96px;height:96px;font-size:1.55rem;right:-2px}
  .callout.a{left:0}.callout.b{right:0}
}
@media (max-width:480px){
  .btn.big{font-size:1.35rem;padding:18px 26px 15px;width:100%}
  .ribbon{font-size:.92rem}
  .hero .lead{font-size:1.2rem}
}

/* změny a starší verze */
.section-head.left{text-align:left;margin:40px 0 36px;max-width:none}
.section-head h1{font-size:clamp(2.4rem,5vw,3.8rem)}
.changelog{padding-bottom:40px}
.timeline{display:grid;gap:22px;max-width:820px}
.rel{background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);padding:24px 26px 26px;box-shadow:0 6px 0 var(--ink)}
.rel.now{background:var(--lime-soft)}
.rel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px}
.rel-head h2{font-size:1.7rem}
.rel .date{font-weight:700;color:var(--ink-soft)}
.tag-new{background:var(--sun);border:2px solid var(--ink);border-radius:99px;padding:0 12px;font-weight:800;font-size:.95rem}
.rel ul{margin:0 0 16px;padding-left:1.2em;display:grid;gap:4px}
.rel .sz{opacity:.7;font-weight:700;margin-left:6px}
.nofile{color:var(--ink-soft);font-size:1rem}
.sub .note{margin:40px 0 0;max-width:820px}

/* právní stránky */
.legal .prose{max-width:760px;display:block}
.legal .prose h2{font-size:1.7rem;margin:34px 0 8px}
.legal .prose p{margin:0 0 12px;color:var(--ink)}
.legal .prose code{background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:0 6px;font-size:.95em}
.legal .prose a{font-weight:700}