/* =====================================================================
   INOVATIVA — značkové barvy (brand colors)
   ---------------------------------------------------------------------
   Tohle je JEDINÉ místo, kde se mění barevnost celého webu.
   Šablona Ohio používá centrální proměnnou --clb-color-primary,
   takže stačí ji přepsat a přebarví se ~46 míst najednou
   (tlačítka, odkazy, ikony, kruh v hero sekci, gradienty...).
   Tento soubor je připojen JAKO POSLEDNÍ, proto vyhrává nad šablonou.
   ===================================================================== */

/* MOBIL: full-bleed sekce (width:100vw) přetékají o šířku scrollbaru (~8-15px),
   což na mobilu způsobuje vodorovné posouvání celé stránky. `overflow-x: clip`
   na body ho zabrání. Používáme clip (ne hidden), protože clip nevytváří scroll
   kontejner, takže neruší position:sticky ani svislé rolování. */
html, body { overflow-x: clip; }

/* MOBIL: filtry blogu jsou textová tlačítka (~19px vysoká) — na dotyk malá plocha.
   Na mobilu přidáme svislý padding, aby tap-plocha byla ~40px (WCAG).
   !important, protože galerijní <style> je inline v těle a jinak přebíjí. */
@media (max-width: 600px) {
  .inv-blog-galerie .inv-blog-fbtn { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* Nadpisový font: Space Grotesk (variabilní, moderní bezpatkový, PLNÁ česká
   diakritika — č/š/ž/ř/ě/ů/ď/ť/ň). Je to font sloganu z loga, takže nadpisy
   ladí s hero nápisem i logem. Nahrazuje Blacker Pro Display, který české háčky
   neobsahoval. Ponecháváme původní název rodiny 'blacker_pro_display-bold',
   aby fungovaly všechny existující odkazy bez úprav selektorů.
   Lokální woff2 (žádná závislost na CDN), podporují ho všechny moderní
   prohlížeče (Chrome, Safari, Firefox, Edge). Podmnožiny: latin + latin-ext. */
@font-face {
  font-family: 'blacker_pro_display-bold';
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'blacker_pro_display-bold';
  src: url(../fonts/space-grotesk-latinext.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Primární značková barva (původně červená #D91842) */
  --clb-color-primary: #235AB6;        /* střední modrá */

  /* Barva odkazu při najetí myší (hover) — tmavší modrá */
  --clb-color-link-hover: #2A479E;

  /* Gradient Inovativy (tmavá -> světlá) pro vlastní použití */
  --inv-grad-from: #2A479E;            /* tmavší modrá */
  --inv-grad-to:   #2D80C9;            /* světlejší modrá */
  --inv-gradient: linear-gradient(135deg, var(--inv-grad-from) 0%, var(--inv-grad-to) 100%);

  /* Sjednocení poloměru tlačítek na všech stránkách.
     Titulka používá 28px (plně kulaté „pilulky"), některá demo stránka
     (např. kontakt) si ho přepisuje na 16px. Tady ho vracíme zpět na 28px,
     aby buttony vypadaly všude stejně jako na titulce. */
  --clb-button-border-radius: 28px;
  --clb-button-border-radius-small: calc(28px / 2);
  --clb-button-border-radius-large: calc(28px * 2);

  /* Standard vertical gap between content sections.
     Apply as: padding: var(--inv-section-gap) 0;
     Override locally only when blocks intentionally touch (e.g. edge-to-edge map). */
  --inv-section-gap: 8vh;
}

/* Note: Ohio sets padding-bottom: var(--clb-grid-gutter) = 16px on all
   .clb__section.vc_section (specificity 0,3,0). Override per-section using
   .vc_section.clb__section.inv-<name> selectors (same specificity, later in DOM = wins).
   Do NOT add a global padding override here — WPBakery spacers already control
   vertical rhythm on most pages and a global rule would double the gap. */

/* --- Mega menu služeb (.inv-mega = Ohio .sub-menu-wide s vlastním rozložením) ---
   Kompaktní sevřený panel ve stylu Simpless: kratší náhled vlevo + sloupce
   odkazů + modrý CTA box vpravo. Panel necháme úzký a vycentrovaný (ne přes
   celou šířku okna), aby menu nebylo zbytečně velké. --- */
/* Menu kontejner = vztažný bod pro vycentrování panelu; službové položky
   nastavíme na static, aby se panel pozicioval vůči #menu-primary (ne vůči
   úzké položce). Panel se tak přilepí přímo pod lištu (bez mezery → není
   potřeba „můstek", který dřív překrýval ostatní položky a rozbíjel hover). */
.header:not(.-mobile) #menu-primary {
  position: relative;
}
.header:not(.-mobile) #menu-primary > li.has-submenu:has(> ul.inv-mega) {
  position: static;
}
.header:not(.-mobile) .menu .sub-menu-wide.inv-mega {
  position: absolute !important;
  width: min(1180px, calc(100vw - 4vw)) !important;
  max-width: 1180px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  top: 100% !important;
  gap: 2.5vw;
  padding: var(--clb-spacer-7);
  justify-content: flex-start;
  align-items: stretch;
}
.header:not(.-mobile) .menu .sub-menu-wide.inv-mega > li {
  width: auto;
  flex: 0 0 auto;
  min-width: 160px;
  justify-content: flex-start;
}
/* Sloupec s náhledovým obrázkem — KRATŠÍ (landscape), nahoře.
   align-self:flex-start = dlaždice se neroztahuje na výšku vysokého menu. */
.header:not(.-mobile) .menu .sub-menu-wide.inv-mega > li.wide-menu-parent-meta {
  flex: 0 0 240px;
  max-width: 240px;
  margin-right: 1vw;
  align-self: flex-start;
}
/* object-fit:contain = celá dlaždice je vždy vidět (nic se neořízne, číslo
   v rohu i popisek dole zůstanou čitelné), tmavé pozadí vyplní úzké okraje. */
.header:not(.-mobile) .menu .sub-menu-wide.inv-mega > li.wide-menu-parent-meta > img {
  width: 100%;
  height: 180px !important;
  min-height: 0;
  max-height: 180px;
  border-radius: var(--clb-border-radius);
  object-fit: contain;
  background: #0c1836;
}
/* Nadpis sloupce (Co vyvíjíme, Jak pracujeme…) */
.header:not(.-mobile) .menu .sub-menu-wide.inv-mega > li > a.wide-menu-head {
  opacity: 1;
  font-weight: 700;
  color: var(--clb-color-primary);
  margin-bottom: 0.4rem;
  pointer-events: none;
}
/* Odkazy ve sloupci — po najetí modré */
.header:not(.-mobile) .menu .sub-menu-wide.inv-mega ul a.menu-link:hover span {
  color: var(--clb-color-primary);
}

/* Modrý CTA box vpravo (jako Simpless newsletter) */
.header:not(.-mobile) .menu .sub-menu-wide.inv-mega > li.inv-mega-cta {
  flex: 0 0 260px;
  max-width: 260px;
  margin-left: auto;
}
.inv-mega-cta-box {
  background: var(--inv-gradient);
  border-radius: var(--clb-border-radius);
  padding: 1.5rem;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.inv-mega-cta-label {
  font-size: 0.78rem;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}
.inv-mega-cta-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.inv-mega-cta-box p {
  font-size: 0.85rem;
  opacity: 0.9;
  margin: 0 0 1rem;
}
.inv-mega-cta-btn {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  background: #fff !important;
  color: #16308A !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  text-decoration: none;
}
.inv-mega-cta-btn:hover {
  background: #fff !important;
  color: #235AB6 !important;
  box-shadow: 0 6px 16px rgba(10, 20, 50, 0.22);
}

/* --- Hamburger menu: skryté dlaždicové obrázky (menu-tile-*.svg) ---
   Dlaždice mega menu dávají smysl jen v desktopovém horizontálním mega menu
   (#menu-primary). V hamburger menu (mobilní #mobile-menu i desktopový
   popup #secondary-menu) je nechceme, ať je seznam čistě textový.
   #menu-primary záměrně necháváme být. */
#mobile-menu .wide-menu-parent-meta,
#secondary-menu .wide-menu-parent-meta {
  display: none;
}
/* V mobilním menu (#mobile-menu) skryj i CTA boxy mega menu („Máte proces pro AI?" atd.) —
   na malém displeji ruší. Desktopové horizontální mega menu (#menu-primary) si je nechává. */
#mobile-menu .inv-mega-cta {
  display: none;
}

/* --- Desktop hamburger popup (#secondary-menu) → mega menu s bočním flyoutem ---
   Levý sloupec = číslované hlavní položky (menší font); po najetí na položku
   se vpravo ukáže její podmenu ve 2 sloupcích (Řešení / Konkrétně), jako
   klasické mega menu. Bez dlaždice (skryto výše) a bez CTA boxu.
   Platí JEN pro desktop hamburger popup (.hamburger-nav), NE pro mobilní
   #mobile-menu (tam zůstává rozbalovací seznam) ani desktop #menu-primary. */
/* Menší font hlavních položek (theme má 5vh ≈ 45px). */
.hamburger-nav #secondary-menu > li > a.main-menu-link {
  font-size: 28px;
}
/* „+" ikona hned za text — theme ji dává absolutně na pravý okraj položky
   (roztažené na 100 %), kde zasahovala do submenu. Static ji vloží do flexu
   za text, transform:none zruší absolutní vertikální posun (translateY). */
.hamburger-nav #secondary-menu > li > a.main-menu-link .has-submenu-icon {
  position: static !important;
  transform: none !important;
  margin-left: 0.4em !important;
}
/* Širší hover plocha položky = můstek k flyoutu (ať hover nepadá v mezeře). */
.hamburger-nav #secondary-menu > li.has-submenu {
  width: 100%;
}
/* Flyout: PEVNÁ pozice vlevo + 2 sloupce vedle sebe. Theme má submenu jako
   position:absolute; left:100% — u položky roztažené na 100% to flyout posílalo
   daleko vpravo mimo obraz, takže na hover „nic nevyskočilo". Pevné left ho
   drží na viditelném, konzistentním místě pro všechny položky. */
.hamburger-nav #secondary-menu > li.has-submenu > ul.inv-mega {
  left: 400px !important;
  right: auto !important;
  width: auto !important;
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
  opacity: 0 !important;          /* skryté, dokud na položku nenajedeš */
  visibility: hidden !important;
}
/* Submenu se ukazuje JEN na hover položky — ne na klik/aktivní stav, ať
   nezůstává „zaseknuté" a najetí na jinou položku vždy ukáže její podmenu.
   (ID v selektoru + !important přebijí theme pravidla .active / .visible.) */
.hamburger-nav #secondary-menu > li.has-submenu:hover > ul.inv-mega {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Bez CTA boxu (dlaždice skrytá výše). */
.hamburger-nav #secondary-menu ul.inv-mega > li.inv-mega-cta {
  display: none;
}
/* Širší sloupce podmenu, ať se texty tolik nezalamují (bez toho ~180px → zalomení). */
.hamburger-nav #secondary-menu ul.inv-mega > li {
  min-width: 250px !important;
}
/* Podmenu: STEJNÝ font jako hlavní menu — nadpisy i odkazy. Viditelný text
   hlavních položek (<span>) renderuje 'blacker_pro_display-bold' (ověřeno computed
   stylem + document.fonts: blacker je načtený), NE DM Sans z obalu <a>. Proto
   dáme podmenu taky blacker, ať fonty vypadají stejně. */
.hamburger-nav #secondary-menu ul.inv-mega a {
  font-family: 'blacker_pro_display-bold' !important;
}
/* Odkazy podmenu: menší než hlavní položky (28px), ale 22px — blacker je optický
   „display" font a na malé velikosti (16px) řídl / nevypadal jako hlavní menu.
   Na 22px se blacker projeví tučně stejně jako hlavní menu. */
.hamburger-nav #secondary-menu ul.inv-mega ul a.menu-link {
  font-size: 22px !important;
  line-height: 1.3 !important;
}
/* Odkazy zarovnané vlevo pod nadpis sloupce (zruš zděděné odsazení vnořeného ul). */
.hamburger-nav #secondary-menu ul.inv-mega > li > ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}
/* Celé menu výš — bylo svisle vycentrované (align-items:center), a tím moc nízko. */
.hamburger-nav .hamburger-nav-holder {
  align-items: flex-start !important;
  padding-top: 90px !important;
}
/* Kontaktní sloupce v patičce hamburgeru na obsahovou šířku + malá mezera.
   Theme dává width:33.33 % → sloupce ~610px široké, texty krátké, takže mezi
   „Pracovní dotazy" a „Kontakt" byla velká prázdná plocha. */
.hamburger-nav .hamburger-nav-details .details-column {
  width: auto !important;
  margin-right: 56px !important;
}

/* --- Místa, kde měla šablona barvu zapsanou "natvrdo" (ne přes proměnnou) --- */

/* Barevný blok (Elementor widget), který měl pevně červené pozadí */
.elementor-227372 .elementor-element.elementor-element-afc5de3 > .elementor-widget-container {
  background-color: var(--clb-color-primary);
}

/* --- Titulka: tlačítko „Prozkoumejte" v hero sekci bílé (na modrém pozadí vynikne).
   Cíleno na konkrétní widget (5798297); vyšší specificita (:not řetězec)
   a `background` shorthand, aby přebilo Ohio pravidlo s var(--clb-color-primary).
   Ostatní tlačítka zůstávají modrá. --- */
body:not(.dark-scheme) .elementor-227372 .elementor-element-5798297 .button:not(.-flat):not(.-text):not(.-outline):not(.-link):not(.btn-optional):not(.search-submit) {
  background: #fff !important;
  color: var(--clb-color-primary) !important;
}
body:not(.dark-scheme) .elementor-227372 .elementor-element-5798297 .button:not(.-flat):not(.-text):not(.-outline):not(.-link):not(.btn-optional):not(.search-submit):hover {
  background: rgba(255, 255, 255, 0.88) !important;
}
.elementor-element-5798297 .button .icon {
  color: var(--clb-color-primary) !important;
}

