/* ===== fonts.css ===== */
/* Lokální písma (bývalé @fontsource balíčky): Archivo Variable (display), DM Sans Variable (body), IBM Plex Mono 500/600. */
@font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(../fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'DM Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 1000; src: url(../fonts/dm-sans-latin-ext-opsz-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'DM Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 1000; src: url(../fonts/dm-sans-latin-opsz-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ===== tokens.css ===== */
/* =====================================================================
   anyCore — design tokeny
   Zdroj: export z Claude Design (docs/web/*.dc.html) + docs/web/uploads/02-design-system.md
   Pravidlo: nové hodnoty sem, ne do komponent. Komponenty používají jen var(--…).
   ===================================================================== */

:root {
  color-scheme: light;

  /* --- Barvy: pevné (identita) ------------------------------------- */
  --color-dark: #1a2535;            /* tmavé sekce, hlavička, patička, text */
  --color-dark-alt: #121b27;        /* druhá tmavá plocha (patička, karty na tmavém) */
  --color-accent: #3ee8c0;          /* VÝHRADNĚ konverzní akce a signální prvky */
  --color-accent-hover: #2fcfa9;
  --color-accent-text: #0f7a63;     /* jediná „akcentová“ barva textu povolená na světlém pozadí (4,9 : 1) */

  /* --- Barvy: světlé plochy ---------------------------------------- */
  --color-bg: #ffffff;
  --color-bg-muted: #f2f4f6;
  --color-border: #dce1e7;
  --color-border-strong: #a9b4c0;
  --color-rail: #e4e8ec;            /* pozadí progress/timeline lišt na světlém */

  /* --- Barvy: text na světlém --------------------------------------- */
  --color-text: #1a2535;
  --color-text-body: #3a4757;       /* delší odstavce */
  --color-text-muted: #5a6878;      /* sekundární text, popisky */
  --color-text-faint: #8fa0b4;      /* terciární text, kóty */

  /* --- Barvy: text a linky na tmavém -------------------------------- */
  --color-text-invert: #ffffff;
  --color-text-invert-soft: #e5eaf0;   /* položky navigace */
  --color-text-invert-muted: #c3cdda;  /* odstavce na tmavém */
  --color-text-invert-faint: #8fa0b4;  /* eyebrows na tmavém */
  --color-line-dark: #4b5a6e;          /* kóty a linky na tmavém */
  --color-line-dark-2: #3b4a5d;        /* rámečky uzlů ve schématech */
  --color-border-invert: rgba(255, 255, 255, 0.16);
  --color-border-invert-soft: rgba(255, 255, 255, 0.1);
  --color-border-invert-strong: rgba(255, 255, 255, 0.3);
  --color-hover-invert: rgba(255, 255, 255, 0.08);

  /* --- Barvy: signální --------------------------------------------- */
  --color-warning: #c87a00;         /* ohrožené termíny, upozornění (na světlém) */
  --color-warning-bg: #fff8ee;
  --color-warning-text: #8a5400;
  --color-danger: #c0392b;

  /* --- Odvozené plochy --------------------------------------------- */
  --color-header-bg: rgba(26, 37, 53, 0.92);
  --color-header-bg-scrolled: rgba(18, 27, 39, 0.86);
  --color-overlay: rgba(9, 14, 20, 0.88);
  --color-placeholder-light: repeating-linear-gradient(135deg, #edf0f3 0 9px, #f6f8f9 9px 18px);
  --color-placeholder-dark: repeating-linear-gradient(135deg, #16202d 0 9px, #1b2735 9px 18px);

  /* --- Typografie ---------------------------------------------------- */
  --font-body: 'DM Sans Variable', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo Variable', 'Archivo', 'DM Sans Variable', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --display-stretch: 112%;          /* Archivo wdth osa — pevné pro všechny nadpisy */
  --display-tracking: -0.02em;
  --display-leading: 1.05;

  /* Škála — názvy podle 02-design-system.md */
  --text-display-xl: clamp(38px, 5.4vw, 70px);   /* H1 hero homepage */
  --text-display-l: clamp(34px, 4.6vw, 60px);    /* H1 podstránek */
  --text-display-m: clamp(30px, 3.6vw, 46px);    /* H2 sekcí na homepage */
  --text-display-m-sub: clamp(26px, 2.8vw, 38px);/* H2 sekcí na podstránkách */
  --text-display-s: clamp(20px, 1.8vw, 24px);    /* H3, nadpisy karet */
  --text-display-xs: 19px;                        /* H3 menších karet, otázky FAQ */
  --text-subhead: clamp(19px, 1.9vw, 26px);      /* podtitul pod H1 (modulové stránky) */
  --text-quote: clamp(19px, 1.8vw, 23px);        /* citace */
  --text-number: clamp(64px, 8.5vw, 128px);      /* velká čísla (cena) */

  --text-body-l: clamp(17px, 1.5vw, 20px);       /* perex, úvodní odstavce */
  --text-body-l-fixed: 17px;
  --text-body-m: 16px;                            /* základní text */
  --text-body-s: 15px;                            /* navigace, položky seznamů */
  --text-body-xs: 14px;                           /* popisky, poznámky pod formuláři */
  --text-article: 18px;                           /* tělo článku */

  --text-mono-m: 14px;                            /* telefon, tabulková data */
  --text-mono-s: 12px;                            /* štítky, odznaky */
  --text-mono-xs: 11px;                           /* eyebrows, kóty */
  --text-mono-2xs: 10px;                          /* drobné kóty, patička výkresu */
  --mono-tracking: 0.14em;                        /* eyebrows */
  --mono-tracking-s: 0.1em;
  --mono-tracking-xs: 0.06em;

  --leading-body: 1.6;
  --leading-body-loose: 1.7;
  --leading-tight: 1.1;

  /* --- Layout -------------------------------------------------------- */
  --container-max: 1360px;
  --container-narrow: 1240px;       /* /demo, /pruvodce-vyberem */
  --container-text: 700px;          /* tělo článku */
  --container-text-wide: 900px;     /* FAQ, TOC + článek */
  --gutter: clamp(20px, 4vw, 44px);
  --gutter-narrow: clamp(20px, 4vw, 40px);

  --section-pad: clamp(56px, 7vw, 96px);        /* homepage */
  --section-pad-sub: clamp(48px, 6vw, 88px);    /* podstránky */
  --section-pad-s: clamp(40px, 5vw, 64px);      /* pás důvěry, SensorX, závěrečné CTA */
  --section-gap: clamp(32px, 4vw, 56px);        /* nadpis → obsah sekce */
  --split-gap: clamp(28px, 4vw, 64px);          /* mezera dvou sloupců */
  --card-pad: clamp(22px, 2.4vw, 30px);
  --card-pad-l: clamp(24px, 3vw, 36px);

  --header-h: 72px;
  --header-h-scrolled: 58px;
  --sticky-bar-h: 72px;                          /* 52px tlačítko + 2×10px */

  /* --- Tvary a povrchy ---------------------------------------------- */
  --radius-card: 16px;              /* PEVNÉ */
  --radius-card-l: 18px;
  --radius-card-s: 14px;
  --radius-panel: 12px;
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-badge: 6px;
  --radius-chip: 999px;
  --radius-tile: 10px;
  --radius-bar: 2px;

  --shadow-raised: 0 12px 26px -14px rgba(0, 0, 0, 0.55);        /* hover tlačítek, dropdowny */
  --shadow-card: 0 30px 60px -40px rgba(26, 37, 53, 0.45);        /* screenshoty */
  --shadow-header: 0 12px 32px -20px rgba(0, 0, 0, 0.9);
  --ring-accent: 0 0 0 6px rgba(62, 232, 192, 0.08);             /* halo fotky v konverzním bloku */

  /* --- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 0.2s;
  --dur: 0.25s;
  --dur-slow: 0.35s;
  --dur-rise: 0.7s;

  /* --- Z-index ------------------------------------------------------- */
  --z-header: 60;
  --z-sticky-bar: 70;
  --z-menu: 80;
  --z-lightbox: 90;
}

/* ===== base.css ===== */
/* =====================================================================
   anyCore — základní styly (reset, typografie, odkazy, focus, motion)
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

/* Pod mobilní sticky lištou nesmí zůstat schovaný obsah ani patička (CC-04 bod 12) */
@media (max-width: 1023px) {
  body.has-sticky-bar {
    padding-bottom: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px));
  }
}

body.is-locked {
  overflow: hidden;
}

/* --- Nadpisy ----------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  font-weight: 700;
  text-wrap: balance;
}

h3,
h4 {
  font-weight: 600;
  line-height: var(--leading-tight);
}

p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

/* --- Odkazy ------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
  transition: color var(--dur) ease, text-decoration-color var(--dur) ease;
}

a:hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}

/* --- Formuláře a tlačítka ------------------------------------------------ */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* --- Obrázky ------------------------------------------------------------- */
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Focus: viditelný všude, nikdy outline:none bez náhrady ---------------
   Design používá akcent 2px. Na světlém pozadí má 1,5 : 1, proto dvoubarevný
   ring (akcent + tmavý obrys), který drží ≥ 3 : 1 na bílé i na tmavé (CC-06 §6). */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-dark);
  border-radius: 2px;
}

/* Na tmavých plochách tmavý obrys splyne s pozadím — tam stačí akcent. */
.on-dark :focus-visible {
  box-shadow: none;
}

/* --- Details/summary (FAQ, mobilní menu) --------------------------------- */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: '';
}

/* --- Skip link -------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: 600;
  border-radius: var(--radius-button);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) ease;
}

.skip-link:focus {
  transform: none;
}

/* --- Keyframes (jen ty, které jsou v exportu z Designu) ------------------- */
@keyframes om-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes om-wipe {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes om-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes om-dash {
  to {
    stroke-dashoffset: -32;
  }
}

@keyframes om-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(56px, 56px);
  }
}

@keyframes om-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* Prvky s [data-anim] startují až ve viewportu (IntersectionObserver). */
[data-anim] {
  animation-play-state: paused;
}

/* --- Reduced motion: vypnout vše, obsah musí být okamžitě vidět ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ===== utilities.css ===== */
/* =====================================================================
   anyCore — sdílené třídy (kontejner, sekce, tlačítka, eyebrow, odkazy)
   Hodnoty vždy přes tokeny z tokens.css.
   ===================================================================== */

/* --- Kontejner ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
  padding-inline: var(--gutter-narrow);
}

.container--text {
  max-width: var(--container-text);
}

/* --- Sekce ------------------------------------------------------------------ */
.section {
  padding-block: var(--section-pad);
}

.section--sub {
  padding-block: var(--section-pad-sub);
}

.section--s {
  padding-block: var(--section-pad-s);
}

.section--light {
  background: var(--color-bg);
}

.section--muted {
  background: var(--color-bg-muted);
}

.section--dark,
.section--dark-alt {
  color: var(--color-text-invert);
}

.section--dark {
  background: var(--color-dark);
}

.section--dark-alt {
  background: var(--color-dark-alt);
}

.section--bordered {
  border-top: 1px solid var(--color-border);
}

/* --- Dvousloupcový split (láme se na 900 px jako v Designu) ---------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--split-gap);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr !important;
  }
}

/* --- Viditelnost podle breakpointu ----------------------------------------- */
@media (max-width: 1023px) {
  .only-desktop {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .only-mobile {
    display: none !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Eyebrow / kóta (mono, verzálky) ------------------------------------------
   Akcent sem nepatří (02-design-system). Čárky jsou neutrální. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-xs);
  line-height: 1;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.on-dark .eyebrow,
.eyebrow--invert {
  color: var(--color-text-invert-faint);
}

.eyebrow--ticks::before {
  content: '';
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.6;
}

.eyebrow--ticks::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  order: -1;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--mono-tracking-xs);
}

/* --- Tlačítka ----------------------------------------------------------------
   Hierarchie (02-design-system): primární plocha akcent / sekundární obrys /
   textový odkaz se šipkou / tichý. Na jedné obrazovce nikdy dvě primární. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur) ease,
    color var(--dur) ease,
    border-color var(--dur) ease,
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}

.btn:active {
  transform: none;
  box-shadow: none;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-dark);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-dark);
}

.btn--dark {
  background: var(--color-dark);
  color: var(--color-text-invert);
}

.btn--dark:hover {
  background: var(--color-dark-alt);
  color: var(--color-text-invert);
}

.btn--secondary {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn--secondary:hover {
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.on-dark .btn--secondary {
  color: var(--color-text-invert);
  border-color: var(--color-border-invert-strong);
}

.on-dark .btn--secondary:hover {
  color: var(--color-text-invert);
  border-color: var(--color-accent);
}

/* Velikosti */
.btn--s {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
}

.btn--m {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
}

.btn--block {
  width: 100%;
}

/* Načítání */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-color: var(--color-dark) transparent var(--color-dark) transparent;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

.btn--dark.is-loading::after,
.btn--secondary.is-loading::after {
  border-color: var(--color-text-invert) transparent var(--color-text-invert) transparent;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Textový odkaz se šipkou (data-u v Designu) ---------------------------- */
.link-arrow {
  display: inline-block;
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  /* Hover: silnější linka v barvě textu akcentu se „vykreslí“ zleva přes šedou linku.
     Nic se neposouvá — rozměry odkazu zůstávají stejné (Design měnil padding, což hýbalo stránkou). */
  background-image: linear-gradient(var(--color-accent-text), var(--color-accent-text));
  background-repeat: no-repeat;
  background-position: 0 calc(100% + 1px);
  background-size: 0 2px;
  transition:
    color var(--dur) ease,
    border-color var(--dur) ease,
    background-size var(--dur-slow) var(--ease-out);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--color-accent-text);
  border-color: transparent;
  background-size: 100% 2px;
}

.link-arrow--quiet {
  font-weight: 400;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.on-dark .link-arrow {
  color: var(--color-text-invert-muted);
  border-color: rgba(255, 255, 255, 0.28);
}

.on-dark .link-arrow {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
}

.on-dark .link-arrow:hover,
.on-dark .link-arrow:focus-visible {
  color: var(--color-accent);
  border-color: transparent;
}

/* --- Inline odkaz v textu (data-l v Designu: podtržení se vykreslí) ---------- */
.link-grow {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition:
    background-size var(--dur-slow) var(--ease-out),
    color var(--dur) ease;
}

.link-grow:hover {
  background-size: 100% 1px;
}

/* --- Odznak (hero, demo) ------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-badge);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-s);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.on-dark .badge {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--color-text-invert-muted);
}

.badge--accent,
.on-dark .badge--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark);
  font-weight: 600;
}

/* --- Placeholder [DOPLNIT] — viditelný, nikdy vymyšlený text (CC-03 §4) ----- */
.doplnit {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--color-warning);
  border-radius: 4px;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

.on-dark .doplnit {
  background: rgba(200, 122, 0, 0.12);
  color: #f2b23e;
  border-color: #f2b23e;
}

/* --- Karta -------------------------------------------------------------------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.on-dark .card,
.card--dark {
  background: var(--color-dark-alt);
  border-color: var(--color-border-invert);
  color: var(--color-text-invert);
}

/* --- Rozestupy ---------------------------------------------------------------- */
.stack > * + * {
  margin-top: var(--stack-gap, 16px);
}

.flow > * + * {
  margin-top: 1em;
}

/* ===== components/base-layout.css ===== */
/* z src/layouts/Base.astro */
main:focus {
  outline: none;
}

/* ===== components/components-blog-autor.css ===== */
/* z src/components/blog/Autor.astro */
.autor {
  display: flex;
  align-items: center;
  gap: 14px;
}

.autor__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.autor__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 22%;
}

