/* ==========================================================================
   TINOTE — header, sekce homepage, footer
   ========================================================================== */

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  padding: .6rem 1rem; background: var(--ink); color: var(--white);
  border-radius: var(--r-sm); transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--white); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: var(--header-h);
}
.header__logo { flex: none; }
.header__logo img { height: 32px; width: auto; }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .5rem .75rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--green-ink); }
.nav__caret { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.nav__item--has-sub[aria-expanded="true"] .nav__caret,
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Dropdown pod položkou Řešení.

   Odstup od tlačítka dělá PADDING panelu, ne posun přes `top`. S mezerou mezi
   tlačítkem a panelem myš cestou dolů opustí .nav__item, :hover zhasne a menu
   zmizí dřív, než na něj dojede. Padding je součástí prvku, takže most drží. */
.subnav {
  position: absolute; top: 100%; left: 50%;
  padding-top: 10px;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item--has-sub:hover .subnav,
.nav__item--has-sub:focus-within .subnav {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.subnav__inner {
  display: grid; gap: 2px; padding: var(--sp-3);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.subnav__item { display: grid; gap: 2px; padding: .6rem .75rem; border-radius: var(--r-sm); }
.subnav__item:hover { background: var(--green-soft); color: var(--ink); }
.subnav__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-strong); }
.subnav__desc  { font-size: var(--fs-xs); color: var(--ink-muted); }

.header__actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.header__login { font-size: var(--fs-sm); font-weight: 600; }

/* --- Přepínač jazyka --- */
.langs { display: inline-flex; align-items: center; gap: 2px; }
.langs__item {
  padding: .3rem .5rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--ink-faint); border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.langs__item:hover { color: var(--ink); background: var(--surface); }
.langs__item.is-active { color: var(--ink-strong); background: var(--green-soft); }
.langs--drawer { justify-content: center; gap: var(--sp-2); padding-top: var(--sp-2); }
.langs--drawer .langs__item { font-size: var(--fs-sm); padding: .4rem .75rem; }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--ink);
}

/* ==========================================================================
   MOBILNÍ DRAWER
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 150; }
.drawer[hidden] { display: none; }
.drawer__backdrop {
  position: absolute; inset: 0; background: rgba(10,17,28,.55);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(400px, 88vw);
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--white);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav { flex: 1; }
.drawer__nav > ul { display: grid; gap: var(--sp-2); }
.drawer__nav a { display: block; padding: .7rem 0; font-size: 1.0625rem; font-weight: 600; }
.drawer__group {
  display: block; padding-top: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.drawer__sub { padding-left: var(--sp-4); border-left: 2px solid var(--green-soft); }
.drawer__sub a { font-weight: 400; font-size: var(--fs-sm); }
.drawer__foot { display: grid; gap: var(--sp-3); }
.drawer__foot .btn { justify-content: center; }

/* ==========================================================================
   HERO — stoh: taby / text / lišta, art jako vrstva vzadu

   1) přes celou šířku pás přepínače
   2) přes celou šířku blok textu (eyebrow, H1, perex, CTA), zalomený vlevo
   3) pod ním lišta se čtyřmi ikonami
   4) art je vrstva ZA tím vším, na výšku celé sekce, zarovnaná doprava.
      Art i panely tak zajíždějí pod text. Od zvolené šířky se rozpadne na
      art nahoře a panely pod sebou.

   Dřív byl art buňkou mřížky vedle textu. Měl svázaný poměr, takže si diktoval
   výšku: při zužování okna se scvrkával, vedle něj stál nezmenšený nadpis
   a po zlomu naskočil přes celou šířku.
   ========================================================================== */
.hero {
  /* Korektura 1. 9. 2026: art je čtverec (1254×1254) místo wide 1672×941.
     Zadavatel: „je tam toho prostě strašně moc — nevejde se to tam a texty se
     překrývají s ostatními objekty… kdyby ten hlavní motiv byl celkově menší,
     zůstalo by víc prostoru pro texty.“ Čtverec zabírá menší část šířky, motiv
     je v něm menší a panely mají kam ustoupit. */
  --hero-art-w: 1254;
  --hero-art-h: 1254;
  /* Šířka obsahu (container zúžený oknem) a přesah od něj k okraji okna. */
  /* Procenta, ne vw: 100vw počítá i se svislým posuvníkem, takže by střed artu
     seděl o šířku posuvníku vedle středu obsahu. */
  --hero-cont:  min(var(--container), 100% - 2 * var(--container-pad));
  --hero-bleed: calc((100% - var(--hero-cont)) / 2);
  /* Šířka textového sloupce. Art za ním pokračuje, jen ho překryje ztmavení. */
  --hero-text-w: 620px;
  /* Box artu — rozměry i pozice odečtené z Figmy, kde je zadavatel doladil
     (740×561 px, pravá hrana 5 px před koncem obsahu). Poměr už není 1:1:
     `cover` z dodaného čtverce ubere nahoře a dole, motiv zůstane celý. */
  --hero-art-box:   min(740px, 58%);
  --hero-art-ar:    740 / 561;   /* poměr boxu z Figmy */
  --hero-art-top:   30px;     /* odsazení od horní hrany hero */
  --hero-art-inset: 5px;      /* mezera mezi pravou hranou artu a obsahem */

  position: relative;
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-9));
  overflow: hidden;
  /* Barva odečtená z rohů dodaných čtvercových bannerů (0–2, 1–4, 6–19), aby
     hrana artu nebyla vidět jako světlejší rám. */
  background: #070D19;
  color: rgba(255, 255, 255, .86);
}

/* --- 4) Art jako vrstva vzadu ------------------------------------------- */
.hero__art-layer { position: absolute; inset: 0; z-index: 0; }
.hero__art {
  position: absolute;
  /* Pravá hrana artu drží na hraně obsahu (plus malá mezera), ne na okraji okna —
     motiv tak zůstává uvnitř šířky webu a nekončí v prázdnu na širokém monitoru.
     Výška je odvozená z poměru, ne z výšky sekce: art je na všech stránkách
     stejně velký a jen se posouvá. */
  top: var(--hero-art-top); bottom: auto;
  right: calc(var(--hero-bleed) + var(--hero-art-inset));
  width: var(--hero-art-box);
  /* Výška přes `aspect-ratio`, ne přes calc() z --hero-art-box: procenta v
     calc() pro `height` se počítají z VÝŠKY rodiče, takže art vyšel na 244 px
     místo 561. */
  aspect-ratio: var(--hero-art-ar);
  height: auto;
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
/* Homepage má nad textem pás přepínače scén, art proto začíná níž. */
.home .hero { --hero-art-top: 96px; }
.hero__art.is-active { opacity: 1; visibility: visible; }
/* Ztmavení levé části, aby na artu držel text kontrast, plus jemné rozpuštění
   zbylých tří hran do plochy sekce — čtverec jinak končí viditelnou hranou. */
.hero__art::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      #070D19 0%, rgba(7, 13, 25, .92) 12%, rgba(7, 13, 25, .5) 26%,
      rgba(7, 13, 25, .16) 38%, rgba(7, 13, 25, 0) 50%),
    linear-gradient(180deg, #070D19 0%, rgba(7, 13, 25, 0) 14%,
      rgba(7, 13, 25, 0) 86%, #070D19 100%),
    linear-gradient(270deg, rgba(7, 13, 25, .85) 0%, rgba(7, 13, 25, 0) 12%);
}
.hero__panels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Souřadnice --x/--y jsou procenta plochy artu a přicházejí z dat, ne z CSS.
   Díky tomu míří pořád na stejné místo artu na každé šířce. */
.hero__panel {
  position: absolute;
  left: var(--x);
  /* Vystředění na --y jde přes zápornou margin, ne přes translateY: panel má
     data-reveal a .is-visible mu transform přepíná na none, takže by
     centrování zmizelo v okamžiku, kdy se panel odhalí. Clamp je pojistka,
     aby krajní hodnota z dat panel nevystrčila z artu. */
  --panel-half: 28px;
  top: clamp(var(--panel-half), var(--y), calc(100% - var(--panel-half)));
  margin-top: calc(var(--panel-half) * -1);

  display: flex; align-items: center; gap: var(--sp-3);
  width: max-content; max-width: 46%;
  padding: .55rem .8rem;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(3, 7, 15, .45);
  backdrop-filter: blur(4px);
}
.hero__panel--end { left: auto; right: calc(100% - var(--x)); }

