/* Písma se načítají z vlastního hostingu, ne z Google Fonts.
   Zápis je i tady, nejen v <link> v HTML — je to pojistka pro případ,
   že by se nahrál nový styl a staré HTML. Soubor se stáhne jen jednou.
   Podrobnosti a důvody jsou v assets/pisma.css. */
@import url('pisma.css');

/* =========================================================
   Roman Mudra — osobní brand
   Sdílený styl pro všechny stránky webu.

   Barvy vychází z loga: uhlově šedé "R", modro-tyrkysový
   gradient "M" (#4facfe -> #00f2fe). Modrá je hlavní barva
   webu (Domů, Tvorba webů). Na elektrikářské podstránce je
   logo i akcenty přebarvené do měděné — stejná značka,
   jiný odstín pro obor.

   Pozn. ke kontrastu: --brand a --copper slouží k rámečkům,
   ikonám a linkám. Pro pozadí tlačítek s bílým textem se
   používají tmavší --brand-strong / --copper-strong, aby
   text splnil kontrastní poměr 4,5:1 (WCAG AA).
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* Základ 17 px místo výchozích 16. Všechny velikosti písma jsou
   v rem, takže se s ním zvětší i drobné texty v kartách — právě ty
   byly nejhůř čitelné. Nadpisy mají clamp přepočítaný tak, aby
   zůstaly na 48 px, tedy tam, kde byly. */
html { scroll-behavior: smooth; font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

:root{
  --paper: #FFFFFF;
  /* Světlá stříbrná. Hledal se odstín, který je jasně vidět jako jiný
     blok, ale nepůsobí jako těžká šedá plocha. #FBFCFD bylo na větším
     monitoru k nerozeznání od bílé, #F2F4F7 zase moc tmavé a modré.
     Tenhle tón má proti bílé jen tři body do modra, takže čte jako
     stříbrná, ne jako bledě modrá. Používá se JEN na pruhy sekcí. */
  --paper-alt: #F4F6F7;
  /* Drobné výplně uvnitř bílých karet (štítky, citace, spodek
     balíčku) potřebují víc tónu, jinak by na bílé zmizely. */
  --fill-soft: #F1F3F6;
  --card: #FFFFFF;
  --ink: #17181A;
  /* Barva běžného textu. Původní #63666C mělo na šedém pruhu kontrast
     jen 5,22 — technicky prošlo, ale číst se to nedalo. Teď 8,62,
     a pořád je to o stupeň světlejší než nadpisy, takže hierarchie drží. */
  --ink-soft: #363B43;
  --ink-faint: #4E535B;
  --line: #E4E7EB;
  --line-soft: #EDEFF2;

  /* hlavní značková barva — přímo z loga */
  --brand: #1596D6;
  --brand-dark: #0D6E9E;
  --brand-strong: #0D6E9E;      /* pozadí tlačítek */
  --brand-strongest: #0A5578;   /* hover tlačítek */
  --brand-tint: #E3F3FB;
  --brand-grad: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
  /* nejtmavší člen modré řady — závoj přes fotku, patička, tmavé plochy */
  --brand-ink: #072D40;

  /* elektro varianta — logo přebarvené do měděné */
  --copper: #B8672C;
  --copper-dark: #8F4F21;
  --copper-strong: #8F4F21;     /* pozadí tlačítek */
  --copper-strongest: #6F3D19;  /* hover tlačítek */
  --copper-tint: #F5E9DE;
  --copper-grad: linear-gradient(135deg, #C1712F 0%, #F2B15C 100%);

  --earth: #4A6330;

  /* DVĚ PÍSMA, KAŽDÉ NA SVOU PRÁCI.
     Montserrat je geometrický grotesk stavěný na nadpisy — má
     uniformní tahy a široká kulatá písmena. V nadpisu je to jeho
     síla, v odstavci únava: řádky nemají rytmus a oko po nich
     klouže. Běžný text proto sází Inter, který je navržený přímo
     na čtení na displeji. Přesně tak to má i japonske-fasady.cz,
     tedy web, který se uživateli líbil. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-nadpis: "Montserrat", system-ui, sans-serif;

  /* Velikost je hlavní rozdíl mezi „působí jako Word" a „působí draze".
     Nadpisy sekcí drží 48 px, úvodní nadpis 64 px — stejně jako weby,
     které se uživateli líbily. Menší hodnoty vypadaly jako dokument. */
  --fs-hero: clamp(2.1rem, 1.1rem + 4.4vw, 3.77rem);
  --fs-h2: clamp(1.74rem, 1.2rem + 2.4vw, 2.83rem);
  --fs-lead: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  /* svislý prostor sekcí — druhá polovina téhož rozdílu */
  --sekce-y: clamp(76px, 8vw, 132px);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px;

  --container: 1140px;
  --pad-inline: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.2,.7,.3,1);

  /* skutečnou výšku hlavičky dopočítá skript.js — tohle je záloha,
     než se načte, aby mobilní menu nepřekrývalo hlavičku */
  --header-h: 66px;
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  /* Záměrně BEZ `-webkit-font-smoothing: antialiased`. To vypnutí
     subpixelového vyhlazování ztenčuje tahy a text pak působí
     vybledle a rozdrbaně — přesně to, na co si uživatel stěžoval. */
}

h1, h2, h3, h4 { font-family: var(--font-nadpis); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
p { color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }

/* Prvky, které nesou značku nebo se chovají jako nadpis, zůstávají
   v Montserratu — jsou krátké, takže se na nich jeho tvary projeví
   jako charakter, ne jako námaha. */
.logo-wordmark,
.eyebrow,
.avatar-circle span,
.uvod-portret-zastup strong,
.pripad-zastup span:first-child,
.balicek-cena strong,
.pricing-price{ font-family: var(--font-nadpis); }

.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-inline); }
.container--narrow{ max-width: 760px; }
.container--reading{ max-width: 720px; }
.section{ padding-block: var(--sekce-y); position: relative; }
/* Čím světlejší plocha, tím víc práce odvádí linka — plocha už sekci
   sama neoddělí, takže linka je z tmavší --line, ne --line-soft. */
.section--alt{ background: var(--paper-alt); border-block: 1px solid var(--line); }
.section--flush-top{ padding-top: 0; }

/* kotvy pod lepivou hlavičkou nesmí skončit schované pod ní */
[id]{ scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* ---------- Přístupnost ---------- */
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: .92rem; font-weight: 700;
  transition: transform .2s var(--ease);
}
.skip-link:focus{ transform: translate(-50%, 0); }

.eyebrow{
  display: inline-flex; align-items: flex-start; gap: var(--space-2);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: var(--space-4); font-weight: 700;
}
.eyebrow--muted{ color: var(--ink-faint); }
/* Pomlčka drží na prvním řádku i když se text zalomí na úzkém displeji.
   Odsazení shora ji opticky srovná se středem prvního řádku. */
.eyebrow::before{
  content: ""; width: 18px; height: 2px; flex-shrink: 0;
  background: currentColor; display: inline-block; border-radius: 1px;
  margin-top: 0.75em;
}
.accent-electro .eyebrow:not(.eyebrow--muted){ color: var(--copper-dark); }

/* Šířku omezuje nadpis sám, ne obal — jinak by se do stejných 18 znaků
   vešel i popis pod ním a lámal se do úzkého sloupce. */
.section-head{ max-width: 680px; margin-bottom: var(--space-8); }
.section-head h2{ font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; max-width: 18ch; }
.section-head p{ margin-top: var(--space-4); font-size: 1.05rem; max-width: 56ch; }

.block-head{ font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: var(--space-5); }
.text-lead{ font-size: 1.05rem; }
.text-muted{ color: var(--ink-soft); }

/* ---------- Logo ---------- */
/* „R" i slovo ROMAN dědí barvu z .logo přes currentColor. Na tmavém
   podkladu stačí přidat .logo--svetle a obojí zbělá; „MUDRA" si nechává
   gradient, ten drží na světlém i tmavém. */