.autor__logo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: var(--color-dark);
}

.autor__label {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.autor__name {
  margin-top: 4px;
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--color-text-invert);
}

.autor__role {
  margin-left: 0.3em;
  font-weight: 400;
  color: var(--color-text-invert-muted);
}

.autor__date {
  margin-top: 4px;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-xs);
  color: var(--color-text-invert-faint);
}

/* ===== components/components-blog-doplnit.css ===== */
/* z src/components/blog/Doplnit.astro */
.doplnit-blok {
  display: block;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--radius-tile);
  font-size: 13px;
  line-height: 1.7;
}

/* ===== components/components-blog-inlinecta.css ===== */
/* z src/components/blog/InlineCta.astro */
.icta {
  margin-top: clamp(30px, 3.4vw, 44px);
  background: var(--color-dark);
  color: var(--color-text-invert);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 34px);
}

.icta__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
  color: var(--color-text-invert);
  max-width: 26ch;
}

.icta__text {
  margin-top: 12px;
  font-size: var(--text-body-m);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
  max-width: 52ch;
}

.icta .btn {
  margin-top: 22px;
}

/* ===== components/components-blog-kartaclanku.css ===== */
/* z src/components/blog/KartaClanku.astro */
.kc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-card-l);
  padding: clamp(22px, 2.8vw, 34px);
  color: var(--color-text);
  text-decoration: none;
  animation: om-rise 0.6s ease-out both;
  transition:
    background var(--dur) ease,
    transform var(--dur-slow) var(--ease-out);
}

.kc:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
  transform: translateY(-3px);
}

.kc--mala {
  border-color: var(--color-border);
  border-radius: var(--radius-card-s);
  padding: clamp(20px, 2.2vw, 26px);
}

.kc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-size: var(--text-mono-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kc__time {
  color: var(--color-text-faint);
}

.kc__title {
  margin-top: 16px;
  font-size: clamp(22px, 2.2vw, 28px);
  max-width: 24ch;
}

.kc--mala .kc__title {
  font-size: var(--text-display-xs);
  font-weight: 600;
  flex: 1;
}

.kc__lead {
  margin-top: 14px;
  font-size: var(--text-body-m);
  line-height: 1.65;
  color: var(--color-text-muted);
  flex: 1;
}

.kc__more {
  margin-top: 20px;
  align-self: flex-start;
  font-size: var(--text-body-m);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  transition: border-color var(--dur) ease;
}

.kc:hover .kc__more {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}

/* ===== components/components-blog-obsah.css ===== */
/* z src/components/blog/Obsah.astro */
.toc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-s);
  padding: clamp(18px, 2vw, 24px);
  animation: om-rise 0.6s ease-out both;
}

.toc__list {
  margin: 14px 0 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 8px;
  font-size: var(--text-body-m);
  line-height: 1.5;
}

.toc__link {
  color: var(--color-text-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur) ease,
    border-color var(--dur) ease;
}

.toc__link:hover {
  color: var(--color-accent-text);
  border-color: var(--color-accent-text);
}

.toc__link.is-active {
  color: var(--color-text);
  font-weight: 600;
  border-color: var(--color-dark);
}

/* ===== components/components-blueprint.css ===== */
/* z src/components/Blueprint.astro */
.bp {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  overflow: hidden;
}

.bp__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: om-drift 26s linear infinite;
}

.bp__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bp__line {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: om-draw 2.4s ease-out forwards;
}

.bp__line--1 {
  stroke: rgba(62, 232, 192, 0.22);
  animation-delay: 0.2s;
}

.bp__line--2 {
  stroke: rgba(255, 255, 255, 0.1);
  animation-delay: 0.5s;
}

/* ===== components/components-cookielista.css ===== */
/* z src/components/CookieLista.astro */
.ck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-sticky-bar) + 5);
  background: var(--color-dark-alt);
  color: var(--color-text-invert-muted);
  border-top: 1px solid var(--color-border-invert);
  box-shadow: 0 -12px 32px -20px rgba(0, 0, 0, 0.9);
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px));
}

.ck[hidden] {
  display: none;
}

.ck__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 32px;
  align-items: center;
}

@media (max-width: 900px) {
  .ck__inner {
    grid-template-columns: 1fr;
  }
}

.ck__title {
  font-weight: 600;
  color: var(--color-text-invert);
}

.ck__desc {
  margin-top: 4px;
  font-size: var(--text-body-xs);
  line-height: 1.5;
  max-width: 72ch;
}

.ck__desc a {
  color: var(--color-text-invert);
}

.ck__nastaveni {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding-top: 6px;
  font-size: var(--text-body-xs);
  line-height: 1.5;
}

.ck__nastaveni[hidden] {
  display: none;
}

.ck__kat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.ck__kat input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--color-accent);
  flex: none;
}

.ck__kat strong {
  color: var(--color-text-invert);
}

.ck__akce {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ck__akce [hidden] {
  display: none;
}

@media (max-width: 480px) {
  .ck__akce .btn {
    flex: 1 1 auto;
  }
}

/* ===== components/components-faq.css ===== */
/* z src/components/Faq.astro */
.faq__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--split-gap);
  align-items: start;
}

@media (max-width: 900px) {
  .faq__grid {
    grid-template-columns: 1fr;
  }
}

.faq__head {
  position: sticky;
  top: calc(var(--header-h-scrolled) + 42px);
}

@media (max-width: 900px) {
  .faq__head {
    position: static;
  }
}

.faq__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
}

.faq__kota {
  margin-top: 22px;
}

.faq__list {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__q {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  min-height: 44px;
  font-size: var(--text-display-xs);
  font-weight: 600;
  line-height: 1.35;
}

.faq__q-text {
  flex: 1;
}

.faq__plus {
  flex: none;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform var(--dur-fast);
}

.faq__item[open] .faq__plus {
  transform: rotate(45deg);
}

.faq__a {
  padding: 0 0 24px;
  font-size: var(--text-body-m);
  line-height: var(--leading-body-loose);
  color: var(--color-text-muted);
  max-width: 72ch;
}

.faq__a p + p {
  margin-top: 0.8em;
}

.faq__a a {
  color: var(--color-text);
  font-weight: 500;
}

/* ===== components/components-formular.css ===== */
/* z src/components/Formular.astro */
.formular__past {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__pole {
  display: grid;
  gap: 16px;
}

.formular__pole--mrizka {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
  .formular__pole--mrizka {
    grid-template-columns: 1fr;
  }
}

.pole--cele {
  grid-column: 1 / -1;
}

.pole__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-mono-xs);
  line-height: 1.4;
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.formular--tmavy .pole__label {
  color: var(--color-text-invert-faint);
}

.pole__nepovinne {
  margin-left: 6px;
  color: var(--color-border-strong);
  text-transform: none;
  letter-spacing: 0.02em;
}

.pole__input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  transition: border-color var(--dur-fast) ease;
}

textarea.pole__input {
  padding: 14px;
  resize: vertical;
  line-height: 1.5;
}

.pole__input:focus {
  outline: none;
  border-color: var(--color-dark);
}

.pole__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-dark);
}

.formular--tmavy .pole__input {
  background: var(--color-dark);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--color-text-invert);
}

.formular--tmavy .pole__input:focus {
  border-color: var(--color-accent);
}

.formular--tmavy .pole__input:focus-visible {
  box-shadow: none;
}

.pole--chyba .pole__input,
.pole__input[aria-invalid='true'] {
  border-color: var(--color-danger);
}

.pole__chyba {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--text-body-xs);
  line-height: 1.5;
  color: var(--color-danger);
}

.pole__chyba::before {
  content: '!';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}

.pole__chyba[hidden] {
  display: none;
}

.formular--tmavy .pole__chyba {
  color: #f2b23e;
}

.formular__chyba {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-button);
  background: #fff5f3;
  color: var(--color-danger);
  font-size: var(--text-body-s);
  line-height: 1.5;
}

.formular--tmavy .formular__chyba {
  background: rgba(192, 57, 43, 0.14);
  color: #ffb4a8;
}

.formular__chyba[hidden] {
  display: none;
}

.formular__akce {
  margin-top: 22px;
}

.formular__akce .btn {
  min-height: 56px;
}

.formular__poznamka {
  margin-top: 14px;
  font-size: var(--text-body-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.formular--tmavy .formular__poznamka {
  color: var(--color-text-invert-faint);
}

.formular__poznamka a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .formular__akce .btn {
    width: 100%;
  }
}

/* ===== components/components-hlavicka.css ===== */
/* z src/components/Hlavicka.astro */
/* --- Lišta ---------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-invert-soft);
  transition:
    background 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
}

.hdr.is-scrolled {
  background: var(--color-header-bg-scrolled);
  box-shadow: var(--shadow-header);
  border-color: rgba(62, 232, 192, 0.22);
}

.hdr__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
  transition: height 0.3s var(--ease-out);
}

.hdr.is-scrolled .hdr__inner {
  height: var(--header-h-scrolled);
}

.hdr__logo {
  display: flex;
  align-items: center;
  flex: none;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: var(--radius-button);
  text-decoration: none;
}

.hdr__logo img {
  height: 26px;
  width: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}

.hdr__logo:hover img {
  transform: translateY(-1px) scale(1.03);
}

/* --- Desktop navigace ------------------------------------------------------- */
.hdr__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.hdr__item {
  position: relative;
}

.hdr__item--mega {
  position: static;
}

.hdr__link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  min-height: 44px;
  color: var(--color-text-invert-soft);
  font-size: var(--text-body-s);
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  transition:
    background var(--dur) ease,
    color var(--dur) ease;
}

.hdr__link:hover,
.hdr__link[aria-expanded='true'] {
  background: var(--color-hover-invert);
  color: var(--color-text-invert);
}

.hdr__link.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-invert);
}

.hdr__chevron {
  transition: transform var(--dur) var(--ease-out);
  opacity: 0.7;
}

.hdr__link[aria-expanded='true'] .hdr__chevron {
  transform: rotate(180deg);
}

/* --- Panely (dropdown + mega) ---------------------------------------------- */
.panel {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 1;
  background: var(--color-dark-alt);
  border: 1px solid var(--color-border-invert);
  box-shadow: var(--shadow-raised);
  color: var(--color-text-invert);
  animation: om-rise 0.25s var(--ease-out) both;
}

.panel--dropdown {
  left: 0;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  border-radius: var(--radius-panel);
  padding: 10px;
}

.panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.panel__card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-button);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) ease;
}

.panel__card:hover {
  background: var(--color-hover-invert);
  color: inherit;
}

.panel__card-title {
  font-weight: 600;
  font-size: var(--text-body-s);
  color: var(--color-text-invert);
}

.panel__card-desc {
  font-size: var(--text-body-xs);
  line-height: 1.5;
  color: var(--color-text-invert-faint);
}

.panel--mega {
  left: 0;
  right: 0;
  top: 100%;
  border-left: 0;
  border-right: 0;
  border-top-color: var(--color-border-invert-soft);
}

.panel__mega-inner {
  padding-block: 28px 20px;
}

.panel__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.panel__col-title {
  display: inline-flex;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border-invert);
  width: 100%;
  text-decoration: none;
  transition: color var(--dur) ease;
}

.panel__col-title:hover {
  color: var(--color-text-invert);
}

.panel__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.panel__link {
  display: block;
  padding: 9px 10px;
  margin-left: -10px;
  border-radius: 6px;
  font-size: var(--text-body-s);
  color: var(--color-text-invert-soft);
  text-decoration: none;
  transition:
    background var(--dur) ease,
    color var(--dur) ease;
}

.panel__link:hover {
  background: var(--color-hover-invert);
  color: var(--color-text-invert);
}

.panel__foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-invert);
}

.panel--dropdown .panel__foot {
  margin: 10px 4px 4px;
  padding-top: 14px;
}

/* --- Pravá část ------------------------------------------------------------- */
.hdr__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hdr__phone {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-m);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-invert-soft);
}

.hdr__phone:hover {
  color: var(--color-text-invert);
}

.hdr__burger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-button);
}

.hdr__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-text-invert);
}

/* Šest položek menu + telefon + CTA se mezi 1024 a 1199 px nevejdou (Blog v menu, 2026-10-08):
   telefon se schová (je v mobilním menu i v patičce), mezery se zúží. */
@media (max-width: 1199px) {
  .hdr__phone {
    display: none;
  }

  .hdr__right {
    gap: 12px;
  }

  .hdr__link {
    padding-inline: 10px;
  }
}

@media (max-width: 420px) {
  .hdr__cta {
    display: none;
  }
}

/* --- Progress lišta --------------------------------------------------------- */
.hdr__rail {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.hdr__progress {
  height: 2px;
  width: 0%;
  background: var(--color-accent);
  transform-origin: left;
}

/* --- Mobilní menu ------------------------------------------------------------ */
.mnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-dark);
  color: var(--color-text-invert);
  padding: 20px clamp(20px, 5vw, 32px) 28px;
}

.mnav[hidden] {
  display: none;
}

.mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}

.mnav__top img {
  height: 26px;
  width: auto;
}

.mnav__close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-button);
  color: var(--color-text-invert);
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
}

.mnav__nav {
  margin-top: 28px;
  display: grid;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-invert);
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: var(--display-tracking);
  text-decoration: none;
}

.mnav__group[open] .mnav__summary {
  border-bottom-color: transparent;
}

.mnav__plus {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 22px;
  color: var(--color-text-invert-faint);
  transition: transform var(--dur-fast);
}

.mnav__group[open] .mnav__plus {
  transform: rotate(45deg);
}

.mnav__sub {
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mnav__sub ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mnav__subgroup + .mnav__subgroup {
  margin-top: 14px;
}

.mnav__subtitle {
  display: block;
  padding: 6px 0;
  text-decoration: none;
}

.mnav__sublink {
  display: block;
  padding: 11px 0;
  font-size: 17px;
  color: var(--color-text-invert-muted);
  text-decoration: none;
}

.mnav__sublink:hover {
  color: var(--color-text-invert);
}

.mnav__sublink--more {
  margin-top: 6px;
  color: var(--color-text-invert);
  font-weight: 600;
}

.mnav__bottom {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding-top: 28px;
}

.mnav__bottom .btn {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
}

.mnav__bottom .btn--primary {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
}

/* ===== components/components-hlavickalanding.css ===== */
/* z src/components/HlavickaLanding.astro */
.hl {
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-border-invert-soft);
}

