/* Agenteeq – landing page.
   Staví na stejném systému jako aplikace („koncertní sál“): eben je scéna, mlžná slonovina
   je plocha ke čtení, samet znamená rozhodnutí, smaragd práci, mosaz limit. Stavové barvy
   se na stránce používají jen tam, kde nesou stejný význam jako v produktu.

   Stavba: stránka je řada jednotek (.unit). Každá nese jednu zprávu – vycentrovaný nadpis,
   jednu větu, případně výzvu – a pod tím jeden obraz produktu. Obrazy jsou výřezy skutečného
   rozhraní (site/detail) a nic se přes sebe nepřekrývá. Skupiny drží plocha (dlaždice, pás),
   ne rámečky. */

:root {
  --backdrop: #0C0B10; --stage: #16203A; --stage-2: #1D1A26;
  --paper: #F3F5F8; --paper-2: #EAE8EF; --card: #FFFFFF;
  --ink: #16203A; --ink-2: #3A3743; --mute: #686472;
  --on-ink: #FFFFFF; --line: #E3E1E9; --line-2: #EFEDF3;
  --velvet: #B44A64; --velvet-ink: #A8254A; --velvet-tint: #FBE8EE;
  --teal: #3E8A6E; --teal-ink: #0D7A67; --teal-tint: #E0F3EF;
  --brass: #B07D2C; --brass-ink: #86620F; --brass-tint: #F7EEDA;
  --on-stage: #F4F3F7; --on-stage-mute: #A9A3B4; --stage-line: #2A2633;
  /* Dlaždice na scéně: o stupeň světlejší než scéna, bez okraje. */
  --tile: #16141D;

  --action: var(--ink); --on-action: #FFFFFF; --action-hover: #3A3646;

  --f-display: 'Urbanist', 'Avenir Next', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --r-tile: 28px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --r-xs: 6px; --r-full: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --page: 1120px;
  --unit-y: clamp(96px, 11vw, 160px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #18151F; --paper-2: #201C2B; --card: #221E2E;
    --ink: #F3F1F7; --ink-2: #D5D1DC; --mute: #A9A3B4;
    --on-ink: #16141D; --line: #2E2A38; --line-2: #24212D;
    --velvet: #E87498; --velvet-ink: #FFB3C7; --velvet-tint: #3A1C28;
    --teal: #43D1B1; --teal-ink: #76E6CD; --teal-tint: #12332F;
    --brass: #E4B95F; --brass-ink: #F3D38E; --brass-tint: #33290F;
    --action: #F3F1F7; --on-action: #16141D; --action-hover: #CFCAD9;
  }
  .unit:not(.unit--dark) .logo--mono { filter: invert(1); }
}

/* ---------- základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
button { color: inherit; font: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 4px; }
/* Obrys kopíruje tvar prvku (kapsle zůstane kapslí); vlastní zaoblení dostane jen holý odkaz v textu. */
:where(a:not([class])):focus-visible { border-radius: var(--r-xs); }
.unit--dark :focus-visible, .nav :focus-visible { outline-color: #76E6CD; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 100; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; background: var(--action); color: var(--on-action); border-radius: var(--r-full); font-size: 15px; font-weight: 500; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 48px, var(--page)); margin-inline: auto; }

/* Jedna stupnice: nadpis jednotky, nadpis dlaždice, úvodní věta, text. Hierarchie stojí na
   velikosti a prázdném místě, ne na dalších barvách a řezech. */
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -.045em; }
h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.small { font-size: 14px; line-height: 1.6; }
.muted { color: var(--mute); }
code, kbd { font-family: var(--f-mono); font-size: .92em; }
.kicker { font-size: 15px; letter-spacing: .01em; color: var(--brass-ink); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-ink); flex: none; }