/* Korektura 1. 9. 2026: kolečko mělo --green-deep. Zadavatel u něj napsal
   „dostala se nám tam do grafiky nějaká zelená barva, kterou nepoužíváme…
   prosím nahradit tady to pozadí naší zelenou barvou z loga“. */
.hero__panel-icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: var(--ink);
}
/* QR se do kolečka nevejde — kruh mu ukousne rohy a zbyde šedá skvrna. */
.hero__panel-qr {
  flex: none; width: 34px; height: 34px; padding: 2px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.hero__panel-text { display: grid; gap: 0; min-width: 0; }
.hero__panel-title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-strong); line-height: 1.3; }
.hero__panel-value { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.3; white-space: nowrap; }
.hero__panel-caret { flex: none; color: var(--ink-faint); width: 15px; height: 15px; }

/* --- Stoh nad artem ----------------------------------------------------- */
.hero__inner { position: relative; z-index: 1; }
/* Vodorovný pás přepínače má min-content rovné součtu pilulek — bez tohohle
   roztlačí celý stoh za okraj mobilu. */
.hero__inner > *, .hero__tabs ul { min-width: 0; }

/* 1) přepínač přes celou šířku */
/* Sourozenec .hero__inner (kvůli přeskládání na mobilu), takže si vrstvu nad
   artem musí říct sám. */
.hero__tabs { position: relative; z-index: 1; margin-bottom: var(--sp-8); }
.hero__tabs ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero__tab {
  display: inline-block; padding: .5rem 1rem; text-align: left;
  font-size: var(--fs-sm); font-weight: 600;
  color: rgba(255, 255, 255, .62);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.hero__tab:hover { color: var(--white); background: rgba(255, 255, 255, .1); }
.hero__tab.is-active { color: var(--dark); background: var(--green); border-color: var(--green); }

/* 2) blok textu */
.hero__text { max-width: var(--hero-text-w); }
.hero__eyebrow { display: none; color: var(--green); }
.hero__eyebrow.is-active { display: inline-block; }
.hero__title { color: var(--white); text-wrap: balance; }
.hero__title-accent { color: var(--green); }

/* Anglický nadpis je o poznání delší než český a při 3.5rem zajížděl pod
   panely nad artem. Sníženo jen pro EN mutaci — česká sazba zůstává. */
html[lang="en"] .hero__title { font-size: clamp(2.125rem, 1.35rem + 2.6vw, 3.1rem); }
.hero__title::after {
  content: ""; display: block;
  width: 64px; height: 3px; border-radius: 2px;
  margin-top: var(--sp-5);
  background: var(--green);
}
.hero__lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead); max-width: 52ch;
  color: rgba(255, 255, 255, .76);
}
.hero__actions { margin-top: var(--sp-6); }
/* Když po nadpisu nenásleduje ani zelená message, ani perex (homepage po
   korektuře 1. 9. 2026), zůstala by tlačítka nalepená na zelené lince pod
   nadpisem. Odstup nahrazuje vzduch po vypuštěném textu. */
.hero__title + .hero__actions { margin-top: var(--sp-8); }
.hero__message + .hero__actions { margin-top: var(--sp-7); }
.hero__cta-primary   { background: var(--green); color: var(--dark); }
.hero__cta-primary:hover { background: #6BD79C; box-shadow: var(--shadow-green); }
.hero__cta-secondary { background: transparent; color: var(--white); border-color: rgba(255,255,255,.34); }
.hero__cta-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

/* 3) lišta se čtyřmi ikonami — přes celou šířku, ne jen pod textem */
.hero__trust {
  display: flex; flex-wrap: wrap;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .7);
}
.hero__trust li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-5); padding-block: var(--sp-1);
}
.hero__trust li:first-child { padding-left: 0; }
.hero__trust li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.hero__trust .icon { color: var(--green); flex: none; }
.hero__trust-text { display: grid; gap: 1px; }
.hero__trust-title { font-size: var(--fs-sm); font-weight: 600; color: var(--white); line-height: 1.3; }
.hero__trust-note  { font-size: var(--fs-xs); line-height: 1.3; }

/* ==========================================================================
   ČTYŘI ŘEŠENÍ
   ========================================================================== */
.solutions { align-items: stretch; }
.solution:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--green); }
/* Karta s fotkou: obrázek sedí na horní hraně karty, proto vlastní odsazení. */
.solution--foto { position: relative; padding-top: 0; overflow: hidden; }
.solution__foto {
  display: block;
  /* max-width: none je nutné — globální `img { max-width: 100% }` by fotku
     srazilo na šířku obsahu karty a záporné okraje by ji vysunuly doleva. */
  width: calc(100% + 2 * var(--sp-6)); max-width: none;
  margin: 0 calc(var(--sp-6) * -1) var(--sp-4);
  aspect-ratio: 16 / 9; object-fit: cover;
}
.solution__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
/* Korektura 3. 9. 2026: u karty s fotkou leží číslo i ikona NA fotce — karta se
   tím zkrátí o celý řádek a pod obrázkem začíná rovnou nadpis. */
.solution--foto .solution__top {
  position: absolute; z-index: 2;
  top: var(--sp-4); left: var(--sp-4);
  margin: 0;
}
/* Korektura 3. 9. 2026: zelený čtvereček pod ikonou kompozičně nesedil —
   na fotce zůstává jen samotný tah, světlý, se stínem kvůli čitelnosti. */
.solution--foto .solution__icon {
  width: 30px; height: 30px;
  color: var(--white);
  filter: drop-shadow(0 1px 6px rgba(3, 7, 15, .65));
}
.solution--foto .solution__num {
  color: var(--white);
  text-shadow: 0 1px 6px rgba(3, 7, 15, .6);
}
.solution__num { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-faint); letter-spacing: .06em; }
.solution__icon { color: var(--green-ink); }
.solution__title { font-size: 1.25rem; }
.solution__subtitle { margin-top: 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--green-ink); }
.solution__cta { margin-top: auto; padding-top: var(--sp-5); }

/* ==========================================================================
   EKOSYSTÉM KOLEM ZAŘÍZENÍ
   ========================================================================== */
/* ==========================================================================
   EKOSYSTÉM — velký stroj uprostřed, panely volně kolem
   Rozvržení podle návrhu v Lovable. Tón sekce je přepínatelný (tmavý / světlý),
   dokud se nevybere styl: ?eko=svetly
   ========================================================================== */
.eco-section {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 45%, #0B1726 0%, var(--hero-edge) 62%),
    var(--hero-edge);
  color: rgba(255,255,255,.78);
}
.eco-section h2 { color: var(--white); }
.eco-section .section__lead { color: rgba(255,255,255,.66); }
.eco__brand { color: var(--green); }

/* --- Scéna ------------------------------------------------------------- */
.eco { position: relative; min-height: clamp(560px, 52vw, 760px); }

/* Všechny scény jsou v HTML kvůli SEO a chodu bez JS. Leží na sobě (absolute),
   výšku drží min-height rodiče — jinak by se výšky sčítaly a pod sekcí by zůstalo
   prázdné místo. Aktivní scénu značí .is-active, kterou na první dává rovnou PHP,
   takže bez JavaScriptu je vidět první zařízení. */
.eco__scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.eco__scene.is-active { opacity: 1; visibility: visible; }
.eco-switching .eco__scene { transition: opacity var(--dur) var(--ease), visibility var(--dur); }

/* panely se při přepnutí zařízení postupně objeví */
.eco-switching .eco__scene.is-active .eco__panel {
  animation: eco-in var(--dur-slow) var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes eco-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Přepínač zařízení --- */
.eco__switch {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-7);
}
.eco__switch[hidden] { display: none; }
.eco__switch-item {
  padding: .5rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.18);
  font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.66);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.eco__switch-item:hover { color: var(--white); background: rgba(255,255,255,.08); }
.eco__switch-item.is-active { color: var(--dark); background: var(--green); border-color: var(--green); }

.eco__device {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: var(--sp-4);
}
/* Bez rámečku: maska rozplyne okraje fotky do podkladu, aby stroj „stál" v ploše
   a nevypadal jako obrázek nalepený v kartě. */
/* Fotka je vycentrovaná na stroj (změřeno: x 690–1541 v původním artu).
   Ostrá zóna masky sahá dál než stroj, takže fade ubírá jen prázdné pozadí. */
