/* Chytrý energetik — stylopis webu
   Navazuje na css/tokens.css, ten se linkuje první.
   Layoutově vychází ze solatronic.eu, barevně z brand manuálu. */

/* ============================================================
   ZÁKLAD
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   TYPOGRAFIE
   Manrope má v nadpisech slabší charakter, proto řez 800.
============================================================ */
h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem);  font-weight: 800; line-height: 1.22; letter-spacing: -0.015em; }
h3 { font-size: 1.22rem; font-weight: 700; line-height: 1.35; }
h4 { font-size: 1rem;    font-weight: 700; }
p  { color: var(--gray-600); }

/* Název značky v běžném textu. Vladka 2026-09-17: „aplikuj verzi 2 —
   plné versálky."
   Verzálky, ne kapitálky: Manrope nemá OpenType feature smcp (ověřeno na
   reálně doručeném souboru z Google Fonts) a prohlížečem dopočítané
   kapitálky vycházejí tenčí než okolní text, takže by značku místo
   zvýraznění potlačily.
   Váha i barva se dědí schválně. Značka stojí i na tmavém pozadí — hero,
   sekce odlišení, patička — a natvrdo zadaná navy by tam zmizela.
   Nezlomitelná mezera drží obě slova na jednom řádku; jméno rozlomené
   přes konec řádku se přestane číst jako jedna věc. */
.znacka { text-transform: uppercase; letter-spacing: 0.02em; }

/* Label sekce je verzálkami už sám a jede na prokladu 0.14em. Značka uvnitř
   něj by si vnutila svých 0.02em a v jedné řádce by byly dva různé prosvity
   („Proč" jinak než „CHYTRÝ ENERGETIK"). Tady proklad patří labelu. */
.section-label .znacka { letter-spacing: inherit; }

.section-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.section-label.white { color: var(--orange); }

.section-title { margin-bottom: 18px; color: var(--navy); }
.section-title.center { text-align: center; }

/* Vladka 2026-09-17: „subheadliny moc zanikají." Řez jde na 700 a barva
   o stupeň ztmavne. Samotné ztučnění by nestačilo — světle šedá 1.08rem
   zaniká proto, že má malý kontrast, ne proto, že je tenká. Navy se sem
   dát nemůže, to je barva nadpisu a podtitul by s ním splynul. */
.section-subtitle {
  font-size: 1.08rem;
  font-weight: 700;
  color: #4a5270;
  max-width: 660px;
  margin: 0 0 56px;
  border-left: 3px solid var(--orange);
  padding-left: 18px;
}

/* Podtitul rozdělený na věty, každá na svém řádku (Vladka 2026-10-09).
   Potřebuje víc místa než běžných 660 px, jinak se první věta zalomí
   a smysl rozdělení zmizí — místo dvou řádků by byly tři. Na mobilu
   se stejně zalomí obě a bloky drží pohromadě odsazením. */
/* Podtitul, který se musí vejít na jeden řádek. Běžných 660 px stačí zhruba
   na 70 znaků tučného písma, delší věta spadne na druhý řádek a zbydou na
   něm dvě slova. Na mobilu se stejně zalomí, tam je rozhodující kontejner. */
.podtitul-siroky { max-width: 880px; }

/* Podtitul, který začíná definiční větou na samostatném řádku. Strong musí
   být blok, jinak za ním inline pokračuje zbytek odstavce. Míra je taková,
   aby se definice vešla na jeden řádek; pod 1100 px se stejně zalomí. */
.podtitul-definice { max-width: 1010px; }
.podtitul-definice strong { display: block; margin-bottom: 6px; }

.podtitul-vety { max-width: 820px; }

/* Podtitul, který má zůstat na jednom řádku. Změřeno na dvou větách, které
   tuhle třídu nesou: 707 px a 760 px. 800 pokrývá obě s rezervou na případnou
   změnu fontu. Širší nemá smysl, jen by to rozvolnilo sloupec. */
.podtitul-radek { max-width: 800px; }
.podtitul-vety > span { display: block; }
.podtitul-vety > span + span { margin-top: 6px; }

section { padding: 96px 0; }

/* ============================================================
   TLAČÍTKA
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

/* Plochá oranžová, ne gradient žárovky — ten patří jen na symbol. */
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 6px 20px rgba(245,121,59,.28); }
.btn-primary:hover { background: #e2662a; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245,121,59,.42); }

.btn-outline-white { background: rgba(255,255,255,.06); color: var(--white); border: 2px solid rgba(255,255,255,.45); }
.btn-outline-white:hover { background: rgba(255,255,255,.14); border-color: var(--white); transform: translateY(-2px); }

/* ============================================================
   HLAVIČKA
============================================================ */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 18px;
}

/* Vladka 2026-09-17 chtěla logo v menu větší. Lišta musela povyrůst
   s ním — na 68px výšky by 44px logo dýchalo jen 12px nahoře a dole
   a lepilo by se na hranu. Při 80px zbývá 18px, což je stejný poměr,
   jaký měla lišta předtím. Mění se s tím i scroll-padding-top, jinak
   by kotvy zajížděly pod lištu. */
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin-left: auto;
}
.nav-menu a {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  transition: color .2s;
}
.nav-menu a:hover { color: var(--orange-light); }
/* Stránka, na které návštěvník právě je. */
.nav-menu a.aktivni { color: var(--orange); }

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.btn-offer {
  background: var(--orange);
  color: var(--white);
  padding: 9px 20px;
  font-size: .87rem;
  font-weight: 700;
  border-radius: 8px;
  transition: background .2s;
}
.btn-offer:hover { background: #e2662a; }

.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.32);
  padding: 8px 18px;
  font-size: .87rem;
  font-weight: 600;
  border-radius: 8px;
  transition: background .2s, border-color .2s;
}
.btn-login:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); }
.btn-login svg { width: 15px; height: 15px; }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
============================================================ */
#hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 140px 0 96px;
  background: var(--navy-deep);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../img/foto/hero-pozadi.jpg') center/cover no-repeat;
  z-index: 0;
}

/* Navy závoj. Vladka 2026-09-17: „působí to moc jako mlha až chyba
   a není to šťavnatý."

   Mlhu nedělalo množství závoje, ale jeho plochost — rovnoměrný lehký
   opar přes celý banner. Krytí se proto neubírá všude stejně, ale
   rozevírá: vlevo pod textem hustší než předtím, vpravo skoro čiré.
   Fotka je tam, kde je zajímavá, prakticky bez závoje, a zároveň má text
   větší kontrast než měl. Zlom je na 68 %, text končí zhruba na 63 %
   šířky (kontejner 1200 px, hero-inner 760 px). */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(26,30,41,.88) 0%,
    rgba(26,30,41,.82) 42%,
    rgba(26,30,41,.44) 68%,
    rgba(46,53,72,.10) 100%);
}

/* Oranžová záře navazuje na světlo, které je ve fotce vpravo. */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 82% 42%, rgba(245,121,59,.22) 0%, transparent 66%),
    radial-gradient(ellipse 45% 55% at 8% 80%, rgba(66,76,103,.35) 0%, transparent 62%);
}

/* Přechod do světlé sekce pod hero. Původních 140 px rozmazávalo spodní
   šestinu banneru, Vladka 2026-09-17 chtěla zkrátit aspoň o 80 %.
   Teď je to jen změkčení hrany, ne přechod. */
#hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 26px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, var(--gray-50), transparent);
}

.hero-inner { position: relative; z-index: 3; max-width: 760px; }

/* Měkká clona jen pod textovým blokem.
   Závoj se rozevřel, aby fotka zvedla šťávu, jenže oranžové slovo
   v nadpisu tím spadlo na 2.3:1 — pod limit 3.0 pro velké písmo.
   Řeší se to místně: rozmazaná elipsa přesně pod textem, fotka vedle
   něj zůstává nedotčená. Plošné ztmavení by vrátilo mlhu.
   Záporný z-index ji drží pod písmem, ale nad závojem — hero-inner má
   z-index 3 a tvoří vlastní kontext vykreslování.

   Velikost elipsy se MUSÍ zadat ručně. Bez ní si ji prohlížeč natáhne
   k nejvzdálenějšímu rohu, takže vlevo dojde k průhlednosti až za okrajem
   prvku — a ten okraj uřízne clonu natvrdo. Vznikla svislá modrá čára přes
   celou výšku banneru (Vladka 2026-09-17, naměřeno na x≈58 při šířce 1440).
   Největší elipsa, která se ještě vejde celá, je 50 % × 50 % ve středu —
   dotkne se všech čtyř hran a dotkne se jich už průhledná. Střed proto
   zůstává na 50/50; posunout ho jde jen spolu se zmenšením rozměru, jinak
   se čára vrátí. Menší elipsa tu nestačí, oranžové slovo v nadpisu sahá
   až k 76 % šířky rámu a spadlo by pod limit kontrastu. */
.hero-inner::before,
.lp-hero-inner::before {
  content: '';
  position: absolute;
  inset: -120px -220px -110px -200px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(26,30,41,.66) 0%, rgba(26,30,41,.44) 52%, transparent 100%);
}

/* ── Šipka na rozhraní hero / další sekce ──
   Vladka 2026-09-17, stejné řešení jako na Solatroniku: ať je vidět,
   že se má scrollovat níž. Prvek má nulovou výšku a kolečko se vytáhne
   o půlku nahoru, takže sedí přesně na švu a nic pod sebou neposouvá.
   Patří hned za hero, ne dovnitř — uvnitř by ho ořízl overflow. */
