:root{
  --paper:#FBF8F2;--sand:#F3E7D3;--line:#E3DDD1;--ink:#1E2421;--muted:#5B635E;--card:#FFFFFF;
  --brand:#1F5B4A;--brand-dark:#163F33;--on-brand:#FFFFFF;--brand-tint:#DCE7E1;--accent:#C2482A;--on-accent:#FFFFFF;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#141716;--sand:#24221E;--line:#2F3331;--ink:#EEF0EC;--muted:#A6AEA8;--card:#1C201E;
  --brand:#7CCFB2;--brand-dark:#A6E2CC;--on-brand:#0F2A22;--brand-tint:#21352E;--accent:#F07A57;--on-accent:#141716;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--f-body)}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--brand)}a:hover{color:var(--brand-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
.uzky{max-width:760px}
.hlavicka{padding-block:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.znacka{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.znacka span{font:700 26px var(--f-display);letter-spacing:-.5px}
.znacka svg .k{fill:var(--brand)}.znacka svg .r{fill:var(--paper)}.znacka svg .t{fill:var(--accent)}
nav.menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-weight:500}
nav.menu a{color:var(--ink);text-decoration:none}
nav.menu a:hover{color:var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--brand);color:var(--on-brand)!important;text-decoration:none;font-weight:600;border:0;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--brand-dark)}
.btn.obrys{background:transparent;color:var(--brand)!important;box-shadow:inset 0 0 0 2px var(--brand)}
.btn.cihla{background:var(--accent);color:var(--on-accent)!important}
.stitek{align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--sand);font-size:14px;font-weight:600}
.hero{padding-block:40px 64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center}
.hero .text{display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(40px,5.4vw,62px);font-weight:800;letter-spacing:-1.5px;line-height:1.02}
.hero .perex{font-size:20px;line-height:1.5;color:var(--muted);margin:0;max-width:34ch}
.akce{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ukazka-webu{position:relative;min-height:360px}
.ukazka-webu .podklad{position:absolute;left:8%;top:0;width:78%;height:300px;border-radius:12px;background:var(--sand);transform:rotate(-4deg)}
.ukazka-webu .okno{position:relative;margin:32px 0 0 16%;width:78%;border-radius:12px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.okno .lista{height:28px;background:var(--line);display:flex;align-items:center;gap:6px;padding:0 12px;font-size:12px;color:var(--muted)}
.okno .lista i{width:8px;height:8px;border-radius:50%;background:var(--paper)}
.okno .obsah{padding:24px;display:flex;flex-direction:column;gap:12px}
.okno .obsah b{font:700 26px/1.15 var(--f-display)}
.okno .plocha{height:110px;border-radius:8px;background:var(--brand-tint)}
.okno .tl{display:flex;gap:8px}.okno .tl span{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--line)}
.okno .tl span:first-child{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.razitko{position:absolute;right:0;bottom:0;padding:12px 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700}
.pas{background:var(--sand)}
.blok{padding-block:64px;display:flex;flex-direction:column;gap:32px}
.blok h2{font-size:clamp(30px,4vw,40px)}
.blok .uvod{margin:8px 0 0;color:var(--muted);max-width:60ch}
.mrizka{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.krok{background:var(--paper);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px}
.krok .c{font:800 40px/1 var(--f-display);color:var(--brand)}
.krok h3{font-size:22px}.krok p{margin:0;color:var(--muted)}
.balicek{border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:16px;background:var(--card)}
.balicek.hlavni{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.balicek.hlavni .muted{color:var(--brand-tint)}
.balicek .hl{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.balicek h3{font-size:28px}
.balicek .cena{font:800 40px/1.1 var(--f-display);color:var(--accent);font-variant-numeric:tabular-nums}
.balicek.hlavni .cena{color:var(--on-brand)}
.balicek ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.balicek .btn{margin-top:auto}
.balicek.hlavni .btn{background:var(--paper);color:var(--brand)!important}
.muted{color:var(--muted)}
.doplnky{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted);font-size:15px}
.garance{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.garance h3{font-size:22px;margin-bottom:6px}.garance p{margin:0;color:var(--muted)}
.portfolio{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dilo{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.dilo .nahled{aspect-ratio:4/3;border-radius:12px;background:var(--b);position:relative;overflow:hidden;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.dilo .nahled::after{content:"";position:absolute;right:-18%;top:-30%;width:62%;aspect-ratio:1;border-radius:50%;background:var(--sand);opacity:.9}
.dilo .nahled b{position:relative;z-index:1;color:#fff;font:800 22px/1.1 var(--f-display);max-width:75%}
.dilo .nahled span{position:relative;z-index:1;align-self:flex-start;background:rgba(255,255,255,.92);color:#1E2421;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px}
.dilo:hover .nahled{outline:3px solid var(--brand);outline-offset:3px}
.dilo small{color:var(--muted)}
details.otazka{border-bottom:1px solid var(--line);padding-block:14px}
details.otazka summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.otazka summary::after{content:"+";font-weight:700;color:var(--brand)}
details.otazka[open] summary::after{content:"–"}
details.otazka p{margin:8px 0 0;color:var(--muted)}
.kontakt{background:var(--brand);color:var(--on-brand)}
.kontakt .blok{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px}
.kontakt h2{color:var(--on-brand)}
.kontakt .ja{display:flex;gap:16px;align-items:center}
.kontakt .foto{width:88px;height:88px;border-radius:12px;object-fit:cover;background:var(--brand-tint);flex-shrink:0}
.kontakt p{color:var(--brand-tint);margin:0}
.kontakt .udaje{font-size:20px;line-height:1.7}
.kontakt .udaje b{color:var(--on-brand)}
form.formular{display:flex;flex-direction:column;gap:10px;background:var(--paper);color:var(--ink);border-radius:12px;padding:24px}
form.formular label{font-weight:600;font-size:15px}
form.formular input,form.formular textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-height:44px}
form.formular .pozn{font-size:13px;color:var(--muted);margin:0}
.past{position:absolute;left:-9999px}
.paticka{padding-block:32px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--muted)}
.paticka a{color:var(--muted)}
.dokument{padding-block:32px 72px;display:flex;flex-direction:column;gap:18px}
.dokument h1{font-size:clamp(32px,4.5vw,44px)}
.dokument h2{font-size:22px;margin-top:18px}
.dokument ol,.dokument ul{padding-left:22px;display:flex;flex-direction:column;gap:8px;margin:0}
.dokument p{margin:0}
.tabulka{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.tabulka table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
.tabulka th,.tabulka td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.tabulka th{background:var(--sand);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.tabulka tr:last-child td{border-bottom:0}