.logo{ display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: #111111; }
.logo--svetle{ color: #FFFFFF; }
.logo-mark{ height: 30px; width: auto; }
.logo-wordmark{ display: flex; flex-direction: column; line-height: 1.2; }
.logo-word-roman{ font-size: 14px; font-weight: 200; letter-spacing: 4px; color: currentColor; }
.logo-word-mudra{ font-size: 14px; font-weight: 600; letter-spacing: 4px; margin-left: 15px; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: var(--brand-dark); -webkit-text-fill-color: transparent; }
.logo-word-mudra--electro{ background: var(--copper-grad); -webkit-background-clip: text; background-clip: text; color: var(--copper-dark); -webkit-text-fill-color: transparent; }
footer .logo-mark{ height: 26px; }

/* ---------- Tlačítka ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px 26px; border-radius: var(--radius-full);
  font-size: 0.94rem; font-weight: 700; min-height: 48px;
  border: 1.5px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--brand-strong); color: #fff; box-shadow: 0 10px 22px -12px rgba(13,110,158,.55); }
.btn-primary:hover{ background: var(--brand-strongest); }
.btn-primary--electro{ background: var(--copper-strong); color: #fff; box-shadow: 0 10px 22px -12px rgba(143,79,33,.55); }
.btn-primary--electro:hover{ background: var(--copper-strongest); }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink-faint); }
.btn-small{ padding: 10px 20px; font-size: .85rem; min-height: 40px; }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: .6; cursor: progress; }

/* ---------- Hlavička ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{ display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); gap: var(--space-5); }

.site-nav{ display: flex; align-items: center; gap: var(--space-6); }
.nav-links{ display: flex; align-items: center; gap: var(--space-5); }
.nav-link{
  font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  position: relative; display: inline-flex; align-items: center;
  min-height: 40px; padding-inline: 4px; transition: color .2s var(--ease);
}
.nav-link::after{ content:""; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 2px; background: var(--brand); border-radius: 1px; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.accent-electro .nav-link::after,
.site-header--electro .nav-link::after{ background: var(--copper); }
.nav-link:hover{ color: var(--ink); }
.nav-link:hover::after{ transform: scaleX(1); }
.nav-link[aria-current="page"]{ color: var(--ink); }
.nav-link[aria-current="page"]::after{ transform: scaleX(1); }

.nav-toggle{
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle span{ display: block; height: 2px; width: 26px; background: var(--ink); border-radius: 1px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding-block: var(--space-8) var(--space-7); }
.hero .eyebrow{ margin-bottom: var(--space-3); }

/* Popisek oboru a odkaz zpět stojí nad sebou, ne vedle sebe.
   Oba prvky jsou inline, takže bez tohoto obalu by se srovnaly
   na jeden řádek a odkaz by vypadal jako pokračování popisku. */
.hero-meta{ display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--space-5); }
.hero-meta .eyebrow{ margin-bottom: var(--space-2); }
.hero-meta .hero-back{ margin-bottom: 0; }

.hero-back{ font-size: .88rem; font-weight: 600; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-5); transition: color .2s var(--ease); width: fit-content; min-height: 40px; }
.hero-back:hover{ color: var(--ink); }
.hero-back svg{ flex-shrink: 0; transition: transform .2s var(--ease); }
.hero-back:hover svg{ transform: translateX(-3px); }
.hero-title{ font-size: var(--fs-hero); max-width: 17ch; }
.hero-title--wide{ max-width: 19ch; }
/* Podtitulek uvnitř H1: pro čtenáře vizuálně druhořadý, pro vyhledávač
   ale součást hlavního nadpisu — bez něj by H1 na úvodní stránce
   neobsahoval jediné slovo o tom, co vlastně nabízím. */
.hero-title-sub{
  display: block; margin-top: var(--space-3);
  font-size: clamp(1.15rem, .9rem + 1vw, 1.6rem);
  font-weight: 600; letter-spacing: -0.01em; color: var(--brand-dark);
}
.accent-electro .hero-title-sub{ color: var(--copper-dark); }
.hero-text{ max-width: 54ch; margin-top: var(--space-5); font-size: var(--fs-lead); color: var(--ink-soft); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

/* =========================================================
   Úvod s fotkou přes celou šířku
   Hlavička na těchto stránkách leží průhledně přes fotku,
   proto má <body> třídu .uvod-foto — přepíná hlavičku,
   menu i tlačítka do světlé varianty.
   ========================================================= */
.uvod{ position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.uvod-foto{ position: absolute; inset: 0; z-index: -2; }
.uvod-foto img{ width: 100%; height: 100%; object-fit: cover; }

/* TŘI VRSTVY ZÁVOJE — žádnou nemazat.
   Měřeno na nejhorším případě, úplně bílé fotce:
   · horní pruh   — bez něj má menu v liště kontrast 1,78 (nečitelné)
   · spodní pruh  — bílá dlaždice vystoupí z pozadí 5,65; bez něj 2,81
   · šikmý přechod — drží nadpis 7,0, popisek 7,59, štítek 10,68
   Díky tomu jde do úvodu vložit jakoukoli fotku, i světlou. */
.uvod-zavoj{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,45,64,.62) 0%, rgba(7,45,64,0) 150px),
    linear-gradient(0deg, rgba(7,45,64,.72) 0px, rgba(7,45,64,0) 230px),
    linear-gradient(100deg, rgba(7,45,64,.94) 0%, rgba(7,45,64,.86) 42%, rgba(7,45,64,.44) 100%);
}
/* Elektro podstránka drží měděnou jako barvu oboru, takže i závoj je
   teplý. Vrstvy i jejich krytí jsou stejné jako u modré varianty. */