.scroll-sipka {
  display: flex;
  justify-content: center;
  height: 0;
  position: relative;
  z-index: 10;
}
.scroll-sipka a {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  transform: translateY(-50%);
  animation: sipkaPoskok 1.8s ease-in-out infinite;
  transition: color .2s, border-color .2s;
}
.scroll-sipka a:hover { color: var(--orange-light); border-color: var(--orange); }
.scroll-sipka svg { width: 20px; height: 20px; }
@keyframes sipkaPoskok {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% + 6px)); }
}
/* Kdo si vypnul animace v systému, ať nemá kolečko poskakovat. */
@media (prefers-reduced-motion: reduce) {
  .scroll-sipka a { animation: none; }
}

/* Bez pilulky. Oválný podklad s rámečkem sem Vladka 2026-09-17 nechtěla,
   drží se jen písmo. Prostrkání nese hierarchii samo, podklad byl navíc.
   Platí pro všechny tři hero bannery, třída je společná. */
.hero-label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}

.hero-title { color: var(--white); margin-bottom: 22px; }
.hero-title .accent { color: var(--orange); }

/* Perex nese kanonickou definici produktu a ta je od 2026-10-09 na dvě věty.
   Celé tučně bylo přetížené, čtyři řádky boldu pod titulkem soupeřily s H1.
   Definice (první věta) proto zůstává v <strong>, druhá věta jde na 500 —
   stejný postup jako perex na jak-to-funguje.html. */
.hero-subtitle {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,.95);
  max-width: 660px;
  margin-bottom: 38px;
}

.hero-subtitle strong { font-weight: 700; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Pás s čísly pod hero — zapnout, až budou reálná čísla z provozu. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-stat .stat-num {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1.1;
}
.hero-stat .stat-label {
  font-size: .87rem;
  color: rgba(255,255,255,.62);
}

/* ============================================================
   PROČ JSME TADY
============================================================ */
#proc { background: var(--gray-50); }

#proc .proc-head { max-width: 860px; margin-bottom: 56px; }
#proc .proc-head h2 { font-weight: 800; }
/* Odsazení drží .proc-head. Bez tohohle by se sečetl dolní okraj
   podtitulku (56 px) s okrajem hlavičky a mezi otázkou a fotkami
   by zela díra 112 px. */
#proc .proc-head .section-subtitle { margin-bottom: 0; }

/* ============================================================
   SEGMENTY — Firmy / Veřejná správa
============================================================ */
.seg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

.seg {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  transition: transform .25s, box-shadow .25s;
}
.seg:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.seg-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.seg-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.seg:hover .seg-photo img { transform: scale(1.04); }

/* Navy závoj sjednotí dvě barevně nesourodé fotky pod jednu značku. */
.seg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,30,41,.82) 0%, rgba(26,30,41,.18) 55%, rgba(26,30,41,.28) 100%);
}

/* Plná oranžová s tmavým písmem. Původní průhledná navy pilulka s bílým
   textem splývala s tmavým spodkem fotky (Vladka 2026-09-17: „barevně to
   zaniká"). Průhlednost a blur jsou pryč — na plné ploše nemají co dělat
   a byly to právě ony, kdo popisek shodil do pozadí. Kontrast
   #1a1e29 na #f5793b je 6.1:1, na AA to stačí. */
.seg-badge {
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-deep);
  padding: 9px 16px;
  border-radius: 99px;
  background: var(--orange);
  box-shadow: 0 2px 10px rgba(26,30,41,.35);
}
.seg-badge img { width: 16px; height: 16px; }

.seg-body { padding: 32px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.seg-body h3 { font-size: 1.32rem; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.seg-body p  { margin-bottom: 22px; }

.seg-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--orange);
  transition: gap .2s;
}
.seg:hover .seg-link { gap: 14px; }
.seg-link svg { width: 17px; height: 17px; }

/* ============================================================
   JAK TO FUNGUJE — tmavý pás s fotkou žárovky
============================================================ */
#jak-to-funguje {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
}
.jak-bg {
  position: absolute;
  inset: 0;
  background: url('../img/foto/zarovka-data.jpg') center/cover no-repeat;
  opacity: .55;
}
.jak-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,30,41,.93) 0%, rgba(26,30,41,.8) 50%, rgba(26,30,41,.95) 100%);
}
#jak-to-funguje > .container { position: relative; z-index: 2; }
#jak-to-funguje .section-title { color: var(--white); }
#jak-to-funguje .section-subtitle { color: rgba(255,255,255,.92); border-left-color: var(--orange); }

.kroky {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}

.krok {
  position: relative;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  padding: 34px 28px 30px;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 48px rgba(0,0,0,.34);
  overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.krok:hover { transform: translateY(-5px); border-color: rgba(245,121,59,.5); }

/* Lesk v horním rohu karty. */
.krok::before {
  content: '';
  position: absolute;
  top: -50%; left: -20%;
  width: 90%; height: 140%;
  background: linear-gradient(115deg, rgba(255,255,255,.1), transparent 60%);
  pointer-events: none;
}

/* Ikona stojí přímo na kartě, bez dlaždice. Tah žárovky je bílý, symbol
   uvnitř oranžový — varianta pro šedomodrý podklad. Gradient žárovky se
   podle brand manuálu v ikonách nepoužívá, proto jen měkká záře pod ní.
   Velikost 56 px, pod 48 px se odznak u některých ikon rozpadá. */
.krok-ikona {
  position: relative;
  width: 56px; height: 56px;
  margin-bottom: 22px;
}
.krok-ikona::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,121,59,.3) 0%, transparent 68%);
}
.krok-ikona img { position: relative; width: 56px; height: 56px; }

.krok-cislo {
  position: absolute;
  top: 22px; right: 26px;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.1);
}

.krok h3 {
  font-size: .96rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.krok p { color: rgba(255,255,255,.8); font-size: .99rem; }

.sipka {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: rgba(245,121,59,.75);
}
.sipka svg { width: 34px; height: 34px; }

/* ============================================================
   KONTAKT + LEADOVÝ FORMULÁŘ
============================================================ */
#nabidka { background: var(--gray-50); }

.kontakt-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.kontakt-text h2 { margin-bottom: 18px; }
/* Vypadá jako .section-subtitle, ale má vlastní třídu, takže ho úprava
   řezu podtitulů minula a zůstal jediný tenký (Vladka 2026-09-17).
   Drží se stejné hodnoty jako .section-subtitle — kdyby se tam měnily,
   musí se změnit i tady. */
.kontakt-text > p {
  border-left: 3px solid var(--orange);
  padding-left: 18px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #4a5270;
  margin-bottom: 40px;
}

.vyhody { display: flex; flex-direction: column; gap: 26px; }
.vyhoda { display: flex; gap: 18px; align-items: flex-start; }
.vyhoda-ikona {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(245,121,59,.3);
}
.vyhoda-ikona svg { width: 25px; height: 25px; }
.vyhoda h4 { color: var(--navy); margin-bottom: 4px; }
.vyhoda p  { font-size: .95rem; }

/* --- formulář --- */
.lead-form {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.lead-form h3 { color: var(--navy); margin-bottom: 6px; }
.form-subtitle { font-size: .93rem; margin-bottom: 26px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-400); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245,121,59,.15);
}
.form-group textarea { resize: vertical; }

/* Souhlas se zpracováním údajů — bez něj nesmí formulář odejít. */
.form-souhlas {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 4px 0 20px;
}
.form-souhlas input {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--orange);
  cursor: pointer;
}
.form-souhlas label { font-size: .85rem; color: var(--gray-600); line-height: 1.5; }
.form-souhlas a { color: var(--orange); text-decoration: underline; }

.form-submit { width: 100%; justify-content: center; }
.form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--gray-400);
  margin-top: 16px;
  justify-content: center;
}
.form-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ============================================================
   PATIČKA
============================================================ */
#footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.62);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 44px;
}
/* Vladka 2026-09-17: „určitě o 200 % zvětši logo ve footeru." Z 28 na 84 px,
   tedy trojnásobek. Krytí jde na plných 100 % — v této velikosti by se
   ztlumení četlo jako vybledlé logo, ne jako decentní podpis.
   Na mobilu se drží 56 px, přes celou šířku by 84 px překrylo text. */
.footer-brand img { height: 84px; width: auto; margin-bottom: 24px; opacity: 1; }
.footer-brand p { color: rgba(255,255,255,.62); max-width: 380px; font-size: .97rem; }

/* Vladka 2026-09-17: label Kontakt oranžově. Je to jediný nadpis v patičce,
   oranžová ho spojí se stejně řešenými .section-label na stránce. */