.hl__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hl__logo img {
  height: 26px;
  width: auto;
}

.hl__phone {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-m);
  letter-spacing: 0.02em;
  color: var(--color-text-invert-soft);
}

/* ===== components/components-home-ai.css ===== */
/* z src/components/home/Ai.astro */
.ai {
  position: relative;
  overflow: hidden;
}

.ai__inner {
  position: relative;
}

.ai__head {
  align-items: center;
}

.ai__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
  color: var(--color-text-invert);
  max-width: 18ch;
}

.ai__perex {
  margin-top: 20px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-invert-muted);
  max-width: 56ch;
}

.ai__fig {
  margin: 0;
}

.ai__fig svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.ai__fig [data-anim] {
  animation: om-rise 0.55s ease-out both;
}

.ai__cap {
  fill: var(--color-text-invert-faint);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
}

.ai__box {
  fill: var(--color-dark-alt);
  stroke: var(--color-line-dark-2);
}

.ai__label {
  fill: var(--color-text-invert-muted);
  font: 500 12px var(--font-body);
}

.ai__core {
  fill: var(--color-dark-alt);
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.ai__core-label {
  fill: var(--color-text-invert);
  font: 700 16px var(--font-mono);
  letter-spacing: 0.1em;
}

.ai__link {
  fill: none;
  stroke: var(--color-line-dark);
  stroke-width: 1;
}

.ai__dim {
  stroke: var(--color-line-dark);
  stroke-dasharray: 3 5;
}

.ai__tick {
  stroke: var(--color-line-dark);
}

.ai__grid {
  list-style: none;
  margin: var(--section-gap) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.ai__card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card-s);
  background: var(--color-dark-alt);
  animation: om-rise 0.6s ease-out both;
}

.ai__no {
  font-size: var(--text-mono-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-invert-faint);
}

.ai__card-title {
  margin-top: 14px;
  font-size: var(--text-display-xs);
  font-weight: 600;
  color: var(--color-text-invert);
}

.ai__card-text {
  margin-top: 10px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
  flex: 1;
}

.ai__card-link {
  margin-top: 18px;
  align-self: flex-start;
  font-size: var(--text-body-s);
}

/* ===== components/components-home-galerie.css ===== */
/* z src/components/home/Galerie.astro */
.gal {
  position: relative;
  overflow: hidden;
}

.gal__inner {
  position: relative;
}

.gal__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
  color: var(--color-text-invert);
}

.gal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.gal__tab {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-invert-muted);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-m);
  letter-spacing: 0.02em;
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    border-color var(--dur-fast);
}

.gal__tab:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-invert);
}

.gal__tab[aria-selected='true'] {
  background: var(--color-bg);
  color: var(--color-dark);
  border-color: var(--color-bg);
}

.gal__panel {
  margin-top: 24px;
}

/* Bez JS: všechny panely viditelné pod sebou, taby schované */
html.no-js .gal__panel[hidden] {
  display: block;
}

html.no-js .gal__tabs,
html.no-js .gal__zoom {
  display: none;
}

.gal__frame {
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-dark);
}

.gal__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
  background: var(--color-bg-muted);
}

.gal__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--color-border-invert-soft);
}

.gal__caption p {
  font-size: var(--text-body-l-fixed);
  line-height: 1.5;
  color: var(--color-text-invert-muted);
  max-width: 70ch;
}

.gal__zoom {
  flex: none;
  font-weight: 400;
}

/* --- Lightbox ---------------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: var(--color-overlay);
}

.lb[hidden] {
  display: none;
}

.lb__scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.lb__body {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.lb__fig {
  margin: 0;
}

.lb__fig[hidden] {
  display: none;
}

.lb__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  background: var(--color-bg-muted);
}

/* Na mobilu výřez v plné šířce s vodorovným posouváním = čitelný detail (CC-04 bod 14) */
@media (max-width: 900px) {
  .lb__scroll {
    align-items: flex-start;
    padding: 16px;
  }

  .lb__fig {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lb__img {
    width: 1100px;
    max-width: none;
    max-height: none;
  }
}

.lb__caption {
  margin-top: 16px;
  color: var(--color-text-invert-muted);
  font-size: var(--text-body-m);
}

.lb__close {
  margin-top: 16px;
  background: var(--color-bg);
  color: var(--color-dark);
  font-weight: 600;
}

/* ===== components/components-home-hero.css ===== */
/* z src/components/home/Hero.astro */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-text-invert);
}

.hero__inner {
  position: relative;
  padding-block: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 44px);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

.hero__copy [data-anim],
.hero__visual[data-anim],
.flow__step[data-anim] {
  animation: om-rise 0.8s ease-out both;
}

.hero__title {
  margin-top: 24px;
  font-size: var(--text-display-xl);
  color: var(--color-text-invert);
  max-width: 14ch;
}

.hero__perex {
  margin-top: 24px;
  font-size: var(--text-body-l);
  line-height: 1.55;
  color: var(--color-text-invert-muted);
  max-width: 56ch;
}

.hero__kota-title {
  margin-top: 26px;
}

.hero__target {
  margin-top: 14px;
  font-size: var(--text-body-s);
  font-style: italic;
  color: var(--color-text-invert-faint);
}

.hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.hero__badges {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Vizuál ---------------------------------------------------------------- */
.hero__visual {
  position: relative;
}

.hero__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--color-line-dark);
}

.hero__corner--tl {
  top: -14px;
  left: -14px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.hero__corner--br {
  bottom: 44px;
  right: -14px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.hero__frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-dark-alt);
}

.hero__frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-invert-soft);
  font-size: var(--text-mono-xs);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: om-pulse 2.4s ease-in-out infinite;
}

.hero__frame img {
  width: 100%;
  height: auto;
}

.hero__kota {
  margin-top: 14px;
}

/* --- Tok zakázky ----------------------------------------------------------- */
.flow {
  position: relative;
  border-top: 1px solid var(--color-border-invert-soft);
  background: var(--color-dark-alt);
  padding-block: clamp(24px, 3vw, 36px);
}

.flow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.flow__note {
  color: var(--color-line-dark);
  letter-spacing: var(--mono-tracking-s);
}

.flow__steps {
  position: relative;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

/* linka za kroky */
.flow__steps::before {
  content: '';
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  height: 1.5px;
  background: var(--color-line-dark-2);
}

.flow__steps::after {
  content: '';
  z-index: 0;
  position: absolute;
  left: 0;
  top: 23.25px;
  width: 7%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--color-accent);
  opacity: 0.9;
  animation: flow-travel 3s linear infinite;
}

@keyframes flow-travel {
  from {
    left: 0;
  }
  to {
    left: 93%;
  }
}

.flow__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.flow__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid var(--color-line-dark-2);
  border-radius: var(--radius-tile);
  background: var(--color-dark);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a9b6c6;
  text-align: center;
}

.flow__step--active .flow__box {
  border-color: var(--color-accent);
  color: var(--color-text-invert);
}

.flow__no {
  font-size: var(--text-mono-2xs);
  letter-spacing: 0.1em;
  color: var(--color-text-invert-faint);
}

.flow__no::before {
  content: '';
  display: block;
  width: 1px;
  height: 10px;
  margin: 0 auto 4px;
  background: var(--color-line-dark-2);
}

@media (max-width: 900px) {
  .flow__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .flow__steps::before,
  .flow__steps::after {
    display: none;
  }

  .flow__no::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .flow__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow__box {
    font-size: var(--text-mono-xs);
  }
}

/* ===== components/components-home-integrace.css ===== */
/* z src/components/home/Integrace.astro */
.int {
  background: var(--color-bg);
}

.int__grid {
  align-items: center;
}

.int__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
  max-width: 18ch;
}

.int__perex {
  margin-top: 20px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.int__note {
  margin-top: 20px;
  font-size: var(--text-body-m);
  color: var(--color-text-muted);
}

.int__more {
  margin-top: 24px;
}

.int__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.int__ring {
  fill: none;
  stroke: #e7ebef;
  stroke-width: 1;
}

.int__ring--inner {
  stroke: #edf0f3;
}

.int__node {
  animation: om-rise 0.6s ease-out both;
}

.int__link {
  stroke: #c7d0d8;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 5 5;
}

.int__box {
  fill: var(--color-bg);
  stroke: var(--color-border);
}

.int__box--outline {
  stroke: var(--color-dark);
}

.int__label {
  fill: var(--color-dark);
  font: 600 9px var(--font-mono);
  letter-spacing: 0.08em;
}

.int__sublabel {
  fill: var(--color-text-faint);
  font: 500 7px var(--font-mono);
  letter-spacing: 0.04em;
}

.int__center {
  fill: var(--color-dark);
}

/* Akcent: běžící segment po kružnici — signál datového toku */
.int__pulse {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 60 883;
  stroke-linecap: round;
  animation: om-dash 6s linear infinite;
}

/* ===== components/components-home-nasazeni.css ===== */
/* z src/components/home/Nasazeni.astro */
.tl__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
  max-width: 20ch;
}

.tl__perex {
  margin-top: 20px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 70ch;
}

.tl__head {
  display: flex;
  gap: 24px;
  margin-top: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-mono-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tl__head > span:first-child {
  flex: 1;
}

.tl__weeks {
  width: 190px;
  display: flex;
  justify-content: space-between;
}

.tl__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
  animation: om-rise 0.6s ease-out both;
}

.tl__no {
  flex: none;
  width: 52px;
  padding-top: 6px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text);
}

.tl__no--muted {
  color: var(--color-text-muted);
}

.tl__body {
  flex: 1;
  min-width: 240px;
}

.tl__h {
  font-size: 23px;
  font-weight: 600;
}

.tl__text {
  margin-top: 10px;
  font-size: var(--text-body-m);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: 62ch;
}

.tl__text strong {
  color: var(--color-text);
  font-weight: 600;
}

.tl__from {
  margin-top: 10px;
  font-size: var(--text-mono-s);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tl__when {
  flex: none;
  width: 190px;
  padding-top: 6px;
}

.tl__when > .mono {
  font-size: var(--text-mono-s);
  line-height: 1;
  color: var(--color-text-muted);
}

.tl__rail {
  position: relative;
  margin-top: 10px;
  height: 10px;
  background: var(--color-rail);
  border-radius: var(--radius-bar);
  overflow: hidden;
}

.tl__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-bar);
  background: var(--color-dark);
  transform-origin: left;
  animation: om-wipe 0.8s var(--ease-out) both;
}

.tl__bar--dashed {
  background: repeating-linear-gradient(90deg, #c7d0d8 0 6px, transparent 6px 12px);
}

@media (max-width: 600px) {
  .tl__when {
    width: 100%;
    padding-left: 76px;
  }
}

.tl__more {
  margin-top: 28px;
}

/* ===== components/components-home-oblasti.css ===== */
/* z src/components/home/Oblasti.astro */
.areas {
  background: var(--color-bg);
}

.areas__head {
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}

.areas__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
  max-width: 18ch;
}

.areas__perex {
  font-size: var(--text-body-l-fixed);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: 56ch;
}

.areas__kota {
  margin-top: var(--section-gap);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}

.areas__tick {
  width: 1px;
  height: 10px;
  background: currentColor;
}

.areas__line {
  flex: 1;
  height: 1px;
  background: currentColor;
}

.areas__kota-text {
  flex: none;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

@media (max-width: 1100px) {
  .areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .areas__grid {
    grid-template-columns: 1fr;
  }
}

.area {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: clamp(22px, 2.2vw, 30px) clamp(18px, 1.8vw, 26px);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  margin-left: -1px;
  margin-top: -1px;
  color: inherit;
  text-decoration: none;
  transition:
    background var(--dur) ease,
    transform var(--dur-slow) var(--ease-out);
  animation: om-rise 0.7s ease-out both;
}

@media (max-width: 1100px) {
  .area {
    min-height: 0;
  }
}

.area:hover {
  background: var(--color-bg-muted);
  color: inherit;
}

/* Akcent jako aktivní stav karty (povolené použití) */
.area__bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--color-accent);
  transition: height var(--dur-slow) var(--ease-out);
}

.area:hover .area__bar,
.area:focus-visible .area__bar {
  height: 100%;
}

.area__title {
  margin-top: 18px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 600;
}

.area__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.area__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: var(--text-body-s);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.area__list li::before {
  content: '';
  flex: none;
  width: 10px;
  height: 1px;
  background: var(--color-border-strong);
  transform: translateY(-4px);
}

.area__more {
  margin-top: auto;
  padding-top: 24px;
  font-size: var(--text-body-xs);
  font-weight: 600;
  color: var(--color-text);
}

.areas__note {
  margin-top: 20px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 80ch;
}

.areas__all {
  margin-top: 24px;
}

/* ===== components/components-home-pasduvery.css ===== */
/* z src/components/home/PasDuvery.astro */
.trust {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.trust__grid {
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.trust__title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
}

.trust__logos {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 12px;
}

.trust__logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-bg);
}

.trust__logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  filter: grayscale(1);
  opacity: 0.72;
  transition:
    filter 0.3s,
    opacity 0.3s;
}

.trust__logo:hover img {
  filter: none;
  opacity: 1;
}

.trust__quote {
  border-left: 2px solid var(--color-dark);
  padding-left: clamp(20px, 2.5vw, 32px);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
}

.trust__quote strong {
  font-weight: 700;
}

/* ===== components/components-home-problemreseni.css ===== */
/* z src/components/home/ProblemReseni.astro */
.pr__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.pr__title {
  font-size: var(--text-display-m);
  max-width: 20ch;
  animation: om-rise 0.7s ease-out both;
}

.pr__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: var(--section-gap);
}

@media (max-width: 900px) {
  .pr__grid {
    grid-template-columns: 1fr;
  }
}

.pr__card {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  animation: om-rise 0.7s ease-out both;
}

.pr__ill {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  overflow: visible;
}

/* ilustrace 1 */
.pr__rule {
  stroke: #e2e7ec;
  stroke-width: 1;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: om-draw 1.2s ease-out forwards;
}

.pr__bar {
  fill: var(--color-dark);
  transform-origin: left;
  animation: om-wipe 0.6s var(--ease-out) both;
}

.pr__warn-box {
  fill: none;
  stroke: var(--color-warning);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  animation: om-rise 0.6s ease-out 0.8s both;
}

.pr__warn-text {
  fill: var(--color-warning);
  font: 600 30px var(--font-mono);
  animation: om-pulse 2.6s ease-in-out 1s infinite;
}