.eco__device-img {
  width: min(58vw, 760px); height: auto;
  /* Poloměr musí zůstat do 50 % šířky, jinak gradient přeteče box a hrany fotky
     zůstanou ostré. Stroj zabírá ~77 % šířky výřezu → stop na 80 % ho nechá celý. */
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 50%, #000 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 52% at 50% 50%, #000 80%, transparent 100%);
}

.eco__device-id {
  /* Karta s QR sedí přes spodek fotky (ta se tam stejně rozplývá do podkladu).
     Bez posunu přetékala pod scénu a lezla do přepínače zařízení pod ní.
     `z-index` musí být — jinak ji překryje maskovaný okraj fotky a vypadá to,
     jako by přes kartu ležel gradient. */
  position: relative; z-index: 3;
  margin-top: -90px;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  background: rgba(255,255,255,.97);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 40px rgba(3,7,15,.36);
}
.eco__device-qr { flex: none; width: 72px; height: 72px; border-radius: var(--r-sm); }
.eco__device-text { display: grid; gap: 0; }
.eco__device-code   { font-size: 1.125rem; font-weight: 700; color: var(--ink-strong); line-height: 1.25; }
.eco__device-name   { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.3; }
.eco__device-serial { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.3; }

/* --- Panely kolem ------------------------------------------------------- */
.eco__panels { position: absolute; inset: 0; pointer-events: none; }

.eco__panel {
  position: absolute;
  display: grid; gap: var(--sp-3);
  width: 246px; padding: var(--sp-4);
  background: rgba(255,255,255,.98);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 36px rgba(3,7,15,.28);
  color: var(--ink);
}

.eco__panel--tl { top: 2%;   left: 0; }
.eco__panel--ml { top: 37%;  left: -1%; }
.eco__panel--bl { bottom: 3%; left: 3%; }
.eco__panel--tr { top: 0;    right: 0; }
.eco__panel--mr { top: 35%;  right: -1%; }
.eco__panel--br { bottom: 5%; right: 2%; }

/* Spojnice ke středu (kap. 11: „graficky použít spojnice mezi zařízením
   a jednotlivými oblastmi"). */
.eco__panel::after {
  content: "";
  position: absolute; top: 50%;
  width: clamp(1.5rem, 4vw, 4.5rem); height: 1px;
  background: repeating-linear-gradient(90deg, rgba(86,206,143,.8) 0 4px, transparent 4px 9px);
  pointer-events: none;
}
.eco__panel--tl::after, .eco__panel--ml::after, .eco__panel--bl::after {
  left: 100%; transform-origin: left center;
}
.eco__panel--tr::after, .eco__panel--mr::after, .eco__panel--br::after {
  right: 100%; transform-origin: right center;
}
.eco__panel--tl::after { transform: rotate(20deg); }
.eco__panel--bl::after { transform: rotate(-20deg); }
.eco__panel--tr::after { transform: rotate(-20deg); }
.eco__panel--br::after { transform: rotate(20deg); }

.eco__panel-head { display: flex; align-items: center; gap: var(--sp-2); }
/* [01-18] „hezká sekce – jen zase doladit ty barvy, zbavit se té zelené,
   co se tam dostala odjinud a není z naší palety.“ */
.eco__panel-icon {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--green); color: var(--ink);
}
.eco__panel-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-strong); }

/* --- Obsah panelu ------------------------------------------------------- */
.eco__rows { display: grid; gap: 0; margin: 0; }
.eco__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-block: .32rem;
  border-bottom: 1px solid var(--line-soft);
}
.eco__row:last-child { border-bottom: 0; }
.eco__row dt { font-size: var(--fs-xs); color: var(--ink-muted); }
.eco__row dd { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-strong); text-align: right; }
.eco__row dd.is-ok { color: var(--green-ink); }

.eco__list { display: grid; gap: .28rem; }
.eco__list li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.eco__check { flex: none; color: var(--green-ink); width: 14px; height: 14px; }
.eco__date { flex: none; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.eco__list-text { color: var(--ink-muted); }

.eco__more { font-size: var(--fs-xs); font-weight: 600; color: var(--green-ink); }

.eco__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px dashed var(--line);
  font-size: var(--fs-xs); color: var(--ink-muted);
}
.eco__foot strong { color: var(--ink-strong); }
.eco__foot strong.is-ok { color: var(--green-ink); }

.eco__person { display: flex; align-items: center; gap: var(--sp-3); }
.eco__avatar {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-size: var(--fs-xs); font-weight: 700;
}
.eco__person-text { display: grid; gap: 0; }
.eco__person-name   { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-strong); line-height: 1.3; }
.eco__person-status { font-size: var(--fs-xs); color: var(--green-ink); font-weight: 600; line-height: 1.35; }

/* ==========================================================================
   LIFECYCLE — kreslená dráha, ne dopravník
   Osm koleček v jedné rovnoměrné řadě je přesně ta „generická AI landing page"
   z kap. 21. Dodaný koncept (slide 03) vede cyklus ve dvou řadách s obratem
   vpravo a tečkovanou dráhou; totéž dělá i referenční Figma (Koupeme se).
   ========================================================================== */
.lifecycle {
  --lc-dot: 58px;          /* průměr medailonu */
  --lc-line: rgba(42, 127, 82, .45);
}
.lifecycle__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-9) var(--sp-5);
}
/* Druhá řada čte zprava doleva — dráha se na pravém okraji obrací a vrací.
   Bez explicitního grid-row by automatické umístění posunulo krok 6 na řádek 3:
   kurzor se po kroku 5 (sloupec 4) sám dozadu nevrací. */
.lifecycle__step:nth-child(5) { grid-column: 4; grid-row: 2; }
.lifecycle__step:nth-child(6) { grid-column: 3; grid-row: 2; }
.lifecycle__step:nth-child(7) { grid-column: 2; grid-row: 2; }
.lifecycle__step:nth-child(8) { grid-column: 1; grid-row: 2; }

.lifecycle__step {
  position: relative;
  display: grid; justify-items: center; align-content: start; gap: var(--sp-3);
  text-align: center;
}

/* --- Dráha ---------------------------------------------------------------
   Vodorovné úseky mezi sousedy: od okraje medailonu k okraji dalšího. Řádek 1
   míří doprava, řádek 2 doleva. Poslední krok v řádku spojnici nemá. */
.lifecycle__step::after {
  content: ""; position: absolute;
  top: calc(var(--lc-dot) / 2);
  border-top: 2px dotted var(--lc-line);
}
.lifecycle__step:nth-child(-n+3)::after {
  left:  calc(50% + var(--lc-dot) / 2 + 10px);
  right: calc(-50% + var(--lc-dot) / 2 + 10px);
}
/* Řádek 2 čte zprava doleva, spojnici tedy vede krok 5, 6 a 7 — poslední
   (8) už nemá kam, jinak by mu dotažená čára utekla za levý okraj. */
.lifecycle__step:nth-child(n+5):not(:nth-child(8))::after {
  right: calc(50% + var(--lc-dot) / 2 + 10px);
  left:  calc(-50% + var(--lc-dot) / 2 + 10px);
}
.lifecycle__step:nth-child(4)::after,
.lifecycle__step:nth-child(8)::after { content: none; }

/* Obrat mezi 4. a 5. krokem: rámeček bez levé strany se zaoblenými rohy.
   Sahá od středu medailonu v řádku 1 po střed medailonu v řádku 2 — obě řady
   mají díky gridu stejnou výšku, takže offset je mezera + poloměr. */
.lifecycle__step:nth-child(4)::before {
  content: ""; position: absolute;
  top: calc(var(--lc-dot) / 2);
  bottom: calc((var(--sp-9) + var(--lc-dot) / 2) * -1);
  left: calc(50% + var(--lc-dot) / 2 + 10px);
  right: calc(var(--sp-5) / -2);
  border: 2px dotted var(--lc-line);
  border-left: 0;
  border-radius: 0 40px 40px 0;
}

.lifecycle__dot {
  position: relative;
  display: grid; place-items: center;
  width: var(--lc-dot); height: var(--lc-dot); border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(86, 206, 143, .5);
  color: var(--green-ink);
  box-shadow: var(--shadow-sm);
}
/* Pořadové číslo sedí na okraji medailonu, ne ve vlastní buňce — v konceptu je
   to drobná ruční poznámka u kolečka, ne další sloupec tabulky. */