.footer-col h4 {
  color: var(--orange);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
/* Sloupec bez nadpisu (Vladka 2026-09-17 nechtěla label WEB). Odsazení
   nahrazuje výšku h4 i jeho spodní mezeru, aby odkazy začínaly na stejné
   lince jako v sousedním sloupci Kontakt. Držet v součtu s .footer-col h4. */
.footer-col.bez-nadpisu { padding-top: calc(.83rem * 1.3 + 18px); }

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col li { font-size: .95rem; }
.footer-col a { color: rgba(255,255,255,.62); transition: color .2s; }
/* Název firmy v kontaktech. Samotný tučný řez by v šedé na 62 % nebyl vidět,
   proto jde barva zároveň nahoru. */
.footer-col li strong { font-weight: 800; color: rgba(255,255,255,.9); }
.footer-col a:hover { color: var(--orange-light); }
/* Zámek u odkazu na aplikaci, stejný jako v tlačítku v hlavičce
   (Vladka 2026-09-17). Stroke je currentColor, takže ikona mění barvu
   s odkazem i na hoveru. inline-flex kvůli svislému zarovnání ke střed
   řádku — s baseline by zámek visel pod písmem. */
.footer-col a.s-ikonou { display: inline-flex; align-items: center; gap: 9px; }
.footer-col a.s-ikonou svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Poznámka o ochranných známkách. Je to povinná drobnost, ne sdělení, tak
   stojí nad dělicí linkou a je o stupeň tišší než zbytek patičky. Šířku drží
   max-width, protože přes celou patičku by z toho byl jeden dlouhý řádek,
   který vypadá jako odstavec textu a přitahuje pozornost, kterou nemá mít. */
.footer-znamky {
  margin: 0 0 22px;
  max-width: 760px;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(255,255,255,.32);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .85rem;
  color: rgba(255,255,255,.45);
}
.footer-bottom a { color: rgba(255,255,255,.45); }
.footer-bottom a:hover { color: var(--orange-light); }
.footer-bottom .fb-odkazy { display: flex; flex-wrap: wrap; gap: 22px; }

/* ============================================================
   LANDING PAGE — společné prvky podstránek
   Staví na tom firmy.html, počítá se s tím i pro verejna-sprava.html.
   Homepage si drží vlastní #hero, tyhle třídy s ní nekolidují.
============================================================ */
.lp-hero {
  position: relative;
  overflow: hidden;
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: 150px 0 96px;
  background: var(--navy-deep);
}
.lp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Rozevřený závoj, stejná úvaha jako u .hero-overlay — vlevo hustší kvůli
   textu, vpravo skoro čiré, aby fotka byla vidět. Zlom o kus dřív, text
   je tu užší (lp-hero-inner 740 px). */
.lp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(26,30,41,.88) 0%,
    rgba(26,30,41,.82) 40%,
    rgba(26,30,41,.42) 66%,
    rgba(46,53,72,.08) 100%);
}
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 62% at 84% 40%, rgba(245,121,59,.2) 0%, transparent 66%);
}
/* Přechod do bílé sekce pod hero, stejná úprava jako u #hero::after. */
.lp-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, var(--white), transparent);
}
.lp-hero-inner { position: relative; z-index: 3; max-width: 740px; }
.lp-hero h1 { color: var(--white); margin-bottom: 20px; }
.lp-hero h1 .accent { color: var(--orange); }
.lp-hero-sub {
  font-size: clamp(1.05rem, 1.7vw, 1.26rem);
  font-weight: 700;
  line-height: 1.55;
  color: rgba(255,255,255,.95);
  max-width: 600px;
  margin-bottom: 36px;
}
/* Podtitul hero, který se musí vejít na dva řádky. 600 px je úzká míra
   zděděná z ostatních landing pages, delší věta tam spadne na tři. Pořád
   se vejde do .lp-hero-inner (740 px), takže sloupec nikam nevyroste. */
.lp-hero-sub-2r { max-width: 690px; }

/* --- podklad sekcí, střídá se bílá a světle šedá --- */
.lp-sekce.bila  { background: var(--white); }
.lp-sekce.seda  { background: var(--gray-50); }

/* --- PROČ: text vlevo, fotka vpravo --- */
.proc-dve {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}
/* height: auto je nutné. Obrázek má v HTML atribut height kvůli rezervaci
   místa a bez tohoto pravidla by se roztáhl na jeho pixelovou hodnotu. */
.proc-foto img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* Záře pod fotkou navazuje na oranžovou ze značky, fotka tím sedí na stránce. */
.proc-foto { position: relative; }
.proc-foto::before {
  content: '';
  position: absolute;
  inset: 14% -7% -9% 12%;
  z-index: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at center, rgba(245,121,59,.3) 0%, transparent 72%);
  filter: blur(22px);
}

/* Logo zastupuje v souvětí podmět, proto stojí vedle textu, ne nad ním.
   Do řádku vsadit nejde, značka je dvouřádková a rozhodila by proklad. */
 /* Původně tu stálo logo jako podmět souvětí a věta pokračovala malým
   písmenem („…propojuje"). Vladka 2026-09-17: „pere se to tam." Má pravdu —
   logo je obrázek, ne slovo, takže oko čte chybějící začátek věty a malé
   písmeno to potvrdí. Navíc je stejné logo o 40 px výš v hlavičce, takže
   nic nepřidávalo. Jméno je teď v textu a nese ho tučný řez.
   Vizuálně se drží .section-subtitle, jen bez jeho spodní mezery. */
.proc-claim {
  border-left: 3px solid var(--orange);
  padding-left: 22px;
  margin-top: 26px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #4a5270;
}
.proc-claim strong { font-weight: 800; color: var(--navy); }
/* Claim nemá spodní mezeru schválně (drží se .section-subtitle), takže
   navazující odstavec se na něj nalepil. Týká se to i o-nas.html, proto
   pravidlo a ne jednorázový styl na legislativě. */
.proc-claim + p { margin-top: 24px; }

/* --- ZVÝRAZNĚNÍ V BĚŽNÉM TEXTU ---
   Vladka chtěla větu o majetkové účasti oranžově (2026-10-09). Oranžová
   #f5793b má proti bílé kontrast jen 2,73:1, běžný text potřebuje 4,5:1.
   Celá věta oranžovými písmeny by se tedy hůř četla přesně tam, kde jde
   o číslo, které si má čtenář odnést. Tmavší oranžová v paletě není a
   přidávat ji kvůli jedné větě nebudu.
   Řeším to obráceně: oranžová jde do podkladu jako zvýrazňovač, písmo
   zůstává navy a ztuční. Oranžová je vidět, text je čitelný.
   box-decoration-break kvůli zalomení na dva řádky — bez něj by druhý
   řádek přišel o levé odsazení a podklad by měl useknutý roh. */
.zvyrazneno {
  background: var(--orange-tint);
  box-shadow: inset 0 -2px 0 rgba(245,121,59,.55);
  color: var(--navy);
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- TŘI BLOKY --- */
.lp-intro { margin-bottom: 54px; }

.blok + .blok { margin-top: 72px; }

.blok-head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 34px;
}
/* Číslo je kotva pro orientaci, ne pořadí kroku, proto bez šipek mezi bloky.
   Zvýrazněno podruhé 2026-10-09 (Vladka): --gray-400 pořád mizelo. Teď nese
   barvu nadpisu, odliší se velikostí a řezem, ne vybledlostí.

   Oranžové být nemůže — vedle něj stojí plný oranžový terč ikony a dva
   oranžové objekty vedle sebe se perou o stejnou pozornost. */
.blok-cislo {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--navy);
  flex-shrink: 0;
}
/* Pozor na display: span je ve výchozím stavu řádkový a rozměry by ignoroval.
   Na světlém podkladu drží ikonu čistý světlý terč, ne rozostřená záře jako
   na tmavých sekcích. Rozmazaný přechod tady vypadá jako šmouha. */
.blok-ikona {
  display: block;
  position: relative;
  width: 64px; height: 64px;
  flex-shrink: 0;
}
.blok-ikona::before {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: rgba(245,121,59,.1);
}
/* Reverzní terč (Vladka 2026-10-09). Naředěná oranžová na --gray-50 je skoro
   stejně světlá jako podklad sekce, takže hlavička bloku neměla žádnou váhu
   a splývala s kartami pod sebou. Tmavý terč jí ji vrátí a zároveň oddělí
   úroveň „hlavička bloku" od úrovně „bod".

   POZOR: ikona uvnitř musí být z icons/navy/, ne z icons/white/. Složky jsou
   pojmenované podle pozadí, pro které jsou určené, ne podle barvy tahu —
   icons/white/ má tah #2e3548 a na navy terči by zmizel úplně. */
.blok-ikona.reverz::before { background: var(--navy); box-shadow: var(--shadow-sm); }
/* Oranžový terč (Vladka 2026-10-09). Navy terč si drží jak-to-funguje.html,
   na landing pages by se to mísilo a obě úrovně by vypadaly jako jedna
   stránka. Oranžová odliší landing page od rozcestníku a zůstává v brandu.

   Druhý důvod, proč plná a ne jen obrys: .bod-ikona má úplně stejný podklad
   rgba(245,121,59,.1) a liší se jen průměrem (70 vs 90 px). Velká ikona
   hlavičky proto splývala s malými v kartách pod sebou. Plná plocha je
   oddělí spolehlivěji než linka kolem naředěného terče.

   POZOR na složku: ikona musí být z icons/orange/, ta má tah #2e3548 + bílou.
   icons/white/ má tah oranžový a na oranžovém terči by se ztratil. */
.blok-ikona.oranz::before { background: var(--orange); box-shadow: var(--shadow-sm); }
.blok-ikona img { position: relative; width: 64px; height: 64px; }

.blok-head h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.blok-head p { font-size: 1.05rem; max-width: 660px; }