/* ---------- jednotky ---------- */
section[id] { scroll-margin-top: 72px; }
.unit { padding-block: var(--unit-y); }
.unit--tint { background: var(--paper-2); }
.unit--dark { background: var(--backdrop); color: var(--on-stage); }
.unit--dark :is(h1, h2, h3) { color: var(--on-stage); }
.unit--dark :is(p, .lead) { color: var(--on-stage-mute); }
.unit--dark .kicker { color: #E4B95F; }
.unit--dark .status-dot { background: #43D1B1; }
/* Dvě tmavé jednotky za sebou tvoří jednu scénu – druhá nezačíná novým odsazením shora. */
.unit--dark + .unit--dark { padding-top: 0; }
.unit-head { display: grid; gap: 20px; justify-items: center; text-align: center; }
.unit-head .lead { margin-inline: auto; }

/* ---------- tlačítka a odkazy ---------- */
/* Velikosti tlačítek jsou stejné jako v aplikaci: 40 (malé), 48 (základ na webu) a 56 px (hlavní výzva). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 8px 24px; font-size: 15px; border: 0; border-radius: var(--r-full); background: var(--action); color: var(--on-action); font-weight: 500; text-decoration: none; transition: background 180ms var(--ease), transform 90ms var(--ease); }
.btn:hover { background: var(--action-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--sm { min-height: 40px; padding: 6px 18px; font-size: 14px; }
/* Tlačítko v liště je jen text. Doplněk „ pro Mac“ je vlastní položka flexu, takže by mezi slovy
   byla mezera z `gap` místo obyčejné mezery; ta zůstává v textu kvůli čtečkám. */
.nav .btn { gap: 0; }
.nav-cta-extra { white-space: pre; }
.btn--lg { min-height: 56px; padding: 8px 30px; font-size: 17px; }
.nav .btn, .unit--dark .btn { background: var(--on-stage); color: var(--backdrop); }
.nav .btn:hover, .unit--dark .btn:hover { background: #D9D5E0; }
/* Vedlejší výzva vedle hlavní (Stáhnout pro Windows vedle Stáhnout pro Mac): stejný tvar a výška,
   plochu nese jen linka. Linka má kontrast aspoň 3 : 1 vůči ploše pod ní (WCAG 1.4.11). */
.btn--vedlejsi { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--mute); }
.btn--vedlejsi:hover { background: var(--paper-2); }
.unit--dark .btn--vedlejsi { background: transparent; color: var(--on-stage); box-shadow: inset 0 0 0 1px var(--on-stage-mute); }
.unit--dark .btn--vedlejsi:hover { background: var(--stage-2); }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--ink); }
.unit--dark .text-link { color: var(--on-stage-mute); }
.unit--dark .text-link:hover { color: var(--on-stage); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 8px; }
.specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: 14px; color: var(--mute); }
.unit--dark .specs { color: var(--on-stage-mute); }
.specs span { display: inline-flex; align-items: center; gap: 10px; }
.specs span + span::before { content: '·'; }

/* ---------- hlavička ---------- */
/* Hlavička patří ke scéně: stránka začíná tmavou jednotkou v obou režimech. Nad světlými
   jednotkami zůstává tmavá jako lišta. */
/* Nahoře je lišta plnou barvou scény a plynule přechází do úvodu – bez šedého pruhu, který
   vznikal průsvitnou lištou nad světlým pozadím stránky. Po odjetí (`is-odjeto`, site/lp.js)
   dostane jemný průhled a linku, aby se oddělila od obsahu pod sebou. Výška se nemění: změna
   výšky lepivé lišty posouvá obsah a přerušila by plynulý dojezd kolečka. */
.nav { position: sticky; top: 0; z-index: 50; background: var(--backdrop); border-bottom: 1px solid transparent; color: var(--on-stage); transition: background-color 240ms var(--ease), border-color 240ms var(--ease); }
.nav.is-odjeto { background: rgba(12, 11, 16, .9); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(244, 243, 247, .08); }
.nav-in { display: flex; align-items: center; gap: 32px; min-height: 72px; }
/* Odsazení nese logo, ne menu: na mobilu je menu skryté a tlačítko musí zůstat vpravo i tak. */
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-family: var(--f-display); font-size: 18px; font-weight: 500; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 28px; font-size: 14px; }
.nav-links a { color: var(--on-stage-mute); text-decoration: none; transition: color 180ms var(--ease); }
.nav-links a:hover { color: var(--on-stage); }
.nav-links a[aria-current="location"] { color: var(--on-stage); }
.nav-links a::after { content: ''; display: block; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(.16, 1, .3, 1); }
.nav-links a[aria-current="location"]::after { transform: scaleX(1); }
/* Přepínač jazyka: dvě písmena v kapsli. Aktivní jazyk jen jemně podložený – plná světlá
   kapsle patří výzvě ke stažení hned vedle a v liště má být jediná. Odkaz, ne tlačítko: každá
   jazyková verze má vlastní adresu (/ a /en), kterou jde sdílet i najít ve vyhledávači. */
