/* ==========================================================================
   ÚKLIDXXL s.r.o. — redesign
   Jeden CSS soubor, žádný framework, žádný ikonový font.
   Pro srovnání: původní web načítal 39 CSS souborů + 557 KB ikonový font.
   ========================================================================== */

/* ---------- Tokeny ---------- */
:root{
  --ink:        #0d1b24;
  --ink-2:      #46606f;
  --ink-3:      #6b8494;

  --brand:      #0a76b0;   /* tmavší odstín původní #58B1DB kvůli kontrastu AA */
  --brand-dk:   #075a86;
  --brand-lt:   #58b1db;
  --tint:       #eaf5fb;
  --tint-2:     #f4fafd;

  --ok:         #0f8a5f;
  --star:       #f0a028;

  --bg:         #ffffff;
  --bg-alt:     #f6f9fb;
  --line:       #dde8ee;
  --line-2:     #eef4f7;

  --dark:       #0b2430;
  --dark-2:     #123243;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --sh-sm: 0 1px 2px rgba(13,27,36,.06), 0 2px 8px rgba(13,27,36,.04);
  --sh:    0 2px 6px rgba(13,27,36,.06), 0 12px 28px rgba(13,27,36,.08);
  --sh-lg: 0 8px 20px rgba(13,27,36,.10), 0 24px 60px rgba(13,27,36,.12);

  --wrap: 1180px;
  --gut:  clamp(18px, 4vw, 40px);

  /* Systémové fonty = nula síťových požadavků na písmo */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration-thickness:1px; text-underline-offset:3px; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.15; letter-spacing:-.02em; font-weight:700; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:3px solid var(--brand-lt);
  outline-offset:2px;
  border-radius:4px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:820px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* Ikony — inline SVG, jednotný tah */
.i{
  width:1.05em; height:1.05em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.15em;
}

/* ---------- Tlačítka ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.72em 1.35em;
  border-radius:100px;
  font-weight:650; font-size:.98rem; line-height:1.2;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.btn--lg{ padding:.95em 1.7em; font-size:1.04rem; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(10,118,176,.28); }
.btn--primary:hover{ background:var(--brand-dk); transform:translateY(-2px); box-shadow:0 8px 22px rgba(10,118,176,.34); }
.btn--ghost{ background:#fff; color:var(--brand-dk); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand-lt); background:var(--tint-2); transform:translateY(-2px); }
.btn--white{ background:#fff; color:var(--brand-dk); }
.btn--white:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.btn--outlineWhite{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--outlineWhite:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

/* ---------- Topbar ---------- */
.topbar{
  background:var(--dark); color:#c9dde8;
  font-size:.875rem;
}
.topbar__in{ display:flex; flex-wrap:wrap; gap:.4em 1.6em; align-items:center; justify-content:space-between; min-height:42px; padding-block:6px; }
.topbar p{ margin:0; }
.topbar__hours{ display:inline-flex; align-items:center; gap:.5em; }
.topbar__hours strong{ color:#fff; font-weight:600; }
.topbar__links{ display:flex; gap:1.4em; align-items:center; }
.topbar a{ color:#c9dde8; text-decoration:none; display:inline-flex; align-items:center; gap:.5em; }
.topbar a:hover{ color:#fff; text-decoration:underline; }
.topbar__tel{ font-weight:650; color:#fff !important; }
@media (max-width:640px){
  .topbar__hours{ width:100%; justify-content:center; }
  .topbar__in{ justify-content:center; }
  .topbar__links{ width:100%; justify-content:center; gap:1.1em; }
}

/* ---------- Hlavička ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.hdr.is-stuck{ box-shadow:var(--sh-sm); border-bottom-color:var(--line-2); }
.hdr__in{ display:flex; align-items:center; gap:1.5rem; min-height:104px; }
.logo{ flex:none; display:block; }
.logo img{ width:auto; height:84px; }
@media (max-width:1000px){
  .hdr__in{ min-height:88px; }
  .logo img{ height:68px; }
}
@media (max-width:480px){
  .hdr__in{ min-height:76px; }
  .logo img{ height:58px; }
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:1.5rem; }
.nav__list{ display:flex; align-items:center; gap:.3rem; }
.nav__item > a{
  position:relative; display:flex; align-items:center; gap:.42em;
  padding:.68em 1.05em; border-radius:11px;
  color:var(--ink); font-weight:650; font-size:1.02rem; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.nav__item > a:hover{ background:var(--tint); color:var(--brand-dk); }

/* Proužek rostoucí zprostřed — jasný signál, na čem kurzor stojí */
.nav__item > a::before{
  content:""; position:absolute; left:50%; right:50%; bottom:.3em; height:3px;
  background:var(--brand); border-radius:3px;
  transition:left .24s cubic-bezier(.4,0,.2,1), right .24s cubic-bezier(.4,0,.2,1);
}
.nav__item > a:hover::before{ left:1.05em; right:1.05em; }

/* Aktuální stránka je vidět i bez najetí */
.nav__item > a[aria-current]{ color:var(--brand-dk); }
.nav__item > a[aria-current]::before{ left:1.05em; right:1.05em; opacity:.45; }

/* Šipka u položky s rozbalovací nabídkou (bez zásahu do HTML) */
.nav__item--has > a::after{
  content:""; width:.46em; height:.46em; flex:none;
  border-right:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s ease;
  opacity:.65;
}

/* Otevřená nabídka = plná modrá, aby bylo bez pochyb, co je rozbalené */
.nav__item--has:hover > a,
.nav__item--has:focus-within > a{
  background:var(--brand); color:#fff;
  box-shadow:0 4px 14px rgba(10,118,176,.3);
}
.nav__item--has:hover > a::after,
.nav__item--has:focus-within > a::after{
  transform:translateY(1px) rotate(225deg); opacity:1;
}
.nav__item--has:hover > a::before,
.nav__item--has:focus-within > a::before{ opacity:0; }

.nav__item--has{ position:relative; }

/* Neviditelný můstek přes mezeru mezi odkazem a rozbalenou nabídkou.
   Bez něj kurzor cestou dolů na okamžik ztratil :hover a menu blikalo.
   Je součástí <li>, takže hover drží spojitě po celé cestě. */
.nav__item--has::after{
  content:""; position:absolute;
  left:0; right:0; top:100%; height:10px;
}

.nav__sub{
  position:absolute; top:calc(100% + 8px); left:0; min-width:296px;
  background:#fff;
  border:1px solid var(--line-2);
  border-top:3px solid var(--brand);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(13,27,36,.13), 0 30px 70px rgba(13,27,36,.14);
  padding:.55rem;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transform-origin:top left;
  transition:opacity .2s ease, transform .2s cubic-bezier(.4,0,.2,1), visibility .2s;
}
.nav__item--has:hover .nav__sub,
.nav__item--has:focus-within .nav__sub{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}

.nav__sub a{
  position:relative; display:flex; align-items:center;
  padding:.78em 2.2em .78em 1em; border-radius:10px;
  color:var(--ink); text-decoration:none;
  font-size:1rem; font-weight:600; letter-spacing:-.01em;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}

/* Barevný proužek vlevo — vyjede při najetí */
.nav__sub a::before{
  content:""; position:absolute; left:.45em; top:50%;
  width:3px; height:0; margin-top:0;
  background:var(--brand); border-radius:3px;
  transition:height .18s ease, margin-top .18s ease;
}
/* Šipka vpravo */
.nav__sub a::after{
  content:""; position:absolute; right:1em; top:50%;
  width:.42em; height:.42em; margin-top:-.28em;
  border-right:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  transform:rotate(-45deg) translateX(-5px); opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}

.nav__sub a:hover{
  background:var(--tint); color:var(--brand-dk); transform:translateX(3px);
}
.nav__sub a:hover::before{ height:1.5em; margin-top:-.75em; }
.nav__sub a:hover::after{ opacity:1; transform:rotate(-45deg) translateX(0); }

.nav__sub a[aria-current]{ background:var(--tint-2); color:var(--brand-dk); }
.nav__sub a[aria-current]::before{ height:1.5em; margin-top:-.75em; opacity:.5; }

/* Oddělení poslední položky „Všechny služby“ */
.nav__sub li:last-child{ margin-top:.3rem; padding-top:.4rem; border-top:1px solid var(--line-2); }
.nav__sub li:last-child a{ color:var(--brand); }

.burger{
  display:none; margin-left:auto;
  /* position+z-index je nutnost: .nav je fixed, a polohované prvky se kreslí
     nad nepolohovanými bez ohledu na pořadí v DOM. Bez toho zásuvka překryje
     tlačítko a menu nejde zavřít. */
  position:relative; z-index:3;
  width:48px; height:48px; padding:12px 11px;
  background:var(--tint); border:0; border-radius:12px; cursor:pointer;
  flex-direction:column; justify-content:space-between;
  transition:background .16s ease;
}
.burger:hover{ background:#dceefa; }
.nav__toggle{ display:none; }   /* na desktopu se rozbaluje najetím myší */
.burger[aria-expanded="true"]{ background:var(--brand); }
.burger[aria-expanded="true"] span{ background:#fff; }

/* Ztmavené pozadí za vysunutou zásuvkou. Vytváří ho app.js,
   aby nebylo nutné sahat do všech 14 HTML souborů. */
.navmask{
  position:fixed; inset:0; z-index:96;
  background:rgba(11,36,48,.55);
  opacity:0; visibility:hidden;
  transition:opacity .26s ease, visibility .26s;
  border:0; padding:0; margin:0;
  /* zabrání posouvání stránky pod zásuvkou, aniž by se musel
     zamykat scroll dokumentu (to rozbíjí sticky hlavičku) */
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent;
}
.navmask.is-on{ opacity:1; visibility:visible; }
@media (min-width:1001px){ .navmask{ display:none; } }
.burger span{ display:block; height:2.5px; background:var(--brand-dk); border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

@media (max-width:1000px){
  /* ZÁSADNÍ: backdrop-filter dělá z hlavičky containing block pro potomky
     s position:fixed (stejně jako transform nebo filter). Zásuvka se pak
     nepozicuje vůči obrazovce, ale vůči hlavičce — a scvrkne se na její
     výšku, takže z menu byl vidět jen bílý pruh s jedinou položkou.
     Na mobilu proto blur pryč a plné bílé pozadí. */
  .hdr{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; }

  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto; z-index:2;
    width:min(370px,88vw);
    background:#fff; box-shadow:var(--sh-lg);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:1rem; margin:0;
    /* nahoře místo pro tlačítko, dole pro lištu s hovorem a gesta systému */
    padding:calc(84px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
    transform:translateX(100%);
    /* visibility patří do transition, jinak by zásuvka při zavírání
       zmizela skokem místo vysunutí */
    transition:transform .26s ease, visibility .26s;
    overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden;
  }
  .nav.is-open{ transform:translateX(0); visibility:visible; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav__item > a{ padding:.85em .9em; font-size:1.08rem; }
  .nav__item--has::after{ display:none; }   /* můstek je jen pro rozbalování myší */

  /* Rozbalovací efekty jsou pro myš. V zásuvce je seznam rozbalený
     napevno, takže plná modrá ani otáčení šipky nedávají smysl. */
  .nav__item > a::before{ display:none; }
  .nav__item--has > a::after{ transform:translateY(-2px) rotate(45deg); opacity:.4; }
  .nav__item--has:hover > a,
  .nav__item--has:focus-within > a{
    background:transparent; color:var(--ink); box-shadow:none;
  }
  .nav__item--has:hover > a::after,
  .nav__item--has:focus-within > a::after{
    transform:translateY(-2px) rotate(45deg); opacity:.4;
  }
  .nav__item > a:hover{ background:var(--tint); color:var(--brand-dk); }

  /* Šipka u "Služby" je na mobilu skutečné tlačítko (vytváří ho app.js),
     protože nakreslená v CSS propouštěla klepnutí na odkaz pod sebou. */
  .nav__item--has > a{ padding-right:3.6em; }
  .nav__item--has > a::after{ display:none; }
  .nav__toggle{
    display:grid; place-items:center;
    position:absolute; right:.2rem; top:5px;
    width:46px; height:46px; padding:0;
    background:transparent; border:0; border-radius:11px; cursor:pointer;
    transition:background .16s ease;
  }
  .nav__toggle span{
    width:10px; height:10px;
    border-right:2.4px solid var(--brand); border-bottom:2.4px solid var(--brand);
    transform:translateY(-3px) rotate(45deg);
    transition:transform .22s ease;
  }
  .nav__toggle[aria-expanded="true"]{ background:var(--tint); }
  .nav__toggle[aria-expanded="true"] span{ transform:translateY(2px) rotate(225deg); }

  .nav__sub{
    display:none;
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-left:2px solid var(--brand-lt);
    border-radius:0; margin:.15rem 0 .5rem .95rem; padding:0 0 0 .55rem;
    min-width:0;
  }
  .nav__item--has.is-expanded > .nav__sub{ display:block; }
  .nav__sub a{ padding:.54em .85em; font-size:.98rem; font-weight:550; color:var(--ink-2); }
  .nav__sub a::after{ display:none; }
  .nav__sub a::before{ display:none; }
  .nav__sub a:hover{ transform:none; }
  .nav__sub li:last-child{ border-top-color:var(--line-2); }

  /* Zásuvka: oddělit navigaci od výzvy k akci a přisadit ji dolů */
  .nav{ gap:0; }
  .nav__list{ gap:.05rem; }
  .hdr__cta{
    width:100%; margin-top:1rem; padding-block:.95em; font-size:1.05rem;
  }
  /* kontakt přímo v zásuvce – nejrychlejší cesta k telefonu */
  .nav::after{
    content:"Po–Ne 7:30–20:00 · +420 733 303 049";
    display:block; margin-top:.85rem; padding-top:.85rem;
    border-top:1px solid var(--line-2);
    font-size:.85rem; color:var(--ink-3); text-align:center; line-height:1.5;
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px, 7vw, 84px) clamp(52px, 7vw, 90px);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--tint) 0%, transparent 58%),
    linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
}
.hero__in{
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  background:#fff; border:1px solid var(--line);
  color:var(--brand-dk); font-size:.86rem; font-weight:600;
  padding:.45em 1em; border-radius:100px; margin:0 0 1.1rem;
  box-shadow:var(--sh-sm);
}
.eyebrow .i{ fill:var(--star); stroke:none; }

.hero h1{
  font-size:clamp(2.5rem, 6.2vw, 4.15rem);
  line-height:1.03; letter-spacing:-.035em; margin-bottom:.42em;
}
.hl{ color:var(--brand); position:relative; white-space:nowrap; }
.hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.2em;
  background:var(--brand-lt); opacity:.28; border-radius:3px; z-index:-1;
}
.hero__lead{ font-size:clamp(1.05rem,1.9vw,1.19rem); color:var(--ink-2); max-width:53ch; margin-bottom:1.9rem; }
.hero__lead strong{ color:var(--ink); font-weight:650; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.6rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; }
.chips li{ display:inline-flex; align-items:center; gap:.45em; font-size:.92rem; color:var(--ink-2); font-weight:550; }
.chips .i{ color:var(--ok); stroke-width:2.6; }

.hero__proofnote{
  text-align:center; font-size:.87rem; color:var(--ink-3);
  margin:.85rem 0 0;
}

/* ---------- Posuvník před / po ---------- */
.ba{
  position:relative; margin:0;
  aspect-ratio:6/5; overflow:hidden;
  border-radius:var(--r-lg); background:var(--line-2);
  box-shadow:var(--sh);
  isolation:isolate;
  touch-action:pan-y;
}
.ba--hero{ box-shadow:var(--sh-lg); }
.ba__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
.ba__img--after{
  /* Řez ovládaný proměnnou --pos, kterou přepisuje JS */
  clip-path:inset(0 0 0 var(--pos));
}
.ba__line{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:3px; margin-left:-1.5px; background:#fff;
  box-shadow:0 0 0 1px rgba(13,27,36,.14);
  pointer-events:none;
  display:grid; place-items:center;
}
.ba__grip{
  width:42px; height:42px; border-radius:50%;
  background:#fff; box-shadow:var(--sh);
  display:grid; place-items:center;
}
.ba__grip::before{
  content:"‹ ›"; font-size:15px; letter-spacing:2px;
  color:var(--brand-dk); font-weight:700; line-height:1;
}
.ba__tag{
  position:absolute; top:14px; z-index:2;
  padding:.34em .8em; border-radius:100px;
  font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.ba__tag--b{ left:14px; background:rgba(13,27,36,.62); color:#fff; }
.ba__tag--a{ right:14px; background:rgba(15,138,95,.86); color:#fff; }
/* Input zůstává kvůli klávesnici a čtečkám, ukazovátko na něj ale nesmí —
   táhnutí obsluhuje app.js přes Pointer Events. Nativní range se na dotyku
   posouvá jen při chycení přesně za jezdec, což na telefonu nešlo trefit. */
.ba__range{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; z-index:3;
  pointer-events:none;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.ba__range:focus-visible{
  outline:3px solid var(--brand); outline-offset:3px; border-radius:var(--r-lg);
  opacity:1; background:transparent;
}
.ba{ cursor:ew-resize; }
.ba.is-dragging{ cursor:grabbing; }
.ba.is-dragging .ba__img--after,
.ba.is-dragging .ba__line{ transition:none; }
.ba.is-dragging .ba__grip{ transform:scale(1.08); }
.ba__grip{ transition:transform .14s ease; }
.ba__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.4rem .95rem .8rem;
  background:linear-gradient(transparent, rgba(11,36,48,.82));
  color:#fff; font-size:.9rem; font-weight:600;
  pointer-events:none;
}

.bagrid{
  display:grid; gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
}

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__proof{ max-width:560px; width:100%; margin-inline:auto; }
}

/* ---------- Pás čísel ---------- */
.stats{ background:var(--dark); color:#fff; }
.stats__in{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; padding-block:clamp(26px,3.4vw,38px); text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:.15rem; }
.stat + .stat{ border-left:1px solid rgba(255,255,255,.13); }
.stat__n{ font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:750; letter-spacing:-.03em; color:var(--brand-lt); line-height:1.1; }
.stat__l{ font-size:.88rem; color:#a9c4d2; }
@media (max-width:640px){
  .stats__in{ grid-template-columns:repeat(2,1fr); gap:1.4rem .8rem; }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(3){ border-left:0; }
}

/* ---------- Sekce ---------- */
.sec{ padding-block:clamp(56px, 7.5vw, 96px); }
.sec--tint{ background:var(--bg-alt); }
.sec--dark{ background:var(--dark); color:#dbe9f1; }
.sec--dark h3{ color:#fff; }

.sec__head{ max-width:64ch; margin:0 auto clamp(32px,4vw,54px); text-align:center; }
.sec__head h2{ font-size:clamp(1.85rem,4vw,2.7rem); }
.sec__head--onDark h2{ color:#fff; }
.sec__lead{ font-size:1.06rem; color:var(--ink-2); margin:0; }
.sec--dark .sec__lead{ color:#a9c4d2; }

/* ---------- Karty služeb ---------- */
.cards{ display:grid; gap:clamp(18px,2.5vw,28px); grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--line); }
.card__media{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--tint); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .card__media img{ transform:scale(1.05); }
.card__body{ padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.card__title{ font-size:1.32rem; margin-bottom:.45em; }
.card__title a{ color:var(--ink); text-decoration:none; }
/* Celá karta klikatelná, ale v DOM zůstává jediný smysluplný odkaz */
.card__title a::after{ content:""; position:absolute; inset:0; }
.card{ position:relative; }
.card__title a:hover{ color:var(--brand); }
.card__body > p{ color:var(--ink-2); font-size:.98rem; }

.ticks{ margin:.3rem 0 1.3rem; display:grid; gap:.42rem; }
.ticks li{ position:relative; padding-left:1.6em; font-size:.94rem; color:var(--ink-2); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:.85em; height:.45em; border-left:2.4px solid var(--ok); border-bottom:2.4px solid var(--ok);
  transform:rotate(-45deg);
}
.card__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:.45em;
  color:var(--brand); font-weight:650; font-size:.96rem;
}
.card:hover .card__more .i{ transform:translateX(4px); }
.card__more .i{ transition:transform .2s ease; }

/* ---------- Doplňkové služby ---------- */
.extras{ margin-top:clamp(30px,4vw,48px); text-align:center; }
.extras__label{ font-size:.92rem; color:var(--ink-3); margin-bottom:.9rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.extras__list{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.extras__list a{
  display:inline-block; padding:.5em 1.1em;
  background:#fff; border:1px solid var(--line); border-radius:100px;
  color:var(--ink-2); font-size:.93rem; font-weight:550; text-decoration:none;
  transition:all .16s ease;
}
.extras__list a:hover{ border-color:var(--brand-lt); background:var(--tint); color:var(--brand-dk); }

/* ---------- Kroky ---------- */
.steps{
  display:grid; gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  counter-reset:step;
}
.step{
  position:relative; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:1.7rem 1.5rem 1.5rem;
  box-shadow:var(--sh-sm);
}
.step__n{
  display:inline-grid; place-items:center;
  width:46px; height:46px; margin-bottom:1rem;
  background:var(--tint); color:var(--brand-dk);
  border-radius:14px; font-weight:750; font-size:1.02rem;
  letter-spacing:-.02em;
}
.step__t{ font-size:1.16rem; margin-bottom:.4em; }
.step p{ margin:0; color:var(--ink-2); font-size:.96rem; }

/* ---------- Proč my ---------- */
.feats{
  display:grid; gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.feat__i{
  width:38px; height:38px; margin-bottom:.95rem;
  fill:none; stroke:var(--brand-lt); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.feat h3{ font-size:1.14rem; margin-bottom:.4em; }
.feat p{ margin:0; color:#a9c4d2; font-size:.96rem; }

.compare{
  margin-top:clamp(38px,5vw,58px);
  background:var(--dark-2); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:clamp(24px,3.4vw,38px);
}
.compare__label{ font-weight:650; color:#fff; margin-bottom:1.1rem; font-size:1.03rem; }
.compare__list{ display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.compare__list li{ position:relative; padding-left:1.9em; color:#a9c4d2; font-size:.95rem; }
.compare__list li::before{
  content:"✕"; position:absolute; left:0; top:0;
  color:#e2725b; font-weight:700; font-size:.95em;
}
.compare__list strong{ color:#fff; font-weight:600; }

/* ---------- Recenze ---------- */
.revs{ display:grid; gap:clamp(16px,2.4vw,24px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.rev{
  margin:0; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:1.6rem 1.5rem; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column;
}
.rev__stars{ color:var(--star); letter-spacing:.12em; font-size:1.02rem; margin-bottom:.7rem; }
.rev p{ color:var(--ink-2); font-size:.97rem; flex:1; }
.rev footer{ margin-top:.6rem; padding-top:.85rem; border-top:1px solid var(--line-2); }
.rev cite{ font-style:normal; font-weight:650; color:var(--ink); font-size:.95rem; }
.revs__more{ text-align:center; margin:clamp(28px,3.5vw,40px) 0 0; }

/* ---------- CTA pás ---------- */
.cta{
  background:linear-gradient(135deg, var(--brand-dk) 0%, var(--brand) 55%, #128fcd 100%);
  color:#fff;
}
.cta__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(22px,4vw,48px);
  padding-block:clamp(40px,5.5vw,66px);
}
.cta__t{ font-size:clamp(1.65rem,3.5vw,2.35rem); color:#fff; margin-bottom:.3em; }
.cta__p{ margin:0; color:#dbeefa; font-size:1.05rem; max-width:52ch; }
.cta__slogan{ display:block; margin-top:.5em; font-weight:700; color:#fff; letter-spacing:.01em; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.7rem; }
.faq__i{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease;
}
.faq__i[open]{ border-color:var(--brand-lt); box-shadow:var(--sh-sm); }
.faq__i summary{
  cursor:pointer; list-style:none;
  padding:1.05rem 3.2rem 1.05rem 1.3rem;
  font-weight:650; font-size:1.03rem; color:var(--ink);
  position:relative;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::after{
  content:""; position:absolute; right:1.3rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.4px solid var(--brand); border-bottom:2.4px solid var(--brand);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq__i[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq__i summary:hover{ color:var(--brand-dk); }
.faq__a{ padding:0 1.3rem 1.2rem; }
.faq__a p{ margin:0; color:var(--ink-2); font-size:.99rem; }

/* ---------- Formulář ---------- */
.form__wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4.5vw,60px); align-items:start; }
@media (max-width:900px){ .form__wrap{ grid-template-columns:1fr; } }

.form__side h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.form__side > p{ color:var(--ink-2); margin-bottom:1.8rem; }
.form__contacts{ display:grid; gap:1.1rem; }
.form__contacts li{ display:flex; gap:.9rem; align-items:flex-start; }
.form__contacts .i{ width:22px; height:22px; color:var(--brand); margin-top:.15em; }
.form__contacts span{ display:block; }
.form__lab{ display:block; font-size:.82rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.form__contacts a{ font-weight:650; text-decoration:none; }
.form__contacts a:hover{ text-decoration:underline; }

.form{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px); box-shadow:var(--sh);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.15rem; border:0; padding:0; }
.field label, .field legend{
  display:block; margin-bottom:.4rem;
  font-weight:600; font-size:.93rem; color:var(--ink);
}
.req{ color:#c0392b; }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field textarea{
  width:100%; padding:.78em .95em;
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--tint-2); border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field input:hover, .field textarea:hover{ border-color:#c3d8e3; }
.field input:focus, .field textarea:focus{
  outline:none; background:#fff; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(10,118,176,.14);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:#c0392b; background:#fdf3f2;
}
.err{ margin:.35rem 0 0; font-size:.86rem; color:#c0392b; font-weight:550; min-height:0; }
.err:empty{ display:none; }

.checks{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.35rem 1.2rem; margin-top:.35rem;
}

/* Pozor na specificitu: `.field label` má 0-2-0 a přebilo by samotné `.check`
   (0-1-0), takže by se display:flex vůbec neuplatnil a odškrtávátko by se
   slepilo s textem. Proto `.field label.check` = 0-3-0. */
.field label.check{
  display:flex; align-items:flex-start; gap:.7em;
  margin:0; padding:.35em .4em .35em 0;
  font-weight:450; font-size:.95rem; line-height:1.45;
  color:var(--ink-2); cursor:pointer;
  border-radius:var(--r-sm);
  transition:color .14s ease;
}
.field label.check:hover{ color:var(--ink); }

.field label.check input[type=checkbox]{
  width:20px; height:20px; flex:none;
  /* zarovná čtvereček na střed prvního řádku textu:
     (výška řádku 1.45em − 20px) / 2 */
  margin:calc((1.45em - 20px) / 2) 0 0;
  accent-color:var(--brand);
  cursor:pointer;
}

.field label.check--gdpr{
  align-items:flex-start;
  background:var(--tint-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.9em 1.1em;
  color:var(--ink);
}
.field label.check--gdpr:has(input[aria-invalid="true"]){
  border-color:#c0392b; background:#fdf3f2;
}

/* Skupina zaškrtávátek nemá vypadat jako povinné pole */
.field legend{ margin-bottom:.15rem; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__note{ margin:.9rem 0 0; font-size:.86rem; color:var(--ink-3); text-align:center; }
.form__ok{
  margin:1rem 0 0; padding:.9em 1.1em;
  background:#e9f7f1; border:1px solid #b6e2d0; border-radius:var(--r-sm);
  color:#0b6a49; font-weight:600; font-size:.95rem; text-align:center;
}

/* ---------- Patička ---------- */
.ft{ background:var(--dark); color:#a9c4d2; padding-top:clamp(48px,6vw,72px); font-size:.96rem; }
.ft__in{
  display:grid; gap:clamp(28px,4vw,44px);
  grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  padding-bottom:clamp(36px,4.5vw,52px);
}
@media (max-width:900px){ .ft__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ft__in{ grid-template-columns:1fr; } }

.ft__logo{
  height:56px; width:auto; margin-bottom:1.1rem;
  /* logo je tmavé na světlém podkladu — na tmavé patičce ho zesvětlíme */
  filter:brightness(0) invert(1); opacity:.94;
}
.ft__col--brand p{ max-width:38ch; }
.ft__h{ color:#fff; font-size:1.02rem; font-weight:650; margin-bottom:1rem; letter-spacing:0; }
.ft__col ul{ display:grid; gap:.55rem; }
.ft a{ color:#a9c4d2; text-decoration:none; }
.ft a:hover{ color:#fff; text-decoration:underline; }
.ft__contact a{ font-weight:600; color:#fff; }
.ft__area{ margin:1.2rem 0 0; font-size:.88rem; color:#7d9dae; }

.social{ display:flex; gap:.6rem; margin-top:1.3rem; }
.social a{
  display:grid; place-items:center; width:40px; height:40px;
  background:rgba(255,255,255,.07); border-radius:50%;
  transition:background .16s ease, transform .16s ease;
}
.social a:hover{ background:var(--brand); transform:translateY(-2px); }
.social svg{ width:19px; height:19px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.ft__bar{ border-top:1px solid rgba(255,255,255,.1); }
.ft__barIn{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-block:1.3rem; font-size:.88rem;
}
.ft__barIn p{ margin:0; }
.ft__legal{ display:flex; flex-wrap:wrap; gap:1.3rem; }

/* ---------- Kotvy pod lepivou hlavičkou ----------
   Bez tohoto skočí "#poptavka" tak, že se začátek sekce schová
   pod hlavičku. Odsazení musí být větší než hlavička. */
section[id], article[id]{ scroll-margin-top:126px; }
@media (max-width:1000px){ section[id], article[id]{ scroll-margin-top:104px; } }
@media (max-width:480px){ section[id], article[id]{ scroll-margin-top:92px; } }

/* ---------- Mobilní doladění ---------- */
@media (max-width:1000px){
  /* Pojistka proti vodorovnému posunu od zasunuté zásuvky.
     `clip` (na rozdíl od `hidden`) nevytváří rolovací kontejner,
     takže se sticky hlavička nerozbije. */
  html{ overflow-x:clip; }
}

@media (max-width:760px){
  /* Textové odkazy měly na dotek jen 21–23 px. Zvětšeno na ~40 px. */
  .topbar a{ display:inline-flex; padding-block:.5em; }
  .ft__col ul a, .ft__legal a{ display:inline-block; padding-block:.5em; }
  .ft__col ul{ gap:.1rem; }
  .ft__legal{ gap:.4rem 1.3rem; }
  .form__contacts a, .person a{ display:inline-block; padding-block:.4em; }
  .crumb a{ display:inline-block; padding-block:.35em; }

  /* Horní lišta zabírala na malé obrazovce zbytečně moc místa */
  .topbar{ font-size:.82rem; }
  .topbar__in{ gap:.15em .9em; padding-block:4px; min-height:0; }
  .topbar__links{ gap:.9em; }

  /* Vzdušnost sekcí sladit s menší obrazovkou */
  .sec{ padding-block:clamp(44px,9vw,62px); }
  .sec__head{ margin-bottom:clamp(26px,6vw,36px); }

  /* Odznak "Nejoblíbenější" přesahuje nad kartu — potřebuje víc místa */
  .plans{ gap:34px 18px; }

  /* Posuvník před/po: větší úchyt, ať se dá pohodlně chytit prstem */
  .ba__grip{ width:50px; height:50px; }
  .ba__grip::before{ font-size:17px; }
  .ba__tag{ font-size:.72rem; padding:.3em .7em; }
}

/* Tlačítka na úzkých displejích přes celou šířku — stejná stopa,
   větší plocha na klepnutí a klidnější vzhled než různě široké pilulky */
@media (max-width:560px){
  .hero__cta, .phero__cta, .cta__btns, .revs__more{
    flex-direction:column; align-items:stretch;
  }
  .hero__cta .btn, .phero__cta .btn, .cta__btns .btn, .revs__more .btn{
    width:100%;
  }
  .btn--lg{ padding-block:1em; }
  /* pojistka: žádný dlouhý popisek nesmí vystrčit tlačítko mimo obrazovku */
  .btn{ white-space:normal; }

  .chips{ gap:.55rem 1.1rem; }
  .hero__lead{ margin-bottom:1.6rem; }

  /* dlouhé popisky v ceníku nesmí tlačit cenu z řádku */
  .plan__row{ flex-wrap:wrap; gap:.15rem .8rem; }
  .ratelist li{ flex-wrap:wrap; gap:.1rem .8rem; }
}

/* ---------- Mobilní lišta s hovorem ---------- */
.callbar{ display:none; }
@media (max-width:760px){
  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line);
    box-shadow:0 -4px 20px rgba(13,27,36,.14);
    padding-bottom:env(safe-area-inset-bottom);
    will-change:transform;
    transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .18s ease;
  }
  /* Při rolování dolů lištu uklidíme — poskakování způsobené vysouváním
     panelů prohlížeče tak není vidět. Vrátí se při rolování nahoru
     nebo jakmile uživatel zastaví (řídí app.js). */
  .callbar.is-hidden{ transform:translateY(115%); }
  /* při psaní do formuláře lištu schovat, ať nepřekáží nad klávesnicí */
  .callbar.is-away{ opacity:0; pointer-events:none; transform:translateY(115%); }
  .callbar a{
    display:flex; align-items:center; justify-content:center; gap:.5em;
    padding:1em .5em; font-weight:650; font-size:1rem; text-decoration:none;
  }
  .callbar__call{ background:#fff; color:var(--brand-dk); }
  .callbar__form{ background:var(--brand); color:#fff; }
  body{ padding-bottom:64px; }
}

/* ==========================================================================
   KOMPONENTY PODSTRÁNEK
   ========================================================================== */

/* ---------- Hlavička podstránky + drobečky ---------- */
.phero{
  padding-block:clamp(34px,4.5vw,58px) clamp(38px,5vw,64px);
  background:
    radial-gradient(110% 100% at 90% 0%, var(--tint) 0%, transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--bg-alt) 100%);
  border-bottom:1px solid var(--line-2);
}
.phero__in{ max-width:760px; }
.phero--center .phero__in{ max-width:820px; margin-inline:auto; text-align:center; }
.phero h1{ font-size:clamp(2.05rem,4.6vw,3.15rem); margin-bottom:.35em; }
.phero__lead{ font-size:clamp(1.03rem,1.8vw,1.17rem); color:var(--ink-2); margin-bottom:1.5rem; max-width:60ch; }
.phero--center .phero__lead{ margin-inline:auto; }
.phero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; }
.phero--center .phero__cta{ justify-content:center; }

.crumb{ margin-bottom:1.1rem; font-size:.88rem; color:var(--ink-3); }
.crumb ol{ display:flex; flex-wrap:wrap; gap:.4em; align-items:center; }
.crumb li:not(:last-child)::after{ content:"/"; margin-left:.4em; color:var(--line); }
.crumb a{ color:var(--ink-3); text-decoration:none; }
.crumb a:hover{ color:var(--brand); text-decoration:underline; }
.crumb [aria-current]{ color:var(--ink-2); font-weight:550; }

/* ---------- Dvousloupcový blok text + obrázek ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,60px); align-items:center; }
.split--narrow{ grid-template-columns:1.15fr .85fr; }
@media (max-width:860px){ .split,.split--narrow{ grid-template-columns:1fr; } }
.split h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.split p{ color:var(--ink-2); }
.split__media img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--sh); }

/* ---------- Štítky výkonů ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.tags li{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.45em 1em; border-radius:100px;
  background:var(--tint); color:var(--brand-dk);
  font-size:.9rem; font-weight:550;
}
.tags li::before{
  content:""; width:.72em; height:.38em;
  border-left:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  transform:rotate(-45deg) translateY(-1px); flex:none;
}

/* ---------- Cenové balíčky ---------- */
.plans{ display:grid; gap:clamp(18px,2.5vw,26px); grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:start; }
.plan{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:1.8rem 1.6rem; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; height:100%;
}
.plan--hi{ border-color:var(--brand); box-shadow:var(--sh); position:relative; }
.plan__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; font-size:.76rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.35em 1em; border-radius:100px; white-space:nowrap;
}
.plan__freq{ font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-bottom:.5rem; }
.plan__name{ font-size:1.45rem; margin-bottom:.35em; }
.plan__desc{ color:var(--ink-2); font-size:.95rem; margin-bottom:1.3rem; }
.plan__price{ display:flex; align-items:baseline; gap:.35em; margin-bottom:.2rem; }
.plan__amount{ font-size:2.2rem; font-weight:750; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.plan__unit{ font-size:1rem; color:var(--ink-2); font-weight:550; }
.plan__per{ font-size:.86rem; color:var(--ink-3); margin-bottom:1.3rem; }
.plan__rows{ display:grid; gap:.7rem; margin-bottom:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line-2); }
.plan__row{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:.93rem; }
.plan__row span:first-child{ color:var(--ink-2); }
.plan__row span:last-child{ font-weight:700; color:var(--ink); white-space:nowrap; }
.plan .btn{ margin-top:auto; }
.pricenote{
  margin-top:1.6rem; padding:1rem 1.2rem;
  background:var(--tint-2); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:.88rem; color:var(--ink-2);
}
.pricenote p{ margin:0 0 .4em; }
.pricenote p:last-child{ margin:0; }

/* ---------- Jednoduchý ceník (řádky) ---------- */
.ratelist{ display:grid; gap:.1rem; margin:1.4rem 0 0; }
.ratelist li{
  display:flex; justify-content:space-between; gap:1.2rem; align-items:baseline;
  padding:.85em 0; border-bottom:1px dashed var(--line);
}
.ratelist li:last-child{ border-bottom:0; }
.ratelist span:first-child{ color:var(--ink-2); }
.ratelist span:last-child{ font-weight:700; white-space:nowrap; }

/* ---------- Faktory ceny / info dlaždice ---------- */
.tiles{ display:grid; gap:clamp(16px,2.2vw,22px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.tile{ background:#fff; border:1px solid var(--line-2); border-radius:var(--r); padding:1.4rem 1.35rem; box-shadow:var(--sh-sm); }
.tile h3{ font-size:1.08rem; margin-bottom:.35em; }
.tile p{ margin:0; color:var(--ink-2); font-size:.94rem; }

/* ---------- Detail služby (velké bloky) ---------- */
.svc{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px); box-shadow:var(--sh-sm); margin-bottom:clamp(18px,2.4vw,26px);
  scroll-margin-top:110px;
}
.svc__head{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:baseline; justify-content:space-between; margin-bottom:.9rem; }
.svc__head h2{ font-size:clamp(1.4rem,2.8vw,1.85rem); margin:0; }
.svc__price{
  flex:none; background:var(--tint); color:var(--brand-dk);
  padding:.4em 1em; border-radius:100px; font-weight:700; font-size:1rem; white-space:nowrap;
}
.svc > p{ color:var(--ink-2); }
.svc__cols{ display:grid; gap:1.4rem clamp(20px,3vw,38px); grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); margin:1.4rem 0; }
.svc__col h3{ font-size:1.02rem; margin-bottom:.6em; color:var(--brand-dk); }
.svc__col ul{ display:grid; gap:.4rem; }
.svc__col li{ position:relative; padding-left:1.35em; font-size:.93rem; color:var(--ink-2); }
.svc__col li::before{ content:"•"; position:absolute; left:.25em; color:var(--brand-lt); font-weight:700; }
.svc__foot{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding-top:1.2rem; border-top:1px solid var(--line-2); }
.svc__min{ margin:0; font-size:.86rem; color:var(--ink-3); }

/* ---------- Rejstřík odkazů na služby ---------- */
.svcnav{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:clamp(26px,3.4vw,38px); justify-content:center; }
.svcnav a{
  padding:.5em 1.05em; border-radius:100px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  font-size:.92rem; font-weight:550; text-decoration:none; transition:all .16s ease;
}
.svcnav a:hover{ border-color:var(--brand-lt); background:var(--tint); color:var(--brand-dk); }

/* ---------- Tým ---------- */
.team{ display:grid; gap:clamp(16px,2.4vw,26px); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.member{ text-align:center; }
.member__ph{
  aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
  background:var(--tint); margin-bottom:.85rem; box-shadow:var(--sh-sm);
}
.member__ph img{ width:100%; height:100%; object-fit:cover; }
.member h3{ font-size:1.03rem; margin-bottom:.15em; }
.member p{ margin:0; font-size:.87rem; color:var(--ink-3); }

/* ---------- Kontaktní osoby ---------- */
.people{ display:grid; gap:clamp(18px,2.6vw,28px); grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.person{
  display:flex; gap:1.1rem; align-items:center;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:1.3rem; box-shadow:var(--sh-sm);
}
.person__ph{ width:84px; height:84px; flex:none; border-radius:50%; overflow:hidden; background:var(--tint); }
.person__ph img{ width:100%; height:100%; object-fit:cover; }
.person h3{ font-size:1.1rem; margin-bottom:.1em; }
.person__role{ margin:0 0 .45em; font-size:.87rem; color:var(--ink-3); }
.person a{ font-weight:650; text-decoration:none; font-size:.98rem; }
.person a:hover{ text-decoration:underline; }

/* ---------- Aktuality ---------- */
.news{ display:grid; gap:clamp(20px,3vw,30px); }
.post{
  display:grid; grid-template-columns:300px 1fr; gap:clamp(20px,3vw,34px);
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.post:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
@media (max-width:720px){ .post{ grid-template-columns:1fr; } }
.post__ph{ background:var(--tint); }
.post__ph img{ width:100%; height:100%; min-height:190px; object-fit:cover; }
.post__body{ padding:1.6rem 1.7rem 1.7rem 0; }
@media (max-width:720px){ .post__body{ padding:0 1.4rem 1.5rem; } }
.post__date{
  display:inline-block; margin-bottom:.6rem;
  font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brand);
}
.post h2{ font-size:1.3rem; margin-bottom:.5em; }
.post p{ margin:0 0 .8em; color:var(--ink-2); font-size:.96rem; }
.post p:last-child{ margin:0; }

/* ---------- Fotogalerie (miniatury) ---------- */
.thumbs{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); margin-top:1rem; }
.thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); }

/* ---------- Fakturační / info boxy ---------- */
.infobox{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:1.6rem; box-shadow:var(--sh-sm); height:100%;
}
.infobox h2,.infobox h3{ font-size:1.12rem; margin-bottom:.8em; }
.infobox p{ margin:0 0 .4em; color:var(--ink-2); font-size:.96rem; }
.infobox dl{ display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; margin:0; font-size:.96rem; }
.infobox dt{ color:var(--ink-3); }
.infobox dd{ margin:0; font-weight:600; }

/* ---------- Mapa ---------- */
.map{
  border:0; width:100%; aspect-ratio:16/7; min-height:280px;
  border-radius:var(--r-lg); box-shadow:var(--sh-sm); display:block;
}

/* ---------- Kariéra: výhody ---------- */
.perks{ display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.perk{
  background:var(--dark-2); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); padding:1.4rem 1.35rem;
}
.perk strong{ display:block; color:#fff; font-size:1.35rem; letter-spacing:-.02em; margin-bottom:.2em; }
.perk span{ color:#a9c4d2; font-size:.93rem; }

/* ---------- Souvislý text (právní stránky) ---------- */
.prose{ max-width:75ch; }
.prose h2{
  font-size:1.28rem; margin:2.2em 0 .6em;
  padding-top:1.4em; border-top:1px solid var(--line-2);
}
.prose h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.06rem; margin:1.5em 0 .4em; color:var(--brand-dk); }
.prose p{ color:var(--ink-2); }
.prose ul{ display:grid; gap:.45rem; margin:0 0 1.2em; }
.prose ul li{ position:relative; padding-left:1.5em; color:var(--ink-2); }
.prose ul li::before{
  content:""; position:absolute; left:.2em; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--brand-lt);
}
.prose dl{ margin:0 0 1.2em; }
.prose dt{ font-weight:650; margin-top:.9em; }
.prose dd{ margin:.2em 0 0; color:var(--ink-2); }
.prose__meta{
  margin-bottom:2rem; padding:1rem 1.2rem;
  background:var(--tint-2); border-left:3px solid var(--brand-lt); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.92rem; color:var(--ink-2);
}
.prose__meta p{ margin:0; }

/* ---------- Zvýrazněný blok ---------- */
.callout{
  background:var(--tint); border:1px solid var(--brand-lt); border-radius:var(--r);
  padding:1.3rem 1.5rem; margin:1.6rem 0;
}
.callout p{ margin:0; color:var(--brand-dk); font-weight:550; }
.callout strong{ font-weight:750; }

/* ---------- Tisk ---------- */
@media print{
  .topbar,.hdr,.callbar,.cta,.ba__range{ display:none !important; }
  body{ font-size:12pt; }
  .sec{ padding-block:1rem; page-break-inside:avoid; }
}