.blok-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bod {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 30px 26px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.bod:hover {
  transform: translateY(-4px);
  border-color: rgba(245,121,59,.5);
  box-shadow: var(--shadow-md);
}
/* Na bílé sekci by bílá karta zmizela, tam se obarví na šedou. */
.lp-sekce.bila .bod { background: var(--gray-50); border-color: var(--gray-100); }

.bod-ikona {
  display: block;
  position: relative;
  width: 48px; height: 48px;
  margin-bottom: 24px;
}
.bod-ikona::before {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  background: rgba(245,121,59,.1);
}
.bod-ikona img { position: relative; width: 48px; height: 48px; }
.bod h4 { font-size: 1.02rem; font-weight: 800; color: var(--navy); margin-bottom: 9px; line-height: 1.35; }
.bod p  { font-size: .96rem; }

/* --- PRÁVNÍ STAV (legislativa.html) ---
   Datum platnosti a výhrada pod shrnutím zákona. Záměrně drobné a šedé:
   je to povinná informace, ne sdělení. Oranžová linka vlevo ji ale odliší
   od běžného odstavce, aby nevypadala jako pokračování textu v kartách. */
.pravni-stav {
  max-width: 860px;
  margin: 32px auto 0;
  padding: 16px 0 16px 20px;
  border-left: 3px solid var(--orange);
  font-size: .9rem;
  line-height: 1.65;
  color: var(--gray-600);
}
.pravni-stav strong { color: var(--navy); }
/* Značka pro nedoplněný údaj v textu. Svítí schválně, aby se nedalo
   přehlédnout, že stránka něco slibuje a nemá to. Použito a zase zrušeno
   na legislativě (chybějící datum platnosti, doplněno 2026-10-09),
   pravidlo zůstává pro příští rozpracovaný text. */
.doplnit {
  background: #ffe8a3;
  color: #7a5a00;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* --- FOTOPRUH: nádech mezi bloky textu --- */
.fotopruh {
  position: relative;
  overflow: hidden;
  height: 300px;
  padding: 0;
  background: var(--navy-deep);
}
.fotopruh-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .7;
}
.fotopruh-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26,30,41,.94) 0%, rgba(26,30,41,.72) 48%, rgba(26,30,41,.4) 100%);
}
.fotopruh .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}
/* Vladka 2026-09-17: popisek pruhu zvětšit. Je to jednovětý vzkaz přes
   celou šířku fotky, na 24 px se v té ploše ztrácel. Nahoru jde i šířka —
   při větším písmu by se do 620 px lámal na čtyři řádky a pruh je vysoký
   jen 300 px. */
.fotopruh p {
  color: var(--white);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  max-width: 760px;
}

/* --- INSIGHT: fotopruh, který místo popisku nese vlastní sdělení ---
   Dvě věty potřebují víc místa než jednořádkový popisek, proto výška podle
   obsahu a hustší závoj — text tu jde přes větší část šířky. */
.fotopruh.vysoky { height: auto; padding: 92px 0; }
.fotopruh.vysoky .fotopruh-overlay {
  background: linear-gradient(95deg, rgba(26,30,41,.95) 0%, rgba(26,30,41,.87) 58%, rgba(26,30,41,.6) 100%);
}
.fotopruh.vysoky .container { display: block; }
/* Bez oranžové svislice. Vladka 2026-09-17: „mám 2 svislé oranžové čáry
   pod sebou." Ta značka na webu znamená jednu věc — podtitul sekce, tak je
   to na schválené homepage. Insight žádný podtitul není, jen si ji půjčil,
   a tím vznikla druhá čára 240 px pod první. Váhu si insight drží navy
   pruhem, symbolem a oranžovou pointou, značku k tomu nepotřebuje.
   Text teď začíná na stejné lince jako zbytek stránky. */
.insight { max-width: 880px; }
.insight p {
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.42;
  color: var(--white);
  max-width: none;
}
/* Druhá věta nese pointu (kolik to stojí), proto barevný důraz. */
.insight p + p { margin-top: 20px; color: var(--orange); }

/* --- INSIGHT bez fotky: vpravo od textu symbol žárovky ---
   Vladka 2026-09-17: „jako WATCH OUT nebo Did you know?" Žárovka je
   výstražná značka, čistý navy podklad ji nechá vyniknout — na fotce
   by se ztratila v detailech. Levý oranžový pruh u textu zůstává. */
.fotopruh.bez-fotky { background: var(--navy-deep); }
.insight-blok {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
}
/* Žárovka vlevo. Používá jen legislativa: nad insightem tam stojí grafika
   paragrafu v pravém sloupci, takže by dva velké symboly byly hned pod
   sebou (Vladka 2026-10-09). Firmy a veřejná správa mají nad insightem
   jinou skladbu, tam žárovka zůstává vpravo.

   Omezeno na 641 px a výš schválně. Pod tím jede insight v jednom sloupci
   a žárovka je nad textem už bez toho; bez média by dvojitá specificita
   přebila mobilní pravidlo a text by se na mobilu lámal do úzkého sloupku. */
@media (min-width: 641px) {
  .insight-blok.symbol-vlevo { grid-template-columns: auto 1fr; }
  .insight-blok.symbol-vlevo .insight-symbol { order: -1; }
}

/* Záře pod symbolem, aby na ploché navy neplaval ve vzduchoprázdnu.
   Poloměr větší než symbol, jinak by vznikl viditelný kotouč. */
.insight-symbol { position: relative; display: flex; justify-content: center; }
.insight-symbol::before {
  content: '';
  position: absolute;
  inset: -44%;
  background: radial-gradient(circle, rgba(245,121,59,.22) 0%, transparent 68%);
  pointer-events: none;
}
/* Symbol je v logu nakreslený po úhlopříčce (naměřeno 45° od svislice).
   Vladka 2026-09-17 ho tu chce kolmo, tak se otáčí o 45° proti směru
   hodinových ručiček. Ve čtvercovém viewportu se otočený tvar vejde,
   úhlopříčka je delší než strana. V logu zůstává šikmo, tam se nesahá. */
.insight-symbol img {
  position: relative;
  width: 132px;
  height: auto;
  display: block;
  transform: rotate(-45deg);
}

/* --- PRUH S RAZÍTKY ---
   Stránka jinak střídá bílou, šedou a navy a navy vychází pětkrát, takže
   se rytmus ztrácí. Tenhle pruh ho rozbije světlým tónem oranžové.
   Záměrně tón, ne plná oranžová: ta věta je ujištění, ne varování —
   signální barva by lhala a přebila by i oranžová tlačítka.
   Navy na --orange-tint dává kontrast 10.8:1. */
.pruh-razitko {
  background: var(--orange-tint);
  border-top: 3px solid var(--orange);
  padding: 46px 0;
}
.pruh-razitko .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.razitko-text {
  color: var(--navy);
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  font-weight: 800;
  line-height: 1.35;
  max-width: 560px;
}
.razitka { list-style: none; display: flex; gap: 12px; flex-wrap: wrap; }
.razitka li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid rgba(245,121,59,.35);
  border-radius: 99px;
  padding: 10px 18px;
  font-size: .9rem;
  font-weight: 700;
}
.razitka svg { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; }

/* --- NABÍDKA na tmavém podkladu --- */
/* Kotva #nabidka je stejná na všech stránkách, ale homepage jí dává světlé
   pozadí. Selektor na ID přebíjí třídu, proto je tu ID uvedené znovu. */
.nabidka-tmava,
#nabidka.nabidka-tmava {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
}
.nabidka-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: .5;
}
.nabidka-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,30,41,.9) 0%, rgba(26,30,41,.78) 50%, rgba(26,30,41,.94) 100%);
}
.nabidka-tmava > .container { position: relative; z-index: 2; }
.nabidka-tmava h2 { color: var(--white); }
.nabidka-tmava .kontakt-text > p { color: rgba(255,255,255,.92); }
.nabidka-tmava .vyhoda h4 { color: var(--white); }
.nabidka-tmava .vyhoda p  { color: rgba(255,255,255,.66); }

/* --- NABÍDKA jako banner, bez formuláře --- */
/* Jak to funguje (Vladka 2026-09-18). Vlastní třída, ne úprava
   .kontakt-inner — ten drží dvousloupcové rozvržení na zbylých stránkách
   a formulář z nich nemizí.
   Užší než container: na plnou šířku 1200 px by nadpis měl řádky za hranicí
   pohodlného čtení. Podtitul je ještě o kus užší, aby se pod nadpisem
   zalomil dřív a nevznikl obrácený trojúhelník.
   Podtitul tu nesmí mít oranžovou svislici, kterou má .kontakt-text > p —
   na vystředěném textu by visela mimo osu a svislice na webu navíc znamená
   podtitul sekce, ne odstavec v banneru. */
.nabidka-banner { padding: 88px 0; }
.nabidka-banner .banner-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.nabidka-banner .banner-inner > p {
  font-size: 1.08rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  max-width: 660px;
  /* Horní mezera doplněna 2026-09-20. Nadpis banneru je na 800 a jede na
     prokladu 1.22, podtitul je taky tučný — bez odsazení se obojí slilo
     do jednoho bloku a druhý řádek nadpisu se četl jako začátek odstavce. */
  margin: 14px auto 38px;
}

/* --- CTA blok uprostřed stránky ---
   Vladka 2026-09-18: „dodej mi k sekcím CTA button, které budou odkazovat
   na leadový formulář."
   Karta, ne pruh přes celou šířku. Tmavý pruh na plnou šířku na tomto webu
   znamená konec stránky (.nabidka-tmava) a druhý takový by čtenáře zastavil
   v polovině — vypadalo by to, že stránka končí dřív, než končí.
   Navy gradient s oranžovým rámečkem je stejná kombinace jako .schema-jadro,
   takže se to čte jako prvek webu, ne jako vložená reklama.
   Horní margin je větší než spodní: karta patří k sekci nad sebou, ze které
   vyplývá, ne k té pod sebou. Spodní nulu drží padding sekce.
   Nadpis je h3, ne h2 — v osnově stránky stojí pod nadpisem sekce a druhá
   h2 ve stejné sekci by rozbila hierarchii pro čtečku i vyhledávač. */