/* --- Velikost loga v hlavičce ---
   Logo Inovativa "inovativa · AI STUDIO" je širší než původní Ohio logo,
   proto ho v hlavičce mírně zmenšíme, aby nedoráželo na menu. */
.branding .logo img,
.branding .logo-mobile img,
.branding .logo-dynamic img,
.branding .svg-logo {
  min-height: 0 !important;
  max-height: 50px !important;   /* o 25 % větší než původních 40 px */
  width: auto !important;
}

/* --- Stránky s tmavým hero (třída `inv-dark-hero` na <body>) ---
   Když je hlavička nahoře v průhledné poloze nad tmavou fotkou, zobrazíme
   SVĚTLÉ (bílé) logo, aby vyniklo. `light-scheme-logo` = tmavé logo (pro světlé
   pozadí), `dark-scheme-logo` = bílé logo (pro tmavé pozadí).
   Po odscrollování hlavička zbělá (.-sticky) → vrátí se tmavé logo (čitelné). */
body.inv-dark-hero #masthead:not(.-sticky) .light-scheme-logo {
  display: none !important;
}
body.inv-dark-hero #masthead:not(.-sticky) .dark-scheme-logo {
  display: inline-block !important;
}
/* Nad tmavým hero: nav linky, hamburger a jazykový přepínač bílé;
   po odscrollování (#masthead.-sticky) se vrátí normální tmavá verze. */
body.inv-dark-hero #masthead:not(.-sticky) .menu:not(.mobile-menu) > li > a {
  color: #fff !important;
}
body.inv-dark-hero #masthead:not(.-sticky) .hamburger.icon-button {
  color: #fff !important;
}
body.inv-dark-hero #masthead:not(.-sticky) .inv-lang-globe {
  color: #fff !important;
}

/* --- Adaptivní kontrast dle podkladu (JS: inovativa-adaptive-header.js) ---
   inv-hdr-dark    = hlavička je nad tmavým podkladem (JS zapíná jen dokud není sticky)
   inv-social-dark = sociální lišta je nad tmavým podkladem.
   Zobecňuje ruční inv-dark-hero: funguje na každé stránce a v obou režimech webu,
   protože JS čte skutečnou barvu podkladu (hero, tmavé pásy, i tmavý režim). */
body.inv-hdr-dark #masthead .light-scheme-logo { display: none !important; }
body.inv-hdr-dark #masthead .dark-scheme-logo { display: inline-block !important; }
body.inv-hdr-dark #masthead .menu:not(.mobile-menu) > li > a { color: #fff !important; }
body.inv-hdr-dark #masthead .hamburger.icon-button { color: #fff !important; }
body.inv-hdr-dark #masthead .inv-lang-globe { color: #fff !important; }
body.inv-hdr-dark #masthead .inv-client { color: #fff !important; }
body.inv-hdr-dark #masthead .inv-client:hover { color: #fff !important; opacity: 1; }

body.inv-social-dark .elements-bar.right .social-bar-holder.icons,
body.inv-social-dark .elements-bar.right .social-bar-holder.icons .caption,
body.inv-social-dark .elements-bar.right .social-bar-holder.icons .inv-social {
  color: #fff !important;
}

/* --- Kontakt: přeřazení bloků přes flex/order ODSTRANĚNO (1. 7.) ---
   Stránka je teď postavená ve správném DOM pořadí (hero → formulář → blok 26
   → mapa → FAQ → kariéra), takže reorder už není potřeba a škodil by. */

/* --- Kontakt: o něco vyšší hero banner ---
   Aby nadpis i tlačítko v hero sekci končily na fotce s pohodlným spodním
   okrajem (víc fotky pod textem). Výchozí výška je 500px. */
.inv-contact .page-headline {
  min-height: max(620px, 68vh);
}

/* --- Vyhledávání: nadpis ve firemním (značkovém) přechodu ---
   Text nadpisu „Výsledky pro: …" vyplníme kobaltovým gradientem Inovativy
   přes background-clip:text (písmo se obarví gradientem místo plné barvy). */