.lifecycle__num {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center;
  min-width: 21px; height: 21px; padding-inline: 5px;
  border-radius: var(--r-pill);
  background: var(--green-soft); border: 1px solid rgba(86, 206, 143, .45);
  font-size: 11px; font-weight: 700; color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.lifecycle__label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-strong); }
.lifecycle__desc  { font-size: var(--fs-xs); color: var(--ink-muted); max-width: 22ch; }
.lifecycle__note {
  margin-top: var(--sp-9); text-align: center;
  font-size: var(--fs-sm); color: var(--ink-muted);
}

/* ==========================================================================
   FUNKCE — tři velké karty s fotkou + kompaktní zbytek
   Uniformní mřížka dvanácti dlaždic je „katalog funkcí" z kap. 21. Proto rozdíl
   ve váze: co si zaslouží obrázek, ten ho dostane.
   ========================================================================== */
.features-featured {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.feature-big {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.feature-big:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.feature-big__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.feature-big__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.feature-big:hover .feature-big__media img { transform: scale(1.04); }
.feature-big__body { position: relative; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.feature-big__icon {
  position: absolute; top: 0; left: var(--sp-5); transform: translateY(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--green); color: var(--dark);
  box-shadow: var(--shadow-md);
}
.feature-big__title { font-size: 1.125rem; }
.feature-big__desc  { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-muted); }

/* Zbývající funkce — rejstřík linkovaný vlasovými linkami.
   Devět stejně vážných buněk volně plovoucích v mřížce je ta „katalogová"
   podoba, na kterou si klient stěžoval. Vlasové linky mezi sloupci i řádky
   dělají z výčtu vysázenou stránku; stejný tah má referenční Figma (Koupeme se,
   pruh služeb dělený svislými linkami). */
.features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.feature {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
/* Krajní sloupce lícují s containerem, poslední řádek nemá co podtrhnout. */
.feature:nth-child(3n + 1) { padding-left: 0; }
.feature:nth-child(3n)     { padding-right: 0; border-right: 0; }
.feature:nth-last-child(-n + 3) { border-bottom: 0; }

/* Ikona bez dlaždice. Devět stejných zelených čtverečků pod sebou byla další
   uniformní vrstva; samotný tah v zelené drží pozornost na názvu funkce. */
.feature__icon { flex: none; color: var(--green-ink); padding-top: 2px; }
.feature__title { font-size: 1rem; }
.feature__desc  { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-muted); }

/* ==========================================================================
   KDO S TINOTE PRACUJE — management / koordinátor / technik

   Připomínka zadavatele ve wireframu homepage: nezůstat jen u technika, ale
   ukázat i role, které se systémem pracují z druhé strany. Technikova podoba
   (fotka z terénu + mockup mobilu, kap. 14) zůstala, přibyl k ní přepínač.
   ========================================================================== */

.role__head { margin-bottom: var(--sp-6); }

.role__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.role__tab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font: inherit;
  text-align: left;
  color: var(--ink-muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.role__tab:hover { border-color: var(--ink-faint); color: var(--ink); }
.role__tab .icon { flex: none; color: var(--ink-faint); }
.role__tab.is-active {
  color: var(--ink-strong);
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green), var(--shadow-md);
}
.role__tab.is-active .icon { color: var(--green-ink); }

.role__tab-text { display: grid; gap: 1px; min-width: 0; }
.role__tab-label { font-size: var(--fs-sm); font-weight: 700; }
.role__tab-role  { font-size: var(--fs-xs); color: var(--ink-faint); }

.role__panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.role__panel[hidden] { display: none; }

.role__title { font-size: var(--fs-h2); line-height: var(--lh-head); }
.role__lead  { margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--ink-muted); }
.role__list  { display: grid; gap: .6rem; margin-block: var(--sp-6); }
.role__list li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.role__list .icon { flex: none; color: var(--green-ink); }

/* Náhled obrazovky u rolí bez mobilu — rámeček řeší .snimek v landing.css,
   který se tady nenačítá, takže minimum nutného opakovat. */
.role__vizual .snimek { margin-top: 0; }
.role__vizual .snimek__ramecek {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.role__vizual .snimek__ramecek img { display: block; width: 100%; height: auto; }
.role__vizual .snimek__popisek {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.role__vizual .snimek__popisek .icon { color: var(--green-ink); }

.mobile__visual { position: relative; }
.mobile__photo {
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.mobile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }

/* Mockup aplikace přesahuje přes fotku — technik i nástroj v jednom záběru.
   Fotka je posunutá doleva (object-position), ať mockup nezakrývá tablet v ruce. */
.mobile__visual .phone {
  position: absolute; right: -7%; bottom: -11%;
  width: clamp(168px, 14vw, 208px);
  padding: 9px;
  background: var(--ink-strong);
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(3,7,15,.34);
}
.phone__screen { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--white); border-radius: 21px; }
.phone__bar { display: grid; gap: 1px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.phone__bar-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-strong); }
.phone__bar-sub   { font-size: var(--fs-xs); color: var(--green-ink); font-weight: 600; }
.phone__rows { display: grid; gap: 2px; }
.phone__rows li {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .55rem; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--ink-muted); background: var(--surface);
}
.phone__rows .icon { color: var(--ink-faint); }
.phone__action {
  display: block; padding: .55rem; text-align: center;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--dark); background: var(--green); border-radius: var(--r-sm);
}


/* ==========================================================================
   PROČ TINOTE — číslovaný seznam, ne další kartová mřížka
   ========================================================================== */
.why__head { margin-bottom: var(--sp-8); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8) var(--sp-7); }
.why__item { position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--green-soft); }
.why__item::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 42px; height: 2px; background: var(--green);
}
.why__num {
  display: block; margin-bottom: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  color: var(--green-ink);
}
.why__item-title { font-size: 1.125rem; }
.why__item-desc  { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-muted); }

/* ==========================================================================
   REFERENCE

   Na stránce dvakrát: úzký pás hned pod hero (bez nadpisu) a plná sekce dole.
   Obojí sdílí `.references__list` a `.references__item`, takže dodaná loga
   naskočí na obou místech jednou změnou v datech.
   ========================================================================== */

/* Pás pod hero. Tmavý jako hero, oddělený jen vlasovou linkou — má se číst jako
   jeho patka, ne jako další sekce. Proto ani nemá `.section` s jeho rytmem. */
.references-pas {
  padding-block: var(--sp-5);
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}

/* Okraje pásu se rozplývají do podkladu, ať loga nevyjíždějí z ostré hrany. */
.references-pas__okno {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.references-pas__stopa {
  display: flex;
  width: max-content;
  animation: pas-log 42s linear infinite;
}
/* Tři sady vedle sebe, posun o třetinu = návrat na výchozí obrázek bez skoku. */
@keyframes pas-log {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
.references-pas__okno:hover .references-pas__stopa { animation-play-state: paused; }

.references-pas__sada { flex: none; flex-wrap: nowrap; }
.references-pas .references__item { padding-inline: var(--sp-7); }
.references-pas .references__name { font-size: var(--fs-sm); white-space: nowrap; }
.references-pas .references__item img { height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .references-pas__stopa { animation: none; }
}

.references__title {
  margin-bottom: var(--sp-7); text-align: center;
  font-size: var(--fs-h3); color: rgba(255,255,255,.72); font-weight: 600;
}
.references__title::after {
  content: ""; display: block;
  width: 46px; height: 3px; border-radius: 2px;
  margin: var(--sp-4) auto 0;
  background: var(--green);
}
/* Jména oddělená vlasovou linkou, ne jen mezerou. Pět velkých slov volně
   plovoucích na černé vypadalo jako nedodělek; linka mezi nimi z toho udělá
   vysázený pruh, který obstojí i než dorazí loga. Stejný tah jako pruh služeb
   v referenční Figmě (Koupeme se). */
.references__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-5) 0;
}
.references__item + .references__item {
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.references__item { padding-inline: var(--sp-7); }
.references__item {
  /* Jednotná bílá silueta místo odbarvení: `brightness(0)` srazí libovolné firemní
     barvy na černou, `invert(1)` z nich udělá bílou. Stačí tak jediný soubor na
     značku — bez toho by tmavě modré Watercooler ani černý Bus Design nebyly na
     tmavém podkladu vidět. Stejný tah jako logolišta na RubiconAI. */
  filter: brightness(0) invert(1); opacity: .62;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.references__item:hover { filter: none; opacity: 1; }
/* `height`, ne `max-height`: SVG bez atributů width/height se ve flexu s pouhým
   max-height vykreslí s nulovou šířkou (naměřeno 0×0 u hortim.svg i w-system.svg).
   Pevná výška dá prohlížeči rozměr, ze kterého šířku dopočítá. */
.references__item img { height: 34px; width: auto; }
.references__name {
  font-size: 1.125rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.6); text-transform: uppercase;
}
/* Firma bez loga — zadavatel: „nějak fontem italica bold“. */
.references__name--kurziva {
  font-style: italic;
  letter-spacing: .02em;
  text-transform: none;
  font-size: 1.0625rem;
}
.references__item:hover .references__name { color: var(--green); }

/* ==========================================================================
   BLOG + CTA PANEL
   ========================================================================== */
.blog-cta__inner { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-8); align-items: start; }
/* Bez min-width:0 se grid item nesmrskne pod šířku obsahu a slider uvnitř
   roztáhne celou sekci — stejná past jako u panelů v heru a v ekosystému. */