.cta-blok {
  max-width: 820px;
  margin: 76px auto 0;
  padding: 40px 44px 42px;
  background: var(--grad-hero);
  border: 1.5px solid rgba(245,121,59,.42);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.cta-blok h3 {
  color: var(--white);
  font-size: clamp(1.18rem, 2.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.cta-blok p {
  color: rgba(255,255,255,.8);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* --- PROLINKY na další stránky --- */
.prolinky-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prolink {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.prolink:hover {
  transform: translateY(-3px);
  border-color: rgba(245,121,59,.55);
  box-shadow: var(--shadow-md);
}
.prolink img { width: 48px; height: 48px; flex-shrink: 0; }
.prolink h4 { color: var(--navy); margin-bottom: 3px; }
.prolink p  { font-size: .93rem; }
.prolink .sip { margin-left: auto; color: var(--orange); flex-shrink: 0; }
.prolink .sip svg { width: 22px; height: 22px; }

/* ============================================================
   JAK TO FUNGUJE — schéma soutoku
   Dva vstupy, jeden uzel, jeden výstup. Kreslí se jako živý HTML prvek,
   ne jako obrázek: jde ho přepsat bez grafika, čte ho vyhledávač i čtečka
   a na mobilu se poskládá pod sebe, což by u obrázku znamenalo nečitelné
   písmo přes celou šířku.

   Spojnice jsou SVG s preserveAspectRatio="none", takže se roztáhnou přesně
   nad rozestup karet, ať je okno jakkoli široké. Tah drží jednu tloušťku
   díky vector-effect="non-scaling-stroke" — bez něj by se protažením
   zdeformoval na klín.
============================================================ */
.schema { max-width: 1020px; margin: 0 auto; }

.schema-vstupy { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }

.schema-uzel {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  box-shadow: var(--shadow-sm);
}
.schema-uzel-hlava { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.schema-uzel-hlava img { width: 52px; height: 52px; flex-shrink: 0; }
.uzel-eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.schema-uzel h3 { color: var(--navy); font-size: 1.16rem; font-weight: 800; }

/* Otázka, na kterou ten vstup odpovídá. Je to nosná informace celého
   schématu — teprve ona ukáže, že jde o dvě různé pravdy o téže spotřebě. */
.uzel-otazka {
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 16px;
}
.uzel-vycet { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.uzel-vycet li {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 99px;
  padding: 6px 13px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-600);
}

/* Sbíhavé spojnice. Výška je pevná, aby šla sladit s odsazením karet. */
.schema-spojka { height: 76px; }
.schema-spojka svg { width: 100%; height: 100%; display: block; }

.schema-jadro {
  background: var(--grad-hero);
  border: 1.5px solid rgba(245,121,59,.4);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  /* Na střed, ne k levé hraně (Vladka 2026-09-17). Jádro je uzel schématu,
     do kterého shora sbíhají spojnice a dole z něj vychází šipka — obojí
     míří do poloviny šířky, takže obsah patří tam taky. */
  justify-content: center;
  /* Mezera musí být znatelně větší než rozestup mezi slovesy (26 px),
     jinak se logo čte jako páté slovo v řadě. */
  gap: 44px;
  box-shadow: var(--shadow-md);
}
/* Logo, ne symbol žárovky: uzel se jmenuje Chytrý energetik a logo to
   řekne samo. Výška se řídí atributem height v HTML, šířka dopočítá —
   globální reset nemá img { height: auto }, viz [[chytryenergetik-lp-firmy]]. */
.schema-jadro img { height: 54px; width: auto; flex-shrink: 0; }

/* Čtyři slovesa jsou to jediné, co se z jádra čte, takže mají největší
   písmo ve schématu. Vladka 2026-09-17: „tohle je klíčové a musí být
   opravdu viditelné." Oranžová na --navy-deep dává 6.1:1. */
.jadro-slovesa { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.jadro-slovesa li {
  color: var(--orange);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Svislá spojnice k výstupu. Šipka je součástí čáry, ne samostatný znak —
   textová šipka by se četla jako obsah a čtečka by ji přečetla nahlas. */
.schema-sipka { height: 58px; display: flex; justify-content: center; }
.schema-sipka svg { height: 100%; width: 34px; display: block; }
/* Náhrada sbíhavých spojnic ve sloupcovém rozvržení, viz media query níž. */
.schema-sipka.jen-uzke { display: none; }

.schema-vystup {
  background: var(--orange-tint);
  border: 1.5px solid rgba(245,121,59,.45);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  text-align: center;
}
.schema-vystup h3 { color: var(--navy); font-size: 1.2rem; font-weight: 800; margin-bottom: 14px; }
.schema-vystup .uzel-vycet { justify-content: center; }
.schema-vystup .uzel-vycet li { background: var(--white); border-color: rgba(245,121,59,.35); color: var(--navy); }

/* Poznámka pod schématem (Vladka 2026-10-09). Vyvrací čtení, že zákazník
   musí mít obě cesty zároveň — sbíhavé spojnice to totiž naznačují.

   Je to poslední patro schématu, ne poznámka pod čarou. Proto žádná
   vodorovná linka (ta znamená „tady sekce končí a začíná něco jiného"),
   ale vlastní podklad v plné šíři .schema a obsah na střed, stejně jako
   jádro a výstup nad ní. Odsazení 36 px odpovídá rozestupu uzlů. */
.schema-poznamka {
  margin-top: 36px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 30px 32px 32px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #4a5270;
}

/* „Stačí jedna cesta" je celá pointa. Velikostí odpovídá nadpisu výstupu,
   aby se to četlo jako další uzel schématu, ne jako běžný odstavec. */
.poznamka-lead {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 24px;
}

/* Tři sloupce, ne odrážky pod sebou. Číslovat se nesmí, viz komentář v HTML,
   takže volby odlišuje oranžová čárka nad štítkem — svislé dělicí linky by
   tu dělaly tabulku a vodorovné pomlčky zase seznam kroků. */
.schema-volby {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  text-align: left;
}
.schema-volby li { padding-top: 16px; border-top: 3px solid var(--orange); }
.schema-volby li p { font-size: .97rem; line-height: 1.6; }

.volba-stitek {
  display: block;
  font-weight: 800;
  color: var(--navy);
  font-size: 1.02rem;
  margin-bottom: 7px;
}
/* Třetí volba je bonus, ne třetí povinný krok. Signál nese praporek
   „nepovinné", ne bledší linka — tři stejně silné čárky drží řádek
   pohromadě a jedna vybledlá by vypadala jako chyba vykreslení. */
.volba-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-600);
}

/* ============================================================
   ODLIŠENÍ — čím se Chytrý energetik liší od běžných nástrojů
   Vladka 2026-09-17: „spousta manažerů nebo úředníků si to vůbec
   neuvědomuje." Proto to nestojí jako věta ve schématu, ale jako vlastní
   tmavá sekce s přímým srovnáním. Dvě karty vedle sebe, ne tabulka —
   tabulka by na mobilu buď zmizela v posuvníku, nebo se rozpadla.
   Levá karta je záměrně potlačená (přerušovaný rámeček, tlumený text),
   pravá nese oranžovou. Rozdíl musí být vidět dřív, než se začne číst.
============================================================ */
.odliseni-sekce { background: var(--navy-deep); }
.odliseni-sekce .section-title { color: var(--white); }
/* Druhá věta nadpisu oranžově (Vladka 2026-10-09). Obě věty jsou nosné,
   barvou se rozliší role: bílá = problém trhu, oranžová = co děláme my.
   #f5793b na --navy-deep dává 6.1:1, viz tokens.css. Blok nahrazuje <br>. */
.odliseni-sekce .section-title .radek-akcent { display: block; color: var(--orange); }
/* Podtitul je delší než jinde a nese v druhé větě celé sdělení sekce
   (Vladka 2026-09-17: „tu poslední větu vybolduj"). Ztučnit ji nestačí,
   podtituly na webu už tučné jsou — rozdíl proto dělá i krytí. První věta
   jde na 76 %, zvýrazněná zůstává bílá a o stupeň těžší.
   Oranžová se 2026-09-18 zkusila a Vladka ji vrátila zpět: „příliš řvavá."
   Celá věta v akcentu je jiná role než akcent na dvou slovech — v této
   sekci je oranžová navíc už na svislici podtitulu, na rámečku pravé karty
   i v pointě dole, takže čtvrtý oranžový prvek přestal cokoli řadit.
   Pod 4.5:1 to neklesne ani u té tlumené, na --navy-deep vychází 11.5:1. */
.odliseni-sekce .section-subtitle { color: rgba(255,255,255,.76); max-width: 720px; }
.odliseni-sekce .section-subtitle strong { color: var(--white); font-weight: 800; }

.odliseni { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.odl-karta { border-radius: var(--radius-lg); padding: 32px 30px; }
.odl-karta h3 { font-size: 1.14rem; font-weight: 800; margin-bottom: 20px; }
.odl-seznam { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.odl-seznam li { display: flex; gap: 14px; align-items: flex-start; font-size: .99rem; line-height: 1.6; }
.odl-seznam svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

.odl-karta.bezne {
  background: rgba(255,255,255,.03);
  border: 1.5px dashed rgba(255,255,255,.22);
}
.odl-karta.bezne h3 { color: rgba(255,255,255,.72); }
.odl-karta.bezne li { color: rgba(255,255,255,.58); }
.odl-karta.bezne svg { color: rgba(255,255,255,.35); }

.odl-karta.nase {
  background: rgba(245,121,59,.09);
  border: 1.5px solid var(--orange);
  box-shadow: 0 10px 40px rgba(245,121,59,.14);
}
.odl-karta.nase h3 { color: var(--white); }
.odl-karta.nase li { color: rgba(255,255,255,.9); }
.odl-karta.nase svg { color: var(--orange); }

/* Pointa celé sekce. Oranžovou svislici tu mít nesmí — ta na webu znamená
   podtitul sekce a jeden už je o kus výš (viz [[chytryenergetik-lp-firmy]]).
   Váhu proto nese vodorovná linka a velikost písma. */
.odliseni-pointa {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 2px solid rgba(245,121,59,.4);
  max-width: 900px;
}
.odliseni-pointa p {
  color: var(--white);
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  font-weight: 800;
  line-height: 1.4;
}
.odliseni-pointa p .accent { color: var(--orange); }
.odliseni-pointa p + p {
  margin-top: 16px;
  font-size: 1.02rem;
  font-weight: 500;
  color: rgba(255,255,255,.72);
}

/* ============================================================
   CESTA DAT — pět kroků na jedné lince
   Jiná osa než bloky 01–03: ty dělí data podle původu, tohle podle pořadí
   zpracování. Proto tu nejsou karty s odstavci, ale úzký pruh — kdyby měl
   stejnou váhu, četl by se jako opakování.
============================================================ */
.cesta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.cesta-krok { position: relative; padding: 52px 22px 0 0; }
/* Linka vede od vlastního kolečka do kolečka dalšího kroku, proto přesahuje
   o 16 px do sousední buňky. Poslední krok už nikam nepokračuje. */
.cesta-krok::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 16px;
  right: -16px;
  height: 2px;
  background: var(--gray-200);
}
.cesta-krok:last-child::before { display: none; }
.cesta-cislo {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--orange);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cesta-krok h4 { color: var(--navy); font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.cesta-krok p { font-size: .92rem; line-height: 1.55; }

/* ============================================================
   VÝSTUPY — co z toho reálně vypadne
   Karty schválně nepředstírají obrazovku aplikace. Ukazují, co systém
   pošle, ne jak to vypadá. Zákazník si vymyšlené rozhraní zapamatuje
   a na demu pak uvidí něco jiného.
   Bez konkrétních čísel (rozhodnutí Vladky 2026-09-17) — dokud nejsou
   reálná data, vymyšlené hodnoty by se musely označovat jako ilustrační
   a tím by ztratily účinek.
============================================================ */
.vystupy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Tři karty v řadě. Na jak-to-funguje jsou čtyři, tedy mřížka 2×2, a tam
   dvousloupec zůstává. Na mobilu padá všechno do jednoho sloupce níž. */
.vystupy.tri { grid-template-columns: repeat(3, 1fr); }
.vystup {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
}
/* Štítek typu výstupu. Plná --orange místo naředěné (Vladka 2026-10-09),
   na bílé kartě byl --orange-tint skoro neviditelný a ta slova nesou to
   hlavní — čím vás systém osloví.

   Text zůstává navy, ne bílý: bílá na #f5793b dává 2.73:1, navy 4.47:1.
   U verzálek na .74rem je to rozdíl mezi čitelným a nečitelným. Novou
   tmavší oranžovou jsem nezaváděla, brand ji nemá a plná primární barva
   je sama o sobě dost výrazná. Ikona musí jít navy taky — oranžová by se
   na oranžovém podkladu ztratila úplně. */
.vystup-typ {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--navy);
  border-radius: 99px;
  padding: 7px 15px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.vystup-typ svg { width: 14px; height: 14px; color: var(--navy); flex-shrink: 0; }
.vystup h4 { color: var(--navy); font-size: 1.06rem; font-weight: 800; line-height: 1.4; margin-bottom: 9px; }
.vystup p { font-size: .96rem; }

/* Odkaz pod kartami na homepage. Není to tlačítko — vede na podrobnost,
   ne na konverzi, a plné CTA by tady soupeřilo s formulářem o kus níž. */
.vystupy-odkaz { margin-top: 28px; text-align: center; }
.vystupy-odkaz a {
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
  transition: color .2s;
}
.vystupy-odkaz a:hover { color: var(--orange); }

/* ============================================================
   FAQ — nativní rozbalovačka
   <details> umí rozbalení samo, bez JavaScriptu, a čtečka ho ohlásí
   správně. Vlastní skript by tu jen přidal chybu navíc.
============================================================ */
.faq { max-width: 860px; margin: 0 auto; }
.faq-polozka { border-bottom: 1.5px solid var(--gray-200); }
.faq-polozka summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  color: var(--navy);
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.4;
}
.faq-polozka summary::-webkit-details-marker { display: none; }
.faq-polozka summary:hover { color: var(--orange); }
/* Znaménko plus složené ze dvou čar. Po rozbalení se svislá otočí a zbude
   minus — bez výměny znaku, takže nepřeskočí šířka řádku. */
.faq-znak { position: relative; width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; }
.faq-znak::before,
.faq-znak::after {
  content: '';
  position: absolute;
  background: var(--orange);
  border-radius: 1px;
  transition: transform .25s;
}
.faq-znak::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-znak::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-polozka[open] .faq-znak::after { transform: rotate(90deg); }
.faq-polozka > p { padding: 0 44px 24px 0; font-size: .99rem; line-height: 1.7; }

/* ============================================================
   O NÁS
============================================================ */

/* První sekce stránky, která nemá hero (Vladka 2026-09-21).
   Hlavička je position: fixed a nezabírá v toku místo — na ostatních
   stránkách ji odsazuje výška hera, tady by obsah lezl pod ni.
   80 px je výška .nav-inner, zbytek je běžné odsazení sekce. */
.lp-sekce.bez-hera { padding-top: 176px; }

/* --- Mateřská společnost: text vlevo, logo vpravo ---
   Logo nestojí v textu, ale vedle něj. GRID Software je tady nový pojem
   a čtenář si ho musí spojit se značkou, kterou už zná z hlavičky. */
.gs-blok { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
.gs-text p + p { margin-top: 16px; }
.gs-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 34px;
  /* Ne --navy-deep, ale --navy: přesně ta barva, kterou mělo dodané logo
     vypálenou jako pozadí. Po odstranění pozadí do alfy zůstal v hranách
     písmen její antialias a na jiném odstínu by kolem textu svítil. */
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Logo je bílé s oranžovým symbolem, potřebuje tmavý podklad.
   Na bílé sekci by wordmark zmizel. */
.gs-logo img { width: 100%; max-width: 300px; height: auto; display: block; }

/* --- Dvě produktové karty ---
   Karty jsou tmavé kvůli logům. Logo SolaTronicu je žluté (#fbc30d) a na
   bílé kartě by bylo skoro neviditelné, přebarvit cizí logo nelze. Tmavý
   podklad je jediné řešení, ve kterém obě loga vypadají tak, jak mají. */
.produkty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.produkt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 30px;
  background: var(--grad-hero);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Karta produktu, na jehož webu čtenář právě je, nese oranžový rámeček.
   Bez toho vypadají obě nabídky stejně a stránka přestane být o Chytrém
   energetikovi. */
.produkt.tento { border-color: var(--orange); box-shadow: 0 10px 40px rgba(245,121,59,.16); }
.produkt-znacka {
  display: flex;
  align-items: center;
  min-height: 56px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Obě loga mají jinou kresbu i jiný poměr stran, takže se nedají srovnat
   na stejnou výšku. Srovnává se optická velikost, ne číslo v kódu. */
.produkt-znacka img.logo-ce { height: 46px; width: auto; display: block; }
.produkt-znacka img.logo-st { height: 20px; width: auto; display: block; }
.produkt-stitek {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid rgba(245,121,59,.5);
  border-radius: 99px;
  padding: 5px 11px;
  white-space: nowrap;
}
.produkt h3 { color: var(--white); font-size: 1.16rem; font-weight: 800; margin-bottom: 12px; }
.produkt p { color: rgba(255,255,255,.8); font-size: .99rem; line-height: 1.7; }
.produkt-pro {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .92rem;
  /* Ne 62 %: v nejsvětlejším bodě gradientu (#424c67) to vychází 4.44:1,
     tedy těsně pod hranicí AA pro běžný text. Na 70 % je 5.15:1. */
  color: rgba(255,255,255,.7);
}
.produkt-pro strong { color: rgba(255,255,255,.88); font-weight: 700; }
/* Odkaz se odsazuje automaticky až na spodní hranu, aby obě karty měly
   šipku ve stejné výšce i při různě dlouhém textu. */
.produkt-odkaz {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 24px;
  font-weight: 700;
  font-size: .97rem;
  color: var(--orange);
}
.produkt-odkaz svg { width: 17px; height: 17px; transition: transform .2s; }
.produkt-odkaz:hover svg { transform: translateX(4px); }

/* --- Tabulka rozdílů ---
   Skutečná tabulka, ne mřížka z divů: je to porovnání dvou sloupců podle
   pěti kritérií a čtečka i vyhledávač z ní mají vyčíst vztahy mezi buňkami. */
.rozdil-tabulka { width: 100%; border-collapse: collapse; }
.rozdil-tabulka th, .rozdil-tabulka td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-200);
  font-size: .99rem;
  line-height: 1.6;
}
.rozdil-tabulka thead th { font-size: 1.02rem; font-weight: 800; color: var(--navy); border-bottom-width: 2px; }
/* Sloupec s kritériem je popisek řádku, ne obsah — proto tlumený a užší. */
.rozdil-tabulka tbody th { width: 27%; font-weight: 700; color: #4a5270; }
.rozdil-tabulka .sl-nas { background: rgba(245,121,59,.06); }
.rozdil-tabulka thead .sl-nas { color: var(--orange); }

/* Pointa sekce. Vodorovná linka, ne svislá oranžová — ta na webu znamená
   podtitul sekce. Stejné řešení jako .odliseni-pointa, jen na světlém. */
.rozdil-pointa {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid rgba(245,121,59,.4);
  max-width: 900px;
}
.rozdil-pointa p { font-size: clamp(1.1rem, 2.2vw, 1.42rem); font-weight: 800; line-height: 1.45; color: var(--navy); }
.rozdil-pointa p .accent { color: var(--orange); }
/* Dvě souběžné věty pod sebou, ne v jednom odstavci. Liší se jediným
   slovem a ten paralelismus je čitelný jen tehdy, když si obě začátky
   stojí pod sebou. */
.pointa-dvojice > span { display: block; }
.pointa-dvojice > span + span { margin-top: 4px; }
.rozdil-pointa p + p { margin-top: 18px; font-size: 1.02rem; font-weight: 500; color: #4a5270; }

/* --- Zakladatelé --- */
.tym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tym-karta {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Poměr stran drží řádek karet zarovnaný i při různě vysokých snímcích.
   Portréty jsou čtvercové, ale ořez 4:5 je pro obličej příznivější. */
.tym-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--gray-50); }
.tym-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.tym-telo { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.tym-jmeno { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.tym-citat {
  font-size: .94rem;
  line-height: 1.65;
  color: #4a5270;
  border-left: 3px solid rgba(245,121,59,.45);
  padding-left: 14px;
}
.tym-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--orange);
}
.tym-linkedin svg { width: 17px; height: 17px; }

/* --- fotky konkrétních podstránek ---
   Drží se v CSS, ne v atributu style, ať zůstane HTML čisté. */
.foto-firmy-hero    { background-image: url('../img/foto/firmy-hero.jpg'); }
.foto-firmy-merice  { background-image: url('../img/foto/firmy-pruh-merice.jpg'); }
.foto-firmy-nabidka { background-image: url('../img/foto/firmy-nabidka.jpg'); }

.foto-obce-hero     { background-image: url('../img/foto/obce-hero.jpg'); }
.foto-obce-solar    { background-image: url('../img/foto/obce-pruh-solar.jpg'); }
.foto-obce-nabidka  { background-image: url('../img/foto/obce-nabidka.jpg'); }

.foto-jak-hero      { background-image: url('../img/foto/jak-hero.jpg'); }
/* 2800×1000 (2,8:1), čistý ořez ze snímku 4200×2172 posunutý o 180 px dolů.
   Hero se pohybuje mezi 3,25:1 na 1920 px a 0,65:1 na mobilu, takže cover
   ořízne pokaždé jinak. Tahle fotka to snese, protože je to textura bez
   hlavního motivu. Teplé světlo vyšlo na 79 % šířky a 42 % výšky, čili přesně
   pod oranžovou radiálu z .lp-hero::before na 84 % 40 %. Při výměně fotky
   to kontrolovat znovu, jinak se záře a světlo na snímku rozejdou. */
.foto-legislativa-hero { background-image: url('../img/foto/legislativa-hero.jpg'); }
.foto-jak-nabidka   { background-image: url('../img/foto/jak-nabidka.jpg'); }

/* ============================================================
   PRÁVNÍ STRÁNKY — GDPR a všeobecné obchodní podmínky
   Společný stylopis pro zasady-ochrany-osobnich-udaju.html
   a vseobecne-obchodni-podminky.html.

   Dvě vědomá odlišení od zbytku webu:
   1. Měřítko textu je užší (76 znaků), ne plný kontejner 1200 px. Právní
      text se čte po odstavcích, ne skenuje po blocích, a přes celou
      šířku se v něm ztrácí řádek.
   2. Žádná fotka v hero a žádné fade-up animace v těle. Je to dokument,
      ne landing page. Animovaný odstavec smlouvy působí nevážně a při
      hledání konkrétního bodu přes Ctrl+F ještě překáží.
============================================================ */
.pravni-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  padding: 148px 0 72px;
}
/* Stejná oranžová záře jako na .lp-hero, jen slabší a výš. Drží stránku
   v rodině s ostatními, ale nepřebíjí text — pod ní není fotka, která by
   ji unesla. */
.pravni-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 70% at 86% 34%, rgba(245,121,59,.16) 0%, transparent 68%);
}
.pravni-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to top, var(--white), transparent);
}
.pravni-hero-inner { position: relative; z-index: 2; max-width: 760px; }
.pravni-hero h1 { color: var(--white); margin-bottom: 18px; }
.pravni-hero-sub {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  max-width: 620px;
}
.pravni-ucinnost {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 16px;
  border: 1px solid rgba(245,121,59,.55);
  border-radius: 100px;
  background: rgba(245,121,59,.12);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-light);
}

.pravni-telo { padding: 72px 0 96px; background: var(--white); }

/* Obsah vlevo, text vpravo.

   POZOR, OBSAH NESMÍ BÝT STICKY. Zkoušeno to bylo (`position: sticky;
   top: 100px`) a Vladka to 2026-10-09 zamítla: „ten levý box se
   nescroluje hned, ale až později s body, které jsou ke konci VOP."
   Přilepený box totiž stojí na místě, dokud se nevyčerpá výška jeho
   rodiče, a teprve na konci dokumentu se rozjede — vypadá to, jako by
   se stránka rozpadla na dvě části s vlastní rychlostí. Stránka má
   skrolovat celá, obsah včetně. */
.pravni-rozvrzeni {
  display: grid;
  grid-template-columns: 252px 1fr;
  gap: 60px;
  align-items: start;
}
.pravni-navigace {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}
.pravni-navigace h2 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.pravni-navigace ol { list-style: none; counter-reset: pn; }
.pravni-navigace li { counter-increment: pn; margin-bottom: 9px; }
.pravni-navigace a {
  display: grid;
  grid-template-columns: 1.7em 1fr;
  font-size: .89rem;
  line-height: 1.4;
  color: var(--gray-600);
  transition: color .2s;
}
.pravni-navigace a::before {
  content: counter(pn) ".";
  font-weight: 700;
  color: var(--gray-400);
  transition: color .2s;
}
.pravni-navigace a:hover,
.pravni-navigace a:hover::before { color: var(--orange); }

/* 76 znaků na řádek. Nad to se oko při návratu na začátek dalšího řádku
   začne ztrácet a právní text nemá žádné vizuální záchytné body. */
.pravni-text { max-width: 76ch; }
.pravni-text a { color: var(--orange); text-decoration: underline; }

.pravni-uvod {
  padding: 26px 28px;
  margin-bottom: 44px;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--orange-tint);
}
.pravni-uvod p { color: var(--navy); }
.pravni-uvod p + p { margin-top: 13px; }

/* padding: 0 je nutné, ne kosmetika. Článek je <section> a globální
   pravidlo `section { padding: 96px 0 }` mu jinak dá 192 px navíc, takže
   mezi dvěma články dokumentu vznikne půlobrazovková díra. */
.pravni-sekce { margin-bottom: 46px; padding: 0; scroll-margin-top: 100px; }
.pravni-sekce-hlava {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}
.pravni-sekce-hlava .cislo {
  flex: none;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.pravni-sekce-hlava h2 {
  font-size: clamp(1.26rem, 2vw, 1.56rem);
  color: var(--navy);
}
.pravni-sekce h3 {
  margin: 26px 0 10px;
  font-size: 1.04rem;
  color: var(--navy);
}
.pravni-sekce > p { margin-bottom: 13px; }

/* Číslovaný bod smlouvy. Číslo je v samostatném sloupci, ne v textu —
   při zalomení na víc řádků tím vznikne visutá zarážka a bod jde najít
   okem i přes půl stránky. Sloupec 3.5em unese i „10.15.". */
.pravni-bod {
  display: grid;
  grid-template-columns: 3.5em 1fr;
  margin-bottom: 13px;
}
.pravni-bod .cislo {
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pravni-bod p { margin: 0; }

.pravni-seznam {
  list-style: none;
  margin: 14px 0 16px;
  padding-left: 2px;
}
/* Za bodem smlouvy se seznam zarovná pod text, ne pod číslo. Totéž platí
   pro nečíslovaný dovětek k bodu (kontaktní řádek za čl. 1.1) — bez
   odsazení by zůstal viset ve sloupci s čísly a četl se jako samostatný
   odstavec, kterým není. */
.pravni-bod + .pravni-seznam,
.pravni-podradek { margin-left: 3.5em; }
.pravni-podradek { margin-bottom: 13px; }
.pravni-seznam li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--gray-600);
}
.pravni-seznam li::before {
  content: '';
  position: absolute;
  left: 2px; top: .66em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--orange);
}
.pravni-seznam li strong { color: var(--navy); }

