/* ═══════════ 1. TOKENY ═══════════ */
:root{
  --ink:#0B1F16;
  --ink-70:rgba(11,31,22,.78);
  --ink-muted:rgba(11,31,22,.62);

  /* ── zelená, odstíny 50–900 ── */
  --z-50:#E9FBF1;
  --z-100:#C4F5DA;
  --z-300:#3BE08A;   /* na tmavém — 7,18:1 na z-900 */
  --z-400:#00D664;   /* křiklavá — jen tmavé plochy a dekorace */
  --z-500:#00A551;   /* sytá plocha, UI na světlém 3,02:1 */
  --z-600:#00874A;   /* hlavní — bílý text na ní 4,60:1 */
  --z-700:#017A43;   /* text na světlém — 5,08:1 */
  --z-900:#063D25;   /* tmavé plochy — bílá 12,34:1 */

  /* ── oranžová, odstíny 50–700 ── */
  --o-50:#FFF0E3;
  --o-100:#FFD9BC;
  --o-300:#FFA45C;   /* na tmavém — 8,77:1 na ink */
  --o-500:#FF5C00;   /* svítivá — dekorace a tmavé plochy */
  --o-600:#E85000;   /* UI na světlém — 3,52:1 */
  --o-700:#B84400;   /* text na světlém — 5,08:1 */

  /* ── sémantické aliasy ── */
  --brand:var(--z-600);
  --brand-text:var(--z-700);
  --brand-deep:var(--z-900);
  --brand-wash:var(--z-50);
  --accent:var(--o-500);
  --accent-ui:var(--o-600);
  --accent-text:var(--o-700);
  --accent-svetly:var(--o-300);
  --accent-wash:var(--o-50);
  --sky:var(--z-300);
  --paper:#F6F8F4;
  --white:#FFFFFF;
  --line:rgba(11,31,22,.14);
  --line-soft:rgba(11,31,22,.09);
  --line-strong:rgba(11,31,22,.3);
  --line-tmava:rgba(255,255,255,.16);
  --gutter:1.25rem;
  --max:82rem;
  --hl-vyska:76px;            /* výška hlavičky — hero se o ni podsune */
  --r:14px;
  --r-lg:22px;
  --r-xl:28px;
  --mezera:.75rem;
  /* jen dvě rodiny */
  --ff-display:"Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --ff-body:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (min-width:41.25em){ :root{ --gutter:1.75rem; --mezera:1rem } }
@media (min-width:60em){ :root{ --gutter:2rem; --mezera:1.15rem } }

/* ═══════════ 2. RESET ═══════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0; list-style:none}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:6px}
.dl--ink :focus-visible,.dl--brand :focus-visible,footer :focus-visible{outline-color:var(--sky)}

/* ═══════════ 3. TYPOGRAFIE ═══════════ */
/* 1.03 je na česká háčky nad verzálkami příliš těsné */
h1,h2,h3,.display{font-family:var(--ff-display); font-weight:600; line-height:1.08;
  letter-spacing:-.03em; font-variation-settings:"opsz" 48}
h1{font-size:clamp(2.15rem,4.7vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.15; letter-spacing:-.02em}
p{color:var(--ink-70)}
.lead{font-size:clamp(1.06rem,1.6vw,1.24rem); line-height:1.55; color:var(--ink-70)}
/* labely — stejná rodina jako text, odlišené prostrkáním a verzálkami */
.label{font-family:var(--ff-body); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600}
.stitek{display:inline-flex; align-items:center; gap:.55rem; color:var(--accent-text);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  margin-bottom:1rem}
.stitek::before{content:""; width:1.5rem; height:2px; background:currentColor; opacity:.7}
.na-tmave .stitek,.dl--ink .stitek{color:var(--accent-svetly)}
.zvyraznit{position:relative; white-space:nowrap}
.zvyraznit::after{content:""; position:absolute; left:-.02em; right:-.02em; bottom:.02em;
  height:.26em; background:var(--accent); opacity:.38; border-radius:.13em; z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s}
.viditelne .zvyraznit::after{transform:scaleX(1)}

/* ═══════════ 4. LAYOUT + BENTO ═══════════ */
.obal{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
section{padding-block:clamp(2.75rem,5vw,4.75rem)}
section[id]{scroll-margin-top:88px}
.sekce-hlava{max-width:38rem; margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.sekce-hlava p{margin-top:.9rem}

.bento{display:grid; gap:var(--mezera); grid-template-columns:1fr}
@media (min-width:41.25em){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > *{grid-column:span 2}
  .bento > .m1{grid-column:span 1}
}
@media (min-width:60em){
  .bento{grid-template-columns:repeat(12,1fr)}
  .bento > *{grid-column:span 12}
  .bento > .s3{grid-column:span 3}
  .bento > .s4{grid-column:span 4}
  .bento > .s5{grid-column:span 5}
  .bento > .s6{grid-column:span 6}
  .bento > .s7{grid-column:span 7}
  .bento > .s8{grid-column:span 8}
}

.dl{position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(1.4rem,2.6vw,2.1rem);
  display:flex; flex-direction:column; overflow:hidden; isolation:isolate}
.dl--tise{background:transparent; border-color:transparent; padding-inline:0}
.dl--wash{background:var(--brand-wash); border-color:transparent}
.dl--amber{background:var(--accent-wash); border-color:transparent}
.dl--ink{background-color:var(--brand-deep); border-color:transparent; color:#F1FBF5}
.dl--ink p{color:rgba(241,251,245,.86)}
.dl--ink h2,.dl--ink h3{color:#fff}
/* z-700 místo z-600: bílá α.92 na ní dá 4,85:1, na z-600 by to bylo jen 4,14:1 */
.dl--brand{background:var(--z-700); border-color:transparent; color:#fff}
.dl--brand p{color:rgba(255,255,255,.92)}
/* fotky bez rámečku — žádný border, jen ořez do rádiusu */
.dl--foto{padding:0; border:0; min-height:15rem;
  background:linear-gradient(150deg,var(--z-900),var(--z-500))}
.dl--foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1}
.dl--stred{justify-content:center}
/* bez tohohle se dlaždice roztáhne na výšku řady — a při rozbalení FAQ roste s ním */
.dl--nahoru{align-self:start}

.dl-hlava{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.dl-cislo{font-size:.72rem; letter-spacing:.12em; color:var(--ink-muted); font-weight:600}
.dl--ink .dl-cislo{color:rgba(241,251,245,.72)}
.ikona{width:44px; height:44px; border-radius:13px; background:var(--brand-wash);
  color:var(--brand); display:grid; place-items:center; margin-bottom:1.1rem; flex:none}
.ikona svg{width:21px; height:21px}
.dl--wash .ikona{background:var(--white)}
.dl--ink .ikona{background:rgba(255,255,255,.11); color:var(--sky)}
.seznam{margin-top:auto; padding-top:1.1rem; display:grid; gap:.5rem}
.seznam.s-carou,.tarif .seznam{padding-top:0; border-top:0}
.seznam.s-carou::before,.tarif .seznam::before{content:""; grid-column:1/-1;
  height:1px; background:var(--line-soft); margin-top:1.5rem; margin-bottom:.6rem}
.dl--ink .seznam.s-carou::before{background:var(--line-tmava)}
.seznam li{display:flex; gap:.6rem; font-size:.9rem; color:var(--ink-70);
  align-items:flex-start; line-height:1.45}
.dl--ink .seznam li{color:rgba(241,251,245,.86)}
.seznam li svg{width:15px; height:15px; color:var(--accent-text); flex:none; margin-top:.24rem}
.dl--ink .seznam li svg{color:var(--accent-svetly)}
.dl h3{margin-bottom:.5rem}
.dl > p{font-size:.95rem}

/* ═══════════ 5. TLAČÍTKA ═══════════ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem; min-height:50px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:transform .25s, background .25s, color .25s, border-color .25s}
.btn svg{width:1.05em; height:1.05em; flex:none}
.btn-primar{background:var(--brand); color:#fff}
.btn-primar:hover{background:var(--brand-deep); transform:translateY(-2px)}
.btn-duch{border-color:var(--line-strong); color:var(--ink); background:transparent}
.btn-duch:hover{border-color:var(--ink); background:var(--white); transform:translateY(-2px)}
.dl--ink .btn-duch{border-color:rgba(255,255,255,.36); color:#F1FBF5}
.dl--ink .btn-duch:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.dl--brand .btn-primar{background:#fff; color:var(--brand-deep)}
.dl--brand .btn-primar:hover{background:var(--z-50)}
.dl--brand .btn-duch{border-color:rgba(255,255,255,.5); color:#fff}
.dl--brand .btn-duch:hover{border-color:#fff; background:rgba(255,255,255,.13)}
.akce{display:flex; flex-wrap:wrap; gap:.65rem}

/* ═══════════ 6. HLAVIČKA ═══════════ */
/* v heru je hlavička průhledná a součástí gradientu; pozadí naskočí až po odscrollování */
header{position:sticky; top:0; z-index:100; background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, backdrop-filter .3s}
header.scrolled,header.menu-otevreno{background:rgba(246,248,244,.96);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4)}
header.scrolled{border-bottom-color:var(--line)}
.hl-vnitrek{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:76px; flex-wrap:wrap}
.logo{display:inline-flex; align-items:center; color:var(--ink); min-height:44px}
.logo b{font-family:var(--ff-display); font-size:1.85rem; font-weight:700;
  letter-spacing:-.045em; line-height:1; white-space:nowrap}
/* stejný odstín v hlavičce i v patičce — o-600 místo o-500, aby prošel i na světlém (3,52:1) */
.logo b i{font-style:normal; color:var(--accent-ui); margin-left:.22em}
nav.hlavni{display:none}
nav.hlavni ul{display:flex; align-items:center; gap:1.7rem}
nav.hlavni a{font-size:.94rem; font-weight:500; color:var(--ink-70); position:relative;
  display:inline-flex; align-items:center; min-height:44px; transition:color .2s}
nav.hlavni a::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .3s}
nav.hlavni a:hover{color:var(--ink)}
nav.hlavni a:hover::after{transform:scaleX(1); transform-origin:left}
.hl-akce{display:none; align-items:center; gap:.9rem}
.hl-tel{display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  font-size:.92rem; min-height:44px; padding-inline:.75rem; border-radius:999px;
  transition:background .25s, color .25s}
.hl-tel svg{width:16px; height:16px; color:var(--brand); transition:color .25s}
.hl-tel:hover{background:var(--brand-wash); color:var(--brand-text)}
.hl-tel:hover svg{color:var(--accent-text)}
.hl-mobil{display:flex; align-items:center; gap:.55rem}
.tel-ikona{display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
  background:var(--brand); color:#fff; transition:background .25s}
.tel-ikona svg{width:19px; height:19px}
.tel-ikona:hover{background:var(--brand-deep)}
.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:var(--white); border:1px solid var(--line);
  border-radius:13px; cursor:pointer}
.burger i{display:block; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s, opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobil-menu{display:none; border-top:1px solid var(--line); background:var(--paper);
  padding:.75rem var(--gutter) 1.5rem}
.mobil-menu.otevreno{display:block}
.mobil-menu a{display:flex; align-items:center; min-height:52px; font-size:1.05rem;
  font-weight:500; border-bottom:1px solid var(--line-soft)}
.mobil-menu .btn{width:100%; margin-top:1rem}
@media (min-width:67.5em){
  nav.hlavni{display:block}
  .hl-akce{display:flex}
  .hl-mobil{display:none}
  .mobil-menu{display:none !important}
}

/* ═══════════ 7. HERO ═══════════ */
/* background-color = nejtmavší stop gradientu: fallback i nejhorší případ pro kontrast */
.hero{margin-top:calc(-1 * var(--hl-vyska));
  padding-block:calc(var(--hl-vyska) + clamp(1.5rem,3.5vw,3rem)) clamp(1.5rem,2.75vw,2.5rem);
  position:relative; overflow:hidden; background-color:var(--z-50);
  background-image:linear-gradient(168deg,#F6F8F4 0%,var(--z-50) 44%,var(--o-50) 100%)}
.hero::before{content:""; position:absolute; top:-30%; right:-10%; width:52rem; height:52rem;
  background:radial-gradient(circle, rgba(0,214,100,.2), transparent 62%);
  pointer-events:none; z-index:0}
.hero::after{content:""; position:absolute; left:-14%; bottom:-40%; width:40rem; height:40rem;
  background:radial-gradient(circle, rgba(255,92,0,.16), transparent 64%);
  pointer-events:none; z-index:0}
.hero .obal{position:relative; z-index:1}
.hero-text{justify-content:center}
.hero h1{margin-bottom:1.3rem}
.hero .lead{max-width:31rem}
.hero .akce{margin-top:1.8rem}
.hero-foto{min-height:clamp(17rem,50vw,40rem); border-radius:var(--r-xl)}

/* fakta sedí pod obsahem v levém sloupci — jen linka nahoře, žádná karta */
/* šířka podle obsahu, ať linka nad statistikami nejde přes celý sloupec */
.fakta{display:grid; gap:1.1rem; margin-top:3.25rem; padding-top:1.75rem;
  border-top:1px solid var(--line); width:max-content; max-width:100%}
/* sloupce podle obsahu + jediná mezera = rozestupy jsou všude stejné, bez dělicích linek */
@media (min-width:30em){
  .fakta{grid-template-columns:repeat(3,auto); justify-content:start;
    gap:clamp(1.4rem,3.4vw,2.75rem)}
}
.fakt{display:flex; flex-direction:column; gap:.25rem}
.fakt .cislo{font-family:var(--ff-display); font-size:clamp(1.35rem,1.9vw,1.6rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.05; color:var(--brand-text)}
.fakt:nth-child(2) .cislo{color:var(--accent-text)}
.fakt .cislo{display:inline-flex; align-items:center; gap:.3rem}
.fakt-hvezda{width:.78em; height:.78em; color:var(--accent); flex:none}
.fakt .popis{font-size:.83rem; color:var(--ink-70); line-height:1.4; white-space:nowrap}

/* ═══════════ 8. LOGA KLIENTŮ — nekonečný pás ═══════════ */
.loga-pas{margin-top:clamp(2rem,3.5vw,3rem)}
.loga-nadpis{text-align:center; color:var(--ink-muted); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:1.4rem}
/* okraje se vytrácejí maskou, aby loga nekončila uříznutá */
.loga-okno{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* posun přes transform, ne margin — margin by vyvolával reflow */
.loga-drah{display:flex; width:max-content; animation:pasLog 55s linear infinite}
.loga-drah:hover{animation-play-state:paused}
.loga-sada{display:flex; align-items:center; gap:clamp(2.25rem,4.5vw,4rem);
  padding-right:clamp(2.25rem,4.5vw,4rem)}
.loga-sada svg{width:8rem; flex:none; height:auto; color:var(--brand-text);
  opacity:.6; transition:opacity .3s}
.loga-sada svg:hover{opacity:1}
@keyframes pasLog{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ═══════════ 9. RECENZE ═══════════ */
.recenze{display:flex; flex-direction:column; height:100%}
.hvezdy{display:flex; gap:.15rem; margin-bottom:1rem}
.hvezdy svg{width:17px; height:17px; color:var(--accent)}
.recenze blockquote{font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.06rem,1.6vw,1.18rem); line-height:1.42; letter-spacing:-.02em;
  color:var(--ink)}
.recenze figcaption{margin-top:auto; display:flex; align-items:center; gap:.8rem;
  flex-wrap:wrap; position:relative; padding-top:1.35rem}
.recenze figcaption::before{content:""; position:absolute; left:0; right:0; top:0;
  height:1px; background:var(--line-soft)}
.recenze blockquote{margin-bottom:1.5rem}
.avatar{width:42px; height:42px; border-radius:50%; flex:none; display:grid;
  place-items:center; background:var(--brand-wash); color:var(--brand-text);
  font-family:var(--ff-display); font-weight:600; font-size:.95rem; letter-spacing:-.02em}
.recenze .kdo b{display:block; font-size:.95rem; font-weight:600}
.recenze .kdo span{display:block; font-size:.83rem; color:var(--ink-muted); line-height:1.35}

/* ═══════════ 10. POSTUP ═══════════ */
.krok .poradi{font-size:.75rem; letter-spacing:.14em; color:var(--accent-text);
  font-weight:700; margin-bottom:1.6rem; display:block}
.dl--ink .krok .poradi,.krok.dl--ink .poradi{color:var(--accent-svetly)}
.krok h3{font-size:1.14rem; margin-bottom:.45rem}
.krok p{font-size:.92rem}

/* ═══════════ 11. CENÍK ═══════════ */
.tarif.doporuceno{border-color:var(--brand); border-width:2px}
.znacka{position:absolute; top:1.1rem; right:1.1rem; background:var(--brand); color:#fff;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding:.32rem .7rem; border-radius:999px}
.tarif .pro{font-size:.88rem; color:var(--ink-muted); margin-top:.15rem}
.cena{display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; padding-block:1.25rem}
.cena b{font-family:var(--ff-display); font-size:clamp(1.95rem,3.6vw,2.5rem); font-weight:600;
  line-height:1; letter-spacing:-.035em}
.cena i{font-style:normal; font-size:.86rem; color:var(--ink-muted)}

.tarif .btn{margin-top:1.4rem; width:100%}
/* šířku dává mřížka (s5), ne max-width v ch */
.cenik-pozn{font-size:.88rem; color:var(--ink-70); line-height:1.6}

/* ═══════════ 12. O NÁS ═══════════ */
.citace{font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.4rem,2.6vw,1.95rem); line-height:1.24; letter-spacing:-.028em;
  color:var(--ink); margin-bottom:1.3rem}
.onas-text p{max-width:38rem}
.podpis{margin-top:auto; padding-top:1.4rem; border-top:1px solid var(--line)}
.onas-text > p:last-of-type{margin-bottom:1.5rem}
.podpis b{font-family:var(--ff-display); font-size:1.2rem; font-weight:600;
  letter-spacing:-.02em; display:block}
.podpis span{font-size:.86rem; color:var(--ink-muted)}

/* ═══════════ 13. FAQ ═══════════ */
.faq-polozka{border-bottom:1px solid var(--line)}
.faq-polozka:last-child{border-bottom:0}
.faq-tlacitko{width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem; padding:1.25rem 0; min-height:58px; background:none; border:0; cursor:pointer;
  text-align:left; font-family:var(--ff-display); font-size:clamp(1.06rem,1.6vw,1.2rem);
  font-weight:600; line-height:1.25; letter-spacing:-.02em; color:var(--ink)}
.faq-plus{flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; position:relative;
  transition:background .3s, border-color .3s, transform .3s}
.faq-plus::before,.faq-plus::after{content:""; position:absolute; background:var(--ink);
  border-radius:2px; transition:transform .3s, background .3s}
.faq-plus::before{width:11px; height:1.5px}
.faq-plus::after{width:1.5px; height:11px}
.faq-tlacitko[aria-expanded="true"] .faq-plus{background:var(--brand); border-color:var(--brand);
  transform:rotate(180deg)}
.faq-tlacitko[aria-expanded="true"] .faq-plus::before{background:#fff}
.faq-tlacitko[aria-expanded="true"] .faq-plus::after{transform:scaleY(0); background:#fff}
/* vědomá výjimka z „animuj jen transform/opacity“: auto-výška nemá transform ekvivalent */
.faq-obsah{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.faq-obsah > div{overflow:hidden}
.faq-polozka.otevreno .faq-obsah{grid-template-rows:1fr}
.faq-obsah p{padding-bottom:1.25rem; max-width:66ch; font-size:.95rem}

/* ═══════════ 14. KONTAKT A FORMULÁŘ ═══════════ */
/* linka mezi řádky, ne pod posledním — „:last-of-type“ tu selhalo, protože
   posledním <div> v kartě jsou fakturační údaje, ne poslední kontaktní řádek */
.kontakt-radek{display:flex; gap:.9rem; padding:.85rem 0}
.kontakt-radek + .kontakt-radek{border-top:1px solid var(--line-soft)}
.kontakt-radek svg{width:18px; height:18px; color:var(--brand); flex:none; margin-top:.25rem}
.kontakt-radek .label{display:block; color:var(--ink-muted); margin-bottom:.1rem}
.kontakt-radek a,.kontakt-radek strong{font-weight:600; font-size:1rem; color:var(--ink);
  display:inline-flex; align-items:center}
/* odkaz drží 44px klikací cíl, záporný margin ho opticky srovná s prostým textem;
   řádek si o ty pixely zvětší padding, jinak by se mezera nad linkou lišila od ostatních */
.kontakt-radek a{min-height:44px; margin-block:-10px}
.kontakt-radek:has(a){padding-block:calc(.85rem + 10px)}
.kontakt-radek a:hover{color:var(--brand-text)}
/* margin 0 → nad linkou je jen padding posledního řádku, stejně jako mezi kontakty */
.udaje{margin-top:0; padding-top:.85rem; border-top:1px solid var(--line-soft)}
.udaje .label{display:block; color:var(--ink-muted); margin-bottom:.5rem}
.udaje p{font-size:.84rem; color:var(--ink-muted); line-height:1.75}
.mapa{position:relative; border-radius:var(--r-xl); overflow:hidden; border:0; min-height:26rem;
  background:var(--brand-wash)}
.mapa iframe{width:100%; height:100%; min-height:26rem; border:0; display:block}
/* záložní cesta k adrese, kdyby embed neprošel (blokované cookies třetích stran) */
.mapa-odkaz{position:absolute; left:1rem; top:1rem; z-index:2;
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1.1rem;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:.88rem; font-weight:600; color:var(--brand-text); text-decoration:none;
  transition:transform .15s ease-out, background-color .15s ease-out}
.mapa-odkaz:hover{background:var(--brand-wash); transform:translateY(-2px)}

form .pole{margin-bottom:1rem}
.pole label{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:600; margin-bottom:.4rem}
.pole input,.pole select,.pole textarea{width:100%; padding:.85rem 1rem; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--paper); font-size:.96rem; min-height:52px;
  transition:border-color .25s, background .25s, box-shadow .25s}
.pole input::placeholder,.pole textarea::placeholder{color:var(--ink-muted)}
.pole input:hover,.pole select:hover,.pole textarea:hover{border-color:var(--line-strong)}
/* jen okraj a prstenec — „background“ jako shorthand mazal background-image, tedy chevron */
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:none;
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,135,74,.2)}
.pole textarea{min-height:130px; resize:vertical; line-height:1.55}
.pole select{appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.8rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017A43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:18px}
.pole.chyba input,.pole.chyba select,.pole.chyba textarea{border-color:#B03014; background:#FDF1EE}
.pole-dvojice{display:grid; gap:0}
@media (min-width:35em){ .pole-dvojice{grid-template-columns:1fr 1fr; gap:0 1rem} }

.souhlas{display:flex; gap:.8rem; align-items:flex-start; font-size:.88rem;
  color:var(--ink-70); line-height:1.5; margin-bottom:1.25rem; padding-block:.35rem; cursor:pointer}
.souhlas input{appearance:none; -webkit-appearance:none; flex:none;
  width:24px; height:24px; margin:0; border:1.5px solid var(--line-strong);
  border-radius:7px; background:var(--white); cursor:pointer; position:relative;
  display:grid; place-items:center; transition:background .2s, border-color .2s}
.souhlas input::after{content:""; width:6px; height:11px; border:solid #fff;
  border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0); margin-top:-2px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.souhlas input:hover{border-color:var(--brand)}
.souhlas input:checked{background:var(--brand); border-color:var(--brand)}
.souhlas input:checked::after{transform:rotate(45deg) scale(1)}
.souhlas.chyba input{border-color:#B03014}
.souhlas a{text-decoration:underline; text-underline-offset:3px}
.medovnik{position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden}
.form-zprava{display:none; padding:1rem 1.15rem; border-radius:var(--r); font-size:.92rem;
  margin-top:1rem; line-height:1.5}
.form-zprava.err{display:block; background:#FDF1EE; color:#962E10}
/* potvrzení po odeslání — vycentrované v kartě, ne tenký proužek nahoře */
#formular{display:flex; flex-direction:column; height:100%}
.form-zprava.hotovo{display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1rem; margin:auto 0; padding-block:clamp(1.5rem,4vw,3rem); background:transparent}
.fajfka{width:64px; height:64px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; flex:none}
.fajfka svg{width:30px; height:30px}
.form-zprava.hotovo strong{font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.25rem,2vw,1.55rem); letter-spacing:-.025em; color:var(--ink); line-height:1.15}
.form-zprava.hotovo span{font-size:.95rem; color:var(--ink-70); max-width:32ch; line-height:1.55}

/* ═══════════ 15. PATIČKA ═══════════ */
footer{background-color:var(--ink); color:rgba(241,251,245,.82); margin-top:clamp(1rem,2vw,2rem)}
.pat-obal{padding-block:3rem 1.75rem}
.pat-mrizka{display:grid; gap:2rem; padding-bottom:2rem; border-bottom:1px solid var(--line-tmava)}
@media (min-width:50em){ .pat-mrizka{grid-template-columns:1.5fr 1fr 1fr} }
footer .logo{color:#F1FBF5; margin-bottom:.9rem}
footer h4{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(241,251,245,.78); font-weight:600; margin:0 0 .6rem}
footer ul{display:grid; gap:0}
footer li{display:flex; align-items:center; min-height:44px; font-size:.92rem}
footer li a{transition:color .2s; display:flex; align-items:center; align-self:stretch;
  min-width:44px}   /* krátká slova („Ceník“) jinak nedají 44px na šířku */
/* 44px je mobilní minimum; na desktopu stačí 24px, tak ať to není tak rozvolněné */
@media (min-width:60em){ footer li{min-height:30px} }
footer li a:hover{color:#fff}
footer p{font-size:.9rem; max-width:26rem; color:rgba(241,251,245,.82)}
.pat-spodek{display:flex; flex-wrap:wrap; gap:.85rem 1.5rem; align-items:center;
  justify-content:space-between; padding-top:1.5rem; font-size:.82rem;
  color:rgba(241,251,245,.78)}
.pat-odkazy{display:flex; flex-wrap:wrap; gap:0 1.5rem; justify-content:center}
.pat-odkazy a{display:inline-flex; align-items:center; min-height:44px}
@media (min-width:60em){ .pat-odkazy a{min-height:30px} }
.pat-spodek a{text-decoration:underline; text-underline-offset:4px}
.pat-spodek a:hover{color:#fff}

/* ═══════════ 16. ANIMACE ═══════════ */
.odkryt{opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 55ms)}
.odkryt.viditelne{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .odkryt{opacity:1; transform:none}
  .zvyraznit::after{transform:scaleX(1)}
}

/* ═══════════ 17. TEXTOVÉ PODSTRÁNKY ═══════════ */
.obsah{max-width:44rem; padding-block:clamp(2.5rem,5vw,4rem)}
.obsah + *{clear:both}
.obsah h1{margin-bottom:1.5rem}
.obsah h2{font-size:clamp(1.35rem,2.4vw,1.7rem); margin-top:2.75rem; margin-bottom:.75rem}
.obsah p,.obsah ul{margin-bottom:1rem; line-height:1.75; max-width:66ch}
.obsah ul{padding-left:1.2rem; list-style:disc}
.obsah li{margin-bottom:.45rem; color:var(--ink-70)}
.obsah a{color:var(--brand-text); text-decoration:underline; text-underline-offset:3px}
.obsah table{width:100%; border-collapse:collapse; margin-bottom:1.5rem; font-size:.92rem}
.obsah th,.obsah td{text-align:left; padding:.75rem .5rem;
  border-bottom:1px solid var(--line-soft); color:var(--ink-70); vertical-align:top}
.obsah th{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:600}
.poznamka{background:var(--brand-wash); border-radius:var(--r); padding:1.15rem 1.35rem;
  font-size:.92rem; color:var(--ink-70); margin-bottom:2rem; line-height:1.65}
.poznamka strong{color:var(--ink)}
.aktualizace{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line-soft);
  font-size:.86rem; color:var(--ink-muted)}
/* na textových stránkách není za hlavičkou hero, takže má podklad vždy */
body.podstranka header{background:rgba(246,248,244,.96);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line)}
body.podstranka main{padding-top:1rem}