.blog-cta__inner > * { min-width: 0; }
.blog__head { margin-bottom: var(--sp-6); }
.blog__head .btn { margin-top: var(--sp-5); }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.blog__card { padding: 0; overflow: hidden; }
.blog__card:hover { box-shadow: var(--shadow-md); border-color: var(--green); }
/* `overflow: hidden` je nutné — obrázek s jiným poměrem (elektrokolo je 1112×941)
   jinak roztáhne box a poměr 16/10 se neuplatní; karty pak nejsou stejně vysoké. */
.blog__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); }
.blog__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog__cat {
  margin: var(--sp-5) var(--sp-5) 0;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-ink);
}
.blog__card-title { margin: var(--sp-2) var(--sp-5) 0; font-size: 1.0625rem; }
.blog__card .card__desc { margin: var(--sp-2) var(--sp-5) 0; }
.blog__more { margin: var(--sp-5); margin-top: auto; padding-top: var(--sp-4); }

.cta-panel {
  position: sticky; top: calc(var(--header-h) + var(--sp-5));
  display: grid; gap: var(--sp-3);
  background: var(--green-soft);
  border: 1px solid rgba(86,206,143,.4);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cta-panel > *:not(.cta-panel__photo) { margin-inline: var(--sp-6); }
.cta-panel > *:last-child { margin-bottom: var(--sp-6); }
.cta-panel__photo { aspect-ratio: 16 / 10; margin-bottom: var(--sp-5); }
.cta-panel__photo img { width: 100%; height: 100%; object-fit: cover; }
.cta-panel__title { font-size: var(--fs-h3); }
.cta-panel__lead { font-size: var(--fs-sm); color: var(--ink-muted); }
.cta-panel__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.cta-panel__actions .btn { justify-content: center; }
.cta-panel .btn--ghost { background: var(--white); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-block: var(--sp-9) var(--sp-6); background: var(--dark); color: rgba(255,255,255,.66); }
.footer__grid {
  display: grid;
  /* Počet odkazových sloupců hlásí PHP přes --footer-cols — po skrytí sloupce
     (Funkce po korektuře 1. 9.) by pevná čtyřka nechala vpravo prázdnou stopu. */
  grid-template-columns: 1.6fr repeat(var(--footer-cols, 4), 1fr) 1.2fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
}
.footer__brand img { height: 34px; width: auto; }
.footer__tagline { margin-top: var(--sp-4); font-size: var(--fs-sm); max-width: 30ch; }
.footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer__social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm);
  color: rgba(255,255,255,.7);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer__social a:hover { border-color: var(--green); color: var(--green); }

.footer__col-title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--white);
}
.footer__col ul { display: grid; gap: var(--sp-2); }
.footer__col a, .footer__col li > span {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-sm); color: rgba(255,255,255,.66);
}
.footer__col a:hover { color: var(--green); }
.footer__contact .icon { margin-top: 3px; color: var(--green); }

.footer__bottom {
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-xs);
  /* Copyright vlevo, souhlas s cookies vpravo. Na úzkém displeji se srovnají
     pod sebe doleva — vycentrovaný právní řádek působí jako nadpis. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  align-items: baseline;
}
/* Tlačítko „nahoru" je fixed vpravo dole a nad patičkou odkaz překrývalo —
   uhne mu o jeho šířku i odsazení. Po zalomení stojí odkaz vlevo, kde odstup
   vpravo nic neposune, takže pravidlo nepotřebuje breakpoint. */
.footer__cookies { margin-right: calc(48px + clamp(1rem, 2vw, 2rem)); }
.footer__cookies a { color: rgba(255,255,255,.72); }
.footer__cookies a:hover { color: var(--green); }

/* ==========================================================================
   RESPONZIVITA (kap. 24)
   ========================================================================== */