.pravni-kontakt {
  margin: 18px 0;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.pravni-kontakt dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 26px;
  font-size: .95rem;
}
.pravni-kontakt dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
  align-self: center;
}
.pravni-kontakt dd { color: rgba(255,255,255,.94); }
.pravni-kontakt a { color: var(--white); text-decoration: underline; }
.pravni-kontakt a:hover { color: var(--orange-light); }

.pravni-patka {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-200);
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
}

@media (max-width: 1000px) {
  /* Obsah se přesune nad text. Vedle užšího sloupce by na text zbyla
     míra, ve které se právní věta neláme rozumně. */
  .pravni-rozvrzeni { grid-template-columns: 1fr; gap: 36px; }
  .pravni-navigace ol { columns: 2; column-gap: 28px; }
  .pravni-navigace li { break-inside: avoid; }
  .pravni-text { max-width: none; }
}
@media (max-width: 640px) {
  .pravni-hero { padding: 112px 0 54px; }
  .pravni-telo { padding: 48px 0 64px; }
  .pravni-navigace ol { columns: 1; }
  .pravni-uvod { padding: 20px; }
  .pravni-sekce { margin-bottom: 36px; }
  /* Na mobilu je 3,5em ze 100 % šířky moc, číslo jde nad text. */
  .pravni-bod { grid-template-columns: 1fr; gap: 2px; }
  .pravni-bod .cislo { color: var(--orange); }
  .pravni-bod + .pravni-seznam,
  .pravni-podradek { margin-left: 0; }
  .pravni-kontakt { padding: 22px 20px; }
  .pravni-kontakt dl { grid-template-columns: 1fr; gap: 3px; }
  .pravni-kontakt dt { margin-top: 10px; }
  .pravni-kontakt dt:first-child { margin-top: 0; }
}