/* ilustrace 2 */
.pr__plan {
  stroke: var(--color-dark);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.pr__plan-label {
  fill: var(--color-border-strong);
  font: 500 10px var(--font-mono);
}

.pr__col {
  fill: var(--color-border);
  transform-origin: bottom;
  animation: om-wipe 0.5s ease-out both;
}

.pr__col--mid {
  fill: #c3cbd4;
}

.pr__col--warn {
  fill: var(--color-warning);
  animation-timing-function: var(--ease-out);
}

.pr__warn-mark {
  stroke: var(--color-warning);
  stroke-width: 1;
  fill: none;
  animation: om-rise 0.5s ease-out 0.9s both;
}

/* ilustrace 3 */
.pr__cell {
  fill: none;
  stroke: var(--color-border);
  animation: om-rise 0.5s ease-out both;
}

.pr__cell--broken {
  stroke: var(--color-danger);
  stroke-dasharray: 4 4;
}

.pr__card svg [class] {
  animation-play-state: inherit;
}

/* texty */
.pr__q {
  font-size: var(--text-display-s);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
}

.pr__problem {
  margin-top: 14px;
  flex: 1;
  font-size: var(--text-body-m);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.pr__kota {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
}

.pr__tick {
  width: 1px;
  height: 9px;
  background: var(--color-border-strong);
}

.pr__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  transform-origin: left;
  animation: om-wipe 0.8s var(--ease-out) both;
}

.pr__arrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pr__answer {
  font-size: var(--text-body-m);
  line-height: 1.55;
  font-weight: 600;
}

/* ===== components/components-home-sensorx.css ===== */
/* z src/components/home/SensorX.astro */
.sx {
  background: var(--color-bg);
}

.sx__card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.sx__logo {
  flex: none;
}

.sx__logo img {
  height: 22px;
  width: auto;
}

.sx__body {
  flex: 1;
  min-width: 280px;
}

.sx__title {
  font-size: 23px;
  font-weight: 600;
}

.sx__text {
  margin-top: 12px;
  font-size: var(--text-body-m);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: 70ch;
}

.sx__card .link-arrow {
  flex: none;
}

/* ===== components/components-home-studie.css ===== */
/* z src/components/home/Studie.astro */
.cs {
  background: var(--color-bg);
}

.cs__grid {
  gap: var(--split-gap);
}

.cs__logo {
  height: 64px;
  width: 200px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
}

.cs__logo img {
  max-height: 36px;
  width: auto;
  height: auto;
}

.cs__title {
  margin-top: 24px;
  font-size: clamp(28px, 3.2vw, 42px);
  max-width: 18ch;
}

.cs__facts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs__facts li {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-badge);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-xs);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cs__facts .doplnit {
  text-transform: none;
  font-size: inherit;
  padding: 0 6px;
}

.cs__intro {
  margin-top: 24px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.cs__results {
  margin-top: 28px;
}

.cs__results ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cs__results li {
  display: flex;
  gap: 12px;
  font-size: var(--text-body-m);
  line-height: 1.5;
}

.cs__results li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  margin-top: 12px;
  background: var(--color-border-strong);
}

.cs__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}

.cs__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}

.cs__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--color-placeholder-light);
  font-size: var(--text-mono-s);
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cs__quote {
  margin-top: 24px;
  border-left: 2px solid var(--color-dark);
  padding-left: 24px;
}

.cs__quote-text {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 500;
  font-size: var(--text-quote);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.cs__quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: var(--text-mono-s);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.cs__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  object-fit: cover;
}

.cs__avatar--placeholder {
  display: block;
  background: repeating-linear-gradient(135deg, #edf0f3 0 6px, #f6f8f9 6px 12px);
}

/* ===== components/components-home-zaverecnecta.css ===== */
/* z src/components/home/ZaverecneCta.astro */
.final {
  background: var(--color-bg);
  padding-block: clamp(56px, 7vw, 88px);
}

.final__inner {
  text-align: center;
}

.final__title {
  font-size: clamp(32px, 4vw, 52px);
  max-width: 18ch;
  margin-inline: auto;
}

.final__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 28px;
}

/* ===== components/components-home-zblogu.css ===== */
/* z src/components/home/ZBlogu.astro */
.zb__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}

.zb__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
}

.zb__perex {
  margin-top: 12px;
  max-width: 56ch;
  font-size: var(--text-body-l-fixed);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.zb__all {
  margin-bottom: 6px;
  white-space: nowrap;
}

.zb__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}

@media (max-width: 760px) {
  .zb__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== components/components-kalendarembed.css ===== */
/* Rezervační kalendář (Cal.com inline embed). Výšku si řídí embed sám, min-height drží místo při načítání. */
.kal__ramec {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-muted);
  min-height: var(--kal-vyska, 680px);
  overflow: hidden;
}

.kal__nacitam[hidden] {
  display: none;
}

.kal__nacitam {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kal iframe {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
}

.kal[data-stav='chyba'] .kal__ramec {
  display: none;
}

.kal__fallback {
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-card);
  background: var(--color-warning-bg);
  padding: clamp(20px, 2.5vw, 28px);
}

.kal__fallback[hidden] {
  display: none;
}

.kal__fallback-eyebrow {
  color: var(--color-warning-text);
}

.kal__fallback-text {
  margin-top: 10px;
  font-size: var(--text-body-m);
  line-height: var(--leading-body);
  color: var(--color-text-body);
  max-width: 60ch;
}

.kal__fallback-akce {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

/* Místo vyhrazené na dobu načítání; po načtení si výšku řídí embed podle obsahu. */
.kal {
  --kal-vyska: 680px;
}

@media (max-width: 700px) {
  .kal {
    --kal-vyska: 880px;
  }
}

/* ===== components/components-kartakontaktu.css ===== */
/* z src/components/KartaKontaktu.astro */
.kk {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-s);
  background: var(--color-bg);
}

.kk__avatar {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-tile);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-placeholder-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 20%;
}

.kk__placeholder {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kk__name {
  font-size: var(--text-display-xs);
  font-weight: 600;
}

.kk__role {
  margin-top: 4px;
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kk__for {
  margin-top: 10px;
  font-size: var(--text-body-s);
  line-height: 1.55;
  color: var(--color-text-body);
}

.kk__contact {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.9;
}

.kk__contact .link-arrow {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}

/* ===== components/components-konverzniblok.css ===== */
/* z src/components/KonverzniBlok.astro */
.kb {
  position: relative;
  overflow: hidden;
}

.kb--light {
  padding-block: var(--section-pad-sub);
  border-top: 1px solid var(--color-border);
}

.kb__inner {
  position: relative;
}

.kb__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--split-gap);
  align-items: center;
}

.kb__grid--bez-kontaktu {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .kb__grid {
    grid-template-columns: 1fr;
  }
}

.kb__grid--stred {
  text-align: center;
}

.kb__grid--stred .kb__title,
.kb__grid--stred .kb__text {
  margin-inline: auto;
}

.kb__grid--stred .kb__actions {
  justify-content: center;
}

.kb__title {
  font-size: var(--text-display-m);
  color: var(--color-text-invert);
  max-width: 18ch;
}

.kb--light .kb__title {
  color: var(--color-text);
  max-width: 22ch;
}

.kb__text {
  margin-top: 20px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-invert-muted);
  max-width: 62ch;
}

.kb--light .kb__text {
  color: var(--color-text-muted);
}

.kb__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.kb__title + .kb__actions,
.kb__text + .kb__actions {
  margin-top: 32px;
}

.kb__actions:first-child {
  margin-top: 0;
}

.kb__tel {
  font-size: var(--text-body-m);
}

.kb__card {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card);
  background: var(--color-dark-alt);
}

.kb--light .kb__card {
  border-color: var(--color-border);
  background: var(--color-bg);
}

.kb__avatar {
  position: relative;
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.kb--light .kb__avatar {
  border-color: var(--color-border);
}

.kb__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 22%;
  transform: scale(1.18);
  transform-origin: 52% 22%;
}

.kb__avatar-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-placeholder-dark);
}

.kb--light .kb__avatar-placeholder {
  background: var(--color-placeholder-light);
}

.kb__name {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text-invert);
}

.kb--light .kb__name {
  color: var(--color-text);
}

.kb__role {
  margin-top: 4px;
  font-size: var(--text-body-s);
  color: var(--color-text-invert-faint);
}

.kb--light .kb__role {
  color: var(--color-text-muted);
}

.kb__contact {
  margin-top: 12px;
  font-size: var(--text-mono-m);
  line-height: 1.7;
}

.kb__contact .link-arrow {
  font-family: inherit;
  font-weight: 500;
  font-size: inherit;
  color: var(--color-text-invert);
  border-color: rgba(255, 255, 255, 0.3);
}

.kb__contact .kb__mail {
  color: var(--color-text-invert-muted);
  border-color: rgba(255, 255, 255, 0.2);
}

.kb--light .kb__contact .link-arrow {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.kb--light .kb__contact .kb__mail {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* ===== components/components-kota.css ===== */
/* z src/components/Kota.astro */
.kota {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
}

.on-dark .kota {
  color: var(--color-text-invert-faint);
}

.kota__tick {
  flex: none;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.6;
}

.kota__line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transform-origin: left;
}

.kota__line--anim {
  animation: om-wipe 0.8s var(--ease-out) 0.3s both;
}

.kota__text {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-2xs);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kota:not(.kota--stred) .kota__text {
  order: 1;
}

.kota:not(.kota--stred) .kota__tick:last-child {
  order: 2;
}

/* ===== components/components-paticka.css ===== */
/* z src/components/Paticka.astro */
.ftr {
  background: var(--color-dark);
  color: var(--color-text-invert-muted);
  padding: clamp(48px, 6vw, 72px) 0 32px;
}

/* --- Blok průvodce (nahrazuje newsletter) ----------------------------------- */
.ftr__guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding: clamp(22px, 2.5vw, 32px);
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card);
  margin-bottom: 56px;
}

.ftr__guide-text {
  flex: 1;
  min-width: 240px;
}

.ftr__guide-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-invert);
}

.ftr__guide-desc {
  margin-top: 10px;
  font-size: var(--text-body-m);
  line-height: var(--leading-body);
  max-width: 56ch;
}

.ftr__guide-meta {
  margin-top: 10px;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.ftr__guide .btn {
  flex: none;
}

/* --- Sloupce ----------------------------------------------------------------- */
.ftr__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.ftr__col ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: var(--text-body-s);
}

.ftr__col a {
  color: var(--color-text-invert-muted);
}

.ftr__col a:hover {
  color: var(--color-text-invert);
}

.ftr__col--contact {
  min-width: 0;
}

.ftr__address {
  margin-top: 16px;
  font-style: normal;
  font-size: var(--text-body-s);
  line-height: 1.7;
}

.ftr__address strong {
  color: var(--color-text-invert);
  font-weight: 600;
}

.ftr__contact {
  margin-top: 12px;
  font-size: var(--text-mono-m);
  line-height: 1.8;
}

.ftr__contact a {
  color: var(--color-text-invert);
}

.ftr__contact-mail {
  color: var(--color-text-invert-muted) !important;
}


/* --- Razítko výkresu ---------------------------------------------------------- */
.ftr__stamp {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-tile);
  overflow: hidden;
  font-size: var(--text-mono-2xs);
  line-height: 1.6;
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.ftr__stamp > div {
  padding: 14px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.ftr__stamp > div:last-child {
  border-right: 0;
}

.ftr__stamp span {
  color: var(--color-text-invert);
  font-size: var(--text-mono-s);
}

/* --- Spodní řádek ------------------------------------------------------------- */
.ftr__bottom {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  font-size: var(--text-body-xs);
  color: var(--color-text-invert-faint);
}

.ftr__logos {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-right: 16px;
}

.ftr__logos img {
  height: 22px;
  width: auto;
}

.ftr__nextera {
  display: flex;
}

.ftr__nextera img {
  height: 16px;
}

.ftr__sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.28);
  flex: none;
}

.ftr__bottom-link:first-of-type {
  margin-left: auto;
}

.ftr__bottom-link {
  color: var(--color-text-invert-faint);
}

.ftr__bottom-link:hover {
  color: var(--color-text-invert);
}

@media (max-width: 600px) {
  .ftr__bottom-link:first-of-type {
    margin-left: 0;
  }
}

/* ===== components/components-patickaminimal.css ===== */
/* z src/components/PatickaMinimal.astro */
.pm {
  background: var(--color-dark-alt);
  color: var(--color-text-invert-faint);
  padding: 28px 0;
  font-size: var(--text-body-xs);
}

.pm__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.pm__inner img {
  height: 20px;
  width: auto;
}

.pm__inner a {
  color: var(--color-text-invert-faint);
}

.pm__inner a:hover {
  color: var(--color-text-invert);
}

.pm__copy {
  margin-left: auto;
}

@media (max-width: 600px) {
  .pm__copy {
    margin-left: 0;
  }
}

/* ===== components/components-podstranky-drobecky.css ===== */
/* z src/components/podstranky/Drobecky.astro */
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.crumbs li {
  display: inline-flex;
  gap: 10px;
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--color-text-invert);
}

.crumbs [aria-current] {
  color: var(--color-text-invert);
}

.crumbs__sep {
  color: var(--color-line-dark);
}

/* ===== components/components-podstranky-heropodstranky.css ===== */
/* z src/components/podstranky/HeroPodstranky.astro */
.ph {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-text-invert);
}

.ph__inner {
  position: relative;
  padding-block: clamp(32px, 4vw, 52px) clamp(44px, 6vw, 72px);
}

.container--text-wide {
  max-width: calc(var(--container-text-wide) + 2 * var(--gutter));
}

.ph [data-anim] {
  animation: om-rise 0.8s ease-out both;
}

.ph__grid {
  display: grid;
  grid-template-columns: var(--ph-cols);
  gap: var(--split-gap);
  align-items: var(--ph-align);
  margin-top: 28px;
}

.ph__grid--single {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .ph__grid {
    grid-template-columns: 1fr;
  }
}

.ph__copy .eyebrow {
  margin-bottom: 22px;
}

.ph__title {
  color: var(--color-text-invert);
  max-width: 22ch;
}

.ph__title--xl {
  font-size: var(--text-display-xl);
}

.ph__title--l {
  font-size: var(--text-display-l);
}

.ph__title--m {
  font-size: clamp(30px, 4vw, 52px);
  max-width: 24ch;
}

.ph__sub {
  margin-top: 20px;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  font-size: var(--text-subhead);
  line-height: 1.35;
  letter-spacing: var(--display-tracking);
  color: var(--color-text-invert);
  max-width: 26ch;
}

.ph__perex {
  margin-top: 22px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
  max-width: 62ch;
}

.ph__visual {
  min-width: 0;
}

/* ===== components/components-podstranky-kartamodulu.css ===== */
/* z src/components/podstranky/KartaModulu.astro */
.km {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-s);
  padding: clamp(18px, 2vw, 24px);
  animation: om-rise 0.5s ease-out both;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur) ease;
}

.km--detail {
  border-color: var(--color-border-strong);
}

.km--detail:hover {
  transform: translateY(-3px);
}