@media (max-width: 1199px) {
  /* Stoh: text přes celou šířku, art pod ním na střed. Nadpis se tu roztáhne,
     ať se pěkně zalamuje a hero nevyroste do výšky — držet ho úzký, když vedle
     něj nic nestojí, jen vyrábí řádky. */
  .hero { display: flex; flex-direction: column; }
  /* Art je v HTML před textem (je to vrstva vzadu), ve stohu má být pod ním. */
  .hero__inner { order: 1; }
  /* Od téhle šířky art nestojí vedle textu, ale pod ním — přepínač scén nad
     nadpisem by tedy ohlašoval něco, co v tu chvíli není vidět. Jde dolů, těsně
     nad art, který přepíná. */
  .hero__tabs { order: 2; margin: var(--sp-8) 0 0; }
  /* Art drží stejný box i poměr jako na desktopu (740×561), jen se vycentruje.
     Díky tomu sedí panely — jejich procenta míří na plochu artu, takže vůči
     motivu (ten je v dodaných bannerech uprostřed) zůstávají tam, kde je
     zadavatel umístil na širokém displeji. Nadzoom s ukotvením vpravo, který
     tu byl z časů wide artů, by motiv naopak odsunul mimo střed. */
  .hero__art-layer {
    order: 3;
    position: relative; inset: auto;
    /* Ve stohu už art nekonkuruje textu, takže smí do plné šířky obsahu —
       58 % z desktopu by ho tu zbytečně scvrklo (na 1024 px na 585 px). */
    width: min(740px, 100% - 2 * var(--container-pad));
    margin: var(--sp-8) auto 0;
    aspect-ratio: var(--hero-art-ar);
  }
  .hero__art {
    position: absolute; inset: 0;
    width: auto; height: auto;
    aspect-ratio: auto;
    background-size: cover;
    background-position: center;
  }
  /* Ve stohu není art u hrany obsahu, takže levý gradient nedává smysl — místo
     něj se rozpustí všechny čtyři hrany, aby banner nekončil ostrým obdélníkem. */
  .hero__art::after {
    background:
      linear-gradient(90deg,  #070D19 0%, rgba(7, 13, 25, 0) 12%),
      linear-gradient(270deg, #070D19 0%, rgba(7, 13, 25, 0) 12%),
      linear-gradient(180deg, #070D19 0%, rgba(7, 13, 25, 0) 10%),
      linear-gradient(0deg,   #070D19 0%, rgba(7, 13, 25, 0) 10%);
  }
  .hero__panels { inset: 0; }
  /* Pilulka u krajní hrany artu by na užším displeji utekla z obrazovky:
     panely posazené za pravou hranu artu (x přes 100 %) se zarovnají na ni. */
  .hero__panel { max-width: 44%; }
  .hero__panel--end { right: max(0px, calc(100% - var(--x))); }

  .hero__text { max-width: none; }
  .hero__title { max-width: 24ch; }
  .hero__title::after { margin-top: var(--sp-4); }
  .hero__lead { max-width: 68ch; }
}

/* Header přepíná dřív než zbytek layoutu: logo + 6 položek nav + přepínač jazyka
   + Přihlášení + CTA se do 1024 px nevejdou. Media query navíc počítá šířku
   VČETNĚ scrollbaru, takže na 1024px okně by breakpoint 1023 ještě neplatil. */
@media (max-width: 1149px) {
  .nav, .header__login { display: none; }
  .burger { display: inline-flex; }
  .header__inner { justify-content: space-between; }
}

@media (max-width: 1279px) {
  /* Panely se kolem stroje nevejdou → stroj nahoře, pod ním mřížka panelů.
     Scény musí zpět do toku, jinak by měly nulovou výšku a sekce by se scvrkla. */
  .eco { min-height: 0; display: grid; }
  .eco__scene {
    position: relative; inset: auto; opacity: 1; visibility: visible;
    display: none;
  }
  .eco__scene.is-active { display: grid; gap: var(--sp-7); }
  .eco__device { position: static; inset: auto; }
  .eco__device-img { width: min(78vw, 560px); }
  /* Přepínač zařízení patří nad scénu, ne pod ni: ve stohu by po fotce
     a šesti kartách vyšel tak nízko, že by ho nikdo nespojil s tím, co
     přepíná. Řadí se přes order, proto je z containeru flex sloupec. */
  .eco-section > .container { display: flex; flex-direction: column; }
  .eco-section .section__head { order: 1; }
  .eco__switch { order: 2; margin: var(--sp-6) 0 0; }
  .eco { order: 3; }

  .eco__panels { position: static; inset: auto; pointer-events: auto;
                 display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .eco__panel { position: static; width: auto; }
  .eco__panel::after { display: none; }   /* ve mřížce by spojnice mířily do prázdna */
}

@media (max-width: 1199px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; row-gap: var(--sp-8); }
  .footer__brand { grid-column: 1 / -1; }
  .blog-cta__inner { grid-template-columns: 1fr; }
  .cta-panel { position: static; }
}

@media (max-width: 1023px) {
  .hero__panel { padding: .45rem .65rem; gap: var(--sp-2); --panel-half: 25px; }
  .hero__panel-icon, .hero__panel-qr { width: 28px; height: 28px; }
  .hero__panel-caret { display: none; }

  .eco__panels { grid-template-columns: repeat(2, 1fr); }

  /* lifecycle → posuvný pás; scroll, snap i tečky řeší .slider.
     V pásu jdou kroky za sebou v jedné lince, obrat vpravo tam nedává smysl. */
  .lifecycle__track { --slide-w: 138px; display: flex; }
  .lifecycle__step:nth-child(n) { grid-column: auto; grid-row: auto; }
  .lifecycle__step:nth-child(4)::before { content: none; }
  /* Spojnice ve flexu: od okraje kolečka k dalšímu kroku, tedy šířka slidu
     plus mezera, mínus průměr kolečka a odsazení na obou koncích.

     Vyjmenované selektory, ne jen `:nth-child(n)`: kroky druhé řady mají na
     desktopu pravidlo `:nth-child(n+5):not(:nth-child(8))`, které je
     specifičtější. Přebilo tady `left` i `right` a spojnice kroků 5–7 se
     kreslila doleva — vedle kolečka místo za ním. */
  .lifecycle__step:nth-child(n)::after,
  .lifecycle__step:nth-child(-n+3)::after,
  .lifecycle__step:nth-child(n+5):not(:nth-child(8))::after {
    content: "";
    left: calc(50% + var(--lc-dot) / 2 + 8px); right: auto;
    width: calc(var(--slide-w) + var(--sp-4) - var(--lc-dot) - 16px);
  }
  .lifecycle__step:last-child::after { content: none; }

  .features-featured { grid-template-columns: repeat(2, 1fr); }
  .features-featured .feature-big:last-child { grid-column: 1 / -1; }
  .features-featured .feature-big:last-child { flex-direction: row; }
  .features-featured .feature-big:last-child .feature-big__media { flex: 0 0 42%; aspect-ratio: auto; }
  .features-featured .feature-big:last-child .feature-big__icon { top: var(--sp-5); left: calc(42% - 22px); transform: none; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(3n + 1) { padding-left: var(--sp-6); }
  .feature:nth-child(3n)     { padding-right: var(--sp-6); border-right: 1px solid var(--line-soft); }
  .feature:nth-child(2n + 1) { padding-left: 0; }
  .feature:nth-child(2n)     { padding-right: 0; border-right: 0; }
  .feature:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line-soft); }
  .feature:nth-last-child(-n + 2) { border-bottom: 0; }

  .role__panel { grid-template-columns: 1fr; gap: var(--sp-8); }
  .role__tabs { grid-template-columns: 1fr; }
  .mobile__visual { max-width: 620px; }
  .mobile__visual .phone { right: 2%; bottom: -10%; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  /* .blog__grid pod 1024 přebírá .slider — žádný grid-template-columns tady,
     jinak by přebil flex layout slideru (stejná specificita, pozdější soubor). */
}

@media (max-width: 709px) {
  /* Art se scvrkne na úzký pruh — jen aby byl vidět motiv — a ikony z něj
     slezou pod něj jako mřížka argumentů. Šest pilulek na artu vysokém
     ~220 px by ho zakrylo celé.

     Art musí zpátky do toku, jinak by mřížka zůstala uvnitř jeho absolutního
     boxu a ležela na obrázku. Plochu obrázku dělá padding-top, ne
     aspect-ratio, protože pod ní ještě tečou panely. */
  /* Pod 710 px jde fotka až k okrajům okna: odsazení, které dává smysl, dokud
     na artu plovou panely, tu jen nechává po stranách pruhy pozadí. */
  .hero__art-layer {
    aspect-ratio: auto;
    width: 100%; margin-inline: 0; margin-bottom: 0;
  }
  /* Obrázek je pseudoprvek, ne pozadí celého bloku: pozadí by se roztáhlo
     i pod mřížku karet a ty by ležely na fotce. Takhle je pruh obrázku a pod
     ním čistý tok. */
  .hero__art {
    position: relative; inset: auto; width: auto;
    aspect-ratio: auto; transform: none;
    display: none;
    background-image: none;
  }
  .hero__art.is-active { display: block; opacity: 1; visibility: visible; }
  /* Tady už art obaluje i mřížku panelů, takže rozpouštění hran z bloku ≤1199
     by leželo přes karty. */
  .hero__art::after { display: none; }
  /* Čtvercový banner na plnou šířku by byl vysoký přes celou obrazovku; pruh
     mu ubere shora a zdola tmavé pozadí, motiv uprostřed zůstane celý. */
  .hero__art::before {
    content: ""; display: block;
    padding-top: 72%;
    background-image: var(--art);
    background-size: cover;
    background-position: center;
  }

  /* Z pilulek na artu se stanou klasické argumentové karty pod ním —
     odsazené od okrajů stránky jako každá jiná mřížka na webu. */
  .hero__panels {
    position: static; inset: auto;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin: var(--sp-6) var(--container-pad) 0;
    pointer-events: auto;
  }
  .hero__panel {
    position: static; margin: 0;
    width: auto; max-width: none;
    display: grid; gap: var(--sp-3); align-content: start;
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    box-shadow: none; backdrop-filter: none;
  }
  .hero__panel-icon {
    width: 38px; height: 38px; border-radius: var(--r-md);
    background: var(--green); color: var(--dark);
  }
  .hero__panel-qr {
    width: 38px; height: 38px; border-radius: var(--r-md);
    padding: 3px; border: 0;
  }
  .hero__panel-text { gap: 2px; min-width: 0; }
  .hero__panel-title { font-size: var(--fs-sm); color: var(--white); }
  .hero__panel-value { font-size: var(--fs-xs); color: rgba(255,255,255,.6); white-space: normal; }
  .hero__panel-caret { display: none; }

  /* Řada důvěryhodnosti: svislé linky by po zalomení visely na začátcích řádků. */
  .hero__trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .hero__trust li { padding-inline: 0; }
  .hero__trust li + li { border-left: 0; }

  /* Přepínač scén se na mobilu nedá ovládat — hover neexistuje a odkaz na
     tutéž stránku („Přehled“ na úvodu) nikam nevede. Zbydou čtyři odkazy na
     řešení a jdou pod text k fotce, kde nekonkurují nadpisu ani CTA.
     Vodorovný posuvný pás nad nadpisem tady byl dřív; ukazoval useknutou
     třetí pilulku, což vypadalo jako chyba, ne jako pozvánka ke swipu. */
  .hero__tabs { margin-top: var(--sp-7); }
  .hero__tabs-tato { display: none; }
  .hero__tabs ul {
    display: grid; grid-template-columns: 1fr 1fr;
    margin-inline: 0; padding-inline: 0;
  }
  .hero__tab {
    display: block; padding: .5rem .7rem; text-align: center;
    font-size: var(--fs-xs); line-height: 1.3;
  }

  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__trust { gap: var(--sp-2) var(--sp-5); }

  .features-featured { grid-template-columns: 1fr; }
  .features-featured .feature-big:last-child { flex-direction: column; }
  .features-featured .feature-big:last-child .feature-big__media { flex: none; aspect-ratio: 16 / 10; }
  .features-featured .feature-big:last-child .feature-big__icon { top: 0; left: var(--sp-5); transform: translateY(-50%); }
  .features { grid-template-columns: 1fr; }
  .feature { padding-inline: 0 !important; border-right: 0 !important; }
  .feature:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
  .feature:last-child { border-bottom: 0; }
  .mobile__visual .phone { position: static; width: 100%; max-width: 240px; margin: var(--sp-5) auto 0; }
  .eco__panels { grid-template-columns: 1fr; }
  .eco__device-id { width: 100%; }
  .why__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* Po zalomení do víc řad by svislé linky visely na začátcích řádků. */
  .references__list { gap: var(--sp-4) 0; }
  .references__item { padding-inline: var(--sp-5); }
  .references__item + .references__item { border-left: 0; }
}

@media (max-width: 560px) {
  /* Na úzkém mobilu se CTA do headeru nevejde — je dostupné v draweru i v heru. */
  .header__actions > .btn { display: none; }
  .hero__panels { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 419px) {
  /* Dva sloupce už jsou na název i hodnotu úzké — přejde to na lištu pod sebou. */
  .hero__panels { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Konverzní pás doprostřed stránky (sections/cta-band.php)

   Zadání kap. 19 chce CTA i „po důležitých produktových blocích“. Pás je proto
   nízký a jednořádkový — nemá konkurovat patnímu bloku s fotkou, jen zachytit
   čtenáře uprostřed. Tečkovaná spojnice je tentýž kreslený tah jako v cyklu.
   ========================================================================== */

.cta-band {
  background: var(--dark);
  color: rgba(255, 255, 255, .78);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
}

.cta-band__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--white);
}
.cta-band__lead {
  max-width: 52ch;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .68);
}
.cta-band .eyebrow { color: var(--green); }

/* Dekorace: tečkovaná dráha od textu k tlačítku — tentýž kreslený tah jako
   v životním cyklu. Kreslí ji řada tlačítek, ne vlastní prvek v mřížce: jako
   flex položka sedí přesně na jejich ose. Na středu mřížky by visela o kus níž,
   protože sloupec s textem je vyšší než sloupec s tlačítky. */
.cta-band .btn-row::before {
  content: "";
  align-self: center;
  width: clamp(40px, 7vw, 110px);
  margin-right: var(--sp-2);
  border-top: 2px dotted rgba(86, 206, 143, .5);
}

.cta-band__actions { display: grid; justify-items: start; gap: var(--sp-3); }
.cta-band__actions .btn-row { align-items: center; }
/* Korektura 3. 9. 2026: „Nebo nám rovnou zavolejte na…“ bylo v --fs-xs (13 px)
   a zadavateli přišlo moc malé — je to druhá konverzní cesta, ne popisek. */
.cta-band__note {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .72);
}
.cta-band__note a { font-weight: 700; color: var(--white); text-decoration: underline; }
.cta-band__note a:hover { color: var(--green); }

/* ==========================================================================
   Formulář „Domluvit prezentaci“ (sections/kontakt-form.php)
   ========================================================================== */

.form-sekce { background: var(--surface); }

.form-sekce__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--sp-7), 5vw, var(--sp-10));
  align-items: start;
}

