/* ═══════════════════════════════════════════════════════════════════
   JOB LEADER — prodejní web, stylopis stránky
   Staví na assets/css/tokens.css (barvy, reset, .container).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Typografická škála ──────────────────────────────────────────── */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--violet); margin-bottom: 14px;
}
/* Nadpisy v Sora. Menší záporný tracking než u Interu — Sora má užší
   kresbu a při -0.035em by se diakritika lepila na dřík. */
.h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.2vw, 68px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.028em;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 44px); font-weight: 700;
  line-height: 1.16; letter-spacing: -0.022em;
}
.h3 { font-family: var(--font-display); font-size: 18.5px; font-weight: 600; letter-spacing: -0.012em; }
.quote, .price .amount { font-family: var(--font-display); }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--body); line-height: 1.6; }
.small { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.grad-text {
  background: var(--grad-cta); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

section { padding: clamp(64px, 9vw, 112px) 0; }
.section-head { max-width: 720px; margin-bottom: 48px; }
/* Vyvážené zalomení všech nadpisů — delší překlady se pak nelámou
   do osiřelého posledního slova. */
.h1, .h2, .quote { text-wrap: balance; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ⏳ DOČASNÉ (příkaz č. 45, 14. 8. 2026) — ZRUŠIT, AŽ PŘIJDE OBSAH.
   Tyhle sekce se kdysi jmenovaly .split podle dvou sloupců, ale druhý
   sloupec nikdy nevznikl — od prvního commitu to byl jen barevný
   přechod na pozadí, žádná mřížka (proto se třída přejmenovala).
   Do sekce 01 druhý sloupec ani neplánujeme; obsah tam půjde POD
   nadpis, ne vedle něj. Nadpis tak končí na 1067 px a od něj doprava zůstává
   v širokém okně přes 800 px prázdna — oko to čte jako chybějící kus
   stránky, ne jako vzduch.

   Než obsah do pravého sloupce přijde, blok se vystředí a prázdno se
   rozdělí na obě strany rovnoměrně. Souměrné prázdno se čte jako vzduch.
   ŠÍŘKA 720 px ZŮSTÁVÁ — to je správná délka řádku a nemění se.
   TEXT ZŮSTÁVÁ VLEVO — středí se blok, ne sazba.

   Až druhý sloupec vznikne, tohle pravidlo smazat a nechat .section-head
   vrátit se doleva. */
.pas-prechod > .container > .section-head { margin-inline: auto; }

/* ✔ TRVALÉ — TOHLE SE PŘI ÚKLIDU NERUŠÍ. Sekce 01 vypadá stejně jako
   ty dvě nad ní, ale je to jiný případ: druhý sloupec se sem
   NEPLÁNUJE, obsah půjde POD nadpis (rozhodnutí 14. 8. 2026, příkaz
   č. 49). Vystředění tu tedy zůstává i po dni, kdy se dočasné značky
   výš budou rušit. */
#proc > .container > .section-head { margin-inline: auto; }

/* ── Tlačítka ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600; border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-cta); color: #fff;
  box-shadow: 0 6px 22px -6px rgba(124, 58, 237, .55);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -6px rgba(124, 58, 237, .7); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-line { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.btn-line:hover { border-color: var(--violet); color: var(--violet7); }

/* ── Navigace ────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px);
  /* Bez spodního rámečku a bez stínu přes celou šířku (příkaz č. 18):
     lišta se má nad obsahem vznášet díky rozostření, ne se od něj
     odčárkovat. */
}
.nav-in { display: flex; align-items: center; gap: 32px; height: 68px; }
/* 29 px (příkaz č. 33). Hodnota 39 px byla vybraná ještě podle stavu,
   kdy se z nastavené výšky vykreslovalo jen 86 % — viewBox v SVG měl
   kolem kresby prázdno. Po jeho oříznutí se logo samo od sebe zvětšilo
   zhruba o šestinu, takže 39 px bylo nadbytečných.

   VÝŠKA JE JEDINÝ ROZMĚR, který se nastavuje. Šířka musí zůstat auto:
   po oříznutí se poměr stran změnil z 2,80 na 3,13 a při obou pevných
   rozměrech by se značka roztáhla. */
.nav-logo { height: 29px; width: auto; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font-size: 14.5px; font-weight: 500; color: var(--body); transition: color .15s; }
.nav-links a:hover { color: var(--violet7); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .login { font-size: 14.5px; font-weight: 600; color: var(--body); }
/* 1080, ne 900 — přibyly položky „Integrace" a „Bezpečnost" a kolem
   1000 px se odkazy lámaly do dvou řádků. Zlom musí přijít dřív, než
   se to začne lámat, ne až když je pozdě. */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-cta .login { display: none; }
  /* Doprava tlačila .nav-cta ta automatická mezera na .nav-links výš.
     Když se .nav-links skryjí, zmizí i ona — a .nav-cta zůstane
     přilepená k logu s prázdnem vpravo (73 až 774 px podle šířky,
     změřeno, č. 187 bod 2).
     ⛔ TENHLE ŘÁDEK PATŘÍ DOVNITŘ MEDIA QUERY. Nad zlomem by měly
     margin-left:auto obě skupiny, volné místo by se rozdělilo mezi ně
     a .nav-links by se posunuly doleva.

     ⛔ TENHLE ŘÁDEK SÁM NESTAČÍ. Pro tmavý úvod (na indexu je .uvod
     na <body>) ho přebíjí `.uvod .nav-cta { margin-left: 18px }`
     o osm set řádků níž — vyšší specificita A později v souboru.
     Dvojče téhle deklarace je proto DOLE u něj. Pravidlo 11. */
  .nav-cta { margin-left: auto; }
}

/* ── Nadřazený řádek nad hlavním nadpisem ────────────────────────── */
/* Bez pozadí, rámečku i tečky: má se číst jako součást nadpisu, ne jako
   samostatný prvek. Verzálky potřebují prostrkání, jinak působí slepené.
   Gradient tu nemá co dělat — patří nadpisu a dvakrát nad sebou by
   přestal fungovat na obou místech. */
.hero-nadradek {
  /* 22 px, ne 16. Bílá nad bílým nadpisem se neodlišuje barvou, takže
     předěl musí nést mezera — při šestnácti se řádek četl jako zaběhlá
     první řádka titulku. Zvětšovat mezeru je správnější lék než
     zmenšovat písmo (příkaz č. 41). */
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 700;
  /* .14 em, ne .12: při větší velikosti a bílé barvě se verzálky
     opticky slepují víc (příkaz č. 41). */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  /* Záře, ne stín. Dva měkké kruhy bez posunu — kdyby měly odsazení,
     četlo by se to jako stín a text by vypadal nalepený nad pozadím.
     Token z včerejška se tím neztrácí, jen se přesunul z písma na záři.

     Bílá nad bílým nadpisem se neodlišuje barvou, ale velikostí,
     prostrkáním a touhle září. */
  text-shadow:
    0 0 18px color-mix(in srgb, var(--violet-tmave-pozadi) 55%, transparent),
    0 0 42px color-mix(in srgb, var(--violet-tmave-pozadi) 28%, transparent);
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* clip, ne hidden. Ořezává se stejně, ale clip NEDĚLÁ z prvku posuvný
     kontejner — hidden ho dělá a to umí rozbít skok na kotvu uvnitř
     sekce i lepící prvky, kdyby tu někdy byly (příkaz č. 44).
     Svislý přesah se tu ZÁMĚRNĚ nepouští ven: horní záře je uříznutá
     na horní hraně stránky, kde nad ní stejně nic není, a spodní je
     na titulní straně vypnutá úplně. */
  overflow: clip;
  background: #0B0616; color: #fff;
  padding: clamp(72px, 11vw, 132px) 0 clamp(64px, 9vw, 104px);
}
/* Gradientní mlha — dvě rozostřené koule, ne plochý gradient */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  pointer-events: none;
}
.hero::before { width: 620px; height: 620px; background: #7C3AED; top: -220px; left: -140px; }
.hero::after  { width: 520px; height: 520px; background: #D946EF; bottom: -260px; right: -120px; opacity: .35; }
/* Textové hero se sází na střed. Vlevo zarovnaný text nechával celou pravou
   polovinu prázdnou — bez produktového vizuálu to působilo jako nedodělek. */
.hero .container { position: relative; z-index: 1; text-align: center; }
/* Žádné natvrdo vložené <br> v nadpisech — v jiném jazyce se zalomí jinde.
   Zalomení řeší šířka měřená ve znacích + text-wrap: balance, což je
   i18n-bezpečné a v prohlížečích bez podpory jen degraduje na normální wrap. */
.hero .h1 { max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.hero .lead { color: #CBD5E1; max-width: 62ch; margin: 22px auto 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; justify-content: center; }
.hero-note { margin-top: 18px; font-size: 13px; color: #94A3B8; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #E9D5FF;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-ai); }

/* ── Pás důvěry ──────────────────────────────────────────────────── */

/* ── Pás datové suverenity (pod hero) ────────────────────────────── */

/* Pečeť EU — vektor s dvanácti pěticípými hvězdami v poměrech vlajky.
   Žádné emoji (na Windows se nevykreslí) a žádná kolečka místo hvězd. */

/* ── Karty / mřížky ──────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* 320px, ne 280 — při 1280 kontejneru se jinak vešly 4 sloupce a šestice
   karet se lámala na 4+2 (osiřelý řádek). Takhle drží 3+3. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  border-color: #DDD6FE; transform: translateY(-2px);
  box-shadow: 0 12px 34px -14px rgba(99, 55, 180, .28);
}
.card .h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.ico {
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, #F5F3FF, #FAE8FF); font-size: 20px;
}

/* Pilíře — očíslované, výraznější než běžná karta */
.pillar { position: relative; padding-top: 30px; }
.pillar .num {
  position: absolute; top: 22px; right: 24px;
  font-size: 13px; font-weight: 800; color: #DDD6FE;
}

/* ── Diferenciátor agentura ↔ klient ─────────────────────────────── */
/* Pás s jemným přechodem shora dolů. Dřív se tahle třída jmenovala
   .split — podle dvou sloupců, které nikdy nevznikly. Nejmenovala se
   podle toho, co dělá, ale podle toho, co někdo zamýšlel, a stálo to
   dvě kola hledání chyby, která neexistovala (příkaz č. 47).
   Název teď říká, co pravidlo skutečně dělá. */
.pas-prechod { background: linear-gradient(180deg, #FAF5FF 0%, var(--bg) 100%); }
.flowcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
}
.flowcard h4 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.flow { list-style: none; display: grid; gap: 10px; }
/* POZOR: žádný display:flex na <li>. Flex z každého vnořeného <strong>
   udělá samostatnou položku a gap se projeví jako mezera uprostřed věty
   („ve vašem brandingu ."). Odrážka proto jde absolutně. */
.flow li {
  position: relative; padding-left: 17px;
  font-size: 14px; color: var(--body); line-height: 1.5;
}
.flow li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--grad-cta);
}

/* ── Funkce — hustý seznam ───────────────────────────────────────── */
.feat { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.feat:first-child { border-top: 0; }
.feat .m { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.feat b { display: block; font-size: 14.5px; font-weight: 650; margin-bottom: 3px; }
.feat span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ── Bezpečnost ──────────────────────────────────────────────────── */
/* Světlý pás. Tělo stránky má --bg #F8FAFC, tyhle sekce #FFFFFF —
   je to tedy SKUTEČNÝ rozdíl, ne zdvojená deklarace. Dřív to stálo
   ve dvou inline stylech přímo v HTML, takže se z kódu nedalo poznat,
   které sekce mají být bílé a které jen dědí barvu těla (příkaz č. 46
   bod 3c). Teď to říká jedna třída na jednom místě. */
.pas-bily {
  background: var(--card);
  border-block: 1px solid var(--line);
}

/* ⚑ TMAVÝ AKCENT — přepíná se JEDNOU třídou na <section>.
   Dnes ji nese #bezpecnost. Až padne rozhodnutí, které tvrzení má být
   to jediné tmavé místo pod úvodem, stačí třídu přesunout jinam
   (příkaz č. 46 bod 3b). Barva zůstává zatím #0a1628; sjednocení
   na #0B0616 čeká na UX, protože to je zásah do vzhledu. */
.dark { background: #0a1628; color: #fff; }
.dark .lead { color: #94A3B8; }
.certcard {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); padding: 24px;
}
.certcard .h3 { color: #fff; }
.certcard .small { color: #94A3B8; }
.cert-badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(16,185,129,.15); color: #6EE7B7;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; margin-bottom: 12px;
}

/* ── Ceník ───────────────────────────────────────────────────────── */
/* Karty ceníku sdílejí řádkovou mřížku přes subgrid — název, cena, popisek,
   úspora, seznam i tlačítko sedí napříč všemi kartami na stejné lince.
   Bez subgridu si každá karta rovná obsah sama a stačí jeden delší popisek,
   aby se sloupce rozjely. Prázdné sloty (.tag, .save) tam musí zůstat,
   jinak se karta posune o řádek výš. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-template-rows: auto auto auto auto auto 1fr auto;
  gap: 20px;
}
.price {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px;
  display: grid; grid-row: span 7; grid-template-rows: subgrid;
  align-content: start;
}
/* Fallback pro prohlížeče bez subgridu — vrátí se k původnímu chování */
@supports not (grid-template-rows: subgrid) {
  .price-grid { grid-template-rows: none; }
  .price { display: flex; flex-direction: column; grid-row: auto; }
}
.price .slot-empty { min-height: 0; }
.price.featured {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--violet), 0 18px 44px -18px rgba(124,58,237,.45);
}
.price .tag {
  display: inline-block; justify-self: start; margin-bottom: 14px;
  padding: 4px 11px; border-radius: var(--r-full);
  background: var(--grad-cta); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.price .name { font-size: 15px; font-weight: 700; color: var(--muted); }
.price .amount { margin: 10px 0 4px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.price .per { font-size: 13px; color: var(--faint); }

/* Přepínač Měsíčně / Ročně — stejná logika jako PlanSelection v aplikaci.
   Výchozí je MĚSÍČNĚ: roční částka je sice výhodnější, ale jako první
   číslo na stránce odradí dřív, než si člověk přečte, co za ni dostane. */
.billing {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-full); margin: 0 auto 34px;
}
.billing button {
  border: 0; cursor: pointer; background: transparent;
  padding: 9px 20px; border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 650; color: var(--muted);
  transition: background .16s ease, color .16s ease;
}
.billing button:hover { color: var(--text); }
.billing button.is-active { background: var(--grad-cta); color: #fff; }
.billing .save-tag {
  display: inline-block; margin-left: 7px; padding: 2px 7px;
  border-radius: var(--r-full); font-size: 10.5px; font-weight: 700;
  background: rgba(16,185,129,.16); color: #047857;
}
.billing button.is-active .save-tag { background: rgba(255,255,255,.22); color: #fff; }

/* Roční platba — zelený řádek s úsporou, ať je vidět na první pohled */
.price .save {
  margin-top: 10px; padding: 8px 11px; border-radius: var(--r-sm);
  background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.22);
  font-size: 12.5px; font-weight: 650; color: #047857; line-height: 1.45;
}
.price .save b { display: block; font-size: 13.5px; font-weight: 800; }
.price .mo { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.price ul { list-style: none; margin: 20px 0 24px; display: grid; gap: 9px; }
/* Stejný důvod jako u .flow li — odrážka absolutně, ne flexem. */
.price li { position: relative; padding-left: 22px; font-size: 14px; color: var(--body); }
.price li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--emerald); font-weight: 700; }
.price .btn { margin-top: auto; justify-content: center; }

/* ── Citace / hlavní teze ────────────────────────────────────────── */
.quote {
  border-left: 3px solid transparent;
  border-image: var(--grad-cta) 1;
  padding: 6px 0 6px 24px; margin-bottom: 32px;
  font-size: clamp(19px, 2.4vw, 26px); font-weight: 650;
  line-height: 1.4; letter-spacing: -0.02em; max-width: 62ch;
}
.quote span { color: var(--muted); display: block; font-size: 14px;
  font-weight: 500; margin-top: 12px; letter-spacing: 0; }

/* ── Spotlight — jedna funkce, které dáváme prostor ──────────────── */
.spot {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
  background: #0B0616; color: #fff; border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 52px); position: relative;
  /* clip, ne hidden — ze stejného důvodu jako u .hero. Svislý přesah se
     tu ale pouštět ven NESMÍ: .spot je karta se zaoblenými rohy na
     světlém podkladu a záře vypuštěná ven by se rozlila mimo kartu jako
     šmouha. Tady ořez na hraně NENÍ vada, je to tvar karty. */
  overflow: clip;
}
.spot::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: #7C3AED; filter: blur(110px); opacity: .38; right: -140px; bottom: -180px;
}
.spot > * { position: relative; z-index: 1; }
.spot .h2 { color: #fff; }
.spot p { color: #CBD5E1; font-size: 15.5px; line-height: 1.65; margin-top: 14px; }
.spot .flow li { color: #CBD5E1; }
@media (max-width: 860px) { .spot { grid-template-columns: 1fr; gap: 28px; } }

.tagstrip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tagstrip span {
  padding: 6px 12px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #E9D5FF;
}

/* ── WhatsApp ────────────────────────────────────────────────────────
   Zmínky nesou firemní zelenou WhatsAppu (#25D366) a logo. Je to náš
   hlavní odlišovač a zároveň značka, kterou každý pozná okamžitě —
   necháváme ji tedy vypadat jako ona, ne jako zbytek stránky.        */
/* --wa-tmava, ne dřívější --wa-dark #128C7E. Ta hodnota byla pod
   normou všude, kde se používala: 3,72 : 1 na světle zeleném podkladu
   odznaku a 4,14 : 1 na bílé — obojí měřeno, obojí pod 4,5 pro drobný
   text. Z palety je pryč úplně, aby ji nikdo nemohl nasadit znovu
   omylem (příkaz č. 89 bod 5).
   #075E54 je tmavý odstín z vlastní značky WhatsAppu, takže barvu
   nevymýšlíme, jen sáhneme po tmavší z jejich dvojice:
       na bílé                    8,54 : 1
       na podkladu odznaku        6,91 : 1
   --wa zůstává, ta je na plochy a ikony, ne na text.

   NALEZENO 15. 8. 2026 při zápisu barvy do palety: kdyby se opravilo
   jen to pravidlo u odznaku, druhý výskyt na bílé by tam zůstal
   a našel by ho někdo jiný za půl roku. Proto se barvy opravují
   v paletě, ne v pravidle — a proto se stará hodnota nesmí vrátit,
   ani kdyby vypadala „značkověji". */
:root { --wa: #25D366; --wa-tmava: #075E54; }

.wa {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--wa-tmava); white-space: nowrap;
}
.wa::before {
  content: ""; flex: 0 0 auto; width: 1.05em; height: 1.05em;
  background: url('/images/brands/whatsapp.svg') center/contain no-repeat;
  border-radius: 3px;
}
/* Na tmavém pozadí je #128C7E málo čitelná — tam jede plná zelená */
.dark .wa, .spot .wa, .hero .wa { color: var(--wa); }

/* Odznak pro silné tvrzení („unikát na trhu") */
.wa-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: rgba(37, 211, 102, .14);
  border: 1px solid rgba(37, 211, 102, .38);
  color: var(--wa); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.wa-pill img { width: 16px; height: 16px; }

/* Spotlight blok o WhatsAppu — zelená záře místo fialové, ať je na
   první pohled poznat, o které funkci je řeč */
.spot.wa-spot::after { background: var(--wa); opacity: .26; }
.spot.wa-spot { border: 1px solid rgba(37, 211, 102, .22); }

/* ── Panáček (průvodce Karel) ────────────────────────────────────── */
/* Stejná modrá jako natáčecí kurzor v rigu — glow je na wrapperu,
   ať se dá ladit bez zásahu do SVG. */
.guide {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}

/* Panáček stojí NA soustředných kruzích — ty označují bod, na který
   ukazuje. Střed kruhů je přesně pod jeho nohama, takže při použití
   nad screenshotem sedí terč na místě, které vypichujeme. */
.guide-fig {
  flex: 0 0 auto; position: relative;
  width: 104px; height: 104px;
}
.guide-fig img, .guide-fig svg {
  /* object-fit, protože se tu nastavuje šířka I výška najednou: kresba
     panáčka není čtvercová (po oříznutí viewBoxu má poměr 0,69) a bez
     tohohle by se roztáhla do čtverce. Rámeček zůstává čtvercový
     schválně — drží mřížku vedle nadpisu. */
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(60,140,255,.55)) drop-shadow(0 6px 10px rgba(0,0,60,.28));
  animation: guide-float 5s ease-in-out infinite;
}

/* Tři kruhy: dva pulzující (rozbíhají se ven) + jeden pevný jako podstavec */
.guide-fig::before, .guide-fig::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 86px; height: 86px; margin-left: -43px;
  border-radius: 50%; border: 2px solid rgba(96,165,250,.55);
  transform: scale(.35); opacity: 0;
  animation: guide-ping 3.2s ease-out infinite;
}
.guide-fig::after { animation-delay: 1.6s; }

@keyframes guide-ping {
  0%   { transform: scale(.3);  opacity: .85; }
  70%  { opacity: .18; }
  100% { transform: scale(1.15); opacity: 0; }
}
@keyframes guide-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Pevný podstavec pod nohama — drží terč viditelný i mezi pulzy */
.guide-base {
  position: absolute; left: 50%; bottom: 2px; width: 54px; height: 54px;
  margin-left: -27px; border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,.34) 0%, rgba(96,165,250,0) 70%);
  border: 1.5px solid rgba(96,165,250,.45);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .guide-fig img, .guide-fig svg { animation: none; }
  .guide-fig::before, .guide-fig::after { animation: none; opacity: .3; transform: scale(1); }
}

/* ── Integrace ───────────────────────────────────────────────────── */
/* Dělící linky kreslí buňky přes inset shadow, ne gap. Při gapu prosvítá
   podklad kontejneru a poslední neúplný řádek vypadá jako šedá díra. */
.logos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.logo-cell {
  background: var(--card); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px;
  padding: 22px 12px; min-height: 104px;
  box-shadow: inset -1px -1px 0 var(--line);
  transition: background .15s ease;
}
.logo-cell:hover { background: #FAF5FF; }
/* Loga v plné barvě — u integrací je barva to, co značku dělá poznatelnou
   na první pohled. Odšeděnění by z pásu udělalo nečitelnou kaši. */
.logo-cell img {
  height: 32px; width: auto; max-width: 96px; object-fit: contain;
  transition: transform .18s ease;
}
.logo-cell:hover img { transform: scale(1.06); }
.logo-cell span { font-size: 11.5px; font-weight: 600; color: var(--body); text-align: center; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
details.faq {
  border-bottom: 1px solid var(--line); padding: 18px 0;
}
details.faq summary {
  cursor: pointer; list-style: none; font-size: 16px; font-weight: 650;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
/* Šipka, ne plus/minus. Obě řešení tu do 14. 8. 2026 existovala vedle
   sebe — jedno v tomhle souboru, druhé v cenik.css — a mířila na tentýž
   prvek. Plus si vzalo otočení o 45° od šipky, což je křížek, takže na
   všech třinácti otázkách byly vidět dvě ikony přes sebe (příkaz č. 48).

   Zůstala šipka: má přechod, stav pro otevřeno i viditelný fokus.
   Plus/minus mělo jen dva znaky.

   DVA SELEKTORY SCHVÁLNĚ. Třída .faq znamená v každé stránce něco
   jiného: na titulní ji nese samo <details>, na ceníku obal kolem
   několika <details>. To je vlastní příčina toho střetu — a dokud se
   ta nesrovná, musí pravidlo umět obojí. */
details.faq summary::after,
.faq details summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
details.faq[open] summary::after,
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
details.faq p { margin-top: 12px; font-size: 14.5px; color: var(--muted); line-height: 1.65; max-width: 78ch; }

/* ── Závěrečné CTA ───────────────────────────────────────────────── */
.cta-band {
  background: var(--grad-cta); color: #fff; border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 60px); text-align: center;
}
.cta-band .h2 { color: #fff; }
.cta-band p { margin: 14px auto 26px; max-width: 56ch; color: rgba(255,255,255,.9); font-size: 16px; }

/* ── Patička ─────────────────────────────────────────────────────── */
.foot { background: #0B0616; color: #94A3B8; padding: 64px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot h5 { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 14px; letter-spacing: .02em; }
.foot a { display: block; font-size: 13.5px; padding: 5px 0; }
.foot a:hover { color: #fff; }
/* Přepínač jazyků ve spodní liště (č. 223): odkazy v patičce jsou
   blokové kvůli sloupcům — tady musí zůstat v řádku s „·". */
.foot .jazyky a { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* Orientační € na kartách mutací (č. 223 bod 2b): druhý řádek pod
   paušálem, tlumeně — závazná je koruna, euro jen pomáhá schvalovateli. */
.tarif-eur { display: block; font-size: 14px; font-style: normal; opacity: .62; margin-top: 2px; }
/* Přívlastek u hlavního webu. Ne odkaz, jen popis — proto tlumeně
   a menším písmem, ať se neplete s adresou vedle. */
.foot a em {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: #A78BFA; margin-left: 6px;
}
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   TITULNÍ STRANA — prémiový tmavý režim (zadání 13. 8. 2026)
   ───────────────────────────────────────────────────────────────────
   Cíleno přes .uvod na <body>, NE globálně: /cenik, /subzpracovatele
   a /nahlasit-obsah mají světlé pozadí a tmavý text v navigaci —
   tmavé sklo by je udělalo nečitelnými.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hlavička: tmavé sklo místo neprůhledné bílé ─────────────────── */
.uvod .nav {
  /* 0,68 místo 0,60: lišta je fixní a projíždí i nad SVĚTLÝMI sekcemi.
     Při 0,60 klesly odkazy nad bílou na 3,87:1, tedy pod AA. Při 0,68
     drží 7,13:1 i v nejhorším případě a fialová hero pod sklem pořád
     prosvítá. */
  background: rgba(0, 0, 0, .68);
  /* saturate zesílí barvy prosvítající zespodu — bez něj je fialová
     pod sklem vymytá do šeda */
  -webkit-backdrop-filter: saturate(170%) blur(15px);
  backdrop-filter: saturate(170%) blur(15px);
}
/* Logo je tmavá kresba pro světlé pozadí — na skle se musí obrátit. */
.uvod .nav-logo { filter: brightness(0) invert(1); }
.uvod .nav-links a,
.uvod .nav-cta .login { color: #F1F5F9; }
.uvod .nav-links a:hover,
.uvod .nav-cta .login:hover { color: #fff; }

/* Prohlížeče bez backdrop-filter (starší Firefox s vypnutou vlastností)
   by dostaly průhlednou lištu přes text — tam raději plná tmavá. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .uvod .nav { background: rgba(11, 6, 22, .96); }
}

/* ── Dýchací prostor ─────────────────────────────────────────────── */
.uvod .nav-in { gap: 44px; }
.uvod .nav-links { gap: 36px; }
.uvod .nav-cta { gap: 20px; }
/* Pozor: odkazy se skrývají až pod 1080 px. Širší mezery je při 1081 px
   nesmí zalomit do dvou řádků, proto nowrap.

   PŘÍMÝ POTOMEK, ne libovolný: panel mega menu leží uvnitř .nav-links,
   takže tohle pravidlo dopadalo i na karty v něm a jejich popisky se
   odmítaly zalomit — vytekly z karty o 8 až 63 px a s nimi celý panel
   o 42 px (příkaz č. 66). Pravidlo psané pro položky lišty se
   zděděním dostalo tam, kam nikdy nemířilo.

   Je to potřetí týž vzor: rozostření z lišty na panelu (č. 50), ikona
   harmoniky ze dvou souborů (č. 48), teď tohle. Pokaždé nastavení,
   které v nové poloze dělá něco jiného. */
.uvod .nav-links > a { white-space: nowrap; }

.uvod .hero-actions { margin-top: clamp(40px, 5vw, 60px); }
/* Nadpis je v úvodní obrazovce první prvek, nepotřebuje odsazení
   shora. Dřív to bylo kvůli nadřádku „Nábor nové generace", který
   č. 112 zrušil. */
.uvod .hero .h1 { margin-top: 0 !important; }
/* Spodní odsazení úvodu tu BÝVALO clamp(120px, 15vw, 190px). Zrušeno
   16. 8.: od č. 112 ho níž přebíjelo pevných 172 px z výšky úvodní
   obrazovky a tohle pravidlo se nikdy neuplatnilo. Dvě hodnoty téže
   vlastnosti na témž selektoru jsou past — kdo by přišel opravit
   tuhle, na stránce by se nic nestalo. Hlídač dvojích pravidel to
   hlásil.
   HODNOTA SE PŘESTĚHOVALA: to clamp je od č. 117 zpátky, jen dole
   v pravidle, které vyhrává. Pevných 172 px bylo naměřených na
   jediné šířce a jinde přidávalo nebo ubíralo. */

/* ── Spodní informační boxy: elevace a hover ─────────────────────── */
/* Mřížka kreslí linky přes 1px mezery, takže výplň nesmí být průsvitná
   proti ní — jinak by se linky protavily skrz. Bílá .03 se proto vrství
   PŘES neprůhledný podklad, ne místo něj. */

/* ── Gradient: jemnější a doznívající hluboko pod boxy ───────────── */
/* Hero má ořez, takže se jeho záře uřízne na spodní hraně —
   odtud ten ostrý přechod. Pokračování kreslil pás pod hero, dokud byl
   tmavý; od příkazu č. 71 je bílý — viz poznámka u .skrin, která
   přesahuje nahoru do prázdného spodku hero i dolů pod boxy. */
.uvod .hero::before {
  opacity: .38;
  filter: blur(120px);
  /* Pomalé plynutí světla. Paleta se NEMĚNÍ — hýbe se jen poloha a síla
     záře, takže pozadí lehce dýchá v týchž barvách (zadání 14. 8. 2026).

     Hýbe se transformace, ne left/top: prohlížeč pak posun počítá na
     grafické kartě a nepřepočítává rozvržení stránky. Při 120px
     rozostření je to rozdíl mezi plynulým světlem a cukáním.

     36 sekund a nekonečné střídání směru. Tak pomalu, že si toho nikdo
     nevšimne přímo — všimne si až toho, že obrazovka není mrtvá. */
  animation: hero-plynuti 36s ease-in-out infinite alternate;
  will-change: transform;
}

/* Druhá záře se vrací, ale JINAK než dřív. Původní seděla na spodní
   hraně (bottom: -260px) a ořez z ní dělal rovnou čáru, proto se
   vypínala. Tahle je posazená dovnitř hero, takže se nikde neuřízne,
   a plyne v jiném čase než ta první — kdyby měly stejný, oko by
   pohyb prokouklo jako mechanický. */
.uvod .hero::after {
  display: block;
  width: 560px; height: 560px;
  top: 8%; right: 4%; bottom: auto; left: auto;
  background: var(--fuchsia);
  opacity: .16;
  filter: blur(140px);
  animation: hero-plynuti-2 52s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-plynuti {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, 6%, 0) scale(1.14); }
}
@keyframes hero-plynuti-2 {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-11%, 8%, 0) scale(.92); }
}

/* Kdo si v systému vypnul pohyb, dostane statický obraz. Není to
   ozdoba navíc — u velkých rozostřených ploch je plynulý pohyb pro
   část lidí důvod k nevolnosti. */
@media (prefers-reduced-motion: reduce) {
  .uvod .hero::before,
  .uvod .hero::after { animation: none; }
}


/* Podklad pod sklem. Bez tohohle je v horní poloze za lištou světlé
   tělo stránky a rgba(0,0,0,.6) přes bílou dá šedou, ne černou. */
/* Tělo stránky zůstává SVĚTLÉ. Ztmaveno bylo jen kvůli tomu, aby sklo
   v hlavičce nemělo za sebou bílou — to teď řeší jinak: hero sahá až pod
   lištu, takže za sklem je vždycky tmavá fialová hero, ne pozadí stránky.
   Sekce pod hero se tím vracejí do původních barev. */

/* ── Hlavička: rozbalovací „Řešení" + ztlumené tlačítko ──────────── */
/* Zadání 13. 8. 2026: nahoře nejvýš čtyři položky. Dosah, Integrace,
   Agentury a Umělá inteligence jsou produktové okruhy — patří pod
   jednu střechu; Proč my, Bezpečnost a Ceník jsou samostatné kategorie. */

.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-t {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--body); background: none; border: 0; padding: 0;
  cursor: pointer; transition: color .15s;
}
.nav-dd-t:hover, .nav-dd:hover .nav-dd-t { color: var(--violet7); }
.nav-dd-t:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }
.nav-dd-s { transition: transform .18s ease; }
.nav-dd:hover .nav-dd-s,
.nav-dd.je-otevrene .nav-dd-s { transform: rotate(180deg); }

.nav-dd-m {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px; padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .28);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
/* Neviditelný můstek přes mezeru mezi tlačítkem a panelem — bez něj
   menu zmizí, jakmile myš opustí tlačítko a ještě nedosáhne panelu. */
.nav-dd-m::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd:hover .nav-dd-m,
.nav-dd.je-otevrene .nav-dd-m {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.nav-dd-m a {
  display: block; padding: 10px 12px; border-radius: 10px;
  transition: background-color .15s;
}
.nav-dd-m a:hover { background: color-mix(in srgb, var(--violet) 7%, transparent); }
.nav-dd-m a:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.nav-dd-m b { display: block; font-size: 14px; font-weight: 620; color: var(--text); }
.nav-dd-m span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ── Mega menu „Řešení" ──────────────────────────────────────────── */
/* Sklo i chování dědí po úzkém rozbalovači — mění se jen šířka a to,
   co je uvnitř. Ovládání (hover, klávesnice, Escape, můstek přes
   mezeru, skrytí pod 1080 px) proto zůstává beze změny. */
.nav-mega {
  /* Šířka podle obsahu, ne podle tlačítka: dva sloupce po dvou
     položkách se dvěma řádky popisku. Nad 700 px se popisky roztáhnou
     na jeden řádek a panel začne působit prázdně. */
  width: min(680px, calc(100vw - 48px));
  min-width: 0;
  padding: 20px;
}
.nav-mega-sloupce {
  display: grid;
  /* minmax(0, 1fr), ne 1fr: samotné 1fr znamená minmax(auto, 1fr) a sloupec
     s dlouhým popiskem („…veřejné rejstříky, REST API") si vezme víc místa
     než druhý. Sloupce mají být stejné, jinak panel působí nakřivo. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 26px;
}
/* Odkazy uvnitř sloupce se dosud dotýkaly. Řádkových 8 px z .nav-mega-sloupce
   na ně nedosáhne: položkami té mřížky jsou dva obalové <div>, ne odkazy
   v nich, a řádek je jen jeden — svislá mezera tak neměla co oddělovat.
   Rozestup proto patří dovnitř sloupce. */
.nav-mega-sloupce > div {
  display: grid;
  gap: 8px;
  align-content: start;
}
/* Štítek sloupce je orientační popiska, ne odkaz — proto nemá hover
   ani ukazovátko. */
.nav-mega-stitek {
  margin: 0 0 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav-mega-sloupce + .nav-mega-pata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 26px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* Přednost má čitelnost před symetrií (příkaz č. 33): jakmile by se
   dvě položky vedle sebe tlačily, jdou pod sebe. */
@media (max-width: 1240px) {
  .nav-mega-sloupce + .nav-mega-pata { grid-template-columns: 1fr; }
}
/* Šipka je v ::after, aby ji předčítač nečetl jako znak uprostřed
   názvu odkazu. Na najetí se posune. */
.nav-mega-pata a b::after {
  content: "→";
  margin-left: 8px;
  font-weight: 500;
  color: var(--violet);
  display: inline-block;
  transition: transform .18s ease;
}
.nav-mega-pata a:hover b::after { transform: translateX(4px); }

@media (max-width: 1080px) { .nav-dd { display: none; } }

/* Tlačítko v hlavičce nesmí přebíjet hlavní výzvu uprostřed obrazovky —
   gradient zůstává, vnější záře jde pryč. */
.nav-cta .btn-primary,
.nav-cta .btn-primary:hover { box-shadow: none; }

/* ── Podnadpis hero ──────────────────────────────────────────────── */
/* Kontrast nebyl problém: #CBD5E1 na #0B0616 dává 13,45:1, tedy AAA.
   Tenkost je optický jev — světlé písmo na tmavém podkladu se jeví
   subtilnější, než je. Léčí to váha, ne barva; světlejší odstín je
   přidaný navrch (16,19:1). */
.uvod .hero .lead { font-weight: 500; color: #E2E8F0; }

/* Rozbalovač je <button>, ne <a> — přebarvení odkazů na něj nesedne. */
.uvod .nav-dd-t { color: #F1F5F9; }
.uvod .nav-dd-t:hover,
.uvod .nav-dd:hover .nav-dd-t,
.uvod .nav-dd.je-otevrene .nav-dd-t { color: #fff; }

/* Panel v tmavém režimu — jen barvy textu. Plochu (pozadí, okraj, stín)
   určuje pravidlo .nav-mega níž; dřív ji tenhle blok popisoval taky,
   jinými hodnotami, a přebíjely se navzájem. Dvě soupeřící sady pravidel
   pro tentýž prvek jsou přesně to, po čem nikdo nepozná, která platí. */
.uvod .nav-dd-m b { color: #F1F5F9; }
.uvod .nav-dd-m span { color: #94A3B8; }
.uvod .nav-dd-m a:hover { background: rgba(255, 255, 255, .07); }
.uvod .nav-dd-m a:hover span { color: #CBD5E1; }
.uvod .nav-mega-stitek { color: #64748B; }
.uvod .nav-mega-sloupce + .nav-mega-pata { border-top-color: rgba(255, 255, 255, .10); }

/* ═══════════════════════════════════════════════════════════════════
   TITULNÍ STRANA — dotažení tmavého režimu (13. 8. 2026)
   ───────────────────────────────────────────────────────────────────
   PROČ TOHLE MUSÍ BÝT PŘES TOKENY: ztmavením podkladu těla (kvůli sklu
   v hlavičce) dostaly tmavé pozadí i sekce, které si vlastní pozadí
   nekreslí — a jejich text zůstal v barvách světlého motivu. Měřením
   v prohlížeči vyšlo 43 prvků pod hranicí WCAG, mimo jiné citát
   v sekci 01 s kontrastem 1,12:1. Opravovat je po jednom by znamenalo
   čekat, až se najde čtyřicátý čtvrtý; přebarvení tokenů to řeší
   u kořene a je to přesně to, k čemu tokens.css tmavou paletu chystá.
   ═══════════════════════════════════════════════════════════════════ */
/* Tokeny se ZÁMĚRNĚ nepřevracejí. Dřív tu bylo přebarvení celé palety,
   protože ztmavené tělo stránky nechávalo sekce bez vlastního pozadí
   tmavé se světlým motivem textu. Jakmile tělo zůstane světlé, není
   co přebarvovat — a hlavně se tím vrací původní vzhled všech sekcí
   pod úvodní obrazovkou (zadání 13. 8. 2026: „mimo titulku vrať vše
   na původní barvy"). Tmavé jsou nadále jen sekce, které si pozadí
   kreslí samy: hero, pás s boxy, pás evropského provozu a .dark. */

/* ── Bod 1: citát v sekci 01 ─────────────────────────────────────── */
/* Svislá fialová linka i nadpis zůstávají v původní barvě (zadání). */
/* Citát se vrací do původní barvy — sekce 01 je zase světlá. */

/* ── Bod 2: štítky v pásu Evropský provoz ────────────────────────── */
/* Zelená pryč — tluče se s identitou. Všechny štítky teď stejné. */

/* ── Bod 3: vlajka EU ────────────────────────────────────────────── */
/* ZRUŠENO 13. 8. 2026 (příkaz č. 29). Stálo tu
   `filter: grayscale(100%) opacity(40%)`, takže z vlajky byl na tmavém
   pozadí šedý flek s nezřetelnými hvězdami.

   Není to vkusová drobnost: blok se jmenuje „Evropský provoz,
   transparentní zpracování" a je to nejsilnější důvěryhodnostní prvek
   na stránce — v korporátní prověrce ho hledají mezi prvními. Odbarvit
   u něj vlajku je jako vytisknout certifikát na průklepový papír.
   Buď tam vlajka patří v barvě, nebo tam nepatří vůbec.

   Kdyby plná barva někdy křičela, řeší se to velikostí nebo jemnějším
   stínem pod vlajkou, ne odbarvením. (Pás .sov, kterého se to týkalo,
   je od příkazu č. 71 zrušený.) */

/* ── Bod 4: negativní prostor mezi bloky ─────────────────────────── */
.uvod #proc .section-head { margin-bottom: 120px; }
/* Blok „Prvních patnáct let…" má odsazení zapsané inline v HTML,
   proto !important — jinak by ho inline hodnota přebila. */
.uvod #proc .spot { margin-bottom: 120px !important; }

@media (max-width: 720px) {
  .uvod #proc .section-head,
  .uvod #proc .spot { margin-bottom: 72px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ENTERPRISE DOLADĚNÍ (13. 8. 2026) — tlačítka a výška úvodní obrazovky
   ═══════════════════════════════════════════════════════════════════ */

/* ── Popisky sekcí na AAA ────────────────────────────────────────── */
/* #7C3AED dávala na tmavém podkladu 3,50:1 — pod AA. #A78BFA drží
   7,34:1, tedy i AAA, a je to pořád fialová z naší palety. */
/* Popisky sekcí zpět na původní #7C3AED: na světlém podkladu drží
   kontrast bez problémů, světlejší odstín byl potřeba jen na tmavém. */

/* ── Tvar tlačítek ───────────────────────────────────────────────── */
/* Plná pilulka čte jako spotřebitelský produkt. 10 px je technické,
   ale ne hranaté. Platí i pro tlačítko v hlavičce a na podstránkách —
   jeden prvek nesmí mít na každé stránce jiný tvar. */
.btn { border-radius: 10px; }

/* ── Hlavní výzva: čistá firemní fialová ─────────────────────────── */
/* Růžová z --grad-cta se tloukla s přechodem v nadpisu. Svislý přechod
   ve dvou odstínech téže fialové dělá hloubku, aniž by přidal barvu.
   Vnitřní světlá linka nahoře je ta „jemná hloubka" — bez ní je plocha
   placatá, s vnějším stínem by zase začala zářit jako předtím. */
.btn-primary {
  background: linear-gradient(180deg, #8B5CF6 0%, #6D28D9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              0 1px 2px rgba(0, 0, 0, .25);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #9773F8 0%, #7C3AED 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 4px 12px -4px rgba(109, 40, 217, .45);
}

/* ── Sekundární tlačítko: jen linka, žádná výplň ─────────────────── */
/* Osmiprocentní bílá na fialovém podkladu vypadala jako zašlá skvrna.
   Průhledné pozadí ji odstraní; na hover se rozsvítí linka, ne plocha. */
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  transition: border-color .18s ease, background-color .18s ease;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .70);
}

/* ── Úvodní obrazovka na celou výšku ─────────────────────────────── */
/* Odečítám výšku lišty (68 px), protože je sticky a zabírá první
   pruh obrazovky — bez odečtu by hero přetekl a boxy by se schovaly
   až příliš hluboko. svh, ne vh: na mobilu se vh počítá i pod
   adresním řádkem a obsah by se ořízl. */
.uvod .nav { position: fixed; top: 0; left: 0; right: 0; }
/* Hero začíná POD lištou, ne za ní: sklo má za sebou vždy tmavou hero
   a nepotřebuje k tomu ztmavené tělo stránky. Odsazení shora o výšku
   lišty (68 px), ať obsah nezmizí pod ní. */
.uvod .hero {
  /* ÚVOD UŽ NEDRŽÍ CELOU VÝŠKU OKNA (Jiří 16. 8. se snímkem).
     POZOR, tohle OTÁČÍ příkaz č. 73, který zkracování z č. 70
     výslovně zrušil. Zapsané tady, ať to za měsíc nevypadá jako
     nedopatření: dokud nepřijde jinak, platí tenhle stav.

     Úvod je teď vysoký podle svého obsahu, ne podle okna. Plyne
     z toho přesně to, co Jiří v zadání předem odsouhlasil: na
     vyšším monitoru úvod NEROSTE, takže je z výkladní skříně pod
     ním vidět víc. To je záměr, ne přetečení.

     ODSAZENÍ SHORA JE PEVNÉ, ne dopočítané ze zbylého místa:
     68 px je lišta, pod kterou obsah nesmí zajet, a 74 px je
     mezera nad nadrádkem ze schváleného snímku. S vycentrováním
     by tahle mezera na každé výšce okna vyšla jinak — na 1037 px
     dělala 227 px místo 74. Proto flex-start, ne center. */
  padding-top: calc(68px + 74px);
  /* clamp, ne pevných 172 px (č. 117 bod 1). Sto sedmdesát dva je
     hodnota naměřená na návrhové šířce — a tam sedí přesně. Jenže
     na 375 px by přidávala půl centimetru prázdna navíc (clamp dá
     120) a na 1600 px by ho o 18 px ubírala (clamp dá 190).

     Obecně: když se slučují dvě pravidla, přenáší se hodnota toho
     vítězného, ale RESPONZIVITA toho poraženého. Ta se ztrácí
     nejtišeji — nikdo si nevšimne, že něco přestalo dýchat. */
  /* 120 px podle UX. Chvíli jsem měl 168 s odůvodněním, že se do
     120 nevejde most — a spletl jsem se: most je OBSAH úvodu, ne
     výplň pod ním, takže si místo přidá sám. Ve výplni zůstává jen
     mezera mezi mostem a hranou karty, a ta má být malá.
     Odsud plyne i to, co je vidět: 120 − 100 překryvu = 20 px,
     tedy čárka končí dvacet pixelů nad bílou hranou. */
  padding-bottom: 120px;
  display: flex;
  align-items: flex-start;
}
.uvod .hero > .container { width: 100%; position: relative; }

/* Boxy tak začínají přesně pod hranou první obrazovky. Horní odsazení
   pásu je proto malé — velkou mezeru už udělala výška hero. */

/* Na opravdu nízkých oknech (do 600 px, např. notebook s otevřenou
   konzolí) se odsazení srazí — obsah je vyšší než okno a velké
   mezery by ho jen odsunuly pod hranu. Výška okna už úvod neřídí,
   takže tady zbývá jen zúžit odsazení. */
@media (max-height: 600px) {
  .uvod .hero { padding-top: calc(68px + 28px); padding-bottom: 56px; }
}

/* ── Odlehčení tlačítek (13. 8. 2026) ────────────────────────────── */
/* „Masivní cihly" nedělalo odsazení samo o sobě — dělala to kombinace
   patnáctipixelového písma v tučnosti 600 a výchozí výšky řádku 1,5.
   Sama o sobě dá výšku přes 48 px. Snížení váhy a sevření řádkování
   udělá pro štíhlost víc než ubrání jednoho pixelu odsazení. */
.btn {
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
}

/* Tlačítko v hlavičce je navigační prvek, ne hlavní výzva — smí být
   o kus menší než ta v hero. */
.nav-cta .btn { padding: 9px 18px; font-size: 14px; }

/* Sekundární tlačítko: nejtenčí možná linka, která ještě projde.
   rgba(255,255,255,.20) z návrhu dává proti podkladu 1,83:1, kdežto
   WCAG 1.4.11 žádá u obrysu ovládacího prvku 3:1. Hodnota .35 je
   nejnižší, která hranici splní (3,18:1), a od dvacetiny se opticky
   liší minimálně. */
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .35);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .60);
}

/* ── Světelný přejezd na tlačítkách (13. 8. 2026) ────────────────── */
/* Převzato 1:1 z ATS — frontend/src/components/portal/LightningLogo.jsx,
   hover „blesk" nad siluetou loga. Zachované hodnoty odtud:
     posun    translateX(-100%) → translateX(100%)
     přechod  transform 1000ms ease-out
     gradient transparent 30% → rgba(255,255,255,.95) 50% → transparent 70%
   Nic z toho neladím od oka; kdyby se to v ATS změnilo, změní se to
   i tady na stejná čísla. */

.btn-primary,
.btn-ghost {
  position: relative;
  overflow: hidden;          /* pruh se ořízne o tvar tlačítka */
  isolation: isolate;        /* vlastní vrstva, ať přejezd nepřeteče ven */
}

/* Hlavní výzva: pruh přejede přes celou výplň. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: transform 1000ms ease-out;
  background: linear-gradient(to right,
              transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%);
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { transform: translateX(100%); }

/* Sekundární: pruh jede POUZE po jednopixelové lince.
   Prstenec vznikne dvojicí masek — vnější plocha minus vnitřní obsah;
   zbude přesně rámeček. Samotné světlo se uvnitř prstence posouvá
   změnou pozice pozadí, ne posunem prvku: kdyby se posouval prstenec,
   odjel by z tlačítka i s rámečkem. */
.btn-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(to right,
              transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 150% 0;
  transition: background-position 1000ms ease-out;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.btn-ghost:hover::after,
.btn-ghost:focus-visible::after { background-position: -150% 0; }

/* Kdo si vypnul animace v systému, nemá důvod je dostat tady. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after,
  .btn-ghost::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MEGA MENU + ČISTÁ HLAVIČKA (13. 8. 2026)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hlavička se jen vznáší ──────────────────────────────────────── */
/* Tvrdá linka dole pryč. Oddělení od stránky obstará rozostření
   a jemný stín — ten je potřeba, aby lišta nad světlou sekcí
   nesplynula s obsahem úplně. */
.uvod .nav {
  border-bottom: 0;
  box-shadow: 0 1px 24px -8px rgba(0, 0, 0, .45);
}

/* ── Symetrie rozestupů ──────────────────────────────────────────── */
/* Mezera mezi položkami byla 36 px, ale mezi „Ceník" a „Přihlásit"
   se sčítala s mezerou skupiny (20 px) a působila jinak. Odsazení
   se teď měří na jedné hodnotě a rozbalovač dostane stejné vnitřní
   odsazení jako odkazy, aby šipka rozestup neposouvala. */
.uvod .nav-links { gap: 0; }
.uvod .nav-links > a,
.uvod .nav-dd > .nav-dd-t { padding: 8px 18px; }
.uvod .nav-cta { gap: 0; margin-left: 18px; }
/* ⛔ DVOJČE ŘÁDKU Z MEDIA QUERY NAHOŘE (u zlomu 1080). Těch 18 px je
   správně jen nad zlomem, kde doprava tlačí .nav-links. Pod zlomem se
   .nav-links skryjí, mezera zmizí — a .nav-cta i hamburger za ní by
   zůstaly přilepené k logu. Měřeno: bez tohohle stál hamburger na
   indexu 685 px od pravého okraje, na ostatních čtyřech stránkách
   40 px, protože ty .uvod na <body> nemají.
   Musí to být TADY, ne nahoře: nahoře má stejnou specificitu, ale je
   dřív, takže by prohrálo. */
@media (max-width: 1080px) {
  .uvod .nav-cta { margin-left: auto; }
}
.uvod .nav-cta .login { padding: 8px 18px; }

/* ── Mega menu ───────────────────────────────────────────────────── */
/* Panel je ukotvený ke KRAJŮM OBSAHU, ne ke středu tlačítka: úzký
   rozbalovač u širokého panelu vypadá jako omyl. Šířka se drží
   obsahu stránky, takže mřížka lícuje se sekcemi pod ní. */
.uvod .nav-dd { position: static; }
.uvod .nav-dd-m {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 0;
  border-radius: 18px;
  /* PANEL JE NEPRŮHLEDNÝ, ne sklo. Rozostření tu strukturálně fungovat
     nemůže: prvek s backdrop-filter se stává kořenem pozadí pro své
     potomky, a panel je potomkem lišty, která filtr má. Řekl si tedy
     o rozostření pozadí a dostal pozadí uvnitř lišty, ne stránku pod ní.
     Nadpis se nerozmazával, protože se rozmazávat ani nezačal — zbývala
     jen průhlednost .68, kterou přes panel prosvítal hero nadpis
     s kontrastem kolem 2,6:1, tedy pohodlně čitelný (příkaz č. 50).

     Doladit číslo na .9 by duchy jen zeslabilo a za měsíc by se vrátili
     nad jiným pozadím. Nabídka není ozdoba, je to ovládání — musí být
     čitelná nad čímkoli.

     O chlup světlejší než #0B0616 schválně, ať je od stránky pod ním
     znát předěl. Okraj a stín zůstávají, ty dělají ten dojem vrstvy. */
  background: #150E26;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85);
}
/* Rozvržení panelu řeší .nav-mega (dva sloupce + pata), ne tenhle blok.
   Dřív tu byla vlastní trojsloupcová mřížka z prvního pokusu o mega menu
   — přebíjela novou stavbu a panel roztahovala na 920 px. */

.uvod .nav-dd-m a {
  display: block;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}
.uvod .nav-dd-m a:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .14);
}
.uvod .nav-dd-m b {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: #F1F5F9;
  letter-spacing: -.01em;
}
.uvod .nav-dd-m span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: #A9B4C4;
}
.uvod .nav-dd-m a:hover span { color: #CBD5E1; }
.uvod .nav-mega-stitek { color: #64748B; }
.uvod .nav-mega-sloupce + .nav-mega-pata { border-top-color: rgba(255, 255, 255, .10); }

/* Můstek přes mezeru mezi tlačítkem a panelem musí sedět na novou
   vzdálenost, jinak menu zmizí, když jím myš prochází. */
.uvod .nav-dd-m::before { top: -10px; height: 10px; }

/* ── Produktový lockup u loga ────────────────────────────────────── */
/* Návrh kodéra — zadání k němu nikdy nedorazilo, viz zpráva ze 13. 8.
   Vlasová linka odděluje ZNAČKU od POPISU produktu, aby se „Umělá
   inteligence" nečetla jako součást názvu. Popis je menší a tlumený,
   takže lockup nekonkuruje logu. */
.nav-lockup { display: inline-flex; align-items: center; gap: 12px; }
.nav-lockup-del {
  /* Nižší než logo — dělítko má stát uvnitř jeho výšky, ne ji přesahovat. */
  width: 1px; height: 21px;
  background: currentColor;
  opacity: .22;
}
.nav-lockup-txt {
  /* Stejná velikost jako položky menu (zadání 14. 8. 2026) — popis
     produktu má vedle nich stát jako rovnocenný text, ne jako popiska
     pod čarou. */
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
  /* Táž barva jako položky menu, ne o stupeň tlumenější (příkaz č. 35).
     Je to kategorie, kterou má návštěvník přečíst na první pohled a
     potvrdit si, že je správně — ztlumený popisek oko přeskočí jako
     dekoraci. Odlišení od menu dělá dělítko a poloha u loga, ne barva. */
  color: var(--body);
  white-space: nowrap;
}
/* Na tmavé hlavičce potřebuje popis vlastní odstín — var(--muted) je
   laděný na světlé pozadí a na skle by zmizel. */
.uvod .nav-lockup-txt { color: #F1F5F9; }   /* = barva odkazů v tmavé liště */
.uvod .nav-lockup-del { background: #fff; opacity: .20; }

/* Popis u loga se skrývá — logo samo je pořád rozpoznatelné a lockup
   by se jinak lámal do dvou řádků.
   HRANICE POSUNUTA Z 560 NA 1200 px (příkaz č. 152 bod 2). Pátá
   položka „Pro agentury" rozšířila blok odkazů a ten se kvůli
   margin-left: auto tlačí doleva do lockupu: při 1100 px končil text
   „Náborový systém" na 280 px a odkazy začínaly na 234 px, tedy
   překryv 46 px. „Náborový systém" je popis kategorie, ne značka —
   v úzkém okně stačí logo. Nad 1200 px se nemění nic. */
@media (max-width: 1200px) {
  .nav-lockup-del, .nav-lockup-txt { display: none; }
  .nav-links { gap: 20px; }
}

/* Slovo, které se nesmí zlomit uprostřed. Spojovník je platné místo
   zlomu, takže „e-maily" se v nadpisu láme na „ne e-" / „maily" —
   v běžném textu se to přehlédne, ve velkém nadpisu ne. */
.nezlom { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   LIDÉ ZA SYSTÉMEM (příkazy č. 59 a 62)
   Blok nesmí záviset na tom, kolik lidí v něm je, ani na tom, jak
   je který snímek oříznutý. Obojí si vynucuje styl, ne obsah.
   ═══════════════════════════════════════════════════════════════════ */

/* auto-fit, ne pevný počet sloupců: řada se zalomí sama a u lichého
   počtu nezbude prázdné okno vedle osamoceného (příkaz č. 62 bod 1b).
   min-width: 0 na položkách — bez něj by se dlouhé slovo ve výroku
   opřelo o šířku sloupce a mřížka by přetekla do stran. */
.lide-vyroky {
  display: grid;
  gap: 24px;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

/* Řada portrétů NENÍ mřížka, ale zalamující se řádek se středem.
   Rozdíl je vidět až u lichého počtu: v mřížce zůstane poslední
   osamocený u levého kraje a vedle něj díra, v řádku se středem
   doprostřed. Přesně ten případ, o kterém mluví příkaz č. 62.
   Karty se navíc nenafouknou, když je jich málo — drží 240 px
   a zbytek šířky zůstane prázdný, místo aby z portrétů udělal
   plakáty. */
.lide-rada {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.lide-rada > .osoba { flex: 0 1 240px; }
.lide-vyroky > *, .lide-rada > * { min-width: 0; }

/* Prázdná řada nesmí za sebou nechat mezeru — dokud do ní nikdo
   nepřibude, není vidět vůbec.
   Ne :empty — to platí jen na prvek úplně bez obsahu a stačí odřádkování
   v kódu, aby přestalo platit. Změřeno: s :empty se prázdná řada
   zobrazovala. :has(> *) se ptá na to, co nás zajímá — jestli uvnitř
   stojí nějaký člověk. */
.lide-rada:not(:has(> *)) { display: none; }
.lide-rada:has(> *) { margin-top: 28px; }

.osoba {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* Poměr stran drží rámeček, ne soubor. Snímky z vedení firmy bývají
   každý odjinud — jiný ořez, jiná velikost — a bez tohohle by se
   řada rozjela podle toho, co kdo poslal (příkaz č. 62 bod 4).
   4 : 5 je klasický portrét na výšku; zástupné pole má stejný poměr,
   aby stránka po vložení fotky nezměnila výšku. */
.osoba-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #E7EBF0;
  display: grid;
  place-items: center;
}
.osoba-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Až přijde fotka, šedé pole i jeho nápis zmizí samy — nemusí se
   nic odmazávat a nemůže se stát, že nápis zůstane pod obrázkem. */
.osoba-foto:has(img) { background: none; }
.osoba-foto:has(img) .osoba-chybi,
.skrin-snimek:has(img) .zastupne { display: none; }

/* Zástupné pole musí být nepřehlédnutelně zástupné (příkaz č. 59
   bod 5). Šrafování a nápis přes celou plochu — takhle to nikdo
   omylem nenasadí jako hotovou fotku.
   Společné pro portréty i pro snímek ve výkladní skříni: zadání
   chtělo, ať je chybějící snímek označený stejně jako chybějící
   fotky. Jedno pravidlo, ať se ty dva zápisy nerozejdou. */
.osoba-chybi,
.zastupne {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5A6472;
  background: repeating-linear-gradient(
    -45deg, #E7EBF0 0 10px, #DDE3EA 10px 20px);
}

/* Portrét u výroku nesmí růst se šířkou karty. Bez tohohle vyšla na
   tabletu fotka 800 px široká a karta byla vysoká přes 1 100 px —
   změřeno. V řadě bez výroků portrét plochu karty vyplnit má, tam je
   karta úzká a portrét je celý obsah. */
.lide-vyroky .osoba-foto { max-width: 168px; }

.osoba blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}
.osoba blockquote p { margin: 0 0 10px; }
.osoba blockquote p:last-child { margin-bottom: 0; }

/* Jméno pod výrokem, funkce pod jménem — i s vypnutými styly je
   z pořadí poznat, kdo to řekl a čím je. */
.osoba figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;          /* podpis drží u paty karty i v nestejně
                                dlouhých výrocích vedle sebe */
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.osoba-jmeno { font-size: 15px; font-weight: 700; color: var(--text); }
.osoba-funkce { font-size: 13.5px; color: var(--muted); }

/* Kdo výrok nemá, drží se skromněji: portrét, jméno, funkce.
   Tahle část nese velikost firmy, ne argument (příkaz č. 62 bod 2). */
.lide-rada .osoba { gap: 12px; padding: 14px; }
.lide-rada .osoba figcaption { margin-top: 0; padding-top: 10px; }

@media (max-width: 700px) {
  .lide-vyroky, .lide-rada { gap: 16px; }
  .osoba { padding: 16px; }
}

/* Místo pro barevné sjednocení fotek, až o něm rozhodne UX designér
   (příkaz č. 62 bod 4). Zatím vypnuté, ať se na hotových snímcích
   nic tiše nemění.
   .osoba-foto img { filter: grayscale(1) contrast(1.04); } */

/* ═══════════════════════════════════════════════════════════════════
   VÝKLADNÍ SKŘÍŇ — TŘI VÝLOHY (příkaz č. 87, zamrazeno č. 90)
   Bílý panel vjíždějící do úvodní obrazovky. Uvnitř tři výlohy,
   každá ve vlastním rámu.
   ═══════════════════════════════════════════════════════════════════ */

/* Přesah do úvodu je PEVNÝ, ne odvozený od výšky okna: měří se od
   spodní hrany úvodu, a ta je vždy na stejném místě. S hodnotou
   odvozenou od okna kolísalo vidět z otázky 26 až 45 %, s pevnou je
   to všude stejně. Stín směrem nahoru je jediné, co odděluje bílou
   od tmavé — bez něj obojí splyne v jednu plochu. */
/* Kolik bílá plocha vyjede nahoru přes tmavý úvod. Stojí to
   v kořeni, ne u .skrin, protože se o tutéž hodnotu musí opřít
   i citát pod úvodem, a ten je jinde ve stromu — na .skrin by
   na ni nedosáhl. Dvě čísla na dvou místech se jednou rozejdou
   a fotka zmizí pod bílou. Přesně to se stalo. */
/* Kolik bílá plocha vyjede nahoru přes tmavý úvod — sto pixelů
   podle UX (16. 8. večer). Není to jen mezera: karta má position
   a z-index níž, takže tmavou plochu opravdu překrývá. */
:root { --prekryv-uvodu: 100px; }
/* ⚠ TOHLE ČÍSLO SE UŽ JEDNOU ROZEŠLO — viz komentář o dva odstavce výš.
   Pod 760 px vyjíždí plocha jen o 84 px, ale token zůstával na 100 a záři
   v úvodu tím posílal o 16 px výš než hranu, ke které se má kotvit
   (změřeno kodérem 25. 8., potvrzeno na 760, 560, 430 i 360 px).
   Řešení není opravit záři — je jich pak zase víc. Řešení je, aby ten
   jeden zlom byl JEN TADY a všechno ostatní se počítalo z tokenu.
   Příkaz č. 176. */
@media (max-width: 760px) { :root { --prekryv-uvodu: 84px; } }

/* Výška lepící hlavičky (.uvod .nav { position: fixed }). Změřeno na
   deseti šířkách 360–1893 px: všude 68 px. Slouží jako scroll-margin-top
   kotev — bez něj skok na kotvu položí horní hranu sekce POD hlavičku.
   ⚠ KDO ZMĚNÍ VÝŠKU HLAVIČKY, MUSÍ ZMĚNIT I TENHLE TOKEN. Je to druhé
   místo, kde stojí totéž číslo — v čistém CSS se tomu vyhnout nedá. */
:root { --hlavicka: 68px; }

/* ── SKOK NA KOTVU POD LEPÍCÍ HLAVIČKOU (příkaz č. 176) ──────────────
   scroll-margin-top nebyl na webu ANI JEDNOU (ověřeno grepem přes
   všechny soubory CSS), takže každý skok z menu položil horní hranu
   sekce na y = 0, tedy pod hlavičku.

   Na širokém okně to nebylo vidět: sekce má nahoře 112 px vlastního
   odsazení, takže první text vyšel pod hlavičku i tak. Na 430 px
   odsazení klesne na 64 px a hlavička má 68 — nadřádek se ořízl.
   Změřeno: sedm kotev ze devíti, oříznutí 3–4 px.

   Nespravuje se to čtyřmi pixely. Sekce má po skoku začínat POD
   hlavičkou, ne za ní — to je i důvod, proč je u .pas-bily vidět,
   kde bílý pás začíná. */
section[id], footer[id], header[id] { scroll-margin-top: var(--hlavicka); }

.skrin {
  position: relative;
  /* Vysoko nad tmavým úvodem — karta ho má překrývat, ne k němu
     jen doléhat (UX 16. 8.). */
  z-index: 10;
  margin-top: calc(-1 * var(--prekryv-uvodu));
  /* Spodní odsazení je 0: skříň teď končí uzavíracím pruhem (č. 178),
     který má vlastní vnitřní odsazení a vlastní barvu. Bílý lem pod
     ním by vrátil přesně tu hranu, kterou pruh ruší. */
  padding: clamp(26px, 3vw, 34px) 0 0;
  background: var(--card);
  /* 40, ne 28: větší poloměr čte oko jako list položený navrch,
     menší jako useknutou plochu. Na telefonu zůstává 20 — tam by
     velký oblouk ukrojil kus obsahu. */
  border-radius: 40px 40px 0 0;
  /* Obrovský, ale velmi jemný stín na horní hraně — karta má nad
     tmavým podkladem levitovat, ne mít obrys. Tři vrstvy:
     · široká a téměř neznatelná (140 px rozostření, krytí .38)
       dělá tu „hloubku" a nese celý dojem
     · střední drží tvar hrany, ať se karta v tmavém pruhu neztratí
     · úzká světlá linka nahoře je odlesk, ne stín: bez ní hrana
       vypadá jako střih, ne jako předmět nad plochou */
  /* Stín podle UX: silný a hodně rozptýlený, ať se karta od tmavého
     podkladu opticky odlepí. Čistá černá s krytím 0,6, ne naše tmavá
     fialová — pod bílou hranou má být neutrální hloubka.
     Světlá linka navrch je MOJE přidání: bez ní vypadá hrana jako
     střih, s ní jako předmět nad plochou. Kdyby vadila, je to
     jeden řádek. */
  box-shadow:
    0 -20px 60px rgba(0, 0, 0, .6),
    /* Druhá, širší vrstva: na rozsvíceném podkladu je teprve vidět,
       že karta vrhá stín. Na neosvětlené tmě nedělala nic — to byl
       ten „tvrdý řez", na který si Jiří stěžoval. */
    0 -40px 120px -10px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ── Úroveň 1 · otázka a odpověď ─────────────────────────────────
   Na střed, ne do levého sloupce. Výkladní skříň je plná; sazba
   u levého kraje nechávala pravou polovinu prázdnou a působilo to
   jako nedodělek, ne jako výloha (příkaz č. 90 bod 4). */
/* Nadpis a texty pod ním sedí VLEVO OD STŘEDU, ne na střed — tak to
   bylo původně a tak se to vrací (zadání 15. 8. večer). Blok drží
   vlastní šířku a stojí v levé polovině; pravá polovina patří
   rukopisu, takže prázdná nezůstane. */
.skrin-peek { max-width: 62%; }
.skrin-nadradek {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: var(--violet7);
}
.skrin-otazka {
  /* Dva řádky, ne jeden: přesah ukazuje 128 px a jednořádková otázka
     se do nich vejde celá i s podotázkou. Pak už to není useknutá
     otázka, ale hotový nadpis — a celý tah z č. 74 stojí na tom, že
     otázka zůstane nedočtená. Šířkou se vynutí zlom. */
  max-width: 21ch;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.9vw, 44px);
  line-height: 1.08; letter-spacing: -.025em; font-weight: 780;
  color: var(--text);
  text-wrap: balance;
}
.skrin-podotazka { margin: 0; font-size: 15px; color: var(--body); }

.skrin-nalezeni {
  list-style: none; margin: 18px 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.skrin-nalezeni li {
  display: flex; align-items: center; gap: 12px;
  min-width: 266px; padding: 12px 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
}
/* Kolečko s iniciálami, ne nakreslená tvář: na webu platí, že každá
   lidská tvář je skutečný člověk od nás a má u sebe jméno. */
.nal-kolecko {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: #fff; line-height: 1;
  /* Plná barva, ne přechod z fialové do fuchsiové. Na fuchsiovém konci
     dává bílé písmo 3,0 : 1 a norma žádá 4,5 — u přechodu se přitom
     nedá říct, na kterém místě písmeno leží. var(--violet7) dává
     7,1 : 1 po celé ploše. */
  background: var(--violet7);
}
.nal-text { display: flex; flex-direction: column; min-width: 0; }
.nal-text b { font-size: 14.5px; font-weight: 650; color: var(--text); }
.nal-text span { font-size: 12.5px; color: var(--muted); }
.nal-skore { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--violet7); }
.skrin-ilustrace { margin: 0 0 24px; font-size: 11.5px; color: var(--muted); }

/* ── Výloha: společný rám ────────────────────────────────────────
   Hloubka jen jednou: rám má linku a měkký stín, uvnitř jsou prvky
   ploché. Když stínuje všechno, nevystupuje nic. */
.vyloha {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--stin-karty);
}
/* Odsazení zmenšené 16. 8. (Jiří: „výškově zmenšit"). Původně
   18/22/0, 12 na druhé hlavě, 20 na nadpisu. Sníženo všude, kde to
   nesahá na obsah. */
.vyloha-hlava { display: flex; align-items: center; gap: 10px; padding: 13px 18px 0; }
.vyloha-hlava-druha { padding-top: 7px; }
.vyloha-nadpis { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.vyloha-text { margin: 4px 18px 0; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.vyloha-telo { padding: 12px 18px 14px; }
/* Cizí logo se nepřebarvuje ani nedeformuje — jen se sjednotí výška. */
.vyloha-znacka { height: 26px; width: auto; display: block; }
.vyloha-vlajka {
  margin-left: auto;
  padding: 5px 10px; border-radius: 6px;
  background: #047857; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
/* Fialový praporek NONSTOP (č. 110 bod 4). Bílá na #7C3AED dává
   5,70 : 1, tedy s rezervou i na drobné verzálky. */
.vlajka-nonstop { background: var(--violet); }

/* ── Rohy kolem rozhovoru (č. 110 bod 4) ─────────────────────────
   Věta vlevo dole, počet hovorů vpravo dole. Nahoře vpravo je
   praporek výš v hlavě panelu.

   flex-end, ne center: věta má tři řádky a rámeček jeden — zarovnat
   je na střed by rámeček nadzvedlo nad spodní hranu věty a roh by
   přestal být roh. */
.rohy-dole {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  /* Odsazení stejné jako u .vyloha-telo, jen bez horního — navazuje
     to rovnou pod ukázku. */
  padding: 0 18px 14px;
}
.roh-veta {
  margin: 0;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body);
}
/* Týž tvar jako „14 portálů" v ulici výš — vědomě, ne náhodou.
   Dvě různé cedulky s číslem na jedné stránce by si konkurovaly. */
.roh-pocet {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 13px;
  text-align: center;
  line-height: 1.05;
  background: var(--card);
  border: 2px solid var(--text);
  border-radius: 12px;
}
.roh-pocet b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.roh-pocet span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Na úzkém okně se rohy srovnají pod sebe — vedle sebe by na věty
   zbylo pár znaků na řádek. */
@media (max-width: 560px) {
  .rohy-dole { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Výloha 1 · ulice ────────────────────────────────────────────
   Není to řádka dlaždic, je to scéna: cedule visí z obou stran
   v různých výškách a ve třech velikostech, uprostřed je průhled
   do dálky a v něm stojí postavy. Hloubku nese měřítko a jas,
   ne perspektivní zkosení — zkosený text se hůř čte (č. 85 bod 3). */
.ulice {
  position: relative;
  height: 520px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.ulice::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(90% 70% at 50% 34%, color-mix(in srgb, var(--violet) 6%, transparent), transparent 70%);
}
.ulice-kulisa { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.cedule {
  position: absolute; z-index: 4;
  padding: 10px 17px;
  border: 2px solid var(--violet);
  border-radius: 9px;
  background: var(--card);
  color: var(--violet7);
  font-weight: 700; white-space: nowrap;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 10%, transparent),
              0 6px 18px color-mix(in srgb, var(--violet) 16%, transparent);
}
/* Závěs ke zdi — bez něj cedule visí ve vzduchu a scéna se rozpadne
   na plovoucí štítky. */
.cedule::before { content: ""; position: absolute; top: -12px; width: 2px; height: 12px; background: #E7E2F5; }
.c-vlevo::before { left: 16px; }
.c-vpravo::before { right: 16px; }
.c-blizko { font-size: 17px; }
.c-stred  { font-size: 14.5px; }
.c-daleko { font-size: 12.5px; padding: 8px 13px; border-width: 1.5px; }
/* Zvýraznění osmi portálů se zpětným kanálem a legenda k němu jsou
   zrušené 16. 8. — Jiří říká, že oboustranná komunikace běží se
   všemi. Pravidla jsem SMAZAL, ne zakomentoval: mrtvé pravidlo
   v souboru někdo za měsíc omylem oživí. V gitu u commitu cc01198. */

/* POSTAVY — čísla jsou z příkazu č. 98 a jsou to opravy zadání,
   ne odhad. Podstatné je, PROČ tak vypadají:

   POPŘEDÍ NENÍ VELIKOST JEDNÉ POSTAVY, ALE POMĚR K OSTATNÍM.
   Když měla agentka 300 px a muži 250, byla to řada tří lidí —
   rozdíl, který oko nečte jako hloubku. Musí být proti nim víc
   než dvojnásobná, jinak se popředí neprojeví.

   ZVEDNUTÍ MUŽŮ DĚLÁ PŮLKU PRÁCE. V perspektivě je vzdálenější věc
   výš a menší. Kdyby všichni tři stáli na jedné lince, hloubka
   zmizí bez ohledu na velikosti.

   PŘESAH PŘES SPODNÍ HRANU ZRUŠEN 23. 8. (Jiří). Byl tu schválně —
   měl dělat popředí popředím. Jenže kresba nemá pod chodidly ani pixel
   průhledna (změřeno: neprůhledná plocha jde do 1480/1480), takže
   bottom: -26px neukrajoval vzduch, ale 89 px kresby — chodidlo.
   Useknutá noha přebije jakýkoli dojem hloubky. Popředí drží dál
   měřítko (agentka je proti mužům víc než dvojnásobná) a z-index.
   Kdyby se přesah měl vrátit, napřed dokreslit průhledný pás pod
   chodidly, jinak se to useknutí vrátí s ním. */
.ulice-postavy { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.postava { position: absolute; width: auto; display: block; }

.p-b {
  height: 430px;
  left: 50%;
  bottom: 0;                     /* na hraně, ne pod ní — viz poznámka výš */
  transform: translateX(-52%);
  z-index: 5;                    /* nad vším v ulici, i nad linkou */
  filter: drop-shadow(0 26px 30px rgba(15, 23, 42, .26));
}
.p-a, .p-c {
  height: 196px;
  bottom: 120px;                 /* výš = dál v perspektivě */
  z-index: 4;
  opacity: .92;
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, .12));
}
.p-a { left: 26%; }
.p-c { right: 26%; }

/* Pod 1100 px se ulice zúží, ale cedule zůstávají u okrajů — postavy
   v původní velikosti pak zakrývaly čtyři z nich. Změřeno na 900 px.
   Č. 85 bod 4 to zakazuje: cedule s názvem nesmí být zakrytá.
   Zmenšení je lepší než vynechání — scéna si nechá hloubku. */
/* Pod 1100 px se ulice zúží, cedule zůstanou u okrajů a postavy je
   začnou zakrývat — to č. 85 bod 4 zakazuje. Měřítko se proto zmenší
   a postavy se stáhnou blíž ke středu. */
/* Pod 1100 px se ulice zúží, cedule zůstanou u okrajů a postavy je
   začnou zakrývat — to č. 85 bod 4 zakazuje. Zmenšuje se v poměru,
   aby popředí zůstalo popředím: agentka je pořád víc než dvojnásobná.
   Ubírá se posunem do stran, ne na výšce — výška je to, co popředí
   dělá (příkaz č. 98). */
@media (max-width: 1100px) {
  .p-b { height: 340px; }
  .p-a, .p-c { height: 152px; bottom: 104px; }
  .p-a { left: 29%; }
  .p-c { right: 29%; }
}
@media (max-width: 1000px) {
  .p-b { height: 300px; }
  .p-a, .p-c { height: 132px; bottom: 96px; }
  .p-a { left: 32%; }
  .p-c { right: 32%; }
}

.ulice-cislo {
  position: absolute; right: 24px; top: 18px; z-index: 5;
  padding: 8px 15px; text-align: center; line-height: 1.05;
  background: var(--card); border: 2px solid var(--text); border-radius: 12px;
}
.ulice-cislo b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.ulice-cislo span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── Výlohy 2 a 3 ────────────────────────────────────────────── */

/* Ukázky NESMĚJÍ vypadat jako živé rozhraní — žádné vstupní pole,
   žádné tlačítko odeslat. Lidé to zkoušejí a pak jim to nefunguje. */
.ukazka { padding: 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.ukazka-cas { margin: 0 0 7px; text-align: center; font-size: 10.5px; color: var(--muted); }
.bublina { max-width: 82%; margin: 0 0 6px; padding: 7px 12px; border-radius: 13px; font-size: 13px; line-height: 1.38; }
.b-my { background: #EDE9FE; color: #3B1A78; border-bottom-left-radius: 5px; }
.b-on { margin-left: auto; background: var(--card); border: 1px solid var(--line); color: var(--body); border-bottom-right-radius: 5px; }
.ukazka-hlava {
  display: flex; justify-content: space-between; margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.udalost {
  margin: 0 0 8px; padding: 9px 12px; font-size: 13.5px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: 9px;
}
.udalost b { display: block; color: var(--text); font-weight: 650; }
.udalost span { font-size: 12px; color: var(--muted); }

/* ── Úrovně 3 a 4 · dolů a malé ──────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   UZAVÍRACÍ PRUH VÝKLADNÍ SKŘÍNĚ — prefix zav-. Příkaz č. 178.

   NAHRAZUJE .skrin-bezi, .skrin-bezi-odkaz, .skrin-drobne a
   .skrin-pecet. Ty čtyři třídy jsou pryč i z HTML, v jednom kroku —
   žádná z nich nezůstala osiřelá a žádné tvrzení se neztratilo,
   všechna čtyři jsou v pruhu, jen v jiném tvaru.

   PROČ TO NENÍ V .container, ALE PŘES CELOU ŠÍŘKU: pruh nese barvu
   následující sekce a musí sahat od kraje ke kraji, jinak by kolem
   něj zůstal bílý lem a hrana by se jen posunula, ne zmizela.
   Vnitřní .container drží text na stejné levé lince jako zbytek.

   PRAVIDLO 6 SE HO NETÝKÁ: je to poslední dítě .skrin a nestojí
   v žádném sousedském selektoru rytmu — odstupy si nese sám.
   ═══════════════════════════════════════════════════════════════════ */
.skrin-zaver {
  /* Táž barva jako sekce 02 (body → --bg). Bílá skříň končí na
     vlasové lince a od ní dolů je jedna souvislá plocha. */
  background: var(--bg);
  border-top: 1px solid var(--line);
  /* Bílý vzduch NAD linkou. Bez něj se spodní hrana poslední karty
     dotýkala vlasové linky pruhu — karta pak nestojí na stránce,
     ale sedí na liště. Číslo je z rytmu skříně: poslední blok končí
     kartou a ta vytéká stínem, takže po odečtení stínu zbude
     ~49 px čistého bíla — tolik, kolik je nad ostatními přechody
     (příkaz č. 167 bod 4b). */
  margin-top: 64px;
  padding: 30px 0 34px;
}

/* Čtyři sloupce, ne čtyři odstavce pod sebou. minmax(0,1fr) — bez
   něj by nejdelší detail roztáhl svůj sloupec na úkor ostatních. */
.zav-mriz {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 40px;
}
.zav-blok { min-width: 0; }

/* TŘI ÚROVNĚ, ČTYŘIKRÁT TOTÉŽ. Předtím tu byly čtyři velikosti písma
   (11 / 12 / 12,5 / 13,5) ve 230 px výšky, každá u jiného tvrzení —
   oko z toho nemá jak poznat, co je nadřazené čemu. */
.zav-stitek {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.zav-hodnota {
  margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3;
  letter-spacing: -.01em; color: var(--text);
}
.zav-detail {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}

/* Odkaz byl dřív nejhlasitější prvek celého ocasu: podtržený tmavý
   text v poli šedé. Teď má váhu ostatních detailů a nese ho šipka.

   ⚠ TENHLE KOMENTÁŘ BYL ŠPATNĚ — nález kodéra, 25. 8. Stálo tu, že
   „podtržení naskočí až na najetí a na fokus". NENASKOČÍ: slabá linka
   na 28 % je tu i v klidu. A JE TO TAK SPRÁVNĚ, takže se mění popis,
   ne chování.

   PROČ: odkaz uvnitř textu musí být poznat, i když se na něj nenajede.
   Barva sama na to nestačí — kdo barvy nerozliší, minul by ho, a na
   dotyku se nenajíždí vůbec. Na najetí a na fokus linka jen zesílí
   na plnou; to je ta část, kterou komentář popisoval, jen ji vydával
   za začátek místo za zesílení.

   Kodér nález správně nepředělal sám a předal ho k rozhodnutí tomu,
   kdo tvar navrhl. Tohle je to rozhodnutí: LINKA ZŮSTÁVÁ.
   (A dokud cíl vrací 404 — výhrada V28 — je tišší poloha správnější.) */
.zav-odkaz {
  color: var(--violet7); text-decoration: none;
  border-bottom: 1px solid rgba(109, 40, 217, .28);
  transition: border-color .18s ease, color .18s ease;
}
.zav-odkaz:hover { color: var(--violet); border-bottom-color: currentColor; }
.zav-odkaz:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.zav-odkaz span { display: inline-block; margin-left: 2px; }

@media (max-width: 900px) {
  .zav-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (max-width: 520px) {
  .zav-mriz { grid-template-columns: 1fr; gap: 20px; }
  .skrin-zaver { padding: 26px 0 28px; }
}

/* Pod 760 px to není ulice a je to v pořádku: čitelnost čtrnácti
   názvů je důležitější než dojem (příkaz č. 85 bod 7). Cedule se
   sesypou do řádků, kulisa i postavy zmizí. */
@media (max-width: 760px) {
  /* margin-top odsud pryč — překryv nese --prekryv-uvodu, který se na
     84 px přepíná v kořeni (č. 176). Zůstává jen poloměr: velký oblouk
     by na telefonu ukrojil kus obsahu. */
  .skrin { border-radius: 20px 20px 0 0; }
  .ulice { height: auto; padding: 22px 18px 20px; }
  .cedule { position: static; display: inline-block; margin: 0 8px 10px 0; font-size: 14px; }
  .cedule::before { display: none; }
  .ulice-postavy, .ulice-kulisa, .ulice-cislo { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   RUČNÍ POZNÁMKA U ROZHOVORU (zadání UX 16. 8.)
   Ručně psaná věta a malovaná šipka dolů na ukázku chatu.
   ═══════════════════════════════════════════════════════════════════ */

/* V TOKU, ne absolutně. Předchůdce — zelená hláška u nadpisu skříně —
   visel absolutně a na každé šířce se musel doměřovat, aby se nepotkal
   s nadpisem, s kartami kandidátů a s krajem okna. Tady si prvek místo
   vezme sám, a tím celá ta třída potíží mizí. */
/* Pravidla .rucni-poznamka jsou zrušená: obě ručně psané poznámky
   dnes nesou karty samy (.ms-banner .rukopis a .wa-karta .rukopis),
   každá ve svém souboru ze složky. Smazáno, ne zakomentováno —
   pravidlo bez uživatele někdo za měsíc oživí. V gitu u 1f9e296. */

/* ═══════════════════════════════════════════════════════════════════
   PANELY S LIDMI (příkazy č. 93, 94, 95, 99)
   Tmavý pás, velký kulatý portrét, citát vedle, jméno pod čarou.

   JEDNA SADA TŘÍD PRO VŠECHNA TŘI MÍSTA — na titulce, na ceníku
   a v Bezpečnosti. Ne kopie na každé stránce (příkaz č. 95).
   Až se bude měnit odsazení nebo barva, mění se to na jednom místě;
   jinak se za měsíc rozejdou a bude to vidět. Je to týž případ jako
   ta zelená u WhatsAppu, jen v jiném kabátě.
   ═══════════════════════════════════════════════════════════════════ */

.panel-clovek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 48px);
  background: #0B0616;
  border-radius: var(--r-lg);
  color: #fff;
}
/* Zrcadlová varianta: portrét vlevo, text vpravo. Střídání drží
   stránku živou, když jsou panely na víc místech pod sebou. */
.panel-clovek.zrcadlo { grid-template-columns: auto minmax(0, 1fr); }
.panel-clovek.zrcadlo .panel-portret { order: -1; }

.panel-portret {
  width: 284px; height: 284px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Soubor má 800 px schválně, kvůli jemným displejům —
     nezmenšovat ho na 284 (příkaz č. 93 bod 2). */
}

/* Bez uvozovek a linky to čte jako odstavec textu s fotkou vedle.
   S nimi to čte jako citát konkrétního člověka — a o to jde,
   protože pod tím je jeho jméno a on za tu větu ručí (č. 104).
   Uvozovka je dekorace: v dokumentu není, kreslí ji ::before,
   takže ji odečítač obrazovky nepřečte jako znak uprostřed věty. */
.panel-citat { position: relative; margin: 0; padding-top: 58px; }
.panel-citat::before {
  content: "„";
  position: absolute;
  top: -6px; left: 0;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: #A78BFA;   /* světlá fialová z palety pro tmavé pozadí */
}
/* Linka slábne doprava do ztracena — nekončí hranou, ale mizí. */
.panel-citat::after {
  content: "";
  position: absolute;
  top: 44px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(167, 139, 250, .75), transparent);
}
.panel-citat p {
  margin: 0 0 14px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: #E9E4F5;
}
.panel-citat p:last-of-type { margin-bottom: 0; }

.panel-podpis {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 14.5px;
  color: #A9B4C4;   /* 8,9 : 1 na #0B0616 — naše --muted je laděná
                       na světlé pozadí a tady by spadla pod normu */
}
.panel-podpis { position: relative; }
.panel-podpis b { display: block; font-size: 16px; font-weight: 650; color: #fff; }
/* Uzavírací uvozovka na konci linky pod podpisem — citát se tím
   uzavře i opticky. */
.panel-podpis::after {
  content: "“";
  position: absolute;
  right: 0; bottom: -6px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #A78BFA;
}

@media (max-width: 820px) {
  /* Portrét nad text, ne vedle: v jednom sloupci vypadá 284px kruh
     vedle úzkého odstavce jako chyba v sazbě. */
  .panel-clovek, .panel-clovek.zrcadlo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .panel-clovek.zrcadlo .panel-portret { order: 0; }
  .panel-portret { width: 190px; height: 190px; }
  .panel-podpis { text-align: center; }
}

/* Řádek s osobní adresou pod panelem. Stojí odděleně — je to
   nabídka, ne součást citátu. */
.panel-kontakt {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--body);
}
.panel-kontakt a { color: var(--violet7); font-weight: 600; }
.panel-kontakt a:hover { text-decoration: underline; }

/* ── Rozsvícení ulice (krok druhý, č. 78 bod 2) ──────────────────
   VÝCHOZÍ STAV JE KONCOVÝ. Tyhle třídy jen dočasně skryjí to, co
   v dokumentu už je, a hned to zase odkryjí. Kdo nemá JavaScript
   nebo má vypnutý pohyb, žádnou z nich nedostane a vidí hotovou
   scénu — to je pravidlo (a) a (b) z č. 78 a nesmí se obejít.

   Pohybuje se JEN průhledností a posunem. Žádné animované
   rozostření ani stíny: čtrnáct prvků najednou je práce dost. */
.ulice.je-pred-rozsvicenim .cedule,
.ulice.je-pred-rozsvicenim .postava {
  opacity: 0;
}
.ulice.sviti .cedule {
  /* both, ne backwards: „backwards" drží počáteční stav jen během
     prodlevy, ale po doběhnutí animace se prvek vrátí ke svému
     počítanému stylu — a ten je zatím opacity: 0 z třídy skrytí.
     Cedule se tedy rozsvítily a hned zase zhasly, dokud se ta třída
     nesundala. Změřeno: mezi jednou a třemi a půl vteřinami jich
     bylo vidět nula. */
  animation: cedule-sviti .5s ease-out both;
  /* --i nese POŘADÍ, ne pozici: cedule se rozsvěcují zezadu dopředu,
     ne zleva doprava. V ulici dává větší smysl světlo, které jde
     do dálky, než světlo, které přejíždí po jedné straně (č. 85).
     Pořadí je zapsané v HTML u každé cedule, takže se dá změnit
     bez sahání do skriptu i do téhle animace. */
  animation-delay: calc(var(--i, 0) * .055s + .2s);
}
.ulice.sviti .postava {
  animation: postava-sviti .6s ease-out both;
}
/* Agentka naskočí první z postav, muži po ní — ona to světlo
   rozsvítila, oni jen jdou kolem. */
.ulice.sviti .p-b { animation-delay: 2.3s; }
.ulice.sviti .p-a { animation-delay: 2.45s; }
.ulice.sviti .p-c { animation-delay: 2.6s; }

@keyframes cedule-sviti {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes postava-sviti {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; }
}
/* Agentka má vlastní posun ve vodorovné ose (translateX(-52%)),
   takže jí nesmí animace přepsat celou transformaci. */
@keyframes postava-sviti-stred {
  from { opacity: 0; transform: translateX(-52%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-52%); }
}
.ulice.sviti .p-b { animation-name: postava-sviti-stred; }

/* Pojistka: kdyby se skript nespustil až po vykreslení, ať prvky
   nikdy neuvíznou skryté. */
@media (prefers-reduced-motion: reduce) {
  .ulice.je-pred-rozsvicenim .cedule,
  .ulice.je-pred-rozsvicenim .postava { opacity: 1; animation: none; }
}

/* Citát z úvodní obrazovky se 16. 8. přestěhoval na ceník (zadání UX,
   potvrzené Jiřím) — má tam působit ve chvíli, kdy klient řeší cenu.
   Pravidla .hero-citat a .uvod-obal tím zůstala bez prvku, proto jsou
   pryč celá. Na ceníku se nehodí: tam je hotová sada .panel-clovek,
   kterou používají všechna místa s lidmi (č. 95), a vyrytí do tmavého
   pozadí bylo dělané pro tmavou úvodní obrazovku. Kdyby se citát měl
   někdy vrátit sem, je i s pravidly v gitu u commitu f4181a5. */


/* Přiznání pod ukázkou rozhovoru — táž velikost i barva jako u karet
   nahoře, ať to čte jako totéž a ne jako jiná poznámka. */
.ukazka-ilustrace { margin: 7px 0 0; font-size: 11px; color: var(--muted); }

/* Věta nad osobní adresou v patičce. Není to odkaz, tak nesmí
   vypadat jako řádek odkazů kolem — proto vlastní styl. */
.foot-osobne { margin: 0 0 10px; font-size: 13px; line-height: 1.55; max-width: 30ch; }



/* ---- vrstvená scéna ---- */
.ms-banner .scena{position:relative;margin:9px 0 0;padding:0 0 134px;perspective:1400px}

/* plovoucí karta Teams */
.ms-banner .teams{position:absolute;right:0;bottom:18px;width:284px;background:#fff;border:1px solid var(--ms-linka);
 border-radius:16px;padding:12px 14px 13px;
 box-shadow:0 2px 4px rgba(15,23,42,.05),0 26px 46px -12px rgba(15,23,42,.26);
 transform:rotateX(2deg) rotateY(-3deg)}

/* rukopis */
.ms-banner .rukopis{position:absolute;left:6px;bottom:6px;max-width:360px;pointer-events:none}
/* ŠIPKA JE STAŽENÁ KE KRAJI, POD PSACÍ PÍSMO (Jiří 16. 8.).
   Původně měla odsazení 96 px zleva a šířku 172, takže mířila do
   plovoucí karty Teams a hrotem zasahovala až na tlačítko
   „Připojit se k videohovoru". Karta Teams je široká 284 px a sedí
   u pravého kraje, takže na šipku zbývá jen levá část scény.
   Změřeno po úpravě: hrot končí s rezervou před levou hranou karty. */
.ms-banner .rukopis svg{display:block;margin:2px 0 0 8px;width:146px;height:62px}

/* ---- funkční štítky ---- */
.wa-karta .stitky{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}

/* ---- rukopis ---- */
.wa-karta .rukopis{position:relative;margin:10px 0 -4px;display:flex;align-items:flex-end;gap:4px;
 pointer-events:none}

/* plovoucí notifikace */
.wa-karta .notif{position:absolute;right:-14px;bottom:4px;width:262px;background:#fff;
 border:1px solid var(--wa-k-linka);border-radius:16px;padding:11px 13px 12px;z-index:5;
 box-shadow:0 2px 4px rgba(15,23,42,.05),0 26px 46px -12px rgba(15,23,42,.26);
 transform:rotateX(2deg) rotateY(-3deg)}

/* Přiznání pod ukázkou rozhovoru — táž velikost i barva jako u karet
   nahoře, ať to čte jako totéž a ne jako jiná poznámka. */
.ukazka-ilustrace { margin: 7px 0 0; font-size: 11px; color: var(--muted); }

/* Věta nad osobní adresou v patičce. Není to odkaz, tak nesmí
   vypadat jako řádek odkazů kolem — proto vlastní styl. */
.foot-osobne { margin: 0 0 10px; font-size: 13px; line-height: 1.55; max-width: 30ch; }

/* ═══════════════════════════════════════════════════════════════════
   OBĚ KARTY VE VÝKLADNÍ SKŘÍNI (příkaz č. 130, ruší č. 129)
   Microsoft i WhatsApp, každá ze svého souboru ze složky. Nasazeno
   doslova: hodnoty, texty i třídy jsou z těch souborů, měnila se
   jen cesta k fotce a rozměry obrázku.

   PROČ JE VŠECHNO POD .ms-banner / .wa-karta: jména jako .karta,
   .chat, .pata nebo .lead jsou tak obecná, že kolize s naším CSS
   je jistota, ne riziko — .udalost a .lead se překrývají už dnes.
   Proměnné mají předpony ms- a wa-k- ze stejného důvodu.

   OVĚŘENÍ SOUBORŮ (č. 130 bod 5):
   · SOUBOR-130-ms-ekosystem.html 9 714 B, sha256 3745b6e7… SEDÍ
   · SOUBOR-130-wa-karta.html     9 635 B, sha256 NESEDÍ —
     přenos přes schránku mi ten soubor porušil. Hodnoty i texty
     jsem proto ověřil proti výčtu v příkazu a proti nezávislému
     výpisu souboru; sedí všechny. Podrobně v hlášení.
   ═══════════════════════════════════════════════════════════════════ */
.ms-banner {
  --ms-fial: #7C3AED;
  --ms-fial-t: #6D28D9;
  --ms-text: #0F172A;
  --ms-tlum: #475569;
  --ms-linka: #E8ECF2;
  --ms-plocha: #F8FAFC;
}
.wa-karta {
  --wa-k-fial: #7C3AED;
  --wa-k-fial-t: #6D28D9;
  --wa-k-text: #0F172A;
  --wa-k-tlum: #475569;
  --wa-k-linka: #E8ECF2;
  --wa-k-plocha: #F8FAFC;
  --wa-k-wa: #25D366;
  --wa-k-wa-t: #075E54;
}

.ms-banner .karta{position:relative;display:flex;flex-direction:column;border:1px solid var(--ms-linka);
 border-radius:24px;background:linear-gradient(160deg,#FFFFFF 0%,#FCFCFE 55%,#F7F8FC 100%);
 padding:17px 30px 14px;overflow:hidden;
 box-shadow:var(--stin-karty)}
.ms-banner .karta::before{content:"";position:absolute;inset:-140px -120px auto auto;width:460px;height:340px;
 background:radial-gradient(closest-side,rgba(124,58,237,.10),transparent);pointer-events:none}
.ms-banner .hl{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ms-banner .hl svg{width:26px;height:26px}
.ms-banner .vlajka{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 color:var(--ms-fial-t);background:#F3EEFF;border:1px solid #E4D9FB;padding:6px 12px;border-radius:8px}
.ms-banner h2{position:relative;margin:0 0 6px;font-size:24.5px;line-height:1.12;letter-spacing:-.025em}
.ms-banner h2 span{background:linear-gradient(90deg,#7C3AED,#D946EF);-webkit-background-clip:text;
 background-clip:text;color:transparent}
.ms-banner .lead{position:relative;margin:0 0 3px;font-size:14.5px;color:var(--ms-tlum);line-height:1.55;max-width:54ch}

/* ---- vrstvená scéna ---- */
.ms-banner .scena{position:relative;margin:9px 0 0;padding:0 0 134px;perspective:1400px}
.ms-banner .okno{position:relative;width:82%;border:1px solid var(--ms-linka);border-radius:16px;background:#fff;
 box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 40px -12px rgba(15,23,42,.16);
 transform:rotateX(3deg) rotateY(-4deg);transform-origin:left top;overflow:hidden;
 -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,rgba(0,0,0,.4) 88%,transparent 100%);
         mask-image:linear-gradient(to bottom,#000 0,#000 72%,rgba(0,0,0,.4) 88%,transparent 100%)}
.ms-banner .okno-lista{display:flex;align-items:center;gap:7px;padding:6px 13px;background:var(--ms-plocha);
 border-bottom:1px solid var(--ms-linka)}
.ms-banner .tec{width:9px;height:9px;border-radius:50%;background:#E2E8F0}
.ms-banner .okno-nazev{margin-left:6px;font-size:11px;font-weight:700;color:var(--ms-tlum);letter-spacing:.02em}
.ms-banner .okno-telo{padding:9px 15px 8px}
.ms-banner .den{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.09em;
 text-transform:uppercase;color:var(--ms-tlum);margin-bottom:5px}
.ms-banner .radek{display:flex;align-items:center;gap:11px;padding:3px 0;border-top:1px solid #F1F5F9;font-size:12.5px;color:#94A3B8}
.ms-banner .radek:first-of-type{border-top:0}
.ms-banner .cas{width:44px;flex:0 0 44px;font-variant-numeric:tabular-nums}
.ms-banner .udalost{flex:1;background:#F3EEFF;border:1px solid #E4D9FB;border-left:3px solid var(--ms-fial);
 border-radius:9px;padding:6px 11px;color:var(--ms-text)}
.ms-banner .udalost b{display:block;font-size:12.5px}
.ms-banner .udalost em{font-style:normal;font-size:11px;color:var(--ms-tlum)}
.ms-banner .jina{flex:1;background:#F8FAFC;border:1px solid var(--ms-linka);border-left:3px solid #CBD5E1;
 border-radius:9px;padding:5px 11px;font-size:12px;color:var(--ms-tlum)}

/* plovoucí karta Teams */
.ms-banner .teams{position:absolute;right:0;bottom:18px;width:284px;background:#fff;border:1px solid var(--ms-linka);
 border-radius:16px;padding:12px 14px 13px;
 box-shadow:0 2px 4px rgba(15,23,42,.05),0 26px 46px -12px rgba(15,23,42,.26);
 transform:rotateX(2deg) rotateY(-3deg)}
.ms-banner .teams-hl{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.ms-banner .teams-hl svg{width:22px;height:22px}
.ms-banner .teams-hl b{font-size:12.5px}
.ms-banner .zive{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;
 letter-spacing:.07em;text-transform:uppercase;color:#BE185D}
.ms-banner .zive i{width:7px;height:7px;border-radius:50%;background:#DB2777;display:inline-block}
.ms-banner .video{position:relative;border-radius:11px;overflow:hidden;margin-bottom:8px;
 background:#0B0616;aspect-ratio:16/9}
.ms-banner .video .velky{width:100%;height:100%;object-fit:cover;display:block}
.ms-banner .video .maly{position:absolute;right:8px;bottom:8px;width:42px;height:32px;border-radius:7px;
 background:linear-gradient(135deg,#7C3AED,#D946EF);color:#fff;font-size:11px;font-weight:800;
 display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.85)}
.ms-banner .video .stopky{position:absolute;left:8px;top:8px;background:rgba(11,6,22,.62);color:#fff;
 font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px;letter-spacing:.03em}
.ms-banner .teams p{margin:0 0 9px;font-size:12px;color:var(--ms-tlum);line-height:1.4}
.ms-banner .tlac{display:block;text-align:center;background:linear-gradient(135deg,#7C3AED,#9333EA);color:#fff;
 border-radius:10px;padding:9px 0;font-size:13px;font-weight:700;letter-spacing:.01em;
 box-shadow:0 8px 18px -6px rgba(124,58,237,.55)}

/* rukopis */
.ms-banner .rukopis{position:absolute;left:6px;bottom:6px;max-width:360px;pointer-events:none}
.ms-banner .rukopis .veta{display:inline-block;font-family:"Caveat","Segoe Script","Bradley Hand",cursive;
 font-size:24px;line-height:1.2;color:var(--ms-fial);transform:rotate(-4deg);text-align:left}
/* ŠIPKA JE STAŽENÁ KE KRAJI, POD PSACÍ PÍSMO (Jiří 16. 8.).
   Původně měla odsazení 96 px zleva a šířku 172, takže mířila do
   plovoucí karty Teams a hrotem zasahovala až na tlačítko
   „Připojit se k videohovoru". Karta Teams je široká 284 px a sedí
   u pravého kraje, takže na šipku zbývá jen levá část scény.
   Změřeno po úpravě: hrot končí s rezervou před levou hranou karty. */
.ms-banner .rukopis svg{display:block;margin:2px 0 0 8px;width:146px;height:62px}
.ms-banner .ilu{position:relative;margin:2px 0 0;font-size:11px;color:var(--ms-tlum)}
.ms-banner .pata{position:relative;display:flex;align-items:flex-end;gap:18px;margin-top:auto;
 padding-top:12px;border-top:1px solid var(--ms-linka)}
.ms-banner .pata p{margin:0;font-size:13.5px;color:var(--ms-tlum);line-height:1.5;max-width:44ch}
.ms-banner .pata b{color:var(--ms-text)}
.ms-banner .cislo{margin-left:auto;border:2px solid var(--ms-text);border-radius:11px;padding:8px 15px;
 text-align:center;line-height:1.05;white-space:nowrap;background:#fff}
.ms-banner .cislo b{display:block;font-size:27px;font-weight:800;letter-spacing:-.02em}
.ms-banner .cislo span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ms-tlum)}

.wa-karta .karta{position:relative;display:flex;flex-direction:column;border:1px solid var(--wa-k-linka);
 border-radius:24px;background:linear-gradient(160deg,#FFFFFF 0%,#FCFCFE 55%,#F7F8FC 100%);
 padding:17px 30px 14px;overflow:hidden;
 box-shadow:var(--stin-karty)}
.wa-karta .karta::before{content:"";position:absolute;inset:-140px -120px auto auto;width:460px;height:340px;
 background:radial-gradient(closest-side,rgba(37,211,102,.10),transparent);pointer-events:none}
.wa-karta .hl{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.wa-karta .hl svg{width:26px;height:26px}
.wa-karta .vlajka{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 color:#fff;background:linear-gradient(135deg,#7C3AED,#6D28D9);padding:6px 12px;border-radius:8px}
/* Nadřádek karty (č. 177). Typografii si půjčuje od .skrin-nadradek —
   je to týž prvek v téže roli, jen v jiné buňce. Mění se jedině barva:
   sdílený nadřádek je fialový, tahle karta je zelená a fialová by v ní
   byla cizí. #075E54 na bílé dává 8,6 : 1. */
.wa-karta .wa-nadradek{position:relative;margin:0 0 6px;color:var(--wa-tmava)}
.wa-karta h2{position:relative;margin:0 0 6px;font-size:24.5px;line-height:1.12;letter-spacing:-.025em}
.wa-karta h2 span{background:linear-gradient(90deg,#059669,#25D366);-webkit-background-clip:text;
 background-clip:text;color:transparent}
.wa-karta .lead{position:relative;margin:0 0 3px;font-size:14.5px;color:var(--wa-k-tlum);line-height:1.55;max-width:56ch}

/* ---- funkční štítky ---- */
.wa-karta .stitky{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.wa-karta .st{font-size:11px;font-weight:600;letter-spacing:.005em;color:#334155;
 background:#F1F5F9;border:1px solid #E2E8F0;border-radius:20px;padding:5px 11px;
 white-space:nowrap}

/* ---- rukopis ---- */
/* ── PŘEBYTEK VÝŠKY SE ROZDĚLÍ NA DVĚ POLOVINY (příkaz č. 177) ──────
   Karta je natažená na výšku levého sloupce a všechen přebytek se
   sesypal do JEDNOHO místa: .pata má margin-top:auto, takže mezi
   popiskem obrázku a uzavírací větou zůstávalo 99 px prázdna.
   (Změřeno; z toho 44 px přibylo tím, že odsud odešel duplicitní
   odstavec — zbytek tam byl i předtím.)

   Druhé auto ten přebytek rozpůlí: flexbox ho mezi dvě automatické
   horní mezery rozdělí rovným dílem. Dvě padesátky se čtou jako
   vzduch, jedna devadesátka jako díra — je to totéž pravidlo jako
   „ohraničené bílo je vzduch, neohraničené je díra".

   AUTO JE NA RUKOPISU, NE NA SCÉNĚ: šipka rukopisu ukazuje na
   telefon pod sebou a mezera mezi nimi by ten vztah rozpojila.

   ⚠ TENHLE SELEKTOR JE V site.css DVAKRÁT (ř. 2028 a 2193), obě
   kopie byly doslova shodné. Ověřeno přes CSSOM, že platí TAHLE,
   druhá — proto se upravuje jen ona. Viz č. 177 bod 4. */
.wa-karta .rukopis{position:relative;margin:auto 0 -4px;display:flex;align-items:flex-end;gap:4px;
 pointer-events:none}
.wa-karta .rukopis .veta{display:inline-block;font-family:"Caveat","Segoe Script","Bradley Hand",cursive;
 font-size:24px;line-height:1.2;color:var(--wa-k-fial);transform:rotate(-3deg);text-align:left}
.wa-karta .rukopis svg{display:block;flex:0 0 auto;width:44px;height:34px;margin-bottom:-4px}

/* ---- vrstvená scéna ---- */
/* 89 px, ne 81 z příkazu: ten měřil kartu širokou 660 px, u nás má
   buňka 591. V užším sloupci se chat láme níž a notifikace, ukotvená
   ke spodku scény, vylezla na poslední bublinu — změřeno −2,7 px
   místo mezery. Při 89 je mezera 5 px, tedy jako v příkazu. */
.wa-karta .scena{position:relative;margin:4px 0 0;padding:0 0 89px;perspective:1400px}

/* sklo displeje */
.wa-karta .displej{position:relative;width:88%;border-radius:20px;padding:9px;
 background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(240,243,250,.72));
 border:1px solid rgba(255,255,255,.9);
 box-shadow:0 1px 2px rgba(15,23,42,.05),
            0 0 0 1px rgba(15,23,42,.05),
            0 22px 46px -14px rgba(15,23,42,.22),
            inset 0 1px 0 rgba(255,255,255,.9);
 transform:rotateX(3deg) rotateY(-4deg);transform-origin:left top;
 backdrop-filter:blur(6px)}
.wa-karta .displej::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
 background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%)}
.wa-karta .chat{position:relative;border-radius:13px;background:#F6F8FB;border:1px solid #E9EDF4;
 padding:10px 14px 11px;overflow:hidden}
.wa-karta .cas{text-align:center;font-size:10.5px;color:#94A3B8;margin-bottom:8px}
.wa-karta .b{max-width:83%;font-size:12.5px;line-height:1.42;padding:7px 12px;margin-bottom:6px;
 border-radius:14px;position:relative}
.wa-karta .b.my{background:#EDE9FE;border:1px solid #DDD6FE;color:var(--wa-k-text);
 border-bottom-left-radius:5px}
.wa-karta .b.on{background:#fff;border:1px solid #E6EAF1;color:var(--wa-k-text);margin-left:auto;
 border-bottom-right-radius:5px;text-align:left}
.wa-karta .b:last-child{margin-bottom:0}

/* plovoucí notifikace */
.wa-karta .notif{position:absolute;right:-14px;bottom:4px;width:262px;background:#fff;
 border:1px solid var(--wa-k-linka);border-radius:16px;padding:11px 13px 12px;z-index:5;
 box-shadow:0 2px 4px rgba(15,23,42,.05),0 26px 46px -12px rgba(15,23,42,.26);
 transform:rotateX(2deg) rotateY(-3deg)}
.wa-karta .notif-hl{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.wa-karta .notif-hl svg{width:19px;height:19px}
.wa-karta .notif-hl b{font-size:12px}
.wa-karta .hotovo{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;
 letter-spacing:.08em;text-transform:uppercase;color:#047857}
.wa-karta .hotovo i{width:7px;height:7px;border-radius:50%;background:#10B981;display:inline-block}
.wa-karta .notif .radek{display:flex;align-items:center;gap:9px}
.wa-karta .fajfka{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#DCFCE7;
 display:flex;align-items:center;justify-content:center}
.wa-karta .fajfka svg{width:14px;height:14px}
.wa-karta .notif .t b{display:block;font-size:12.5px;line-height:1.25}
.wa-karta .notif .t em{font-style:normal;display:block;font-size:11px;color:var(--wa-k-tlum);margin-top:2px;line-height:1.4}
.wa-karta .ilu{position:relative;margin:2px 0 0;font-size:11px;color:var(--wa-k-tlum)}
.wa-karta .pata{position:relative;display:flex;align-items:flex-end;gap:18px;margin-top:auto;
 padding-top:10px;border-top:1px solid var(--wa-k-linka)}
.wa-karta .pata p{margin:0;font-size:13.5px;color:var(--wa-k-tlum);line-height:1.5;max-width:46ch}
.wa-karta .pata b{color:var(--wa-k-text)}
.wa-karta .cislo{margin-left:auto;border:2px solid var(--wa-k-text);border-radius:11px;padding:8px 15px;
 text-align:center;line-height:1.05;white-space:nowrap;background:#fff}
.wa-karta .cislo b{display:block;font-size:27px;font-weight:800;letter-spacing:-.02em}
.wa-karta .cislo span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--wa-k-tlum)}


/* ── Most z úvodu do výkladní skříně (16. 8. večer) ──────────────────
   Text a pod ním čárka, obojí na střed pod tlačítky. Vede oko dolů
   k bílé kartě, která do úvodu vjíždí zespodu. */
.most {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Sedí těsně nad bílou kartou, ne uprostřed tmy — čárka má do
     karty mířit, ne končit v prázdnu. Vzdálenost od hrany karty
     řídí spodní výplň úvodu, ne tahle hodnota — tady se nastavuje
     jen odstup od tlačítek. */
  margin-top: 44px;
  pointer-events: none;
}
.most-text {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: lowercase;
  /* Krytí zvednuté z 0,5 na 0,72 (UX: „teď není skoro vidět").
     Na pozadí #0B0616 to dává 9,44 : 1 proti dřívějším 5,34 : 1.
     Prostrkání zmenšeno z .16em na .1em: řídké verzálky se při
     vyšším krytí čtou jako rozsypaný čaj. */
  color: rgba(255, 255, 255, .72);
}
.most-cara {
  /* Čistá tenká čárka, žádná šipka a žádný pohyb: prvek má vést
     oko, ne na sebe upozorňovat. Dole se vytrácí do ztracena —
     plná čára by vypadala jako oddělovač sekcí. */
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, .45),
    rgba(255, 255, 255, 0));
}
@media (max-width: 760px) {
  /* Na telefonu je tmavého místa málo a most by se tiskl na kartu. */
  .most { margin-top: 26px; gap: 10px; }
}

/* ── Světlo pod úvodem, na kterém je vidět stín karty ────────────────
   PROČ TO TU JE: bílá karta má tmavý rozptýlený stín, jenže ten se
   kreslí na pozadí #0B0616 — tmavé na tmavém není vidět a přechod
   zůstával tvrdý řez, i když se vrstvy technicky překrývaly.

   Světlo je fialové, ne bílé: bílé by v tmavém úvodu vypadalo jako
   svícení do objektivu, fialová navazuje na záři nahoře.
   Nejsilnější je u spodní hrany úvodu, tedy přesně tam, kde leží
   hrana karty; nahoru se vytrácí do ztracena. */
.uvod .hero-zare {
  position: absolute;
  left: 50%;
  /* Kotví se k HRANĚ KARTY, ne ke spodku úvodu. Nejjasnější pruh
     má gradient dole, a když světlo sahalo až na dno úvodu, ležel
     ten pruh pod kartou — tedy schovaný. Změřeno: karta překrývá
     spodních 100 px. */
  bottom: var(--prekryv-uvodu);
  z-index: 0;
  width: min(1500px, 120%);
  height: 340px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(58% 100% at 50% 100%,
      rgba(124, 58, 237, .55) 0%,
      rgba(124, 58, 237, .22) 42%,
      transparent 72%),
    radial-gradient(30% 100% at 50% 100%,
      rgba(217, 70, 239, .28) 0%,
      transparent 70%);
}
/* Obsah úvodu musí zůstat nad světlem. */
.uvod .hero > .container { z-index: 1; }

/* ── Vnitřní zarovnání obou karet (příkaz č. 131) ────────────────────
   RUŠÍ BOD 3 Z Č. 115 („vypni strečování"): strečování zůstává
   zapnuté, protože zaručuje shodné vnější boxy. Nerovnost, kterou
   bylo vidět, byla uvnitř — patičky obou karet končily jinde.

   Řeší to sloupcový flex a patička s margin-top: auto: volné místo
   sbírá patička, ne scéna. Scéna by růst NESMĚLA — karta Teams
   a rukopis jsou v ní ukotvené ke spodku, takže by se odtáhly od
   kalendáře a otevřela by se přesně ta díra, kterou jsme zavírali
   (č. 131 bod 1). */