.km__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.km__no {
  font-size: var(--text-mono-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.km__tag {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.km__tag--detail {
  color: var(--color-accent-text);
}

.km__title {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 600;
}

/* Celá karta je klikatelná přes pseudo-prvek odkazu v nadpisu. */
.km__title a {
  color: inherit;
  text-decoration: none;
}

.km__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.km__text {
  margin-top: 8px;
  font-size: var(--text-body-s);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.km__more {
  margin-top: 16px;
  align-self: flex-start;
  font-size: var(--text-body-s);
}

/* ===== components/components-podstranky-kartaoboru.css ===== */
/* z src/components/podstranky/KartaOboru.astro */
.ko {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  animation: om-rise 0.6s ease-out both;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur) ease;
}

.ko:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
}

.ko__media {
  aspect-ratio: 16 / 9;
  background: var(--color-placeholder-light);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.ko__media.ko__media--img {
  padding: 0;
  display: block;
}

.ko__media--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ko__placeholder {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.ko__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.2vw, 26px);
}

.ko__no {
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ko__title {
  margin-top: 12px;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
}

.ko__title a {
  color: inherit;
  text-decoration: none;
}

.ko__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ko__text {
  margin-top: 10px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
  flex: 1;
}

.ko__more {
  margin-top: 18px;
  align-self: flex-start;
  font-size: var(--text-body-s);
}

/* ===== components/components-podstranky-kartastudie.css ===== */
/* z src/components/podstranky/KartaStudie.astro */
.ks {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  animation: om-rise 0.6s ease-out both;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur) ease;
}

.ks:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
}

.ks__media {
  aspect-ratio: 16 / 9;
  background: var(--color-placeholder-light);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.ks__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ks__placeholder {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.ks__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.2vw, 26px);
}

.ks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ks__logo {
  display: flex;
  align-items: center;
  height: 36px;
}

.ks__logo img {
  height: 28px;
  width: auto;
  max-width: 180px;
}

.ks__obor {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ks__title {
  margin-top: 14px;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
}

.ks__title a {
  color: inherit;
  text-decoration: none;
}

.ks__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ks__text {
  margin-top: 10px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
  flex: 1;
}

.ks__more {
  margin-top: 18px;
  align-self: flex-start;
  font-size: var(--text-body-s);
}

/* ===== components/components-podstranky-schemamodulu.css ===== */
/* z src/components/podstranky/SchemaModulu.astro */
.sm {
  margin: 0;
}

.sm svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.sm [data-anim] {
  animation: om-rise 0.55s ease-out both;
}

.sm__cap,
.sm__axis {
  fill: var(--color-text-invert-faint);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
}

.sm__axis {
  letter-spacing: 0.08em;
}

.sm__rail,
.sm__grid {
  stroke: var(--color-line-dark-2);
  stroke-width: 1;
  fill: none;
}

.sm__node {
  fill: var(--color-dark-alt);
  stroke: var(--color-line-dark);
  stroke-width: 1;
}

.sm__node--on {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.sm__box {
  fill: var(--color-dark);
  stroke: var(--color-line-dark-2);
  stroke-width: 1;
}

.sm__box--on {
  fill: var(--color-accent);
  stroke: none;
}

.sm__label {
  fill: var(--color-text-invert-muted);
  font: 500 13px var(--font-body);
}

.sm__label--mid {
  font-size: 12px;
}

.sm__label--on {
  fill: var(--color-dark);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.06em;
}

.sm__center {
  fill: var(--color-dark-alt);
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.sm__center-label {
  fill: var(--color-text-invert);
  font: 600 17px var(--font-body);
}

.sm__center-sub {
  fill: var(--color-text-invert-muted);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.1em;
}

.sm__link {
  stroke: var(--color-line-dark);
  stroke-width: 1;
  fill: none;
}

.sm__link--wipe {
  transform-origin: left;
  animation: om-wipe 0.6s ease-out both;
}

.sm__link--dash {
  stroke-dasharray: 3 4;
}

.sm__dim {
  stroke: var(--color-line-dark);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.sm__tick {
  stroke: var(--color-line-dark);
  stroke-width: 1;
}

.sm__bar {
  fill: var(--color-line-dark);
}

.sm__bar--on {
  fill: var(--color-accent);
}

.sm__bar--dash {
  fill: var(--color-dark);
  stroke: var(--color-line-dark);
  stroke-dasharray: 3 3;
}

/* ===== components/components-stickyctamobil.css ===== */
/* z src/components/StickyCtaMobil.astro */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--color-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sticky-bar .btn {
  min-height: 52px;
  padding: 0 12px;
  font-size: 16px;
}

.sticky-bar__call {
  flex: 1;
  font-weight: 600;
}

.sticky-bar__cta {
  flex: 1.3;
}

/* ===== components/pages-404.css ===== */
/* z src/pages/404.astro */
.nf {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-text-invert);
  min-height: 60vh;
}

.nf__inner {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px);
}

.nf [data-anim] {
  animation: om-rise 0.8s ease-out both;
}

.nf__code {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-m);
  letter-spacing: var(--mono-tracking);
  color: var(--color-text-invert-faint);
}

.nf__title {
  margin-top: 12px;
  font-size: var(--text-display-l);
  color: var(--color-text-invert);
  max-width: 18ch;
}

.nf__text {
  margin-top: 22px;
  font-size: var(--text-body-l);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
  max-width: 56ch;
}

.nf__kota {
  margin-top: 24px;
}

.nf__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.nf__links {
  margin-top: clamp(40px, 5vw, 64px);
}

.nf__links ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.nf__link {
  display: block;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border-invert);
  border-right: 1px solid var(--color-border-invert);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) ease;
}

.nf__link:hover {
  background: var(--color-hover-invert);
  color: inherit;
}

.nf__link-title {
  display: block;
  font-weight: 600;
  color: var(--color-text-invert);
}

.nf__link-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--text-body-xs);
  color: var(--color-text-invert-faint);
}

/* ===== components/pages-blog-[slug].css ===== */
/* z src/pages/blog/[slug].astro */
/* --- Hero článku --------------------------------------------------------------- */
.art-perex {
  margin-top: 24px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  padding-left: 20px;
  max-width: 70ch;
}

.art-autor {
  margin-top: 28px;
}

/* --- Obsah + článek ------------------------------------------------------------ */
.art {
  background: var(--color-bg);
  padding-block: clamp(40px, 5vw, 72px);
}

.art__container {
  max-width: calc(var(--container-text-wide) + 2 * var(--gutter));
}

.clanek {
  max-width: var(--container-text);
  margin-top: clamp(36px, 4vw, 56px);
  font-size: var(--text-article);
  line-height: 1.75;
  color: var(--color-text-body);
}

.clanek h2 {
  margin-top: clamp(36px, 4vw, 52px);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--color-text);
  scroll-margin-top: calc(var(--header-h-scrolled) + 42px);
}

.clanek h3 {
  margin-top: clamp(24px, 2.6vw, 34px);
  font-size: clamp(19px, 1.9vw, 23px);
  color: var(--color-text);
}

.clanek p {
  margin-top: 18px;
}

.clanek strong {
  color: var(--color-text);
  font-weight: 600;
}

.clanek a {
  color: var(--color-text);
  font-weight: 500;
}

.clanek ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

/* Odrážka absolutně, aby <strong> uvnitř položky nezlomil řádek (grid/flex by z něj udělal samostatnou buňku). */
.clanek ul > li {
  position: relative;
  padding-left: 28px;
}

.clanek ul > li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  text-align: center;
  font-weight: 700;
  color: var(--color-accent-text);
}

/* Shrnutí: poslední seznam v článku, ✓ místo odrážky (Design) */
.clanek h2:last-of-type ~ ul > li {
  font-size: 17px;
  line-height: 1.65;
  font-weight: 600;
  color: var(--color-text);
  padding-left: 30px;
}

.clanek h2:last-of-type ~ ul > li::before {
  content: '✓';
  font-weight: 600;
}

.clanek h2:last-of-type {
  margin-top: clamp(40px, 4.4vw, 60px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--color-border);
  font-size: clamp(22px, 2.2vw, 28px);
}

/* Tabulka: čitelná na mobilu (scroll uvnitř rámečku), prázdná buňka = zaškrtávací čtverec */
.clanek table {
  width: 100%;
  margin-top: 22px;
  border-collapse: collapse;
  font-size: var(--text-body-m);
  line-height: 1.5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.clanek thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.clanek td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.clanek tr:last-child td {
  border-bottom: 0;
}

.clanek td:last-child {
  width: 60px;
  text-align: right;
}

.clanek td:last-child:empty::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  vertical-align: middle;
}

/* --- Související --------------------------------------------------------------- */
.rel {
  background: var(--color-bg);
}

.rel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 24px;
}

/* ===== components/pages-blog-index.css ===== */
/* z src/pages/blog/index.astro */
.bl {
  background: var(--color-bg);
}

.bl__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: 24px;
}

.bl__grid--dalsi {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

@media (max-width: 900px) {
  .bl__grid {
    grid-template-columns: 1fr;
  }
}

.br {
  border-top: 1px solid var(--color-border);
}

.br__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--split-gap);
  align-items: start;
}

@media (max-width: 900px) {
  .br__grid {
    grid-template-columns: 1fr;
  }
}

.br__chips {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.br__chip {
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-chip);
  font-size: var(--text-body-xs);
  color: var(--color-text-body);
}

.br .icta {
  margin-top: 0;
}

/* ===== components/pages-cookies.css ===== */
/* z src/pages/cookies.astro */
.ckp__title {
  margin-top: 16px;
  font-size: var(--text-display-l);
}

.ckp__lead {
  margin-top: 20px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-body);
}

.ckp__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  line-height: 1.6;
}

.ckp__list li {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tile);
}

.ckp__text {
  margin-top: 24px;
  color: var(--color-text-muted);
}

.ckp__actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

/* ===== components/pages-dekujeme.css ===== */
/* z src/pages/dekujeme.astro */

/* Stránka vyplní celou výšku okna: tmavá sekce roste, patička je vždy u spodního okraje (Michal 2026-10-11). */
body.body--dekujeme {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.body--dekujeme main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dk {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-text-invert);
  min-height: 60vh;
  flex: 1;
}

.dk__inner {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px);
  max-width: 860px;
}

.dk__variant[hidden] {
  display: none;
}

.dk__title {
  margin-top: 22px;
  font-size: var(--text-display-l);
  color: var(--color-text-invert);
  max-width: 20ch;
}

.dk__text {
  margin-top: 24px;
  display: grid;
  gap: 14px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-invert-muted);
  max-width: 62ch;
}

.dk__text strong {
  color: var(--color-text-invert);
  font-weight: 600;
}

.dk__pdf {
  margin-top: 28px;
}

.dk__tip {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-panel);
  font-size: var(--text-body-m);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
  max-width: 62ch;
}

.dk__tip strong {
  color: var(--color-text-invert);
}

.dk__person {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--text-body-m);
  line-height: 1.7;
}

.dk__person strong {
  color: var(--color-text-invert);
}

.dk__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dk__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 22%;
  transform: scale(1.18);
  transform-origin: 52% 22%;
}

.dk__next {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-invert);
}

.dk__links {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== components/pages-demo.css ===== */
/* z src/pages/demo.astro */
/* --- Hero ------------------------------------------------------------------- */
.dh {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-text-invert);
}

.dh__inner {
  position: relative;
  padding-block: clamp(40px, 5vw, 68px) clamp(40px, 5vw, 60px);
}

.dh [data-anim] {
  animation: om-rise 0.7s ease-out both;
}

.dh__title {
  margin-top: 22px;
  font-size: clamp(34px, 4.8vw, 62px);
  color: var(--color-text-invert);
  max-width: 22ch;
}

.dh__sub {
  margin-top: 18px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--color-text-invert);
}

.dh__obsah-title {
  margin-top: 36px;
}

.dh__grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
}

@media (max-width: 960px) {
  .dh__grid {
    grid-template-columns: 1fr;
  }
}

.dh__item {
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--color-border-invert);
  padding-top: 18px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.55;
  color: var(--color-text-invert-muted);
}

.dh__item strong {
  color: var(--color-text-invert);
  font-weight: 600;
}

.dh__check {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent);
}

/* --- Kalendář + formulář + aside ------------------------------------------------ */
.dm {
  background: var(--color-bg);
  padding-block: clamp(40px, 5vw, 72px);
}

.dm__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 960px) {
  .dm__grid {
    grid-template-columns: 1fr;
  }
}

.dm__title {
  font-size: clamp(26px, 3vw, 38px);
}

.dm__kota {
  margin-top: 16px;
}

.dm__kalendar {
  margin-top: 24px;
}

.dm__form {
  margin-top: 24px;
  padding: clamp(22px, 2.6vw, 32px);
  scroll-margin-top: 24px;
}

.dm__form-title {
  font-size: var(--text-display-s);
  font-weight: 600;
}

.dm__form-text {
  margin: 8px 0 22px;
  color: var(--color-text-muted);
}

.dm__aside {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 20px;
}

@media (max-width: 960px) {
  .dm__aside {
    position: static;
  }
}

.dm__person {
  padding: 0;
  overflow: hidden;
}

.dm__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 52% 20%;
}

.dm__person-body {
  padding: 20px;
}

.dm__person-name {
  margin-top: 10px;
  font-size: var(--text-display-s);
  font-weight: 600;
}

.dm__person-role {
  margin-top: 4px;
  font-size: var(--text-body-s);
  color: var(--color-text-muted);
}

.dm__person-contact {
  margin-top: 12px;
  font-size: var(--text-mono-m);
  line-height: 1.8;
}

.dm__person-contact .link-arrow {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}

.dm__quote {
  padding: 20px;
}

.dm__quote-avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-placeholder-light);
  margin-bottom: 14px;
}

.dm__quote-text {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.dm__quote-author {
  margin-top: 12px;
  font-size: var(--text-mono-s);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.dm__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.dm__badges .badge {
  justify-content: center;
}

/* ===== components/pages-implementace.css ===== */
/* z src/pages/implementace.astro */
.fears__more {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-size: var(--text-body-s);
  line-height: 1.6;
}

.fears__more-uvod {
  color: var(--color-text-muted);
}

/* --- Hero: harmonogram. Pruhy jsou akcentové jako v Designu — časová osa je signální prvek
   („aktivní krok“, CC-06 §6), ne dekorace. ---------------------------------------- */
.plan {
  margin: 0;
}

.plan svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.plan__axis {
  stroke: var(--color-line-dark-2);
  stroke-width: 1;
}

.plan__bar {
  fill: var(--color-accent);
  transform-origin: left;
  animation: om-wipe 0.7s var(--ease-out) both;
}

.plan__bar--alt {
  fill: var(--color-accent-hover);
}

.plan__when {
  fill: var(--color-text-invert);
  font: 500 11px var(--font-mono);
}

.plan__label,
.plan__cap {
  fill: var(--color-text-invert-faint);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.08em;
}

.plan__cap {
  letter-spacing: 0.14em;
}

.plan__dim {
  stroke: var(--color-line-dark);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.plan__tick {
  stroke: var(--color-line-dark);
  stroke-width: 1;
}

/* --- Princip ------------------------------------------------------------------- */
.princip {
  background: var(--color-bg);
}

.princip__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .princip__grid {
    grid-template-columns: 1fr;
  }
}

.princip__title {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 42px);
  max-width: 16ch;
}

.princip__text {
  border-left: 2px solid var(--color-dark);
  padding-left: clamp(20px, 2.5vw, 32px);
  display: grid;
  gap: 18px;
}

.princip__text p {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
}

/* --- Časová osa ------------------------------------------------------------------ */
.steps__title {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 42px);
}