.form-sekce__text h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
.form-sekce__text .section__lead { max-width: 46ch; }

.form-sekce__points {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.form-sekce__points li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.form-sekce__points .icon {
  flex: none;
  margin-top: 3px;
  color: var(--green-ink);
}

.form-sekce__kontakt {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.form-sekce__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 600;
  color: var(--ink);
}
.form-sekce__kontakt a:hover { color: var(--green-ink); }
.form-sekce__kontakt .icon { color: var(--ink-faint); }

/* --- Vlastní formulář (znovupoužitelný, ne jen v téhle sekci) ------------- */

.form-blok {
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.form__radek { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.form__pole { margin-bottom: var(--sp-4); }
.form__pole label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.form__povinne { color: var(--green-ink); }

.form__pole input,
.form__pole select,
.form__pole textarea {
  width: 100%;
  min-height: 46px;
  padding: .6rem .875rem;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form__pole textarea { min-height: 120px; resize: vertical; }

/* Varianta bez JavaScriptu: nativní select aspoň se svou šipkou. S JS se skryje
   a nahradí ho .vyber níž — rozbalený nativní seznam kreslí operační systém a ten
   si do našeho UI nepustíme (totéž pravidlo jako u ikon). */
.form__pole select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
}

.form__pole input:focus,
.form__pole select:focus,
.form__pole textarea:focus {
  outline: none;
  border-color: var(--green-ink);
  box-shadow: 0 0 0 3px rgba(86, 206, 143, .25);
}

.form__souhlas { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-sm); }
.form__souhlas label { display: flex; align-items: flex-start; gap: var(--sp-3); }
.form__souhlas input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--green-ink); }
.form__souhlas a { color: var(--green-ink); text-decoration: underline; }

.form__odeslat { margin: 0; }
.form__odeslat .btn { width: 100%; }

/* --- Vlastní rozbalovací nabídka (nahrazuje nativní select) --------------- */

.vyber { position: relative; }

/* Nativní select zůstává v DOM kvůli odeslání formuláře, jen ho není vidět.
   `display: none` by ho v některých prohlížečích vyřadil z validace. */
.vyber--js select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vyber__tlacitko {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 46px;
  padding: .6rem .875rem;
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.vyber__tlacitko:hover { border-color: var(--ink-faint); }
.vyber__tlacitko:focus-visible,
.vyber__tlacitko[aria-expanded="true"] {
  outline: none;
  border-color: var(--green-ink);
  box-shadow: 0 0 0 3px rgba(86, 206, 143, .25);
}
.vyber__hodnota.is-prazdna { color: var(--ink-faint); }
.vyber__sipka { flex: none; color: var(--ink-muted); transition: transform var(--dur-fast) var(--ease); }
.vyber__tlacitko[aria-expanded="true"] .vyber__sipka { transform: rotate(180deg); }

.vyber__seznam {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.vyber__polozka {
  padding: .5rem .75rem;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  cursor: pointer;
}
/* Zvýraznění řídí klávesnice i myš (JS), ne :hover — jinak by se po pohybu myši
   a šipkách svítily dvě položky najednou. */
.vyber__polozka.is-zvyraznena { background: var(--green-soft); }
.vyber__polozka.is-vybrana { font-weight: 600; color: var(--green-deep); }
.vyber__polozka:first-child { color: var(--ink-faint); }

/* Honeypot — poctivý návštěvník ho nikdy neuvidí, robot ho vyplní. */
.form__past {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.zprava {
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
}
.zprava--ok    { color: var(--green-deep); background: var(--green-soft); border-left: 3px solid var(--green); }
.zprava--chyba { color: #7F1D1D; background: #FEE2E2; border-left: 3px solid #DC2626; }
.zprava a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   Poděkování po odeslání (dekujeme.php)
   ========================================================================== */

.dekujeme__inner { max-width: 620px; margin-inline: auto; text-align: center; }
.dekujeme__znak {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-5);
  color: var(--white);
  background: var(--green-deep);
  border-radius: 50%;
}
.dekujeme__znak .icon { width: 32px; height: 32px; }
.dekujeme .section__lead a { color: var(--green-ink); font-weight: 600; }
.dekujeme__akce { justify-content: center; margin-top: var(--sp-7); }

/* --- Zlomy --------------------------------------------------------------- */

@media (max-width: 899px) {
  /* Pás se skládá pod sebe — spojnice mezi textem a tlačítky ztrácí smysl. */
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band .btn-row::before { display: none; }
  .form-sekce__inner { grid-template-columns: 1fr; }
}

@media (max-width: 559px) {
  .form__radek { grid-template-columns: 1fr; gap: 0; }
  /* Zalomená tlačítka různé šířky vypadají jako nedopatření — a palec chce cíl. */
  .cta-band__actions { justify-items: stretch; width: 100%; }
  .cta-band__actions .btn { width: 100%; }
}

/* Zelená obchodní message pod nadpisem hero — landing pages ji mají z wireframu. */
.hero__message {
  margin-top: var(--sp-4);
  max-width: 34ch;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-head);
  color: var(--green);
}
@media (max-width: 1199px) {
  .hero__message { max-width: 52ch; }
}

/* ==========================================================================
   OBSAHOVÉ STRÁNKY — Kontakt, O TINOTE, Blog a detail článku
   Přibyly korekturou 1. 9. 2026: zadavatel u položek menu napsal „připravit
   stránku kontaktu“, „připravit stránku s tímto textem“ a „připravit výpis
   článků dle designu z HP a také detail článku“. Vizuální slovník je proto
   půjčený ze sekcí, které už na webu stojí — nic nového se nevymýšlelo.
   ========================================================================== */

/* Hlavička obsahové stránky — hraje roli hero, ale bez artu a bez tmavé plochy. */
.page-head { padding-top: var(--sp-9); }
.page-head h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.page-head__note {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-muted);
  background: var(--green-soft); border-radius: var(--r-md);
}
.page-head__note .icon { flex: none; color: var(--green-ink); }

/* --- Kontakt -------------------------------------------------------------- */
.kontakt__karty { margin-top: var(--sp-8); }
.kontakt__karta { gap: var(--sp-2); }
.kontakt__ikona {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--green); color: var(--ink);
}
.kontakt__title { font-size: var(--fs-body); color: var(--ink-muted); font-weight: 600; }
.kontakt__hodnota { font-size: 1.25rem; font-weight: 700; color: var(--ink-strong); }
.kontakt__hodnota a { color: inherit; }
.kontakt__hodnota a:hover { color: var(--green-ink); }
.kontakt__hodnota--adresa { font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-body); }
.kontakt__note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-muted); }

