: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-obal{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.hlavicka{padding-block:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.znacka{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.znacka span{font:700 24px 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)}
.mmenu{display:none}
.mmenu summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;cursor:pointer}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu nav{position:absolute;right:16px;left:16px;top:calc(100% + 4px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.mmenu nav a{padding:14px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600}
.mmenu nav a:hover{background:var(--sand)}
.lista-mobil{display:none}
.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}
.telefony{position:relative;display:flex;justify-content:center;padding:8px 0 28px;min-height:420px}
.telefony::before{content:"";position:absolute;inset:8% 6% 4%;border-radius:28px;background:var(--sand);transform:rotate(-3deg)}
.telefon{position:relative;display:block;width:min(270px,62%);aspect-ratio:540/1170;border-radius:34px;padding:9px;background:#151816;box-shadow:0 24px 50px rgba(20,30,25,.22);z-index:2}
.telefon img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:26px}
.telefon.zadni{position:absolute;width:min(230px,52%);right:2%;top:13%;transform:rotate(6deg);z-index:1;opacity:.95}
.telefony .razitko{z-index:3;left:2%;right:auto;bottom:40px}
.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 h3{margin-bottom:6px}
.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:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.dilo{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.dilo .nahled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:2}
.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{display:flex;flex-direction:column;gap:4px;font-size:20px;font-weight:700}
.kontakt .udaje a{color:var(--on-brand);text-decoration:none;padding-block:6px}
.kontakt .udaje a:hover{text-decoration:underline}
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:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 32px;font-size:14px;line-height:1.8;color:var(--muted)}
.paticka strong{color:var(--ink)}
.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}

/* Telefon a menší tablet */
@media (max-width:760px){
  nav.menu{display:none}
  .mmenu{display:block}
  .hero{padding-block:16px 40px;gap:28px}
  .hero .text{gap:18px}
  .hero .perex{font-size:18px}
  .akce .btn{flex:1 1 220px}
  .ukazka-webu{min-height:0;padding-bottom:20px}
  .telefony{min-height:0;padding:4px 0 20px;justify-content:flex-start;padding-left:6%}
  .telefon{width:min(220px,56%);border-radius:28px;padding:7px}
  .telefon img{border-radius:22px}
  .telefon.zadni{width:min(190px,47%);right:4%;top:10%}
  .telefony .razitko{left:auto;right:2%;bottom:16px}
  .ukazka-webu .podklad{height:82%;top:6px;left:4%;width:86%}
  .ukazka-webu .okno{margin:16px 0 0 8%;width:88%}
  .okno .obsah{padding:18px;gap:10px}
  .okno .obsah b{font-size:22px}
  .okno .plocha{height:72px}
  .razitko{right:4px;bottom:0;padding:9px 14px;font-size:14px}
  .blok{padding-block:48px;gap:24px}
  .mrizka{gap:12px}
  .krok{flex-direction:row;align-items:flex-start;gap:16px;padding:18px}
  .krok .c{font-size:32px;min-width:28px}
  .krok h3{font-size:19px}
  .krok p{font-size:16px}
  .balicek{padding:22px}
  .garance{gap:16px}
  .portfolio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:12px;margin-inline:-16px;padding:4px 16px 12px;scrollbar-width:none}
  .portfolio::after{content:"";flex:0 0 4px}
  .dilo .nahled b{font-size:20px}
  .portfolio::-webkit-scrollbar{display:none}
  .dilo{flex:0 0 78%;scroll-snap-align:start}
  .kontakt .blok{gap:28px}
  form.formular{padding:20px}
  .lista-mobil{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .lista-mobil .btn{flex:1;gap:8px;padding:0 12px;font-size:16px}
  .lista-mobil .btn.obrys{flex:0 0 auto;background:var(--card)}
  body{padding-bottom:76px}
  .paticka{padding-block:32px 24px;font-size:15px;line-height:1.6}
  .paticka a{display:inline-block;padding-block:8px}
  .kontakt .udaje{font-size:22px}
  .ukazka-webu .okno{box-shadow:0 18px 40px rgba(0,0,0,.08)}
}
@media (max-width:380px){
  .hero h1{font-size:36px}
  .lista-mobil .btn{font-size:15px}
}