.steps__list {
  list-style: none;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.step {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--color-border);
  animation: om-rise 0.6s ease-out both;
}

@media (max-width: 900px) {
  .step {
    grid-template-columns: 1fr;
  }
}

.step__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.step__no {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  color: var(--color-dark);
}

.step__no--faint {
  color: var(--color-border-strong);
}

.step__when {
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.step__name {
  margin-top: 16px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
}

.step__rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.step__tick {
  width: 1px;
  height: 9px;
  background: var(--color-border-strong);
}

.step__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  transform-origin: left;
  animation: om-wipe 0.8s var(--ease-out) 0.2s both;
}

.step__body {
  display: grid;
  gap: 16px;
  align-content: start;
}

.step__p {
  font-size: var(--text-body-m);
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 70ch;
}

.step__hl {
  font-size: var(--text-body-l-fixed);
  line-height: 1.6;
  font-weight: 600;
  max-width: 70ch;
}

.step__chips {
  margin: 2px 0 0;
  display: grid;
  gap: 10px;
}

.step__chip {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tile);
}

.step__chip dt {
  flex: none;
  width: 80px;
  font-size: var(--text-mono-2xs);
  line-height: 1.6;
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.step__chip dd {
  margin: 0;
  font-size: var(--text-body-s);
  line-height: 1.6;
}

/* --- Kdo to bude dělat ------------------------------------------------------------ */
.kdo {
  position: relative;
  overflow: hidden;
}

.kdo__inner {
  position: relative;
}

.kdo__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .kdo__grid {
    grid-template-columns: 1fr;
  }
}

.kdo__title {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--color-text-invert);
  max-width: 18ch;
}

.kdo__text {
  display: grid;
  gap: 18px;
}

.kdo__text p {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--color-text-invert-muted);
  max-width: 66ch;
}

.kdo__link {
  margin-top: 8px;
}

.kdo__link .link-arrow {
  color: var(--color-text-invert);
}

/* --- Obavy ----------------------------------------------------------------------- */
.fears {
  background: var(--color-bg);
}

.fears__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .fears__grid {
    grid-template-columns: 1fr;
  }
}

.fears__head {
  position: sticky;
  top: calc(var(--header-h-scrolled) + 42px);
}

@media (max-width: 900px) {
  .fears__head {
    position: static;
  }
}

.fears__title {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 42px);
  max-width: 16ch;
}

.fears__list {
  border-top: 1px solid var(--color-border);
}

.fears__item {
  border-bottom: 1px solid var(--color-border);
}

.fears__q {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  min-height: 44px;
  font-size: var(--text-display-xs);
  font-weight: 600;
  font-style: italic;
  line-height: 1.35;
}

.fears__q-text {
  flex: 1;
}

.fears__plus {
  flex: none;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  font-style: normal;
  color: var(--color-text-muted);
  transition: transform var(--dur-fast);
}

.fears__item[open] .fears__plus {
  transform: rotate(45deg);
}

.fears__a {
  padding: 0 0 24px;
  font-size: var(--text-body-m);
  line-height: var(--leading-body-loose);
  color: var(--color-text-body);
  max-width: 74ch;
}

/* ===== components/pages-integrace.css ===== */
/* z src/pages/integrace.astro */
.in-stats {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  align-items: baseline;
  animation: om-rise 0.8s ease-out both;
}

.in-stats__item {
  display: grid;
  gap: 6px;
}

.in-stats__value {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--color-text-invert);
}

.in-stats__label {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.in-hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  animation: om-rise 0.8s ease-out both;
}

/* --- Hero: hub-and-spoke ------------------------------------------------------- */
.hub {
  margin: 0;
}

.hub svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.hub__cap {
  fill: var(--color-text-invert-faint);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
}

.hub__cap--s {
  letter-spacing: 0.12em;
}

.hub__center {
  fill: var(--color-dark-alt);
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.hub__center-label {
  fill: var(--color-text-invert);
  font: 600 15px var(--font-body);
}

.hub__center-sub {
  fill: var(--color-text-invert-muted);
  font: 500 9px var(--font-mono);
  letter-spacing: 0.1em;
}

.hub__box {
  fill: var(--color-dark);
  stroke: var(--color-line-dark-2);
}

.hub__label {
  fill: var(--color-text-invert-muted);
  font: 500 11px var(--font-body);
}

.hub__links path {
  stroke: var(--color-line-dark);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
}

.hub__dim {
  stroke: var(--color-line-dark);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.hub__tick {
  stroke: var(--color-line-dark);
  stroke-width: 1;
}

/* --- Kategorie ------------------------------------------------------------------ */
.cats {
  background: var(--color-bg);
}

.cats__title {
  margin-top: 14px;
  font-size: var(--text-display-m-sub);
}

.cats__grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.cat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 28px);
  animation: om-rise 0.6s ease-out both;
}

.cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cat__no {
  font-size: var(--text-mono-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}

/* V Designu akcentová linka; podle 02-design-system neutrální. */
.cat__rule {
  width: 26px;
  height: 1px;
  background: var(--color-border-strong);
}

.cat__title {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 600;
}

.cat__text {
  margin-top: 10px;
  font-size: var(--text-body-m);
  line-height: 1.6;
  color: var(--color-text-muted);
  flex: 1;
}

.cat__chips {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat__chip {
  padding: 7px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-size: var(--text-mono-s);
  line-height: 1;
  color: var(--color-text-body);
}

.cat__todo {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border-strong);
  font-size: var(--text-body-xs);
  line-height: 1.6;
}

/* --- OpenAPI -------------------------------------------------------------------- */
.api {
  position: relative;
  overflow: hidden;
}

.api__inner {
  position: relative;
}

.api__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .api__grid {
    grid-template-columns: 1fr;
  }
}

.api__title {
  margin-top: 14px;
  font-size: var(--text-display-m-sub);
  color: var(--color-text-invert);
  max-width: 16ch;
}

.api__text {
  display: grid;
  gap: 18px;
}

.api__text p {
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
  color: var(--color-text-invert-muted);
  max-width: 66ch;
}

.api__chips {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.api__chip {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-button);
  font-size: var(--text-mono-s);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-invert-muted);
}

.api__todo {
  font-size: var(--text-body-s) !important;
}

/* --- Nenašli jste svůj systém? ------------------------------------------------------- */
.ask {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ask__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .ask__grid {
    grid-template-columns: 1fr;
  }
}

.ask__title {
  font-size: clamp(24px, 2.6vw, 34px);
  max-width: 20ch;
}

.ask__text {
  margin-top: 18px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-body);
  max-width: 64ch;
}

.ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
}

.ask__tel {
  font-size: var(--text-body-m);
}

/* ===== components/pages-kontakt.css ===== */
/* z src/pages/kontakt.astro */
.kt-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.kt-crumbs a {
  color: inherit;
  text-decoration: none;
}

.kt-crumbs a:hover {
  color: var(--color-text-invert);
}

.kt-crumbs span[aria-hidden] {
  color: var(--color-line-dark);
}

.kh {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-text-invert);
}

.kh__inner {
  position: relative;
  padding-block: clamp(32px, 4vw, 52px) clamp(44px, 6vw, 72px);
}

.kh [data-anim] {
  animation: om-rise 0.7s ease-out both;
}

.kh__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--split-gap);
  align-items: end;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .kh__grid {
    grid-template-columns: 1fr;
  }
}

.kh__title {
  margin-top: 22px;
  font-size: var(--text-display-l);
  color: var(--color-text-invert);
  max-width: 18ch;
}

.kh__text {
  margin-top: 20px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
  max-width: 58ch;
}

.kh__tiles {
  display: grid;
  gap: 12px;
}

.kh__tile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-panel);
  color: var(--color-text-invert);
  text-decoration: none;
  transition:
    border-color var(--dur) ease,
    transform var(--dur-slow) var(--ease-out);
}

.kh__tile:hover {
  border-color: var(--color-accent);
  color: var(--color-text-invert);
  transform: translateY(-2px);
}

.kh__tile-label {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.kh__tile-value {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600;
  word-break: break-all;
}

/* --- Formulář + osoby ---------------------------------------------------------- */
.kf {
  background: var(--color-bg);
}

.kf__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--split-gap);
  align-items: start;
}

@media (max-width: 900px) {
  .kf__grid {
    grid-template-columns: 1fr;
  }
}

.kf__title {
  font-size: clamp(26px, 3vw, 38px);
}

.kf__kota {
  margin-top: 16px;
}

.kf__form {
  margin-top: 28px;
}

.kf__people-title {
  font-size: clamp(24px, 2.6vw, 32px);
}

.kf__people {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

/* --- Sídlo ---------------------------------------------------------------------- */
.kt-ks {
  padding-block: clamp(44px, 5vw, 80px);
}

.kt-ks__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--split-gap);
  align-items: start;
}

@media (max-width: 900px) {
  .kt-ks__grid {
    grid-template-columns: 1fr;
  }
}

.kt-ks__title {
  margin-top: 14px;
  font-size: clamp(24px, 2.6vw, 32px);
}

.kt-ks__address {
  margin-top: 18px;
  font-style: normal;
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
}

.kt-ks__ids {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  max-width: 360px;
}

.kt-ks__ids > div {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tile);
  background: var(--color-bg);
}

.kt-ks__ids dt {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kt-ks__ids dd {
  margin: 6px 0 0;
  font-size: var(--text-mono-m);
  font-weight: 600;
}

.kt-ks__zapis {
  margin-top: 16px;
  font-size: var(--text-body-xs);
  color: var(--color-text-muted);
  max-width: 40ch;
}

.kt-ks__photo {
  padding: 0;
  overflow: hidden;
  margin: 0;
}

.kt-ks__photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kt-ks__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-xs);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kt-ks__maps {
  display: flex;
  gap: 18px;
  text-transform: none;
  letter-spacing: 0;
}

.kt-ks__maps .link-arrow {
  font-size: var(--text-body-xs);
}

/* ===== components/pages-mes-system.css ===== */
/* /mes-system — výklad MES, srovnání s ERP, mapa modulů. Vychází z jazyka podstránek (eyebrow, kóta, karty). */

.mes-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 32px;
  animation: om-rise 0.6s ease-out both;
}

/* --- Schéma vrstev v heru ------------------------------------------------------- */
.mesl {
  margin: 0;
}

.mesl svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.mesl__cap,
.mesl__note,
.mesl__link-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--mono-tracking-s);
  fill: var(--color-text-invert-faint);
}

.mesl__cap--s {
  fill: var(--color-text-invert-faint);
}

.mesl__note {
  letter-spacing: 0.02em;
  text-transform: none;
}

.mesl__layer {
  fill: rgba(255, 255, 255, 0.04);
  stroke: var(--color-border-invert);
  animation: om-rise 0.6s ease-out both;
}

.mesl__layer--active {
  fill: rgba(62, 232, 192, 0.1);
  stroke: var(--color-accent);
}

.mesl__layer--side {
  fill: rgba(255, 255, 255, 0.02);
  stroke-dasharray: 4 4;
}

.mesl__label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--mono-tracking-s);
  fill: var(--color-text-invert);
}

.mesl__label--active {
  fill: var(--color-accent);
}

.mesl__link {
  stroke: var(--color-border-invert);
  stroke-dasharray: 4 4;
  fill: none;
}

.mesl__dim,
.mesl__tick {
  stroke: rgba(255, 255, 255, 0.22);
  fill: none;
}

/* --- Co je MES ------------------------------------------------------------------ */
.whatis__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
}

.whatis__title {
  margin-top: 16px;
  font-size: var(--text-display-m-sub);
}

.whatis :global(.whatis__kota) {
  margin-top: 22px;
  max-width: 220px;
}

.whatis__p {
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-body);
}

.whatis__p + .whatis__p {
  margin-top: 16px;
}

.whatis__list-title {
  margin-top: 32px;
}

.whatis__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.whatis__list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
  color: var(--color-text-body);
  animation: om-rise 0.5s ease-out both;
}

.whatis__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--color-border-strong);
}

/* --- Srovnání MES / ERP ---------------------------------------------------------- */
.cmp__title {
  margin-top: 16px;
  font-size: var(--text-display-m-sub);
}

.cmp__scroll {
  margin-top: 32px;
  overflow-x: auto;
}

.cmp__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.cmp__head {
  padding: 0 18px 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-strong);
}

.cmp__head--mes {
  color: var(--color-accent-text);
}

.cmp__corner {
  width: 22%;
  border-bottom: 1px solid var(--color-border-strong);
}

.cmp__row-label {
  width: 22%;
  padding: 16px 18px 16px 0;
  font-weight: 600;
  font-size: var(--text-body-s);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.cmp__cell {
  padding: 16px 18px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.cmp__cell--mes {
  color: var(--color-text-body);
  background: var(--color-bg);
}

.cmp__table tbody tr {
  animation: om-rise 0.5s ease-out both;
}

.cmp__note {
  margin-top: 22px;
  max-width: 76ch;
  font-size: var(--text-body-s);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* --- Potřebujete MES, nebo ERP? --------------------------------------------------- */
.choice__title {
  margin-top: 16px;
  font-size: var(--text-display-m-sub);
}

.choice__perex {
  margin-top: 18px;
  max-width: 68ch;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-body);
}

.choice__grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.choice__card {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  animation: om-rise 0.6s ease-out both;
}

.choice__card-title {
  font-size: var(--text-subhead);
  font-weight: 600;
}

.choice__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.choice__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.choice__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 1px;
  background: var(--color-border-strong);
}

.choice__link {
  margin-top: 28px;
}

/* --- Co z MES umí anyCore --------------------------------------------------------- */
.mesmod {
  position: relative;
  overflow: hidden;
}

.mesmod__inner {
  position: relative;
}

.mesmod__title {
  margin-top: 16px;
  font-size: var(--text-display-m-sub);
  color: var(--color-text-invert);
}

.mesmod__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.mesmod__row {
  display: grid;
  grid-template-columns: 44px minmax(220px, 1fr) minmax(0, 1.6fr);
  align-items: baseline;
  gap: 8px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-invert);
  animation: om-rise 0.5s ease-out both;
}