/* ============================================================
   NÁJEZDOVÁ ANIMACE
============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1000px) {
  .kroky { grid-template-columns: 1fr; gap: 20px; }
  /* Ve sloupci musí šipka ukazovat dolů, ne doprava. */
  .sipka { padding: 0; transform: rotate(90deg); }
  .kontakt-inner { grid-template-columns: 1fr; gap: 44px; }

  /* Landing page: tři odrážky vedle sebe by byly příliš úzké. */
  .blok-body { grid-template-columns: 1fr; gap: 18px; }
  .proc-dve { grid-template-columns: 1fr; gap: 40px; }
  .proc-foto { order: -1; }

  /* Jak to funguje: pět kroků vedle sebe vychází na 130 px na krok,
     to je pro nadpis o dvou slovech málo. Ve dvou řadách je linka mezi
     kroky nesmyslná (vedla by z konce řady na začátek další), proto
     rovnou do sloupce se svislou linkou vlevo. */
  .cesta { grid-template-columns: 1fr; gap: 0; }
  .cesta-krok { padding: 0 0 30px 52px; }
  .cesta-krok::before {
    top: 32px; bottom: -6px; left: 15px;
    right: auto; width: 2px; height: auto;
  }
  .cesta-krok:last-child { padding-bottom: 0; }

  .odliseni { grid-template-columns: 1fr; gap: 20px; }
  /* Karta „běžné nástroje" musí zůstat první i ve sloupci, srovnání
     funguje jen v pořadí nejdřív dnešek, potom rozdíl. */
  /* Pozor na specificitu: .vystupy.tri je 0,2,0 a samotné .vystupy tady
     0,1,0, takže bez tohoto řádku by trojsloupec přebil mobilní pravidlo
     a držel tři sloupce i na telefonu. */
  .vystupy, .vystupy.tri { grid-template-columns: 1fr; }

  /* O nás */
  .gs-blok { grid-template-columns: 1fr; gap: 34px; }
  .gs-logo { padding: 32px 28px; }
  .produkty-grid { grid-template-columns: 1fr; gap: 20px; }
  /* Čtyři portréty vedle sebe vycházejí pod 200 px, obličej se pak ztrácí. */
  .tym-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-menu { display: none; }
  .nav-hamburger { display: flex; }
  .nav-right .btn-login span { display: none; }

  /* Rozbalené mobilní menu */
  .nav-menu.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 80px; left: 0; right: 0;
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 8px 24px 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
  }
  .nav-menu.open li { width: 100%; }
  .nav-menu.open a {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .seg-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { height: 56px; }

  .prolinky-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  section { padding: 66px 0; }
  #hero { padding: 116px 0 66px; min-height: auto; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .hero-stats { gap: 28px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .lead-form { padding: 28px 22px; }
  .seg-body { padding: 26px 22px 24px; }
  /* Tlačítko má nastavené nowrap, aby se heslo nelámalo doprostřed —
     na úzkém displeji se proto musí roztáhnout na celou šířku karty,
     jinak přeteče její rámeček. */
  .cta-blok { margin-top: 54px; padding: 30px 22px 32px; }
  .cta-blok .btn { display: flex; width: 100%; justify-content: center; }

  /* O nás na mobilu */
  .lp-sekce.bez-hera { padding-top: 146px; }
  .produkt { padding: 26px 22px 24px; }
  .produkt-znacka { flex-wrap: wrap; gap: 12px; min-height: 0; }
  .produkt-stitek { margin-left: 0; }

  /* Karty zakladatelů se na 390 px překlápějí na ležato. Dva sloupce
     vycházejí na 170 px na kartu a citát se v nich láme po dvou slovech —
     sloupec textu užší než pět slov se přestane číst jako věta.
     Portrét vlevo drží pevnou šířku, text si bere zbytek. */
  .tym-grid { grid-template-columns: 1fr; gap: 16px; }
  .tym-karta { flex-direction: row; }
  .tym-foto { flex: 0 0 132px; aspect-ratio: auto; }
  .tym-telo { padding: 18px 18px 16px; }
  .tym-jmeno { margin-bottom: 10px; }
  .tym-citat { font-size: .9rem; padding-left: 12px; }
  .tym-linkedin { padding-top: 14px; }

  /* Tabulka rozdílů se na mobilu rozpadá na bloky. Tři sloupce na 390 px
     vycházejí na 110 px na buňku, tam se nevejde ani jedno slovo bez
     rozdělení. Popisek sloupce nese každá buňka sama přes data-popis,
     protože hlavička tabulky ve sloupcovém zobrazení mizí.
     Rozlišení sloupců dělá podbarvení, ne svislá oranžová linka — ta na
     webu znamená podtitul sekce a jinde se používat nesmí. */
  .rozdil-tabulka, .rozdil-tabulka tbody, .rozdil-tabulka tr,
  .rozdil-tabulka tbody th, .rozdil-tabulka tbody td { display: block; width: auto; }
  .rozdil-tabulka thead { display: none; }
  .rozdil-tabulka tbody tr { padding-bottom: 18px; border-bottom: 1px solid var(--gray-200); }
  .rozdil-tabulka tbody th {
    border: 0;
    padding: 22px 0 10px;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
  }
  .rozdil-tabulka tbody td { border: 0; padding: 12px 16px; border-radius: 10px; background: var(--gray-50); }
  .rozdil-tabulka tbody td + td { margin-top: 8px; }
  .rozdil-tabulka tbody td.sl-nas { background: rgba(245,121,59,.09); }
  .rozdil-tabulka tbody td::before {
    content: attr(data-popis);
    display: block;
    margin-bottom: 4px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* Ne --gray-400: na mobilu je hlavička tabulky skrytá a tento popisek
       je jediné místo, kde se čtenář dozví, o který produkt jde. Šedá 400
       má na --gray-50 jen 2.43:1, šedá 600 má 5.51:1. */
    color: var(--gray-600);
  }
  /* Náš sloupec odlišuje podbarvení buňky, popisek nemusí být oranžový —
     oranžová má na tom tónu pozadí 2.51:1 a nešla by přečíst. */
  .rozdil-tabulka tbody td.sl-nas::before { color: var(--navy); }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Landing page na mobilu */
  .lp-hero { padding: 116px 0 66px; min-height: auto; }
  .lp-hero-cta { flex-direction: column; align-items: stretch; }
  .lp-hero-cta .btn { justify-content: center; }
  .blok-head { flex-wrap: wrap; gap: 16px; }
  .blok-cislo { order: 2; }
  .blok-head > div { flex-basis: 100%; }
  .blok + .blok { margin-top: 52px; }
  .fotopruh { height: 220px; }
  .fotopruh.vysoky { height: auto; padding: 56px 0; }
  .insight { padding-left: 18px; }
  /* Žárovka jde nad text — vedle něj by na úzkém displeji ukrojila
     polovinu šířky a odstavec by se rozlámal na slabiky. */
  .insight-blok { grid-template-columns: 1fr; gap: 26px; }
  .insight-symbol { order: -1; justify-content: flex-start; }
  .insight-symbol img { width: 86px; }
  /* Logo nad textem, vedle sebe se na úzkém displeji nevejdou. */
  .proc-claim { flex-direction: column; align-items: flex-start; gap: 14px; }
  .prolink { flex-wrap: wrap; gap: 14px; }

  /* Schéma soutoku ve sloupci. Sbíhavé spojnice nemají co spojovat,
     když jsou karty pod sebou — nahradí je svislá šipka jako u výstupu. */
  .schema-vstupy { grid-template-columns: 1fr; gap: 0; }
  /* Tři sloupce voleb se v užším okně nevejdou, texty by zlámaly na slabiky. */
  .schema-volby { grid-template-columns: 1fr; gap: 20px; }
  .schema-poznamka { padding: 26px 22px 28px; }
  .schema-spojka { display: none; }
  .schema-sipka.jen-uzke { display: flex; }
  .schema-vstupy .schema-uzel + .schema-uzel { margin-top: 20px; }
  .schema-uzel { padding: 24px 22px 22px; }
  /* align-items se musí zadat i ve sloupci: ve výchozím stretch by se
     logo roztáhlo na plnou šířku, protože má width: auto. */
  .schema-jadro { flex-direction: column; align-items: center; gap: 20px; padding: 26px 22px; }
  .schema-jadro img { height: 44px; }
  /* Ve sloupci se slovesa lámou na dva řádky a zarovnat je na střed jde
     jen přes samotný seznam — justify-content na jádru řídí svislou osu,
     protože je přepnuté na column. */
  .jadro-slovesa { justify-content: center; }
  .schema-vystup { padding: 24px 22px; }
  .schema-sipka { height: 44px; }

  .odl-karta { padding: 26px 22px; }
  .vystup { padding: 22px 22px 20px; }
  .faq-polozka summary { font-size: .99rem; gap: 14px; }
  .faq-polozka > p { padding-right: 0; }
}

/* ============================================================
   ÚZKÉ TELEFONY
   Naměřeno 2026-09-21: obsah hlavičky má pevnou minimální šířku 485 px
   (logo 155 + „Chci nabídku" 127 + zámek 53 + hamburger 36 + mezery).
   Pod tuhle hranici se hamburger vytlačil za pravý okraj okna a na
   telefonech 320–480 px, tedy na většině z nich, nešlo vůbec otevřít menu.
   Týká se to všech stránek webu, ne jen O nás.
============================================================ */
@media (max-width: 480px) {
  /* Přihlášení mizí z hlavičky, ne nabídka: do aplikace se přihlašují
     stávající zákazníci a odkaz na ni zůstává v patičce i na /login.html.
     „Chci nabídku" je akviziční tlačítko a to je na mobilu cennější. */
  .nav-right .btn-login { display: none; }
  .nav-inner { gap: 10px; }
  .nav-logo img { height: 36px; }
  .btn-offer { padding: 9px 14px; font-size: .82rem; }
}