.inv-search .page-headline .title,
.inv-novinky .page-headline .title,
.inv-zajimavosti .page-headline .title,
.inv-novinka .page-headline .title,
.inv-projekt .page-headline .title {
  background: var(--inv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- cisla (about-ver6): ve SVĚTLÉM režimu hlavní nadpis i nadpisy accordionu
   ve firemním přechodu. V tmavém režimu zůstávají bílé (modrý gradient by na
   tmavém nebyl čitelný). --- */
body:not(.dark-scheme) .inv-cisla .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-cisla .accordion-header,
body:not(.dark-scheme) .inv-cta-projekt .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-klienti .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-nadpis-velky .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-cta-stin .call-to-action h2.title,
body:not(.dark-scheme) .inv-recenze-avatar .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-recenze-foto .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-reference .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-schopnosti .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-sluzby-foto .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-sluzby-nadpis .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-sluzby-seznam .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-sluzby-tabulka .service-table .title,
body:not(.dark-scheme) .inv-studio .ohio-widget.heading .title,
body:not(.dark-scheme) .inv-hero-jednoduchy .page-headline .title {
  background: var(--inv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* tmavý režim: nadpis bílý (jinak by zůstal s transparentní výplní = neviditelný) */
body.dark-scheme .inv-hero-jednoduchy .page-headline .title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* --- Detail projektu: meta popisky (Strategy / Design / Client) v naší modré --- */
.inv-projekt .options-group .title {
  color: var(--clb-color-primary) !important;
}

/* --- Detail článku: i nadpisy uvnitř textu (h2/h3/h4) ve firemním přechodu --- */
.inv-novinka .entry-content h2,
.inv-novinka .entry-content h3,
.inv-novinka .entry-content h4 {
  background: var(--inv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Proces (blok 35): nadpisy karet (Provozní efektivita, …) ve firemním přechodu --- */
.inv-proces .icon-box-heading {
  background: var(--inv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* tmavý režim: nadpisy bílé (gradient by na tmavém pozadí nebyl čitelný) */
body.dark-scheme .inv-proces .icon-box-heading {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* --- projekt-intro (blok 37): hlavní nadpis ve firemním přechodu (světlý režim),
   v tmavém režimu bílý. Menší nadpisy (Zadání, Strategie…) zůstávají beze změny. */
body:not(.dark-scheme) .inv-projekt-intro .headline {
  background: var(--inv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.dark-scheme .inv-projekt-intro .headline {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
/* Nadpisy v tmavém režimu vždy bílé site-wide (přebije gradienty i inline styly).
   Výjimku (např. hero na titulce s modrým nadpisem) drží pravidla s vyšší specificitou. */
body.dark-scheme h1,
body.dark-scheme h2,
body.dark-scheme h3,
body.dark-scheme .ohio-widget.heading .title,
body.dark-scheme .call-to-action .title,
body.dark-scheme .headline {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
/* Gradient nadpisů (třída .inv-grad-nadpis) — globálně, jen ve světlém režimu.
   V tmavém režimu zůstávají bílé (pravidlo výše). Používá se místo per-page inline definic. */
body:not(.dark-scheme) .inv-grad-nadpis {
  background: linear-gradient(135deg, #2A479E 0%, #2D80C9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* CTA (call-to-action): tlačítko vertikálně na střed vedle víceřádkového textu.
   Jen na desktopu (řádkový layout); na mobilu se blok skládá do sloupce, tam necháváme vlevo. */
@media (min-width: 782px) {
  .ohio-widget.call-to-action { align-items: center; }
}
/* Světlý pruh (blok 45, .clb__light_section.vc_row-has-fill): bílé pozadí jen ve světlém režimu.
   Inline background:#ffffff byl odstraněn z HTML (kvůli cross-browser, Safari ho nepřebíjelo), barvu
   teď řídí tato třída. V tmavém režimu zůstává průhledný (splyne s tmavým tělem, text je světlý).
   Site-wide (~20 podstránek). */
body:not(.dark-scheme) .clb__light_section.vc_row-has-fill {
  background: #ffffff;
}
/* Procesní karty (blok „Jak pracujeme", .inv-proc-card) v tmavém režimu: tmavá karta místo bílé.
   Text je už světlý, mění se jen pozadí a rámeček. (vyvoj-aplikaci, ai-skoleni + EN klony) */
body.dark-scheme .inv-harmonika .inv-proc-card {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
/* FAQ na bílém pozadí (.inv-faq-light, vyvoj-aplikaci + app-development) v tmavém režimu ztmavit,
   jinak zůstane bílý blok se světle šedými akordeony a tmavým (neviditelným) textem. */
body.dark-scheme .inv-faq-light,
body.dark-scheme .inv-faq-light .e-con-inner,
body.dark-scheme .inv-faq-light .e-con { background: transparent !important; }
body.dark-scheme .inv-faq-light .ohio-widget.heading .title {
  background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important;
}
body.dark-scheme .inv-faq-light .elementor-widget-text-editor p { color: rgba(255, 255, 255, 0.7) !important; }
body.dark-scheme .inv-faq-light .accordion-item { background: rgba(255, 255, 255, 0.05) !important; }
body.dark-scheme .inv-faq-light .accordion-header {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
body.dark-scheme .inv-faq-light .accordion-body p {
  color: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
/* Proces (blok 35): zaoblený čtverec ikony ve firemním přechodu (místo černé),
   samotná ikona zůstává bílá pro kontrast. */
.inv-proces .icon-group.-contained {
  background: var(--inv-gradient) !important;
}
.inv-proces .icon-group.-contained .icon {
  color: #fff !important;
}

/* --- Detail s fotkou v hero (inv-dark-hero): hlavní nadpis BÍLÝ ---
   Přes tmavou fotku by gradient nebyl čitelný, proto bílá. Světlé logo a
   klientskou zónu řeší pravidla pro inv-dark-hero výše. */
body.inv-dark-hero .page-headline .title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* --- Detail s fotkou v hero: vyšší hero, aby se do něj vešla i svislá
   lišta „Sledujte nás" (fixní na pravém okraji, vycentrovaná na výšku). --- */
.inv-novinka.inv-dark-hero .page-headline {
  min-height: 575px;
}

/* --- Svislá lišta „Sledujte nás" nad tmavým hero = bílá (čitelná na fotce).
   Platí jen dokud je hlavička nahoře (není sticky = hero je v záběru);
   po odscrollování (.-sticky) se vrátí výchozí tmavě šedá na bílém obsahu. --- */
body.inv-dark-hero:has(#masthead:not(.-sticky)) .elements-bar.right .social-bar-holder.icons,
body.inv-dark-hero:has(#masthead:not(.-sticky)) .elements-bar.right .social-bar-holder.icons .caption {
  color: #fff !important;
}

/* --- Detail článku: skrýt sekci komentářů (zatím bez backendu) --- */
.inv-novinka #comments,
.inv-novinka .comments-link,
.inv-novinka .post-comments,
.inv-novinka .meta-item:has(a[href="#comments"]) {
  display: none !important;
}

/* --- Reference (fullscreen slider): social bar následuje barevné schéma slidu.
   Slider toggluje .dark-scheme na <body> podle aktuálního slidu. Logo i
   Klientská zóna se mění samy (Ohio), jen social bar zůstával tmavý —
   na tmavém slidu (.dark-scheme) ho proto zesvětlíme; na světlém zůstane tmavý. --- */
body.inv-slider.dark-scheme .elements-bar .social-bar-holder.icons,
body.inv-slider.dark-scheme .elements-bar .social-bar-holder.icons .caption {
  color: #fff !important;
}

/* Na světlém slidu (bez .dark-scheme) názvy projektů v naší modré
   (na tmavém zůstávají bílé). */
body.inv-slider:not(.dark-scheme) .portfolio-item .headline,
body.inv-slider:not(.dark-scheme) .portfolio-item .headline a {
  color: var(--clb-color-primary) !important;
}

/* --- Video blok: bez čárkovaného okraje (Ohio ho dává prázdnému video tlačítku) --- */
.video-button {
  border: none !important;
}

/* --- Bloky: skrýt čárkovaný okraj sekcí (placeholder z Ohio/WPBakery) --- */
.vc_section.clb__section {
  border: none !important;
}

/* Sekce má přirozenou (vycentrovanou) šířku; vnitřní obsah rozšíříme
   symetricky zápornými okraji, takže je širší, ale zůstává na středu. */
.vc_section.clb__section > .vc_row.wpb_row {
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: calc((100% - min(1240px, 100vw - 48px)) / 2) !important;
  margin-right: calc((100% - min(1240px, 100vw - 48px)) / 2) !important;
}
.vc_section.clb__section .vc_row.vc_inner {
  max-width: none !important;
}
/* Bloky, jejichž hlavní řádek je uvnitř .wpb-content-wrapper (cisla-popis,
   cisla-progress), pravidlo výše (přímý potomek sekce) minulo → byly užší.
   Doženeme je na STEJNOU obsahovou šířku (1240, vycentrováno) jako ostatní.
   Pozn.: 1240 = šířka boxovaného Elementor obalu, aby WPBakery i Elementor
   bloky měly stejnou šířku napříč webem (sjednoceno 1.7.2026). */
.inv-cisla-popis > .wpb-content-wrapper > .vc_row.wpb_row,
.inv-dark-fullwidth > .wpb-content-wrapper > .vc_row.wpb_row,
.inv-schopnosti > .wpb-content-wrapper > .vc_row.wpb_row,
.inv-sluzby-nadpis > .wpb-content-wrapper > .vc_row.wpb_row,
.inv-sluzby-seznam > .wpb-content-wrapper > .vc_row.wpb_row {
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: calc((100% - min(1240px, 100vw - 48px)) / 2) !important;
  margin-right: calc((100% - min(1240px, 100vw - 48px)) / 2) !important;
}
/* schopnosti (blok 44): mírný okraj nahoře (sekce začínala těsně u horního kraje) */
.vc_section.clb__section.inv-schopnosti {
  padding-top: 5vh;
}
/* schopnosti: srovnání druhého řádku karet (Produkce / Kampaně). První karty
   (Strategie / Design) mají různě dlouhý text → různou výšku, takže druhý řádek
   začínal jinde. Sjednotíme min. výšku první karty v obou sloupcích. */
@media (min-width: 768px) {
  .inv-schopnosti .vc_col-sm-3 > .vc_column-inner > .wpb_wrapper > .vc_row.vc_inner:first-child {
    min-height: 252px;
  }
}
/* projekt-intro / projekt-popis (bloky 37, 38): obsah je v .page-container
   (ne ve vc_row), takže ho pravidla výše minula → byl užší (895px).
   Dotáhneme na STEJNOU obsahovou šířku 1140px (vycentrováno) jako ostatní bloky. */
.inv-projekt-intro > .page-container {
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: calc((100% - min(1240px, 100vw - 48px)) / 2) !important;
  margin-right: calc((100% - min(1240px, 100vw - 48px)) / 2) !important;
}

/* --- Záložky (tabs): aktivní záložka v naší modré místo černé --- */
.tabs-nav-line {
  background-color: var(--clb-color-primary) !important;
}

/* --- Services-table: po najetí myší světle modré zvýraznění karty --- */
.service-table:hover {
  background-color: rgba(35, 90, 182, 0.07) !important;
}

/* --- Kroky blok (.process): vycentrovaný obsah + nadpisy ve firemním přechodu --- */
.ohio-widget.process {
  text-align: center;
}
/* blok kroky: procesní text zarovnaný doleva (místo na střed) */
.inv-kroky .ohio-widget.process {
  text-align: left;
}

/* blok nadpis: zvýrazněné slovo v nadpisu má TEXT ve firemním přechodu
   (původně mělo gradient jako pozadí/marker za textem). Platí v obou režimech
   jako barevný akcent. */
.inv-nadpis .highlighted-text {
  background: var(--inv-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* blok loga: v tmavém režimu černá loga zbělají (jinak by splývala s pozadím).
   brightness(0) zčerná → invert(1) udělá bílé. */
body.dark-scheme .inv-loga .marquee-line img {
  filter: brightness(0) invert(1);
}
/* Nadpis procesu: ve světlém režimu gradient, v tmavém bílý (modrý gradient
   by na tmavém pozadí nebyl čitelný). */
body:not(.dark-scheme) .ohio-widget.process .process-headline {
  background: var(--inv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.dark-scheme .ohio-widget.process .process-headline {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* --- Portfolio (projekty) blok: názvy projektů v naší modré --- */
.portfolio-item .title,
.portfolio-item .title a {
  color: var(--clb-color-primary) !important;
}
/* Názvy PŘES fotku (overlay) jsou bílé — na fotce čitelnější než modrá. */
.portfolio-item .overlay-details .title,
.portfolio-item .overlay-details .title a {
  color: #fff !important;
}
/* Tmavý režim: názvy POD fotkou bílé (modrá by na tmavém pozadí splývala).
   Ve světlém režimu zůstávají modré (čitelné na bílém). */
body.dark-scheme .portfolio-item .title,
body.dark-scheme .portfolio-item .title a {
  color: #fff !important;
}

/* --- hero-foto / hero-text: sekce přes CELOU ŠÍŘKU okna (fotka edge-to-edge).
   Breakout z obsahového kontejneru přes 100vw + symetrické záporné okraje. --- */
.inv-hero-foto,
.vc_section.clb__section.inv-hero-text,
.vc_section.clb__section.inv-kontakt-foto,
.vc_section.clb__section.inv-parallax-laptop,
.vc_section.clb__section.inv-recenze-foto,
.vc_section.clb__section.inv-recenze,
.vc_section.clb__section.inv-telefony,
.vc_section.clb__section.inv-vyzva,
.vc_section.clb__section.inv-sekce-text,
.vc_section.clb__section.inv-sluzby-foto,
.vc_section.clb__section.inv-studio,
.vc_section.clb__section.inv-karty {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* studio-video (blok 51): obsah vpravo je teď u kraje okna — přidáme pravý okraj,
   ať text nezasahuje pod fixní lištu sociálních sítí u pravého kraje. */
@media (min-width: 992px) {
  .inv-studio .vc_row.wpb_row > .wpb_column:has(.ohio-widget.heading) {
    padding-right: 120px !important;
  }
}
/* parallax-laptop: fotka úplně po kraj okna (vnitřní sloupec má 16px odsazení,
   které by obrázek zúžilo) — vynulujeme ho, ať lícuje s krajem jako kontakt-foto. */
.inv-parallax-laptop .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* sekce-text (blok 45): tmavý pruh přes celou šířku okna — rovné rohy, tmavá
   výplň (na řádku) edge-to-edge a obsah vycentrovaný na standardní šířku 1140px. */
.vc_section.clb__section.inv-sekce-text {
  border-radius: 0 !important;
  padding: 0 !important;
}
.vc_section.clb__section.inv-sekce-text > .vc_row.wpb_row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}
/* zrušit vodorovný 6vw padding wrapperu a obsah vycentrovat na 1140 */
.inv-sekce-text > .vc_row.wpb_row > .wpb_column > .vc_column-inner > .wpb_wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.inv-sekce-text .vc_row.vc_inner {
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* recenze (blok 42): tmavý pruh přes celou šířku — rovné rohy (zaoblení z
   inv-dark-blok by na celé šířce vypadalo špatně) a obsah vycentrovaný na
   standardní šířku 1140px (jako u kontakt-foto). */
.vc_section.clb__section.inv-recenze,
.vc_section.clb__section.inv-telefony,
.vc_section.clb__section.inv-vyzva {
  border-radius: 0 !important;
}
.inv-telefony > .wpb-content-wrapper > .vc_row.wpb_row,
.inv-vyzva > .wpb-content-wrapper > .vc_row.wpb_row {
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.inv-recenze > .wpb-content-wrapper > .vc_row.wpb_row {
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* recenze: blok je VŽDY tmavý → všechny texty musí být světlé, jinak na tmavém
   pozadí zaniknou. Pozor: část testimonialů má v HTML rozbité třídy (kudrnaté
   uvozovky: ”ohio-widget, ”title…), takže cílíme na obecné tagy uvnitř bloku,
   ne na .ohio-widget.testimonial. */
.inv-recenze b,
.inv-recenze h1, .inv-recenze h2, .inv-recenze h3,
.inv-recenze h4, .inv-recenze h5, .inv-recenze h6,
.inv-recenze .clb-slider-pagination-index,
.inv-recenze .clb-slider-count-total {
  color: #fff !important;
}
/* karty-ilustrace: ilustrace vyplní CELOU VÝŠKU obrázkové části karty (po
   srovnání karet na stejnou výšku zůstávala dole mezera). Výška holderu je z
   min-height, takže procentní výška obrázku v toku nezabere → obrázek pozicujeme
   absolutně přes celý holder. object-fit:cover = bez deformace. */
.inv-karty .image-holder {
  position: relative !important;
  overflow: hidden;
}
.inv-karty .image-holder img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* hero-text: obsah (nadpis, podnadpis, tlačítko) zůstane v obsahové šířce. */
.inv-hero-text .parallax-content {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* kontakt-foto: fotka je na vnějším řádku (plná šířka), obsah je ve vnitřním
   řádku — ten necháme v obsahové šířce (1140, na střed), ať nelícuje s krajem.
   Vyšší specificita kvůli pravidlu .vc_section.clb__section .vc_row.vc_inner. */
.vc_section.clb__section.inv-kontakt-foto .vc_row.vc_inner {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Harmonika (horizontální akordeon): text (číslo, nadpis, popis) dostane
   vodorovné odsazení, aby nelícoval s krajem karty. Obrázek zůstává přes celou
   šířku karty (není v .process). --- */
.inv-harmonika .ohio-widget.process {
  padding-left: 44px;
  padding-right: 44px;
}

/* --- Galerie (metro): kulaté rohy dlaždic (obrázek drží .image-holder s overflow:hidden) --- */
.portfolio-item.-metro .image-holder {
  border-radius: 14px;
}

/* --- Progress blok: výplň pruhu ve firemním přechodu (místo modro-fialového) --- */
.progress-bar {
  background: linear-gradient(90deg, #2A479E 0%, #2D80C9 100%) !important;
}

/* --- Tmavé bloky (vyzva, telefony…): tmavé pozadí + světlý text.
   Originál má tmavou výplň přes WPBakery vc_custom styl, který se neextrahuje;
   doplníme ji tady scoped na blok. --- */
.inv-vyzva,
.inv-dark-blok {
  background: #111013;
  border-radius: var(--clb-border-radius);
}
/* --- cisla-progress: tmavé pozadí od kraje ke kraji + obsah na šířku obsahu ---
   Tmavou výplň ze sekce přesuneme do full-width ::before (100vw), bez rohů.
   Obsah (text + progress/čítače) zůstává v obsahové šířce a roztáhne se na ni. */
.inv-dark-fullwidth {
  position: relative;
  background: transparent !important;
  border-radius: 0 !important;
}
.inv-dark-fullwidth::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: #111013; z-index: 0;
}
.inv-dark-fullwidth .wpb-content-wrapper { position: relative; z-index: 1; }
/* obsah roztáhnout na celou obsahovou šířku (text vlevo, progress vpravo) */
.inv-dark-fullwidth .vc_custom_1627565169892 {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
}
.inv-dark-fullwidth .vc_custom_1627565169892 > .wpb_column { margin-left: 0 !important; }
.inv-dark-fullwidth .vc_custom_1627565169892 > .vc_col-sm-5 { width: 48%; }
.inv-dark-fullwidth .vc_custom_1627565169892 > .vc_col-sm-4 { width: 46%; }
.inv-vyzva .headline,
.inv-vyzva .title,
.inv-dark-blok .headline,
.inv-dark-blok .title {
  color: #fff;
}
.inv-vyzva .subtitle,
.inv-dark-blok .subtitle {
  color: rgba(255, 255, 255, 0.55);
}
.inv-vyzva p,
.inv-dark-blok p {
  color: rgba(255, 255, 255, 0.7);
}
.inv-vyzva p strong,
.inv-dark-blok p strong {
  color: #fff;
}
/* Progress popisek + procenta a čísla counterů na tmavém pozadí = bílé */
.inv-dark-blok .progress-heading .label,
.inv-dark-blok .progress-percent,
.inv-dark-blok .counter .number,
.inv-dark-blok .counter .counter-symbol {
  color: #fff !important;
}
/* plusko za číslem (.holder::after) — na tmavém pozadí bylo skoro černé
   (neviditelné). Tlumeně světlé jako v originálu, ale jasně čitelné. */
.inv-dark-blok .counter .holder::after {
  color: rgba(255, 255, 255, 0.7) !important;
}
/* Ikony counterů v naší modré */
.inv-dark-blok .counter .icon-group .icon,
.inv-dark-blok .counter .icon {
  color: var(--clb-color-primary) !important;
}
/* Award loga (oceneni) — menší, ať nepřetékají */
.inv-dark-blok .ohio-widget.logo img {
  max-height: 56px;
  width: auto;
}
/* Recenze (testimonials) na tmavém: štítky kategorií + šipky navigace bílé */
.inv-dark-blok .testimonial-headline b {
  color: #fff !important;
}
.inv-dark-blok .clb-slider-nav-btn,
.inv-dark-blok .prev-btn,
.inv-dark-blok .next-btn,
.inv-dark-blok .slider-nav .icon-button {
  color: #fff !important;
}
/* Tmavé bloky: Ohio JS roztáhne full-width řádek (data-vc-full-width) na šířku
   okna inline stylem (width:1628px) → přetéká. Přebijeme to a sevřeme obsah
   na šířku bloku. --- */
.inv-dark-blok .page-container,
.inv-dark-blok .wpb-content-wrapper {
  width: 100%;
  max-width: 100%;
}
.inv-dark-blok .vc_row.vc_row-fluid,
.inv-dark-blok .vc_row {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.inv-dark-blok .vc_col-sm-12 {
  width: 100% !important;
}

/* --- cisla-popis: čítače zarovnané doleva + větší mezera mezi nimi ---
   Původně 3 stejné sloupce (čítač, čítač, prázdný). Prázdný skryjeme,
   řádek dáme na flex zarovnaný doleva s větší mezerou. Skupina začíná
   na stejném levém okraji obsahu jako ostatní bloky (žádný posun). --- */
.inv-cisla-popis .vc_row.vc_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 80px;
}
.inv-cisla-popis .vc_row.vc_inner > .wpb_column {
  flex: 0 0 auto;
  width: auto;
  max-width: 290px;
}
.inv-cisla-popis .vc_row.vc_inner > .wpb_column:last-child { display: none; }

/* --- Ceník (inv-cenik): karty stejné výšky ---
   Sloupce roztáhneme na flex (stretch), karta vyplní výšku, tlačítko dolů. --- */
.inv-cenik .vc_row.vc_inner { display: flex; flex-wrap: wrap; align-items: stretch; }
.inv-cenik .vc_row.vc_inner > .wpb_column { display: flex; }
.inv-cenik .vc_row.vc_inner > .wpb_column > .vc_column-inner { display: flex; width: 100%; }
.inv-cenik .vc_row.vc_inner > .wpb_column > .vc_column-inner > .wpb_wrapper { display: flex; width: 100%; }
.inv-cenik .ohio-widget.pricing-table { width: 100%; display: flex; flex-direction: column; }
.inv-cenik .ohio-widget.pricing-table > .button { margin-top: auto; }
/* Tmavý režim: první karta (Zdarma) zůstává SVĚTLE ŠEDÁ jako ve světlé verzi
   (světlý tarif). Pozadí světlé + tmavý text (přebíjí dark-scheme bílou). */
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 {
  background-color: #f1f3f8 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 h5.title,
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 .price-number,
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 .pricing-table-details,
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 .pricing-table-features li.exist {
  color: #161519 !important;
}
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 .subtitle,
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 .pricing-table-features li:not(.exist) {
  color: #6a7180 !important;
}
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 .tag {
  color: #161519 !important;
  background-color: rgba(0, 0, 0, 0.07) !important;
}
body.dark-scheme .inv-cenik #ohio-custom-6a3171430aab1 .pricing-table-features li.exist .icon {
  color: var(--clb-color-primary) !important;
}
/* Tlačítka ceníku: na hover ŽÁDNÉ zvednutí/stín — jen změna barvy. */
.inv-cenik .ohio-widget.pricing-table .button {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
/* modré (Zdarma): hover tmavší modrá */
.inv-cenik #ohio-custom-6a3171430aab1 .button:hover {
  background-color: #1d3f8f !important;
  border-color: #1d3f8f !important;
}
/* bílá tlačítka (Essentials, Premium): hover světle modrá */
.inv-cenik #ohio-custom-6a3171430ae57 .button:hover,
.inv-cenik #ohio-custom-6a3171430b1e9 .button:hover {
  background-color: #d6e3f7 !important;
  border-color: #d6e3f7 !important;
}

/* --- Blog: fotky vždy viditelné ---
   Ohio obrázky článků skrývá (opacity 0 / visibility hidden) a odhaluje je
   JS až po načtení / při scrollu. V některých kontextech se to nespustí a fotky
   zůstanou skryté (šedá karta). Vynutíme jejich zobrazení. --- */
.blog-archive-image {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Blog karty s textem PŘES fotku (-layout4): text bílý (čitelný na fotce),
   nadpis po najetí kurzoru modrý. Layout6 (novinky) má text pod fotkou na
   světlém pozadí, ten nesaháme. */
.blog-item.-layout4 .card-details .date,
.blog-item.-layout4 .card-details .post-meta-estimate,
.blog-item.-layout4 .card-details .heading.title,
.blog-item.-layout4 .card-details .heading.title a {
  color: #fff !important;
}
.blog-item.-layout4:hover .card-details .heading.title a {
  color: var(--clb-color-primary) !important;
}
/* štítky (Digital, Marketing) bílé na poloprůhledné pilulce — čitelné na fotce */
.blog-item.-layout4 .card-details .tag {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.22) !important;
}
.blog-item.-layout4 .card-details .tag:hover {
  background-color: rgba(255, 255, 255, 0.34) !important;
}
/* Jemný tmavý přechod přes fotku (silnější dole u textu, mizí nahoře), aby byl
   bílý text čitelný i na světlých fotkách. Vždy viditelný (ne jen na hover). */
.blog-item.-layout4 .image-holder .overlay {
  background: linear-gradient(to top,
      rgba(12, 18, 38, 0.72) 0%,
      rgba(12, 18, 38, 0.44) 36%,
      rgba(12, 18, 38, 0.12) 64%,
      rgba(12, 18, 38, 0) 100%) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Banner blok: nadpisy v naší modré (scoped přes -with-icon-button-animation,
   ať se to nedotkne týmu/portfolia/blogu, které také používají .banner) --- */
.banner.-with-icon-button-animation .title,
.banner.-with-icon-button-animation .title a {
  color: var(--clb-color-primary) !important;
}
/* V tmavém režimu nadpisy banneru bílé (modrá by na tmavém pozadí splývala). */
body.dark-scheme .banner.-with-icon-button-animation .title,
body.dark-scheme .banner.-with-icon-button-animation .title a {
  color: #fff !important;
}

/* --- Accordion blok (Filled): pozadí položek v naší světle modré (místo šedé).
   Barvu dáváme JEN na celou položku; vnitřní prvky zprůhledníme, aby se
   pozadí za textem nevrstvilo (jinak je tmavší obdélník za nadpisem). --- */
.inv-accordion-fill .ohio-widget.accordion .accordion-item {
  background-color: rgba(35, 90, 182, 0.09) !important;
  border-radius: 14px;
}
.inv-accordion-fill .ohio-widget.accordion .accordion-header,
.inv-accordion-fill .ohio-widget.accordion .accordion-button,
.inv-accordion-fill .ohio-widget.accordion .accordion-collapse,
.inv-accordion-fill .ohio-widget.accordion .accordion-body {
  background-color: transparent !important;
}

/* --- Odkazy v obsahu v naší modré (Ohio měl zbytkovou růžovou #d85b76) --- */
.page-content a:not(.-unlink):not(.tag):not(.button),
.wpb-content-wrapper a:not(.-unlink):not(.tag):not(.button),
.elementor a:not(.-unlink):not(.tag):not(.button) {
  --clb-color-link: var(--clb-color-primary);
}

/* --- Team blok: kulaté rohy fotky --- */
.team-member.-with-overlay .image-holder {
  border-radius: 16px;
}

/* --- Team blok: po najetí myší overlay ve firemním přechodu (místo tmavé) ---
   Poloprůhledný (fotka prosvítá), vyjede přes CELOU fotku (shora dolů). --- */
.team-member.-with-overlay:hover .overlay-details {
  background: linear-gradient(135deg, rgba(42, 71, 158, 0.82) 0%, rgba(45, 128, 201, 0.82) 100%) !important;
  top: 0 !important;
  height: 100% !important;
}

/* --- Novinky / Zajímavosti: po najetí na článek zmodrá nadpis i štítky --- */
.inv-novinky .blog-item:hover .title a,
.inv-novinky .blog-item:hover .title,
.inv-zajimavosti .blog-item:hover .title a,
.inv-zajimavosti .blog-item:hover .title {
  color: var(--clb-color-primary) !important;
}
.inv-novinky .blog-item:hover .tag,
.inv-zajimavosti .blog-item:hover .tag {
  background-color: var(--clb-color-primary) !important;
  color: #fff !important;
  transition: background-color 0.2s, color 0.2s;
}

/* =====================================================================
   POPTÁVKOVÝ FORMULÁŘ (modal) — otevírá tlačítko „Ozvěte se"
   Vše scoped pod .inv-poptavka, aby nekolidovalo s Ohio styly.
   Markup vkládá JS (inovativa-dynamic-text.js) na všech stránkách.
   ===================================================================== */
.inv-poptavka {
  --c-l: #2D80C9; --c-d: #2A479E; --ink: #26303f; --muted: #6a7585; --field: #f1f4fa;
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 32px;
  background: rgba(8, 13, 32, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: 'Nunito', sans-serif;
}
.inv-poptavka[hidden] { display: none; }
.inv-poptavka * { box-sizing: border-box; }

.inv-poptavka .modal {
  position: relative; width: 600px; max-width: 100%; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 26px;
  box-shadow: 0 40px 90px rgba(6, 10, 26, .5), 0 4px 14px rgba(6, 10, 26, .3);
  animation: inv-pop .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes inv-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.inv-poptavka .head { position: relative; padding: 26px 34px 20px; border-bottom: 1px solid #eef1f7; }
.inv-poptavka .head .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.inv-poptavka .head .brand svg { display: block; }
.inv-poptavka .head .brand .bw { font-weight: 500; font-size: 19px; letter-spacing: -.005em; color: var(--ink); line-height: .9; }
.inv-poptavka .head .brand .bs { font-family: 'Space Grotesk', monospace; font-weight: 500; font-size: 7.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--c-d); margin-top: 4px; }
.inv-poptavka .head h2 {
  font-family: 'Nunito', sans-serif !important; font-weight: 800; font-size: 28px; letter-spacing: -.015em; margin: 0;
  /* Nadpis ve firemním přechodu (gradient text) */
  background: linear-gradient(120deg, var(--c-l), var(--c-d));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.inv-poptavka .head .sub { font-size: 14.5px; color: var(--muted); margin-top: 6px; }

.inv-poptavka .close {
  position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border: none; cursor: pointer; border-radius: 50%;
  background: linear-gradient(120deg, var(--c-l), var(--c-d)); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: filter .15s ease;
}
.inv-poptavka .close:hover { filter: brightness(1.08); }
.inv-poptavka .close svg { width: 15px; height: 15px; }

.inv-poptavka form { padding: 24px 34px 30px; }
.inv-poptavka .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inv-poptavka .full { grid-column: 1 / -1; }
.inv-poptavka .ctrl {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--field); border: 1.5px solid transparent; border-radius: 13px; padding: 13px 15px;
  transition: border-color .15s ease, background .15s ease;
}
.inv-poptavka .ctrl:focus-within { border-color: var(--c-l); background: #fff; }
.inv-poptavka .ctrl input, .inv-poptavka .ctrl select, .inv-poptavka .ctrl textarea {
  flex: 1; border: none; background: transparent; outline: none; width: 100%; margin: 0; min-height: 0; box-shadow: none;
  font-family: 'Nunito', sans-serif; font-size: 15.5px; color: var(--ink);
}
.inv-poptavka .ctrl input::placeholder, .inv-poptavka .ctrl textarea::placeholder { color: #9aa6b8; }
.inv-poptavka .ctrl select { color: #9aa6b8; cursor: pointer; -webkit-appearance: none; appearance: none; }
.inv-poptavka .ctrl select.filled { color: var(--ink); }
.inv-poptavka .ctrl.area { align-items: flex-start; }
.inv-poptavka .ctrl textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.inv-poptavka .ctrl .chev { position: absolute; right: 14px; pointer-events: none; color: #9aa6b8; }
.inv-poptavka .ctrl .flag { flex: 0 0 auto; border-radius: 3px; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.inv-poptavka .ctrl .pref { flex: 0 0 auto; color: var(--muted); font-weight: 600; font-size: 15.5px; }
.inv-poptavka .ctrl .divider { flex: 0 0 auto; width: 1px; height: 20px; background: #d8deec; }

.inv-poptavka .gdpr { display: flex; align-items: center; gap: 7px; justify-content: center; margin: 20px 0 16px; font-size: 12.5px; color: var(--muted); }
.inv-poptavka .gdpr .star { color: var(--c-l); font-weight: 800; }

/* Vícevýběr „Co vás zajímá" (mirror kontaktního formuláře, .inv-kf-multi) */
.inv-poptavka .inv-popt-multi { background: var(--field); border: 1.5px solid transparent; border-radius: 13px; overflow: hidden; }
.inv-poptavka .inv-popt-multi[open] { border-color: var(--c-l); background: #fff; }
.inv-poptavka .inv-popt-multi > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 15px; font-family: 'Nunito', sans-serif; font-size: 15.5px; color: #9aa6b8; }
.inv-poptavka .inv-popt-multi > summary::-webkit-details-marker { display: none; }
.inv-poptavka .inv-popt-multi.filled > summary .lbl { color: var(--ink); }
.inv-poptavka .inv-popt-multi > summary .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-poptavka .inv-popt-multi > summary .chev { flex: 0 0 auto; color: #9aa6b8; transition: transform .18s ease; }
.inv-poptavka .inv-popt-multi[open] > summary .chev { transform: rotate(180deg); }
.inv-poptavka .inv-popt-multi .opts { display: flex; flex-direction: column; padding: 2px 15px 12px; }
.inv-poptavka .inv-popt-multi .opts label { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 14.5px; color: var(--ink); }
.inv-poptavka .inv-popt-multi .opts input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--c-l); }

/* Souhlas GDPR (mirror kontaktního formuláře, .inv-kf-consent) */
.inv-poptavka .inv-popt-consent { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 16px; font-family: 'Nunito', sans-serif; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.inv-poptavka .inv-popt-consent input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--c-l); }
.inv-poptavka .inv-popt-consent a { color: var(--c-d); text-decoration: underline; }

.inv-poptavka .submit {
  width: 100%; border: none; cursor: pointer; font-family: 'Space Grotesk', monospace; font-weight: 600; font-size: 16px; color: #fff !important;
  padding: 16px; border-radius: 14px !important; background: linear-gradient(120deg, var(--c-l), var(--c-d)) !important;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 12px 26px rgba(42, 71, 158, .32); transition: filter .15s ease, transform .12s ease;
}
.inv-poptavka .submit:hover { filter: brightness(1.07); }
.inv-poptavka .submit:active { transform: translateY(1px); }
.inv-poptavka .submit svg { width: 18px; height: 18px; }
.inv-poptavka .dismiss {
  display: block; width: 100%; text-align: center; margin-top: 14px; background: none; border: none; cursor: pointer;
  font-family: 'Space Grotesk', monospace; font-size: 13px; color: #9aa6b8; transition: color .15s ease;
}
.inv-poptavka .dismiss:hover { color: var(--c-d); }

@media (prefers-reduced-motion: reduce) { .inv-poptavka .modal { animation: none; } }
@media (max-width: 560px) {
  .inv-poptavka .grid { grid-template-columns: 1fr; }
  .inv-poptavka .head, .inv-poptavka form { padding-left: 22px; padding-right: 22px; }
}

/* --- Přepínač režimu (Dark/Light): jen ikony, bez textových popisků --- */
.color-switcher .caption {
  display: none !important;
}

/* --- Přepínač jazyků: globus + aktuální jazyk + rozbalovací menu ---
   Návrh z Claude design. Barvu dědí z hlavičky (currentColor → funguje
   na světlém i tmavém pozadí), po najetí modrá. Menu je bílý popup. */
.inv-lang-globe {
  order: 3;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 20px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: currentColor;
  opacity: 0.85;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.inv-lang-globe:hover {
  color: var(--clb-color-primary);
  opacity: 1;
  background: rgba(136, 135, 137, 0.12);
}
/* svislý rozdělovač v mezeře mezi tlačítkem „Ozvěte se" a přepínačem */
.inv-lang-globe::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: currentColor;
  opacity: 0.18;
}
.inv-lang-globe .inv-lg-g { width: 18px; height: 18px; stroke: currentColor; fill: none; flex: 0 0 18px; }
.inv-lang-globe .inv-lg-cv { width: 13px; height: 13px; stroke: currentColor; fill: none; opacity: 0.7; transition: transform 0.2s; }
.inv-lang-globe.open .inv-lg-cv { transform: rotate(180deg); }
.inv-lang-globe .inv-lg-label { line-height: 1; }

/* rozbalovací menu (vždy bílý popup, čitelný i na tmavé hlavičce) */
.inv-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  min-width: 132px;
  padding: 6px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(30, 42, 80, 0.16);
}
.inv-lang-globe.open .inv-lang-menu { display: flex; }
.inv-lang-menu button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #1f2740;
  text-align: left;
  padding: 10px 14px;
  border-radius: 9px;
  transition: background 0.12s;
  white-space: nowrap;
}
.inv-lang-menu button:hover { background: #f3f6fb; }
.inv-lang-menu button.on { color: var(--clb-color-primary); }

/* --- Klientská zóna: decentní odkaz v hlavičce vlevo od „Ozvěte se" ---
   Tišší prvek (ikona zámku + text), barvu dědí z hlavičky (tmavá/světlá
   podle pozadí), po najetí myší zmodrá. */
.inv-client {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 18px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: currentColor;
  text-decoration: none;
  opacity: 0.85;
  transition: color 0.2s, opacity 0.2s;
}
.inv-client:hover {
  color: var(--clb-color-primary);
  opacity: 1;
}
.inv-client svg { flex: 0 0 auto; }
/* Na užších displejích necháme jen ikonu, ať se hlavička nepřeplní.
   Hranice 1400px: pod ní se horizontální menu jinak překrývalo s pravým
   blokem hlavičky (klientská zóna + CTA + jazyky). Skrytí textu klientské
   zóny uvolní ~80px a překryv v pásmu ~1300–1400 odstraní; pod 1300px
   pomáhá ještě mírné zmenšení fontu menu (níže). Nad 1400px beze změny. */
@media (max-width: 1400px) {
  .inv-client span { display: none; }
  .inv-client { margin-right: 12px; }
}
/* Doprovodné zúžení horizontálního menu v problémovém pásmu, ať se pravý
   blok hlavičky vejde bez překryvu (pod ~1150px už theme menu nestačí a
   správným řešením by byl hamburger, viz Known issues). Nad 1300px beze změny. */
@media (min-width: 1025px) and (max-width: 1300px) {
  #menu-primary > li > a.main-menu-link {
    font-size: 14px;
    letter-spacing: -0.01em;
  }
}
/* Na stránkách s tmavým hero (inv-dark-hero) má odkaz nahoře (průhledná
   hlavička) bílou barvu, ať je čitelný — stejně jako menu a logo.
   Po odscrollování (sticky, bílá hlavička) se vrátí tmavý přes currentColor. */
body.inv-dark-hero #masthead:not(.-sticky) .inv-client { color: #fff; }
body.inv-dark-hero #masthead:not(.-sticky) .inv-client:hover { color: #fff; opacity: 1; }

/* --- CTA tlačítko "Ozvěte se" v hlavičce: značkový přechod + jemný stín --- */
.button-group .button.btn-optional {
  background: #235AB6 !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(35, 90, 182, 0.28);
  transition: filter 0.15s, box-shadow 0.2s, transform 0.1s;
}
.button-group .button.btn-optional:hover {
  filter: brightness(1.07);
  box-shadow: 0 12px 26px rgba(35, 90, 182, 0.34);
  color: #fff !important;
}
.button-group .button.btn-optional:active {
  transform: translateY(1px);
}

/* --- Solidní (vyplněné) buttony: modré, po najetí myší černé ---
   Výchozí Ohio buttony jsou černé. Sjednocujeme je s tlačítkem „Ozvěte se":
   v základu modré (značková modrá), na hover černé.
   Outline/textová tlačítka (-flat, -text, -outline, -link) i vyhledávání
   necháváme být — ta nemají plné pozadí. */
.button:not(.-flat):not(.-text):not(.-outline):not(.-link):not(.btn-optional):not(.search-submit) {
  background-color: var(--clb-color-primary) !important;
  border-color: var(--clb-color-primary) !important;
  color: #fff !important;
  transition: background-color 0.2s, border-color 0.2s;
}
.button:not(.-flat):not(.-text):not(.-outline):not(.-link):not(.btn-optional):not(.search-submit):hover {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* --- Sociální ikony (Facebook, Instagram, LinkedIn) ---
   V základu šedé, po najetí kurzorem modré. */
.inv-social {
  color: inherit !important;   /* stejná barva jako okolní text (tmavá/světlá dle režimu) */
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}
.inv-social:hover {
  color: var(--clb-color-primary) !important;
}
/* Ikona = prázdné <i>, samotný tvar přes CSS mask z externího SVG.
   Barvu řídí background-color: currentColor → dědí barvu z .inv-social. */
.inv-ic {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: var(--inv-ic-url) center / contain no-repeat;
  mask: var(--inv-ic-url) center / contain no-repeat;
}
/* Vertikální social bar: odstranit dekorativní pomlčku za popiskem,
   vystředit ikony na osu textu a dát je blíž k sobě. */
.social-bar-holder .caption::after {
  content: none !important;
}
.social-bar-holder.icons {
  align-items: center !important;
}
.social-bar-holder.icons li {
  display: flex;
  justify-content: center;
  padding: 0 1px !important;   /* menší rozestup mezi ikonami */
}
.inv-social.facebook .inv-ic { --inv-ic-url: url(../loga/social/facebook.svg); }
.inv-social.instagram .inv-ic { --inv-ic-url: url(../loga/social/instagram.svg); }
.inv-social.linkedin .inv-ic { --inv-ic-url: url(../loga/social/linkedin.svg); }
.inv-social-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* --- Vertikální social lišta „Sledujte nás" (v hero sekci): tmavší šedá ---
   Místo výchozí světle šedé dáme ikonám i popisku brandovou tmavě šedou
   (#3A4150 = barva textu z loga). Ikony dědí barvu přes `.inv-social`
   (color: inherit), takže stačí nastavit barvu na celé liště + popisek.
   Po najetí myší zůstává modré zvýraznění (řeší `.inv-social:hover` výše). */
.social-bar-holder.icons {
  color: #3A4150;
}
.social-bar-holder.icons .caption {
  color: #3A4150 !important;
}

/* --- Hero nadpis s dynamickým textem: moderní bezpatičkový font ---
   Space Grotesk (geometrický sans, plná česká diakritika, font sloganu z loga).
   Blacker Pro (výchozí hero) háčky nemá, proto vlastní font. */
h1.title[data-inv-dynamic],
h1.title[data-inv-dynamic] .inv-dyn-word {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}
/* Menší hero nadpis na mobilu (výchozí 3em/48px byl moc velký). */
@media (max-width: 767px) {
  .elementor-227372 .elementor-element-6a126cd h1.title[data-inv-dynamic] { font-size: 2.35em !important; }
  /* Perex menší a užší, aby se vždy vešel do modrého kruhu a byl čitelný (bílý na modré).
     max-width dle měření: kruh je na úrovni perexu úzký, plná šířka přetékala do bílé. */
  .elementor-227372 .elementor-element-36e4a39,
  .elementor-227372 .elementor-element-36e4a39 p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 210px !important;
  }
  /* Tlačítko „Prozkoumejte" o 10 % menší (scale, zarovnané vlevo → poloha se nemění). */
  .elementor-227372 .elementor-element-5798297 a.button {
    transform: scale(0.9) !important;
    transform-origin: left center !important;
  }
}

/* --- Sjednocení levého odstupu obsahu na mobilu na ~33px (dle vzoru custom sekcí „32+") ---
   Web míchá dva systémy: custom WPBakery sekce mají 33px, Elementor obsah 16px. Elementor
   vnější kontejnery (.e-con.e-parent, jeden na sekci) dostanou +17px → obsah na 33px. Bez
   zřetězení (padding se přidá jen jednou na sekci). HERO (cc66a91) vyloučen — má vlastní
   vyladěné odsazení textu na modrém kruhu. Platí globálně na všech stránkách. */
@media (max-width: 767px) {
  .e-con.e-parent:not(.elementor-element-cc66a91) { padding-left: 17px !important; }
  /* Legal/jednoduché stránky (mapa-webu, obchodní podmínky, ochrana údajů) mají headline sekci
     s velkým horním odsazením (~117px) → na mobilu velká mezera pod drobečky. Zmenšíme.
     Zároveň levý odstup obsahu srovnáme na 33px (kontejner má levý okraj 16px + 17px padding),
     ať sedí se zbytkem webu. (Pilíře tuto strukturu nemají — selektor tam nic nematchuje, ověřeno.) */
  /* Spodní padding = 0: mezera nad patičkou pak = padding sekce (16px) + theme margin (42px)
     = 58px, stejně jako na normálních stránkách (sjednoceno). Horní padding zůstává 32px. */
  .vc_section.clb__section > .page-container { padding-top: 32px !important; padding-bottom: 0 !important; padding-left: 17px !important; }
}

/* Legal tabulky (cookies na ochrana-osobnich-udaju): na úzkých displejích místo
   stlačení sloupců do výšky nechat desktopovou šířku a scrollovat vodorovně. */
.inv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 20px; }
.inv-table-scroll > table { min-width: 640px; margin: 0 !important; }

/* Hero -> obsah: theme pod 1180px vkládá .page-headline::before = bílý pruh u dna hero
   se zaoblenými horními rohy (immersive přesah). Dělal zaoblený bílý přesah nad hero a
   na Retině subpixelový šedý šev. Po zploštění je pruh nadbytečný (kryje jen bílou obsahu),
   tak ho úplně odstraníme = rovný čistý přechod. Platí pro všechny hero sekce. */
@media (max-width: 1180px) {
  .page-headline::before { display: none !important; }
}

/* Přepínač světlý/tmavý režim v desktopové plovoucí liště (.elements-bar) měl skoro
   průhledný chip => splýval s pozadím (bílé kolečko na bílém obsahu, tmavá ikona na
   tmavém hero). Dáme mu výrazný samostatný chip (rámeček + stín), viditelný na světlém
   i tmavém pozadí. Icon color řeší theme dle režimu. */
.elements-bar .color-switcher {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(20, 28, 51, 0.14) !important;
  box-shadow: 0 6px 18px rgba(20, 28, 51, 0.18) !important;
}
body.dark-scheme .elements-bar .color-switcher {
  background: rgba(22, 30, 46, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
/* Na mobilu (<=768px) NESMÍ být přepínač režimu na ploše. Plovoucí lišta se natvrdo
   skryje, přepínač je jen v menu pod hamburgerem (tam ho přesune inovativa-mobile-header.js).
   Zabrání i tomu, aby výše nastavený chip zviditelnil stray přepínač, když by JS selhal. */
@media (max-width: 768px) {
  .elements-bar { display: none !important; }
}
/* Nižší hero na mobilu na všech stránkách s .inv-hero-text (dle blogu: 40vh / 5vh).
   Index má vlastní hero (nepoužívá .inv-hero-text), takže je automaticky vynechán.
   Přebíjí per-page styly (min-height:62vh; padding:9vh 0) přes !important. */
@media (max-width: 767px) {
  .inv-hero-text { min-height: 40vh !important; padding: 5vh 0 !important; }
}

/* Číselné bloky (statistiky .inv-cisla-popis) — na mobilu se sloupce zalomí pod sebe a
   řádek .vc_row.vc_inner (display:flex) má gap:80px + spacer 34px ve sloupci = obří mezera.
   Sjednoceno na 4vh. Platí na všech stránkách s .inv-cisla-popis (o-nas, ai-reseni, index, EN). */
@media (max-width: 767px) {
  .inv-cisla-popis .vc_row.vc_inner { gap: 4vh !important; }
  .inv-cisla-popis .clb__spacer { height: 0 !important; }
  .inv-cisla-popis .ohio-text-sc { margin-bottom: 0 !important; }
  .inv-cisla-popis .vc_row.vc_inner > .vc_col-sm-4 { margin-bottom: 0 !important; }
}

/* Pilíře a jejich podstránky (šablona): velké svislé mezery sekcí na mobilu.
   - 1. sekce má wrapper padding 9vh nahoře (velká mezera pod drobečky), CTA má 8vh.
     Chytáme je atributovým selektorem (nezávisle na block třídě, platí na všech pilířích/podstránkách).
   - theme margin sekcí (40px) zmenšíme na 16px (2 třídy, bez !important) -> o-nas s vlastními
     3třídovými margin pravidly zůstává nedotčené. */
@media (max-width: 767px) {
  /* Wrappery sekcí s velkým vh paddingem (8-11vh: intro pod drobečky, ceník, harmonika,
     tým, CTA...) -> menší. Cílíme hodnoty (ne block třídy, ty se mezi podstránkami liší). */
  .entry-content section.clb__section .wpb_wrapper[style*="8vh"],
  .entry-content section.clb__section .wpb_wrapper[style*="9vh"],
  .entry-content section.clb__section .wpb_wrapper[style*="10vh"],
  .entry-content section.clb__section .wpb_wrapper[style*="11vh"] { padding-top: 4vh !important; padding-bottom: 2vh !important; }
  /* Velké spacery sekcí (4-6vh) -> menší (chytá i variantu bez mezery za dvojtečkou). */
  .entry-content section.clb__section .vc_empty_space[style*="4vh"],
  .entry-content section.clb__section .vc_empty_space[style*="5vh"],
  .entry-content section.clb__section .vc_empty_space[style*="6vh"] { height: 2.5vh !important; }
  /* theme margin sekcí 40px -> 14px (2 třídy bez !important; o-nas s 3třídovými pravidly nedotčené). */
  .vc_section.clb__section { margin-bottom: 14px; }
}

/* Záložky (Ohio tabs) na mobilu: místo vodorovného posuvníku je mírně zmenšit,
   ať se vejdou na jeden řádek; scrollbar schovat. */
@media (max-width: 767px) {
  .ohio-widget.tabs .tabs-nav { scrollbar-width: none; -ms-overflow-style: none; }
  .ohio-widget.tabs .tabs-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .ohio-widget.tabs .tabs-nav > li { padding-left: 11px !important; padding-right: 11px !important; }
  .ohio-widget.tabs .tabs-nav > li a,
  .ohio-widget.tabs .tabs-nav > li button,
  .ohio-widget.tabs .tabs-nav > li > span { font-size: 15px !important; }
  /* Tmavé karty (banner card) v mřížce: na mobilu se skládají pod sebe a mezi nimi je
     mobilní spacer (.vc_empty_space.vc_hidden-lg, ~20px) -> odstranit, ať se dotýkají. */
  .clb__dark_section .ohio-widget.card + .vc_empty_space { display: none !important; }
  /* Blok „Nasazujeme na sebe" + čísla (.inv-cisla-popis s nadpisem) je WPBakery sekce
     s odsazením jen 16px, zbytek webu 33px -> sjednotit na 33px (vnější sloupec).
     :has(nadpis) vynechá o-nas (tam je .inv-cisla-popis jen se statistikami, jiná struktura). */
  .inv-cisla-popis:has(.ohio-widget.heading) > .wpb-content-wrapper > .vc_row > .wpb_column > .vc_column-inner { padding-left: 33px !important; }
}

/* --- Dynamický (psací) text: blikající kurzor --- */
.inv-dyn-cursor {
  display: inline-block;
  margin-left: 0.04em;
  font-weight: 300;
  color: currentColor;          /* stejná barva jako nadpis */
  animation: inv-blink 1s steps(1) infinite;
}
@keyframes inv-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* --- Hero video tlačítko prozatím skryté (na přání) --- */
.elementor-element-959c1da {
  display: none !important;
}

/* --- Vyhledávání i hamburger menu: poloprůhledné modré pozadí ---
   Web zůstane částečně vidět (vizuální kontext), lehké rozostření pro čitelnost.
   Stejné pozadí pro oba překryvy (.search-popup i .hamburger-nav). */
.clb-popup.search-popup,
.clb-popup.hamburger-nav {
  background: linear-gradient(135deg, rgba(42, 71, 158, 0.85), rgba(45, 128, 201, 0.85)) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Hamburger menu na modré: kontaktní texty bílé (čitelné) */
.clb-popup.hamburger-nav .details-column,
.clb-popup.hamburger-nav .details-column p,
.clb-popup.hamburger-nav .details-column a,
.clb-popup.hamburger-nav .details-column span,
.clb-popup.hamburger-nav .details-column li {
  color: rgba(255, 255, 255, 0.85) !important;
}
.clb-popup.hamburger-nav .details-column a:hover {
  color: #fff !important;
}
/* Social ikony v hamburgeru: bílé, hover plně bílé (na modré) */
.clb-popup.hamburger-nav .social-networks {
  display: flex;
  gap: 16px;
  align-items: center;
}
.clb-popup.hamburger-nav .inv-social {
  color: rgba(255, 255, 255, 0.85) !important;
}
.clb-popup.hamburger-nav .inv-social:hover {
  color: #fff !important;
}

/* Vstupní pole + ikony ve vyhledávání: světlé pro kontrast na modré */
.search-popup .search-field {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.search-popup .search-field::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}
.search-popup .search-submit,
.search-popup .search-submit svg,
.search-popup .holder svg {
  color: #fff !important;
  fill: #fff !important;
}
/* --- Světlá patička (jako about-ver5) — JEN ve světlém režimu ---
   Demo23 má patičku tmavou "natvrdo", proto ji ve světlém režimu vynucujeme
   světlou. V tmavém režimu (body.dark-scheme) tato pravidla NEplatí, takže
   patička ztmavne spolu se zbytkem webu (přepínač Dark/Light ji ovládá).
   Selektor `body:not(.dark-scheme)` = "pokud NENÍ tmavý režim". */
body:not(.dark-scheme) #colophon.site-footer {
  background-color: #f4f4f6 !important;
  color: #3a4150 !important;
}
body:not(.dark-scheme) #colophon.site-footer h1,
body:not(.dark-scheme) #colophon.site-footer h2,
body:not(.dark-scheme) #colophon.site-footer h3,
body:not(.dark-scheme) #colophon.site-footer h4,
body:not(.dark-scheme) #colophon.site-footer h5,
body:not(.dark-scheme) #colophon.site-footer .widget-title,
body:not(.dark-scheme) #colophon.site-footer .caption {
  color: #161519 !important;
}
body:not(.dark-scheme) #colophon.site-footer,
body:not(.dark-scheme) #colophon.site-footer p,
body:not(.dark-scheme) #colophon.site-footer li,
body:not(.dark-scheme) #colophon.site-footer span {
  color: #4a4f5a !important;
}
/* Spodní lišta s copyrightem (.site-footer-copyright) má v šabloně bílý text
   (pro tmavou patičku). Ve světlém režimu ho ztmavíme, ať je čitelný. */
body:not(.dark-scheme) #colophon.site-footer .site-footer-copyright,
body:not(.dark-scheme) #colophon.site-footer .site-footer-copyright .-left,
body:not(.dark-scheme) #colophon.site-footer .site-footer-copyright .-right {
  color: #4a4f5a !important;
}

body:not(.dark-scheme) #colophon.site-footer a {
  color: #3a4150 !important;
}
body:not(.dark-scheme) #colophon.site-footer a:hover {
  color: var(--clb-color-primary) !important;
}
/* Velký nápis – jemný světle šedý (jen ve světlém režimu) */
body:not(.dark-scheme) #colophon.site-footer .site-footer-text p {
  color: rgba(20, 21, 25, 0.06) !important;
}
/* Logo v patičce: ve světlém režimu tmavá varianta, světlou skrýt */
body:not(.dark-scheme) #colophon.site-footer .light-scheme-logo { display: inline-block !important; }
body:not(.dark-scheme) #colophon.site-footer .dark-scheme-logo { display: none !important; }
/* Oddělovače/čáry ve světlé patičce */
body:not(.dark-scheme) #colophon.site-footer hr,
body:not(.dark-scheme) #colophon.site-footer .divider,
body:not(.dark-scheme) #colophon.site-footer [class*="border"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* Popisek firmy v patičce (#block-11) zarovnaný do bloku (justify) */
#colophon.site-footer #block-11 p { text-align: justify; }

/* ============================================================
   MOBILNÍ PATIČKA (<=768px) — dle vzoru: brand + popis, newsletter karta,
   menu ve 2 sloupcích, zaoblené social ikony, „ai first mindset", Nahoru + copyright.
   Vše CSS-only na sdílené patičce → platí CZ i EN. Desktop netknutý.
   Struktura (grid/pořadí) platí v obou režimech; barvy textu jen ve světlém, ať
   nerozbijou tmavý režim (tam zůstávají výchozí světlé barvy patičky).
   ============================================================ */
@media (max-width: 768px) {
  #colophon.site-footer { padding-top: 14px !important; padding-bottom: 18px !important; margin-top: 0 !important; }
  /* Boční odsazení obsahu patičky (jinak logo/text/menu jdou až na kraj displeje).
     Levé zarovnané s levým okrajem tlačítka „Nahoru" (obojí v .page-container, drží spolu). */
  #colophon.site-footer .page-container { padding-left: 46px !important; padding-right: 24px !important; }

  /* --- A) Přeskládání: zploštit sloupce (display:contents) a 2sloupcový grid --- */
  #colophon .widgets.vc_row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 18px; align-items: start; }
  /* clearfix pseudo z .vc_row by se v gridu staly prázdnými buňkami → vypnout */
  #colophon .widgets.vc_row::before, #colophon .widgets.vc_row::after { content: none !important; display: none !important; }
  #colophon .widgets-column,
  #colophon .widgets-column > ul { display: contents !important; }
  #colophon .widgets-column:not(:last-child) { margin-bottom: 0 !important; }
  #colophon .widgets .widget { min-width: 0; margin: 0 !important; }
  /* plná šířka */
  #colophon #ohio_widget_logo-7 { order: 1; grid-column: 1 / -1; }
  #colophon #block-11 { order: 2; grid-column: 1 / -1; margin-bottom: 4px !important; }
  #colophon #ohio_widget_subscribe-3 { order: 3; grid-column: 1 / -1; }
  /* 2×2 menu: Služby | Firma / Produkt | Právní */
  #colophon #block-18 { order: 4; } /* Služby */
  #colophon #block-16 { order: 5; } /* Firma */
  #colophon #block-17 { order: 6; } /* Právní */
  #colophon #block-19 { order: 7; } /* Produkt */
  /* social celá šířka dole */
  #colophon #block-10 { order: 8; grid-column: 1 / -1; }

  /* --- B) Brand blok --- */
  #colophon #ohio_widget_logo-7 .svg-logo { max-height: 42px !important; width: auto !important; }
  #colophon #block-11 p { text-align: left !important; font-size: 13.5px; line-height: 1.6; max-width: 34ch; }

  /* --- Menu sloupce: nadpisy (Space Grotesk, uppercase) + odkazy --- */
  #colophon #block-18 h2.wp-block-heading, #colophon #block-19 h2.wp-block-heading,
  #colophon #block-16 h2.wp-block-heading, #colophon #block-17 h2.wp-block-heading {
    font-family: 'blacker_pro_display-bold', 'Space Grotesk', sans-serif;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px;
  }
  #colophon #block-18 ul ul li, #colophon #block-19 ul ul li,
  #colophon #block-16 ul ul li, #colophon #block-17 ul ul li { margin: 0; }
  #colophon #block-18 a, #colophon #block-19 a, #colophon #block-16 a, #colophon #block-17 a {
    display: block; padding: 6px 0; font-size: 14px; font-weight: 600;
    font-family: 'Nunito-inv', 'Nunito', sans-serif;
  }

  /* --- C) Newsletter jako karta (obalí celý widget = nadpis + formulář) --- */
  #colophon #ohio_widget_subscribe-3 {
    background: linear-gradient(150deg, rgba(36, 80, 216, 0.09), rgba(36, 80, 216, 0.02));
    border: 1px solid rgba(36, 80, 216, 0.16); border-radius: 18px; padding: 18px;
  }
  #colophon #ohio_widget_subscribe-3 .widget-title {
    font-family: 'Nunito-inv', 'Nunito', sans-serif; font-size: 15px; font-weight: 800; margin-bottom: 12px;
  }
  /* Bílý input = celé okno; modré tlačítko vloženo absolutně dovnitř vpravo; souhlas pod. */
  #colophon .subscribe-form p { position: relative; display: block; margin: 0; }
  #colophon .subscribe-form p br { display: none; }
  #colophon .subscribe-form .wpcf7-form-control-wrap[data-name="your-email"] { display: block; }
  #colophon .subscribe-form input[type="email"] {
    width: 100%; box-sizing: border-box; height: 52px; background: #fff; border: 1px solid rgba(20, 28, 51, 0.14);
    border-radius: 999px; padding: 0 122px 0 20px; font-size: 13px; color: #141c33; font-family: 'Nunito-inv', 'Nunito', sans-serif;
  }
  /* Skutečný WPCF7 submit input skrýváme natvrdo. Viditelné/funkční tlačítko je
     theme .button.-flat (odeslání řeší inovativa-forms.js na submit události formuláře).
     Ohio JS má input normálně odstranit, ale lazy-load chunku občas selže (ChunkLoadError)
     a input zůstane, čímž prosvítal jako druhá pilulka ("modrý srpek"). */
  #colophon .subscribe-form input[type="submit"] { display: none !important; }
  #colophon .subscribe-form .wpcf7-form-control-wrap[data-name="checkbox-101"] { display: block; margin-top: 12px; }
  #colophon .subscribe-form .wpcf7-list-item { margin: 0; }
  #colophon .subscribe-form .wpcf7-list-item-label { font-size: 11px; line-height: 1.5; }
  #colophon .inv-nlf-msg { font-size: 12px; margin-top: 8px; }

  /* --- D) Social: bez pozadí, přesunuté vedle tlačítka „Nahoru" (JS je vloží do .-right-bar) --- */
  #colophon #block-10 { margin: 0 !important; }
  #colophon #block-10 .inv-social-row { display: flex; gap: 12px; align-items: center; }
  #colophon #block-10 a.inv-social {
    width: 30px; height: 30px; background: transparent !important; border: none !important; border-radius: 0 !important;
    display: flex; align-items: center; justify-content: center;
  }

  /* --- E) „ai first mindset" watermark: posunout doleva (mimo levý padding) a zmenšit,
         aby byl celý vidět (jinak přeteče vpravo, má white-space:nowrap). --- */
  #colophon.site-footer .site-footer-text { margin-left: -30px !important; margin-right: -24px !important; overflow: hidden; }
  #colophon.site-footer .site-footer-text p { font-size: 11cqi !important; }

  /* --- F) Spodní: řádek „Nahoru" (vlevo) + sociální sítě (vpravo) --- */
  #colophon .vc_row.holder { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; }
  #colophon .vc_row.holder::before, #colophon .vc_row.holder::after { content: none !important; display: none !important; }
  #colophon .vc_row.holder .-left-bar, #colophon .vc_row.holder .-right-bar {
    width: auto !important; float: none !important; padding: 0 !important;
  }
  #colophon .vc_row.holder .-right-bar { display: flex; justify-content: flex-end; align-items: center; }
  #colophon .scroll-top {
    display: inline-flex; align-items: center; gap: 9px; border-radius: 26px;
    padding: 8px 15px 8px 8px; font-weight: 700;
  }
  #colophon .scroll-top .icon-button {
    width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 50%;
    background: linear-gradient(120deg, #3a86e6, #2f6fd6) !important; color: #fff !important;
  }
  #colophon .site-footer-copyright .holder { display: block; }
  #colophon .site-footer-copyright .-left { font-size: 11px; }
  #colophon .site-footer-copyright .-right { margin-top: 8px; font-size: 11px; }

  /* --- Barvy jen ve světlém režimu (tmavý nechá výchozí světlé barvy patičky) --- */
  body:not(.dark-scheme) #colophon #block-11 p { color: #6b7690 !important; }
  body:not(.dark-scheme) #colophon #block-18 h2.wp-block-heading,
  body:not(.dark-scheme) #colophon #block-19 h2.wp-block-heading,
  body:not(.dark-scheme) #colophon #block-16 h2.wp-block-heading,
  body:not(.dark-scheme) #colophon #block-17 h2.wp-block-heading { color: #4a6fc4 !important; }
  body:not(.dark-scheme) #colophon #block-18 a, body:not(.dark-scheme) #colophon #block-19 a,
  body:not(.dark-scheme) #colophon #block-16 a, body:not(.dark-scheme) #colophon #block-17 a { color: #3d485f !important; }
  body:not(.dark-scheme) #colophon #ohio_widget_subscribe-3 .widget-title { color: #141c33 !important; }
  body:not(.dark-scheme) #colophon .subscribe-form .wpcf7-list-item-label { color: #8792a8 !important; }
  body:not(.dark-scheme) #colophon #block-10 a.inv-social { color: #243052; }
  body:not(.dark-scheme) #colophon .scroll-top { background: #fff; border: 1px solid rgba(20, 28, 51, 0.12); color: #141c33 !important; }
  body:not(.dark-scheme) #colophon .site-footer-copyright .-left { color: #8792a8 !important; }
  body:not(.dark-scheme) #colophon .site-footer-copyright .-right a { color: #4a6fc4 !important; }

  /* Tmavý režim: „Nahoru" pilulka jemná světlá plocha (social zůstává bez pozadí, jen ikona). */
  body.dark-scheme #colophon .scroll-top { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
}

/* =========================================================================
   HERO — MacBook + CRM video místo úvodní stock fotky
   Tato pravidla se načítají až za minifikovaným CSS, takže ho přebijí.
   ========================================================================= */

/* kotva pro video + skrytí původní fotky (background je přímo na tomto kontejneru) */
.elementor-element-a68eb15 {
  position: relative;
  background-image: none !important;
}

/* pro jistotu vypni i případnou parallax vrstvu s fotkou */
.elementor-element-a68eb15 .elementor-motion-effects-container,
.elementor-element-a68eb15 .elementor-motion-effects-layer { background-image: none !important; }

/* video vlevo, na místě bývalé fotky.
   Záběr „rotation" má notebook uprostřed záběru, proto ho posuneme víc doleva
   (translateX), aby obrazovka nezmizela pod modrým kruhem s textem.
   Pozadí videa je odstraněné (jen notebook na průhledném pozadí), takže už
   není potřeba žádné prolnutí okrajů. */
.hero-macbook {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-58%) translateX(-15%);
  width: 72%;
  max-width: 1080px;
  height: auto;
  z-index: 0;
  pointer-events: none; /* aby šlo klikat skrz na text/tlačítka */
}

/* text a tlačítka musí zůstat nad videem */
.elementor-element-a68eb15 > .elementor-element { position: relative; z-index: 1; }

/* mobil/tablet: MacBook nad modrou plochou a 2x větší */
@media (max-width: 1024px) {
  /* hero řádek (MacBook + text) nad modrou dekorační plochou (afc5de3 má z-index:1) */
  .elementor-element-a68eb15 { position: relative; z-index: 2; overflow: visible; }
  .hero-macbook {
    position: relative;
    z-index: 0;              /* nad modrou plochou, ale pod textem (ten má z-index:1) */
    transform: scale(1.4);   /* zvětšení notebooku */
    transform-origin: center top; /* zvětšuj jen dolů → vršek monitoru nezajede za hlavičku */
    width: 100%;
    max-width: 100%;
    /* spodní margin odsune textový blok (nadpis→tlačítko) níž, ať do něj MacBook vizuálně
       nezasahuje (scale 1.4 přesahuje box dolů). !important — jinak margin něco přebíjelo. */
    margin: 0 auto 6vh !important;
    display: block;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Modrý dekorativní kruh (afc5de3) na mobilu: VLEVO, 72,6vh, vertikálně vycentrovaný, se středem
   u levého kraje → vrchol i spodek kruhu jsou zakulacené a v obraze (žádné ploché řezy),
   modrá vykukuje zleva jako zaoblený míč. */
@media (max-width: 767px) {
  .elementor-227372 .elementor-element.elementor-element-afc5de3 {
    --spacer-size: 72.6vh !important;
    --container-widget-width: 72.6vh !important;
    width: 72.6vh !important;
    height: 72.6vh !important;
    max-width: 72.6vh !important;
    top: 50% !important;
    left: 0 !important;
    transform: translate(-40%, -50%) !important;
  }
}

/* --- Blok studio-video: jen desktop layout (fotka vlevo + šedý panel vpravo).
   Blok má v markupu dvě verze (mobilní stacknutou + desktop side-by-side);
   responzivní vc_hidden třídy v katalogu nefungují, tak obě zobrazoval pod sebou.
   Schováme mobilní verzi (vc_hidden-lg), ukážeme desktop (vc_hidden-md/sm/xs)
   a roztáhneme fotku na výšku panelu. --- */
.inv-studio .vc_hidden-lg { display: none !important; }
/* schovej mobilní (stacknutou) verzi šedého panelu — desktop má vc_hidden-md */
.inv-studio .clb__sm_padding_set:not(.vc_hidden-md) { display: none !important; }
.inv-studio .clb__sm_padding_set.vc_hidden-md,
.inv-studio .vc_empty_space.vc_hidden-md,
.inv-studio .vc_hidden-md.vc_hidden-sm.vc_hidden-xs { display: block !important; }
/* desktop řádek vedle sebe + stejná výška sloupců */
.inv-studio .vc_row-flex {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
}
.inv-studio .vc_row-flex > .wpb_column { width: 50% !important; }
.inv-studio .clb__stretch_content,
.inv-studio .clb__stretch_content > .vc_column-inner,
.inv-studio .clb__stretch_content .wpb_wrapper { display: flex; flex-direction: column; flex: 1; }
/* fotka vyplní výšku sloupce */
.inv-studio .vc_custom_1763466016034 { flex: 1; min-height: 560px !important; }

/* --- Counter ikony (čísla) v naší modré (značka; originál měl červené) --- */
.ohio-widget.counter .icon-group .icon,
.ohio-widget.counter .icon {
  color: var(--clb-color-primary) !important;
}

/* --- Karty s ilustracemi (inv-karty): karty na sebe (bez mezery z gutteru)
   a vyšší (jako vzor). --- */
.inv-karty .vc_row { margin-left: 0 !important; margin-right: 0 !important; }
.inv-karty .vc_row > .wpb_column { padding-left: 0 !important; padding-right: 0 !important; }
.inv-karty .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
.inv-karty .ohio-widget.banner,
.inv-karty .ohio-widget.banner .image-holder,
.inv-karty .ohio-widget.banner .overlay-details {
  min-height: 480px;
}

/* QA: vypni automatický newsletter popup — blokoval hero při každém načtení
   stránky. Odběr newsletteru zůstává dostupný v inline sekci na stránce. */
.clb-popup.subscribe-popup { display: none !important; }

/* Auto dark mode: jemný přechod barev jen při živém přepnutí (ne při prvním načtení). */
body.theme-transition,
body.theme-transition * {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important;
}

/* Nabídková lišta jazyka (auto-detekce) */
.inv-lang-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .6rem 1rem; background: #235AB6; color: #fff;
  font-size: .95rem; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.inv-lang-bar button { cursor: pointer; border: 0; border-radius: 6px;
  padding: .35rem .8rem; font: inherit; }
.inv-lang-bar .inv-lang-bar-go { background: #fff; color: #235AB6; font-weight: 600; }
.inv-lang-bar .inv-lang-bar-x { background: transparent; color: #fff; font-size: 1.2rem; line-height: 1; padding: .2rem .5rem; }


/* --- Tmavý režim: fixní sociální lišta vpravo světlá (jinak tmavé ikony na tmavém pozadí) --- */
body.dark-scheme .elements-bar.right .social-bar-holder.icons,
body.dark-scheme .elements-bar.right .social-bar-holder.icons .caption,
body.dark-scheme .elements-bar.right .social-bar-holder.icons .inv-social {
  color: rgba(255,255,255,.85) !important;
}

/* --- Newsletter v patičce: tlačítko "Odebírat" modré (bylo -flat/průhledné, špatně čitelné) --- */
.subscribe-widget .button.-flat,
.subscribe-form .button.-flat {
  background: var(--inv-gradient) !important;
  color: #fff !important;
}
.subscribe-widget .button.-flat:hover,
.subscribe-form .button.-flat:hover {
  filter: brightness(1.06);
}
/* Newsletter tlačítko v patičce posazené níž (skutečné tlačítko = .button.-flat, ne input[type=submit]) */
#colophon .subscribe-form .button.-flat { top: 4px !important; transform: translateX(calc(-100% + 8px)) !important; scale: 1.155 !important; }

/* ===== Drobečková navigace (breadcrumb) — aktuální stránka v brand modré ===== */
.breadcrumb-item span.active {
  color: var(--clb-color-primary) !important;
  font-weight: 600 !important;
}
.breadcrumb-item a:hover span {
  color: var(--clb-color-primary);
}

/* Klientské vyhledávání (search-popup) — výsledky pod formulářem. */
.search-popup .inv-search-results{max-width:640px;margin:26px auto 0;text-align:left;display:flex;flex-direction:column;gap:2px;}
.search-popup .inv-search-hint,.search-popup .inv-search-none{color:#8a93a6;font-size:15px;text-align:center;margin:6px 0;}
/* Karta výsledku je <a>, proto vše přes !important, ať to nepřebije theme link-hover
   (tmavé pozadí + oranžová link barva #d85b76 = nečitelný text na hover). */
.search-popup .inv-search-item{display:block;padding:13px 18px;border-radius:12px;text-decoration:none;background:rgba(255,255,255,.94)!important;box-shadow:0 6px 20px rgba(20,30,70,.08);transition:background .15s,transform .15s;}
.search-popup .inv-search-item:hover{background:#fff!important;transform:translateY(-1px);}
.search-popup .inv-search-t{display:block;font-weight:700;font-size:16px;color:#1b2130!important;}
.search-popup .inv-search-item:hover .inv-search-t{color:#235AB6!important;}
.search-popup .inv-search-d{display:block;font-size:13.5px;color:#5a6478!important;margin-top:3px;line-height:1.45;}
.search-popup .inv-search-item:hover .inv-search-d{color:#5a6478!important;}
body.dark-scheme .search-popup .inv-search-item{background:rgba(18,24,40,.94)!important;box-shadow:0 6px 20px rgba(0,0,0,.3);}
body.dark-scheme .search-popup .inv-search-item:hover{background:rgba(30,42,68,.98)!important;}
body.dark-scheme .search-popup .inv-search-t{color:#e8ecf3!important;}
body.dark-scheme .search-popup .inv-search-item:hover .inv-search-t{color:#8fc0ff!important;}
body.dark-scheme .search-popup .inv-search-d{color:#aab2c2!important;}

/* ============================================================
   MOBILNÍ HLAVIČKA (<= 768 px) — čistá horní lišta (jen hamburger + logo),
   ovládací prvky (jazyk, klientská zóna, „Ozvěte se", přepínač režimu)
   přesunuty do hamburger menu skriptem inovativa-mobile-header.js
   (obal .inv-mobile-controls). Hlavička zafixovaná nahoře.
   ============================================================ */

/* Hlavička fixní nahoře (dřív po odscrollování mizela). Bílé pozadí + jemný stín. */
@media (max-width: 768px) {
  #masthead {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 990;
    background: #fff !important;
    box-shadow: none !important; /* bez stínu/přechodu pod hlavičkou */
    transition: background 0.25s ease;
  }
  body { padding-top: 78px; }
  /* Theme spacer .header-cap (12vh) je na mobilu zbytečný — místo pro fixní hlavičku už
     rezervuje body padding-top:78px. Bez tohoto vznikalo dvojité odsazení (velká mezera nad hero). */
  .header-cap { height: 0 !important; }
  body.dark-scheme #masthead { background: #0f1830 !important; }
  /* Slide-in menu musí být NAD fixní hlavičkou, ať ji po otevření překryje. */
  .slide-in-overlay.menu-slide-in-overlay { z-index: 1000; }

  /* Logo vycentrované na střed hlavičky (hamburger zůstává vlevo) + o 10 % menší (50 -> 45 px). */
  #masthead .header-wrap-inner { position: relative; }
  #masthead .left-part { position: static; }
  #masthead .branding {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  }
  #masthead .branding .svg-logo,
  #masthead .branding .logo img,
  #masthead .branding .logo-dynamic img {
    max-height: 45px !important;
    transition: max-height 0.25s ease;
  }
  #masthead .header-wrap { transition: height 0.25s ease; }

  /* Po odscrollování (překryv s obsahem): hlavička se zmenší a je poloprůhledná (90 %).
     POZOR: žádný backdrop-filter/filter/transform na #masthead — udělalo by z něj containing
     block pro fixed potomky a slide-in menu (fixed, uvnitř #masthead) by se oříznulo na hlavičku. */
  #masthead.inv-hdr-scrolled {
    background: rgba(255, 255, 255, 0.9) !important;
  }
  body.dark-scheme #masthead.inv-hdr-scrolled { background: rgba(15, 24, 48, 0.9) !important; }
  #masthead.inv-hdr-scrolled .header-wrap { height: 56px; }
  #masthead.inv-hdr-scrolled .branding .svg-logo,
  #masthead.inv-hdr-scrolled .branding .logo img,
  #masthead.inv-hdr-scrolled .branding .logo-dynamic img { max-height: 36px !important; }

  /* Hamburger se při zúžení hlavičky (scroll) taky zmenší. */
  #masthead .hamburger.icon-button {
    transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease;
  }
  #masthead.inv-hdr-scrolled .hamburger.icon-button {
    width: 40px !important; height: 40px !important; min-width: 40px !important;
  }

  /* Mobilní hlavička má VŽDY vlastní pevné pozadí (bílé; v dark režimu tmavé), takže neplatí
     „obsah bílý nad tmavým podkladem" (inv-dark-hero / inv-hdr-dark z JS) — bílé logo/hamburger by
     na bílé hlavičce zmizely. Ve světlém režimu proto vynutíme TMAVÉ logo i hamburger. */
  /* Varianty s .inv-dark-hero/.inv-hdr-dark mají stejnou specificitu jako globální pravidla
     (ř. 334-338/357-358), ale jsou v souboru později → vyhrají remízu. Bez nich by na
     inv-dark-hero stránkách (kontakt, o-nas) svítilo bílé logo na bílé mobilní hlavičce. */
  body:not(.dark-scheme) #masthead .light-scheme-logo,
  body:not(.dark-scheme).inv-dark-hero #masthead .light-scheme-logo,
  body:not(.dark-scheme).inv-hdr-dark #masthead .light-scheme-logo { display: inline-block !important; }
  body:not(.dark-scheme) #masthead .dark-scheme-logo,
  body:not(.dark-scheme).inv-dark-hero #masthead .dark-scheme-logo,
  body:not(.dark-scheme).inv-hdr-dark #masthead .dark-scheme-logo { display: none !important; }
  body:not(.dark-scheme) #masthead .hamburger.icon-button,
  body:not(.dark-scheme) #masthead .hamburger.icon-button .icon { color: #16233f !important; }
}

/* ============================================================
   MOBILNÍ MENU — tmavý „Claude design" vzor (jen <=768px, slide-in overlay).
   Desktop mega menu (#menu-primary v témže overlay) i hlavička NEtknuté.
   ============================================================ */
@media (max-width: 768px) {

  /* --- Tmavý navy panel (radiální gradient), přes CELOU šířku obrazovky ---
     Vynuceno napevno: theme jinak drží užší panel (rezerva pro social lištu). */
  .slide-in-overlay.menu-slide-in-overlay {
    background: radial-gradient(130% 90% at 78% 8%, #16305f 0%, #0e1e40 42%, #0a1430 100%) !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin: 0 !important;
    display: flex !important; flex-direction: column;
  }
  /* Zavřené menu (bez .visible) nesmí chytat kliky. Overlay je natvrdo fixed/inset:0 a nikdy
     display:none; jeho non-interaktivitu jinak drží jen zděděné visibility:hidden, které ale
     .inv-mobile-footrow .color-switcher přebíjí (visibility:visible !important) → přepínač zůstával
     neviditelně klikací vpravo dole i po zavření. pointer-events:none to spolehlivě vypne
     (zdědí i přepínač); při otevřeném menu (.visible) pravidlo neplatí, vše funguje normálně. */
  .slide-in-overlay.menu-slide-in-overlay:not(.visible) { pointer-events: none !important; }
  /* Vnitřní kontejnery na plnou šířku (jinak drží šířku úzkého panelu). */
  .slide-in-overlay.menu-slide-in-overlay .holder,
  .slide-in-overlay.menu-slide-in-overlay .close-bar,
  .slide-in-overlay.menu-slide-in-overlay #mega-menu-wrap,
  .slide-in-overlay.menu-slide-in-overlay #mobile-menu,
  .slide-in-overlay.menu-slide-in-overlay .inv-mobile-controls,
  .slide-in-overlay.menu-slide-in-overlay .copyright {
    width: 100% !important; max-width: none !important; box-sizing: border-box;
  }
  .slide-in-overlay.menu-slide-in-overlay .overlay { background: transparent !important; position: absolute !important; }
  /* Holder vyplní prostor mezi close-barem a dnem (flex:1), právní blok jde na dno (margin-top:auto).
     padding-bottom:0 — jinak se sticky lišta přilepí NAD spodní padding a v pruhu pod ní prosvítá menu. */
  .slide-in-overlay.menu-slide-in-overlay .holder {
    background: transparent !important;
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding-bottom: 0 !important;
  }
  /* Skrytý scrollbar — jinak vpravo ubíral místo a text nebyl symetrický. */
  .slide-in-overlay.menu-slide-in-overlay,
  .slide-in-overlay.menu-slide-in-overlay .holder { scrollbar-width: none; -ms-overflow-style: none; }
  .slide-in-overlay.menu-slide-in-overlay::-webkit-scrollbar,
  .slide-in-overlay.menu-slide-in-overlay .holder::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* --- Horní lišta menu: logo vlevo, hledání + zavřít vpravo (čtvercová tlačítka) --- */
  .slide-in-overlay .close-bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px 6px; }
  .inv-menu-logo { margin-right: auto; display: flex; align-items: center; flex: 0 0 auto; }
  /* Pevná velikost loga (theme jinak škáluje přes vh/vw) — !important kvůli #masthead pravidlu. */
  .inv-menu-logo .main-logo,
  .inv-menu-logo .svg-logo,
  .inv-menu-logo img { height: 44px !important; width: auto !important; max-height: 44px !important; max-width: 220px !important; }
  .inv-menu-logo .light-scheme-logo { display: none !important; }
  .inv-menu-logo .dark-scheme-logo { display: block !important; }
  /* Otevřené menu je vždy tmavé → VŽDY světlá (bílá) varianta loga. Vyšší specificita (#masthead),
     aby přebila header override (tmavé logo na mobilu), který do menu prosakuje. */
  #masthead .slide-in-overlay .inv-menu-logo .light-scheme-logo { display: none !important; }
  #masthead .slide-in-overlay .inv-menu-logo .dark-scheme-logo { display: block !important; }
  .slide-in-overlay .close-bar .icon-button {
    width: 40px !important; height: 40px !important; min-width: 40px; flex: 0 0 40px; padding: 0;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.04); color: #eaf1fb;
  }
  /* Pořadí: hledání (lupa) vlevo, zavřít (X) vpravo — oboje u pravého kraje (logo má margin-right:auto). */
  .slide-in-overlay .close-bar .search-global { order: 1; }
  .slide-in-overlay .close-bar .-overlay-button { order: 2; }
  /* X (zavřít) = tahová ikona bílá; lupa (hledání) = výplňová ikona bílá (dřív fill:none = neviditelná) */
  .slide-in-overlay .close-bar .-overlay-button svg { fill: none !important; stroke: #eaf1fb !important; }
  .slide-in-overlay .close-bar .search-global { color: #eaf1fb; }
  .slide-in-overlay .close-bar .search-global svg,
  .slide-in-overlay .close-bar .search-global svg path { fill: #eaf1fb !important; stroke: none !important; }

  /* --- Hlavní položky --- */
  #mobile-menu { padding: 10px 20px 0; }
  #mobile-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  #mobile-menu > li > a.main-menu-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 2px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 18px; color: #fff;
    background: transparent !important; -webkit-tap-highlight-color: transparent;
    transition: padding-left 0.18s ease, color 0.18s ease;
  }
  /* zrušit ošklivý světlý box (hover/tap/focus pozadí z theme) na hlavních položkách */
  #mobile-menu > li > a.main-menu-link:hover,
  #mobile-menu > li > a.main-menu-link:focus,
  #mobile-menu > li > a.main-menu-link:active { background: transparent !important; }
  #mobile-menu > li > a.main-menu-link span { color: #fff; letter-spacing: -0.01em; }
  #mobile-menu .has-submenu-icon { color: #9fb0d0; }

  /* --- Rozbalená (otevřená) položka — jednoduše a čistě: jen kobaltový nadpis + ikona,
         žádné pozadí/box (přebíjí i ošklivé theme pozadí .active). --- */
  #mobile-menu > li.active { background: transparent !important; }
  #mobile-menu > li.active > a.main-menu-link span { color: #5aa0f0; opacity: 1; } /* theme dává .active>a span{opacity:.5} */
  #mobile-menu > li.active .has-submenu-icon { color: #5aa0f0; opacity: 1; }

  /* --- Podmenu: skupinové labely + tečkové odkazy --- */
  #mobile-menu .inv-mega { padding: 2px 2px 14px; }
  #mobile-menu .inv-mega > li { min-width: 0 !important; }
  #mobile-menu .inv-mega a.wide-menu-head {
    display: block; font-family: 'Nunito', sans-serif; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em; color: #7fa6e6; opacity: 1;
    padding: 10px 12px 2px;
  }
  #mobile-menu .inv-mega ul a.menu-link {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
    color: #9fb0d0; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600;
  }
  #mobile-menu .inv-mega ul a.menu-link::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f6fd6; flex: 0 0 7px;
  }
  #mobile-menu .inv-mega ul a.menu-link:hover { background: rgba(47, 111, 214, 0.14); color: #fff; }
  /* Podmenu plně řízené podle .active (ať sbalené odkazy neblokují kliknutí):
     - SBALENÉ (:not(.active)) = úplně vypnuté (skryté + pointer-events:none, žádná výška),
       jinak neviditelné odkazy zůstávají „naživu" a zachytávají klik na položky pod nimi.
     - ROZBALENÉ (.active) = celé podmenu i druhá úroveň (odkazy pod nadpisem) viditelné. */
  #mobile-menu > li:not(.active) .inv-mega {
    height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  }
  #mobile-menu > li.active .inv-mega {
    height: auto !important; overflow: visible !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
  #mobile-menu > li.active .inv-mega > li > ul {
    height: auto !important; max-height: none !important; overflow: visible !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  /* Plovoucí „toddler" slunce přepínače režimu (na top:0) na mobilu skrýt. */
  .color-switcher-toddler { display: none !important; }

  /* --- Fixní spodní lišta (poslední prvek v .holderu, přilepená dolů) ---
     margin-top:auto ji drží dole i při krátkém obsahu; position:sticky bottom:0
     ji přilepí ke spodní hraně rolovací oblasti, když se navigace roluje.
     Solidní tmavé pozadí, aby přes ni nebyl vidět rolující obsah navigace. */
  .slide-in-overlay.menu-slide-in-overlay .inv-mobile-bottom {
    width: 100% !important; box-sizing: border-box; flex: 0 0 auto;
    margin-top: auto; position: sticky; bottom: 0; z-index: 10;
    background: #0a1430 !important;
  }
  /* Navigace do vlastní nižší vrstvy, ať ji sticky lišta (z-index:10) vždy překreslí
     (jinak text menu prosvítá přes neprůhlednou lištu). */
  .slide-in-overlay.menu-slide-in-overlay #mega-menu-wrap { position: relative; z-index: 1; }
  /* --- Patička: Klientská zóna → CTA → řádek jazyk/režim --- */
  .inv-mobile-controls {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 16px 20px 10px; border-top: 1px solid rgba(255, 255, 255, 0.09);
  }
  .inv-mobile-controls .inv-client {
    display: flex; align-items: center; gap: 10px;
    color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 16px; opacity: 1;
  }
  .inv-mobile-controls .inv-client span { display: inline !important; }
  .inv-mobile-controls .inv-client svg { stroke: #7fa6e6; }
  .inv-mobile-controls .button.btn-optional {
    display: block; width: 100%; text-align: center;
    background: linear-gradient(120deg, #2f6fd6, #4a86e6) !important; color: #fff !important;
    font-weight: 800; font-size: 16px; padding: 16px; border-radius: 16px; border: none;
    box-shadow: 0 12px 30px rgba(47, 111, 214, 0.40);
  }
  .inv-mobile-footrow { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
  /* jazyk vlevo jako „CZ / EN" — aktuální zvýrazněn (bílá), klik přepne */
  .inv-mobile-footrow .inv-lang-globe {
    order: 1; position: static; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    color: #eaf1fb; font-weight: 700; font-size: 14px;
    margin-left: -3px; /* globe ikona lícuje s levým okrajem tlačítka (kompenzace optického odsazení kruhu) */
  }
  .inv-mobile-footrow .inv-lang-globe .inv-lg-g { stroke: #9fb0d0; flex: 0 0 auto; }
  .inv-mobile-footrow .inv-lang-globe .inv-lg-cv { display: none; }
  .inv-mobile-footrow .inv-lang-globe .inv-lg-label { display: none; } /* samostatné „CZ" pryč, ukazují ho tlačítka */
  .inv-mobile-footrow .inv-lang-menu {
    position: static; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;
    background: none; box-shadow: none; padding: 0; border: 0; transform: none;
  }
  /* Text tlačítek (Čeština/English) nahradíme krátkým kódem CZ/EN přes data-l. */
  .inv-mobile-footrow .inv-lang-menu button {
    display: inline-block; width: auto; white-space: nowrap; font-size: 0 !important;
    font-weight: 700; padding: 0; background: none;
  }
  .inv-mobile-footrow .inv-lang-menu button::after { content: attr(data-l); font-size: 14px; color: #9fb0d0; }
  .inv-mobile-footrow .inv-lang-menu button.on::after { color: #fff; }
  .inv-mobile-footrow .inv-lang-menu button + button::before { content: "/"; font-size: 14px; color: #6f80a4; margin-right: 8px; }
  /* přepínač režimu (pilulky) vpravo — vybraná zvýrazněná, ať se neuřízne */
  .inv-mobile-footrow .color-switcher {
    order: 2; flex: 0 0 auto; position: static; opacity: 1 !important; visibility: visible !important;
    display: flex; background: rgba(255, 255, 255, 0.06); border-radius: 22px; padding: 4px; gap: 2px;
  }
  .inv-mobile-footrow .color-switcher-item {
    width: 36px; height: 30px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  }
  .inv-mobile-footrow .color-switcher-item svg { stroke: #9fb0d0; fill: none; width: 16px; height: 16px; }
  /* vybraný režim dle stránky (světlý -> slunce, tmavý -> měsíc) zvýrazněný.
     Pozn.: auto-theme JS třídu .dark na položkách zapíná/vypíná (kolize s identifikátorem
     měsíce), proto se na ni nespoléháme. Slunce má VŽDY stabilní .light; měsíc = jediná
     položka BEZ .light (:not(.light)). Klíč je spolehlivý body.dark-scheme (stav zobrazení). */
  body:not(.dark-scheme) .inv-mobile-footrow .color-switcher-item.light,
  body.dark-scheme .inv-mobile-footrow .color-switcher-item:not(.light) { background: rgba(255, 255, 255, 0.16) !important; }
  body:not(.dark-scheme) .inv-mobile-footrow .color-switcher-item.light svg,
  body.dark-scheme .inv-mobile-footrow .color-switcher-item:not(.light) svg { stroke: #ffd479 !important; }

  /* --- Právní: POSLEDNÍ prvek, úplně na spodní hraně (pod ovládacím blokem) --- */
  .slide-in-overlay .copyright { padding: 10px 20px 8px; margin-top: 0; }
  .slide-in-overlay .copyright p { color: #6f80a4 !important; font-size: 10.5px; line-height: 1.7; }
  .slide-in-overlay .copyright p:first-child { white-space: nowrap; }
  .slide-in-overlay .copyright a { color: #7fa6e6 !important; }

  /* --- Social lišta v mobilním menu: odstraněna (dle Lukáše) --- */
  .slide-in-overlay .social-bar { display: none !important; }
}