.mesmod__row:last-child {
  border-bottom: 1px solid var(--color-border-invert);
}

.mesmod__no {
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking);
  color: var(--color-text-invert-faint);
}

.mesmod__name {
  font-size: var(--text-body-l-fixed);
  font-weight: 600;
  color: var(--color-text-invert);
}

.mesmod__why {
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
}

.mesmod__p {
  margin-top: 28px;
  max-width: 72ch;
  font-size: var(--text-body-m);
  line-height: 1.7;
  color: var(--color-text-invert-muted);
}

.mesmod__link {
  margin-top: 20px;
}

/* --- Napojení a nasazení ----------------------------------------------------------- */
.fits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}

.fits__title {
  margin-top: 16px;
  font-size: var(--text-display-s);
  font-weight: 600;
}

.fits__p {
  margin-top: 16px;
  line-height: 1.7;
  color: var(--color-text-body);
}

.fits__links {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

@media (max-width: 900px) {
  .whatis__grid,
  .choice__grid,
  .fits__grid {
    grid-template-columns: 1fr;
  }

  .mesmod__row {
    grid-template-columns: 32px 1fr;
  }

  .mesmod__why {
    grid-column: 2;
  }
}

/* ===== components/pages-moduly-[slug].css ===== */
/* z src/pages/moduly/[slug].astro */
/* --- Hero doplňky ------------------------------------------------------------- */
.roles {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.roles__label {
  margin-right: 6px;
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.roles__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles__chip {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-chip);
  font-size: var(--text-body-xs);
  color: var(--color-text-invert-soft);
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

/* --- Co řeší ------------------------------------------------------------------- */
.resi {
  background: var(--color-bg);
}

.resi__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .resi__grid {
    grid-template-columns: 1fr;
  }
}

.resi__title {
  font-size: var(--text-display-m-sub);
  max-width: 16ch;
}

.resi__kota {
  margin-top: 22px;
}

.resi__text {
  display: grid;
  gap: 18px;
}

.resi__text p {
  font-size: var(--text-article);
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 68ch;
}

.resi__text .resi__lead {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Funkce --------------------------------------------------------------------- */
.fn {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.fn__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fn__title {
  font-size: var(--text-display-m-sub);
}

.fn__count {
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.fn__grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.fn__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-s);
  padding: 22px 22px 24px;
  animation: om-rise 0.6s ease-out both;
}

.fn__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.fn__no {
  font-size: var(--text-mono-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}

/* Krátká linka v hlavičce karty — v Designu akcentová; podle 02-design-system neutrální. */
.fn__rule {
  width: 22px;
  height: 1px;
  background: var(--color-border-strong);
}

.fn__card-title {
  margin-top: 14px;
  font-size: var(--text-display-xs);
  font-weight: 600;
}

.fn__card-text {
  margin-top: 8px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.fn__note {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 1px solid var(--color-border-strong);
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 70ch;
}

/* --- Snímek --------------------------------------------------------------------- */
.shot {
  background: var(--color-bg);
}

.shot__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.shot__scale {
  color: var(--color-text-faint);
}

.shot__fig {
  margin: 20px 0 0;
  animation: om-rise 0.7s ease-out both;
}

.shot__frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-muted);
  box-shadow: var(--shadow-card);
}

.shot__frame img {
  width: 100%;
  height: auto;
}

.shot__caption {
  margin-top: 14px;
  font-size: var(--text-body-s);
  color: var(--color-text-muted);
  max-width: 70ch;
}

/* --- Jak navazuje ----------------------------------------------------------------- */
.nav {
  position: relative;
  overflow: hidden;
}

.nav__inner {
  position: relative;
}

.nav__title {
  font-size: var(--text-display-m-sub);
  color: var(--color-text-invert);
  max-width: 20ch;
}

.nav__chain {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.nav__chip {
  padding: 12px 16px;
  border-radius: 9px;
  font-size: var(--text-body-s);
  background: var(--color-dark-alt);
  border: 1px solid var(--color-line-dark-2);
  color: var(--color-text-invert-muted);
}

.nav__chip--on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.nav__linked {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.nav__linked-label {
  margin-right: 6px;
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.nav__linked-list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__linked-chip {
  padding: 7px 11px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-button);
  font-size: 13px;
  color: var(--color-text-invert-muted);
}

.nav__text {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}

.nav__text p {
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
  color: var(--color-text-invert-muted);
  max-width: 70ch;
}

.nav__text strong {
  color: var(--color-text-invert);
  font-weight: 600;
}

/* ===== components/pages-moduly-index.css ===== */
/* z src/pages/moduly/index.astro */
/* --- Hero: dlaždice oblastí ------------------------------------------------- */
.mi-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.mi-stats__tile {
  padding: 16px;
  border-right: 1px solid var(--color-border-invert);
  border-bottom: 1px solid var(--color-border-invert);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) ease;
}

.mi-stats__tile:nth-child(2n) {
  border-right: 0;
}

.mi-stats__tile:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.mi-stats__tile:hover {
  background: var(--color-hover-invert);
  color: inherit;
}

.mi-stats__n {
  display: block;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text-invert);
}

.mi-stats__label {
  display: block;
  margin-top: 6px;
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.mi-stats__note {
  margin-top: 14px;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-xs);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

/* --- Filtr a skupiny -------------------------------------------------------- */
.mods {
  background: var(--color-bg);
  padding-block: clamp(36px, 4vw, 56px) var(--section-pad-sub);
}

.mods__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mods__filter-label {
  margin-right: 8px;
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.mods__chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.mods__chip:hover {
  border-color: var(--color-border-strong);
}

.mods__chip.is-active {
  background: var(--color-dark);
  color: var(--color-text-invert);
  border-color: var(--color-dark);
}

.group {
  margin-top: clamp(36px, 4vw, 56px);
  scroll-margin-top: calc(var(--header-h-scrolled) + 24px);
}

.group[hidden] {
  display: none;
}

.group__head {
  align-items: end;
}

.group__title {
  margin-top: 12px;
  font-size: clamp(26px, 3vw, 38px);
}

.group__note {
  font-size: var(--text-body-m);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: 52ch;
}

.group__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  color: var(--color-text-muted);
}

.group__tick {
  width: 1px;
  height: 10px;
  background: var(--color-border-strong);
}

.group__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  transform-origin: left;
  animation: om-wipe 0.9s var(--ease-out) both;
}

.group__count {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
}

.group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: 22px;
}

/* --- Tok dat ------------------------------------------------------------------- */
.mi-flow {
  position: relative;
  overflow: hidden;
}

.mi-flow__inner {
  position: relative;
}

.mi-flow__grid {
  align-items: center;
}

.mi-flow__title {
  margin-top: 14px;
  font-size: var(--text-display-m);
  color: var(--color-text-invert);
  max-width: 18ch;
}

.mi-flow__text {
  margin-top: 16px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-invert-muted);
  max-width: 60ch;
}

.mi-flow__text:first-of-type {
  margin-top: 20px;
}

.mi-flow__fig {
  margin: 0;
}

.mi-flow__fig svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.mi-flow__fig [data-anim] {
  animation: om-rise 0.55s ease-out both;
}

.mi-flow__spine {
  stroke: var(--color-line-dark-2);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 4 6;
}

.mi-flow__pulse {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 46 340;
  animation: om-dash 5s linear infinite !important;
}

.mi-flow__node {
  fill: var(--color-dark-alt);
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.mi-flow__box {
  fill: var(--color-dark);
  stroke: var(--color-line-dark-2);
}

.mi-flow__box--on {
  stroke: var(--color-accent);
}

.mi-flow__label {
  fill: var(--color-text-invert);
  font: 600 13px var(--font-body);
}

.mi-flow__sub {
  fill: var(--color-text-invert-faint);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.08em;
}

.mi-flow__sub--rot {
  letter-spacing: 0.14em;
}

/* ===== components/pages-o-nas.css ===== */
/* z src/pages/o-nas.astro */
/* --- Proč to je podstatné ------------------------------------------------------ */
.why {
  background: var(--color-bg);
}

.why__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .why__grid {
    grid-template-columns: 1fr;
  }
}

.why__rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.why__tick {
  width: 1px;
  height: 10px;
  background: var(--color-border-strong);
}

.why__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  transform-origin: left;
  animation: om-wipe 0.9s var(--ease-out) both;
}

.why__text {
  display: grid;
  gap: 20px;
}

.why__text p {
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 66ch;
}

.why__text .why__lead {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: 44ch;
}

/* --- Jak pracujeme ------------------------------------------------------------- */
.how__grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.how__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.4vw, 30px);
  animation: om-rise 0.6s ease-out both;
}

.how__no {
  font-size: var(--text-mono-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.how__title {
  margin-top: 16px;
  font-size: 23px;
  font-weight: 600;
}

.how__text {
  margin-top: 12px;
  font-size: var(--text-body-m);
  line-height: 1.65;
  color: var(--color-text-body);
}

/* --- Tým ------------------------------------------------------------------------- */
.team {
  background: var(--color-bg);
}

/* Nadpis nad seznamem, seznam přes celou šířku (bez fotky by vlevo zůstávala prázdná plocha). */
.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.team__title {
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 42px);
}




.team__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.person {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1fr) 170px 250px;
  gap: 12px 32px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
  animation: om-rise 0.55s ease-out both;
}

@media (max-width: 760px) {
  .person {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.person__who {
  display: contents;
}

.person__name {
  font-size: 21px;
  font-weight: 600;
}

.person__role {
  margin-top: 0;
  align-self: baseline;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.person__contact {
  display: contents;
  font-size: var(--text-mono-m);
  line-height: 1.8;
}

@media (max-width: 760px) {
  .person__contact {
    display: grid;
    gap: 4px;
    margin-top: 4px;
  }
}

.person__contact .link-arrow {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  justify-self: start;
}

/* --- Firemní údaje ---------------------------------------------------------------- */
.co {
  padding-block: clamp(44px, 5vw, 72px);
}

.co__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .co__grid {
    grid-template-columns: 1fr;
  }
}

.co__name {
  margin-top: 14px;
  font-size: 26px;
  font-weight: 600;
  color: var(--color-text-invert);
}

.co__address {
  margin-top: 14px;
  font-style: normal;
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
  color: var(--color-text-invert-muted);
}

.co__ids {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-panel);
  overflow: hidden;
  font-size: var(--text-mono-2xs);
  line-height: 1.6;
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.co__ids > div {
  padding: 16px;
  border-right: 1px solid var(--color-border-invert);
}

.co__ids > div:last-child {
  border-right: 0;
}

.co__ids dd {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-invert);
  text-transform: none;
}

.co__ids a {
  color: var(--color-text-invert);
}

.co__ids .doplnit {
  font-size: 11px;
}

.how__heading {
  margin-top: 14px;
  font-size: var(--text-display-m-sub);
}

/* --- Jak používáme AI --------------------------------------------------------- */
.aiu {
  position: relative;
  overflow: hidden;
}

.aiu__inner {
  position: relative;
}

.aiu__head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

@media (max-width: 900px) {
  .aiu__head {
    grid-template-columns: 1fr;
  }
}

.aiu__title {
  margin-top: 14px;
  font-size: var(--text-display-m-sub);
  color: var(--color-text-invert);
  max-width: 18ch;
}

.aiu__intro {
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-invert-muted);
  max-width: 60ch;
}

.aiu__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: var(--section-gap);
}

@media (max-width: 900px) {
  .aiu__cols {
    grid-template-columns: 1fr;
  }
}

.aiu__col {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card);
  background: var(--color-dark);
  animation: om-rise 0.6s ease-out both;
}

.aiu__col-title {
  font-size: var(--text-display-s);
  font-weight: 600;
  color: var(--color-text-invert);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-invert);
}

.aiu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aiu__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-invert-soft);
}

.aiu__item:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.aiu__no {
  font-size: var(--text-mono-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-invert-faint);
  padding-top: 3px;
}

.aiu__item-title {
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--color-text-invert);
}

.aiu__item-text {
  margin-top: 6px;
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-invert-muted);
}

.aiu__kota {
  margin-top: clamp(28px, 3vw, 40px);
}

/* ===== components/pages-obory-[slug].css ===== */
/* z src/pages/obory/[slug].astro */
.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

/* --- Foto v heru (placeholder, dokud fotky nejsou) ------------------------ */
.foto {
  margin: 0;
}

.foto__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-placeholder-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.foto__frame--img {
  aspect-ratio: auto;
  padding: 0;
  display: block;
}

.foto__frame--img img {
  width: 100%;
  height: auto;
  display: block;
}

.foto__placeholder,
.foto__caption {
  font-size: var(--text-mono-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
}

.foto__placeholder {
  color: var(--color-text-invert-faint);
}

.foto__caption {
  margin-top: 10px;
  color: var(--color-line-dark);
}

/* --- Tři věci ------------------------------------------------------------------ */
.spec {
  background: var(--color-bg);
}

.spec__title {
  margin-top: 14px;
  font-size: var(--text-display-m-sub);
  max-width: 24ch;
}

.spec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: 32px;
}

.spec__item {
  display: flex;
  flex-direction: column;
  animation: om-rise 0.6s ease-out both;
}

.spec__no {
  font-size: var(--text-mono-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}

.spec__h {
  margin-top: 14px;
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 600;
  max-width: 20ch;
}

.spec__problem {
  margin-top: 14px;
  font-size: var(--text-body-m);
  line-height: 1.65;
  color: var(--color-text-muted);
  flex: 1;
}

.spec__rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
}

.spec__tick {
  width: 1px;
  height: 9px;
  background: var(--color-border-strong);
}

.spec__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  transform-origin: left;
  animation: om-wipe 0.7s ease-out both;
}

.spec__answer {
  font-size: var(--text-body-m);
  line-height: 1.6;
  font-weight: 600;
}

/* --- Tabulka modulů ------------------------------------------------------------- */
.mod {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.mod__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.mod__title {
  margin-top: 14px;
  font-size: var(--text-display-m-sub);
}

.mod__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.mod__row {
  display: grid;
  grid-template-columns: 44px minmax(180px, 1fr) 2fr;
  gap: 12px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
  animation: om-rise 0.5s ease-out both;
}

@media (max-width: 700px) {
  .mod__row {
    grid-template-columns: 44px 1fr;
    gap: 6px 18px;
  }

  .mod__row > :last-child {
    grid-column: 2;
  }
}

.mod__no {
  font-size: var(--text-mono-xs);
  line-height: 1.4;
  color: var(--color-text-faint);
}

.mod__name {
  font-size: var(--text-display-xs);
  font-weight: 600;
  justify-self: start;
}

.mod__why {
  font-size: var(--text-body-m);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* --- Reference z oboru ------------------------------------------------------------ */
.ref {
  background: var(--color-dark);
  color: var(--color-text-invert);
  padding-block: clamp(36px, 4vw, 56px);
}

.ref--studie {
  padding-block: var(--section-pad-sub);
}

.ref__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .ref__grid {
    grid-template-columns: 1fr;
  }
}

.ref__firma {
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--color-text-invert);
}