.uvod--elektro .uvod-zavoj{
  background:
    linear-gradient(180deg, rgba(43,27,14,.62) 0%, rgba(43,27,14,0) 150px),
    linear-gradient(0deg, rgba(43,27,14,.72) 0px, rgba(43,27,14,0) 230px),
    linear-gradient(100deg, rgba(43,27,14,.94) 0%, rgba(43,27,14,.86) 42%, rgba(43,27,14,.44) 100%);
}
.uvod--elektro .btn-primary--electro{ color: #2B1B0E; }
/* Zbytek měděných výjimek je až na konci souboru — mají stejnou
   specificitu jako modrá pravidla, takže musí stát za nimi. */

.uvod-obsah{
  position: relative;
  padding-top: calc(var(--header-h) + clamp(44px, 6vw, 84px));
  padding-bottom: clamp(128px, 14vw, 184px);
  max-width: 880px;
}
/* Světlejší tón modré z loga. Původní #4FACFE mělo na štítku
   nad bílou fotkou kontrast jen 4,25 — pod hranicí 4,5:1. */
/* Úvod s portrétem: text vlevo, fotka vpravo. Vpravo je závoj
   nejřidší, takže fotka leží na nejsvětlejším místě a vystoupí. */
.uvod-mrizka{ display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.uvod-mrizka .uvod-obsah{ max-width: none; padding-right: 0; }
/* Nadpis je vedle fotky o stupeň menší — v užším sloupci by se
   64px verze lámala do čtyř řádků a úvod by přerostl obrazovku. */
.uvod-mrizka .uvod-titul{ font-size: clamp(2.1rem, 1.15rem + 3.3vw, 3.4rem); max-width: 16ch; }
.uvod-portret{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  /* width je nutná — obsah je polohovaný, takže bez ní má rámeček
     nulovou šířku a max-width nemá co omezovat. */
  width: 100%; aspect-ratio: 4 / 5; max-width: 380px; margin-left: auto;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 24px 48px -24px rgba(0,0,0,.55), 0 60px 100px -60px rgba(0,0,0,.7);
}
.uvod-portret img{ width: 100%; height: 100%; object-fit: cover; }
.uvod-portret-zastup{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; text-align: center; padding: var(--space-6);
}
.uvod-portret-zastup strong{ font-size: 2.6rem; font-weight: 200; letter-spacing: .12em; color: #fff; }
.uvod-portret-zastup span{ font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.86); max-width: 22ch; }

.uvod .eyebrow{ color: #8ACDFF; }
.accent-electro .uvod .eyebrow{ color: #F2B15C; }
.uvod-titul{
  font-size: var(--fs-hero); font-weight: 800; line-height: 1.04;
  letter-spacing: -0.03em; color: #fff; max-width: 15ch;
}
.uvod-titul--uzky{ max-width: 13ch; }
.uvod-text{ margin-top: var(--space-5); font-size: 1.13rem; color: rgba(255,255,255,.88); max-width: 52ch; }
.uvod .hero-actions{ margin-top: var(--space-6); }
.uvod .hero-meta{ margin-bottom: var(--space-4); }
.uvod .hero-back{ color: rgba(255,255,255,.82); }
.uvod .hero-back:hover{ color: #fff; }

/* Na tmavém podkladu se plné tlačítko obrací: bílá plocha, tmavý text.
   Modré ani měděné tlačítko by tu ztratilo sílu a splynulo se závojem. */
.uvod .btn-primary,
.uvod .btn-primary--electro{ background: #fff; color: var(--brand-ink); box-shadow: 0 16px 34px -20px rgba(0,0,0,.75); }
.uvod .btn-primary:hover,
.uvod .btn-primary--electro:hover{ background: var(--brand-tint); }
.uvod .btn-ghost{ background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.uvod .btn-ghost:hover{ border-color: #fff; }
.uvod a:focus-visible, .uvod button:focus-visible{ outline-color: #fff; }

/* Dlaždice vyjíždějí nahoru přes spodní okraj úvodu — díky tomu se
   úvod a obsah nepotkají jako dva slepené pruhy. */
.tiles--preklad{ position: relative; z-index: 2; margin-top: -88px; }
.tiles--preklad .tile{ box-shadow: 0 22px 48px -26px rgba(7,45,64,.5); }

/* ---------- Rozcestník: úvod rozdělený na web a elektro ----------
   Vlevo fotka k webům s modrým závojem, vpravo elektro s měděným,
   mezi nimi šikmá svítící spára. Najetím na dlaždici dostane .uvod
   třídu .na-web / .na-el (initSplitUvod) a polovina se roztáhne.
   ⚠️ Každý tvar clip-path má ve všech stavech STEJNÝ počet bodů —
   jinak se ořez nepřelije plynule, ale skočí. Body za 100 % jsou
   schválně: drží stejný sklon hrany i mimo obrazovku. */
/* Úvod a dlaždice se vejdou přesně do výšky okna, takže rozcestník
   při otevření působí jako samostatná stránka. Výšku dopočítává
   initVyskaRozcestniku ze skutečné výšky dlaždic — napevno zapsaná
   hodnota by na jiném monitoru buď ořízla dlaždice, nebo nechala díru.
   Bez JS (nebo na mobilu) se pravidlo neuplatní a úvod má svou výšku. */
/* ⚠️ height, ne min-height — úvod má vlastní výšku z odsazení obsahu
   (přes 780 px), takže min-height by ho nikdy nezmenšil. Odsazení se
   tu proto počítá jinak: shora lišta, zdola místo pro dlaždice, které
   do úvodu přesahují. Obsah je svisle na střed. */
.uvod--split{ height: var(--uvod-h, auto); display: grid; align-content: center; }
.uvod--split .uvod-obsah{ padding-top: var(--header-h); padding-bottom: 112px; }
/* Na jednu obrazovku se vejde jen kratší sada: menší nadpis, nižší
   portrét, těsnější mezery. Bez toho text přerostl do dlaždic. */
.uvod--split .uvod-titul{ font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.7rem); max-width: 17ch; }
.uvod--split .uvod-text{ margin-top: var(--space-4); }
.uvod--split .uvod .hero-actions,
.uvod--split .hero-actions{ margin-top: var(--space-5); }
.uvod--split .uvod-portret{ max-width: 290px; }

/* Úsporný režim úvodu. Nasazuje ho initVyskaRozcestniku teprve tehdy,
   když se první obrazovka jinak nevejde — na velkém monitoru zůstane
   úvod velkorysý. Šetří se tu jen odsazením a velikostí, žádný obsah
   se neskrývá. */
/* ⚠️ Spodní odsazení musí zůstat VĚTŠÍ než přesah dlaždic do úvodu
   (.tiles--preklad má margin-top: -88px). Při 64 px zalezla tlačítka
   pod dlaždice, i když výška úvodu jinak seděla. */
.uvod--split.je-stisnuty .uvod-obsah{ padding-bottom: 96px; }
/* ⚠️ Musí být menší než clamp v @media (max-height: 980px) výš, jinak
   by úsporný režim nadpis naopak zvětšil a nic by neušetřil. */
.uvod--split.je-stisnuty .uvod-titul{ font-size: clamp(1.7rem, 1rem + 1.4vw, 2.15rem); }
.uvod--split.je-stisnuty .uvod-text{ font-size: 1.02rem; margin-top: var(--space-4); }
.uvod--split.je-stisnuty .hero-actions{ margin-top: var(--space-5); }
.uvod--split.je-stisnuty .uvod-portret{ max-width: 250px; }

/* Šipka pod dlaždicemi: jediná známka toho, že stránka pokračuje. */
/* Na nižším okně (běžný notebook) se dlaždice stáhnou, aby se první
   obrazovka vešla celá. Odpadnou jen štítky — jejich obsah stojí
   i v popisku. Na velkém monitoru zůstává všechno. */
@media (min-width: 981px) and (max-height: 980px){
  .uvod--split .uvod-titul{ font-size: clamp(1.8rem, 1rem + 1.6vw, 2.35rem); }
  .uvod--split .uvod-text{ font-size: 1.04rem; }
  .uvod--split .uvod-portret{ max-width: 250px; }
  .uvod--split .uvod-obsah{ padding-bottom: 104px; }
  .tiles--preklad .tile{ padding: var(--space-6); }
  .tiles--preklad .tile-points{ display: none; }
  .tiles--preklad .tile-desc{ margin-bottom: var(--space-5); }
}
/* Ještě nižší okno (notebook 1536×864 a spol.) — bez tohohle stupně
   měl text v úvodu k dlaždicím jen 1 px. */
@media (min-width: 981px) and (max-height: 900px){
  .tiles--preklad .tile{ padding: var(--space-5); }
  .tiles--preklad .tile-desc{ font-size: .95rem; }
}

.sjezd{ display: flex; justify-content: center; margin-top: var(--space-5); }
.sjezd a{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: .9rem; font-weight: 600; color: var(--ink-faint);
  padding: var(--space-3) var(--space-4); border-radius: 999px;
}
.sjezd a:hover{ color: var(--brand-strong); background: var(--fill-soft); }
.sjezd svg{ width: 16px; height: 16px; animation: sjezd-poskok 2.4s ease-in-out infinite; }
@keyframes sjezd-poskok{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(3px) } }
@media (prefers-reduced-motion: reduce){ .sjezd svg{ animation: none } }

.uvod--split .uvod-zavoj{
  /* Šikmý přechod nesou vrstvy fotek, tady zůstává jen horní a spodní pruh. */
  background:
    linear-gradient(180deg, rgba(7,20,30,.62) 0%, rgba(7,20,30,0) 150px),
    linear-gradient(0deg, rgba(7,20,30,.72) 0px, rgba(7,20,30,0) 230px);
}
.uvod--split .uvod-foto{ background: var(--m-inkoust, #072D40); }
.split-vrstva{ position: absolute; inset: 0; }
.split-vrstva img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.split-zavoj{ position: absolute; inset: 0; transition: opacity .75s ease; }
.split-web .split-zavoj{
  background: linear-gradient(100deg, rgba(7,45,64,.94) 0%, rgba(7,45,64,.86) 42%, rgba(7,45,64,.48) 100%);
}
/* Měděný závoj je vlevo hustší než v prototypu: text na širokém monitoru
   sahá až k 55 % šířky, a tam už leží elektro polovina. */
.split-el .split-zavoj{
  background: linear-gradient(100deg, rgba(43,27,14,.92) 0%, rgba(43,27,14,.84) 50%, rgba(43,27,14,.46) 100%);
}
/* Stejný závoj jako na elektro stránce — když elektro zabere celou šířku. */
.split-el .split-zavoj--husty{
  opacity: 0;
  background: linear-gradient(100deg, rgba(43,27,14,.94) 0%, rgba(43,27,14,.86) 42%, rgba(43,27,14,.44) 100%);
}
.split-el{
  clip-path: polygon(64% 0, 120% 0, 120% 100%, 46% 100%);
  transition: clip-path .75s cubic-bezier(.65,0,.35,1);
}
.split-spara{
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(138,205,255,.9)) drop-shadow(0 0 10px rgba(242,177,92,.55));
  transition: transform .75s cubic-bezier(.65,0,.35,1), opacity .5s ease;
}
.uvod--split.na-web .split-el{ clip-path: polygon(118% 0, 120% 0, 120% 100%, 100% 100%); }
.uvod--split.na-el  .split-el{ clip-path: polygon(0% 0, 120% 0, 120% 100%, -18% 100%); }
.uvod--split.na-web .split-spara{ transform: translateX(54%); opacity: 0; }
.uvod--split.na-el  .split-spara{ transform: translateX(-64%); opacity: 0; }
.uvod--split.na-el  .split-el .split-zavoj{ opacity: 0; }
.uvod--split.na-el  .split-el .split-zavoj--husty{ opacity: 1; }
.uvod--split.na-web .split-web img,
.uvod--split.na-el  .split-el img{ transform: scale(1.04); }
.uvod--split .eyebrow{ transition: color .6s ease; }
.uvod--split.na-el .eyebrow{ color: #F2B15C; }
@media (prefers-reduced-motion: reduce){
  .split-el, .split-spara, .split-zavoj, .split-vrstva img{ transition-duration: .01s; }
}

/* ---------- Hlavička přes fotku ---------- */
body.uvod-foto .site-header{
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
/* Po odrolování z úvodu už pod lištou není závoj, musí si tmavý
   podklad přinést sama. Stejně tak při otevřeném mobilním menu. */
body.uvod-foto .site-header.je-posunuta{
  background: rgba(7,45,64,.94); backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.16);
}
/* Samostatné pravidlo schválně: kdyby prohlížeč :has() neuměl, zahodí
   jen tenhle řádek. Ve společném seznamu selektorů by zahodil i ten
   nad ním a lišta by po odrolování zůstala průhledná. */
body.uvod-foto .site-header:has(.site-nav.is-open){
  background: rgba(7,45,64,.94); backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.16);
}
body.uvod-foto .nav-link{ color: rgba(255,255,255,.88); }
body.uvod-foto .nav-link:hover,
body.uvod-foto .nav-link[aria-current="page"]{ color: #fff; }
body.uvod-foto .nav-link::after{ background: #fff; }
body.uvod-foto .nav-toggle span{ background: #fff; }
body.uvod-foto .site-header .btn-primary,
body.uvod-foto .site-header .btn-primary--electro{ background: #fff; color: var(--brand-ink); box-shadow: none; }
body.uvod-foto .site-header .btn-primary:hover,
body.uvod-foto .site-header .btn-primary--electro:hover{ background: var(--brand-tint); }
body.uvod-foto .site-header a:focus-visible,
body.uvod-foto .site-header button:focus-visible{ outline-color: #fff; }

/* ---------- Citát přemosťující obě řemesla ---------- */
.pull-quote{ position: relative; padding-left: var(--space-6); border-left: 3px solid var(--brand); max-width: 62ch; }
.pull-quote p{ font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: var(--ink); font-weight: 500; line-height: 1.45; }
.pull-quote cite{ display: block; margin-top: var(--space-4); font-size: .88rem; font-style: normal; font-weight: 700; color: var(--ink-faint); }

/* ---------- Dlaždice (rozcestník) ---------- */
.tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.tile{
  display: block; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 1px 2px rgba(23,24,26,.03);
}
.tile:hover{ transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(23,24,26,.28); }
.tile--web:hover{ border-color: var(--brand); }
.tile--electro:hover{ border-color: var(--copper); }
.tile::before{ content:""; position: absolute; top: -1px; left: var(--space-6); width: 36px; height: 3px; border-radius: 0 0 3px 3px; }
.tile--web::before{ background: var(--brand-grad); }
.tile--electro::before{ background: var(--copper-grad); }
.tile-tag{ font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: block; margin-bottom: var(--space-5); }
.tile--web .tile-tag{ color: var(--brand-dark); }
.tile--electro .tile-tag{ color: var(--copper-dark); }
.tile-icon{ width: 32px; height: 32px; margin-bottom: var(--space-5); }
.tile--web .tile-icon{ color: var(--brand); }
.tile--electro .tile-icon{ color: var(--copper); }
.tile-title{ font-size: 1.55rem; margin-bottom: var(--space-3); }
.tile-desc{ font-size: .98rem; color: var(--ink-soft); max-width: 40ch; }
.tile-points{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.tile-point{ font-size: .8rem; font-weight: 600; color: var(--ink-soft); background: var(--fill-soft); border-radius: var(--radius-full); padding: 5px 12px; }
.tile-cta{ display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--ink); margin-top: var(--space-6); }
.tile-cta svg{ width: 16px; height: 16px; transition: transform .25s var(--ease); }
.tile:hover .tile-cta svg{ transform: translateX(4px); }

/* ---------- Odznaky ---------- */
.badge-row{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.badge{
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--paper);
}

/* ---------- O mně ---------- */
.about-grid{ display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-8); align-items: start; }
.about-text p + p{ margin-top: var(--space-4); }
.about-text p{ font-size: 1.03rem; }
.avatar-wrap{ display: flex; justify-content: center; padding-top: var(--space-3); }
.avatar-circle{
  width: 168px; height: 168px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand-tint); border: 1px solid var(--line); overflow: hidden;
}
.avatar-circle span{ font-size: 2.5rem; font-weight: 800; color: var(--brand-dark); }
.avatar-circle img{ width: 100%; height: 100%; object-fit: cover; }
.accent-electro .avatar-circle{ background: var(--copper-tint); }
.accent-electro .avatar-circle span{ color: var(--copper-dark); }

/* ---------- Karty služeb ---------- */
.services-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.service-card{
  padding: var(--space-6) var(--space-5); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); position: relative; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px -26px rgba(23,24,26,.3); border-color: var(--brand); }
.accent-electro .service-card:hover{ border-color: var(--copper); }
.service-title{ font-size: 1.02rem; margin-bottom: var(--space-2); font-weight: 700; color: var(--ink); }
.service-desc{ font-size: .92rem; color: var(--ink-soft); }

/* ---------- Proces ---------- */
.process-list{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.process-step{ position: relative; padding-inline: var(--space-3); }
.process-step-node{
  width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--brand);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .92rem;
  color: var(--brand-dark); margin-bottom: var(--space-4); position: relative; z-index: 2;
}
.accent-electro .process-step-node{ color: var(--copper-dark); border-color: var(--copper); }
.process-step-connector{ position: absolute; top: 20px; left: -50%; width: 100%; height: 1px; background: var(--line); z-index: 1; }
.process-step:first-child .process-step-connector{ display: none; }
.process-step-title{ font-size: .98rem; margin-bottom: var(--space-2); font-weight: 700; color: var(--ink); }
.process-step-desc{ font-size: .88rem; color: var(--ink-soft); }

/* ---------- Benefity ---------- */
.benefits-list{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
.benefit-item{ display: flex; align-items: flex-start; gap: var(--space-3); font-size: 1rem; color: var(--ink); font-weight: 500; }
.check-icon{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.accent-electro .check-icon{ color: var(--copper); }

/* ---------- Ceníkové karty ---------- */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.pricing-card{ padding: var(--space-6); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.pricing-card--featured{ border-color: var(--brand); background: linear-gradient(180deg, var(--brand-tint) 0%, var(--card) 55%); }
.pricing-badge{ align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--brand-strong); border-radius: var(--radius-full); padding: 4px 12px; margin-bottom: var(--space-3); }
.pricing-title{ font-size: 1.2rem; margin-bottom: var(--space-2); }
.pricing-price{ font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-bottom: var(--space-1); }
.pricing-price small{ display: block; font-size: .8rem; font-weight: 600; color: var(--ink-faint); letter-spacing: 0; margin-top: 2px; }
.pricing-desc{ font-size: .92rem; color: var(--ink-soft); margin-bottom: var(--space-5); }
.pricing-features{ display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); flex-grow: 1; }
.pricing-feature{ display: flex; gap: var(--space-2); font-size: .9rem; color: var(--ink); align-items: flex-start; font-weight: 500; }
.pricing-feature svg{ width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; margin-top: 3px; }
.pricing-note{ margin-top: var(--space-6); font-size: .92rem; text-align: center; color: var(--ink-soft); }

/* ---------- Callout ---------- */
.callout{ display: flex; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--copper-tint); border: 1px solid #E8D3BC; border-radius: var(--radius-md); align-items: flex-start; }
.callout svg{ width: 22px; height: 22px; color: var(--copper-dark); flex-shrink: 0; margin-top: 2px; }
.callout p{ font-size: .96rem; color: #6B4A26; }
.callout strong{ display: block; color: var(--copper-dark); margin-bottom: 4px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }

/* ---------- Oblast působnosti ---------- */
.area-chips{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Bílá, protože štítky leží na stříbrném pruhu — tam vystoupí.
   Opačně to platí pro .tile-point, ten leží na bílé kartě a bílou
   výplň mít nemůže. */
.area-chip{ font-size: .88rem; font-weight: 600; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); }

/* ---------- Formulář ---------- */
.form-panel{ background: var(--fill-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-7); }
/* minmax(0, 1fr), ne 1fr. Samotné `1fr` znamená `minmax(auto, 1fr)`,
   takže sloupec nesmí být užší, než je nejširší obsah — a <select> se
   roztahuje podle nejdelší volby. Kvůli položce „Vizitka / jednostránkový
   web" byl pravý sloupec o 34 px širší a formulář vypadal nakřivo. */
.form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
/* Aby pole mohla zúžení opravdu využít, nesmí si držet vlastní minimum. */
.form-field{ min-width: 0; }
.form-field input, .form-field select, .form-field textarea{ width: 100%; min-width: 0; }
.form-field{ display: flex; flex-direction: column; gap: var(--space-2); }
.form-field--full{ grid-column: 1 / -1; }
.form-field label{ font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); }
.form-field .optional{ font-weight: 500; color: var(--ink-faint); }
.form-field input, .form-field select, .form-field textarea{
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 1rem; min-height: 48px; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color: var(--ink-faint); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.accent-electro .form-field input:focus, .accent-electro .form-field select:focus, .accent-electro .form-field textarea:focus{ border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-tint); }
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363666C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }

/* honeypot proti spamu — skryté pole, které lidé nevyplní a roboti ano */
.form-trap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-consent{ display: flex; align-items: flex-start; gap: 12px; margin-top: var(--space-4); }
.form-consent input{ margin-top: 2px; width: 22px; height: 22px; accent-color: var(--brand-strong); flex-shrink: 0; cursor: pointer; }
.accent-electro .form-consent input{ accent-color: var(--copper-strong); }
.form-consent label{ font-size: .9rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; padding-block: 4px; }
.form-consent a{ color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.accent-electro .form-consent a{ color: var(--copper-dark); }

.form-footer{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-6); flex-wrap: wrap; }
.form-hint{ font-size: .84rem; color: var(--ink-faint); max-width: 42ch; }

.form-note{ display: none; gap: 10px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); margin-top: var(--space-5); font-size: .92rem; font-weight: 500; align-items: flex-start; }
.form-note.is-visible{ display: flex; }
.form-note svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.form-note--ok{ background: #EDF4E6; border: 1px solid #CBDCB6; color: #3A5225; }
.form-note--ok svg{ color: var(--earth); }
.form-note--err{ background: #FBECEC; border: 1px solid #EBC9C9; color: #8A2F2F; }
.form-note--err svg{ color: #A83535; }
.form-note a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

/* ---------- FAQ ---------- */
.faq-list{ display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary{
  list-style: none; cursor: pointer; padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); font-weight: 700; color: var(--ink); font-size: 1rem; min-height: 44px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-icon{ width: 18px; height: 18px; flex-shrink: 0; position: relative; }
.faq-icon::before, .faq-icon::after{ content:""; position: absolute; background: var(--ink-soft); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.faq-icon::before{ width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-icon::after{ width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-item[open] .faq-icon::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item[open] summary{ border-bottom: 1px solid var(--line); }
.faq-answer{ padding: var(--space-5) var(--space-6); font-size: .95rem; color: var(--ink-soft); }
.faq-answer p + p{ margin-top: var(--space-3); }

/* ---------- Závěrečná výzva ---------- */
.cta-band{ background: var(--ink); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-7); text-align: center; }
.cta-band h2{ color: #fff; font-size: var(--fs-h2); max-width: 22ch; margin-inline: auto; }
.cta-band p{ color: #B9BCC2; margin-top: var(--space-4); max-width: 52ch; margin-inline: auto; }
.cta-band .hero-actions{ justify-content: center; margin-top: var(--space-6); }
.cta-band .btn-ghost{ border-color: #4A4D53; color: #fff; }
.cta-band .btn-ghost:hover{ border-color: #fff; }

/* ---------- Textová stránka (zásady, 404) ---------- */
.prose h2{ font-size: 1.35rem; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h2:first-child{ margin-top: 0; }
.prose p{ margin-bottom: var(--space-4); }
.prose ul{ margin: 0 0 var(--space-4) var(--space-5); list-style: disc; }
.prose li{ color: var(--ink-soft); margin-bottom: var(--space-2); }
/* :not(.btn) je tu nutné. Bez něj obarvilo tohle pravidlo i tlačítko
   „Zpět na úvod" na konci stránky se zásadami — dostalo stejnou barvu
   jako jeho vlastní pozadí a text z něj zmizel. */
.prose a:not(.btn){ color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }

.page-center{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: var(--space-9); min-height: 52vh; }
.page-center .hero-actions{ justify-content: center; }

/* ---------- Footer ---------- */
/* Patička je tmavá záměrně: stránka tím dostane spodní hranu a
   uzavře se stejnou modří, jakou začíná úvod. Světle šedá patička
   splývala s posledními sekcemi a stránka končila „do ztracena". */
.site-footer{ border-top: 0; padding-block: var(--space-9) var(--space-6); margin-top: 0; background: var(--brand-ink); color: rgba(255,255,255,.76); }
.footer-inner{ display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.15fr; gap: var(--space-7); }
.footer-brand p{ margin-top: var(--space-4); font-size: .92rem; max-width: 32ch; color: rgba(255,255,255,.76); }
.footer-links h4, .footer-contact h4{ font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.68); margin-bottom: var(--space-2); font-weight: 800; }
.footer-links a, .footer-contact a{ display: flex; align-items: center; color: rgba(255,255,255,.82); font-size: .92rem; min-height: 40px; transition: color .2s var(--ease); font-weight: 500; }
.footer-links a:hover, .footer-contact a:hover{ color: #fff; }
.footer-contact p{ font-size: .92rem; color: rgba(255,255,255,.76); }
.footer-legal{ font-size: .86rem; color: rgba(255,255,255,.68); margin-top: var(--space-3); }
.footer-social{ display: flex; gap: var(--space-3); margin-top: var(--space-4); }
/* Rámeček je hranice ovládacího prvku, musí mít proti pozadí aspoň
   3:1. Při krytí .24 měl jen 2,13 a kolečko bylo sotva znát. */
.footer-social a{ width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; transition: border-color .2s var(--ease), background .2s var(--ease); }
.footer-social a:hover{ border-color: #fff; background: rgba(255,255,255,.08); }
.footer-social svg{ width: 18px; height: 18px; color: rgba(255,255,255,.84); }
/* Bez tohoto řádku si odstavce vezmou globální tmavou barvu textu
   a na tmavé patičce mají kontrast 2,5. */
.footer-bottom p{ color: inherit; }
.footer-bottom{ margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: .82rem; color: rgba(255,255,255,.68); }
.footer-bottom a{ display: inline-flex; align-items: center; min-height: 40px; color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover{ color: #fff; }
.site-footer a:focus-visible{ outline-color: #fff; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 2px solid var(--brand-strong); outline-offset: 3px; border-radius: 4px;
}
.accent-electro a:focus-visible, .accent-electro button:focus-visible, .accent-electro input:focus-visible, .accent-electro select:focus-visible, .accent-electro textarea:focus-visible, .accent-electro summary:focus-visible{
  outline-color: var(--copper-strong);
}

/* =========================================================
   Balíček s jednotnou cenou
   Nahrazuje tři ceníkové karty. Jedna nabídka, jedna cena,
   rozsah rozdělený do dvou fází — návštěvník nemusí porovnávat
   sloupce a rozhodovat se, co mu vlastně chybí.
   ========================================================= */
.balicek{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 28px 64px -44px rgba(23,24,26,.45);
}
.balicek-hlava{
  display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center;
  justify-content: space-between; padding: var(--space-7); border-bottom: 1px solid var(--line);
}
.balicek-hlava h3{ font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); letter-spacing: -0.025em; }
.balicek-hlava p{ margin-top: var(--space-2); font-size: .98rem; max-width: 44ch; }
.balicek-cena{
  background: var(--brand-tint); border: 1px solid #C3E0F2; border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); text-align: center; flex-shrink: 0;
}
.balicek-cena strong{ display: block; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.balicek-cena small{ display: block; margin-top: 6px; font-size: .85rem; font-weight: 600; color: var(--brand-dark); }
/* Podmínky pod hlavičkou ceníku: doprava, materiál, co platí u malých
   a co u velkých zakázek. Odpovídá na to, na co se lidi ptají jako první,
   a drží to pohromadě s částkou nad tím — ne až ve fázích níž. */
.cenik-radky{
  list-style: none; margin: 0; padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--line); display: grid; gap: var(--space-3);
}
.cenik-radky li{ font-size: .98rem; color: var(--ink-soft); }
.cenik-radky strong{ color: var(--ink); margin-right: var(--space-2); }

.balicek-faze{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); padding: var(--space-7); }
.faze-hlava{ display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.faze-cislo{
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand-strong); color: #fff;
  font-size: .76rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.faze-hlava h4{ font-size: 1.04rem; }
.faze-seznam{ display: flex; flex-direction: column; gap: var(--space-3); }
.faze-polozka{ display: flex; gap: var(--space-3); font-size: .95rem; color: var(--ink); align-items: flex-start; font-weight: 500; }
.faze-polozka svg{ width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; margin-top: 4px; }
.balicek-pata{ background: var(--fill-soft); padding: var(--space-6) var(--space-7); text-align: center; border-top: 1px solid var(--line); }
/* :not() je tu schválně — bez něj by tenhle selektor chytil i poznámku
   pod tlačítkem a udělal z ní druhý tučný nadpis. */
.balicek-pata > p:not(.balicek-pozn){ font-weight: 700; color: var(--ink); margin-bottom: var(--space-4); }
.balicek-pata .btn{ margin-inline: auto; }
.balicek-pozn{ margin-top: var(--space-4); font-size: .88rem; color: var(--ink-faint); font-weight: 500; }

/* =========================================================
   Případová studie (reference)
   Vlevo příběh zakázky a citace zákazníka, vpravo proklik
   na živý web. Bez odkazu na skutečnou stránku je reference
   jen tvrzení — proto je náhled odkaz, ne obrázek.
   ========================================================= */
.pripad{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-7); display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-7); align-items: center; box-shadow: 0 28px 64px -44px rgba(23,24,26,.45);
}
.pripad + .pripad{ margin-top: var(--space-5); }
.pripad h3{ font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); margin-top: var(--space-2); letter-spacing: -0.025em; }
.pripad-popis{ margin-top: var(--space-4); font-size: .98rem; }
.pripad-citat{
  margin-top: var(--space-5); background: var(--fill-soft); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-5);
}
.pripad-citat p{ font-size: .95rem; font-style: italic; color: var(--ink); }
.pripad-citat cite{ display: block; margin-top: var(--space-3); font-style: normal; font-weight: 700; font-size: .86rem; color: var(--ink-soft); }
.pripad-odkaz{ display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-5); font-weight: 700; font-size: .94rem; color: var(--brand-dark); min-height: 40px; }
.pripad-odkaz svg{ width: 16px; height: 16px; transition: transform .2s var(--ease); }
.pripad-odkaz:hover svg{ transform: translate(3px,-3px); }
.pripad-nahled{
  display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line);
  background: var(--fill-soft); position: relative; aspect-ratio: 16 / 11;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pripad-nahled:hover{ transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(23,24,26,.4); }
.pripad-nahled img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pripad-zastup{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-2); color: var(--ink-faint); font-size: .9rem;
  font-weight: 600; text-align: center; padding: var(--space-5);
}
/* Zástupný text musí být čitelný — dokud sem Roman nedá snímek webu,
   je to normální obsah stránky. Při barvě --line měl kontrast 1,14. */
.pripad-zastup span{ font-size: 2.4rem; font-weight: 800; color: #767E8A; letter-spacing: .04em; }

/* =========================================================
   Galerie realizací
   U řemesla nese důkaz fotka, ne text. Popisek leží v přechodu
   dole na snímku, aby se nemusel řešit prostor pod ním.
   ========================================================= */
.galerie{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.galerie-polozka{
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--fill-soft); aspect-ratio: 4 / 3;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.galerie-polozka:hover{ transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(23,24,26,.45); }
.galerie-polozka img{ width: 100%; height: 100%; object-fit: cover; }
.galerie-popis{
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5) var(--space-4) var(--space-4);
  background: linear-gradient(0deg, rgba(43,27,14,.92) 0%, rgba(43,27,14,.72) 55%, rgba(43,27,14,0) 100%);
  color: #fff; font-size: .9rem; font-weight: 600;
}
.galerie-popis small{ display: block; font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #F2B15C; margin-bottom: 3px; }
.galerie-zastup{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-2); color: var(--ink-faint); text-align: center; padding: var(--space-4);
}
.galerie-zastup svg{ width: 26px; height: 26px; color: var(--line); }
.galerie-zastup span{ font-size: .84rem; font-weight: 600; }

/* Krátká citace zákazníka — u elektro zakázek není kam proklikat,
   takže reference stojí jen na jménu a na tom, co člověk řekl. */
.reference-mrizka{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.reference-karta{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: 0 2px 4px rgba(23,24,26,.03), 0 24px 52px -38px rgba(23,24,26,.35);
}
.reference-karta p{ font-size: .98rem; font-style: italic; color: var(--ink); }
.reference-karta cite{ display: block; margin-top: var(--space-4); font-style: normal; font-weight: 700; font-size: .88rem; color: var(--ink-soft); }
.reference-karta .eyebrow{ margin-bottom: var(--space-3); }

/* =========================================================
   Poptávka — formulář a kontaktní karta vedle sebe
   Stín je stupňovaný ze tří vrstev (těsný, střední, měkký),
   aby karta vypadala nadzvednutá. Jeden velký rozostřený stín
   vypadá jako šmouha, ne jako výška.
   ========================================================= */
.poptavka-mrizka{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
/* minmax(0, …) a min-width: 0 — stejná past jako u .form-grid. Samotné 1fr
   nedovolí sloupci zúžit se pod nejširší obsah, a na mobilu tak karty
   přetékaly o 23 px a stránka šla posouvat do stran. */
.poptavka-mrizka > *{ min-width: 0; }
/* E-mail je jedno dlouhé „slovo“ — na úzkém mobilu by vyjel do okraje karty. */
.kontakt-karta{ overflow-wrap: anywhere; }
.karta-3d{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-7);
  box-shadow: 0 2px 4px rgba(23,24,26,.04), 0 14px 28px -14px rgba(23,24,26,.12), 0 44px 84px -44px rgba(23,24,26,.34);
}
.kontakt-karta{
  background: var(--brand-ink); color: #fff; border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: 0 2px 4px rgba(7,45,64,.12), 0 16px 30px -16px rgba(7,45,64,.4), 0 48px 84px -48px rgba(7,45,64,.65);
}
.kontakt-karta h3{ color: #fff; font-size: 1.3rem; margin-bottom: var(--space-5); }
.kontakt-radek{ display: flex; gap: var(--space-4); align-items: center; padding-block: var(--space-3); }
.kontakt-ikona{ width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kontakt-ikona svg{ width: 20px; height: 20px; color: #fff; }
/* Popisek a hodnota musí stát pod sebou. Obalový <span> je inline,
   takže bez tohohle se „Zavolejte mi:“ a číslo slily na jeden řádek
   a u e-mailu zůstalo „mi:“ viset na řádku samo. */
.kontakt-radek > span:not(.kontakt-ikona){ display: flex; flex-direction: column; min-width: 0; }
.kontakt-popis{ font-size: .8rem; color: rgba(255,255,255,.72); font-weight: 600; }
.kontakt-hodnota{ font-size: 1.02rem; font-weight: 700; color: #fff; }
.kontakt-paticka{ margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.18); }
.kontakt-paticka strong{ display: block; color: #fff; font-size: 1.05rem; }
.kontakt-paticka span{ font-size: .86rem; color: rgba(255,255,255,.72); }
.kontakt-karta a:focus-visible{ outline-color: #fff; }
.info-karta{
  margin-top: var(--space-5); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: 0 2px 4px rgba(23,24,26,.03), 0 24px 48px -34px rgba(23,24,26,.3);
}
.info-karta h3{ font-size: 1.12rem; margin-bottom: var(--space-3); }
.info-karta p{ font-size: .94rem; }
.info-karta p + p{ margin-top: var(--space-3); }
.karta-3d .form-grid{ gap: var(--space-5); }

/* ---------- Patička: sloupec se soubory a ikony ---------- */
/* h3, ne h4 — v patičce následují po sekcích s h2 a přeskočená
   úroveň mate čtečky obrazovky. */
.footer-col h3{ font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.68); margin-bottom: var(--space-2); font-weight: 800; }
.footer-col a{ display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.82); font-size: .92rem; min-height: 40px; transition: color .2s var(--ease); font-weight: 500; }
.footer-col a:hover{ color: #fff; }
.footer-col a svg{ width: 15px; height: 15px; flex-shrink: 0; color: var(--brand-light, #6FBEFF); }
.footer-col a:hover svg{ color: #fff; }
.footer-radek{ display: flex; align-items: center; gap: 10px; font-size: .92rem; color: rgba(255,255,255,.76); padding-block: var(--space-2); }
.footer-radek svg{ width: 15px; height: 15px; flex-shrink: 0; color: var(--brand-light, #6FBEFF); }

/* ---------- Responzivita ---------- */
@media (max-width: 980px){
  /* Na užších displejích jde fotka pod text a zmenší se — portrét
     přes celou šířku by odsunul nadpis mimo první obrazovku. */
  .uvod-mrizka{ grid-template-columns: 1fr; gap: var(--space-6); }
  .uvod-portret{ max-width: 260px; margin-left: 0; aspect-ratio: 1 / 1; }
  /* Zástupný rámeček portrétu se na užším displeji neukazuje: zabral
     třetinu obrazovky a čárkovaný obdélník s nápisem „sem přijde fotka“
     působí jako nedodělaný web. Až v něm bude skutečná fotka, objeví se
     — proto podmínka na zástupný obsah, ne natvrdo display: none. */
  .uvod-mrizka:has(.uvod-portret-zastup) .uvod-portret{ display: none; }
  /* Text tu jde přes celou šířku, takže leží i na elektro polovině —
     měděný závoj musí být hustý všude, ne jen vlevo. */
  .split-el .split-zavoj{ background: linear-gradient(100deg, rgba(43,27,14,.92) 0%, rgba(43,27,14,.88) 60%, rgba(43,27,14,.8) 100%); }
  .balicek-faze{ grid-template-columns: 1fr; gap: var(--space-6); }
  .pripad{ grid-template-columns: 1fr; }
  .poptavka-mrizka{ grid-template-columns: minmax(0, 1fr); }
  .galerie{ grid-template-columns: 1fr 1fr; }
  .reference-mrizka{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .avatar-wrap{ order: -1; }
  .avatar-circle{ width: 120px; height: 120px; }
  .avatar-circle span{ font-size: 2rem; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid{ grid-template-columns: 1fr; }
  .process-list{ grid-template-columns: 1fr; gap: var(--space-6); }
  .process-step-connector{ display: none; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .balicek-hlava{ padding: var(--space-6); }
  .balicek-faze, .balicek-pata{ padding: var(--space-6); }
  .pripad{ padding: var(--space-6); }
  .balicek-cena{ width: 100%; }
}

/* =========================================================
   Telefon a tablet — úvod a rozcestník
   Na 375 px měl úvod 993 px (přes celou obrazovku a ještě kus)
   a každá dlaždice 544 px. Návštěvník tak na první obrazovce
   viděl jen nadpis a musel dvakrát rolovat, než došel k volbě.
   Tady se všechno stáhne tak, aby byl pod textem vidět začátek
   první dlaždice — to je pozvánka rolovat dál.
   ========================================================= */
@media (max-width: 980px){
  .uvod-obsah{
    padding-top: calc(var(--header-h) + var(--space-6));
    padding-bottom: clamp(96px, 20vw, 128px);
  }
  /* Podstránky nemají pod úvodem dlaždice, které by do něj přesahovaly,
     takže tam stačí menší odsazení — a hned pod textem je vidět, že
     stránka pokračuje. */
  .uvod:not(.uvod--split) .uvod-obsah{ padding-bottom: 64px; }
  .uvod-titul{ font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.3rem); max-width: 18ch; }
  .uvod-text{ font-size: 1.02rem; margin-top: var(--space-4); }
  .uvod .hero-actions{ margin-top: var(--space-5); gap: var(--space-3); }
  /* Tlačítka na celou šířku pod sebou — vedle sebe se text láme. */
  .uvod .hero-actions .btn{ width: 100%; justify-content: center; }

  /* Zástupný rámeček portrétu se na telefonu neukazuje: zabral třetinu
     obrazovky a čárkovaný obdélník s nápisem „sem přijde fotka“ působí
     jako nedodělaný web. Až v něm bude skutečná fotka (<img>), objeví
     se — proto :has(img), ne natvrdo display:none. */
  .uvod-mrizka .uvod-portret{ max-width: 200px; aspect-ratio: 1 / 1; }
  .uvod-mrizka{ gap: var(--space-5); }

  /* Dlaždice: nižší, bez štítků. Jejich obsah stojí i v popisku. */
  .tiles--preklad{ margin-top: -56px; }
  .tiles--preklad .tile{ padding: var(--space-5); }
  .tiles--preklad .tile-points{ display: none; }
  .tiles--preklad .tile-desc{ font-size: .98rem; margin-bottom: var(--space-4); }
  .tiles--preklad .tile-icon{ width: 26px; height: 26px; }
  .sjezd{ margin-top: var(--space-4); }
}

@media (max-width: 760px){
  /* Rozměry jsou zapsané výslovně (top/left/width/height), NE přes
     `inset`. Menu leží uvnitř <header>, a jakmile lišta dostane
     `backdrop-filter`, stane se pro ně vztažným rámcem — `bottom: 0`
     by pak znamenalo spodní okraj lišty, ne obrazovky, a panel by měl
     výšku 65 px. S výslovnou výškou vyjde správně tak i tak, takže
     rozostření lišty může zůstat. */
  /* Panel jde přes CELOU výšku, tedy i pod lištu, a obsah odsazuje
     shora o její výšku. Lišta při otevřeném menu žádné vlastní pozadí
     nemá — prosvítá jí panel, takže to působí jako jedna skleněná
     plocha, ne jako pruh nalepený na panel. */
  /* Zavřený panel stojí vpravo mimo obrazovku. Na stránkách bez fotky
     je lišta sticky (ne fixed), panel se kvůli jejímu rozostření počítá
     od ní — a rozšířil stránku na dvojnásobek. Na GDPR a 404 šlo pak
     obsahem posouvat do stran. clip ořízne jen vodorovně, výšku nechá. */
  .site-header{ overflow-x: clip; }
  .site-nav{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100dvh;
    flex-direction: column; align-items: flex-start;
    padding: calc(var(--header-h) + var(--space-6)) var(--pad-inline) var(--space-6);
    gap: var(--space-5); overflow-y: auto;
    /* Krytí .94, ne méně: při .88 měl odkaz v menu nad tmavým obsahem
       kontrast 4,38 — pod hranicí 4,5:1. Rozostření je i tak vidět. */
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    transform: translateX(100%);
    /* Zavřený panel se nedá tabulátorem projít — bez toho by se
       fokus schovával mimo obrazovku. */
    visibility: hidden;
    transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s;
  }
  .site-nav.is-open{
    transform: translateX(0);
    visibility: visible;
    transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s;
  }

  /* Položky dojíždějí zprava po jedné, až když je panel skoro na místě.
     Bez zpoždění by se hýbaly zároveň s panelem a nebylo by to poznat. */
  .site-nav .nav-link,
  .site-nav .btn{
    opacity: 0; transform: translateX(26px);
    transition: opacity .34s var(--ease), transform .34s var(--ease);
  }
  .site-nav.is-open .nav-link,
  .site-nav.is-open .btn{ opacity: 1; transform: translateX(0); }
  .site-nav.is-open .nav-link:nth-child(1){ transition-delay: .13s; }
  .site-nav.is-open .nav-link:nth-child(2){ transition-delay: .19s; }
  .site-nav.is-open .nav-link:nth-child(3){ transition-delay: .25s; }
  .site-nav.is-open .nav-link:nth-child(4){ transition-delay: .31s; }
  .site-nav.is-open .nav-link:nth-child(5){ transition-delay: .37s; }
  .site-nav.is-open .btn{ transition-delay: .40s; }
  /* Na stránkách s fotkou v úvodu je i vysunuté menu tmavé — jinak by
     přes průhlednou lištu prosvítala fotka do bílého panelu. */
  body.uvod-foto .site-nav{ background: rgba(7,45,64,.82); }
  body.uvod-foto .site-header--electro .site-nav{ background: rgba(43,27,14,.84); }

  /* Logo a křížek musí zůstat nad panelem. Logo je v HTML PŘED menu,
     takže by ho jinak panel překryl — menu je polohované, a to
     v pořadí vykreslování vyhrává. */
  .site-header .logo,
  .nav-toggle{ position: relative; z-index: 2; }

  /* Kde rozostření nefunguje (starší Android, vypnutá GPU akcelerace),
     musí být panel krycí — jinak by se text mísil s obsahem pod ním. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-nav{ background: var(--paper); }
    body.uvod-foto .site-nav{ background: var(--brand-ink); }
    body.uvod-foto .site-header--electro .site-nav{ background: #2B1B0E; }
  }

  /* Kdo si vypnul animace, nemá čekat na dojezd položek. */
  @media (prefers-reduced-motion: reduce){
    .site-nav, .site-nav .nav-link, .site-nav .btn{ transition: none !important; transition-delay: 0s !important; }
  }
  .nav-links{ flex-direction: column; align-items: stretch; gap: var(--space-2); width: 100%; }
  .nav-link{ font-size: 1.05rem; min-height: 52px; }
  .site-nav .btn{ width: 100%; }
  .nav-toggle{ display: flex; }
  .tiles{ grid-template-columns: 1fr; }
  .benefits-list{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; gap: var(--space-6); }
  .form-panel{ padding: var(--space-5); }
  .cta-band{ padding: var(--space-7) var(--space-5); }
  .tiles--preklad{ margin-top: -72px; }
  .karta-3d{ padding: var(--space-5); }
  .galerie{ grid-template-columns: 1fr; }
  .balicek-hlava, .balicek-faze, .balicek-pata, .pripad{ padding: var(--space-5); }
  .balicek-cena{ padding: var(--space-4) var(--space-5); }
}

/* =========================================================
   Měděná varianta — elektrikářská podstránka
   POZOR: tenhle blok musí zůstat úplně na konci souboru.
   Pravidla mají stejnou specificitu jako modrá výchozí, takže
   rozhoduje pořadí. Kdyby stála výš, lišta i patička by na
   elektro stránce zůstaly modré.
   ========================================================= */
body.uvod-foto .site-header--electro.je-posunuta{ background: rgba(43,27,14,.94); }
body.uvod-foto .site-header--electro:has(.site-nav.is-open){ background: rgba(43,27,14,.94); }
body.uvod-foto .site-header--electro .btn-primary--electro{ background: #fff; color: #2B1B0E; box-shadow: none; }
body.uvod-foto .site-header--electro .btn-primary--electro:hover{ background: var(--copper-tint); }

.site-footer--electro{ background: #2B1B0E; }
.site-footer--electro .footer-col a svg,
.site-footer--electro .footer-radek svg{ color: #F2B15C; }

.accent-electro .faze-cislo{ background: var(--copper-strong); }
.accent-electro .faze-polozka svg{ color: var(--copper); }
.accent-electro .balicek-cena{ background: var(--copper-tint); border-color: #E8D3BC; }
.accent-electro .balicek-cena small{ color: var(--copper-dark); }
.accent-electro .pripad-citat{ border-left-color: var(--copper); }
.accent-electro .pripad-odkaz{ color: var(--copper-dark); }
.accent-electro .kontakt-karta{
  background: #2B1B0E;
  box-shadow: 0 2px 4px rgba(43,27,14,.12), 0 16px 30px -16px rgba(43,27,14,.4), 0 48px 84px -48px rgba(43,27,14,.65);
}

/* =========================================================
   Oprava vysunutého menu na mobilu
   MUSÍ ZŮSTAT ÚPLNĚ NA KONCI — přebíjí pravidla výš, která
   mají stejnou specificitu (media query specificitu nemění).

   Prvek s `backdrop-filter` se stává vztažným rámcem pro
   potomky s `position: fixed`. Menu je uvnitř <header>, takže
   `inset: var(--header-h) 0 0 0` se nepočítalo od okraje
   obrazovky, ale od lišty vysoké 77 px. Panel měl proto místo
   735 px jen 65 px — vyjel z boku a byl vysoký na dva prsty.

   Řeší se to výše: panel má výslovně zapsanou šířku a výšku
   místo `inset`, takže vyjde správně i uvnitř vztažného rámce.
   Rozostření lišty tím pádem může zůstat.

   ⚠️ Kdyby se `inset` do `.site-nav` někdy vrátil, tahle chyba
   se vrátí s ním.
   ========================================================= */
@media (max-width: 760px){
  .site-header{ background: rgba(255,255,255,.9); }
  body.uvod-foto .site-header.je-posunuta{ background: rgba(7,45,64,.9); }
  body.uvod-foto .site-header--electro.je-posunuta{ background: rgba(43,27,14,.9); }

  /* ⚠️ TOHLE JE TA VĚC, KVŮLI KTERÉ ROZOSTŘENÍ „ZLOBILO".
     Prvek s `backdrop-filter` zakládá pro své potomky nové pozadí
     ke snímání. Menu leží uvnitř lišty, takže jeho rozostření
     nesnímalo stránku pod sebou, ale prázdné pozadí lišty — a
     vypadalo proto jako plocha bez efektu. Rozostření tam bylo,
     jen nemělo co rozmazávat.

     Při otevřeném menu proto lištu zbavujeme pozadí i rozostření.
     Nic tím neztratí: přes celou její plochu leží panel, který má
     rozostření vlastní a snímá skutečný obsah stránky.

     Pravidla jsou tři a každé stojí samostatně. Musí mít stejnou
     specificitu jako modrá a měděná pravidla výš — jinak prohrají
     a lišta si pozadí i rozostření nechá. */
  .site-header:has(.site-nav.is-open){
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body.uvod-foto .site-header:has(.site-nav.is-open){
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body.uvod-foto .site-header--electro:has(.site-nav.is-open){
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
}