/* Kapsli nese linka, ne výplň: neaktivní jazyk leží přímo na liště jako ostatní odkazy v ní,
   takže drží kontrast i tam, kde je pod průsvitnou lištou světlá stránka. Rozměry má jako malá
   segmentová volba v aplikaci (`.seg--sm`): rám 32 px, uvnitř kapsle 28 px. Linka je proto
   vnitřní stín, ne okraj – okraj by ubral z výšky a volba měla 26 px mimo stupnici. */
.lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px rgba(244, 243, 247, .14); }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 10px; border-radius: var(--r-full); font-size: 13px; line-height: 1.4; letter-spacing: .02em; text-align: center; color: var(--on-stage-mute); text-decoration: none; transition: background 180ms var(--ease), color 180ms var(--ease); }
.lang a:hover { color: var(--on-stage); }
.lang a[aria-current] { background: rgba(244, 243, 247, .16); color: var(--on-stage); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(64px, 7vw, 104px); }
/* Záře za obrazem produktu – z barev pruhu stavu, aby obraz ze scény vyrůstal. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(46% 30% at 50% 78%, rgba(201, 154, 62, .13), transparent 70%),
  radial-gradient(34% 26% at 78% 82%, rgba(34, 163, 140, .13), transparent 72%),
  radial-gradient(30% 24% at 22% 86%, rgba(124, 108, 240, .10), transparent 72%); }
/* Nadpis je po řádcích (každý řádek vyjede zpoza masky, viz „pohyb“). Druhý řádek hera je tišší. */
.radek { display: block; }
.hero h1 .radek--tichy { color: var(--on-stage-mute); }
.hero .lead { max-width: 46ch; }
.hero-figure { margin-top: clamp(48px, 5.5vw, 76px); display: grid; justify-items: center; gap: 28px; }
.hero-shot { width: min(100%, 1072px); filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .55)); }
.hero-shot img { width: 100%; height: auto; }
.detail-note { font-size: 13px; line-height: 1.5; color: var(--mute); text-align: center; }
.unit--dark .detail-note { color: var(--on-stage-mute); }

/* ---------- dlaždice ---------- */
/* Každá dlaždice má stejnou stavbu: nadpis, věta, výřez. Výřez sedí dole; vysoké výřezy
   (.tile--crop) spodní hrana dlaždice ořízne a prolnou se do ní, malé karty (.tile--fit)
   stojí celé. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 7vw, 88px); }
.tile { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; overflow: hidden; padding: clamp(44px, 4.6vw, 64px) clamp(24px, 3.4vw, 48px) 0; border-radius: var(--r-tile); background: var(--tile); }
.tile--wide { grid-column: 1 / -1; }
.tile h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.tile > p { max-width: 38ch; margin-top: 14px; font-size: 17px; line-height: 1.55; }
.tile-shot { display: flex; justify-content: center; width: 100%; margin: auto 0 0; padding-top: clamp(40px, 4.6vw, 56px); }
.tile-shot img { width: 100%; height: auto; }
/* Malá karta stojí uprostřed volné plochy – dlaždice v řadě jsou stejně vysoké a karta dole by
   nad sebou nechala díru. */
.tile--fit .tile-shot { flex: 1; align-items: center; margin: 0; padding-block: clamp(40px, 4.6vw, 56px); }
.tile--fit .tile-shot picture { width: min(100%, 448px); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)); }
.tile--crop .tile-shot { height: clamp(300px, 30vw, 380px); align-items: flex-start; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.tile--crop .tile-shot > :is(picture, img) { width: min(100%, 440px); }
.tile--wide .tile-shot > picture { width: min(100%, 960px); }
.tiles-unit > .wrap:last-child .detail-note { margin-top: 32px; }

/* ---------- propojení ---------- */
.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 7vw, 80px); }
.source-group { padding: 40px 32px 44px; border-radius: var(--r-tile); background: var(--card); text-align: center; }
.source-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; font-size: 22px; }
.tag { font-family: var(--f-body); font-size: 13px; letter-spacing: 0; color: var(--mute); }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.logos li { display: grid; justify-items: center; gap: 12px; font-size: 15px; }
.logos img { width: 40px; height: 40px; }
.note { margin-top: 28px; text-align: center; font-size: 14px; color: var(--mute); max-width: 64ch; }