.ref__text {
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
  color: var(--color-text-invert-muted);
  max-width: 64ch;
}

.ref .ref__link {
  display: inline-block;
  margin-top: 20px;
}

.ref__todo {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  font-size: var(--text-mono-s);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-text-invert-faint);
}

/* ===== components/pages-obory-index.css ===== */
/* z src/pages/obory/index.astro */
.ob {
  background: var(--color-bg);
}

.ob__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 760px) {
  .ob__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== components/pages-ochrana-osobnich-udaju.css ===== */
/* z src/pages/ochrana-osobnich-udaju.astro */
.oou__title {
  margin-top: 16px;
  font-size: var(--text-display-l);
}

.oou__lead {
  margin-top: 20px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-body);
}

.oou__date {
  margin-top: 14px;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.oou__sec {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.oou__h2 {
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
}

.oou__p {
  margin-top: 14px;
  line-height: 1.65;
  color: var(--color-text-body);
}

.oou__list {
  margin: 14px 0 0;
  padding-left: 1.6em;
  list-style: lower-roman;
  line-height: 1.6;
  color: var(--color-text-body);
}

.oou__list li {
  padding-left: 6px;
  margin-top: 6px;
}

.oou__p a,
.oou__list a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== components/pages-pripadove-studie-[slug].css ===== */
/* z src/pages/pripadove-studie/[slug].astro */
/* --- Hero: pás faktů a foto ------------------------------------------------- */
.facts {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.facts__cell {
  padding: 14px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.facts__cell:last-child {
  border-right: 0;
}

@media (max-width: 520px) {
  .facts__cell {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .facts__cell:last-child {
    border-bottom: 0;
  }
}

.facts__label {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.facts__value {
  margin: 6px 0 0;
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--color-text-invert);
}

.st-foto {
  margin: 0;
}

.st-foto__logo {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 10px 16px;
  margin-bottom: 14px;
  background: var(--color-bg);
  border-radius: var(--radius-button);
}

.st-foto__logo img {
  height: 32px;
  width: auto;
  max-width: 200px;
}

.st-foto__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-placeholder-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.st-foto__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-foto__placeholder,
.st-foto__caption {
  font-size: var(--text-mono-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
}

.st-foto__placeholder {
  color: var(--color-text-invert-faint);
}

.st-foto__caption {
  margin-top: 10px;
  color: var(--color-line-dark);
}

/* --- Tělo: číslované kapitoly ------------------------------------------------- */
.body {
  background: var(--color-bg);
}

.body__col {
  max-width: 760px;
}

.chapters {
  counter-reset: kapitola;
}

.chapters h2 {
  counter-increment: kapitola;
  margin-top: clamp(32px, 4vw, 48px);
  font-size: clamp(24px, 2.4vw, 32px);
}

.chapters h2:first-child {
  margin-top: 0;
}

.chapters h2::before {
  content: '0' counter(kapitola);
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-mono-xs);
  letter-spacing: var(--mono-tracking);
  color: var(--color-text-faint);
}

.chapters p,
.chapters li {
  margin-top: 14px;
  font-size: var(--text-article);
  line-height: 1.75;
  color: var(--color-text-body);
}

.chapters h2 + p,
.chapters h2 + ul {
  margin-top: 18px;
}

.chapters strong {
  color: var(--color-text);
  font-weight: 600;
}

.chapters table {
  margin-top: 18px;
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-body-m);
}

.chapters td,
.chapters th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.results {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.results li {
  display: flex;
  gap: 12px;
  margin-top: 0;
}

.results li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  margin-top: 15px;
  background: var(--color-border-strong);
}

.quote {
  margin-top: 18px;
  border-left: 2px solid var(--color-dark);
  padding: 6px 0 6px 24px;
}

.quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 500;
  font-size: var(--text-quote);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.quote__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: var(--text-mono-s);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.quote__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  object-fit: cover;
}

.quote__avatar--placeholder {
  display: block;
  background: var(--color-placeholder-light);
}

/* ===== components/pages-pripadove-studie-index.css ===== */
/* z src/pages/pripadove-studie/index.astro */
.logos {
  background: var(--color-bg);
}

.logos__grid {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.logos__item {
  height: 160px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 36px;
  background: var(--color-bg);
}

.logos__item img {
  max-width: 100%;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition:
    filter var(--dur-slow) ease,
    opacity var(--dur-slow) ease;
}

.logos__item:hover img {
  filter: none;
  opacity: 1;
}

.list {
  border-top: 1px solid var(--color-border);
}

.list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 20px;
}

/* Jedna karta nemá zabírat celou šířku. */
@media (min-width: 1024px) {
  .list__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== components/pages-pruvodce-vyberem.css ===== */
/* z src/pages/pruvodce-vyberem.astro */
.body--dark {
  background: var(--color-dark);
}


.pv__cti {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-size: var(--text-body-s);
  line-height: 1.6;
}

.pv__cti-uvod {
  color: var(--color-text-invert-muted);
}

.pv {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-text-invert);
}

.pv__inner {
  position: relative;
  padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px);
}

.pv [data-anim] {
  animation: om-rise 0.8s ease-out both;
}

.pv__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 960px) {
  .pv__grid {
    grid-template-columns: 1fr;
  }
}

.pv__title {
  margin-top: 22px;
  font-size: clamp(32px, 4.2vw, 54px);
  color: var(--color-text-invert);
  max-width: 24ch;
}

.pv__sub {
  margin-top: 18px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text-invert);
  max-width: 46ch;
}

.pv__text {
  margin-top: 16px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.65;
  color: var(--color-text-invert-muted);
  max-width: 60ch;
}

.pv__kota {
  margin-top: 22px;
}

.pv__obsah-title {
  margin-top: 40px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--color-text-invert);
}

.pv__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pv__item {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-body-l-fixed);
  line-height: 1.5;
  color: var(--color-text-invert-soft);
}

.pv__no {
  flex: none;
  width: 26px;
  font-size: var(--text-mono-s);
  color: var(--color-text-invert-faint);
  padding-top: 3px;
}

.pv__item--hl {
  margin-inline: -12px;
  padding-inline: 12px;
  background: rgba(62, 232, 192, 0.06);
  color: var(--color-text-invert);
  font-weight: 600;
}

.pv__item--hl .pv__no {
  color: var(--color-accent);
}

/* --- Pravý sloupec ------------------------------------------------------------ */
.pv__side {
  display: grid;
  gap: 20px;
}

.pv__card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-card);
  background: var(--color-dark-alt);
  padding: clamp(18px, 2vw, 24px);
}

.pv__card:first-child {
  padding: clamp(22px, 2.6vw, 30px);
}

.pv__form-title {
  margin-bottom: 20px;
  font-size: var(--text-display-s);
  font-weight: 600;
  color: var(--color-text-invert);
}

.pv__pages {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}

.pv__page {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  align-self: end;
}

.pv__page--cover {
  box-shadow: var(--shadow-raised);
}

.pv__preview-note {
  margin-top: 12px;
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking-s);
  text-transform: uppercase;
  color: var(--color-text-invert-faint);
}

.pv__contact {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--text-body-m);
  line-height: 1.7;
  color: var(--color-text-invert-muted);
}

.pv__contact strong {
  color: var(--color-text-invert);
}

.pv__role {
  font-size: var(--text-body-s);
}

.pv__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pv__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 22%;
  transform: scale(1.18);
  transform-origin: 52% 22%;
}

.pv__mail {
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 480px) {
  .pv__sep {
    display: none;
  }

  .pv__mail {
    display: inline-block;
    margin-top: 4px;
  }
}

/* ===== components/pages-styleguide.css ===== */
/* z src/pages/styleguide.astro */
.sg-h1 {
  margin-top: 16px;
  font-size: var(--text-display-l);
}

.sg-lead {
  margin-top: 16px;
  font-size: var(--text-body-l);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.sg-h2 {
  font-size: var(--text-display-m-sub);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.sg-note {
  margin-top: 14px;
  color: var(--color-text-muted);
  max-width: 70ch;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.sg-swatches {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.sg-swatch {
  display: grid;
  gap: 6px;
  font-size: var(--text-body-xs);
}

.sg-swatch__color {
  display: block;
  height: 56px;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
}

.sg-swatch__desc {
  color: var(--color-text-muted);
}

.sg-type {
  margin-top: 28px;
}

.sg-type__row {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.sg-type__sample {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  max-width: 22ch;
}

.sg-number {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: var(--text-number);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.sg-number span {
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-muted);
  margin-left: 0.15em;
  font-stretch: 100%;
}

.sg-row {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.sg-row--dark {
  padding: clamp(22px, 3vw, 36px);
  background: var(--color-dark);
  border-radius: var(--radius-card);
}

.sg-input {
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: 16px;
  min-width: 260px;
}

.sg-input:focus {
  border-color: var(--color-dark);
  outline: none;
}

.sg-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-dark);
}

.sg-cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.sg-card-title {
  margin-top: 18px;
  font-size: var(--text-display-s);
}

.sg-card-text {
  margin: 14px 0 22px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.sg-card-text--invert {
  color: var(--color-text-invert-muted);
}

/* ===== components/pages-technicke-informace.css ===== */
/* z src/pages/technicke-informace.astro */
/* --- Hero: hybridní provoz ------------------------------------------------------- */
.hy {
  margin: 0;
}

.hy svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.hy__cap {
  fill: var(--color-text-invert-faint);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
}

.hy__cap--s {
  letter-spacing: 0.12em;
}

.hy__panel {
  fill: var(--color-dark-alt);
  stroke: var(--color-line-dark-2);
  stroke-width: 1;
}

.hy__panel--cloud {
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.hy__panel-label {
  fill: var(--color-text-invert-faint);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.1em;
}

/* V Designu akcentový text; na tmavé ploše drží kontrast, ale držíme světlý text (CC-06 §6). */
.hy__panel-label--cloud {
  fill: var(--color-text-invert);
}

.hy__box {
  fill: var(--color-dark);
  stroke: var(--color-line-dark-2);
  transform-origin: left;
  animation: om-wipe 0.6s ease-out both;
}

.hy__box-label {
  fill: var(--color-text-invert);
  font: 500 12px var(--font-body);
}

.hy__note {
  fill: var(--color-text-invert-faint);
  font: 500 11px var(--font-body);
}

.hy__link {
  stroke: var(--color-accent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.hy__link-label {
  fill: var(--color-text-invert-faint);
  font: 500 9px var(--font-mono);
}

.hy__dim {
  stroke: var(--color-line-dark);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.hy__tick {
  stroke: var(--color-line-dark);
  stroke-width: 1;
}

/* --- Kde systém běží --------------------------------------------------------------- */
.run {
  background: var(--color-bg);
}

.run__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: 24px;
}

@media (max-width: 900px) {
  .run__grid {
    grid-template-columns: 1fr;
  }
}

.run__card {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-card-l);
  padding: clamp(22px, 2.8vw, 34px);
  animation: om-rise 0.7s ease-out both;
}

.run__card--alt {
  border-color: var(--color-border);
  background: var(--color-bg-muted);
}

.run__tag {
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.run__tag--std {
  color: var(--color-accent-text);
}

.run__title {
  margin-top: 14px;
  font-size: clamp(22px, 2.2vw, 28px);
}

.run__p {
  margin-top: 14px;
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
  color: var(--color-text-body);
}

.run__title + .run__p {
  margin-top: 16px;
}

.run__p strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Zabezpečení / Zálohování ----------------------------------------------------- */
.lists {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.lists__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}

@media (max-width: 900px) {
  .lists__grid {
    grid-template-columns: 1fr;
  }
}

.ti-hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.lists__title {
  margin-top: 14px;
}

.lists__title {
  font-size: clamp(24px, 2.4vw, 32px);
}

.lists__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.lists__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-m);
  line-height: 1.6;
  animation: om-rise 0.5s ease-out both;
}

.lists__no {
  font-size: var(--text-mono-xs);
  line-height: 1.5;
  color: var(--color-text-faint);
}

.lists__item strong {
  font-weight: 600;
}

/* --- Data ------------------------------------------------------------------------- */
.data {
  position: relative;
  overflow: hidden;
}

.data__inner {
  position: relative;
}

.data__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .data__grid {
    grid-template-columns: 1fr;
  }
}

.data__title {
  margin-top: 14px;
  font-size: var(--text-display-m-sub);
  color: var(--color-text-invert);
  max-width: 16ch;
}

.data__text {
  display: grid;
  gap: 18px;
}

.data__text p {
  font-size: var(--text-body-l-fixed);
  line-height: 1.7;
  color: var(--color-text-invert-muted);
  max-width: 66ch;
}

.data__text .data__lead {
  color: var(--color-text-invert);
  font-weight: 600;
}

/* --- Hardware --------------------------------------------------------------------- */
.hw {
  background: var(--color-bg);
}

.hw__title {
  margin-top: 14px;
}

.hw__title {
  font-size: var(--text-display-m-sub);
  max-width: 22ch;
}

.hw__grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.hw__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 28px);
  animation: om-rise 0.6s ease-out both;
}

.hw__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hw__no {
  font-size: var(--text-mono-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}

.hw__rule {
  width: 26px;
  height: 1px;
  background: var(--color-border-strong);
}

.hw__name {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 600;
}

.hw__text {
  margin-top: 10px;
  font-size: var(--text-body-m);
  line-height: 1.6;
  color: var(--color-text-muted);
  flex: 1;
}

.hw__todo {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border-strong);
  font-size: var(--text-body-xs);
  line-height: 1.6;
}

/* --- OpenAPI / Podpora / Ukončení ------------------------------------------------- */
.blk {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.blk__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.blk__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 28px);
  animation: om-rise 0.6s ease-out both;
}

.blk__contacts {
  margin: 16px 0 0;
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tile);
  overflow: hidden;
}

.blk__contact {
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) ease;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 14px;
  background: var(--color-bg);
}

.blk__contact:hover {
  background: var(--color-bg-muted);
  color: inherit;
}

.blk__contact-label {
  font-size: var(--text-mono-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.blk__contact-value {
  font-size: var(--text-mono-m);
  overflow-wrap: anywhere;
}

.blk__link {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.blk__title {
  margin-top: 14px;
  font-size: 21px;
  font-weight: 600;
}

.blk__p {
  margin-top: 14px;
  font-size: var(--text-body-m);
  line-height: 1.6;
  color: var(--color-text-body);
}

.blk__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.blk__list li {
  display: flex;
  gap: 12px;
  font-size: var(--text-body-m);
  line-height: 1.6;
  color: var(--color-text-body);
}

.blk__list li::before {
  content: '';
  flex: none;
  width: 12px;
  height: 1px;
  margin-top: 12px;
  background: var(--color-border-strong);
}