/* --- O TINOTE -------------------------------------------------------------
   Korektura 3. 9. 2026: *„je to ok, ale je to děsně roztahané, trochu odvzdušnit,
   aby to bylo víc jako článek, ale drželo si to, co to má, i včetně těch panelů.“*
   Stránka je textová, ne prodejní — sekční rytmus webu je na ni moc velkorysý.
   Mění se jen odsazení, velikost nadpisů a šířka sloupce; karty zůstávají. */
.page-o-tinote .section { padding-block: clamp(2.25rem, 1.5rem + 1.6vw, 3.25rem); }
.page-o-tinote .page-head { padding-top: var(--sp-8); padding-bottom: var(--sp-5); }
.page-o-tinote .section__head { margin-bottom: var(--sp-5); }
.page-o-tinote .section__head h2 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); }
.page-o-tinote .page-head h1 { font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); }
.page-o-tinote .section__lead { max-width: 68ch; }
.page-o-tinote .grid { gap: var(--sp-4); }
.page-o-tinote .dlazdice__karta { padding: var(--sp-5); }

/* Výčet ze zadavatelova textu čte se jako odstavec, ne jako dlouhý sloupec —
   pět odrážek pod sebou dělalo z každé sekce půl obrazovky. */
/* Selektor musí být dvojitý: landing.css se načítá až po sections.css, takže
   `.dlazdice__list { display: grid }` by při stejné specificitě vyhrál — a s
   gridem se `columns` neuplatní, výčet by zůstal jedním dlouhým sloupcem. */
.page-o-tinote .o-tinote__vycet {
  display: block;
  max-width: 74ch; margin-top: var(--sp-4);
  columns: 2; column-gap: var(--sp-8);
  font-size: var(--fs-body); color: var(--ink);
}
.page-o-tinote .o-tinote__vycet > li + li { margin-top: var(--sp-2); }
.o-tinote__vycet > li { break-inside: avoid; }

@media (max-width: 699px) {
  .page-o-tinote .o-tinote__vycet { columns: 1; }
}

/* --- Detail článku -------------------------------------------------------- */
.clanek__inner { max-width: 760px; }
.clanek__zpet { margin-bottom: var(--sp-6); }
/* Šipka zpět míří doleva — stejná ikona, jen otočená. */
.arrow-link--zpet .icon { transform: rotate(180deg); }
.arrow-link--zpet:hover .icon { transform: rotate(180deg) translateX(3px); }
.clanek__hlava .blog__cat { display: block; margin: 0 0 var(--sp-3); }
.clanek__title { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.clanek__foto { margin: var(--sp-7) 0 0; }
.clanek__foto img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg);
}
.clanek__telo { margin-top: var(--sp-7); font-size: var(--fs-lead); color: var(--ink); }
.clanek__telo h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); }
.clanek__telo p { margin-top: var(--sp-4); line-height: var(--lh-body); }
.clanek__perex {
  padding-left: var(--sp-5); border-left: 3px solid var(--green);
  font-weight: 600; color: var(--ink-strong);
}
/* --- Právní text (zásady zpracování) -------------------------------------- */
/* Sdílí typografii článku, jen si dokresluje seznamy — ty jsou v base.css
   globálně bez odrážek, a právní výčty se bez nich čtou špatně. */
.pravni__telo ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.pravni__telo ul > li { position: relative; padding-left: var(--sp-5); line-height: var(--lh-body); }
.pravni__telo ul > li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
}
.pravni__telo a { color: var(--green-ink, inherit); text-decoration: underline; }
/* --- Výpis cookies (CookieScript) ----------------------------------------- */
/* Skript si nese vlastní <style>, který se vkládá až do <body> — tedy ZA náš
   stylesheet. Se stejnou specificitou by vyhrál on, proto jdou selektory přes
   dvě třídy (.cookie-report + jejich vlastní); přebijí jeho jednu bez !important.
   Typografie kopíruje právní text kolem, ať výpis nevypadá jako cizí těleso. */
.cookie-report { margin: var(--sp-6) 0 var(--sp-4); font-family: var(--font); font-size: var(--fs-body); }
.cookie-report * { font-family: var(--font); }

/* Řádek s kategoriemi + tlačítko Uložit */
.cookie-report ._CookieScriptReportPageCheckboxes {
  margin: 0 0 var(--sp-5);
  gap: var(--sp-3) var(--sp-6);
  align-items: center;
}
.cookie-report ._CookieScriptReportPageCheckbox { margin: 0; }
.cookie-report ._CookieScriptReportPageCheckboxLabel { gap: var(--sp-2); cursor: default; }
.cookie-report ._CookieScriptReportPageCheckboxInput {
  transform: none;                 /* jejich scale(1.5) dělá rozmazaný checkbox */
  width: 18px; height: 18px;
  accent-color: var(--green);
  margin: 0;
}
.cookie-report ._CookieScriptReportPageCheckboxText {
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* „Uložit" — vzhled .btn--primary */
.cookie-report ._CookieScriptReportPageSaveSettingButton {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: .7rem 1.35rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cookie-report ._CookieScriptReportPageSaveSettingButton:hover {
  background: var(--ink-strong);
  box-shadow: var(--shadow-md);
}

/* ID souhlasu — technický údaj, drží se vzadu */
.cookie-report ._CookieScriptReportPageConsentKey {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: var(--lh-body);
  word-break: break-word;
}

/* Nadpis kategorie (h4 z jejich šablony) — o stupeň níž než naše h2 sekcí */
.cookie-report h4 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-strong);
}

/* Tabulka cookies */
.cookie-report ._CookieScriptReportPageTable {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
}
.cookie-report ._CookieScriptReportPageTableTh {
  background: var(--surface);
  text-align: left;
  color: var(--ink-strong);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cookie-report ._CookieScriptReportPageTableTd {
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  vertical-align: top;
}
.cookie-report ._CookieScriptReportVendorName { font-weight: 600; color: var(--ink); }
.cookie-report ._CookieScriptReportVendorName a,
.cookie-report a { color: var(--green-ink); text-decoration: underline; }

/* Mobil: čtyři sloupce se do šířky nevejdou → vodorovný scroll jen tabulky,
   ať se nerozjede celá stránka (html/body mají overflow-x: hidden). */
@media (max-width: 720px) {
  .cookie-report ._CookieScriptReportPageTable { display: block; overflow-x: auto; white-space: nowrap; }
  .cookie-report ._CookieScriptReportPageTableTd { white-space: normal; min-width: 190px; }
}

.pravni__datum {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-muted);
}

.clanek__dalsi { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.clanek__dalsi-title { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.clanek__dalsi .blog__grid { grid-template-columns: repeat(2, 1fr); }

/* Výpis článků má vlastní odsazení od hlavičky stránky. */
.page-blog .blog__grid { margin-top: var(--sp-8); }

@media (max-width: 899px) {
  .kontakt__karty { grid-template-columns: 1fr; }
  .page-blog .blog__grid, .clanek__dalsi .blog__grid { grid-template-columns: 1fr; }
}