/* ---------- soukromí ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 7vw, 80px); }
.facts article { padding: 40px; border-radius: var(--r-tile); background: var(--tile); }
.facts h3 { font-size: 22px; margin-bottom: 12px; }

/* ---------- stažení ---------- */
.unit-head .btn { margin-top: 8px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 7vw, 80px); padding: 0; list-style: none; }
.steps li { display: grid; align-content: start; gap: 8px; padding: 36px 32px 40px; border-radius: var(--r-tile); background: var(--card); }
.step-n { font-family: var(--f-display); font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--brass-ink); margin-bottom: 12px; }
.steps b { font-size: 18px; }
.steps p { color: var(--ink-2); font-size: 16px; }
.steps p b { font-size: inherit; }
.steps + .wrap { margin-top: 16px; }
/* Čtyři kroky (instalace na Macu) stojí dva a dva: ve čtyřech sloupcích by text kroků byl úzký. */
.steps--ctyri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Instalace jedním příkazem: kousek tmavé scény uprostřed světlé jednotky – Terminál je tmavý
   a příkaz se tak pozná na první pohled. Barvy scény jsou stejné ve světlém i tmavém režimu. */
.unit-head .text-link { margin-top: 4px; font-size: 15px; }
.prikaz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 16px; padding: 36px 32px; border-radius: var(--r-tile); background: var(--stage); border: 1px solid var(--stage-line); color: var(--on-stage); scroll-margin-top: 80px; }
.prikaz h3 { color: var(--on-stage); font-size: 22px; }
.prikaz p { max-width: 72ch; color: var(--on-stage-mute); }
.prikaz a { color: var(--on-stage); }
.prikaz :focus-visible { outline-color: #76E6CD; }
.prikaz-radek { display: flex; gap: 8px; margin-block: 6px 2px; }
/* Pole drží jeden řádek: delší příkaz se v něm posune do strany, stránka nikdy. Pravý okraj
   se do pole prolne, takže na telefonu je vidět, že příkaz pokračuje. */
.prikaz-pole { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 48px; overflow: hidden; border-radius: var(--r-full); background: var(--stage-2); border: 1px solid var(--stage-line); }
.prikaz-posun { flex: 1; min-width: 0; padding: 0 24px; line-height: 46px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; white-space: pre; border-radius: var(--r-full); color: var(--on-stage); font-size: 15px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.prikaz-posun::-webkit-scrollbar { display: none; }
.prikaz-posun:focus-visible { outline-offset: -4px; }
.prikaz-vyzva { color: #43D1B1; user-select: none; -webkit-user-select: none; }
.prikaz-kopie { flex: none; min-width: 128px; background: var(--on-stage); color: var(--backdrop); }
.prikaz-kopie:hover { background: #D9D5E0; }
.bez-zlomu { white-space: nowrap; }
.gatekeeper { display: grid; gap: 10px; padding: 32px; border-radius: var(--r-tile); background: var(--card); }
.gatekeeper p { color: var(--ink-2); }
.gatekeeper b { color: var(--ink); }

/* ---------- rozbalovací řádky ---------- */
/* Řádky oddělené linkou, ne krabice: jako seznam, ne jako formulář. */
.rows { display: grid; margin-top: 40px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-size: 18px; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; flex: none; font-size: 24px; line-height: 1; color: var(--mute); transition: transform 200ms var(--ease); }
details[open] > summary::after { transform: rotate(45deg); }
.detail-tag { margin-left: auto; padding: 4px 10px; border-radius: var(--r-full); background: var(--paper-2); font-size: 13px; color: var(--mute); white-space: nowrap; }
.unit--tint .detail-tag { background: var(--paper); }
.detail-body { display: grid; gap: 14px; padding: 0 4px 26px; }
.detail-body ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); }
.detail-body li { padding-left: 4px; }
.rows details > p { padding: 0 4px 26px; color: var(--ink-2); max-width: 64ch; }
#otazky .rows { margin-top: clamp(40px, 5vw, 64px); }
kbd { display: inline-block; padding: 1px 6px; border-radius: var(--r-full); background: var(--paper-2); border: 1px solid var(--line); }
.kopirovat { padding: 2px 8px; border-radius: var(--r-full); background: var(--paper-2); border: 1px solid var(--line); cursor: pointer; }
.kopirovat:hover { border-color: var(--mute); }

/* ---------- stránka Instalace ----------
   Stejné jednotky jako úvodní stránka. Pod nadpisem platformy stojí odkaz zpět na výzvu
   ke stažení; poznámky pod kroky jsou plochy jako `.gatekeeper`. */
.unit-head .cta-row .btn { margin-top: 0; }
.instalace-dalsi { display: grid; gap: 16px; }
/* Karta hned pod úvodem sekce má stejný odstup jako kroky (.steps), ne nulový. */
.unit-head + .instalace-dalsi { margin-top: clamp(56px, 7vw, 80px); }
.instalace-dalsi .gatekeeper a:not(.btn) { color: var(--ink); }
/* Rozšíření z Chrome Web Store: jedno tlačítko do obchodu a pod ním jeden řádek. */
.rozsireni-akce { margin: 0 0 12px; }
.rozsireni-kroky { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: var(--ink-2); }
.rozsireni-kroky li { padding-left: 4px; }

/* ---------- patička ---------- */
/* ---------- textové stránky (zásady ochrany soukromí) ----------
   Levý okraj textu lícuje s logem v liště (stejná .wrap), délka řádku zůstává čitelná. */
.doc { padding-block: clamp(56px, 8vw, 104px); }
.doc-body { max-width: 72ch; }
.doc-body h1 { font-size: clamp(40px, 5vw, 64px); margin: 12px 0 24px; }
.doc-lead { margin: 0; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--ink-2); }
.doc-body h2 { margin: 48px 0 12px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.doc-body p { margin: 0 0 12px; color: var(--ink-2); }
.doc-body ul { display: grid; gap: 10px; margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); }
.doc-body a { color: var(--ink); }
.doc-page .lang { margin-left: auto; }

footer { padding-block: 40px 56px; background: var(--paper-2); border-top: 1px solid var(--line); font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot-in > p { color: var(--mute); }
.foot-in .text-link { margin-left: auto; }
.foot-note { flex-basis: 100%; font-size: 13px; line-height: 1.6; color: var(--mute); max-width: 82ch; }

/* ---------- užší obrazovky ---------- */
@media (max-width: 900px) {
  /* Dvě dlaždice vedle sebe by na tabletu zmenšily karty pod čitelnost. */
  .tiles { grid-template-columns: minmax(0, 1fr); }
  /* Seznam agentů z telefonního rozvržení – tabulka z Macu by se zmenšila pod čitelnost. */
  .tile--wide .tile-shot > picture { width: min(100%, 440px); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .facts, .sources { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 32px); }
  .nav-links { display: none; }
  .nav-in { gap: 10px; min-height: 64px; }
  section[id] { scroll-margin-top: 64px; }
  .brand { font-size: 17px; }
  .btn--lg { padding: 8px 26px; font-size: 16px; }
  /* Telefon: dlaždice pod sebou, výřezy z telefonního rozvržení v přirozené velikosti. */
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tile { padding: 40px 20px 0; border-radius: var(--r-lg); }
  .tile > p { font-size: 16px; }
  .tile--fit .tile-shot { padding-bottom: 40px; }
  .tile--crop .tile-shot { height: 320px; }
  .hero-shot { width: min(100%, 420px); }
  .specs { font-size: 13px; gap: 6px 8px; }
  .specs span { gap: 8px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-group, .facts article, .steps li, .gatekeeper, .prikaz { padding: 28px 22px 32px; border-radius: var(--r-lg); }
  /* Na telefonu má příkaz celou šířku a tlačítko jde pod něj, kde se na něj pohodlně trefí palec. */
  .prikaz-radek { flex-direction: column; }
  .prikaz-posun { padding-inline: 20px; font-size: 14px; }
  summary { font-size: 17px; padding: 20px 2px; }
}
@media (max-width: 420px) {
  /* Logo, přepínač jazyka a výzva se musí vejít vedle sebe i na 360 px. */
  .nav-cta-extra { display: none; }
}

/* ---------- pohyb ----------
   Stejný jazyk jako aplikace (public/styles.css, „Nástup obrazovky“): věci vyjíždějí po sobě
   s krátkým odstupem, obraz se odkryje jako měřidlo a čísla vyjedou do okének jako na počítadle.
   Nic neběží dokola. Hero se rozsvítí po načtení; ostatní celky přijdou až po vstupu do čitelné
   části okna. Observer pouze spustí konečný přechod, nikdy neřídí jeho každý snímek. */
@media (prefers-reduced-motion: no-preference) {
  /* Maska řádku ořezává jen nahoře a dole (clip-path, ne overflow – overflow by z řádku udělal
     posuvný kontejner). Dole rezerva pro ocásky písmen, nahoře pro háčky a čárky. */
  .radek { clip-path: inset(-.12em -1em -.2em -1em); }
  .radek > span { display: inline-block; }
  .radek:nth-of-type(2) { --r: 1; }
  .radek:nth-of-type(3) { --r: 2; }

  /* Hero: řádky nadpisu po sobě (rytmus 90 ms), pak věta, výzva a údaje. */
  .hero .unit-head > :not(h1) { animation: prichod .7s var(--ease) both; }
  .hero h1 .radek > span { animation: vyjed .95s var(--ease) both; animation-delay: calc(.08s + var(--r, 0) * .09s); }
  .hero .unit-head > .lead { animation-delay: .3s; }
  .hero .unit-head > .cta-row { animation-delay: .38s; }
  .hero .unit-head > .specs { animation-delay: .46s; }
  /* Výřez aplikace se odkryje zleva doprava jako měřidlo v aplikaci a dosedne. Po doběhu se
     ořez sundá (fill backwards), aby stín pod výřezem zůstal celý. */
  .hero-shot { animation: odkryj 1.25s var(--ease) .5s backwards; }
  .hero-figure .detail-note { animation: prichod .7s var(--ease) 1.1s both; }
  details[open] > .detail-body, .rows details[open] > p { animation: prichod .24s var(--ease) both; }
  @keyframes prichod { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes vyjed { from { transform: translateY(108%); } to { transform: none; } }
  @keyframes odkryj { from { clip-path: inset(0 100% 0 0 round 24px); transform: translateY(24px); } to { clip-path: inset(-120px -160px -200px -160px round 0); transform: none; } }

  /* Nástup začíná až v čitelné části okna. Jedna sekvence na prvek,
     pouze transform a opacity; žádný pohyb svázaný s každým krokem kolečka. */
  .unit:not(.hero) .unit-head.motion-entered,
  .tile.motion-entered, .source-group.motion-entered, .facts article.motion-entered, .steps li.motion-entered, .prikaz.motion-entered {
    transition: opacity 680ms var(--ease), transform 840ms cubic-bezier(.16, 1, .3, 1);
  }
  .motion-pending { opacity: 0; transform: translateY(38px); }
  .unit:not(.hero) .unit-head.motion-pending { transform: translateY(28px); }
  .motion-entered { opacity: 1; transform: none; }
  .tile.motion-entered .tile-shot > :is(picture, img) {
    transition: opacity 800ms var(--ease) 110ms, transform 1050ms cubic-bezier(.16, 1, .3, 1) 110ms;
  }
  .tile.motion-pending .tile-shot > :is(picture, img) { opacity: 0; transform: translateY(30px) scale(.98); }
  .source-group.motion-entered .logos li { transition: opacity 500ms var(--ease), transform 650ms cubic-bezier(.16, 1, .3, 1); }
  .source-group.motion-pending .logos li { opacity: 0; transform: translateY(12px); }
  .source-group .logos li:nth-child(2) { transition-delay: 60ms; }
  .source-group .logos li:nth-child(3) { transition-delay: 120ms; }
  .source-group .logos li:nth-child(4) { transition-delay: 180ms; }
  .steps li.motion-entered .odo-s { animation: odo-roll 750ms cubic-bezier(.16, 1, .3, 1) both; }
  @media (hover: hover) and (pointer: fine) {
    .tile.motion-entered:hover .tile-shot > :is(picture, img) { transform: translateY(-6px) scale(1.012); }
  }

}
/* Okénko počítadla (stejné jako v aplikaci): šířku drží konečná číslice, váleček s číslicemi
   v něm vyjede nahoru. Ořez jen nahoře a dole, aby široká nula neprosvítala úzkým okénkem. */
.odo { display: inline-block; position: relative; clip-path: inset(0 -.2em); }
.odo-f { visibility: hidden; }
.odo-s { position: absolute; inset: 0 0 auto; text-align: center; }
.odo-s > span { display: block; }
@keyframes odo-roll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100% / var(--n))); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .odo-s { transform: translateY(calc(-100% + 100% / var(--n))); }
}